Download to read offline
![Тестируем QR код
it('shows QR (Aztec) code width as 196px', () => {
qr.should.have.property('width', 196)
})
it('shows black pixel in the middle of QR (Aztec) code', () => {
const blackPxSeq = [0, 0, 0, 255].join(',')
const middlePoint = Math.floor(canvasContext.canvas.width /2)
canvasContext
.getImageData(middlePoint, middlePoint, 1, 1)
.data.join(',')
.should.eql(blackPxSeq)
})
57](https://image.slidesharecdn.com/gpsolutions-170626221529/75/GP-Solutions-57-2048.jpg)
![Разрабатываем и наблюдаем
> view karma.conf.js
module.exports = function(config) {
config.set({
browsers: ['Chrome'],
plugins: [
'karma-notify-reporter'
],
notifyReporter: { reportEachFailure: true, reportSuccess: true }
> npm run test -- --reporters dots,notify
65](https://image.slidesharecdn.com/gpsolutions-170626221529/75/GP-Solutions-65-2048.jpg)
Uploaded byOntico
Тестируй это / Виктор Русакович (GP Solutions)
Документ подробно описывает тестирование программного обеспечения с акцентом на автоматизацию, включая управление тестами, использование различных библиотек и подходов к тестированию. Он охватывает как старые, так и новые приложения, предлагая примеры кода и стратегии для ускорения тестов. В заключение рассматриваются облачные сервисы для CI/CD, такие как Travis CI и Snap CI.
More Related Content
Similar to Тестируй это / Виктор Русакович (GP Solutions)
Тестируй это / Виктор Русакович (GP Solutions)
- 1. Тестируй это! Виктор Русакович GPSolutions Минск, Беларусь
- 2. Любите тесты? Любите писатьтесты? Любите запускать тесты? Любите вручную запускать тесты? Любите ждать тесты? Менеджер не понимает, зачем вам тесты? Как я вас понимаю... 2
- 3.
- 4.
- 5.
- 6. Наше старое приложение Back-end(API) - Java 90%, Scala - 9% Front-end - JavaScript 90%, SCSS - 10% Javascript - jQuery, RxJS 6
- 7. Наше старое приложение Javascript“features” - 55725 строк кода Javascript “tests” - 41516 строк кода 7
- 8. Back-end: 1000 юниттестов, 600 rest тестов Front-end: 6500 8500 юнит тестов Selenium: 150 тестов Тесты старого приложения 8
- 9. Последовательно Параллельно BE -Java UNIT 30c 30c :) BE - REST API 3600c 600c FE - Mocha (локально) 900c 300c FE - Mocha (сервер) 1800c 500c Selenium 3600c 600c 9
- 10.
- 11. Ускоряем тесты (неудаляя тесты) параллельный подход компонентный подход 11
- 12.
- 13. Последовательно Параллельно BE -Java UNIT 30c 30c :) BE - REST API 3600c 600c FE - Mocha (локально) 900c 300c FE - Mocha (сервер) 1800c 500c Selenium 3600c 600c 13
- 14. before((done) => { booking.loadApplication(done,{day: 1}) }) 14
- 15. Рендерим всё приложение before(()=> { booking.loadApplication({ selectedDate: today }) .then(() => { calendarEl('.date').trigger('click') }) }) 15
- 16. 1мин - 200тестов 16
- 17.
- 18. Рендерим только компонент,а не всё (helper) function makeComponent() { $el = Helpers.componentTestContainer('<section></section>') var calendar = CalendarView({root: $el}) $el.find('.calendar).show() calendar.render() } 18
- 19. Проверяем компонент, ане всё (before()) before(() => { booking.loadApplication({}) makeComponent() $calendarEl('.date').trigger('click') }) 19
- 20. 20 1мин - 3000тестов
- 21.
- 22.
- 23.
- 24. Тесты для готовогоприложения (не React и не Angular) запускать проверять подменять 24
- 25. Sinon.js 1. Spies 2. Stubs 3.Mocks (stub + assertion) 4. Fake timers 5. Fake XHR and server 25
- 26. Шпионы Зинона describe('Component', ()=> { const clickSpy = sinon.spy() before(() => { renderComponent({ onClick: clickSpy }) TestUtils.Simulate.click(el.querySelector('button')) }) it('calls function with "evening" as argument', () => { clickSpy.should.be.calledOnce clickSpy.should.be.calledWith('evening') }) }) 26
- 27. Зинон меняет время describe('Component',() => { const clock = sinon.useFakeTimers('setTimeout') before(() => { renderComponent() clock.tick(3000) }) it('hides element after timeout', () => { el.should.exist }) }) 27
- 28. Уберите за собой!!! after(()=> { clock.restore() }) 28
- 29. Шаг 1. Добавляембиблиотеки <link rel="stylesheet" media="all" href="mocha.css"> <script src="mocha.js"></script> <script src="chai.js"></script> 29
- 30. Шаг 2. НастраиваемMocha и Chai <script> mocha.setup('bdd|tdd') chai.should() </script> … <div id="mocha"></div> 30
- 31. BDD TDD describe(‘Component`, ()=> { before() beforeEach() after() afterEach() it(‘works’, () => { el.should.exist }) }) suite(‘Component’, () => { suiteSetup() setup() suiteTeardown() teardown() test(‘works’, () => { el.should.exist }) }) 31
- 32. mocha.js context.setup = common.beforeEach; context.teardown= common.afterEach; context.suiteSetup = common.before; context.suiteTeardown = common.after; https://github.com/mochajs/mocha/blob/master/mocha.js#L1191 32
- 33. Шаг 3. Загружаемтесты и запускаем их <script src="App.js"></script> ... <script src="App.spec.js"></script> <script> $(document).ready(mocha.run) </script> 33
- 34. <html> <head> <meta charset="utf-8"> <link rel="stylesheet"href="app.css"> <script src="App.js"></script> </head> <body> <h1>Instant result</h1> <div id="mocha"></div> <link rel="stylesheet" media="all" href="https://cdnjs….mocha/3.4.2/mocha.css"> <script src="https://cdnjs.cloudflare.com/ajax/libs/mocha/3.4.2/mocha.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/chai/4.0.0/chai.js"></script> <script> mocha.setup('bdd') chai.should() </script> <script src="App.spec.js"></script> <script> $(document).ready(mocha.run) </script> </body> </html> 34
- 35.
- 36. Шаг 4. Открываемв браузере /indexTest.html 36
- 37.
- 38.
- 39.
- 40.
- 41.
- 42. 1800 тестов за60 сек или 8500 тестов за 900 сек 42
- 43.
- 44.
- 45.
- 46.
- 47.
- 48.
- 49.
- 50. Тесты для компонентногоподхода (React) запускать проверять подменять 50
- 51.
- 52. Что проверяем? 1. Видимость(отрендерился или спрятался) 2. Классы у DOM элелементов 3. “Переводы” - текст внутри элементов 4. setTimeout / setInterval 5. Всё остальное 52
- 53. Render helper -создаём function renderWarning(newParams) { const defaultParams = { mobile: false, country: 'XZ', error: false } const params = { ...defaultParams, ...newParams } const comp = TestUtils.renderIntoDocument(<Warning {...params} />) return ReactDOM.findDOMNode(comp) } 53
- 54. Render helper -используем testEl_1 = renderWarning({ mobile: true }) testEl_1 = <Warning country="XZ" mobile={true} error={false}/> testEl_2 = renderWarning({ country: "EN", error: true }) testEl_2 = <Warning country="EN" mobile={false} error={true}/> const defaultParams = { mobile: false, country: 'XZ', error: false } 54
- 55. Помощники для DOMтестов - chai-dom 1) document.getElementById('bar') .should.have.class('foo') 2) document.querySelector('.name') .should.have.text('John Doe') vs 1) document.getElementById('bar') .classList.indexOf('foo').should.be.gt(-1) 2) document.querySelector('.name') .innerText.should.contain('John Doe') 55
- 56.
- 57. Тестируем QR код it('showsQR (Aztec) code width as 196px', () => { qr.should.have.property('width', 196) }) it('shows black pixel in the middle of QR (Aztec) code', () => { const blackPxSeq = [0, 0, 0, 255].join(',') const middlePoint = Math.floor(canvasContext.canvas.width /2) canvasContext .getImageData(middlePoint, middlePoint, 1, 1) .data.join(',') .should.eql(blackPxSeq) }) 57
- 58. Как писать тесты?Рассказываем историю describe('when rendering mobile with error with RU country', () => { before(() => { el = renderWarning({ mobile: true, error: true, country: 'RU' }) }) it('adds "mobile" class', () => { el.should.have.class('mobile') }) it('shows "call support" button', () => { el.querySelector('.bi-button-call-support').should.exist }) }) 58 класс? отрисовался?
- 59. describe.only / it.only describe.only('whenrendering mobile with error with RU country', () => { before(() => { el = renderWarning({ mobile: true, error: true, country: 'RU' }) }) it('adds "mobile" class', () => { el.should.have.class('mobile') }) it('shows "call support" button', () => { el.querySelector('.bi-button-call-support').should.exist }) }) 59
- 60.
- 61. when rendering mobilewith error with RU country ✓ adds "mobile" class ✓ shows "call support" button Passed 2 tests of 2 61
- 62. import ... describe('Component', ()=> { let el before(() => { el = renderComponent({ prop: 'value' }) }) it('does something', () => { el.should.exist }) }) function renderComponent(params = {}) {...} 62
- 63.
- 64.
- 65. Разрабатываем и наблюдаем >view karma.conf.js module.exports = function(config) { config.set({ browsers: ['Chrome'], plugins: [ 'karma-notify-reporter' ], notifyReporter: { reportEachFailure: true, reportSuccess: true } > npm run test -- --reporters dots,notify 65
- 66.
- 67. Как подготовиться кCI? ● запуск тестов по команде, “npm test” ● скрипт запуска завершается после окончания тестов: ○ код выхода == 0 - тесты прошли успешно ○ код выхода != 0 - тесты упали ● создается отчет (по желанию) для построения списка тестов: junit.xml, TAP 67
- 68. Тесты в облаке- Travis-CI/Snap-CI 68
- 69. Форматы отчетов -JUnit (xml) <testsuite tests="2"> <testcase classname="file.js" name="Input file opened"/> <testcase classname="file.js" name="First line is empty"> <failure type="error">Expected “XAXA” to equal “”</failure> </testcase> </testsuite> 69
- 70. Форматы отчетов -TAP (Test Anything Protocol) 1..2 ok 1 - Input file opened not ok 2 - First line of the input valid 70
- 71. Консольный браузер npm installmocha-phantomjs 71 "dependencies": { "mocha-phantomjs": "3.3.2" }, "scripts" : { "test": "mocha-phantomjs index.html" }
- 72. Единая точка входав тесты и приложение <script> if (location.href.indexOf('runTest') !== -1) mocha.run() if (window.mochaPhantomJS) mochaPhantomJS.run() </script> 72
- 73. Travis CI ● Облачныйсервис для запуска тестов ● Легкая интеграция с github ○ бесплатно для открытых проектов ○ от $120 в месяц для закрытых (100 первых сборок - бесплатно!) ● JavaScript, PHP, C++, Ruby, Visual Basic 73
- 74. Snap-CI ● Облачный сервисдля запуска тестов ● Простая интеграция - привязать репозиторий и ввести команду для тестов ○ Бесплатно для открытых проектов ○ от $30 для закрытых проектов ● Больше настроек через GUI, например, запуск по расписанию (cron) - зачем? ● Дешевле ● Менее популярен среди open-source проектов August 1st 2017 74
- 75.
- 76. 76 ← dashboard Github -readme.md ↓
- 77.
- 78.
- 79.
- 80.
- 81.
- 82.
- 83.
- 84.
- 85.
- 86.
- 87.
- 88.
- 89.
- 90.
- 91.
- 92. 100%Столько тестов должны“проходить” перед релизом 92
- 93. 0%Столько тестов можно“сломать” в пятницу вечером 93
- 94.
- 95. Спасибо! Вопросы? Виктор Русакович изМинска GP Solutions