BDD рамки для интерфейса?

Question

На стороне сервера у нас есть Rspec / Cucumber для разработки BDD (ruby) vowsjs (node.js)

Существуют ли рамки BDD для использования в веб-браузерах (не для теста qUnit или YUI, поскольку они толькодля TDD)?

Answer 1

Проверьте Жасмин

describe("Jasmine", function() {
  it("makes testing JavaScript awesome!", function() {
    expect(yourCode).toBeLotsBetter();
  });
});

http://pivotal.github.com/jasmine/

https://github.com/pivotal/jasmine

Должен ли он быть знаком с рубином

Answer 2

Вы также можете посмотреть на Ядда .Вместо того, чтобы быть автономным тестовым фреймворком, таким как CucumberJS, он позволяет использовать подобный Gherkin синтаксис из других фреймворков, таких как Mocha, Jasmine, CasperJS, Zombie, Qunit и т. Д.

Answer 3

Я бы второй Жасмин, также взгляните на Жасминовый вид

Также стоит отметить Кюри - Это Огурец (огуречный DSL)синтаксический анализатор для javascript, изначально он предназначался для Vows.js, но он также может генерировать простые старые заглушки javascript (однако, он все еще довольно глючный прямо сейчас).

Answer 4

Вот список рамок тестирования , перечисленных на вики-узле.

cucumber-js выглядит многообещающе. Вот пример синтаксиса:

Источник элемента

Feature: Simple maths
  In order to do maths
  As a developer
  I want to increment variables

  Scenario: Increment variable once
    Given a variable set to 1
    When I increment the variable by 1
    Then the variable should contain 2

Определения шагов

var variable;

Given(/^a variable set to (\d+)$/, function(number, callback) {
  variable = parseInt(number);
  callback();
});

When(/^I increment the variable by (\d+)$/, function(number, callback) {
  variable += parseInt(number);
  callback();
});

Then(/^the variable should contain (\d+)$/, function(number, callback) {
  if (variable != parseInt(number))
    throw(new Error('Variable should contain '+number+' but it contains '+variable+'.'));
  callback();
});

Answer 5

Я думаю, что жасмин - это просто структура TDD, а не BDD, потому что она не имеет двухуровневых структур BDD абстракции:

1. Что мы делаем?(обычно в текстовых файлах)
2. Как мы это делаем?(многоразовая реализация в javascript)

Но ничего страшного, это хорошая отправная точка.Мне тоже не нравится изобретать велосипед (используя язык, основанный на txt).Я нашел BDD-фреймворк, основанный на жасмине, для меня это было идеальное решение: https://github.com/DealerDotCom/karma-jasmine-cucumber

Например:

specs.js (что мы делаем)

feature('Calculator: add')
    .scenario('should be able to add 2 numbers together')
        .when('I enter "1"')
        .and('I add "2"')
        .then('I should get "3"')
    .scenario('should be able to add to a result of a previous addition')
        .given('I added "1" and "2"')
        .when('I add "3"')
        .then('I should get "6"')

steps.js (как мы это делаем)

featureSteps('Calculator:')
    .before(function(){
        this.values = [];
        this.total = null;
    })
    .given('I added "(.*)" and "(.*)"', function(first, second){
        this.when('I enter "' + first + '"');
        this.when('I add "' + second + '"');
    })
    .when('I enter "(.*)"', function(val){
        this.values.push(val * 1);
    })
    .when('I add "(.*)"', function(val){
        this.values.push(val * 1);
        this.total = this.values[0] + this.values[1];
        this.values = [this.total];
    })
    .then('I should get "(.*)"', function(val){
        expect(this.total).toBe(val * 1);
    })

Обновление 2016-02-16:

После нескольких месяцев практики с BDD я закончил с описаниями функций на основе txt и ofc.с корнишоном.Я думаю, что лучше написать что-то действительно высокое уровень абстракции в описание функций, чем то, что я ранее написал в своем примере karma-jasmine-cucumber.По моему старому примеру, я бы предпочел написать что-то вроде этого в наше время:

  Scenario: Addition of numbers
    Given I have multiple numbers
    When I add these numbers together
    Then I should get their sum as result

Вот как мне это нравится сейчас.Я использую, чтобы позволить определениям шагов установить значения приборов и утверждений, но ofc.Вы можете дать Examples с огурцом , если хотите:

  Scenario: Addition of numbers
    Given I have <multiple numbers>
    When I add these numbers together
    Then I should get <their sum> as result

    Examples:
        | multiple numbers | their sum |
        |    1, 2, 3, 6    |     12    |
        |    8, 5          |     13    |
        |    5, -10, 32    |     27    |

Огурец переводит эти 3 строки в 3 сценария, например:

    Given I have 1, 2, 3, 6
    When I add these numbers together
    Then I should get 12 as result

Может быть, это несколько проще для отладки, но вы должны написать синтаксический анализатор для этих значений, например, разбить строку «1, 2, 3, 6» и parseInt значения, чтобы получить массив чисел.Я думаю, вы можете решить, какой путь лучше для вас.

Что действительно интересно с описаниями функций высокого уровня абстракции, так это то, что вы можете написать несколько разных определений шагов.Так, например, вы можете протестировать 2 разных API, которые делают то же самое, или придерживаться примера калькулятора, вы можете написать e2e тесты для нескольких пользовательских интерфейсов (cli, webapplication и т. Д.) Или вы можете написать простой тест, которыйтестирует только домен.В любом случае описания функций более или менее можно использовать повторно.

Обновление 2016-04-15:

Я решил использовать Yadda с мокко вместо огурец с жасмином .Мне тоже понравились огурец и жасмин, но я думаю, что Ядда и мокко более гибкие.

Answer 6

Теперь есть karma-cucumberjs, которые могут проводить тестирование Cucumber в реальных браузерах, а также в PhantomJS.

https://github.com/s9tpepper/karma-cucumberjs