Failing simple cucumber.js + zombie tests

Question

I'm setting up cucumber.js tests for my project. I followed the tutorial available here: http://cloudspace.com/blog/2014/11/25/cucumber/#.VYe4w87sNRE I also tried other tutorials, but they all are pretty the same and resulted in the same problem.

I have a feature file:

Feature: Example feature
 As a user of cucumber.js
 I want to have documentation on cucumber
 So that I can concentrate on building awesome applications

 Scenario: Reading documentation
   Given I am on the Cucumber.js GitHub repository
   When I go to the README file
   Then I should see "Usage" as the page title

And step definitions:

'use strict';

module.exports = function () {
   this.World = require("../../support/world.js").World; 

    this.Given(/^I am on the Cucumber.js GitHub repository$/, function (callback) {

      this.visit('http://github.com/cucumber/cucumber-js', callback);
    });

    this.When(/^I go to the README file$/, function (callback) {

      callback.pending();
    });

    this.Then(/^I should see "(.*)" as the page title$/, function (title, callback) {

      var pageTitle = this.browser.text('title');
      if (title === pageTitle) {
        callback();
      } else {
        callback.fail(new Error("Expected to be on page with title " + title));
      }
    });
  };

And the following word.js file:

'use strict';

var zombie = require('zombie');
function WorldFactory(callback) {

  var browser = new zombie();

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

  callback(world); 
}
exports.World = WorldFactory;

When I run this, the first step from the scenario fails and I can see the following error:

 Scenario: Reading documentation # features/sample.feature:6
 { [TypeError: undefined is not a function] filename: undefined }
 { [ReferenceError: $ is not defined] filename: undefined }
     Given I am on the Cucumber.js GitHub repository # features/sample.feature:7
       TypeError: undefined is not a function
           at <anonymous>:9:1625
           at <anonymous>:9:1814
           at <anonymous>:9:2704
           in https://github.com/cucumber/cucumber-js
     When I go to the README file                    # features/sample.feature:8
     Then I should see "Usage" as the page title     # features/sample.feature:9

(::) failed steps (::)

TypeError: undefined is not a function
    at <anonymous>:9:1625
    at <anonymous>:9:1814
    at <anonymous>:9:2704
    in https://github.com/cucumber/cucumber-js

However, when I change the world.js file, so that I pass another function, inside which I call callback method, to the zombie visit methos, the step passes (but I still get the error). Here is the changed file:

'use strict';

var zombie = require('zombie');
function WorldFactory(callback) {

  var browser = new zombie();

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

  callback(world); 
}
exports.World = WorldFactory;

Any idea what the error relates to? And why such a simple change in the code makes the test pass?

Answer 1

I've managed to make it work with this.

Files:

Feature:

Feature: laboradmin Website
As a user of laboradmin
I want to visit the portal

Scenario: Opening the portal
  Given I am using a browser
  When I visit the laboradmin homepage
  Then I should see "laboradmin" as the page title

World:

'use strict';

var zombie = require('zombie');
function WorldFactory(callback) {

    this.browser = new zombie();
    var self = this;
    this.world = {
        browser: self.browser,
        visit: function (url, callback) {
            this.browser.visit(url, function () {
                callback();
            });
        }
    };

}
exports.World = WorldFactory;

Step definition:

module.exports = function () {
    this.World = require('../support/world').World;

    this.Given(/^I am using a browser$/, function (callback) {
        // Express the regexp above with the code you wish you had. Call callback() at the end
        // of the step, or callback.pending() if the step is not yet implemented:
        callback();


    });

    this.When(/^I visit the laboradmin homepage$/, function (callback) {
        // Express the regexp above with the code you wish you had.
        // `this` is set to a World instance.
        // i.e. you may use this.browser to execute the step:
        this.world.visit('http://localhost/laboradmin/dist/#/', callback);
// The callback is passed to visit() so that when the job's finished, the next step can
        // be executed by Cucumber.
    });

    this.Then('I should see "$title" as the page title', function (title, callback) {
        // the above string is converted to the following Regexp by Cucumber:
        // /^I should see "([^"]*)" as the page title$/

        var pageTitle = this.world.browser.text('title');
        if (title === pageTitle) {
            callback();
        } else {
            callback(new Error("Expected to be on page with title " + title + "\n but page title is: " + pageTitle));
        }
    });
};