如何在Jasmine.js 2.0.0版本中使用fixture

How to use fixtures in Jasmine.js version 2.0.0?

本文关键字:版本 fixture Jasmine js      更新时间:2023-09-26

fixture在jasmine.js 1.3.1版本中为我的测试套件工作良好。将Jasmine.js版本升级到2.0.0后,fixture无法正常工作

谁能解释,如何使我的代码在茉莉花.js 2.0.0版本的固定装置工作?

我已经检查了这个茉莉花v2.0.0版本说明,但没有与fixture相关:https://github.com/pivotal/jasmine/blob/v2.0.0/release_notes/20.md

下面的完整脚本可以很好地加载fixture来测试您的html片段。

我已经引用了这个url,这个url帮助我加载fixture:http://www.htmlgoodies.com/beyond/javascript/js-ref/testing-dom-events-using-jquery-and-jasmine-2.0.html

在Jasmine.js v2.0.0 中,你必须检查一些Jasmine.js框架语法。
<!DOCTYPE HTML>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <title>Jasmine v2.0 DOM Tests Spec Runner</title>
  <link rel="shortcut icon" type="image/png" href="images/jasmine_favicon.png">
  <link rel="stylesheet" type="text/css" href="lib/jasmine-core/jasmine.css">
  <script type="text/javascript" src="lib/jasmine-core/jasmine.js"></script>
  <script type="text/javascript" src="lib/jasmine-core/jasmine-html.js"></script>
  <script type="text/javascript" src="lib/jasmine-core/boot.js"></script>
  <script type="text/javascript" src="lib/jasmine-core/jquery-1.7.2.js"></script>
  <script type="text/javascript" src="lib/jasmine-core/jasmine-jquery.js"></script>
  <script type="text/javascript">
     var MSG = "Hello World!";
     function hideMessage() {
       $( "#pMsg" ).html("");
     }
     function showMessage() {
       $( "#pMsg" ).html(MSG); 
     }
     function setUpHTMLFixture() {
       setFixtures('<form id="testForm" action="">'
                  +'  <h1>Test Form</h1>'
                  +'  <input type="text" id="txtMessage">'
                  +'  <br>'
                  +'  <button id="btnHideMessage" type="button" onclick="hideMessage()">Hide Message</button>'
                  +'  <button id="btnShowMessage" type="button" onclick="showMessage()">Show Message</button>'
                  +'  <br>'
                  +'  <p id="pMsg"></p>'
                  +'</form>');
    }
describe("DOM TESTS:***************", function() { 
  describe("Button Click Event Tests", function() {
    var spyEvent;
    beforeEach(function() {
      setUpHTMLFixture();
    });
    it ("should invoke the btnShowMessage click event.", function() {
      spyEvent = spyOnEvent('#btnShowMessage', 'click');
      $('#btnShowMessage').trigger( "click" );
      expect('click').toHaveBeenTriggeredOn('#btnShowMessage');
      expect(spyEvent).toHaveBeenTriggered();
    });
    it ("should invoke the btnHideMessage click event.", function() {
      spyEvent = spyOnEvent('#btnHideMessage', 'click');
      $('#btnHideMessage').trigger( "click" );
      expect('click').toHaveBeenTriggeredOn('#btnHideMessage');
      expect(spyEvent).toHaveBeenTriggered();
    });
  });
  describe("Show message tests", function() {
    beforeEach(function() {
      setUpHTMLFixture();
      $('#txtMessage').val(MSG);
      $('#btnShowMessage').trigger( "click" );
    });
    it ("should display the message when button is clicked.", function() {
      expect($('#pMsg')).toHaveText($('#txtMessage').val());
    });
  });
  describe("Hide message tests", function() {
    beforeEach(function() {
      setUpHTMLFixture();
      $('#pMsg').text(MSG);
      $('#btnHideMessage').trigger( "click" );
    });
    it ("should remove the message when button is clicked.", function() {
      expect($('#pMsg')).toHaveText("");
    });
  });
});
</script>
</head>
<body>
</body>
</html>