On the server side we have Rspec/Cucumber for BDD development (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)?
On the server side we have Rspec/Cucumber for BDD development (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)?
Check out jasmine
describe("Jasmine", function() {
it("makes testing JavaScript awesome!", function() {
expect(yourCode).toBeLotsBetter();
});
});
http://pivotal.github.com/jasmine/
https://github.com/pivotal/jasmine
Should_be ( sic ) very familiar to a ruby person
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.
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).
Here's a list of testing frameworks listed on the node wiki.
cucumber-js looks promising. Here's a sample of the syntax:
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();
});
I think jasmine is just a TDD framework, not a BDD, because it does not have the two layers of abstraction BDD frameworks have:
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
For example:
specs.js (what we do)
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)
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:
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:
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 Examples
with gherkin if you want:
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 |
Cucumber translates these 3 rows to 3 scenarios, e.g:
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.
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.
Update 2016-04-15:
I decided to use Yadda with mocha instead of Cucumber with jasmine. I liked Cucumber and jasmine too, but I think Yadda and mocha are more flexible.
There's now karma-cucumberjs which can do Cucumber testing in real browsers as well as PhantomJS.
https://github.com/s9tpepper/karma-cucumberjs