Permalink
Browse files

MINOR Added javascript tests for TreeDropdownField.js

  • Loading branch information...
1 parent 1fca5c5 commit e7ad682cf2c99ab91883e948d8ca76eccd833efd @chillu chillu committed Mar 2, 2011
@@ -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>
@@ -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));
@@ -0,0 +1,3 @@
+<div class="TreeDropdownField single" href="/myurl" data-title="Selected">
+ <input type="hidden" name="testfield" value="1" />
+</div>
@@ -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>
@@ -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>

0 comments on commit e7ad682

Please sign in to comment.