Using Karma Jasmine - how to validate elements and javascript?

I've been trying for a while to validate js and dom elements and finally came across karma that helps in testing dom elements. However, everything I have so far just doesn't work. Any help would be very much appreciated. I have used this tutorial: http://www.bradoncode.com/blog/2015/02/27/karma-tutorial/ but cannot get it to work.

JS:

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

    (function() {
        var result;
        var adding = function(one, two) {

            var one1 = document.forms["myForm"]["one"].value;
            var two2 = document.forms["myForm"]["two"].value;

            var one=parseFloat(one.replace(/\,/g,'')); 
            var two=parseFloat(two.replace(/\,/g,''));

            result = parseInt(one1) + parseInt(two2);
            console.log(result);


            var number = document.getElementById("number");
            number.innerHTML = result;
            console.log(one, two, result)
            return result;

        }

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

      

HTML:

      

    <body>
        <form name="myForm">
            <h4>numner 1</h4>
            <input type="text" name="one" id="one"></input>
            <h4>number 2</h4>
            <input type="text" name="two" id="two"></input>

            <input type="button" id="add">
        </form>

        <p id="number"> </p>
        <script type="text/javascript" src="public/adder.js"></script>
        <script>
            calculator.init()
        </script>
    </body>

    </html>

      

test specification:

    beforeEach(function() {
        var fixture = '<div id="fixture"> <input type="text" name="one" id="one">' +
            '<input type="text" name="two" id="two">' +
            '<input type="button" id="add" >' +
            '<p id="number"> </p></div>';

        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() {
        var x = document.getElementById('one').value = 1;
        var y = document.getElementById('two').value = 2;

        document.getElementById('add').click();

        expect(document.getElementById('number').innerHTML).toBe('3');
    });

      

+3


source to share


1 answer


Here's a working example. Basically all I did was add <form name="myForm">

and </form>

in the HTML variable fixture, and it started to work. You want to provide an element in your test that is essentially the same as the element you want to test in the DOM. You can leave elements that are not important, like the elements <h4>

that you have already done. Otherwise, you need to include all the items required for the tests.

In this case, you are looking for values ​​in the form element:

var one1 = document.forms["myForm"]["one"].value;
var two2 = document.forms["myForm"]["two"].value; 

var one=parseFloat(one1.replace(/\,/g,'')); 
var two=parseFloat(two2.replace(/\,/g,''));

      



But you did not include the form in your test. You only had two input elements, a button and an element where the results are displayed. The following should get you on the right track.

beforeEach(function() {
    var fixture = '<div id="fixture">' +
        '<form name="myForm">' +            
        '<input type="text" name="one" id="one">' +
        '<input type="text" name="two" id="two">' +
        '<input type="button" id="add" >' +
        '</form>' +
        '<p id="number"> </p></div>';

    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() {
    var x = document.getElementById('one').value = 1;
    var y = document.getElementById('two').value = 2;

    document.getElementById('add').click();

    expect(document.getElementById('number').innerHTML).toBe('3');
});

      

+3


source







All Articles