ecomp-portal-FE/client/bower_components/jqTree/src_test/test_jqtree.js

   1 var mockjax = require('jquery-mockjax')(jQuery, window);
   2
   3 var utils_for_test = require('./utils_for_test');
   4
   5 var example_data = utils_for_test.example_data;
   6 var example_data2 = utils_for_test.example_data2;
   7 var formatNodes = utils_for_test.formatNodes;
   8 var formatTitles = utils_for_test.formatTitles;
   9 var isNodeOpen = utils_for_test.isNodeOpen;
  10 var isNodeClosed = utils_for_test.isNodeClosed;
  11
  12 var tree_vars = utils_for_test.getTreeVariables();
  13
  14 var Position = tree_vars.Position;
  15
  16 var test = QUnit.test;
  17
  18
  19 QUnit.module("jqtree", {
  20     beforeEach: function() {
  21         $('body').append('<div id="tree1"></div>');
  22     },
  23
  24     afterEach: function() {
  25         var $tree = $('#tree1');
  26         $tree.tree('destroy');
  27         $tree.remove();
  28
  29         $.mockjax.clear();
  30     }
  31 });
  32
  33 test("create jqtree from data", function(assert) {
  34     $('#tree1').tree({
  35         data: example_data
  36     });
  37
  38     assert.equal(
  39         $('#tree1').children().length, 1,
  40         'number of children on level 0'
  41     );
  42     assert.ok(
  43         $('#tree1').children().is('ul.jqtree-tree'),
  44         'first element is ul.jqtree-tree'
  45     );
  46     assert.equal(
  47         $('#tree1 ul.jqtree-tree > li').length, 2,
  48         'number of children on level 1'
  49     );
  50     assert.ok(
  51         $('#tree1 ul.jqtree-tree li:eq(0)').is('li.jqtree-folder.jqtree-closed'),
  52         'first child is li.jqtree-folder.jqtree-closed'
  53     );
  54     assert.ok(
  55         $('#tree1 ul.jqtree-tree li:eq(0) > .jqtree-element > a.jqtree-toggler').is('a.jqtree-toggler.jqtree-closed'),
  56         'button in first folder'
  57     );
  58     assert.equal(
  59         $('#tree1 ul.jqtree-tree li:eq(0) > .jqtree-element span.jqtree-title').text(),
  60         'node1'
  61     );
  62 });
  63
  64 test('toggle', function(assert) {
  65     // setup
  66     var done = assert.async();
  67
  68     // create tree
  69     var $tree = $('#tree1');
  70     var $node1;
  71     var node1;
  72
  73     $tree.tree({
  74         data: example_data
  75     });
  76
  77     $tree.bind(
  78         'tree.open',
  79         function(e) {
  80             assert.ok(! isNodeClosed($node1), 'node1 is open');
  81
  82             // 2. close node1
  83             $tree.tree('toggle', node1);
  84         }
  85     );
  86
  87     $tree.bind(
  88         'tree.close',
  89         function(e) {
  90             assert.ok(isNodeClosed($node1), 'node1 is closed');
  91
  92             done();
  93         }
  94     );
  95
  96     var tree = $tree.tree('getTree');
  97     node1 = tree.children[0];
  98     $node1 = $tree.find('ul.jqtree-tree li:eq(0)');
  99
 100     // node1 is initially closed
 101     assert.ok(isNodeClosed($node1), 'node1 is closed');
 102
 103     // 1. open node1
 104     $tree.tree('toggle', node1);
 105 });
 106
 107 test("click event", function(assert) {
 108     var select_count = 0;
 109
 110     // create tree
 111     var $tree = $('#tree1');
 112
 113     $tree.tree({
 114         data: example_data,
 115         selectable: true
 116     });
 117
 118     var $node1 = $tree.find('ul.jqtree-tree li:first');
 119     var $text_span = $node1.find('span:first');
 120
 121     $tree.bind('tree.click', function(e) {
 122         assert.equal(e.node.name, 'node1');
 123     });
 124
 125     var done = assert.async();
 126
 127     $tree.bind('tree.select', function(e) {
 128         select_count += 1;
 129
 130         if (select_count == 1) {
 131             assert.equal(e.node.name, 'node1');
 132
 133             assert.equal($tree.tree('getSelectedNode').name, 'node1');
 134
 135             // deselect
 136             $text_span.click();
 137         }
 138         else {
 139             assert.equal(e.node, null);
 140             assert.equal(e.previous_node.name, 'node1');
 141             assert.equal($tree.tree('getSelectedNode'), false);
 142
 143             done();
 144         }
 145     });
 146
 147     // click on node1
 148     $text_span.click();
 149 });
 150
 151 test('saveState', function(assert) {
 152     var $tree = $('#tree1');
 153
 154     var saved_state;
 155
 156     function setState(state) {
 157         saved_state = state;
 158     }
 159
 160     function getState() {
 161         return saved_state;
 162     }
 163
 164     function createTree() {
 165         $tree.tree({
 166             data: example_data,
 167             saveState: true,
 168             onSetStateFromStorage: setState,
 169             onGetStateFromStorage: getState,
 170             selectable: true
 171         });
 172     }
 173
 174     // create tree
 175     createTree();
 176
 177     // nodes are initially closed
 178     var tree = $tree.tree('getTree');
 179     tree.iterate(function(node) {
 180         assert.ok(! node.is_open, 'jqtree-closed');
 181         return true;
 182     });
 183
 184     // open node1
 185     $tree.tree('toggle', tree.children[0]);
 186
 187     // node1 is open
 188     assert.ok(tree.children[0].is_open, 'node1 is_open');
 189
 190     // select node2
 191     $tree.tree('selectNode', tree.children[1]);
 192
 193     // node2 is selected
 194     assert.equal(
 195         $tree.tree('getSelectedNode').name,
 196         'node2',
 197         'getSelectedNode (1)'
 198     );
 199
 200     // create tree again
 201     $tree.tree('destroy');
 202     createTree();
 203
 204     tree = $tree.tree('getTree');
 205     assert.ok(tree.children[0].is_open, 'node1 is_open');
 206     assert.ok(! tree.children[1].is_open, 'node2 is closed');
 207
 208     // node2 is selected
 209     assert.equal(
 210         $tree.tree('getSelectedNode').name,
 211         'node2',
 212         'getSelectedNode (2)'
 213     );
 214 });
 215
 216 test('getSelectedNode', function(assert) {
 217     var $tree = $('#tree1');
 218
 219     // create tree
 220     $tree.tree({
 221         data: example_data,
 222         selectable: true
 223     });
 224
 225     // there is no node selected
 226     assert.equal(
 227         $tree.tree('getSelectedNode'),
 228         false,
 229         'getSelectedNode'
 230     );
 231
 232     // select node1
 233     var tree = $tree.tree('getTree');
 234     var node1 = tree.children[0];
 235     $tree.tree('selectNode', node1);
 236
 237     // node1 is selected
 238     assert.equal(
 239         $tree.tree('getSelectedNode').name,
 240         'node1',
 241         'getSelectedNode'
 242     );
 243 });
 244
 245 test("toJson", function(assert) {
 246     // setup
 247     var $tree = $('#tree1');
 248     $tree.tree({
 249         data: example_data
 250     });
 251
 252     // 1. call toJson
 253     assert.equal(
 254         $tree.tree('toJson'),
 255         '[{"name":"node1","id":123,"int_property":1,"str_property":"1",'+
 256         '"children":[{"name":"child1","id":125,"int_property":2},{"name":'+
 257         '"child2","id":126}]},{"name":"node2","id":124,"int_property":3,'+
 258         '"str_property":"3","children":[{"name":"child3","id":127}]}]'
 259     );
 260
 261     // Check that properties 'children', 'parent' and 'element' still exist.
 262     var tree = $tree.tree('getTree');
 263     assert.equal(tree.children.length, 2);
 264     assert.ok(tree.children[0].parent != undefined, 'parent');
 265     assert.ok($(tree.children[0].element).is('li'), 'element');
 266 });
 267
 268 test('loadData', function(assert) {
 269     // setup
 270     var $tree = $('#tree1');
 271     $tree.tree({
 272         data: example_data,
 273         autoOpen: true
 274     });
 275
 276     // first node is 'node1'
 277     assert.equal(
 278         $tree.find('> ul > li:first .jqtree-element:first > span').text(),
 279         'node1'
 280     );
 281
 282     // - load new data
 283     $tree.tree('loadData', example_data2);
 284
 285     // first node is 'main'
 286     assert.equal(
 287         $tree.find('> ul > li:first .jqtree-element:first > span').text(),
 288         'main'
 289     );
 290
 291     // - load new data under node 'child3'
 292     $tree.tree('loadData', example_data);
 293
 294     var child3 = $tree.tree('getNodeByName', 'child3');
 295
 296     var data = [
 297         { label: 'c4', id: 200 },
 298         {
 299             label: 'c5', id: 201,
 300             children: [
 301                 { label: 'c6', id: 202 }
 302             ]
 303         }
 304     ];
 305     $tree.tree('loadData', data, child3);
 306
 307     // first node in html is still 'node1'
 308     assert.equal(
 309         $tree.find('li:eq(0)').find('.jqtree-element:eq(0) span.jqtree-title').text(),
 310         'node1'
 311     );
 312
 313     // Node 'child3' now has a children 'c4' and 'c5'
 314     var $child3 = $tree.find('span:contains(child3)');
 315     var $li = $child3.closest('li');
 316     assert.equal(
 317         $li.children('ul').children('li:eq(0)').find('.jqtree-element span.jqtree-title').text(),
 318         'c4'
 319     );
 320
 321     // Node 'child3' must have toggler button
 322     assert.ok(
 323         $child3.prev().is('a.jqtree-toggler'),
 324         "node 'child3' must have toggler button"
 325     );
 326
 327     // - select node 'c5' and load new data under 'child3'
 328     var c5 = $tree.tree('getNodeByName', 'c5');
 329     $tree.tree('selectNode', c5);
 330
 331     assert.equal($tree.tree('getSelectedNode').name, 'c5');
 332
 333     var data2 = [
 334         { label: 'c7' },
 335         { label: 'c8' }
 336     ];
 337     $tree.tree('loadData', data2, child3);
 338
 339     // c5 must be deselected
 340     assert.equal($tree.tree('getSelectedNode'), false);
 341
 342     // - select c7; load new data under child3; note that c7 has no id
 343     $tree.tree('selectNode', $tree.tree('getNodeByName', 'c7'));
 344
 345     assert.equal($tree.tree('getSelectedNode').name, 'c7');
 346
 347     $tree.tree('loadData', [ 'c9' ], child3);
 348
 349     assert.equal($tree.tree('getSelectedNode'), false);
 350
 351     // - select c9 (which has no id); load new nodes under child2
 352     $tree.tree('selectNode', $tree.tree('getNodeByName', 'c9'));
 353
 354     var child2 = $tree.tree('getNodeByName', 'child2');
 355     $tree.tree('loadData', [ 'c10' ], child2);
 356
 357     assert.equal($tree.tree('getSelectedNode').name, 'c9');
 358 });
 359
 360 test('openNode and closeNode', function(assert) {
 361     // setup
 362     var $tree = $('#tree1');
 363     $tree.tree({
 364         data: example_data
 365     });
 366
 367     var node2 = $tree.tree('getNodeByName', 'node2');
 368     assert.equal(node2.name, 'node2');
 369     assert.equal(node2.is_open, undefined);
 370
 371     // 1. open node2
 372     $tree.tree('openNode', node2, false);
 373     assert.equal(node2.is_open, true);
 374     assert.equal(isNodeOpen($(node2.element)), true);
 375
 376     // 2. close node2
 377     $tree.tree('closeNode', node2, false);
 378     assert.equal(node2.is_open, false);
 379     assert.equal(isNodeClosed($(node2.element)), true);
 380
 381     // 3. open child1
 382     var node1 = $tree.tree('getNodeByName', 'node1');
 383     var child1 = $tree.tree('getNodeByName', 'child1');
 384
 385     // add a child to child1 so it is a folder
 386     $tree.tree('appendNode', 'child1a', child1);
 387
 388     // node1 is initialy closed
 389     assert.equal(node1.is_open, undefined);
 390
 391     // open child1
 392     $tree.tree('openNode', child1, false);
 393
 394     // node1 and child1 are now open1
 395     assert.equal(node1.is_open, true);
 396     assert.equal(child1.is_open, true);
 397 });
 398
 399 function test_open_node_with_callback(slide, include_slide_param, assert) {
 400     // setup
 401     var $tree = $('#tree1');
 402     $tree.tree({
 403         data: example_data
 404     });
 405
 406     var node2 = $tree.tree('getNodeByName', 'node2');
 407
 408     // open node2
 409     var done = assert.async();
 410
 411     function handleOpenNode(node) {
 412       assert.equal(node.name, 'node2');
 413       assert.ok(node.is_open);
 414
 415       done();
 416     }
 417
 418     if (include_slide_param) {
 419         $tree.tree('openNode', node2, slide, handleOpenNode);
 420     }
 421     else {
 422         $tree.tree('openNode', node2, handleOpenNode);
 423     }
 424 }
 425
 426 test('openNode with callback with slide true', function(assert) {
 427     test_open_node_with_callback(true, true, assert);
 428 });
 429
 430 test('openNode with callback with slide false', function(assert) {
 431     test_open_node_with_callback(false, true, assert);
 432 });
 433
 434 test('openNode with callback with slide null', function(assert) {
 435     test_open_node_with_callback(null, true, assert);
 436 });
 437
 438 test('openNode with callback without slide param', function(assert) {
 439     test_open_node_with_callback(null, false, assert);
 440 });
 441
 442 test('selectNode', function(assert) {
 443     // setup
 444     var $tree = $('#tree1');
 445     $tree.tree({
 446         data: example_data,
 447         selectable: true
 448     });
 449
 450     var node1 = $tree.tree('getTree').children[0];
 451     var node2 = $tree.tree('getTree').children[1];
 452     var child3 = node2.children[0];
 453
 454     assert.equal(child3.name, 'child3');
 455     assert.equal(node1.is_open, undefined);
 456     assert.equal(node2.is_open, undefined);
 457     assert.equal(child3.is_open, undefined);
 458
 459     // -- select node 'child3', which is a child of 'node2'; must_open_parents = true
 460     $tree.tree('selectNode', child3, true);
 461     assert.equal($tree.tree('getSelectedNode').name, 'child3');
 462
 463     assert.equal(node1.is_open, undefined);
 464     assert.equal(node2.is_open, true);
 465     assert.equal(child3.is_open, undefined);
 466
 467     // -- select node 'node1'
 468     $tree.tree('selectNode', node1);
 469     assert.equal($tree.tree('getSelectedNode').name, 'node1');
 470
 471     // -- is 'node1' selected?
 472     assert.equal($tree.tree('isNodeSelected', node1), true);
 473
 474     // -- deselect
 475     $tree.tree('selectNode', null);
 476     assert.equal($tree.tree('getSelectedNode'), false);
 477
 478     // -- is 'node1' selected?
 479     assert.equal($tree.tree('isNodeSelected', node1), false);
 480 });
 481
 482 test('selectNode when another node is selected', function(assert) {
 483     // setup
 484     var $tree = $('#tree1');
 485     $tree.tree({
 486         data: example_data,
 487         selectable: true
 488     });
 489
 490     var node1 = $tree.tree('getTree').children[0];
 491     var node2 = $tree.tree('getTree').children[1];
 492
 493     // -- select node 'node2'
 494     $tree.tree('selectNode', node2);
 495     assert.equal($tree.tree('getSelectedNode').name, 'node2');
 496
 497     // -- setting event
 498     // -- is node 'node2' named 'deselected_node' in object's attributes?
 499     var is_select_event_fired = false;
 500
 501     $tree.bind('tree.select', function(e) {
 502         assert.equal(e.deselected_node, node2);
 503         is_select_event_fired = true;
 504     });
 505
 506     // -- select node 'node1'; node 'node2' is selected before it
 507     $tree.tree('selectNode', node1);
 508     assert.equal($tree.tree('getSelectedNode').name, 'node1');
 509
 510     assert.equal($tree.tree('isNodeSelected', node1), true);
 511
 512     // event was fired
 513     assert.ok(is_select_event_fired);
 514 });
 515
 516 test('click toggler', function(assert) {
 517     // setup
 518     var done = assert.async();
 519
 520     var $tree = $('#tree1');
 521     $tree.tree({
 522         data: example_data,
 523         selectable: true
 524     });
 525
 526     var $title = $tree.find('li:eq(0)').find('> .jqtree-element > span.jqtree-title');
 527     assert.equal($title.text(), 'node1');
 528     var $toggler = $title.prev();
 529     assert.ok($toggler.is('a.jqtree-toggler.jqtree-closed'));
 530
 531     $tree.bind('tree.open', function(e) {
 532         // 2. handle 'open' event
 533         assert.equal(e.node.name, 'node1');
 534
 535         // 3. click toggler again
 536         $toggler.click();
 537     });
 538
 539     $tree.bind('tree.close', function(e) {
 540         assert.equal(e.node.name, 'node1');
 541         done();
 542     });
 543
 544     // 1. click toggler of 'node1'
 545     $toggler.click();
 546 });
 547
 548 test('getNodeById', function(assert) {
 549         // setup
 550         var $tree = $('#tree1');
 551     $tree.tree({
 552         data: example_data
 553     });
 554     var node2 = $tree.tree('getNodeByName', 'node2');
 555
 556     // 1. get 'node2' by id
 557     assert.equal(
 558         $tree.tree('getNodeById', 124).name,
 559         'node2'
 560     );
 561
 562     // 2. get id that does not exist
 563     assert.equal($tree.tree('getNodeById', 333), null);
 564
 565     // 3. get id by string
 566     assert.equal(
 567         $tree.tree('getNodeById', '124').name,
 568         'node2'
 569     );
 570
 571     // 4. add node with string id; search by int
 572     $tree.tree(
 573         'appendNode',
 574         {
 575             label: 'abc',
 576             id: '234'
 577         }
 578     );
 579
 580     assert.equal(
 581         $tree.tree('getNodeById', 234).name,
 582         'abc'
 583     );
 584     assert.equal(
 585         $tree.tree('getNodeById', '234').name,
 586         'abc'
 587     );
 588
 589     // 5. load subtree in node2
 590     var subtree_data = [
 591         {
 592             label: 'sub1',
 593             id: 200,
 594             children: [
 595                 {label: 'sub2', id: 201}
 596             ]
 597         }
 598     ];
 599     $tree.tree('loadData',  subtree_data, node2);
 600     var t = $tree.tree('getTree');
 601
 602     assert.equal(
 603         $tree.tree('getNodeById', 200).name,
 604         'sub1'
 605     );
 606     assert.equal(
 607         $tree.tree('getNodeById', 201).name,
 608         'sub2'
 609     );
 610 });
 611
 612 test('autoOpen', function(assert) {
 613     var $tree = $('#tree1');
 614
 615     function formatOpenFolders() {
 616         var open_nodes = [];
 617         $tree.find('li').each(function() {
 618             var $li = $(this);
 619             if ($li.is('.jqtree-folder') && ! $li.is('.jqtree-closed')) {
 620                 var label = $li.children('.jqtree-element').find('span').text();
 621                 open_nodes.push(label);
 622             };
 623         });
 624
 625         return open_nodes.join(';');
 626     }
 627
 628     /*
 629     -l1n1 (level 0)
 630     ----l2n1 (1)
 631     ----l2n2 (1)
 632     -------l3n1 (2)
 633     ----------l4n1 (3)
 634     -l1n2
 635     */
 636     var data = [
 637         {
 638             label: 'l1n1',
 639             children: [
 640                 'l2n1',
 641                 {
 642                     label: 'l2n2',
 643                     children: [
 644                         {
 645                             label: 'l3n1',
 646                             children: [
 647                                 'l4n1'
 648                             ]
 649                         }
 650                     ]
 651                 }
 652             ]
 653         },
 654         'l1n2'
 655     ];
 656
 657     // 1. autoOpen is false
 658     $tree.tree({
 659         data: data,
 660         autoOpen: false
 661     });
 662     assert.equal(formatOpenFolders(), '');
 663
 664     $tree.tree('destroy');
 665
 666     // 2. autoOpen is true
 667     $tree.tree({
 668         data: data,
 669         autoOpen: true
 670     });
 671     assert.equal(formatOpenFolders(), 'l1n1;l2n2;l3n1');
 672
 673     $tree.tree('destroy');
 674
 675     // 3. autoOpen level 1
 676     $tree.tree({
 677         data: data,
 678         autoOpen: 1
 679     });
 680     assert.equal(formatOpenFolders(), 'l1n1;l2n2');
 681 });
 682
 683 test('onCreateLi', function(assert) {
 684     // 1. init tree with onCreateLi
 685     var $tree = $('#tree1');
 686     $tree.tree({
 687         data: example_data,
 688         onCreateLi: function(node, $li) {
 689             var $span = $li.children('.jqtree-element').find('span');
 690             $span.html('_' + node.name + '_');
 691         }
 692     });
 693
 694     assert.equal(
 695         $tree.find('span:eq(0)').text(),
 696         '_node1_'
 697     );
 698 });
 699
 700 test('save state', function(assert) {
 701     // setup
 702     var state = null;
 703
 704     // Fake $.cookie plugin for browsers that do not support localstorage
 705     $.cookie = function(key, param2, param3) {
 706         if (typeof param3 == 'object') {
 707             // set
 708             state = param2;
 709         }
 710         else {
 711             // get
 712             return state;
 713         }
 714     }
 715
 716     // Remove state from localstorage
 717     if (typeof localStorage != 'undefined') {
 718         localStorage.setItem('my_tree', null);
 719     }
 720
 721     // 1. init tree
 722     var $tree = $('#tree1');
 723     $tree.tree({
 724         data: example_data,
 725         selectable: true,
 726         saveState: 'my_tree'
 727     });
 728
 729     var tree = $tree.tree('getTree');
 730     assert.equal($tree.tree('getSelectedNode'), false);
 731
 732     // 2. select node -> state is saved
 733     $tree.tree('selectNode', tree.children[0]);
 734     assert.equal($tree.tree('getSelectedNode').name, 'node1');
 735
 736     // 3. init tree again
 737     $tree.tree('destroy');
 738
 739     $tree.tree({
 740         data: example_data,
 741         selectable: true,
 742         saveState: 'my_tree'
 743     });
 744
 745     assert.equal($tree.tree('getSelectedNode').name, 'node1');
 746
 747     $.cookie = null;
 748 });
 749
 750 test('generate hit areas', function(assert) {
 751     // setup
 752     var $tree = $('#tree1');
 753     $tree.tree({
 754         data: example_data
 755     });
 756
 757     // 1. get hit areas
 758         var node = $tree.tree('getNodeById', 123);
 759     var hit_areas = $tree.tree('testGenerateHitAreas', node);
 760
 761     var strings = $.map(hit_areas, function(hit_area) {
 762         return hit_area.node.name + ' ' + Position.getName(hit_area.position);
 763     });
 764     assert.equal(strings.join(';'), 'node1 none;node2 inside;node2 after');
 765 });
 766
 767 test('removeNode', function(assert) {
 768     // setup
 769     var $tree = $('#tree1');
 770     $tree.tree({
 771         data: example_data,
 772         selectable: true
 773     });
 774
 775     // 1. Remove selected node; node is 'child1'
 776     var child1 = $tree.tree('getNodeByName', 'child1');
 777     $tree.tree('selectNode', child1);
 778
 779     assert.equal($tree.tree('getSelectedNode').name, 'child1');
 780
 781     $tree.tree('removeNode', child1);
 782
 783     assert.equal(
 784         formatTitles($tree),
 785         'node1 child2 node2 child3'
 786     );
 787
 788     // getSelectedNode must now return false
 789     assert.equal($tree.tree('getSelectedNode'), false);
 790
 791     // 2. No node is selected; remove child3
 792     $tree.tree('loadData', example_data);
 793
 794     var child3 = $tree.tree('getNodeByName', 'child3');
 795     $tree.tree('removeNode', child3);
 796
 797     assert.equal(
 798         formatTitles($tree),
 799         'node1 child1 child2 node2'
 800     );
 801
 802     assert.equal($tree.tree('getSelectedNode'), false);
 803
 804     // 3. Remove parent of selected node
 805     $tree.tree('loadData', example_data);
 806
 807     child1 = $tree.tree('getNodeByName', 'child1');
 808     var node1 = $tree.tree('getNodeByName', 'node1');
 809
 810     $tree.tree('selectNode', child1);
 811
 812     $tree.tree('removeNode', node1);
 813
 814     // node is unselected
 815     assert.equal($tree.tree('getSelectedNode'), false);
 816
 817     // 4. Remove unselected node without an id
 818     $tree.tree('loadData', example_data2);
 819
 820     var c1 = $tree.tree('getNodeByName', 'c1');
 821
 822     $tree.tree('removeNode', c1);
 823
 824     assert.equal(
 825         formatTitles($tree),
 826         'main c2'
 827     );
 828 });
 829
 830 test('appendNode', function(assert) {
 831     // setup
 832     var $tree = $('#tree1');
 833     $tree.tree({
 834         data: example_data
 835     });
 836
 837     var node1 = $tree.tree('getNodeByName', 'node1');
 838
 839     // 1. Add child3 to node1
 840     $tree.tree('appendNode', 'child3', node1);
 841
 842     assert.equal(
 843         formatTitles($(node1.element)),
 844         'node1 child1 child2 child3'
 845     );
 846
 847     // 2. Add child4 to child1
 848     var child1 = $tree.tree('getNodeByName', 'child1');
 849
 850     // Node 'child1' does not have a toggler button
 851     assert.equal(
 852         $(child1.element).find('> .jqtree-element > .jqtree-toggler').length,
 853         0
 854     );
 855
 856     $tree.tree('appendNode', 'child4', child1);
 857
 858     assert.equal(formatTitles($(child1.element)), 'child1 child4');
 859
 860     // Node 'child1' must get a toggler button
 861     assert.equal(
 862         $(child1.element).find('> .jqtree-element > .jqtree-toggler').length,
 863         1
 864     );
 865 });
 866
 867 test('prependNode', function(assert) {
 868     // setup
 869     var $tree = $('#tree1');
 870     $tree.tree({
 871         data: example_data
 872     });
 873
 874     var node1 = $tree.tree('getNodeByName', 'node1');
 875
 876     // 1. Prepend child0 to node1
 877     $tree.tree('prependNode', 'child0', node1);
 878
 879     assert.equal(
 880         formatTitles($(node1.element)),
 881         'node1 child0 child1 child2'
 882     );
 883 });
 884
 885 test('init event for local data', function(assert) {
 886     // setup
 887     var done = assert.async();
 888
 889     var $tree = $('#tree1');
 890
 891     $tree.bind('tree.init', function() {
 892         // Check that we can call functions in 'tree.init' event
 893         assert.equal($tree.tree('getNodeByName', 'node2').name, 'node2');
 894
 895         done();
 896     });
 897
 898     // init tree
 899     $tree.tree({
 900         data: example_data
 901     });
 902 });
 903
 904 test('init event for ajax', function(assert) {
 905     // setup
 906     var done = assert.async();
 907
 908     var $tree = $('#tree1');
 909
 910     mockjax({
 911         url: '/tree/',
 912         responseText: example_data,
 913         logging: false
 914     });
 915
 916     $tree.bind('tree.init', function() {
 917         assert.equal($tree.tree('getNodeByName', 'node2').name, 'node2');
 918
 919         done();
 920     });
 921
 922     // init tree
 923     $tree.tree({
 924         dataUrl: '/tree/'
 925     });
 926 });
 927
 928 test('updateNode', function(assert) {
 929     // setup
 930     var $tree = $('#tree1');
 931
 932     $tree.tree({ data: example_data });
 933
 934     assert.equal(formatTitles($tree), 'node1 child1 child2 node2 child3');
 935
 936     // -- update label
 937     var node2 = $tree.tree('getNodeByName', 'node2');
 938     $tree.tree('updateNode', node2, 'CHANGED');
 939
 940     assert.equal(formatTitles($tree), 'node1 child1 child2 CHANGED child3');
 941     assert.equal(node2.name, 'CHANGED');
 942
 943     // -- update data
 944     $tree.tree(
 945         'updateNode',
 946         node2,
 947         {
 948             name: 'xyz',
 949             tag1: 'abc'
 950         }
 951     );
 952
 953     assert.equal(formatTitles($tree), 'node1 child1 child2 xyz child3');
 954     assert.equal(node2.name, 'xyz');
 955     assert.equal(node2.tag1, 'abc');
 956
 957     // - update id
 958     assert.equal(node2.id, 124);
 959
 960     $tree.tree('updateNode', node2, {id: 555});
 961
 962     assert.equal(node2.id, 555);
 963     assert.equal(node2.name, 'xyz');
 964
 965     // get node by id
 966     var node_555 = $tree.tree('getNodeById', 555);
 967     assert.equal(node_555.name, 'xyz');
 968
 969     var node_124 = $tree.tree('getNodeById', 124);
 970     assert.equal(node_124, undefined);
 971
 972     // update child1
 973     var child1 = $tree.tree('getNodeByName', 'child1');
 974
 975     $tree.tree('updateNode', child1, 'child1a');
 976
 977     assert.equal(formatTitles($tree), 'node1 child1a child2 xyz child3');
 978
 979     // select child1
 980     $tree.tree('selectNode', child1);
 981     $tree.tree('updateNode', child1, 'child1b');
 982
 983     assert.ok($(child1.element).hasClass('jqtree-selected'));
 984
 985     // add children to child1
 986     $tree.tree(
 987         'updateNode',
 988         child1,
 989         {
 990             id: child1.id,
 991             name: 'child1',
 992             children: [
 993                 { id: 5, name: 'child1-1' }
 994             ]
 995         }
 996     );
 997
 998     assert.equal(formatTitles($tree), 'node1 child1 child1-1 child2 xyz child3');
 999
1000     // remove children
1001     $tree.tree(
1002         'updateNode',
1003         child1,
1004         {
1005             id: child1.id,
1006             name: 'child1',
1007             children: []
1008         }
1009     );
1010
1011     assert.equal(formatTitles($tree), 'node1 child1 child2 xyz child3');
1012 });
1013
1014 test('moveNode', function(assert) {
1015     // setup
1016     var $tree = $('#tree1');
1017
1018     $tree.tree({ data: example_data });
1019
1020     var child1 = $tree.tree('getNodeByName', 'child1');
1021     var child2 = $tree.tree('getNodeByName', 'child2');
1022     var node1 = $tree.tree('getNodeByName', 'node1');
1023     var node2 = $tree.tree('getNodeByName', 'node2');
1024
1025     // -- Move child1 after node2
1026     $tree.tree('moveNode', child1, node2, 'after');
1027
1028     assert.equal(formatTitles($tree), 'node1 child2 node2 child3 child1');
1029
1030     // -- Check that illegal moves are skipped
1031     $tree.tree('moveNode', node1, child2, 'inside');
1032 });
1033
1034 test('load on demand', function(assert) {
1035     // setup
1036     var done = assert.async();
1037
1038     var $tree = $('#tree1');
1039
1040     $tree.tree({
1041         data: [
1042             {
1043                 id: 1,
1044                 label: 'node1',
1045                 load_on_demand: true
1046             }
1047         ],
1048         dataUrl: '/tree/'
1049     });
1050
1051     mockjax({
1052         url: '*',
1053         response: function(options) {
1054             assert.equal(options.url, '/tree/', '2');
1055             assert.deepEqual(options.data, { 'node' : 1 }, '3');
1056
1057             this.responseText = [
1058                 {
1059                     id: 2,
1060                     label: 'child1'
1061                 }
1062             ];
1063         },
1064         logging: false
1065     });
1066
1067     // -- open node
1068     function handleOpenNode(node) {
1069         assert.equal(node.name, 'node1');
1070         assert.equal(formatTitles($tree), 'node1 child1', '4');
1071
1072         done();
1073     }
1074
1075     var node1 = $tree.tree('getNodeByName', 'node1');
1076     assert.equal(formatTitles($tree), 'node1', '1');
1077
1078     $tree.tree('openNode', node1, handleOpenNode);
1079 });
1080
1081 test('addNodeAfter', function(assert) {
1082     // setup
1083     var $tree = $('#tree1');
1084
1085     $tree.tree({ data: example_data });
1086     var node1 = $tree.tree('getNodeByName', 'node1');
1087
1088     // -- add node after node1
1089     $tree.tree('addNodeAfter', 'node3', node1);
1090
1091     assert.equal(formatTitles($tree), 'node1 child1 child2 node3 node2 child3');
1092 });
1093
1094 test('addNodeBefore', function(assert) {
1095     // setup
1096     var $tree = $('#tree1');
1097
1098     $tree.tree({ data: example_data });
1099     var node1 = $tree.tree('getNodeByName', 'node1');
1100
1101     // -- add node before node1
1102     var new_node = $tree.tree('addNodeBefore', 'node3', node1);
1103
1104     assert.equal(formatTitles($tree), 'node3 node1 child1 child2 node2 child3');
1105 });
1106
1107 test('addParentNode', function(assert) {
1108     // setup
1109     var $tree = $('#tree1');
1110
1111     $tree.tree({ data: example_data });
1112     var child3 = $tree.tree('getNodeByName', 'child3');
1113
1114     // -- add parent to child3
1115     $tree.tree('addParentNode', 'node3', child3);
1116
1117     assert.equal(formatTitles($tree), 'node1 child1 child2 node2 node3 child3');
1118 });
1119
1120 test('mouse events', function(assert) {
1121     // setup
1122     var $tree = $('#tree1');
1123     $tree.tree({
1124         data: example_data,
1125         dragAndDrop: true,
1126         autoOpen: true
1127     });
1128     $tree.tree('setMouseDelay', 0);
1129
1130     function getTitleElement(node_name) {
1131         var node = $tree.tree('getNodeByName', node_name);
1132         var $el = $(node.element);
1133         return $($el.find('.jqtree-title'));
1134     }
1135
1136     var $node1 = getTitleElement('node1');
1137     var $child3 = getTitleElement('child3');
1138
1139     // Move node1 inside child3
1140     // trigger mousedown event on node1
1141     $node1.trigger(
1142         $.Event('mousedown', { which: 1 })
1143     );
1144
1145     // trigger mouse move to child3
1146     var child3_offset = $child3.offset();
1147     $tree.trigger(
1148         $.Event('mousemove', { pageX: child3_offset.left, pageY: child3_offset.top })
1149     );
1150     $tree.trigger('mouseup');
1151
1152     assert.equal(
1153         formatTitles($tree),
1154         'node2 child3 node1 child1 child2'
1155     );
1156 });
1157
1158 test('multiple select', function(assert) {
1159     // setup
1160     var $tree = $('#tree1');
1161     $tree.tree({ data: example_data });
1162
1163     var child1 = $tree.tree('getNodeByName', 'child1');
1164     var child2 = $tree.tree('getNodeByName', 'child2');
1165
1166     // -- add nodes to selection
1167     // todo: more nodes as parameters?
1168     // todo: rename to 'selection.add' or 'selection' 'add'?
1169     $tree.tree('addToSelection', child1);
1170     $tree.tree('addToSelection', child2);
1171
1172     // -- get selected nodes
1173     var selected_nodes = $tree.tree('getSelectedNodes');
1174     assert.equal(
1175         formatNodes(selected_nodes),
1176         'child1 child2'
1177     );
1178 });
1179
1180 test('keyboard', function(assert) {
1181     // setup
1182     var $tree = $('#tree1');
1183
1184     function keyDown(key) {
1185         $tree.trigger(
1186             $.Event('keydown', { which: key })
1187         );
1188     }
1189
1190     $tree.tree({ data: example_data });
1191
1192     var node1 = $tree.tree('getNodeByName', 'node1');
1193
1194     // select node1
1195     $tree.tree('selectNode', node1);
1196     assert.equal(node1.is_open, undefined);
1197
1198     // - move down; -> node2
1199     keyDown(40);
1200     assert.equal($tree.tree('getSelectedNode').name, 'node2');
1201
1202     // - move up; -> back to node1
1203     keyDown(38);
1204     assert.equal($tree.tree('getSelectedNode').name, 'node1');
1205
1206     // - move right; open node1
1207     keyDown(39);
1208     assert.equal(node1.is_open, true);
1209     assert.equal($tree.tree('getSelectedNode').name, 'node1');
1210
1211     // - select child3 and move up -> node2
1212     $tree.tree('selectNode', $tree.tree('getNodeByName', 'child3'));
1213     keyDown(38);
1214     assert.equal($tree.tree('getSelectedNode').name, 'node2');
1215
1216     // - move up -> child2
1217     keyDown(38);
1218     assert.equal($tree.tree('getSelectedNode').name, 'child2');
1219
1220     // - select node1 and move left ->  close
1221     $tree.tree('selectNode', node1);
1222     keyDown(37);
1223     assert.equal(node1.is_open, false);
1224     assert.equal($tree.tree('getSelectedNode').name, 'node1');
1225 });
1226
1227 test('getNodesByProperty', function(assert) {
1228   // setup
1229     var $tree = $('#tree1');
1230     $tree.tree({
1231         data: example_data
1232     });
1233     var node2 = $tree.tree('getNodeByName', 'node2');
1234
1235     // 1. get 'node1' by property
1236     assert.equal(
1237         $tree.tree('getNodesByProperty', 'int_property', 1)[0].name,
1238         'node1'
1239     );
1240
1241     // 2. get property that does not exist in any node
1242     assert.equal($tree.tree('getNodesByProperty', 'int_property', 123).length, 0);
1243
1244     // 3. get string property
1245     assert.equal(
1246         $tree.tree('getNodesByProperty', 'str_property', '1')[0].name,
1247         'node1'
1248     );
1249
1250     // 4. add node with string id; search by int
1251     $tree.tree(
1252         'appendNode',
1253         {
1254             label: 'abc',
1255             id: '234',
1256             str_property: '111',
1257             int_property: 111
1258         }
1259     );
1260
1261     assert.equal(
1262         $tree.tree('getNodesByProperty', 'int_property', 111)[0].name,
1263         'abc'
1264     );
1265     assert.equal(
1266         $tree.tree('getNodesByProperty', 'str_property', '111')[0].name,
1267         'abc'
1268     );
1269
1270     // 5. load subtree in node2
1271     var subtree_data = [
1272         {
1273             label: 'sub1',
1274             id: 200,
1275             int_property: 222,
1276             children: [
1277                 {label: 'sub2', id: 201, int_property: 444}
1278             ]
1279         }
1280     ];
1281     $tree.tree('loadData',  subtree_data, node2);
1282     var t = $tree.tree('getTree');
1283
1284     assert.equal(
1285         $tree.tree('getNodesByProperty', 'int_property', 222)[0].name,
1286         'sub1'
1287     );
1288     assert.equal(
1289         $tree.tree('getNodesByProperty', 'int_property', 444)[0].name,
1290         'sub2'
1291     );
1292 });
1293
1294 test('dataUrl extra options', function(assert) {
1295     var done = assert.async();
1296
1297     var $tree = $('#tree1');
1298
1299     mockjax({
1300         url: '*',
1301         response: function(options) {
1302             // 2. handle ajax request
1303             // expect 'headers' option
1304             assert.equal(options.url, '/tree2/');
1305             assert.deepEqual(options.headers, {'abc': 'def'});
1306
1307             done();
1308         },
1309         logging: false
1310     });
1311
1312     // 1. init tree
1313     // dataUrl contains 'headers' option
1314     $tree.tree({
1315         dataUrl: {
1316             'url': '/tree2/',
1317             'headers': {'abc': 'def'}
1318         }
1319     });
1320 });
1321
1322 test('dataUrl is function', function(assert) {
1323     var done = assert.async();
1324
1325     var $tree = $('#tree1');
1326
1327     mockjax({
1328         url: '*',
1329         response: function(options) {
1330             // 2. handle ajax request
1331             // expect 'headers' option
1332             assert.equal(options.url, '/tree3/');
1333             assert.deepEqual(options.headers, {'abc': 'def'});
1334
1335             done();
1336         },
1337         logging: false
1338     });
1339
1340     // 1. init tree
1341     // dataUrl is a function
1342     $tree.tree({
1343         dataUrl: function(node) {
1344             return {
1345                 'url': '/tree3/',
1346                 'headers': {'abc': 'def'}
1347             };
1348         }
1349     });
1350 });
1351
1352 test('getNodeByHtmlElement', function(assert) {
1353     var $tree = $('#tree1');
1354     $tree.tree({
1355         data: example_data
1356     });
1357
1358     var $el = $('.jqtree-title');
1359
1360     // Get node for jquery element
1361     var node = $tree.tree('getNodeByHtmlElement', $el);
1362     assert.equal(node.name, 'node1');
1363
1364     // Same for html element
1365     node = $tree.tree('getNodeByHtmlElement', $el[0]);
1366     assert.equal(node.name, 'node1');
1367 });
1368
1369 test('onLoadFailed', function(assert) {
1370     mockjax({
1371         url: '/tree/',
1372         status: 500,
1373         responseText: 'test error',
1374         logging: false
1375     });
1376
1377     var done = assert.async();
1378
1379     function handleLoadFailed(e) {
1380         assert.equal(e.responseText, 'test error');
1381
1382         done();
1383     }
1384
1385     var $tree = $('#tree1');
1386     $tree.tree({
1387         dataUrl: '/tree/',
1388         onLoadFailed: handleLoadFailed
1389     });
1390 });