jasmine-jQuery，如何測試表單填寫和HTML元素的更改？

Question

我正在嘗試測試HTML表單的填寫以及HTML元素Text的后續更改。 我需要使用茉莉花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 /而不是http：// localhost：3000 / SpecRunner.html

jasmine-jQuery，如何測試表單填寫和HTML元素的更改？

問題描述

3 個解決方案

解決方案1
1 2015-04-24 12:46:18

解決方案2
0 2015-04-25 12:04:16

解決方案3
0 已采納 2015-05-08 19:50:44

jasmine-jQuery，如何測試表單填寫和HTML元素的更改？

問題描述

3 個解決方案

解決方案1 1 2015-04-24 12:46:18

解決方案2 0 2015-04-25 12:04:16

解決方案3 0 已采納 2015-05-08 19:50:44

解決方案1
1 2015-04-24 12:46:18

解決方案2
0 2015-04-25 12:04:16

解決方案3
0 已采納 2015-05-08 19:50:44