БЭМ и JavaScript:...

Я.Субботник, Москва, 8 сентября 2012 года

Разработчик интерфейсовАлександр Тармолов

БЭМ и JavaScript: Тестирование

2

юнит-тестирование

что такое i-bem__test

как он работает

Плюсы юнит-тестов

3

4

модульное тестирование

код работает

безопасный рефакторинг

быстрая разработка (потом)

тесты — это документация

Мифы о юнит-тестах

5

6

юнит-тесты ловят всё

я — крутой программист

тесты — много времени

Как писать?

7

8

юнит-тест — один код

тестируем состояния, не код

моки для внешних сервисов

независимые тесты

i-bem__test

9

10

простое добавление тестов

сборка с помощью bem-make

тесты — часть БЭM

запуск из консоли и браузера

инфраструктура для тестов

Что под капотом?

11

12

13

Декларативный подход

Новая технология test.js

i-batman.jsi-batman.test.js

BEM.TEST.decl(‘i-batman’, function () {

// // проверки для Бэтмана //

});

14

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 — это инфраструктура для создания, сборки и запуска тестов

юнит-тесты — еще одна технология в рамках БЭМ

запуск тестов из консоля и браузера

быстрое добавление тестов и их запуск

юнит-тестирование — это очень просто :)

Разработчик интерфейсов

hevil@yandex-team.ru

@tarmolov

Александр Тармолов