Issue with callbacks in Cucumber.js scenario with ZombieJS

Question

I've got some experience with BDD tools like Cucumber and Lettuce. I'm currently building a Phonegap app, and I'd like to start using Cucumber.js to create acceptance tests for it. Unfortunately I'm having a bit of an issue.

Here is the basic feature file I've thrown together:

Feature: Authentication

    As a user
    I want to be able to log in and out

    Scenario: Logging in
        Given I am not logged in
        And I am on the page "login"
        When I fill in the "username" field with "student"
        And I fill in the "password" field with "password"
        And I click the "LOG IN" button
        Then I should see the text "STUDENT"

Here is my world.js :

var zombie = require('zombie');
var World = function World(callback) {
    "use strict";

    this.browser = new zombie(); // this.browser will be available in step definitions

    this.visit = function (url, callback) {
        this.browser.visit(url, callback);
    };

    callback(); // tell Cucumber we're finished and to use 'this' as the world instance
};
exports.World = World;

Here are my step definitions:

var wrapper = function () {
    "use strict";

    this.World = require("../support/world.js").World; // overwrite default World constructor

    this.Given(/^I am not logged in$/, function (callback) {
        // Clear local storage
        this.browser.localStorage("localhost:9001").clear();
        callback();
    });

    this.Given(/^I am on the page "([^"]*)"$/, function (page, callback) {
        // Visit page
        this.browser.visit('http://localhost:9001/app/index.html#' + page, callback);
    });
};

module.exports = wrapper;

I've set up a Grunt task that first runs the connect server on port 9001, then runs the Cucumber scenarios. The documentation for Cucumber.js implies this should work , but it fails on the second step.

Here is the error message I get:

Running "connect:cucumber" (connect) task
Started connect web server on http://localhost:9001

Running "cucumberjs:src" (cucumberjs) task
.Cannot call method 'add' of undefined TypeError: Cannot call method 'add' of undefined
    at <anonymous>:10:711
    at <anonymous>:10:874
    at <anonymous>:10:1224
    at Contextify.sandbox.run (/Users/matthewdaly/Projects/myapp/node_modules/zombie/node_modules/jsdom/node_modules/contextify/lib/contextify.js:12:24)
    at DOMWindow.window._evaluate (/Users/matthewdaly/Projects/myapp/node_modules/zombie/lib/zombie/window.js:188:25)
    at Object.HTML.languageProcessors.javascript (/Users/matthewdaly/Projects/myapp/node_modules/zombie/lib/zombie/scripts.js:23:21)
    at define.proto._eval (/Users/matthewdaly/Projects/myapp/node_modules/zombie/node_modules/jsdom/lib/jsdom/level2/html.js:1480:47)
    at loaded (/Users/matthewdaly/Projects/myapp/node_modules/zombie/lib/zombie/scripts.js:74:23)
    at /Users/matthewdaly/Projects/myapp/node_modules/zombie/node_modules/jsdom/lib/jsdom/level2/html.js:76:20
    at Object.item.check (/Users/matthewdaly/Projects/myapp/node_modules/zombie/node_modules/jsdom/lib/jsdom/level2/html.js:345:11)
FUUUU

(::) failed steps (::)

TypeError: Cannot call method 'add' of undefined
    at <anonymous>:10:711
    at <anonymous>:10:874
    at <anonymous>:10:1224
    at Contextify.sandbox.run (/Users/matthewdaly/Projects/myapp/node_modules/zombie/node_modules/jsdom/node_modules/contextify/lib/contextify.js:12:24)
    at DOMWindow.window._evaluate (/Users/matthewdaly/Projects/myapp/node_modules/zombie/lib/zombie/window.js:188:25)
    at Object.HTML.languageProcessors.javascript (/Users/matthewdaly/Projects/myapp/node_modules/zombie/lib/zombie/scripts.js:23:21)
    at define.proto._eval (/Users/matthewdaly/Projects/myapp/node_modules/zombie/node_modules/jsdom/lib/jsdom/level2/html.js:1480:47)
    at loaded (/Users/matthewdaly/Projects/myapp/node_modules/zombie/lib/zombie/scripts.js:74:23)
    at /Users/matthewdaly/Projects/myapp/node_modules/zombie/node_modules/jsdom/lib/jsdom/level2/html.js:76:20
    at Object.item.check (/Users/matthewdaly/Projects/myapp/node_modules/zombie/node_modules/jsdom/lib/jsdom/level2/html.js:345:11)

If I insert callback(); after the body of the second step, it passes. I'm not sure what's going on. Why is this scenario failing? The app itself works as expected. It seems like the callback for the second step is never firing.

Answer 1

the test passes if you add the callback to the second step, because than visitPage is just skipped.

my visit function looks like this:

 this.visit = function(url, callback) {
   that.browser.visit(url, function(error) {
     if (error) {
       callback.fail(error);
     } else {
       callback.call(that, that.browser);
     }
   });
 });

but I think the real problem is on your page, because sandbox.run is the point where zombie starts to execute custom (js)-code from the page. So it's an anonymous callback in your (minified) script in column 1224? Maybe you have to track it down with console.log... (something with localStorage?, allthough zombie supports it), grep for 'add" in your custom code

Answer 2

Why use callbacks at all? They obfuscate your code. Whereas, the equivalent is to use the async/await pairs, which will mimic, so to speak, java coding and proper instructions starting and ending :

var R = await visit () ;
await do_this_when_visit_is_done () ;
await do_that_when_do_this_is_done() ;

in cucumber :
this.Given(/^I am on the page "(.*)"$/, async function (page) 
{
  await this.page_is_loaded() ;
}