Search code examples
javascriptjquerybackbone.jsjasminejasmine-jquery

How to use fixtures in Jasmine.js version 2.0.0?

Fixtures are working fine for my test suites in jasmine.js version 1.3.1. After upgrading Jasmine.js version to 2.0.0, fixtures are not working.

Can anyone explain, how to make my code workable for fixtures in jasmine.js version 2.0.0?

I have checked this jasmine v2.0.0 release notes, but nothing releated to fixtures: https://github.com/pivotal/jasmine/blob/v2.0.0/release_notes/20.md

Solution

  • The below complete script is working fine for me to load the fixtures to test your html snippets.

    I have referred this url and this url helped me to load the fixtures:http://www.htmlgoodies.com/beyond/javascript/js-ref/testing-dom-events-using-jquery-and-jasmine-2.0.html

    And You have to check some of the Jasmine.js framework syntax as well in jasmine.js v2.0.0

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