编程语言
首页 > 编程语言> > 使用Karma Jasmine-如何测试元素和JavaScript？

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

作者：互联网

我已经尝试了一段时间来测试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');
    });

解决方法:

这是一个工作示例.基本上,我所做的只是添加< form name =“ myForm”>和< / form>到夹具变量中的HTML并开始工作.您想要为测试提供一个元素,该元素与您要在DOM中测试的元素实质上相同.您可以忽略不重要的项目,例如< h4>您已经做过的元素.否则,您需要包括测试所需的所有元素.

在这种情况下,您要在form元素中寻找值：

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

标签：jasmine,karma-jasmine,testing,karma-runner,javascript
来源： https://codeday.me/bug/20191111/2020862.html