Ситуация такая: использую borschik-js-include для подтянивания файлов из node_modules. Бандлы собираются - тесты (specs) не собираются. Пробовал решить ситуацию кардинально и заиспользовал browserify но столкнулся с той же самой проблемой.

Всем привет!

Пытаюсь написать примитивный тест на встраивание компонента. Использую Jest. Выглядит он примерно так:

import React from 'react';
import ReactDOM from 'react-dom';
import Button from 'b:Button';

it('renders without crashing', () => {
  const div = document.createElement('div');
  ReactDOM.render(<Button />, div);
});

Файл .babelrc

{
  "presets": [
    ["es2015"],
    "stage-1",
    "react"
  ],
  "env": {
    "test": {
      "plugins": [
        ["bem-import", {
          "techs": ["js"]
        }]
      ]
    }
  }
}

Файл .bemrc

module.exports = {
  root: true,
  levels: {
    'blocks': {
      scheme: 'nested',
      shemeOptions: 'react',
      naming: 'react'
    },
    'node_modules/@myBem/typography/blocks': {
      scheme: 'nested',
      shemeOptions: 'react',
      naming: 'react'
    },
    'node_modules/@myBem/icons/blocks': {
      scheme: 'nested',
      shemeOptions: 'react',
      naming: 'react'
    }
  }
}

Запуская тест командой npm test я получаю ошибку

FAIL  blocks/Button/Button.test.js
  ● Test suite failed to run

    Cannot find module 'm:paragraph' from 'Text.js'

      at Resolver.resolveModule (node_modules/jest-resolve/build/index.js:179:17)
      at Object.<anonymous> (node_modules/@myBem/typography/blocks/Text/Text.js:4:1)

Test Suites: 1 failed, 1 total
Tests:       0 total
Snapshots:   0 total
Time:        2.129s, estimated 3s

