2. Проблемы
• Работает ли в браузере (пример .bind() и IE 8)?
• Изменили компонент – все вместе не завелось;
• Сделали новую задачу – сломали старый код;
• Устал от ctrl + r
• Добавьте свое
2
3. Время === ₽
• Время затраченное на ручную проверку кода
• … обновление браузера
• … написание кода
• … написание тестов
3
5. TDD
Разработка через тестирование (англ. test-
driven development, TDD) — техника разработки
программного обеспечения. Сначала пишется
тест, затем пишется код.
5
6. Ожидания
• Уменьшилось – Время на обновление
страницы
• Уменьшилось – Время на написание кода
• Уменьшилось – Время на ручную проверку
• Выросла – Вероятность нахождения ошибки
6
7. Концепции
๏ Юнит = функция -> результат
๏ Интеграционные – (Юнит + Юнит) ->
результат
๏ UI/UX – (Интеграционные + Верстка) ->
результат
7
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 run test
/app/**/__tests__/*.spec.js
testem
webpack-dev-
server
mocha
phantom.jsreport
webpack
http://localhost:8081
http://localhost:7357
34
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
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
