MINOR Added javascript tests for TreeDropdownField.js

This commit is contained in:
Ingo Schommer 2011-03-03 08:40:59 +13:00
parent 1fca5c5089
commit e7ad682cf2
5 changed files with 232 additions and 0 deletions

View File

@ -0,0 +1,31 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Jasmine Test Runner</title>
<link rel="stylesheet" type="text/css" href="../../../thirdparty/jasmine/lib/jasmine.css">
<script type="text/javascript" src="../../../thirdparty/jasmine/lib/jasmine.js"></script>
<script type="text/javascript" src="../../../thirdparty/jasmine/lib/jasmine-html.js"></script>
<script type="text/javascript" src="../../../thirdparty/jasmine-jquery/lib/jasmine-jquery.js"></script>
<script type="text/javascript" src="../../../thirdparty/jasmine-dom/lib/jasmine-dom-fixtures.js"></script>
<script type="text/javascript" src="../../../thirdparty/jasmine-ajax/lib/mock-ajax.js"></script>
<script type="text/javascript" src="../../../thirdparty/jasmine-ajax/lib/spec-helper.js"></script>
<style type="text/css" href="../../../thirdparty/jstree/themes/default/style.css"></style>
<style type="text/css" href="../../../css/TreeDropdownField.css"></style>
<script type="text/javascript" src="../../../thirdparty/jquery/jquery.js"></script>
<script type="text/javascript" src="../../../thirdparty/jquery-entwine/dist/jquery.entwine-dist.js"></script>
<script type="text/javascript" src="../../../thirdparty/jstree/jquery.jstree.js"></script>
<script type="text/javascript" src="../../../javascript/TreeDropdownField.js"></script>
<script type="text/javascript" src="TreeDropdownField.js"></script>
</head>
<body>
<script type="text/javascript">
jasmine.getEnv().addReporter(new jasmine.TrivialReporter());
jasmine.getEnv().execute();
</script>
</body>
</html>

View File

