Борьба с багами
в реалиях
FrontEnd разработки
Максим Кожух
Бесполезная информация
Насекомые - самый успешный класс животных.
На каждого из нас приходится 300кг
На каждые 2000 строк кода приходится 1 баг
На каждые 20 строк кода приходится 1 баг
Production
Development
Количество баго по времени
- кодим-кодим-кодим
- фиксим-кодим-фиксим
- думаем
Что делать чтобы багов не было ?
- писать идеальный код
- написать много-много тестов
- пускай об этом думает QA
нет
нет
нет
TDD, BDD, прочее
Круто
- не тестирует внешний вид
- не тестирует поведение
- удваивает объем кода
- тестирует код
Не Круто
Первая линия обороны
Asserts
function show(date){
//only dates in the past expected
assert(date < new Date());
calendar.select(date);
}
- ранний отлов ошибок
- хорошие error trace
- опциональны в production
Asserts
function show(count){
//only dates in the past expected
console.assert(list.childNodes.length < 10,
"List item count is >= 10");
list.load(count);
}
Первая линия обороны
jsHint
Проверка кода
- обязательно свои настройки
- интеграция с IDE
- малоэфективен без CI
Вторая линия обороны
Unit test
- без фанатизма
- только для сложных не UI модулей
- быстрые тесты
+ Mocha
- Karma
- Jasmine
Вторая линия обороны
F.
- без фанатизма
- скриншоты наше все
- быстрые тесты
+ CasperJS
- Selenium
Вторая линия обороны
F.
- без фанатизма
- скриншоты наше все
- быстрые тесты
+ CasperJS
- Selenium
casper.
start( url ).
then(function(){
// do something
casper.click('button#open-dialog');
// Take a screenshot of the UI component
phantomcss.screenshot('#the-dialog',
'a screenshot of my dialog');
});
Phantom CSS
CI - это не сложно
Drone.io
image: mkozhukh:drone
git:
depth: 1
script:
- npm install &>/dev/null
- gulp lint --fail
- gulp mocha
- gulp test
notify:
hipchat:
room: Builds
on_failure: true
Бездушные роботы
Gremlins.js
Production
rollbar.com
Бесполезная информация
Насекомые - появились
400 милионов лет назад
и процветают поныне
Люди приходят и уходят, а баги вечны.