Hi to all,
I am trying to develop some code using jqUnit to test-drive things,
and I am running on a strange problem: jqUnit.triggerEvent does not
work as expected, it does not fire a click() handler that is installed
outside of the test's code block. Full code, HTML + 2 JS files,
help and comments greatly appreciated,
Insitu
<html>
<head>
<title>Construction d'un diaporama</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/
>
<link rel="Stylesheet" media="screen" href="testsuite.css"/>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jqUnit.js"></script>
<script type="text/javascript" src="slide.js"></script>
<script type="text/javascript" src="slideTest.js"></script>
<script type="text/javascript">
jQuery(document).ready(function() {
alert("run tests");
jqUnit.runTest();
});
</script>
</head>
<body>
<h1>Diaporama</h1>
<hr>
<div id="body">
<h1 id="header">Test de construction de diaporama</h1>
<h2 id="userAgent"></h2>
<!-- Test HTML -->
<div id="main" style="">
<div id="slideshow">
<div id="titre">Le titre</div>
<div id="content"></div>
<pre id="pre" class="javascript"></pre>
<form id="form">
<div class="buttons">
<input type="submit" value="Run" class="run" id="run"/>
<input type="button" id="prev" value="« Prev"/>
<input type="button" id="next" value="Next »"/>
</div>
<div id="container">
<textarea id="code" wrap="off"></textarea>
<ol id="results"></ol>
</div>
</form>
</div>
</div>
<ol id="tests"></ol>
</div>
</body>
</html>
The failing tests:
(function temp($){
$(document).ready(
function() {
alert("init tests");
with (jqUnit) {
module('Tests diaporama');
test('click on slideshow displays TOC as a list',
function() {
triggerEvent( $("#slideshow").get(0), "click" );
equals($('#slideshow #titre').text(),"Table of Content",
"title
is 'TOC'");
equals($('#slideshow #content ol').children().size(), 5,
"TOC
is displayed in a list");
equals($('#slideshow #content ol').attr('class'), "toc",
"TOC
has style 'toc'");
equals($('#slideshow #content ol li').slice(2,3).text(),
"titre
3", "TOC contains some titles");
});
}
}
);
})(jQuery);
The code:
(function initUI($) {
$(document).ready(function() {
alert("init UI");
$('#slideshow').click(
function () {
$('#content',this)
.html("<ol class=\"toc\">" +
"<li>a title</li>" +
"<li>a title</li>" +
"<li>titre 3</li>" +
"<li>a title</li>" +
"<li>a title</li>" +
"</ol>");
$('#titre',this).text('Table of Content');
});
}
);
})(jQuery);
