Борьба с багами
![](https://s3.amazonaws.com/media-p.slid.es/uploads/mkozhukh/images/944258/21052010102.jpg)
в реалиях
FrontEnd разработки
Максим Кожух
Бесполезная информация
Насекомые - самый успешный класс животных.
На каждого из нас приходится 300кг
![](https://s3.amazonaws.com/media-p.slid.es/uploads/mkozhukh/images/944224/881px-Insects_collage.jpg)
На каждые 2000 строк кода приходится 1 баг
На каждые 20 строк кода приходится 1 баг
Production
Development
![](https://s3.amazonaws.com/media-p.slid.es/uploads/mkozhukh/images/944198/bio002it07.gif)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/mkozhukh/images/944200/bio002it08.gif)
Количество баго по времени
- кодим-кодим-кодим
- фиксим-кодим-фиксим
- думаем
Что делать чтобы багов не было ?
- писать идеальный код
- написать много-много тестов
- пускай об этом думает QA
нет
нет
нет
TDD, BDD, прочее
Круто
- не тестирует внешний вид
- не тестирует поведение
- удваивает объем кода
- тестирует код
Не Круто
![](https://s3.amazonaws.com/media-p.slid.es/uploads/mkozhukh/images/949907/buddisty_.jpg)
Первая линия обороны
Asserts
function show(date){
//only dates in the past expected
assert(date < new Date());
calendar.select(date);
}
- ранний отлов ошибок
- хорошие error trace
- опциональны в production
![](https://s3.amazonaws.com/media-p.slid.es/uploads/mkozhukh/images/944353/assert-failed-list.png)
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
![](https://s3.amazonaws.com/media-p.slid.es/uploads/mkozhukh/images/945026/2014-12-19_0835.png)
Вторая линия обороны
Unit test
- без фанатизма
- только для сложных не UI модулей
- быстрые тесты
+ Mocha
- Karma
- Jasmine
Вторая линия обороны
F.
- без фанатизма
- скриншоты наше все
- быстрые тесты
+ CasperJS
- Selenium
Вторая линия обороны
F.
- без фанатизма
- скриншоты наше все
- быстрые тесты
+ CasperJS
- Selenium
![](https://s3.amazonaws.com/media-p.slid.es/uploads/mkozhukh/images/945039/68747470733a2f2f7261772e6769746875622e636f6d2f487564646c652f5068616e746f6d4353532f6d61737465722f726561646d655f6173736574732f696e74726f2d6578616d706c652e706e67.png)
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
![](https://s3.amazonaws.com/media-p.slid.es/uploads/mkozhukh/images/945055/2014-12-19_0852.png)
Бездушные роботы
Gremlins.js
![](https://s3.amazonaws.com/media-p.slid.es/uploads/mkozhukh/images/949931/20141223-140406_capture.gif)
Production
rollbar.com
![](https://s3.amazonaws.com/media-p.slid.es/uploads/mkozhukh/images/945063/2014-12-19_0900.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/mkozhukh/images/945064/2014-12-19_0901.png)
Бесполезная информация
Насекомые - появились
400 милионов лет назад
и процветают поныне
Люди приходят и уходят, а баги вечны.
![](https://s3.amazonaws.com/media-p.slid.es/uploads/mkozhukh/images/945069/269458.jpg)