mirror of
https://github.com/silverstripe/silverstripe-framework
synced 2024-10-22 14:05:37 +02:00
MINOR Added javascript tests for TreeDropdownField.js
This commit is contained in:
Ingo Schommer
parent
1fca5c5089
commit
e7ad682cf2
31
tests/javascript/TreeDropDownField/TreeDropdownField.html
Normal file
31
tests/javascript/TreeDropDownField/TreeDropdownField.html
Normal 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>
|
||||
172
tests/javascript/TreeDropDownField/TreeDropdownField.js
Normal file
172
tests/javascript/TreeDropDownField/TreeDropdownField.js
Normal 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));
|
||||
3
tests/javascript/TreeDropDownField/fixtures/fixture.html
Normal file
3
tests/javascript/TreeDropDownField/fixtures/fixture.html
Normal file
@ -0,0 +1,3 @@
|
||||
<div class="TreeDropdownField single" href="/myurl" data-title="Selected">
|
||||
<input type="hidden" name="testfield" value="1" />
|
||||
</div>
|
||||
16
tests/javascript/TreeDropDownField/fixtures/tree.html
Normal file
16
tests/javascript/TreeDropDownField/fixtures/tree.html
Normal 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>
|
||||
10
tests/javascript/TreeDropDownField/fixtures/tree.search.html
Normal file
10
tests/javascript/TreeDropDownField/fixtures/tree.search.html
Normal 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>
|
||||
Loading…
Reference in New Issue
Block a user