BEM specs for ENB
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
examples
lib
.editorconfig
.eslintignore
.eslintrc
.gitignore
.jscsrc
.npmignore
.travis.yml
CHANGELOG.md
CONTRIBUTORS.md
LICENSE.txt
README.md
package.json

README.md

enb-bem-specs

NPM version Build Status Dependency Status

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

Установка

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

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

Технология spec.js в файловой системе

У каждой БЭМ-сущности может быть свой набор тестов, которые будут выполняться независимо от тестов остальных БЭМ-сущностей.

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

<block-name>/
 └── spec.js

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

$ tree -a <set-name>.specs

<set-name>.specs
 └── <block-name>/              # Бандл для БЭМ-сущности.
      ├── <block-name>.js       # Клиентский JavaScript,
                                # необходимый для выполнения тестов.
      ├── <block-name>.css      # Стили, необходимые для выполнения тестов.
      ├── <block-name>.spec.js  # Код тестов.
      └── <block-name>.html     # HTML, необходимый для выполнения тестов.
                                # Включает в себя js, css и spec.js таргеты.

Frameworks

Как написать тест?

Тесты пишутся в BDD-стиле с использованием асинхронной модульной системы YModules. Чтобы добавить тест для БЭМ-сущности, нужно в её директории на требуемом уровне переопределения создать файл с названием <bem-name>.spec.js.

Пример:

modules.define(
    'spec',
    ['button', 'i-bem__dom', 'jquery', 'BEMHTML'],
    function(provide, Button, BEMDOM, $, BEMHTML) {

describe('button', function() {
    var button;

    beforeEach(function() {
        button = BEMDOM.init($(BEMHTML.apply({ block: 'button', text: 'foo' })).appendTo('body'))
            .bem('button');
    });

    afterEach(function() {
        BEMDOM.destruct(button.domElem);
    });

    it('should be focused on pressrelease on itself', function() {
        button.hasMod('focused').should.be.false;
        button.domElem
            .trigger('pointerpress')
            .trigger('pointerrelease');
        button.hasMod('focused').should.be.true;
    });
});

provide();

});

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

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

Собранные HTML-файлы для каждой БЭМ-сущности содержат в себе необходимый код стилей и JavaScript, а так же код тестов. Эти HTML-файлы передаются в PhantomJS.

2014-09-21 23 40 20

Покрытие кода

Если при запуске переменная окружения ISTANBUL_COVERAGE будет равна значению yes, то после выполнения тестов в корне появится файл coverage.json с информацией о покрытии исходного JavaScript-кода тестами.

С помощью команды report инструмента istanbul можно составить HTML-отчёт на основе файла coverage.json:

$ istanbul report coverage.json

2014-09-21 23 51 31

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

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

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

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

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

    examples.configure({
        destPath: 'desktop.specs',
        levels: ['blocks'],
        sourceLevels: [
            { path: '../libs/bem-core/common.blocks', check: false },
            { path: '../libs/bem-pr/spec.blocks', check: false },
            'blocks'
        ]
    });
};

Опции

  • String destPath — путь относительно корня до нового сета с тестами, которые нужно собрать. Обязательная опция.
  • String[] | Object[] levels — уровни, в которых следует искать тесты. Обязательная опция.
  • String[] | Object[] sourceLevels — уровни, в которых следует искать JavaScript-код, необходимый для запуска тестов.
  • String[] jsSuffixes — суффиксы js-файлов БЭМ-сущностей. По умолчанию — ['js'].
  • String[] specSuffixes — суффиксы spec.js-файлов БЭМ-сущностей. По умолчанию — ['spec.js'].
  • String|Function depsTech — технология для раскрытия зависимостей. По умолчанию — deps-old.
  • Boolean langs — включает в сборку i18n.
  • String[] scripts — дополнительные js-скрипты, которые необходимо подключить на тестируемую страницу. Например:
scripts: ['https://yastatic.net/jquery/1.8.3/jquery.min.js',
        'https://yastatic.net/lodash/2.4.1/lodash.min.js'],
  • Boolean includeYM — добавляет в собираемый файл код модульной системы ym. По умолчанию — true.
  • Function schemeBuilder — схема именования. Требуется только для не-БЭМ схем именований.

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

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

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

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

Сборка и запуск всех тестов

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

$ ./node_modules/.bin/enb make specs

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

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

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

Лицензия

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