使用 Karma Jasmine - 如何测试元素和 javascript？

Question

我已经尝试了一段时间来测试 js 和 dom 元素，最后遇到了有助于测试 dom 元素的业力。但是，到目前为止，我所拥有的一切都不起作用。任何帮助将不胜感激。我一直在使用本教程：http://www.bradoncode.com/blog/2015/02/27/karma-tutorial/ 但无法正常工作..

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>

测试规格：

    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');
    });

Answer 1

这是一个工作示例。基本上我所做的就是将 <form name="myForm"> 和 </form> 添加到夹具变量中的 HTML 并且它开始工作。您想要为您的测试提供一个与您要在 DOM 中测试的元素基本相同的元素。您可以省略不重要的项目，例如您已经完成的 <h4> 元素。否则，您需要包括测试所需的所有元素。

在这种情况下，您要查找表单元素中的值：

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,''));

但是您没有在测试中包含该表单。您只有两个输入元素、按钮和显示结果的元素。以下内容应该会让您走上正确的道路。

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');
});

使用 Karma Jasmine - 如何测试元素和 javascript？

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

javascript

testing

jasmine

karma-runner

karma-jasmine