QUnit test returning "TypeError: undefined is not a function"

Question

I have some sample code from Glen Johnson's book Programming in HTML5 with JavaScript and CSS3.

My 'app code' is as follows:

// Demo of how implementing inheritance works

var Vehicle = (function () {
    function Vehicle(year, make, model) {
        this.year = year;
        this.make = make;
        this.model = model;
    }

    Vehicle.prototype.getInfo = function () {
        return this.year + ' ' + this.make + ' ' + this.model;
    };

    Vehicle.prototype.startEngine = function () {
        return 'Vroom';
    };

    return Vehicle;
})();

var Car = (function (parent) {
    Car.prototype = new Vehicle();
    Car.prototype.constructor = Car;

    function Car(year, make, model) {
        this.wheelQuantity = 4;
        parent.call(this, year, make, model);
    }

    Car.prototype.getInfo = function () {
        return 'Vehicle Type: Car ' + parent.prototype.getInfo.call(this);
    };

    return Car;
})(Vehicle);

var Boat = (function (parent) {
    Boat.prototype = new Vehicle();
    Boat.prototype.constructor = Boat;

    function Boat(year, make, model) {
        this.propellerBladeQuality = 3;
        parent.call(this, year, make, model);
    }

    Boat.prototype.getInfo = function() {
        return 'Vehicle Type: Boat' + parent.prototype.getInfo.call(this);
    }
})(Vehicle);

My tests are as follows:

module("Implementing Inheritance", {});

test('Creating a Vehicle', function () {
    expect(2);
    var actual,
        expected,
        v = new Vehicle(2012, 'Toyota', 'Rav4');
    actual = v.getInfo();
    expected = '2012 Toyota Rav4';

    equal(expected, actual);

    actual = v.startEngine();
    expected = 'Vroom';
    equal(expected, actual);
});

test('Create a Car', function () {
    expect(5);

    var expectedYear = 2012,
        expectedMake = 'Toyota',
        expectedModel = 'Rav4',
        c = new Car(expectedYear, expectedMake, expectedModel);

    equal(c.year, expectedYear, 'Year');
    equal(c.make, expectedMake, 'Make');
    equal(c.model, expectedModel, 'Model');
    equal(c.wheelQuantity, 4, 'wheelQuality');
    equal(c.getInfo(), 'Vehicle Type: Car ' + expectedYear + ' ' + expectedMake + ' ' + expectedModel, 'getInfo()');
});

test('Create a Boat', function () {
    expect(5);

    var expectedYear = 12334,
        expectedMake = 'dummy-make',
        expectedModel = 'dummy-model',
        expectedPropellerBladeQuality = 3,
        b = new Boat(expectedYear, expectedMake, expectedModel);

    equal(b.year, expectedYear, 'Year');
    equal(b.make, expectedMake, 'Make');
    equal(b.model, expectedModel, 'Model');
    equal(b.propellerBladeQuality, expectedPropellerBladeQuality, 'propellerBladeQuality');
    equal(b.getInfo(), 'Vehicle Type: Boat ' + expectedYear + ' ' + expectedMake + ' ' + expectedModel, 'getInfo()');
});

When they are run, the Create a Car test passes, however the Create a Boat test fails with the following exception:

Died on test #1     at file:///C://JavaScript_Samples/tests/implementingInheritance.js:33:1: undefined is not a function
Source:     
TypeError: undefined is not a function
    at Object.<anonymous> (file:///C:/JavaScript_Samples/tests/implementingInheritance.js:40:13)

I can't see the reason for this, the code for both the Car and the Boat seem identical to me.

I've tried this in Chrome and Firefox, the results are the same in both.

Any advise?

Answer 1

You are missing the return statement for the created Boat class:

var Boat = (function (parent) {
    Boat.prototype = new Vehicle();
    Boat.prototype.constructor = Boat;

    function Boat(year, make, model) {
        this.propellerBladeQuality = 3;
        parent.call(this, year, make, model);
    }

    Boat.prototype.getInfo = function() {
        return 'Vehicle Type: Boat' + parent.prototype.getInfo.call(this);
    }

    // insert return statement here
    return Boat;
})(Vehicle);