Войти с помощью github

Ситуация такая: использую 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 не заходит так глубого во вложенности блоков. Что мне делать в данном случае или может можно как-то по другому решить проблему? Ударяюсь лбом о стену уже второй день =(

Спасибо!

Для тестирования понадобилось использовать зависимость, которая не нужна самому блоку. Пытаюсь подключить как-то так (deps.js):

([
{
    shouldDeps : [
        // ...
    ],
},
{
    tech : 'spec.js',
    shouldDeps : [
        { block : 'box' },
    ],
},
])

Здесь box -- именно то, что пытаюсь реквайрить в тесте:

modules.define('spec', [ 'box' ], function(provide, box) { /* ... */ });

В результате всё равно получаю Error: Module "spec": can't resolve dependence "box".

ЧДНТ?

Привет! Я хотел вкрутить юнит тесты в проекте по инструкции 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]
        ]);

Error: Seems like you have no base templates from i-bem.bemhtml

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

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

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

Может быть aria-hidden="true" или aria-hidden. Как попросить диффер считать записи эквивалентными?

Есть набор тестов браузерных на основе другого инструмента, который работает с 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()  );
    }
);

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

Привет. Как запускать тесты только со своего уровня библиотеки?

Получается так что для наших тестов нужны шаблоны и js из bem-core, bem-comprnents. Соответственно эти уровни есть в конфиге для тестов. Сейчас как минимум в консоль валятся репорты со всех уровней.

Второй вопрос. Сейчас некоторые тесты валятся, но эти тесты валятся если мы запускаем enb make specs со своего уровня библиотеки. если запускать внутри либ то все проходят нормально. Вопрос — как дебажить такое поведение?

Подскажите, как в spec.js тестировать промисы. Нужно что то дополнительно ставить? Есть пакет should-promised но он же в сборку все равно не попадет...

Есть огромный блок в котором куча разных вложненных блоков разного размера. В tmpl-spec хочется проверить что у блока есть нужные вложенные, при этом хочется чтобы html-differ не проверял содержмое эти вложенных блоков. Знаю, что у html-differ есть регулярки, но почему-то не получается с ними подружитсья: что не пишу, все равно красная простыня в diff.

Зарепортила баг: 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/ - как-то вывести те блоки, которые зависят от этого.

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

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