BDD framework for the frontend?

Question

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)?

Answer 1

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();
});

Answer 2

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).

Answer 3

I think jasmine is just a TDD framework, not a BDD, because it does not have the two layers of abstraction BDD frameworks have:

1. What do we do? (usually in txt files)
2. How do we do that? (reusable implementation in 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

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.

Answer 4

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

Answer 5

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.

Answer 6

There's now karma-cucumberjs which can do Cucumber testing in real browsers as well as PhantomJS.

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