Tdd webpack + testem + mocha + chai

Tdd webpack + testem + mocha + chai

• 1.
  Тестирование фронтенда миф илиреальность? Чернобров Михаил
• 2.
  Проблемы • Работает лив браузере (пример .bind() и IE 8)? • Изменили компонент – все вместе не завелось; • Сделали новую задачу – сломали старый код; • Устал от ctrl + r • Добавьте свое 2
• 3.
  Время === ₽ •Время затраченное на ручную проверку кода • … обновление браузера • … написание кода • … написание тестов 3
• 4.
  Решение 4
• 5.
  TDD Разработка через тестирование(англ. test- driven development, TDD) — техника разработки программного обеспечения. Сначала пишется тест, затем пишется код. 5
• 6.
  Ожидания • Уменьшилось –Время на обновление страницы • Уменьшилось – Время на написание кода • Уменьшилось – Время на ручную проверку • Выросла – Вероятность нахождения ошибки 6
• 7.
  Концепции ๏ Юнит =функция -> результат ๏ Интеграционные – (Юнит + Юнит) -> результат ๏ UI/UX – (Интеграционные + Верстка) -> результат 7
• 8.
  Визуализируем UNIT Интеграционные UI/UX 8
• 9.
  В деталях
• 10.
  Первая итерация • Сборкапроекта: Webpack • Запуск тестов: Karma (+ 6 плагинов) • Описание поведения: Jasmine • Отчеты: Mocha • Ожидания: Chai • Окружение: PhantomJS 10
• 11.
  11
• 12.
  12
• 13.
  Определяемся с инструментами Внедряем ОптимизируемПишем тесты План 13
• 14.
  Результат • Сборка проекта:Webpack • Запуск тестов: Testem • Описание поведения: Mocha • Отчеты: Mocha • Ожидания: Chai • Окружение: PhantomJS 14
• 15.
  Инструменты
• 16.
  Webpackhttps://github.com/webpack/webpack 16
• 17.
  Testemhttps://github.com/testem/testem 17
• 18.
  Mochahttps://github.com/mochajs/mocha 18
• 19.
  Chaihttps://github.com/chaijs/chai 19
• 20.
  https://github.com/ariya/phantomjs/ 20
• 21.
  Окружение
• 22.
  Режим CI 22
