tests.js 32 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875
  1. /* global $, module, test, equal, ok */
  2. ;(function () {
  3. 'use strict';
  4. function init(options) {
  5. return $('#treeview').treeview(options);
  6. }
  7. function getOptions(el) {
  8. return el.data().treeview.options;
  9. }
  10. var data = [
  11. {
  12. text: 'Parent 1',
  13. nodes: [
  14. {
  15. text: 'Child 1',
  16. nodes: [
  17. {
  18. text: 'Grandchild 1'
  19. },
  20. {
  21. text: 'Grandchild 2'
  22. }
  23. ]
  24. },
  25. {
  26. text: 'Child 2'
  27. }
  28. ]
  29. },
  30. {
  31. text: 'Parent 2'
  32. },
  33. {
  34. text: 'Parent 3'
  35. },
  36. {
  37. text: 'Parent 4'
  38. },
  39. {
  40. text: 'Parent 5'
  41. }
  42. ];
  43. var json = '[' +
  44. '{' +
  45. '"text": "Parent 1",' +
  46. '"nodes": [' +
  47. '{' +
  48. '"text": "Child 1",' +
  49. '"nodes": [' +
  50. '{' +
  51. '"text": "Grandchild 1"' +
  52. '},' +
  53. '{' +
  54. '"text": "Grandchild 2"' +
  55. '}' +
  56. ']' +
  57. '},' +
  58. '{' +
  59. '"text": "Child 2"' +
  60. '}' +
  61. ']' +
  62. '},' +
  63. '{' +
  64. '"text": "Parent 2"' +
  65. '},' +
  66. '{' +
  67. '"text": "Parent 3"' +
  68. '},' +
  69. '{' +
  70. '"text": "Parent 4"' +
  71. '},' +
  72. '{' +
  73. '"text": "Parent 5"' +
  74. '}' +
  75. ']';
  76. module('Options');
  77. test('Options setup', function () {
  78. // First test defaults option values
  79. var el = init(),
  80. options = getOptions(el);
  81. ok(options, 'Defaults created ok');
  82. equal(options.levels, 2, 'levels default ok');
  83. equal(options.expandIcon, 'glyphicon glyphicon-plus', 'expandIcon default ok');
  84. equal(options.collapseIcon, 'glyphicon glyphicon-minus', 'collapseIcon default ok');
  85. equal(options.emptyIcon, 'glyphicon', 'emptyIcon default ok');
  86. equal(options.nodeIcon, '', 'nodeIcon default ok');
  87. equal(options.selectedIcon, '', 'selectedIcon default ok');
  88. equal(options.checkedIcon, 'glyphicon glyphicon-check', 'checkedIcon default ok');
  89. equal(options.uncheckedIcon, 'glyphicon glyphicon-unchecked', 'uncheckedIcon default ok');
  90. equal(options.color, undefined, 'color default ok');
  91. equal(options.backColor, undefined, 'backColor default ok');
  92. equal(options.borderColor, undefined, 'borderColor default ok');
  93. equal(options.onhoverColor, '#F5F5F5', 'onhoverColor default ok');
  94. equal(options.selectedColor, '#FFFFFF', 'selectedColor default ok');
  95. equal(options.selectedBackColor, '#428bca', 'selectedBackColor default ok');
  96. equal(options.searchResultColor, '#D9534F', 'searchResultColor default ok');
  97. equal(options.searchResultBackColor, undefined, 'searchResultBackColor default ok');
  98. equal(options.enableLinks, false, 'enableLinks default ok');
  99. equal(options.highlightSelected, true, 'highlightSelected default ok');
  100. equal(options.highlightSearchResults, true, 'highlightSearchResults default ok');
  101. equal(options.showBorder, true, 'showBorder default ok');
  102. equal(options.showIcon, true, 'showIcon default ok');
  103. equal(options.showCheckbox, false, 'showCheckbox default ok');
  104. equal(options.showTags, false, 'showTags default ok');
  105. equal(options.multiSelect, false, 'multiSelect default ok');
  106. equal(options.onNodeChecked, null, 'onNodeChecked default ok');
  107. equal(options.onNodeCollapsed, null, 'onNodeCollapsed default ok');
  108. equal(options.onNodeDisabled, null, 'onNodeDisabled default ok');
  109. equal(options.onNodeEnabled, null, 'onNodeEnabled default ok');
  110. equal(options.onNodeExpanded, null, 'onNodeExpanded default ok');
  111. equal(options.onNodeSelected, null, 'onNodeSelected default ok');
  112. equal(options.onNodeUnchecked, null, 'onNodeUnchecked default ok');
  113. equal(options.onNodeUnselected, null, 'onNodeUnselected default ok');
  114. equal(options.onSearchComplete, null, 'onSearchComplete default ok');
  115. equal(options.onSearchCleared, null, 'onSearchCleared default ok');
  116. // Then test user options are correctly set
  117. var opts = {
  118. levels: 99,
  119. expandIcon: 'glyphicon glyphicon-expand',
  120. collapseIcon: 'glyphicon glyphicon-collapse',
  121. emptyIcon: 'glyphicon',
  122. nodeIcon: 'glyphicon glyphicon-stop',
  123. selectedIcon: 'glyphicon glyphicon-selected',
  124. checkedIcon: 'glyphicon glyphicon-checked-icon',
  125. uncheckedIcon: 'glyphicon glyphicon-unchecked-icon',
  126. color: 'yellow',
  127. backColor: 'purple',
  128. borderColor: 'purple',
  129. onhoverColor: 'orange',
  130. selectedColor: 'yellow',
  131. selectedBackColor: 'darkorange',
  132. searchResultColor: 'yellow',
  133. searchResultBackColor: 'darkorange',
  134. enableLinks: true,
  135. highlightSelected: false,
  136. highlightSearchResults: true,
  137. showBorder: false,
  138. showIcon: false,
  139. showCheckbox: true,
  140. showTags: true,
  141. multiSelect: true,
  142. onNodeChecked: function () {},
  143. onNodeCollapsed: function () {},
  144. onNodeDisabled: function () {},
  145. onNodeEnabled: function () {},
  146. onNodeExpanded: function () {},
  147. onNodeSelected: function () {},
  148. onNodeUnchecked: function () {},
  149. onNodeUnselected: function () {},
  150. onSearchComplete: function () {},
  151. onSearchCleared: function () {}
  152. };
  153. options = getOptions(init(opts));
  154. ok(options, 'User options created ok');
  155. equal(options.levels, 99, 'levels set ok');
  156. equal(options.expandIcon, 'glyphicon glyphicon-expand', 'expandIcon set ok');
  157. equal(options.collapseIcon, 'glyphicon glyphicon-collapse', 'collapseIcon set ok');
  158. equal(options.emptyIcon, 'glyphicon', 'emptyIcon set ok');
  159. equal(options.nodeIcon, 'glyphicon glyphicon-stop', 'nodeIcon set ok');
  160. equal(options.selectedIcon, 'glyphicon glyphicon-selected', 'selectedIcon set ok');
  161. equal(options.checkedIcon, 'glyphicon glyphicon-checked-icon', 'checkedIcon set ok');
  162. equal(options.uncheckedIcon, 'glyphicon glyphicon-unchecked-icon', 'uncheckedIcon set ok');
  163. equal(options.color, 'yellow', 'color set ok');
  164. equal(options.backColor, 'purple', 'backColor set ok');
  165. equal(options.borderColor, 'purple', 'borderColor set ok');
  166. equal(options.onhoverColor, 'orange', 'onhoverColor set ok');
  167. equal(options.selectedColor, 'yellow', 'selectedColor set ok');
  168. equal(options.selectedBackColor, 'darkorange', 'selectedBackColor set ok');
  169. equal(options.searchResultColor, 'yellow', 'searchResultColor set ok');
  170. equal(options.searchResultBackColor, 'darkorange', 'searchResultBackColor set ok');
  171. equal(options.enableLinks, true, 'enableLinks set ok');
  172. equal(options.highlightSelected, false, 'highlightSelected set ok');
  173. equal(options.highlightSearchResults, true, 'highlightSearchResults set ok');
  174. equal(options.showBorder, false, 'showBorder set ok');
  175. equal(options.showIcon, false, 'showIcon set ok');
  176. equal(options.showCheckbox, true, 'showCheckbox set ok');
  177. equal(options.showTags, true, 'showTags set ok');
  178. equal(options.multiSelect, true, 'multiSelect set ok');
  179. equal(typeof options.onNodeChecked, 'function', 'onNodeChecked set ok');
  180. equal(typeof options.onNodeCollapsed, 'function', 'onNodeCollapsed set ok');
  181. equal(typeof options.onNodeDisabled, 'function', 'onNodeDisabled set ok');
  182. equal(typeof options.onNodeEnabled, 'function', 'onNodeEnabled set ok');
  183. equal(typeof options.onNodeExpanded, 'function', 'onNodeExpanded set ok');
  184. equal(typeof options.onNodeSelected, 'function', 'onNodeSelected set ok');
  185. equal(typeof options.onNodeUnchecked, 'function', 'onNodeUnchecked set ok');
  186. equal(typeof options.onNodeUnselected, 'function', 'onNodeUnselected set ok');
  187. equal(typeof options.onSearchComplete, 'function', 'onSearchComplete set ok');
  188. equal(typeof options.onSearchCleared, 'function', 'onSearchCleared set ok');
  189. });
  190. test('Links enabled', function () {
  191. init({enableLinks:true, data:data});
  192. ok($('.list-group-item:first').children('a').length, 'Links are enabled');
  193. });
  194. module('Data');
  195. test('Accepts JSON', function () {
  196. var el = init({levels:1,data:json});
  197. equal($(el.selector + ' ul li').length, 5, 'Correct number of root nodes');
  198. });
  199. module('Behaviour');
  200. test('Is chainable', function () {
  201. var el = init();
  202. equal(el.addClass('test').attr('class'), 'treeview test', 'Is chainable');
  203. });
  204. test('Correct initial levels shown', function () {
  205. var el = init({levels:1,data:data});
  206. equal($(el.selector + ' ul li').length, 5, 'Correctly display 5 root nodes when levels set to 1');
  207. el = init({levels:2,data:data});
  208. equal($(el.selector + ' ul li').length, 7, 'Correctly display 5 root and 2 child nodes when levels set to 2');
  209. el = init({levels:3,data:data});
  210. equal($(el.selector + ' ul li').length, 9, 'Correctly display 5 root, 2 children and 2 grand children nodes when levels set to 3');
  211. });
  212. test('Expanding a node', function () {
  213. var cbWorked, onWorked = false;
  214. init({
  215. data: data,
  216. levels: 1,
  217. onNodeExpanded: function(/*event, date*/) {
  218. cbWorked = true;
  219. }
  220. })
  221. .on('nodeExpanded', function(/*event, date*/) {
  222. onWorked = true;
  223. });
  224. var nodeCount = $('.list-group-item').length;
  225. var el = $('.expand-icon:first');
  226. el.trigger('click');
  227. ok(($('.list-group-item').length > nodeCount), 'Number of nodes are increased, so node must have expanded');
  228. ok(cbWorked, 'onNodeExpanded function was called');
  229. ok(onWorked, 'nodeExpanded was fired');
  230. });
  231. test('Collapsing a node', function () {
  232. var cbWorked, onWorked = false;
  233. init({
  234. data: data,
  235. levels: 2,
  236. onNodeCollapsed: function(/*event, date*/) {
  237. cbWorked = true;
  238. }
  239. })
  240. .on('nodeCollapsed', function(/*event, date*/) {
  241. onWorked = true;
  242. });
  243. var nodeCount = $('.list-group-item').length;
  244. var el = $('.expand-icon:first');
  245. el.trigger('click');
  246. ok(($('.list-group-item').length < nodeCount), 'Number of nodes has decreased, so node must have collapsed');
  247. ok(cbWorked, 'onNodeCollapsed function was called');
  248. ok(onWorked, 'nodeCollapsed was fired');
  249. });
  250. test('Selecting a node', function () {
  251. var cbWorked, onWorked = false;
  252. var $tree = init({
  253. data: data,
  254. onNodeSelected: function(/*event, date*/) {
  255. cbWorked = true;
  256. }
  257. })
  258. .on('nodeSelected', function(/*event, date*/) {
  259. onWorked = true;
  260. });
  261. var options = getOptions($tree);
  262. // Simulate click
  263. $('.list-group-item:first').trigger('click');
  264. // Has class node-selected
  265. ok($('.list-group-item:first').hasClass('node-selected'), 'Node is correctly selected : class "node-selected" added');
  266. // Only one can be selected
  267. ok(($('.node-selected').length === 1), 'There is only one selected node');
  268. // Has correct icon
  269. var iconClass = options.selectedIcon || options.nodeIcon;
  270. ok(!iconClass || $('.expand-icon:first').hasClass(iconClass), 'Node icon is correct');
  271. // Events triggered
  272. ok(cbWorked, 'onNodeSelected function was called');
  273. ok(onWorked, 'nodeSelected was fired');
  274. });
  275. test('Unselecting a node', function () {
  276. var cbWorked, onWorked = false;
  277. var $tree = init({
  278. data: data,
  279. onNodeUnselected: function(/*event, date*/) {
  280. cbWorked = true;
  281. }
  282. })
  283. .on('nodeUnselected', function(/*event, date*/) {
  284. onWorked = true;
  285. });
  286. var options = getOptions($tree);
  287. // First select a node
  288. $('.list-group-item:first').trigger('click');
  289. cbWorked = onWorked = false;
  290. // Simulate click
  291. $('.list-group-item:first').trigger('click');
  292. // Has class node-selected
  293. ok(!$('.list-group-item:first').hasClass('node-selected'), 'Node is correctly unselected : class "node-selected" removed');
  294. // Only one can be selected
  295. ok(($('.node-selected').length === 0), 'There are no selected nodes');
  296. // Has correct icon
  297. ok(!options.nodeIcon || $('.expand-icon:first').hasClass(options.nodeIcon), 'Node icon is correct');
  298. // Events triggered
  299. ok(cbWorked, 'onNodeUnselected function was called');
  300. ok(onWorked, 'nodeUnselected was fired');
  301. });
  302. test('Selecting multiple nodes (multiSelect true)', function () {
  303. init({
  304. data: data,
  305. multiSelect: true
  306. });
  307. var $firstEl = $('.list-group-item:nth-child(1)').trigger('click');
  308. var $secondEl = $('.list-group-item:nth-child(2)').trigger('click');
  309. $firstEl = $('.list-group-item:nth-child(1)');
  310. $secondEl = $('.list-group-item:nth-child(2)');
  311. ok($firstEl.hasClass('node-selected'), 'First node is correctly selected : class "node-selected" added');
  312. ok($secondEl.hasClass('node-selected'), 'Second node is correctly selected : class "node-selected" added');
  313. ok(($('.node-selected').length === 2), 'There are two selected nodes');
  314. });
  315. test('Clicking a non-selectable, collapsed node expands the node', function () {
  316. var testData = $.extend(true, {}, data);
  317. testData[0].selectable = false;
  318. var cbCalled, onCalled = false;
  319. init({
  320. levels: 1,
  321. data: testData,
  322. onNodeSelected: function(/*event, date*/) {
  323. cbCalled = true;
  324. }
  325. })
  326. .on('nodeSelected', function(/*event, date*/) {
  327. onCalled = true;
  328. });
  329. var nodeCount = $('.list-group-item').length;
  330. var el = $('.list-group-item:first');
  331. el.trigger('click');
  332. el = $('.list-group-item:first');
  333. ok(!el.hasClass('node-selected'), 'Node should not be selected');
  334. ok(!cbCalled, 'onNodeSelected function should not be called');
  335. ok(!onCalled, 'nodeSelected should not fire');
  336. ok(($('.list-group-item').length > nodeCount), 'Number of nodes are increased, so node must have expanded');
  337. });
  338. test('Clicking a non-selectable, expanded node collapses the node', function () {
  339. var testData = $.extend(true, {}, data);
  340. testData[0].selectable = false;
  341. var cbCalled, onCalled = false;
  342. init({
  343. levels: 2,
  344. data: testData,
  345. onNodeSelected: function(/*event, date*/) {
  346. cbCalled = true;
  347. }
  348. })
  349. .on('nodeSelected', function(/*event, date*/) {
  350. onCalled = true;
  351. });
  352. var nodeCount = $('.list-group-item').length;
  353. var el = $('.list-group-item:first');
  354. el.trigger('click');
  355. el = $('.list-group-item:first');
  356. ok(!el.hasClass('node-selected'), 'Node should not be selected');
  357. ok(!cbCalled, 'onNodeSelected function should not be called');
  358. ok(!onCalled, 'nodeSelected should not fire');
  359. ok(($('.list-group-item').length < nodeCount), 'Number of nodes has decreased, so node must have collapsed');
  360. });
  361. test('Checking a node', function () {
  362. // setup test
  363. var cbWorked, onWorked = false;
  364. var $tree = init({
  365. data: data,
  366. showCheckbox: true,
  367. onNodeChecked: function(/*event, date*/) {
  368. cbWorked = true;
  369. }
  370. })
  371. .on('nodeChecked', function(/*event, date*/) {
  372. onWorked = true;
  373. });
  374. var options = getOptions($tree);
  375. // simulate click event on check icon
  376. var $el = $('.check-icon:first');
  377. $el.trigger('click');
  378. // check state is correct
  379. $el = $('.check-icon:first');
  380. ok(($el.attr('class').indexOf(options.checkedIcon) !== -1), 'Node is checked : icon is correct');
  381. ok(cbWorked, 'onNodeChecked function was called');
  382. ok(onWorked, 'nodeChecked was fired');
  383. });
  384. test('Unchecking a node', function () {
  385. // setup test
  386. var cbWorked, onWorked = false;
  387. var $tree = init({
  388. data: data,
  389. showCheckbox: true,
  390. onNodeUnchecked: function(/*event, date*/) {
  391. cbWorked = true;
  392. }
  393. })
  394. .on('nodeUnchecked', function(/*event, date*/) {
  395. onWorked = true;
  396. });
  397. var options = getOptions($tree);
  398. // first check a node
  399. var $el = $('.check-icon:first');
  400. $el.trigger('click');
  401. // then simulate unchecking a node
  402. cbWorked = onWorked = false;
  403. $el = $('.check-icon:first');
  404. $el.trigger('click');
  405. // check state is correct
  406. $el = $('.check-icon:first');
  407. ok(($el.attr('class').indexOf(options.uncheckedIcon) !== -1), 'Node is unchecked : icon is correct');
  408. ok(cbWorked, 'onNodeUnchecked function was called');
  409. ok(onWorked, 'nodeUnchecked was fired');
  410. });
  411. module('Methods');
  412. test('getNode', function () {
  413. var $tree = init({ data: data });
  414. var nodeParent1 = $tree.treeview('getNode', 0);
  415. equal(nodeParent1.text, 'Parent 1', 'Correct node returned : requested "Parent 1", got "Parent 1"');
  416. });
  417. test('getParent', function () {
  418. var $tree = init({ data: data });
  419. var nodeChild1 = $tree.treeview('getNode', 1);
  420. var parentNode = $tree.treeview('getParent', nodeChild1);
  421. equal(parentNode.text, 'Parent 1', 'Correct node returned : requested parent of "Child 1", got "Parent 1"');
  422. });
  423. test('getSiblings', function () {
  424. var $tree = init({ data: data });
  425. // Test root level, internally uses the this.tree
  426. var nodeParent1 = $tree.treeview('getNode', 0);
  427. var nodeParent1Siblings = $tree.treeview('getSiblings', nodeParent1);
  428. var isArray = (nodeParent1Siblings instanceof Array);
  429. var countOK = nodeParent1Siblings.length === 4;
  430. var resultsOK = nodeParent1Siblings[0].text === 'Parent 2';
  431. resultsOK = resultsOK && nodeParent1Siblings[1].text === 'Parent 3';
  432. resultsOK = resultsOK && nodeParent1Siblings[2].text === 'Parent 4';
  433. resultsOK = resultsOK && nodeParent1Siblings[3].text === 'Parent 5';
  434. ok(isArray, 'Correct siblings for "Parent 1" [root] : is array');
  435. ok(countOK, 'Correct siblings for "Parent 1" [root] : count OK');
  436. ok(resultsOK, 'Correct siblings for "Parent 1" [root] : results OK');
  437. // Test non root level, internally uses getParent.nodes
  438. var nodeChild1 = $tree.treeview('getNode', 1);
  439. var nodeChild1Siblings = $tree.treeview('getSiblings', nodeChild1);
  440. var isArray = (nodeChild1Siblings instanceof Array);
  441. var countOK = nodeChild1Siblings.length === 1;
  442. var results = nodeChild1Siblings[0].text === 'Child 2'
  443. ok(isArray, 'Correct siblings for "Child 1" [non root] : is array');
  444. ok(countOK, 'Correct siblings for "Child 1" [non root] : count OK');
  445. ok(results, 'Correct siblings for "Child 1" [non root] : results OK');
  446. });
  447. test('getSelected', function () {
  448. var $tree = init({ data: data })
  449. .treeview('selectNode', 0);
  450. var selectedNodes = $tree.treeview('getSelected');
  451. ok((selectedNodes instanceof Array), 'Result is an array');
  452. equal(selectedNodes.length, 1, 'Correct number of nodes returned');
  453. equal(selectedNodes[0].text, 'Parent 1', 'Correct node returned');
  454. });
  455. test('getUnselected', function () {
  456. var $tree = init({ data: data })
  457. .treeview('selectNode', 0);
  458. var unselectedNodes = $tree.treeview('getUnselected');
  459. ok((unselectedNodes instanceof Array), 'Result is an array');
  460. equal(unselectedNodes.length, 8, 'Correct number of nodes returned');
  461. });
  462. // Assumptions:
  463. // Default tree + expanded to 2 levels,
  464. // means 1 node 'Parent 1' should be expanded and therefore returned
  465. test('getExpanded', function () {
  466. var $tree = init({ data: data });
  467. var expandedNodes = $tree.treeview('getExpanded');
  468. ok((expandedNodes instanceof Array), 'Result is an array');
  469. equal(expandedNodes.length, 1, 'Correct number of nodes returned');
  470. equal(expandedNodes[0].text, 'Parent 1', 'Correct node returned');
  471. });
  472. // Assumptions:
  473. // Default tree + expanded to 2 levels, means only 'Parent 1' should be expanded
  474. // as all other parent nodes have no children their state will be collapsed
  475. // which means 8 of the 9 nodes should be returned
  476. test('getCollapsed', function () {
  477. var $tree = init({ data: data });
  478. var collapsedNodes = $tree.treeview('getCollapsed');
  479. ok((collapsedNodes instanceof Array), 'Result is an array');
  480. equal(collapsedNodes.length, 8, 'Correct number of nodes returned');
  481. });
  482. test('getChecked', function () {
  483. var $tree = init({ data: data, showCheckbox: true })
  484. .treeview('checkNode', 0);
  485. var checkedNodes = $tree.treeview('getChecked');
  486. ok((checkedNodes instanceof Array), 'Result is an array');
  487. equal(checkedNodes.length, 1, 'Correct number of nodes returned');
  488. equal(checkedNodes[0].text, 'Parent 1', 'Correct node returned');
  489. });
  490. test('getUnchecked', function () {
  491. var $tree = init({ data: data })
  492. .treeview('checkNode', 0);
  493. var uncheckedNodes = $tree.treeview('getUnchecked');
  494. ok((uncheckedNodes instanceof Array), 'Result is an array');
  495. equal(uncheckedNodes.length, 8, 'Correct number of nodes returned');
  496. });
  497. test('getDisabled', function () {
  498. var $tree = init({ data: data })
  499. .treeview('disableNode', 0);
  500. var disabledNodes = $tree.treeview('getDisabled');
  501. ok((disabledNodes instanceof Array), 'Result is an array');
  502. equal(disabledNodes.length, 1, 'Correct number of nodes returned');
  503. equal(disabledNodes[0].text, 'Parent 1', 'Correct node returned');
  504. });
  505. test('getEnabled', function () {
  506. var $tree = init({ data: data })
  507. .treeview('disableNode', 0);
  508. var enabledNodes = $tree.treeview('getEnabled');
  509. ok((enabledNodes instanceof Array), 'Result is an array');
  510. equal(enabledNodes.length, 8, 'Correct number of nodes returned');
  511. });
  512. test('disableAll / enableAll', function () {
  513. var $tree = init({ data: data, levels: 1 });
  514. $tree.treeview('disableAll');
  515. equal($($tree.selector + ' ul li.node-disabled').length, 5, 'Disable all works, 9 nodes with node-disabled class');
  516. $tree.treeview('enableAll');
  517. equal($($tree.selector + ' ul li.node-disabled').length, 0, 'Check all works, 9 nodes non with node-disabled class');
  518. });
  519. test('disableNode / enableNode', function () {
  520. var $tree = init({ data: data, levels: 1 });
  521. var nodeId = 0;
  522. var node = $tree.treeview('getNode', 0);
  523. // Disable node using node id
  524. $tree.treeview('disableNode', nodeId);
  525. ok($('.list-group-item:first').hasClass('node-disabled'), 'Disable node (by id) : Node has class node-disabled');
  526. ok(($('.node-disabled').length === 1), 'Disable node (by id) : There is only one disabled node');
  527. // Enable node using node id
  528. $tree.treeview('enableNode', nodeId);
  529. ok(!$('.list-group-item:first').hasClass('node-disabled'), 'Enable node (by id) : Node does not have class node-disabled');
  530. ok(($('.node-checked').length === 0), 'Enable node (by id) : There are no disabled nodes');
  531. // Disable node using node
  532. $tree.treeview('disableNode', node);
  533. ok($('.list-group-item:first').hasClass('node-disabled'), 'Disable node (by node) : Node has class node-disabled');
  534. ok(($('.node-disabled').length === 1), 'Disable node (by node) : There is only one disabled node');
  535. // Enable node using node
  536. $tree.treeview('enableNode', node);
  537. ok(!$('.list-group-item:first').hasClass('node-disabled'), 'Enable node (by node) : Node does not have class node-disabled');
  538. ok(($('.node-checked').length === 0), 'Enable node (by node) : There are no disabled nodes');
  539. });
  540. test('toggleNodeDisabled', function () {
  541. var $tree = init({ data: data, levels: 1 });
  542. var nodeId = 0;
  543. var node = $tree.treeview('getNode', 0);
  544. // Toggle disabled using node id
  545. $tree.treeview('toggleNodeDisabled', nodeId);
  546. ok($('.list-group-item:first').hasClass('node-disabled'), 'Toggle node (by id) : Node has class node-disabled');
  547. ok(($('.node-disabled').length === 1), 'Toggle node (by id) : There is only one disabled node');
  548. // Toggle disabled using node
  549. $tree.treeview('toggleNodeDisabled', node);
  550. ok(!$('.list-group-item:first').hasClass('node-disabled'), 'Toggle node (by node) : Node does not have class node-disabled');
  551. ok(($('.node-disabled').length === 0), 'Toggle node (by node) : There are no disabled nodes');
  552. });
  553. test('checkAll / uncheckAll', function () {
  554. var $tree = init({ data: data, levels: 3, showCheckbox: true });
  555. $tree.treeview('checkAll');
  556. equal($($tree.selector + ' ul li.node-checked').length, 9, 'Check all works, 9 nodes with node-checked class');
  557. equal($($tree.selector + ' ul li .glyphicon-check').length, 9, 'Check all works, 9 nodes with glyphicon-check icon');
  558. $tree.treeview('uncheckAll');
  559. equal($($tree.selector + ' ul li.node-checked').length, 0, 'Check all works, 9 nodes non with node-checked class');
  560. equal($($tree.selector + ' ul li .glyphicon-unchecked').length, 9, 'Check all works, 9 nodes with glyphicon-unchecked icon');
  561. });
  562. test('checkNode / uncheckNode', function () {
  563. var $tree = init({ data: data, showCheckbox: true });
  564. var options = getOptions($tree);
  565. var nodeId = 0;
  566. var node = $tree.treeview('getNode', 0);
  567. // Check node using node id
  568. $tree.treeview('checkNode', nodeId);
  569. ok($('.list-group-item:first').hasClass('node-checked'), 'Check node (by id) : Node has class node-checked');
  570. ok(($('.node-checked').length === 1), 'Check node (by id) : There is only one checked node');
  571. ok($('.check-icon:first').hasClass(options.checkedIcon), 'Check node (by id) : Node icon is correct');
  572. // Uncheck node using node id
  573. $tree.treeview('uncheckNode', nodeId);
  574. ok(!$('.list-group-item:first').hasClass('node-checked'), 'Uncheck node (by id) : Node does not have class node-checked');
  575. ok(($('.node-checked').length === 0), 'Uncheck node (by id) : There are no checked nodes');
  576. ok($('.check-icon:first').hasClass(options.uncheckedIcon), 'Uncheck node (by id) : Node icon is correct');
  577. // Check node using node
  578. $tree.treeview('checkNode', node);
  579. ok($('.list-group-item:first').hasClass('node-checked'), 'Check node (by node) : Node has class node-checked');
  580. ok(($('.node-checked').length === 1), 'Check node (by node) : There is only one checked node');
  581. ok($('.check-icon:first').hasClass(options.checkedIcon), 'Check node (by node) : Node icon is correct');
  582. // Uncheck node using node
  583. $tree.treeview('uncheckNode', node);
  584. ok(!$('.list-group-item:first').hasClass('node-checked'), 'Uncheck node (by node) : Node does not have class node-checked');
  585. ok(($('.node-checked').length === 0), 'Uncheck node (by node) : There are no checked nodes');
  586. ok($('.check-icon:first').hasClass(options.uncheckedIcon), 'Uncheck node (by node) : Node icon is correct');
  587. });
  588. test('toggleNodeChecked', function () {
  589. var $tree = init({ data: data, showCheckbox: true });
  590. var options = getOptions($tree);
  591. var nodeId = 0;
  592. var node = $tree.treeview('getNode', 0);
  593. // Toggle checked using node id
  594. $tree.treeview('toggleNodeChecked', nodeId);
  595. ok($('.list-group-item:first').hasClass('node-checked'), 'Toggle node (by id) : Node has class node-checked');
  596. ok(($('.node-checked').length === 1), 'Toggle node (by id) : There is only one checked node');
  597. ok($('.check-icon:first').hasClass(options.checkedIcon), 'Toggle node (by id) : Node icon is correct');
  598. // Toggle checked using node
  599. $tree.treeview('toggleNodeChecked', node);
  600. ok(!$('.list-group-item:first').hasClass('node-checked'), 'Toggle node (by node) : Node does not have class node-checked');
  601. ok(($('.node-checked').length === 0), 'Toggle node (by node) : There are no checked nodes');
  602. ok($('.check-icon:first').hasClass(options.uncheckedIcon), 'Toggle node (by node) : Node icon is correct');
  603. });
  604. test('selectNode / unselectNode', function () {
  605. var $tree = init({ data: data, selectedIcon: 'glyphicon glyphicon-selected' });
  606. var nodeId = 0;
  607. var node = $tree.treeview('getNode', 0);
  608. // Select node using node id
  609. $tree.treeview('selectNode', nodeId);
  610. ok($('.list-group-item:first').hasClass('node-selected'), 'Select node (by id) : Node has class node-selected');
  611. ok(($('.node-selected').length === 1), 'Select node (by id) : There is only one selected node');
  612. // Unselect node using node id
  613. $tree.treeview('unselectNode', nodeId);
  614. ok(!$('.list-group-item:first').hasClass('node-selected'), 'Unselect node (by id) : Node does not have class node-selected');
  615. ok(($('.node-selected').length === 0), 'Unselect node (by id) : There are no selected nodes');
  616. // Select node using node
  617. $tree.treeview('selectNode', node);
  618. ok($('.list-group-item:first').hasClass('node-selected'), 'Select node (by node) : Node has class node-selected');
  619. ok(($('.node-selected').length === 1), 'Select node (by node) : There is only one selected node');
  620. // Unselect node using node id
  621. $tree.treeview('unselectNode', node);
  622. ok(!$('.list-group-item:first').hasClass('node-selected'), 'Unselect node (by node) : Node does not have class node-selected');
  623. ok(($('.node-selected').length === 0), 'Unselect node (by node) : There are no selected nodes');
  624. });
  625. test('toggleNodeSelected', function () {
  626. var $tree = init({ data: data });
  627. var nodeId = 0;
  628. var node = $tree.treeview('getNode', 0);
  629. // Toggle selected using node id
  630. $tree.treeview('toggleNodeSelected', nodeId);
  631. ok($('.list-group-item:first').hasClass('node-selected'), 'Toggle node (by id) : Node has class node-selected');
  632. ok(($('.node-selected').length === 1), 'Toggle node (by id) : There is only one selected node');
  633. // Toggle selected using node
  634. $tree.treeview('toggleNodeSelected', node);
  635. ok(!$('.list-group-item:first').hasClass('node-selected'), 'Toggle node (by id) : Node does not have class node-selected');
  636. ok(($('.node-selected').length === 0), 'Toggle node (by node) : There are no selected nodes');
  637. });
  638. test('expandAll / collapseAll', function () {
  639. var $tree = init({ data: data, levels: 1 });
  640. equal($($tree.selector + ' ul li').length, 5, 'Starts in collapsed state, 5 root nodes displayed');
  641. $tree.treeview('expandAll');
  642. equal($($tree.selector + ' ul li').length, 9, 'Expand all works, all 9 nodes displayed');
  643. $tree.treeview('collapseAll');
  644. equal($($tree.selector + ' ul li').length, 5, 'Collapse all works, 5 original root nodes displayed');
  645. $tree.treeview('expandAll', { levels: 1 });
  646. equal($($tree.selector + ' ul li').length, 7, 'Expand all (levels = 1) works, correctly displayed 7 nodes');
  647. });
  648. test('expandNode / collapseNode / toggleExpanded', function () {
  649. var $tree = init({ data: data, levels: 1 });
  650. equal($($tree.selector + ' ul li').length, 5, 'Starts in collapsed state, 5 root nodes displayed');
  651. $tree.treeview('expandNode', 0);
  652. equal($($tree.selector + ' ul li').length, 7, 'Expand node (by id) works, 7 nodes displayed');
  653. $tree.treeview('collapseNode', 0);
  654. equal($($tree.selector + ' ul li').length, 5, 'Collapse node (by id) works, 5 original nodes displayed');
  655. $tree.treeview('toggleNodeExpanded', 0);
  656. equal($($tree.selector + ' ul li').length, 7, 'Toggle node (by id) works, 7 nodes displayed');
  657. $tree.treeview('toggleNodeExpanded', 0);
  658. equal($($tree.selector + ' ul li').length, 5, 'Toggle node (by id) works, 5 original nodes displayed');
  659. $tree.treeview('expandNode', [ 0, { levels: 2 } ]);
  660. equal($($tree.selector + ' ul li').length, 9, 'Expand node (levels = 2, by id) works, 9 nodes displayed');
  661. $tree = init({ data: data, levels: 1 });
  662. equal($($tree.selector + ' ul li').length, 5, 'Reset to collapsed state, 5 root nodes displayed');
  663. var nodeParent1 = $tree.treeview('getNode', 0);
  664. $tree.treeview('expandNode', nodeParent1);
  665. equal($($tree.selector + ' ul li').length, 7, 'Expand node (by node) works, 7 nodes displayed');
  666. $tree.treeview('collapseNode', nodeParent1);
  667. equal($($tree.selector + ' ul li').length, 5, 'Collapse node (by node) works, 5 original nodes displayed');
  668. $tree.treeview('toggleNodeExpanded', nodeParent1);
  669. equal($($tree.selector + ' ul li').length, 7, 'Toggle node (by node) works, 7 nodes displayed');
  670. $tree.treeview('toggleNodeExpanded', nodeParent1);
  671. equal($($tree.selector + ' ul li').length, 5, 'Toggle node (by node) works, 5 original nodes displayed');
  672. $tree.treeview('expandNode', [ nodeParent1, { levels: 2 } ]);
  673. equal($($tree.selector + ' ul li').length, 9, 'Expand node (levels = 2, by node) works, 9 nodes displayed');
  674. });
  675. test('revealNode', function () {
  676. var $tree = init({ data: data, levels: 1 });
  677. $tree.treeview('revealNode', 1); // Child_1
  678. equal($($tree.selector + ' ul li').length, 7, 'Reveal node (by id) works, reveal Child 1 and 7 nodes displayed');
  679. var nodeGrandchild1 = $tree.treeview('getNode', 2); // Grandchild 1
  680. $tree.treeview('revealNode', nodeGrandchild1);
  681. equal($($tree.selector + ' ul li').length, 9, 'Reveal node (by node) works, reveal Grandchild 1 and 9 nodes displayed');
  682. });
  683. test('search', function () {
  684. var cbWorked, onWorked = false;
  685. var $tree = init({
  686. data: data,
  687. onSearchComplete: function(/*event, results*/) {
  688. cbWorked = true;
  689. }
  690. })
  691. .on('searchComplete', function(/*event, results*/) {
  692. onWorked = true;
  693. });
  694. // Case sensitive, exact match
  695. var result = $tree.treeview('search', [ 'Parent 1', { ignoreCase: false, exactMatch: true } ]);
  696. equal(result.length, 1, 'Search "Parent 1" case sensitive, exact match - returns 1 result');
  697. // Case sensitive, like
  698. result = $tree.treeview('search', [ 'Parent', { ignoreCase: false, exactMatch: false } ]);
  699. equal(result.length, 5, 'Search "Parent" case sensitive, exact match - returns 5 results');
  700. // Case insensitive, exact match
  701. result = $tree.treeview('search', [ 'parent 1', { ignoreCase: true, exactMatch: true } ]);
  702. equal(result.length, 1, 'Search "parent 1" case insensitive, exact match - returns 1 result');
  703. // Case insensitive, like
  704. result = $tree.treeview('search', [ 'parent', { ignoreCase: true, exactMatch: false } ]);
  705. equal(result.length, 5, 'Search "parent" case insensitive, exact match - returns 5 results')
  706. // Check events fire
  707. ok(cbWorked, 'onSearchComplete function was called');
  708. ok(onWorked, 'searchComplete was fired');
  709. });
  710. test('clearSearch', function () {
  711. var cbWorked, onWorked = false;
  712. var $tree = init({
  713. data: data,
  714. onSearchCleared: function(/*event, results*/) {
  715. cbWorked = true;
  716. }
  717. })
  718. .on('searchCleared', function(/*event, results*/) {
  719. onWorked = true;
  720. });
  721. // Check results are cleared
  722. $tree.treeview('search', [ 'Parent 1', { ignoreCase: false, exactMatch: true } ]);
  723. equal($tree.find('.search-result').length, 1, 'Search results highlighted');
  724. $tree.treeview('clearSearch');
  725. equal($tree.find('.search-result').length, 0, 'Search results cleared');
  726. // Check events fire
  727. ok(cbWorked, 'onSearchCleared function was called');
  728. ok(onWorked, 'searchCleared was fired');
  729. });
  730. }());