Question

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

JS：

    <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>

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

测试规范：

# application.rb
config.after_initialize do
  Rails.application.load_tasks # Load our Event collection task.
  Rake::Task['initialize_event_collection:build_eventbrite'].invoke
  Rake::Task['initialize_event_collection:build_meetup'].invoke
end


namespace :initialize_event_collection do
  desc "This task fetches Meetup and Eventbrite events in bulk on startup."

  task :build_eventbrite do
    FetchEventbriteJob.perform_later
  end
  task :build_meetup do
    FetchMeetupJob.perform_later
  end
end

Answer 1

这是一个工作示例。基本上我所做的只是将<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');
});

使用Karma Jasmine -how测试do元素和javascript？

1 个答案: