个人中心
gpt4 book ai didi

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

转载 作者：行者123 更新时间：2023-11-29 10:32:20 25 4
gpt4 key购买 nike

我一直在尝试测试 js 和 dom 元素，最后遇到了有助于测试 dom 元素的 karma 。但是，到目前为止，我所拥有的一切都不起作用。任何帮助将不胜感激。我一直在使用这个教程: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>到 fixture 变量中的 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');
});

关于javascript - 使用 Karma Jasmine - 如何测试元素和 javascript？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42916548/

25 4 0
文章推荐： ios - 将 NSString 分成两部分(最后一个斜线之前和之后)
文章推荐： mysql - 错误 1215 : CANNOT ADD FOREIGN KEY CONSTRAINT ; Composite Foreign key
文章推荐： ios - Testflight Renew 循环问题
文章推荐： python - 通过 Python 读取 MySQL 有时会导致警告 1292，似乎将秒解释为大于 60。
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com