Преимущества компонентной разработки для...

Преимущества  компонентной  разработки  для  тестирования  интерфейсов

Гела  Сидорцова,  Яндекс  Girls  Not  Bombs  #1,  Минск,  4  сентября  2014

Гела  Сидорцова

gela-­‐d@yandex-­‐team.ru  

@gela_dd  

github.com/gela-­‐d  

Руководитель  группы                                                                                                            разработки  БЭМ-­‐библиотек

2

Краткое  содержание

Содержание

общее  о  библиотеке  

компонентный  подход  

уровни  

CodeStyle  

тестирование  (unit-­‐,  шаблоны,  gemini)  

conknuous  integrakon

4

bem-­‐components

bem-­‐components

основана  на  bem-­‐core  

19  блоков  

релиииииииз!  

 bem.info/libs/bem-­‐components

6

atach buton checkbox control-­‐group

dropdown icon input link

menu radio select spin

bem-­‐components:  blocks

7

Разработчики

8

Разработчики  и  документаторы

9

Компонентая  разработка

Уровни

11

Уровни

12

button

logo

user

input

navigationmarket-block

actions

map

search-block

Зачем?

удобно  разрабатываться  

удобно  дебажить  

стили,  js,  документация,  шаблоны,  всё,  все  разделено!!  

тестирование  отдельных  кусков  кода  

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

13

Уровни  пере-­‐  и  доопределений

Уровни

common  

desktop  

touch  

touch-­‐pad  

touch-­‐phone  

design

15

.blocks

theme / state plain mouseDown

default!!

без темы

simple!!

button_theme_simple

normal!!

button_theme_normal

design

16

tech.yandex.ru/events/yasubbotnik/minsk-aug-2013/talks/1046/

Уровни

17

CodeStyle

CodeStyle

jshint  

jscs  

jshint-­‐groups  

precommithook

19

Тестирование

Тестирование

unit-­‐тесты  для  js  

тесты  на  шаблоны  

визуальные  тесты  (gemini)  

ручное

21

unit-­‐тесты

unit-­‐тесты

пишем  отдельно  на  каждый  блок  

проверка  гарантированного  API  

mocha  тестовый  framework  

синтаксис:  visionmedia.github.io/mocha    

виртуальный  браузер  –  PhantomJS  

Istanbul  для  проверки  покрытия  

common.blocks/block/block.spec.js

23

unit-­‐тесты

24

unit-­‐тесты

25

Istanbul

26

Показывает % покрытия unit-тестами

Шесты  на  таблоны

Шаблонизаторы

28

Входные  данные

Шаблоны

BH BEMHTML

html

Тесты  на  шаблоны

пишем  на  каждый  блок  

сравниваем  результат  BEMHTML  и  BH  с  эталонным  HTML  

проверяется  с  помощью  tmpl-­‐specs  +  html-­‐differ  

common.blocks/block/block.tmpl-­‐specs/*.bemjson.js

29

Тесты  на  шаблоны

30

Тесты  на  шаблоны

31

Gemini

gemini

тестирование  верстки  

в  разных  браузерах  

разных  состояний  

умеет  скриншотить  небольшие  куски  

Подробнее  в  докладе  «Тестирование  CSS-­‐регрессий  с  Gemini  —  Сергей  Татаринцев»                                                                                                ru.bem.info/talks/bemup-­‐moscow-­‐2014

33

gemini-­‐тесты

пишем  на  каждый  блок  

сравниваем  собранные  картинки  с  эталонными  

common.blocks/block/block.tests/gemini.bemjson.js

34

gemini-­‐тесты

35

enabled / .capture('plain')

/ .capture('click', …)

/ .capture('text', …)

disabled / .capture('plain')

gemini-­‐тесты

36

Собираем пример. Запускаем тесты.

gemini-­‐тесты

37

Собираем пример. Запускаем тесты. Again.

gemini-­‐тесты

38

Наглядно смотрим: /gemini-report/index.html

Conknuous  integrakon

Conknuous  integrakon.  Travis.

40

Итоги

«А  карлик  ей  и  говорит»:

деление  на  компоненты  –  хорошо  

тесты  на  все,  что  можно  –  хорошо  

блоки  есть  в  opensource  

часть  про  тестирование  в  opensource

42

Потрогать/посмотреть

 bem.info/libs/bem-­‐components  

 github.com/bem/bem-­‐components

43

начать использовать и получать массу удовольствия

Гела  Сидорцова  Яндекс

gela-­‐d@yandex-­‐team.ru twiter.com/bem_ru

ru.bem.info/forum

bem.info

BEMup  в  Питере  6  сентября

45

tech.yandex.ru

bit.ly/bemup-­‐spb-­‐2014