Skip to content

qfox/enb-bem-tmpl-specs

 
 

Repository files navigation

enb-bem-tmpl-specs

NPM version Build Status Dependency Status

Инструмент для сборки и запуска тестов на шаблоны. В процессе сборки генерируются сеты из бандлов с тестами на шаблоны БЭМ-блоков с помощью ENB.

Установка

$ npm install --save-dev enb-bem-tmpl-specs

Для работы модуля требуется зависимость от пакетов enb-magic-factory версии 0.3.x или выше, а также enb версии 0.13.0 или выше.

Как создать тест?

Чтобы добавить тест для БЭМ-сущности, нужно в её директории на требуемом уровне переопределения создать каталог с названием bem-name.tmpl-specs для хранения файлов тестов.

Каждый тест состоит из пары файлов в технологиях BEMJSON и HTML. Таких пар файлов у блока может быть несколько. Имена файлов произвольные, но они (не включая расширения) для каждого теста должны совпадать. Например, 10-default.bemjson.js и 10-default.html.

В BEMJSON-файле находится пример для БЭМ-сущности, в HTML – эталонный HTML-код, который должен получиться после выполнения шаблонов с данным BEMJSON.

$ tree -a <level>.blocks/<block-name>/<block-name>.tmpl-specs

<block-name>/
 └── <block-name>.tmpl-specs/
      ├── 10-default.bemjson.js
      ├── 10-default.html
      ├── 20-advanced.bemjson.js
      └── 20-advanced.html

Результат сборки

В результате будет построен уровень-сет из примеров, каждый из которых представляет собой обычный бандл (nested-уровень):

$ tree -a <set-name>.examples

<set-name>.tmpl-specs/
 └── <block-name>/
      ├── <block-name>.references.js  # Набор из пар эталонов (BEMJSON + HTML).
      ├── <block-name>.bemhtml.js     # Код BEMHTML-шаблонов, необходимый для
                                      #  выполнения эталонов из `references.js`.
      ├── <block-name>.bh.js          # Код BH-шаблонов, необходимый для
                                      #  выполнения эталонов из `references.js`.
      └── <block-name>.tmpl-spec.js   # Код тестов в BDD-стиле.

Поддержка шаблонизаторов

  • BEMHTML на основе XJST. Базовые шаблоны находятся в bem-bl.
  • BEMHTML на основе BEM-XJST. Базовые шаблоны находятся в bem-core.
  • BH.

Запуск тестов

После сборки уровней-сетов произойдёт запуск тестов на шаблоны для указанных БЭМ-сущностей.

Собранные tmpl-spec.js-файлы для каждой БЭМ-сущности подключают необходимые для выполнения шаблоны и наборы эталонов, а так же содержат код тестов в BDD-стиле. Эти файлы подаются на вход для mocha.

2014-09-22 12 50 05

Вывод ошибок

Если результат применения шаблона не совпадает с эталонным HTML, то в логе будет ошибка с указанием отличий от эталона.

2014-09-22 13 01 29

Для вывода различий используется html-differ.

Формат вывода ошибок

По умолчанию используется консольный отчет - spec. Другие форматы можно использовать, перечислив их в переменной окружения:

BEM_TMPL_SPECS_REPORTERS=html,summary,spec

Доступные форматы отчетов

Все генерируемые в файл отчеты сохранятся в директорию - tmpl-specs-reports/

  • summary - Генерирует отчет в JSON формате и сохраняет его в файл (summary.json).
{
     "suites": 4,
     "tests": 16,
     "passes": 10,
     "pending": 0,
     "failures": 6,
     "start": "2014-10-14T12:02:10.800Z",
     "end": "2014-10-14T12:02:11.207Z",
     "duration": 407,
     "skipped": 0
}
  • html - Генерирует отчет в HTML формате и сохраняет его в файл (report.html).

Как использовать?

В make-файле (.enb/make.js) нужно подключить модуль enb-bem-tmpl-specs. С помощью этого модуля следует создать конфигуратор, указав название таска, в рамках которого будет происходить сборка уровней сетов из тестов на шаблоны.

Конфигуратор имеет единственный метод configure. Его можно вызывать несколько раз, чтобы задекларировать сборку нескольких уровней-сетов.

module.exports = function (config) {
    config.includeConfig('enb-bem-tmpl-specs'); // Подключаем `enb-bem-tmpl-specs` модуль.

    var examples = config.module('enb-bem-tmpl-specs') // Создаём конфигуратор сетов
        .createConfigurator('tmpl-specs');             //  в рамках таска `specs`.

    examples.configure({
        destPath: 'desktop.tmpl-specs',
        levels: ['blocks'],
        sourceLevels: [
            { path: '../libs/bem-core/common.blocks', check: false },
            { path: 'blocks', check: true }
        ],
        engines: {
            bh: {
                tech: 'enb-bh/techs/bh-server',
                options: {
                    jsAttrName: 'data-bem',
                    jsAttrScheme: 'json'
                }
            },
            'bemhtml-dev': {
                tech: 'enb-bemxjst/techs/bemhtml-old',
                options: {
                    exportName: 'BEMHTML',
                    devMode: true
                }
            },
            'bemhtml-prod': {
                tech: 'enb-bemxjst/techs/bemhtml-old',
                options: {
                    exportName: 'BEMHTML',
                    devMode: false
                }
            }
        }
    });
};

Опции

  • String destPath — путь относительно корня до нового уровня-сета с тестами на шаблоны, которые нужно собрать. Обязательная опция.
  • String[] | Object[] levels — уровни, в которых следует искать эталоны. Обязательная опция.
  • String[] | Object[] sourceLevels — уровни, в которых следует искать код шаблонов, необходимый для шаблонизации эталонных BEMJSON-файлов.
  • String[] referenceDirSuffixes — суффиксы папок технологий с эталонами. По умолчанию — ['tmpl-specs'].
  • Object engines —  опция определяет какие ENB-технологии следует использовать для сборки шаблонов. Обязательная опция.

Запуск из консоли

В make-файле декларируется таск, в котором будет выполняться сборка уровней-сетов из тестов на шаблоны.

В ENB запуск таска осуществляется с помощью команды make, которой передаётся имя таска:

$ ./node_modules/.bin/enb make <task-name>

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

Если сборка уровней-сетов из тестов была задекларирована в таске tmpl-specs:

$ ./node_modules/.bin/enb make tmpl-specs

Сборка всех тестов на шаблоны для указанной БЭМ-сущности

Чтобы собрать тесты БЭМ-сущности block__elem для уровня-сета desktop.tmpl-specs:

$ ./node_modules/.bin/enb make tmpl-specs desktop.tmpl-specs/block__elem

Лицензия

© 2014 YANDEX LLC. Код лицензирован Mozilla Public License 2.0.

About

BEM template specs for ENB

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages

  • JavaScript 97.0%
  • CSS 3.0%