jasmine-jQuery，如何测试 HTML 元素的表单填写和更改？

Question

我正在尝试测试 HTML 表单的填写以及 HTML 元素文本的后续更改。我需要使用 jasmine-jquery...

创建某种形式的事件

HTML

<div class="response" id="text-response">Unknown</div>

<div class="form-holder">
  <form>
    <input id="input-text" type="text" name="user-input" placeholder="Test Your Text" value="">
    <input id="submit-button" type="submit" value="Submit">
  </form>
</div>

我正在尝试根据一些脚本逻辑测试驱动器 id='text-response' 更改为 'Correct'。

  describe('Interface logic', function(){

      it('Will return correct if logic applies', function(){
        expect('#emotion').toContainText('Correct');
      });

    });

如有任何帮助，我们将不胜感激

Answer 1

您可能只需要触发一个事件，例如：

$('#submit-button').click();

这应该会触发点击事件。然后你可以在页面上检查这个事件改变的条件。

Answer 2

如果您的表单 html 位于文件的单独模板中，例如

templates/form.tmpl.html

和你的 jquery 在一个单独的文件中，例如

js/validation.js

并且包含像

这样的验证码

$(".form-holder").on("submit", function() {

  event.preventDefault();

  var userInput = $('#input-text').val();

  if (userInput === 'the correct text') {
    $('#text-response').text('Correct');
    return;
  }

  $('#text-response').text('Incorrect');
});

那么你的测试规范可以类似于这个

describe('Interface logic', function() {

    jasmine.getFixtures().fixturesPath = '';

    beforeEach(function() {
        loadFixtures('templates/form.tmpl.html');
        appendSetFixtures('<script src="js/validation.js"></script>')
    });

    it('Will return correct if logic applies', function(){
      $('#input-text').val('the correct text');
      $('#submit-button').trigger("click");
      expect($('#text-response').text()).toBe('Correct');
    });

    it('Will return incorrect if logic applies', function(){
      $('#input-text').val('the incorrect text');
      $('#submit-button').trigger("click");
      expect($('#text-response').text()).toBe('Incorrect');
    });

});

和规格赛跑者html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <title>Spec Runner</title>

  <link rel="stylesheet" type="text/css" href="lib/jasmine-2.0.3/jasmine.css">
  <script type="text/javascript" src="lib/jasmine-2.0.3/jasmine.js"></script>
  <script type="text/javascript" src="lib/jasmine-2.0.3/jasmine-html.js"></script>
  <script src="lib/jasmine-2.2/boot.js"></script>

  <script type="text/javascript" src="lib/jquery-2.1.3.min.js"></script>
  <script type="text/javascript" src="lib/jasmine-jquery.js"></script>

  <script type="text/javascript" src="specs/form.spec.js"></script>
</head>

<body>
</body>
</html>

Answer 3

$('#submit-button').click();

对我来说是解决方案，但规范运行程序不断刷新是因为你正在点击 http://localhost:3000/specs/ rather than http://localhost:3000/SpecRunner.html

jasmine-jQuery，如何测试 HTML 元素的表单填写和更改？

jasmine-jQuery, How to test for form fill out and change of HTML element?

html

javascript

dom

jasmine

jasmine-jquery