Дело в том что блок Button внутри себя делает import другого блока Text из node_modules/@myBem, который в свою очередь делает import модификатора paragraph. И вот тут у меня ощущение что модуль bem-import не заходит так глубого во вложенности блоков. Что мне делать в данном случае или может можно как-то по другому решить проблему? Ударяюсь лбом о стену уже второй день =(

Спасибо!

Привет! Я хотел вкрутить юнит тесты в проекте по инструкции https://ru.bem.info/toolbox/enb/enb-bem-specs/, но получил ошибку

Failed to start mocha: Init timeout Unsafe JavaScript attempt to access frame with URL about:blank from frame with URL

Решил попробовать на базовом проекте (https://github.com/bem/project-stub), но получил такой же результат. Посмотрел какие файлы формируются и заметил, что в конечных файлах тестов пустые html и css файлы. Пропущена какая-то зависимость?

Используется Selenium Server, при попытке тестирования на другом браузере, кроме Chrome, возникает ошибка. Например, вызов

browsers: { firefox: { desiredCapabilities: { browserName: 'firefox' } } }

дает следующее: GeminiError: Cannot launch browser firefox: [init({"browserName":"firefox"})] The environment you requested was unavailable

Хотя браузер поддерживается в Gemini - https://github.com/gemini-testing/gemini/blob/master/test/browser/util.js . В чем дело?

Здравствуйте. Станицу можно как-то скролить? Допустим я захватил body, но мне не нужен верх страницы, я хочу сделать скрин середины.

Помогите решить проблему со сборкой тестов. Самостоятельно не получается разобраться.

При тестах выпадают ошибки такого вида

Error: Module "form-field": can't resolve dependence "i-bem-dom"

  file:////home/sergey/projects/bem-forms/common.specs/form-field_required/form-field_required.spec.js:294
  file:////home/sergey/projects/bem-forms/common.specs/form-field_required/form-field_required.spec.js:342
  file:////home/sergey/projects/bem-forms/common.specs/form-field_required/form-field_required.spec.js:374
Error loading resource https://yastatic.net/jquery/2.2.3/jquery.min.js (5). Details: Operation canceled

Вот конфиг https://github.com/belozyorcev/bem-forms/blob/bem-core-v4/.enb/make.js

upd. Смотрел конфиги bem-components, как тёмный лес.. Куда глядеть не понятно.

upd. Странно... Если подключить уровень для сборки тестов из библиотек, вместо проекта, то всё собирается. Может проблема в депсах?

upd. в bem-components увидел незнакомое мне описание депсов

[{
    mustDeps : { block : 'i-bem-dom' },
    shouldDeps : [
        {
            elems : ['box', 'control', 'text'],
            mods : { disabled : true, checked : true, focused : true }
        },
        { block : 'jquery', elem : 'event', mods : { type : 'pointer' } },
        'control'
    ]
},
{
    tech : 'spec.js',
    mustDeps : { tech : 'bemhtml', block : 'radio' }
},
{
    tech : 'tmpl-spec.js',
    mustDeps : [
        { tech : 'bemhtml', block : 'radio', mods : { type : 'button' } },
        { tech : 'bemhtml', block : 'icon' }
    ]
}]

может в этом причина?

При вызове у button событие click() не происходит клик. Как вызвать через консоль?

Добре!

Есть пример как запустить тесты под BH engine

https://github.com/enb/enb-bem-specs/blob/master/examples/silly/.enb/make.js

Но как выяснилось это не работает.

Смотрите. Мне важно, чтобы блок был добавлен в html до исполнения JS.

зовут его b-legend

Для того, чтобы он попал в тесты используется специальный слой переопределения

app-specs.blocks где и лежит спец файл BH

app-specs.blocks/b-legend/b-legend.bh.js

Внутренность у него проста:

module.exports = function(bh) {
    bh.match('spec-content', function () {
        return {block: 'b-legend'};
    });
};

И да используется библиотека bem-pr где существует блок spec-content, переопределяя который по идее внутри должны получить блок b-legend.

Все бы хорошо, но не работает сборка bemdecl файлов в enb-bem-specs.

Добавил слои:

layers = [
   'app.blocks',
   'app-specs.blocks'
];

specs.configure({
    langs: false,
    destPath: 'specs',
    levels: layers,
    templateEngine: {
        templateTech: require('enb-bh/techs/bh-bundle'),
        templateOptions: {
            devMode: false
        },
        htmlTech: require('enb-bh/techs/bemjson-to-html'),
        htmlTechOptionNames: { bemjsonFile: 'bemjsonFile', templateFile: 'bhFile' }
    },
    sourceLevels: [
        { path: 'libs/bem-pr/spec.blocks', check: false }
    ].concat(layers),

    jsSuffixes: ['js'],
    specSuffixes: ['spec.js']
});

Запустил таск, появилась куча файлов в spec/b-legend:

И даже b-legend.base.bemdecl.js, содержит нужный блок. Но после всех mergeDeps, mergeDecl этот блок не попал в сборку BH. Но попал в сборку JS.

Оказывается вся загвоздка в том, что при сборке HTML, не учитывается базовая зависимость ?.base.bemdecl.js и следовательно ?.bemdecl.js

Что может спасти ситуацию?

Добавить эти зависимости для сборки html используя mergeDeps:

// Client BEMHTML
        nodeConfig.addTechs([
            [depsByTechToBemdecl, {
                target: '?.js.template.bemdecl.js',
                sourceTech: 'js',
                destTech: 'bemhtml'
            }],
            [depsByTechToBemdecl, {
                target: '?.spec-js.template.bemdecl.js',
                sourceTech: 'spec.js',
                destTech: 'bemhtml'
            }],
            [mergeBemdecl, {
                target: '?.template.bemdecl.js',
                sources: [
                    '?.js.template.bemdecl.js',
                    '?.spec-js.template.bemdecl.js',
                    '?.bemjson.bemdecl.js'
                ]
            }],
            [depsTech, {
                target: '?-pre.template.deps.js',
                bemdeclFile: '?.template.bemdecl.js'
            }],
            [mergeDeps, {
                target: '?.template.deps.js',
                sources: ['?.bemdecl.js', '?-pre.template.deps.js']
            }],
            [files, {
                depsFile: '?.template.deps.js',
                filesTarget: '?.template.files',
                dirsTarget: '?.template.dirs'
            }],
            [templateEngine.templateTech, templateEngineOpts]
        ]);

Хочется чтобы tmpl-specs не падали на шаблонах с i18n. В обычной сборке i18n доступен из this.i18n(). А как сделать, чтобы также было в шаблонах? В шаблонах тоже получается доступно но через this.require('i18n'). Но так не работает в enb server. Для сборки используем enb-bemxjst-i18n

Привожу конфиг

Есть набор тестов браузерных на основе другого инструмента, который работает с selenium wd также. Эти тесты открывают в сумме все страницы и воспроизводят многие состояния страницы.

Браузерные тесты и тесты на верстку с помощью gemini можно разделить условно на 2 повторяющиеся фазы: 1) Открытие страницы и вызов нужного состояния страницы. 2) Получить что-то со страницы / сделать скриншот.

С одной стороны тесты на верстку и функциональные тесты сами по себе. Но время прогона увеличивается в 2 раза, так как фактически 2 раза состояния воспроизводятся одни. Сначала в браузерных тестах, затем в тестах на верстку.

Если я верно понимаю, то мы можем в 1 инструменте стартануть selenium сессию и получить id сессии. А в другом инструменте (в данном слуаете gemini) послать команду на снятие скриншота. Но для этого нам нужно подсунуть id сессии (возможно еще что-то сделать). На более низком уровне это просто rest вызовы к selenium с указанием параметров и id сессии.

Gemini очень просто было бы внедрить в существующие тесты. Первый инструмент создает и останавливает сессии selenium и приводит страницу к нужному состоянию. А gemini в нужном месте выполняет свои запросы.

Насколько реально такое сделать или нет и почему? В чем сложность такого подхода. Было бы удобно скрестить функционал webdriver.io/nightwatchjs с gemini таким образом.

Привет.

Кто-нибудь использовал уже BackstopJS (ссылка: https://css-tricks.com/automating-css-regression-testing/). Меня интересует сравнение с Gemini. В чём они друг друга лучше?

пакет enb-bem-specs запускаю тесты:

build   05-Apr-2016 23:31:50    23:31:50.863 - [spec] [desktop.specs/actions-more/actions-more.html] 
build   05-Apr-2016 23:31:50    { [Error: Command failed: /bin/sh -c /usr/home/.../node_modules/enb-bem-specs/node_modules/mocha-phantomjs/bin/mocha-phantomjs --reporter spec file:////usr/home/.../desktop.specs/actions-more/actions-more.html
build   05-Apr-2016 23:31:50    ]
build   05-Apr-2016 23:31:50      killed: false,
build   05-Apr-2016 23:31:50      code: 2,
build   05-Apr-2016 23:31:50      signal: null,
build   05-Apr-2016 23:31:50      cmd: '/bin/sh -c /usr/home/..../node_modules/enb-bem-specs/node_modules/mocha-phantomjs/bin/mocha-phantomjs --reporter spec file:////usr/home/.../desktop.specs/actions-more/actions-more.html' }

Подскажите, куда копать?

Посмотрел выступление @just-boris на субботнике. Захотелось прикрутить selenium к проектам на БЭМ. Как это можно сделать?

Добре люди!

Занимаюсь формированием тестов через enb-bem-specs коя использует bem-pr

Так вот, при формировании странички блок spec в bem-pr перетирает себя так

block spec, default: applyCtx({ block: 'mocha' })

Но стало понятно, что для тестирование некоторых блоков нам нужно куда-то проинициализировать заранее шаблоны. Сделать это легко можно посредством BH (BEMHTML). Чтобы не нарушать идилию с блоком mocha появилась идея добавить еще один блок spec-content

Было (bem-pr/spec.blocks/spec/spec.bh.js):

module.exports = function(bh) {

bh.match('spec', function() {
    return { block : 'mocha', attrs: { id: 'mocha'} };
});

};

Стало:

module.exports = function(bh) {

bh.match('spec', function(ctx) {
    ctx.tag(null);
    ctx.content([
        {
            block: 'mocha'
        },
        {
            block: 'spec-content'
        }
    ]);
});

};

Подскажите, как будет верно тоже самое реализовать в BEMHTML, для того же блока?

Наконец научились запускать unit-тесты с enb-bem-specs

Пришлось, правда немного его доработать и даже были сделаны пулл-реквесты на основную репу.

Но как только начали массово внедрять поняли одну проблему.

enb-bem-specs тянет за собой тяжелые зависимости в виде phantomjs и остального по мелочи.

Однако у всех разработчиков уже есть PhantomJS и порой он по версиям сильно отличается.

Дошли до того, что не плохо было бы запускать фантом под докером, и обращаясь к докеру уже запускать тесты.

А вот зависимость из enb-bem-specs выпилить.

@blond были ли такие мысли насчет этого?

Да, и кстати, это упрощает запуск тестов на CI - задав нужное окружение.

Всем привет Коллеги, у меня концептульный вопрос. Мы на проекте используем Behat + PHPUnit и раним все это дело через Bamboo на виртуалках. Также настрена многопоточность выполнения features через parallel и объединение всех резалтов в один консолидированный репорт. На сервер Бамбу был установлен ImageMagic он входит в стандартные пакеты дистриюутива RH. Доступ к API ImageMagic осуществляется через нативные методы PHP класса Imagick Таким образом имея уже все описаные элементы страниц в функциональных тестах лекго их переиспользовать для визуальногт тестирования, что я и сделал. Get элемент на странице, передаю его в свой метод assertImage, который делает скрин страницы вырезает по координатам нужный объект и кладет его в папку с эталонами либо сравнивает с подготовленным эталоном в зависимости от конфига.
Результаты сравнения (etalon, actual, diff) выводятся в тот же репорт что и функциональные тесты таким образом мы используя наш фреймворк покрываем функциональное и визуальное тестирование и получаем один отчет. Результаты такого визаульного тестирования стабильные.

Использование Gemini подразумеват как минимум дублирование селекторов в другой туле, другой язык тестов, другой очет и много другого. Также наш фреймворк работает со всеми браузерами и лекго скролит страницу к нужному элементу и делает скрин нужного элемента, возможно и у gemini с этим все ок.

Есть ли смысл тогда выносить визуальное тестирвание в отдельныую тулу Gemini ? Может есть какие-то очевидные минусы нашего подхода, которые мне на первый взгляд не видны и какие-то явные преимущества Gemini, которые должны заставить переписать все элементы в другой туле и сапортить ее в дальнейшем. Спасибо

Метод find в колбеке состояния(capture) ищет элемент от селектора, который указан в setCaptureElements?

Добре!

Тут обнаружил, что спеки у меня генерируются, а вот тесты не запускаются.

enb-bem-spec пишет, что мод тесты не прошли. Оказалось, у меня проблема с фатномом. После того как я засунул вывод ошибки в этом месте

https://github.com/enb-bem/enb-bem-specs/blob/master/lib/runner.js#L166-L169

в консоль.

Написал так:

.then(function (err) {
        if (errorCount) {

            console.log(err); //<- 

            return vow.reject(new Error('specs: ' + errorCount + ' failing'));
        }
    }) : vow.resolve([]);

Вывод:

[ { _value: 
     { [Error: Command failed: /bin/sh -c /home/Projects/bem-project/node_modules/enb-bem-specs/node_modules/.bin/mocha-phantomjs --reporter spec file:////home/Projects/bem-project/specs/pc/platform/platform.html
     /bin/sh: 1: /home/Projects/bem-project/node_modules/enb-bem-specs/node_modules/.bin/mocha-phantomjs: not found
     ]
       killed: false,
       code: 127,
       signal: null,
       cmd: '/bin/sh -c /home/Projects/bem-project/node_modules/enb-bem-specs/node_modules/.bin/mocha-phantomjs --reporter spec file:////home/Projects/bem-project/specs/pc/platform/platform.html' },
    _status: 3,
    _fulfilledCallbacks: undefined,
    _rejectedCallbacks: undefined,
    _progressCallbacks: undefined },

 //.....
 ]

Ошибки то надо выводить! А то сидишь мучаешься.

В довесок напомню, что у многих есть BH, и надо бы уже давно принять МР: https://github.com/enb-bem/enb-bem-specs/pull/41

Добрый день. Вероятно, задам совсем базовый вопрос, но мне не удается запустить gemini в связке с browserstack.

Все делаю по инструкции https://ru.bem.info/tools/testing/gemini/

По пунктам.

1. Имеется оплаченный доступ на браузерстак.
2. Установлен компилятор.
3. gemini установлен глобально и локально.
4. установлен плагин gemini-browserstack

5. файл .gemini.yml (username и acessKey естественно введены верно.)

   rootUrl: http://http://yandex.com system: plugins:

    browserstack:
      username: 111
      accessKey: 1111111111111111111111
   

   browsers:

    ie11:
      desiredCapabilities:
        os: "WINDOWS"
        os_version: "7"
        browserName: "internet explorer"
        version: "11"
   

6. test.js полностью скопирован из примера:

   var gemini = require('gemini'); gemini.suite('yandex-search', function(suite) {

     suite.setUrl('/')
         .setCaptureElements('.main-table')
         .capture('plain')
         .capture('with text', function(actions, find) {
             actions.sendKeys(find('.input__control'), 'hello gemini');
         }); });
   

При попытке запуска команды gemini gather test выплевывается ошибка https://drive.google.com/open?id=0B0TKvOp7ysTEUllyN2c0OUxqamc

К сожалению, никаких мануалов по данному вопросу найти не удалось. Буду рад любым данным. Как конкретным ответам "сделай то-то и будет счастье", так и мануалам. Спасибо.

Добрый день,

Из описания executeJS(function(window)) - NB: Функция выполняется в контексте браузера, поэтому любые ссылки на её внешний контекст работать не будут.

В коде который ниже хотим как то параметризировать somePath, может у вас были такие кейсы или просто знаете как это реализовать.:

 suite.before(
            function( actions ) {
                actions.executeJS( function( window ) {
                    window.document.cookie = 'someCookie';
                    window.location.pathname = 'somePath';
                } );
                common.beforeFunction(size)(actions);
            }
        );

А в идеале хотим сделать что то типа:

suite.before(
    function( actions ) {
        actions.executeJS(  common.someFancyCallbackUsingExternalContext()  );
    }
);

Заранее спасбо, Слава

Зарепортила баг: https://github.com/gemini-testing/gemini/issues/270 Прозрачный в Yosemite - это совсем не тот прозрачный что и в El Capitano. Но как с этим справляться самостоятельно? Наверняка это не только Gemini аффектит. Подскажите идеи, пожалуйста.

Привет. Вопросы про Gemini, точнее про саму идею автоматизации визуального тестирования:

• Как называется такое тестирование, по каким словам гуглить?
• Какие инструменты отличные от Gemini вы знаете? Gemini меня полностью устраивает, но мне интересно посмотреть/почитать как люди внедряли инструменты такого типа и как это повлияло в целом на их процессы.
• Где найти статьи/презентации о таком вот визуальном тестировании? Можно и просто об инструментах, и можно о самой идее автоматизировать всё, в том числе и визуальное.

Спасибо!

Поделитесь, пожалуйста, как у вас организовано тестирование кода, какие тест раннеры используете. Примеры приветствуются.

Тут такое дело.

Тесты тестами, но их тоже пишут люди.

По этому частенько возникает идея через *.deps.js показать область affected.

Т.е. правлю я блок и выполняя какую-то команду enb make affected app/common.blocks/core/ - как-то вывести те блоки, которые зависят от этого.

Таким образом можно дать возможность понять, область где нагадили своим рефакторингом.

Может уже нечто подобно есть?