Upload
yandex
View
2.238
Download
0
Embed Size (px)
DESCRIPTION
Мы строили-строили. Мы тестировали-тестировали. Мы писали документацию. Некоторые из вас принимали в этом активное участие и уже пользуются плодами работы. Теперь мы хотим поделиться нашими совместными результатами (19 готовых блоков!), рассказать о том, как вы можете ускорить разработку своих проектов, о том, что ждёт впереди, и о том, какие преимущества компонентной разработки для тестирования интерфейсов существуют.
Citation preview
Преимущества компонентной разработки для тестирования интерфейсов
Гела Сидорцова, Яндекс 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