javascript 前端的 BDD 框架？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5198798/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
BDD framework for the frontend?
提问by ajsie
On the server side we have Rspec/Cucumber for BDD development (ruby) vowsjs (node.js)
在服务器端，我们有 Rspec/Cucumber 用于 BDD 开发（ruby）vowsjs（node.js）
Is there a BDD frameworks to use on web browsers (not qUnit or YUI test since these are only for TDD)?
是否有可在 Web 浏览器上使用的 BDD 框架（不是 qUnit 或 YUI 测试，因为它们仅用于 TDD）？
采纳答案by macarthy
Check out jasmine
查看茉莉花
describe("Jasmine", function() {
it("makes testing JavaScript awesome!", function() {
expect(yourCode).toBeLotsBetter();
});
});
http://pivotal.github.com/jasmine/
http://pivotal.github.com/jasmine/
https://github.com/pivotal/jasmine
https://github.com/pivotal/jasmine
Should_be ( sic ) very familiar to a ruby person
should_be ( 原文如此 ) 红宝石人非常熟悉
回答by cressie176
You could also look at Yadda. Rather than being a standalone test framework like CucumberJS, it enables to use a Gherkin like syntax from other frameworks like Mocha, Jasmine, CasperJS, Zombie, Qunit etc.
你也可以看看Yadda。它不是像 CucumberJS 这样的独立测试框架，而是可以使用来自其他框架（如 Mocha、Jasmine、CasperJS、Zombie、Qunit 等）的类似 Gherkin 的语法。
回答by Omni5cience
I'd second Jasmine, also take a look at Jasmine-species
我要第二个茉莉花，也看看茉莉花品种
Also of note is Kyuri-- It's a Gherkin (the Cucumber DSL) parser for javascript, originally it targeted Vows.js, but it also can generate plain old javascript stubs (however, it's still pretty buggy right now).
另外值得注意的是Kyuri——它是一个用于 javascript 的 Gherkin（黄瓜 DSL）解析器，最初它针对 Vows.js，但它也可以生成普通的旧 javascript 存根（但是，它现在仍然有很多问题）。
回答by Kyle Finley
Here's a list of testing frameworkslisted on the node wiki.
这是node wiki 上列出的测试框架列表。
cucumber-jslooks promising. Here's a sample of the syntax:
Cucumber-js看起来很有前途。以下是语法示例：
Feature source
特征来源
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
Step definitions
步骤定义
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();
});
回答by inf3rno
I think jasmine is just a TDD framework, not a BDD, because it does not have the two layers of abstraction BDD frameworks have:
我认为 jasmine 只是一个 TDD 框架，而不是 BDD，因为它没有 BDD 框架所具有的两层抽象：
- What do we do? (usually in txt files)
- How do we do that? (reusable implementation in javascript)
- 我们做什么？（通常在txt文件中）
- 我们怎么做？（在 javascript 中可重用的实现）
But that's okay, it is a good starting point. I don't like reinventing the wheel (using a txt based language) either. I have found a BDD framework, which builds on jasmine, to me this was the perfect solution: https://github.com/DealerDotCom/karma-jasmine-cucumber
但这没关系，这是一个很好的起点。我也不喜欢重新发明轮子（使用基于 txt 的语言）。我找到了一个基于 jasmine 的 BDD 框架，对我来说这是完美的解决方案：https: //github.com/DealerDotCom/karma-jasmine-cucumber
For example:
例如：
specs.js (what we do)
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 (how we do it)
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);
})
Update 2016-02-16:
2016-02-16 更新：
After a few months of practice with BDD I ended up with txt based feature descriptions and ofc. with gherkin. I think it is better to write something really high abstraction level into the feature descriptions instead of what I previously wrote into my karma-jasmine-cucumber example. By my old example I would rather write something like this nowadays:
经过几个月的 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
This is how I like it currently. I use to let the step definitions to set the values of the fixtures and the assertions, but ofc. you can give Exampleswith gherkinif you want:
这就是我目前喜欢的方式。我使用让步骤定义来设置装置和断言的值，但是 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 |
Cucumbertranslates these 3 rows to 3 scenarios, e.g:
Cucumber将这 3 行转换为 3 个场景，例如：
Given I have 1, 2, 3, 6
When I add these numbers together
Then I should get 12 as result
Maybe it is somewhat easier to debug, but you have to write parser for these values, for example split the "1, 2, 3, 6" string and parseInt the values to get the numbers array. I think you can decide which way is better for you.
也许调试起来更容易一些，但是您必须为这些值编写解析器，例如拆分“1,2,3,6”字符串并解析值以获取数字数组。我认为您可以决定哪种方式更适合您。
What is really interesting with high abstraction level feature descriptions, that you can write multiple different step definitions. So for example you can test 2 different apis, which do the same thing, or to stick with the calculator example, you can write e2e tests for multiple user interfaces (cli, webapplication, etc.) or you can write a simple test, which tests the domain only. Anyways the feature descriptions are more or less reusable.
高抽象级别的特征描述真正有趣的是，您可以编写多个不同的步骤定义。因此，例如您可以测试 2 个不同的 api，它们做同样的事情，或者坚持使用计算器示例，您可以为多个用户界面（cli、webapplication 等）编写 e2e 测试，或者您可以编写一个简单的测试，其中仅测试域。无论如何，功能描述或多或少是可重用的。
Update 2016-04-15:
2016-04-15 更新：
I decided to use Yaddawith mochainstead of Cucumberwith jasmine. I liked Cucumber and jasmine too, but I think Yadda and mocha are more flexible.
我决定用Yadda和摩卡代替Cucumber和茉莉花。我也喜欢 Cucumber 和 jasmine，但我认为 Yadda 和 mocha 更灵活。
回答by jun
There's now karma-cucumberjs which can do Cucumber testing in real browsers as well as PhantomJS.
现在有 karma-cucumberjs 可以在真实浏览器和 PhantomJS 中进行 Cucumber 测试。
