Question

我正在尝试测试填写HTML表单以及随后更改HTML元素Text。我需要使用jasmine-jquery创建某种形式的事件......

HTML

＆＃13;

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

＆＃13;

我正在尝试测试驱动器ID =＆＃39; text-response＆＃39;改为＆＃39;纠正＆＃39;基于一些脚本逻辑。

  describe('Interface logic', function(){

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

    });

非常感谢任何帮助

Answer 1

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

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

这应该触发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/而不是http://localhost:3000/SpecRunner.html

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

3 个答案: