Test automation with karma and jasmine

Question

I'm new to the test automation, I'm trying to automate the test cases using karma and jasmine framework but for some reason I'm encountering JavaScript error. I'm simulating the test cases by creating calculator addition functionality. Here are my files:

Calculator function file:

calculator.js:

window.calculator = window.calculator || {};

(function () {
    var getIntById = function (id) {
        return parseInt(document.getElementById(id).value, 10);
    };

    var calculate = function () {
        var sum = getIntById('x') + getIntById('y');
        document.getElementById('result').innerHTML = isNaN(sum) ? 0 : sum;
    };

    window.calculator.init = function () {
        document.getElementById('add').addEventListener('click', calculate);
    };
})();

My test cases:

calculator.test.js

describe('Calculator', function () {

    // inject the HTML fixture for the tests
    beforeEach(function () {
        var fixture = '<input id="x" type="text">' +
          '<input id="y" type="text">' +
          '<input id="add" type="button" value="Add Numbers">' +
          'Result: <span id="result" />';

        document.body.insertAdjacentHTML(
          'afterbegin',
          fixture);
    });

    // remove the html fixture from the DOM
    afterEach(function () {
        document.body.removeChild(document.getElementById('fixture'));
    });

    // call the init function of calculator to register DOM elements
    beforeEach(function () {
        window.calculator.init();
    });

    it('should return 3 for 1 + 2', function () {
        document.getElementById('x').value = 1;
        document.getElementById('y').value = 2;
        document.getElementById('add').click();
        expect(document.getElementById('result').innerHTML).toBe('3');
    });

    it('should calculate zero for invalid x value', function () {
        document.getElementById('x').value = 'hello';
        document.getElementById('y').value = 2;
        document.getElementById('add').click();
        expect(document.getElementById('result').innerHTML).toBe('0');
    });

    it('should calculate zero for invalid y value', function () {
        document.getElementById('x').value = 1;
        document.getElementById('y').value = 'goodbye';
        document.getElementById('add').click();
        expect(document.getElementById('result').innerHTML).toBe('0');
    });

});

I'm getting the following error:

09 01 2016 17:25:16.329:INFO [Chrome 47.0.2526 (Windows 8.1 0.0.0)]: Connected o
n socket /#vtPxHSF4qNGPq7ABAAAA with id 24482327
Chrome 47.0.2526 (Windows 8.1 0.0.0) Calculator should return 3 for 1 + 2 FAILED

        TypeError: Failed to execute 'removeChild' on 'Node': parameter 1 is not
 of type 'Node'.
            at TypeError (native)
            at Object.<anonymous> (C:/Users/rapandey/Documents/Visual Studio 201
5/Projects/demo1/demo1/test/calculator.test.js:17:23)
Chrome 47.0.2526 (Windows 8.1 0.0.0): Executed 1 of 3 (1 FAILED) (0 secs / 0.006
Chrome 47.0.2526 (Windows 8.1 0.0.0) Calculator should calculate zero for invali
d x value FAILED
        TypeError: Failed to execute 'removeChild' on 'Node': parameter 1 is not
 of type 'Node'.
            at TypeError (native)
            at Object.<anonymous> (C:/Users/rapandey/Documents/Visual Studio 201
5/Projects/demo1/demo1/test/calculator.test.js:17:23)
Chrome 47.0.2526 (Windows 8.1 0.0.0): Executed 2 of 3 (2 FAILED) (0 secs / 0.007
Chrome 47.0.2526 (Windows 8.1 0.0.0) Calculator should calculate zero for invali
d y value FAILED
        TypeError: Failed to execute 'removeChild' on 'Node': parameter 1 is not
 of type 'Node'.
            at TypeError (native)
            at Object.<anonymous> (C:/Users/rapandey/Documents/Visual Studio 201
5/Projects/demo1/demo1/test/calculator.test.js:17:23)
Chrome 47.0.2526 (Windows 8.1 0.0.0): Executed 3 of 3 (3 FAILED) (0 secs / 0.007
Chrome 47.0.2526 (Windows 8.1 0.0.0): Executed 3 of 3 (3 FAILED) ERROR (0.033 se
cs / 0.007 secs)

Not able to figure out what mistake I've made.

Answer 1

Your problem is with your afterEach implementation. You remove an element that doesn't exist:

afterEach(function () {
    document.body.removeChild(document.getElementById('fixture'));
});

But your HTML is just:

<input id="x" type="text">
<input id="y" type="text">
<input id="add" type="button" value="Add Numbers">
Result: <span id="result" />