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

Metalanguage

You could also look at Yadda. Rather than being a standalone test framework like CucumberJS, it enables BDD in other frameworks like Mocha, CasperJS, Qunit etc. – Barrios

Make this an answer and not a comment and I'll vote for it. The other answers are either too TDD-oriented (i.e. doesn't support gherkin syntax for acceptance tests) or cannot run in the browser (cucumber-js). – Spile

Answer 1

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

Octant

Neither Jasmine nor Mocha support plain-english acceptance tests. To me, this is the whole point of BDD (as opposed to TDD). I want to agree on behavior with stakeholders, then (continuously) test against this so all involved parties are held accountable. – Spile

@JohnSyrinek got a better alternative? I can see you've liked Yadda there, brought up by Steve == cressie176, but it's still built on top of the others such jasmine (I'm very new to all this). The op did mention cucumber, which looks like is already his choice for what Yadda does, so I think jasmine makes a whole lot of more sense here. Also, cucumber seems to be much more stable (like jasmine) than Yadda or Kyuri. – Orgulous

@Cawas Yadda is where it's at IMO. With Yadda, you use TDD libraries (Jasmine, Mocha, etc.) in your step definitions. Yadda adds the plain-English language support on top of these TDD libraries. Cucumber is a specific language for acceptance tests (Given, When, Then). Yadda uses this out-of-the-box but also allows you to fully customize the test parsers to meet your needs. As for stability, Yadda is plenty stable – I've never had an issue. I built something like Moonraker on a previous project, and would recommend starting there. – Spile

Answer 2

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.

Koh

cressie176 == Steve. I copy and pasted my own comment here so that people can vote on it (as suggested by John Syrinek). Guess that backfired! – Koh

Nice! I'll try it out. I like cucumber too, be it would be great to write the step definitions using an assertion lib or a TDD framework. – Gossamer

We'll eventually knock the wrong answer off someday. – Bosco

Answer 3

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

Seritaserjeant

Anyone running into this recently, note that jasmine-species hasn't been maintained since 2011. Not sure whether it still works, though. – Turnout

Answer 4

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

Lycian

I've been looking into running acceptance tests in real browsers with Karma and Mocha. As far as I know, Cucumber cannot be run in the browser. It's use of require() and other node libraries make this difficult at best, and may even be impossible. – Spile

Answer 5

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.

Gossamer

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

Overanxious

Answer 7

I can recommend BDD approach with WebdriverIO + CucumberJS, also if you are using Jira you can manage your tests with requirements via Jira Xray and also try cloud testing with Sauce Labs.

Parnell