lundi 20 mars 2017

Using Karma Jasmine -how to test do elements and javascript?

Ive been trying for a while to test js and dom elements and finally came across karma which helps to test dom elements. However anything I have so far just doesn't work. Any help would be very much appreciated. I have been using this tutorial: http://ift.tt/1LMaA2C but can't get it to work..

js:

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

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


             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:

    <head>
    </head>

    <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="submit" id="add" onclick="adding(one.value, two.value); return false;">
        </form>

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

    </html>

test spec:

describe('Calculator', function() {

                 // inject the HTML fixture for the tests
                 beforeEach(function() {
                     var fixture = '<div id="fixture"> <input type="text" name="one" id="one">' +
                         '<input type="text" name="two" id="two">' +
                         '<input type="submit" 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();
                     adding()
                 });

                 it('should return 3 for 1 + 2', function() {
                     var x = document.getElementById('one').value = 1;
                     var y = document.getElementById('two').value = 2;
                     adding(x, y)
                         // document.getElementById('add').click();

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

Aucun commentaire:

Enregistrer un commentaire