前端的BDD框架？

Question

在服务器端，我们有用于BDD开发的Rspec / Cucumber（ruby）vowsjs（node.js）

是否有在Web浏览器上使用的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

你也可以看看Yadda 。 它不是像CucumberJS那样独立的测试框架，而是可以使用其他框架中的Gherkin语法，如Mocha，Jasmine，CasperJS，Zombie，Qunit等。

Answer 3

我是第二个茉莉花，也看看茉莉花种

另外值得注意的是Kyuri - 这是一个用于javascript的Gherkin（黄瓜DSL）解析器，最初它针对的是Vows.js，但它也可以生成普通的旧javascript存根（但是，它现在仍然很漂亮）。

Answer 4

这是节点wiki上列出的测试框架列表。

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

我认为jasmine只是一个TDD框架，而不是BDD，因为它没有BDD框架的两层抽象：

1. 我们做什么？ （通常在txt文件中）
2. 我们怎么做？ （在javascript中可重用的实现）

但这没关系，这是一个很好的起点。 我也不喜欢重新发明轮子（使用基于txt的语言）。 我找到了一个基于jasmine构建的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

这就是我现在喜欢的方式。 我用来让步骤定义来设置灯具和断言的值，但是.c。 如果你愿意，你可以用小黄瓜给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，它们做同样的事情，或者坚持使用计算器示例，您可以为多个用户界面（cli，webapplication等）编写e2e测试，或者您可以编写一个简单的测试，仅测试域。 无论如何，功能描述或多或少都是可重用的。

更新2016-04-15：

我决定使用Yadda和摩卡代替黄瓜和茉莉 。 我也喜欢Cucumber和jasmine，但我认为Yadda和mocha更灵活。

Answer 6

现在有karma-cucumberjs可以在真正的浏览器和PhantomJS中进行Cucumber测试。

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