Menu
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
961
Yes, there doesn’t have to be beforeEach at all. Fixtures are automatically appended to DOM by loadFixtures method and automatically cleaned-up between tests. Apart from loadFixtures and readFixtures jasmine-jqueryprovides other useful methods, so don’t forget to check jasmine-jquery GitHub pagefor the full documentation.
First, let’s start with the simplest approach possible to test jQuery code in your Jasmine specs. The most straightforward way is just to create a “fixture” jQuery element inside your spec, invoke your plugin on it and then set your expectations against the fixture element (to verify if the plugin modified fixture element correctly):
Apart of HTML fixtures support, jasmine-jqueryprovides also a robust set of Jasmine custom matchers for jQuery – I’ll present them in more detail in next post.
Fixtures are automatically appended to DOM by loadFixtures method and automatically cleaned-up between tests. Apart from loadFixtures and readFixtures jasmine-jqueryprovides other useful methods, so don’t forget to check jasmine-jquery GitHub pagefor the full documentation.
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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
