Я.Субботник, Москва, 8 сентября 2012 года
Разработчик интерфейсовАлександр Тармолов
БЭМ и JavaScript: Тестирование
2
юнит-тестирование
что такое i-bem__test
как он работает
Плюсы юнит-тестов
3
4
модульное тестирование
код работает
безопасный рефакторинг
быстрая разработка (потом)
тесты — это документация
Мифы о юнит-тестах
5
6
юнит-тесты ловят всё
я — крутой программист
тесты — много времени
Как писать?
7
8
юнит-тест — один код
тестируем состояния, не код
моки для внешних сервисов
независимые тесты
i-bem__test
9
10
простое добавление тестов
сборка с помощью bem-make
тесты — часть БЭM
запуск из консоли и браузера
инфраструктура для тестов
Что под капотом?
11
13
Декларативный подход
Новая технология test.js
i-batman.jsi-batman.test.js
BEM.TEST.decl(‘i-batman’, function () {
// // проверки для Бэтмана //
});
15
компактный синтаксис
BDD
нет зависимостей
много готовых матчеров
16
PhantomJS
17
DOM, CSS селекторы
headless webkit
очень быстрый
действительно, очень быстрый!
18
19
Как это работает?
20
Пишем БЭМ-декларацию
$ bem create block -t js i-batman
BEM.decl(‘i-batman’, {
getName: function () {return ‘Batman’;
}
});
21
Пишем БЭМ-тест
$ bem create block -t test.js i-batman
BEM.TEST.decl('i-batman', function () { var block = BEM.create('i-batman');
it('requires proper name', function(){var batmanName = block.getName();expect(batmanName).toEqual(‘Batman’);
});
});
22
Запускаем
$ make test
Started....................Finished in 0.005 seconds.Specs total: 1Failed: 0
23
Тесты не прошли :(
http://localhost/tests/unit/unit.html
$ make test
StartedFi-batman -> requires proper nameFinished in 0.005 seconds.Specs total: 1Failed: 1
24
make test?
TESTS_DIRS ?= blocks
test: $(TESTS_DIRS)$(BEM) make testsphantomjs \ $(PHANTOM_RUNNER)\tests/unit/unit.html
25
pre-commit hook
TESTS_DIRS=$(git diff --cached --name-only --diff-filter=ACMR | awk '/.js$/{gsub("/[^/]+.js",""); s=s " " $0} END {print s}')
if [ "$TESTS_DIRS" ]; then make test TESTS_DIRS="$TESTS_DIRS" if [ $? -ne 0 ]; then exit 1 fi fi
26
Так просто! Хочу!
github.com/tarmolov/bem-bl-test
27
Стенд с i-bem__test
28
Повторим...
29
юнит-тесты — это помощь, а не наказание (но не «серебряная пуля»)
i-bem__test — это инфраструктура для создания, сборки и запуска тестов
юнит-тесты — еще одна технология в рамках БЭМ
запуск тестов из консоля и браузера
быстрое добавление тестов и их запуск
юнит-тестирование — это очень просто :)
Разработчик интерфейсов
@tarmolov
Александр Тармолов
Top Related