@ -0,0 +1,172 @@
(function($) {
describe("TreeDropdownField", function() {
$.entwine.warningLevel = $.entwine.WARN_LEVEL_BESTPRACTISE;
$.entwine.synchronous_mode();
// helpers
var loadTree = function(container, html) {
if(!html) html = readFixtures('fixtures/tree.html');
container.entwine('ss').loadTree();
var request = mostRecentAjaxRequest();
request.response({
status: 200,
contentType: 'text/html',
responseText: html
});
// loaded doesnt trigger automatically in test mode
container.find('.tree-holder').jstree('loaded');
}
describe('when field is basic', function() {
beforeEach(function() {
// load fixture
$('body').append(
'<div id="testfield" class="TreeDropdownField single" href="/myurl" data-title="Selected">' +
'<input type="hidden" name="testfield" value="1" />' +
'</div>'
);
});
afterEach(function() {
$('#testfield').remove();
});
it('displays the default title', function() {
expect($('#testfield').entwine('ss').getTitle()).toEqual('Selected');
});
it('opens the tree panel when edit link is clicked', function() {
var panel = $('#testfield').entwine('ss').getPanel();
expect(panel).toBeHidden();
$('#testfield a.toggle-panel-link').click();
expect(panel).toBeVisible();
});
it('loads the tree when panel is first shown', function() {
var panel = $('#testfield').entwine('ss').getPanel();
$('#testfield').entwine('ss').openPanel();
var request = mostRecentAjaxRequest();
request.response({
status: 200,
contentType: 'text/html',
responseText: readFixtures('fixtures/tree.html')
});
expect(panel).toContain('ul');
});
describe('when an item is selected', function() {
it('closes the panel', function() {
var f = $('#testfield'), panel = f.entwine('ss').getPanel();
loadTree(f);
f.entwine('ss').openPanel();
panel.find('li[data-id=2] a').click();
expect(panel).toBeHidden();
});
it('it sets the selected value on the input field', function() {
var f = $('#testfield'), panel = f.entwine('ss').getPanel();
loadTree(f);
panel.find('li[data-id=2] a').click();
expect(f.entwine('ss').getValue()).toEqual('2');
});
it('it sets the selected title', function() {
var f = $('#testfield'), panel = f.entwine('ss').getPanel();
loadTree(f);
panel.find('li[data-id=2] a').click();
expect(f.entwine('ss').getTitle()).toEqual('Child node 1');
});
});
});
describe('when field is searchable', function() {
beforeEach(function() {
// load fixture
$('body').append(
'<div id="testfield" class="TreeDropdownField searchable" href="/myurl" data-title="Selected">' +
'<input type="hidden" name="testfield" value="1" />' +
'</div>'
);
});
afterEach(function() {
$('#testfield').remove();
});
it('only shows search results', function() {
var f = $('#testfield'), panel = f.entwine('ss').getPanel();
f.entwine('ss').search('Child node 1');
var request = mostRecentAjaxRequest();
request.response({
status: 200,
contentType: 'text/html',
responseText: readFixtures('fixtures/tree.search.html')
});
expect(panel.text().match('Child node 1')).toBeTruthy();
expect(panel.text().match('Root node 2')).not.toBeTruthy();
});
// TODO Key events: Enter/ESC
});
describe('when field allows multiple selections', function() {
beforeEach(function() {
// load fixture
$('body').append(
'<div id="testfield" class="TreeDropdownField multiple" href="/myurl" data-title="Root Node 1,Child Node 1">' +
'<input type="hidden" name="testfield" value="1,2" />' +
'</div>'
);
});
afterEach(function() {
$('#testfield').remove();
});
describe('when more than one item is selected', function() {
it('doesnt close the panel', function() {
var f = $('#testfield'), panel = f.entwine('ss').getPanel();
loadTree(f);
f.entwine('ss').openPanel();
panel.find('li[data-id=2]').click();
expect(panel).toBeVisible();
});
it('selects the tree nodes based on initial values', function() {
var f = $('#testfield'), panel = f.entwine('ss').getPanel();
loadTree(f);
f.entwine('ss').openPanel();
expect(f.entwine('ss').getValue()).toEqual(['1','2']);
});
// it('it sets the selected values on the input field', function() {
// var f = $('#testfield'), panel = f.entwine('ss').getPanel();
// loadTree(f);
// f.entwine('ss').openPanel();
// panel.find('li[data-id=2] a').click();
// panel.find('li[data-id=3] a').click();
// // '1' and '2' were preselected
// expect(f.entwine('ss').getValue()).toEqual(['1','2','3']);
//
// // Selecting an checked node will remove it from selection
// panel.find('li[data-id=2] a').click();
// expect(f.entwine('ss').getValue()).toEqual(['1','3']);
// });
//
// it('it sets the selected titles', function() {
// var f = $('#testfield'), panel = f.entwine('ss').getPanel();
// loadTree(f);
// panel.find('li[data-id=2] a').click();
// panel.find('li[data-id=3] a').click();
// expect(f.entwine('ss').getTitle()).toEqual('Child node 1, Child node 2');
// });
});
});
});
}(jQuery));

View File

@ -0,0 +1,3 @@
<div class="TreeDropdownField single" href="/myurl" data-title="Selected">
<input type="hidden" name="testfield" value="1" />
</div>

View File

@ -0,0 +1,16 @@
<ul>
<li data-id="1">
<a href="#">Root node 1</a>
<ul>
<li data-id="2">
<a href="#">Child node 1</a>
</li>
<li data-id="3">
<a href="#">Child node 2</a>
</li>
</ul>
</li>
<li data-id="4">
<a href="#">Root node 2</a>
</li>
</ul>

View File

@ -0,0 +1,10 @@
<ul>
<li data-id="1">
<a href="#">Root node 1</a>
<ul>
<li data-id="2">
<a href="#">Child node 1</a>
</li>
</ul>
</li>
</ul>