• 23.
  npm run test-ci /app/**/__tests__/*.spec.js testemwebpack mochaphantom.jsreport 23
• 24.
  Режим TDD 24
• 25.
  npm run test /app/**/__tests__/*.spec.js testem webpack-dev- server mocha phantom.jsreport webpack http://localhost:8081 http://localhost:7357 25
• 26.
  Внедрение
• 27.
  Подготовка • Установить зависмости •Создадим папку .bin • Положить 2 файла build-test.js и testem.js 27
• 28.
  package.json { "scripts": { … "build-test": "node.bin/build-test", "test": "NODE_ENV=tdd npm run build-test", "test-ci": "NODE_ENV=test-ci testem ci” … }, } } 28
• 29.
  testem.json { "framework": "mocha", "before_tests": "npmrun build-test", "after_tests": "rm -rf testing/", "serve_files": [ "testing/*.js" ], "launch_in_dev": [ "phantomjs" ], "launch_in_ci": [ "phantomjs" ] } 29
• 30.
  ./bin/testem.js function Testem() {} Testem.prototype.start= function(options, finalizer) { this.options = options || {}; this.config = new Config('dev', this.options); this.app = new App(this.config, finalizer); this.app.start(); }; Testem.prototype.restart = function() { this.app.triggerRun('Api: restart'); }; module.exports = Testem; 30
• 31.
  .bin/build-test.js glob('app/**/__tests__/*.spec.js', function(err, files){ config.entry = { a: dependencies, }; files.forEach(function(file) { config.entry[path.basename(file, '.js')] = path.join(__dirname, '..', file); }); // vendors config .plugins .push(new webpack.optimize .CommonsChunkPlugin('a', 'a.js')); // check NODE_ENV process && process.env && process.env.NODE_ENV === 'tdd' ? startServer(config) : createCompiller(config); }); 31
• 32.
  .bin/build-test.js (2) var startTestem= function(stat) { var options = { framework: 'mocha', launch_in_dev: [ 'phantomjs' ], serve_files: stat.compilation.chunks.map(value => { return `http://${host}:${port}/${value.files[0]}`; }) }; var Instance = new Testem; Instance.start(options, function() {}); return Instance; }; 32
• 33.
  .bin/build-test.js (3) var createCompiller= function(endConfig) { return webpack(endConfig, function() {}); }; var startServer = function(endConfig) { var testemInstance = false; var compiler = webpack(endConfig); compiler.plugin('done', stat => { !testemInstance && typeof testemInstance === 'boolean' ? testemInstance = startTestem(stat) : testemInstance.restart(); }); return new WebpackDevServer(compiler, { noInfo: true }).listen(port, host); }; 33
• 34.
  Цель достигнута npm runtest /app/**/__tests__/*.spec.js testem webpack-dev- server mocha phantom.jsreport webpack http://localhost:8081 http://localhost:7357 34
• 35.
  Реализация
• 36.
  Формальные тесты • Проверяютданные • Проверяют результат работы функции • Хранят представление о методах класса • Решают большую часть поставленных задач 36
• 37.
  Прогрессивные • Проверка производительностиопераций • Углубленная проверка логики • Проверка ассинхронных вызовов • Тесты на быстродействие (benchmarks) • Пользовательские действия и их результат • Другие сценарии которые нужно автоматизировать 37
• 38.
  Подопытный 'use strict'; var Backbone= require('backbone'); var Model = require('./models/message'); module.exports = Backbone.View.extend({ el: document.getElementById('body'), tagName: 'header', className: 'example', template: require('./templates/hello.jade'), model: new Model, initialize: function() { this.render(); }, render: function() { this.$el.append(this.template()); } }); 38
• 39.
  TDD режим npm runtest 39
• 40.
  'use strict'; const Module= require('_modules/boilerplate'); const expect = require('chai').expect; describe('App.modules.boilerplate', function() { let Instance = new Module(); it('Should be an function', function() { expect(Module).to.be.an('function'); }); it('Instance should be an object', function() { expect(Instance).to.be.an('object'); }); it('Instance should contains few el and $el properties', function() { expect(Instance).to.have.property('el'); expect(Instance).to.have.property('$el'); }); it('Instance should contains render() function', function() { expect(Instance).to.have.property('render').an('function'); }); }); Формальный тест 40
• 41.
  Запустим 41
• 42.
  Ожидаемый функционал
• 43.
  'use strict'; // Depends const$ = require('jquery'); const Module = require('_modules/boilerplate'); const expect = require('chai').expect; describe('App.modules.boilerplate', () => { let $el = $('<div>', { class: 'test-div' }); let Instance = new Module($el); it('Click at logo should load ip data', done =>{ Instance.model.on('change:ip', () => done(), this); Instance.$el.find('#rambler-logo').click(); }); it('Instance should contain .ip element', () => { expect(Instance.$el.find('.ip')).to.have.length(1); }); }); Покрываем тестами 43
• 44.
  Это норма 44
• 45.
  Напишем функционал 'use strict'; module.exports= Backbone.View.extend({ … initialize: function() { this.model.on('change:ip', () => this.update(), this); this.render(); }, load: function(e) { this.model.fetch(); e.preventDefault(); }, update: function() { this.$el.append( $('<div/>', { class: 'ip' }) .text(`YourIP: ${this.model.get('ip')}`) ); } }); 45
• 46.
  Успех! 46
• 47.
  Режим CI npm runtest-ci 47
• 48.
  Наблюдаем статус 48
• 49.
  Еще раз успех! 49
• 50.
  Литература 50
• 51.
  http://bit.ly/1N8HYSu Тестирование JS