From ce37c56c0905249ab52118b966578db47f682a8b Mon Sep 17 00:00:00 2001 From: Christopher McCulloh Date: Thu, 18 May 2017 11:58:57 -0400 Subject: [PATCH 01/57] fixes most eslint warnings and all errors --- test/tree-test.js | 525 +++++++++++++++++++++++----------------------- 1 file changed, 262 insertions(+), 263 deletions(-) diff --git a/test/tree-test.js b/test/tree-test.js index 73f552ce7..32f066ea2 100644 --- a/test/tree-test.js +++ b/test/tree-test.js @@ -1,265 +1,263 @@ -/*global QUnit:false, module:false, test:false, asyncTest:false, expect:false*/ -/*global start:false, stop:false ok:false, equal:false, notEqual:false, deepEqual:false*/ -/*global notDeepEqual:false, strictEqual:false, notStrictEqual:false, raises:false*/ -define( function ( require ) { +/* global QUnit:false, module:false, test:false, asyncTest:false, expect:false */ +/* global start:false, stop:false ok:false, equal:false, notEqual:false, deepEqual:false */ +/* global notDeepEqual:false, strictEqual:false, notStrictEqual:false, raises:false */ +define(function treeTest (require) { var QUnit = require('qunit'); - var $ = require( "jquery" ); - var html = require( "text!test/markup/tree-markup.html!strip" ); + var $ = require('jquery'); + var html = require('text!test/markup/tree-markup.html!strip'); - $( "body" ).append( html ); + $('body').append(html); - require( "bootstrap" ); - require( "fuelux/tree" ); + require('bootstrap'); + require('fuelux/tree'); - QUnit.module( "Fuel UX Tree", { - beforeEach: function( assert ) { + QUnit.module('Fuel UX Tree', { + beforeEach: function generateGUIDandDataSource () { var callLimit = 50; var callCount = 0; function guid () { function s4 () { - return Math.floor( ( 1 + Math.random() ) * 0x10000 ) - .toString( 16 ) - .substring( 1 ); + return Math.floor((1 + Math.random()) * 0x10000) + .toString(16) + .substring(1); } - return s4() + s4() + "-" + s4() + "-" + s4() + "-" + s4() + "-" + s4() + s4() + s4(); + return s4() + s4() + '-' + s4() + '-' + s4() + '-' + s4() + '-' + s4() + s4() + s4(); } - this.dataSource = function( options, callback ) { - if ( callCount >= callLimit ) { - callback( { + this.dataSource = function genDataSource (options, callback) { + if (callCount >= callLimit) { + callback({ data: [ { - "name": "Convex and Concave", - "type": "item", - "attr": { - "id": "item4" + 'name': 'Convex and Concave', + 'type': 'item', + 'attr': { + 'id': 'item4' } } ] - }, 400 ); + }, 400); return; } callCount++; - callback( { + callback({ data: [ { - name: "Ascending and Descending", - type: "folder", + name: 'Ascending and Descending', + type: 'folder', attr: { - id: "folder" + guid() + id: 'folder' + guid() } }, { - name: "Sky and Water I (with custom icon)", - type: "item", + name: 'Sky and Water I (with custom icon)', + type: 'item', attr: { - id: "folder" + guid(), - "data-icon": "glyphicon glyphicon-file" + id: 'folder' + guid(), + 'data-icon': 'glyphicon glyphicon-file' } }, { - name: "Drawing Hands", - type: "folder", + name: 'Drawing Hands', + type: 'folder', attr: { - id: "folder" + guid(), - "data-children": false + id: 'folder' + guid(), + 'data-children': false } }, { - name: "Waterfall", - type: "item", + name: 'Waterfall', + type: 'item', attr: { - id: "item2" + id: 'item2' } }, { - name: "Belvedere", - type: "folder", + name: 'Belvedere', + type: 'folder', attr: { - id: "folder" + guid() + id: 'folder' + guid() } }, { - name: "Relativity (with custom icon)", - type: "item", + name: 'Relativity (with custom icon)', + type: 'item', attr: { - id: "item3", - "data-icon": "glyphicon glyphicon-picture" + id: 'item3', + 'data-icon': 'glyphicon glyphicon-picture' } }, { - name: "House of Stairs", - type: "folder", + name: 'House of Stairs', + type: 'folder', attr: { - id: "folder" + guid() + id: 'folder' + guid() } }, { - name: "Convex and Concave", - type: "item", + name: 'Convex and Concave', + type: 'item', attr: { - id: "item4" + id: 'item4' } }, { - name: "Load More", - type: "overflow", + name: 'Load More', + type: 'overflow', attr: { - id: "overflow1" + id: 'overflow1' } } ] - } ); + }); }; - this.textDataSource = function( options, callback ) { - callback( { + this.textDataSource = function (options, callback) { + callback({ data: [ { - text: "node text", - type: "folder", + text: 'node text', + type: 'folder', attr: { - id: "folder1" + id: 'folder1' } } ] - } ); + }); }; - } - } ); + }); var NUM_CHILDREN = 9; var NUM_FOLDERS = 4; var NUM_ITEMS = 4; var NUM_OVERFLOWS = 1; - QUnit.test( "should be defined on jquery object", function( assert ) { - assert.ok( $().tree, "tree method is defined" ); - } ); + QUnit.test('should be defined on jquery object', function (assert) { + assert.ok($().tree, 'tree method is defined'); + }); - QUnit.test( "should return element", function( assert ) { - var $tree = $( html ); - assert.ok( $tree.tree() === $tree, "tree should be initialized" ); - } ); + QUnit.test('should return element', function (assert) { + var $tree = $(html); + assert.ok($tree.tree() === $tree, 'tree should be initialized'); + }); - QUnit.test( "should have correct defaults", function correctDefaults( assert ) { - var $tree = $( html ); + QUnit.test('should have correct defaults', function correctDefaults(assert) { + var $tree = $(html); var defaults = $tree.tree.defaults; - assert.equal( defaults.multiSelect, false, "multiSelect defaults to false" ); - assert.equal( defaults.cacheItems, true, "cacheItems defaults to true" ); - assert.equal( defaults.folderSelect, true, "folderSelect defaults to true" ); - assert.equal( defaults.itemSelect, true, "itemSelect defaults to true" ); - assert.equal( defaults.disclosuresUpperLimit, 0, "disclosuresUpperLimit defaults to 0" ); - assert.ok( defaults.dataSource, "dataSource exists by default" ); - } ); - - QUnit.test( "should call dataSource correctly", function( assert ) { - var $tree = $( html ); - $tree.tree( { - dataSource: function( options, callback ) { - assert.ok( 1 === 1, "dataSource function called prior to rendering" ); - assert.equal( typeof options, "object", "dataSource provided options object" ); - assert.equal( typeof callback, "function", "dataSource provided callback function" ); - callback( { + assert.equal(defaults.multiSelect, false, 'multiSelect defaults to false'); + assert.equal(defaults.cacheItems, true, 'cacheItems defaults to true'); + assert.equal(defaults.folderSelect, true, 'folderSelect defaults to true'); + assert.equal(defaults.itemSelect, true, 'itemSelect defaults to true'); + assert.equal(defaults.disclosuresUpperLimit, 0, 'disclosuresUpperLimit defaults to 0'); + assert.ok(defaults.dataSource, 'dataSource exists by default'); + }); + + QUnit.test('should call dataSource correctly', function (assert) { + var $tree = $(html); + $tree.tree({ + dataSource: function (options, callback) { + assert.ok(true, 'dataSource function called prior to rendering'); + assert.equal(typeof options, 'object', 'dataSource provided options object'); + assert.equal(typeof callback, 'function', 'dataSource provided callback function'); + callback({ data: [] - } ); + }); } - } ); - } ); + }); + }); - QUnit.test( "Tree should be populated by items on initialization", function( assert ) { - var $tree = $( html ).find( "#MyTree" ); + QUnit.test('Tree should be populated by items on initialization', function (assert) { + var $tree = $(html).find('#MyTree'); - $tree.tree( { + $tree.tree({ dataSource: this.dataSource - } ); + }); - assert.equal( $tree.find( ".tree-branch:not([data-template])" ).length, NUM_FOLDERS, "Initial set of folders have been added" ); - assert.equal( $tree.find( ".tree-item:not([data-template])" ).length, NUM_ITEMS, "Initial set of items have been added" ); - assert.equal( $tree.find( ".tree-overflow:not([data-template])" ).length, NUM_OVERFLOWS, "Initial overflow has been added" ); - } ); + assert.equal($tree.find('.tree-branch:not([data-template])').length, NUM_FOLDERS, 'Initial set of folders have been added'); + assert.equal($tree.find('.tree-item:not([data-template])').length, NUM_ITEMS, 'Initial set of items have been added'); + assert.equal($tree.find('.tree-overflow:not([data-template])').length, NUM_OVERFLOWS, 'Initial overflow has been added'); + }); - QUnit.test( "Folder should populate when opened", function( assert ) { - var $tree = $( html ).find( "#MyTree" ); + QUnit.test('Folder should populate when opened', function (assert) { + var $tree = $(html).find('#MyTree'); var $selNode; - $tree.tree( { + $tree.tree({ dataSource: this.dataSource - } ); + }); - $selNode = $tree.find( ".tree-branch:eq(1)" ); - $tree.tree( "discloseFolder", $selNode.find( ".tree-branch-name" ) ); - assert.equal( $selNode.find( ".tree-branch-children > li" ).length, NUM_CHILDREN, "Folder has been populated with items/sub-folders" ); + $selNode = $tree.find('.tree-branch:eq(1)'); + $tree.tree('discloseFolder', $selNode.find('.tree-branch-name')); + assert.equal($selNode.find('.tree-branch-children > li').length, NUM_CHILDREN, 'Folder has been populated with items/sub-folders'); - $tree = $( html ).find( "#MyTreeSelectableFolder" ); + $tree = $(html).find('#MyTreeSelectableFolder'); - $tree.tree( { + $tree.tree({ dataSource: this.dataSource, folderSelect: true - } ); + }); - $selNode = $tree.find( ".tree-branch:eq(1)" ); - $tree.tree( "discloseFolder", $selNode.find( ".tree-branch-header" ) ); - assert.equal( $selNode.find( ".tree-branch-children > li" ).length, NUM_CHILDREN, "Folder has been populated with sub-folders and items" ); - } ); + $selNode = $tree.find('.tree-branch:eq(1)'); + $tree.tree('discloseFolder', $selNode.find('.tree-branch-header')); + assert.equal($selNode.find('.tree-branch-children > li').length, NUM_CHILDREN, 'Folder has been populated with sub-folders and items'); + }); - QUnit.test( "getValue alias should function", function( assert ) { - var $tree = $( html ).find( "#MyTree" ); + QUnit.test('getValue alias should function', function (assert) { + var $tree = $(html).find('#MyTree'); // MultiSelect: false is the default - $tree.tree( { + $tree.tree({ dataSource: this.dataSource - } ); + }); - $tree.tree( "selectItem", $tree.find( ".tree-item:eq(1)" ) ); - assert.deepEqual( $tree.tree( "selectedItems" ), $tree.tree( "getValue" ), "getValue aliases selectedItems" ); - } ); + $tree.tree('selectItem', $tree.find('.tree-item:eq(1)')); + assert.deepEqual($tree.tree('selectedItems'), $tree.tree('getValue'), 'getValue aliases selectedItems'); + }); - QUnit.test( "Single item/folder selection works as designed", function( assert ) { - var $tree = $( html ).find( "#MyTree" ); + QUnit.test('Single item/folder selection works as designed', function (assert) { + var $tree = $(html).find('#MyTree'); // MultiSelect: false is the default - $tree.tree( { + $tree.tree({ dataSource: this.dataSource - } ); + }); - $tree.tree( "selectItem", $tree.find( ".tree-item:eq(1)" ) ); - assert.equal( $tree.tree( "selectedItems" ).length, 1, "Return single selected value" ); - $tree.tree( "selectItem", $tree.find( ".tree-item:eq(2)" ) ); - assert.equal( $tree.tree( "selectedItems" ).length, 1, "Return new single selected value" ); + $tree.tree('selectItem', $tree.find('.tree-item:eq(1)')); + assert.equal($tree.tree('selectedItems').length, 1, 'Return single selected value'); + $tree.tree('selectItem', $tree.find('.tree-item:eq(2)')); + assert.equal($tree.tree('selectedItems').length, 1, 'Return new single selected value'); - $tree = $( html ).find( "#MyTreeSelectableFolder" ); + $tree = $(html).find('#MyTreeSelectableFolder'); - $tree.tree( { + $tree.tree({ dataSource: this.dataSource, folderSelect: true - } ); - - $tree.tree( "selectItem", $tree.find( ".tree-item:eq(1)" ) ); - assert.equal( $tree.tree( "selectedItems" ).length, 1, "Return single selected item (none previously selected, 1st programatic selection)" ); + }); - $tree.tree( "selectFolder", $tree.find( ".tree-branch-name:eq(1)" ) ); - assert.equal( $tree.tree( "selectedItems" ).length, 1, "Return single selected folder (item previously selected, 2nd programatic selection)" ); + $tree.tree('selectItem', $tree.find('.tree-item:eq(1)')); + assert.equal($tree.tree('selectedItems').length, 1, 'Return single selected item (none previously selected, 1st programatic selection)'); - $tree.tree( "selectItem", $tree.find( ".tree-item:eq(2)" ) ); - assert.equal( $tree.tree( "selectedItems" ).length, 1, "Return single selected item (folder previously selected, 3rd programatic selection)" ); + $tree.tree('selectFolder', $tree.find('.tree-branch-name:eq(1)')); + assert.equal($tree.tree('selectedItems').length, 1, 'Return single selected folder (item previously selected, 2nd programatic selection)'); - $tree.find( ".tree-item:eq(1)" ).click(); - assert.equal( $tree.tree( "selectedItems" ).length, 1, "Return single selected item (item previously selected, 1st click selection)" ); + $tree.tree('selectItem', $tree.find('.tree-item:eq(2)')); + assert.equal($tree.tree('selectedItems').length, 1, 'Return single selected item (folder previously selected, 3rd programatic selection)'); - $tree.find( ".tree-branch-name:eq(1)" ).click(); - assert.equal( $tree.tree( "selectedItems" ).length, 1, "Return single selected folder (item previously selected, 2nd click selection)" ); + $tree.find('.tree-item:eq(1)').click(); + assert.equal($tree.tree('selectedItems').length, 1, 'Return single selected item (item previously selected, 1st click selection)'); - $tree.find( ".tree-item:eq(2)" ).click(); - assert.equal( $tree.tree( "selectedItems" ).length, 1, "Return single selected item (folder previously selected, 3rd click selection)" ); + $tree.find('.tree-branch-name:eq(1)').click(); + assert.equal($tree.tree('selectedItems').length, 1, 'Return single selected folder (item previously selected, 2nd click selection)'); - } ); + $tree.find('.tree-item:eq(2)').click(); + assert.equal($tree.tree('selectedItems').length, 1, 'Return single selected item (folder previously selected, 3rd click selection)'); + }); // Test("Overflow click works as designed", function () { // var $tree = $(html).find('#MyTree'); @@ -276,177 +274,178 @@ define( function ( require ) { // }); - QUnit.test( "Multiple item/folder selection works as designed", function( assert ) { - var $tree = $( html ).find( "#MyTree" ); + QUnit.test('Multiple item/folder selection works as designed', function (assert) { + var $tree = $(html).find('#MyTree'); - $tree.tree( { + $tree.tree({ dataSource: this.dataSource, multiSelect: true - } ); + }); - $tree.tree( "selectItem", $tree.find( ".tree-item:eq(1)" ) ); - assert.equal( $tree.tree( "selectedItems" ).length, 1, "Return single selected value" ); - $tree.tree( "selectItem", $tree.find( ".tree-item:eq(2)" ) ); - assert.equal( $tree.tree( "selectedItems" ).length, 2, "Return multiple selected values" ); - $tree.tree( "selectItem", $tree.find( ".tree-item:eq(1)" ) ); - assert.equal( $tree.tree( "selectedItems" ).length, 1, "Return single selected value" ); + $tree.tree('selectItem', $tree.find('.tree-item:eq(1)')); + assert.equal($tree.tree('selectedItems').length, 1, 'Return single selected value'); + $tree.tree('selectItem', $tree.find('.tree-item:eq(2)')); + assert.equal($tree.tree('selectedItems').length, 2, 'Return multiple selected values'); + $tree.tree('selectItem', $tree.find('.tree-item:eq(1)')); + assert.equal($tree.tree('selectedItems').length, 1, 'Return single selected value'); - $tree = $( html ).find( "#MyTreeSelectableFolder" ); + $tree = $(html).find('#MyTreeSelectableFolder'); - $tree.tree( { + $tree.tree({ dataSource: this.dataSource, multiSelect: true, folderSelect: true - } ); + }); - $tree.tree( "selectFolder", $tree.find( ".tree-branch-name:eq(1)" ) ); - assert.equal( $tree.tree( "selectedItems" ).length, 1, "Return single selected value" ); - $tree.tree( "selectFolder", $tree.find( ".tree-branch-name:eq(2)" ) ); - assert.equal( $tree.tree( "selectedItems" ).length, 2, "Return multiple selected values" ); - $tree.tree( "selectFolder", $tree.find( ".tree-branch-name:eq(1)" ) ); - assert.equal( $tree.tree( "selectedItems" ).length, 1, "Return single selected value" ); - } ); + $tree.tree('selectFolder', $tree.find('.tree-branch-name:eq(1)')); + assert.equal($tree.tree('selectedItems').length, 1, 'Return single selected value'); + $tree.tree('selectFolder', $tree.find('.tree-branch-name:eq(2)')); + assert.equal($tree.tree('selectedItems').length, 2, 'Return multiple selected values'); + $tree.tree('selectFolder', $tree.find('.tree-branch-name:eq(1)')); + assert.equal($tree.tree('selectedItems').length, 1, 'Return single selected value'); + }); - QUnit.test( "should not allow selecting items if disabled", function( assert ) { - var $tree = $( html ).find( "#MyTree" ); + QUnit.test('should not allow selecting items if disabled', function (assert) { + var $tree = $(html).find('#MyTree'); - $tree.tree( { + $tree.tree({ dataSource: this.dataSource, itemSelect: false - } ); + }); - $tree.tree( "selectItem", $tree.find( ".tree-item:eq(1)" ) ); - assert.equal( $tree.tree( "selectedItems" ).length, 0, "Return no value" ); - } ); + $tree.tree('selectItem', $tree.find('.tree-item:eq(1)')); + assert.equal($tree.tree('selectedItems').length, 0, 'Return no value'); + }); - QUnit.test( "should not allow selecting folders if disabled", function( assert ) { - var $tree = $( html ).find( "#MyTree" ); + QUnit.test('should not allow selecting folders if disabled', function (assert) { + var $tree = $(html).find('#MyTree'); - $tree.tree( { + $tree.tree({ dataSource: this.dataSource, folderSelect: false - } ); + }); - $tree.tree( "selectFolder", $tree.find( ".tree-branch-name:eq(1)" ) ); - assert.equal( $tree.tree( "selectedItems" ).length, 0, "Return no value" ); - } ); + $tree.tree('selectFolder', $tree.find('.tree-branch-name:eq(1)')); + assert.equal($tree.tree('selectedItems').length, 0, 'Return no value'); + }); - QUnit.test( "folders should open and close correctly", function( assert ) { - var $tree = $( html ).find( "#MyTree" ); + QUnit.test('folders should open and close correctly', function (assert) { + var $tree = $(html).find('#MyTree'); - $tree.tree( { + $tree.tree({ dataSource: this.dataSource - } ); - - var $targetBranch = $( $tree.find( ".tree-branch" )[ 0 ] ); - - assert.equal( $targetBranch.hasClass( "tree-open" ), false, "Branch starts closed" ); - $tree.tree( "discloseFolder", $targetBranch ); - assert.equal( $targetBranch.hasClass( "tree-open" ), true, "discloseFolder opens folder" ); - $tree.tree( "discloseFolder", $targetBranch ); - assert.equal( $targetBranch.hasClass( "tree-open" ), true, "redundant discloseFolder calls leaves folder open" ); - $tree.tree( "closeFolder", $targetBranch ); - assert.equal( $targetBranch.hasClass( "tree-open" ), false, "closeFolder closes folder" ); - $tree.tree( "closeFolder", $targetBranch ); - assert.equal( $targetBranch.hasClass( "tree-open" ), false, "redundant closeFolder calls leaves folder closed" ); - $tree.tree( "toggleFolder", $targetBranch ); - assert.equal( $targetBranch.hasClass( "tree-open" ), true, "toggleFolder on closed folder opens folder" ); - $tree.tree( "toggleFolder", $targetBranch ); - assert.equal( $targetBranch.hasClass( "tree-open" ), false, "toggleFolder on open folder closes folder" ); - } ); - - QUnit.test( "should disclose visible folders", function( assert ) { - var ready = assert.async(); - var $tree = $( "body" ).find( "#MyTree" ); - - $tree.tree( { + }); + + var $targetBranch = $($tree.find('.tree-branch')[ 0 ]); + + assert.equal($targetBranch.hasClass('tree-open'), false, 'Branch starts closed'); + $tree.tree('discloseFolder', $targetBranch); + assert.equal($targetBranch.hasClass('tree-open'), true, 'discloseFolder opens folder'); + $tree.tree('discloseFolder', $targetBranch); + assert.equal($targetBranch.hasClass('tree-open'), true, 'redundant discloseFolder calls leaves folder open'); + $tree.tree('closeFolder', $targetBranch); + assert.equal($targetBranch.hasClass('tree-open'), false, 'closeFolder closes folder'); + $tree.tree('closeFolder', $targetBranch); + assert.equal($targetBranch.hasClass('tree-open'), false, 'redundant closeFolder calls leaves folder closed'); + $tree.tree('toggleFolder', $targetBranch); + assert.equal($targetBranch.hasClass('tree-open'), true, 'toggleFolder on closed folder opens folder'); + $tree.tree('toggleFolder', $targetBranch); + assert.equal($targetBranch.hasClass('tree-open'), false, 'toggleFolder on open folder closes folder'); + }); + + QUnit.test('should disclose visible folders', function (assert) { + var ready = assert.async(); + var $tree = $('body').find('#MyTree'); + + $tree.tree({ dataSource: this.dataSource - } ); + }); - var toBeOpened = $tree.find( ".tree-branch:not('.tree-open, .hidden')" ).length; - assert.equal( $tree.find( ".tree-branch.tree-open:not('.hidden')" ).length, 0, "0 folders open" ); + var toBeOpened = $tree.find('.tree-branch:not(".tree-open, .hidden")').length; + assert.equal($tree.find('.tree-branch.tree-open:not(".hidden")').length, 0, '0 folders open'); - $tree.one( "disclosedVisible.fu.tree", function() { - assert.equal( $tree.find( ".tree-branch.tree-open:not('.hidden')" ).length, toBeOpened, toBeOpened + " folders open" ); + $tree.one('disclosedVisible.fu.tree', function () { + assert.equal($tree.find('.tree-branch.tree-open:not(".hidden")').length, toBeOpened, toBeOpened + ' folders open'); ready(); - } ); + }); - $tree.tree( "discloseVisible" ); - } ); + $tree.tree('discloseVisible'); + }); - QUnit.test( "should disclose all folders up to limit, and then close them, then open them all", function( assert ) { - var ready = assert.async(); - var $tree = $( "body" ).find( "#MyTree2" ); + QUnit.test('should disclose all folders up to limit, and then close them, then open them all', function (assert) { + var ready = assert.async(); + var $tree = $('body').find('#MyTree2'); - $tree.tree( { + $tree.tree({ dataSource: this.dataSource, disclosuresUpperLimit: 2 - } ); + }); - assert.equal( $tree.find( ".tree-branch.tree-open:not('.hidden')" ).length, 0, "0 folders open" ); - $tree.one( "exceededDisclosuresLimit.fu.tree", function exceededDisclosuresLimit() { - assert.equal( $tree.find( ".tree-branch.tree-open:not('.hidden')" ).length, 20, "20 folders open" ); + assert.equal($tree.find('.tree-branch.tree-open:not(".hidden")').length, 0, '0 folders open'); + $tree.one('exceededDisclosuresLimit.fu.tree', function exceededDisclosuresLimit() { + assert.equal($tree.find('.tree-branch.tree-open:not(".hidden")').length, 20, '20 folders open'); - $tree.one( "closedAll.fu.tree", function closedAll() { - assert.equal( $tree.find( ".tree-branch.tree-open:not('.hidden')" ).length, 0, "0 folders open" ); + $tree.one('closedAll.fu.tree', function closedAll() { + assert.equal($tree.find('.tree-branch.tree-open:not(".hidden")').length, 0, '0 folders open'); - $tree.data( "ignore-disclosures-limit", true ); + $tree.data('ignore-disclosures-limit', true); - $tree.one( "disclosedAll.fu.tree", function exceededDisclosuresLimit() { - assert.equal( $tree.find( ".tree-branch.tree-open:not('.hidden')" ).length, 200, "200 folders open" ); + $tree.one('disclosedAll.fu.tree', function disclosedAll () { + assert.equal($tree.find('.tree-branch.tree-open:not(".hidden")').length, 200, '200 folders open'); ready(); - } ); + }); - $tree.tree( "discloseAll" ); - } ); + $tree.tree('discloseAll'); + }); - $tree.tree( "closeAll" ); - } ); + $tree.tree('closeAll'); + }); - $tree.tree( "discloseAll" ); - } ); + $tree.tree('discloseAll'); + }); - QUnit.test( "should refresh an already opened/cached folder with new nodes", function( assert ) { - var $tree = $( html ).find( "#MyTree" ); + QUnit.test('should refresh an already opened/cached folder with new nodes', function (assert) { + var $tree = $(html).find('#MyTree'); var $folderToRefresh; - var initialLoadedFolderId, refreshedLoadedFolderId; - var selector = ".tree-branch-children > li:eq(0)"; + var initialLoadedFolderId; + var refreshedLoadedFolderId; + var selector = '.tree-branch-children > li:eq(0)'; - $tree.tree( { + $tree.tree({ dataSource: this.dataSource - } ); - $folderToRefresh = $tree.find( ".tree-branch:eq(1)" ); + }); + $folderToRefresh = $tree.find('.tree-branch:eq(1)'); // Open folder - $tree.tree( "discloseFolder", $folderToRefresh.find( ".tree-branch-name" ) ); - assert.equal( $folderToRefresh.find( ".tree-branch-children > li" ).length, NUM_CHILDREN, "Folder has been populated with items/sub-folders" ); - initialLoadedFolderId = $folderToRefresh.find( selector ).attr( "id" ); + $tree.tree('discloseFolder', $folderToRefresh.find('.tree-branch-name')); + assert.equal($folderToRefresh.find('.tree-branch-children > li').length, NUM_CHILDREN, 'Folder has been populated with items/sub-folders'); + initialLoadedFolderId = $folderToRefresh.find(selector).attr('id'); // Refresh and see if it's the same ID - $tree.tree( "refreshFolder", $folderToRefresh ); - refreshedLoadedFolderId = $folderToRefresh.find( ".tree-branch-children > li:eq(0)" ).attr( "id" ); - assert.notEqual( refreshedLoadedFolderId, initialLoadedFolderId, "Folder has been refreshed and populated with different items/sub-folders" ); - } ); + $tree.tree('refreshFolder', $folderToRefresh); + refreshedLoadedFolderId = $folderToRefresh.find('.tree-branch-children > li:eq(0)').attr('id'); + assert.notEqual(refreshedLoadedFolderId, initialLoadedFolderId, 'Folder has been refreshed and populated with different items/sub-folders'); + }); - QUnit.test( "should destroy control", function( assert ) { - var $tree = $( html ).find( "#MyTree" ); + QUnit.test('should destroy control', function (assert) { + var $tree = $(html).find('#MyTree'); - $tree.tree( { + $tree.tree({ dataSource: this.dataSource - } ); + }); - assert.equal( typeof ( $tree.tree( "destroy" ) ), "string", "returns string (markup)" ); - assert.equal( $tree.parent().length, false, "control has been removed from DOM" ); - } ); + assert.equal(typeof ($tree.tree('destroy')), 'string', 'returns string (markup)'); + assert.equal($tree.parent().length, false, 'control has been removed from DOM'); + }); - QUnit.test( "Tree should accept TEXT as the NAME property in the datasource", function( assert ) { - var $tree = $( html ).find( "#MyTree" ); + QUnit.test('Tree should accept TEXT as the NAME property in the datasource', function (assert) { + var $tree = $(html).find('#MyTree'); - $tree.tree( { + $tree.tree({ dataSource: this.textDataSource - } ); + }); - $tree.tree( "selectFolder", $tree.find( ".tree-branch-name:eq(1)" ) ); - assert.equal( $tree.tree( "selectedItems" )[ 0 ].text, "node text", "Param TEXT used in the datasource" ); - } ); -} ); + $tree.tree('selectFolder', $tree.find('.tree-branch-name:eq(1)')); + assert.equal($tree.tree('selectedItems')[ 0 ].text, 'node text', 'Param TEXT used in the datasource'); + }); +}); From ff985bf5814a29afdf563a000c47f7fa0e15c415 Mon Sep 17 00:00:00 2001 From: Christopher McCulloh Date: Thu, 18 May 2017 13:36:39 -0400 Subject: [PATCH 02/57] fixes remaining eslint errors --- test/tree-test.js | 38 +++++++++++++++++++------------------- 1 file changed, 19 insertions(+), 19 deletions(-) diff --git a/test/tree-test.js b/test/tree-test.js index 32f066ea2..95d68a423 100644 --- a/test/tree-test.js +++ b/test/tree-test.js @@ -115,7 +115,7 @@ define(function treeTest (require) { }); }; - this.textDataSource = function (options, callback) { + this.textDataSource = function textDataSource (options, callback) { callback({ data: [ { @@ -136,16 +136,16 @@ define(function treeTest (require) { var NUM_ITEMS = 4; var NUM_OVERFLOWS = 1; - QUnit.test('should be defined on jquery object', function (assert) { + QUnit.test('should be defined on jquery object', function isTreeDefined (assert) { assert.ok($().tree, 'tree method is defined'); }); - QUnit.test('should return element', function (assert) { + QUnit.test('should return element', function doesTreeReturnTree (assert) { var $tree = $(html); assert.ok($tree.tree() === $tree, 'tree should be initialized'); }); - QUnit.test('should have correct defaults', function correctDefaults(assert) { + QUnit.test('should have correct defaults', function correctDefaults (assert) { var $tree = $(html); var defaults = $tree.tree.defaults; @@ -158,10 +158,10 @@ define(function treeTest (require) { assert.ok(defaults.dataSource, 'dataSource exists by default'); }); - QUnit.test('should call dataSource correctly', function (assert) { + QUnit.test('should call dataSource correctly', function doesCallDataSource (assert) { var $tree = $(html); $tree.tree({ - dataSource: function (options, callback) { + dataSource: function dataSource (options, callback) { assert.ok(true, 'dataSource function called prior to rendering'); assert.equal(typeof options, 'object', 'dataSource provided options object'); assert.equal(typeof callback, 'function', 'dataSource provided callback function'); @@ -172,7 +172,7 @@ define(function treeTest (require) { }); }); - QUnit.test('Tree should be populated by items on initialization', function (assert) { + QUnit.test('Tree should be populated by items on initialization', function isTreePopulated (assert) { var $tree = $(html).find('#MyTree'); $tree.tree({ @@ -184,7 +184,7 @@ define(function treeTest (require) { assert.equal($tree.find('.tree-overflow:not([data-template])').length, NUM_OVERFLOWS, 'Initial overflow has been added'); }); - QUnit.test('Folder should populate when opened', function (assert) { + QUnit.test('Folder should populate when opened', function doesFolderPopulate (assert) { var $tree = $(html).find('#MyTree'); var $selNode; @@ -208,7 +208,7 @@ define(function treeTest (require) { assert.equal($selNode.find('.tree-branch-children > li').length, NUM_CHILDREN, 'Folder has been populated with sub-folders and items'); }); - QUnit.test('getValue alias should function', function (assert) { + QUnit.test('getValue alias should function', function getValueAliasWorks (assert) { var $tree = $(html).find('#MyTree'); // MultiSelect: false is the default @@ -220,7 +220,7 @@ define(function treeTest (require) { assert.deepEqual($tree.tree('selectedItems'), $tree.tree('getValue'), 'getValue aliases selectedItems'); }); - QUnit.test('Single item/folder selection works as designed', function (assert) { + QUnit.test('Single item/folder selection works as designed', function singleSelectWorks (assert) { var $tree = $(html).find('#MyTree'); // MultiSelect: false is the default @@ -274,7 +274,7 @@ define(function treeTest (require) { // }); - QUnit.test('Multiple item/folder selection works as designed', function (assert) { + QUnit.test('Multiple item/folder selection works as designed', function multiSelectWorks (assert) { var $tree = $(html).find('#MyTree'); $tree.tree({ @@ -305,7 +305,7 @@ define(function treeTest (require) { assert.equal($tree.tree('selectedItems').length, 1, 'Return single selected value'); }); - QUnit.test('should not allow selecting items if disabled', function (assert) { + QUnit.test('should not allow selecting items if disabled', function disableSelectItemsWorks (assert) { var $tree = $(html).find('#MyTree'); $tree.tree({ @@ -317,7 +317,7 @@ define(function treeTest (require) { assert.equal($tree.tree('selectedItems').length, 0, 'Return no value'); }); - QUnit.test('should not allow selecting folders if disabled', function (assert) { + QUnit.test('should not allow selecting folders if disabled', function disableSelectFoldersWorks (assert) { var $tree = $(html).find('#MyTree'); $tree.tree({ @@ -329,7 +329,7 @@ define(function treeTest (require) { assert.equal($tree.tree('selectedItems').length, 0, 'Return no value'); }); - QUnit.test('folders should open and close correctly', function (assert) { + QUnit.test('folders should open and close correctly', function foldersOpenClose (assert) { var $tree = $(html).find('#MyTree'); $tree.tree({ @@ -353,7 +353,7 @@ define(function treeTest (require) { assert.equal($targetBranch.hasClass('tree-open'), false, 'toggleFolder on open folder closes folder'); }); - QUnit.test('should disclose visible folders', function (assert) { + QUnit.test('should disclose visible folders', function discloseVisibleWorks (assert) { var ready = assert.async(); var $tree = $('body').find('#MyTree'); @@ -372,7 +372,7 @@ define(function treeTest (require) { $tree.tree('discloseVisible'); }); - QUnit.test('should disclose all folders up to limit, and then close them, then open them all', function (assert) { + QUnit.test('should disclose all folders up to limit, and then close them, then open them all', function discloseAllWorks (assert) { var ready = assert.async(); var $tree = $('body').find('#MyTree2'); @@ -404,7 +404,7 @@ define(function treeTest (require) { $tree.tree('discloseAll'); }); - QUnit.test('should refresh an already opened/cached folder with new nodes', function (assert) { + QUnit.test('should refresh an already opened/cached folder with new nodes', function refreshWorks (assert) { var $tree = $(html).find('#MyTree'); var $folderToRefresh; var initialLoadedFolderId; @@ -427,7 +427,7 @@ define(function treeTest (require) { assert.notEqual(refreshedLoadedFolderId, initialLoadedFolderId, 'Folder has been refreshed and populated with different items/sub-folders'); }); - QUnit.test('should destroy control', function (assert) { + QUnit.test('should destroy control', function destroyWorks (assert) { var $tree = $(html).find('#MyTree'); $tree.tree({ @@ -438,7 +438,7 @@ define(function treeTest (require) { assert.equal($tree.parent().length, false, 'control has been removed from DOM'); }); - QUnit.test('Tree should accept TEXT as the NAME property in the datasource', function (assert) { + QUnit.test('Tree should accept TEXT as the NAME property in the datasource', function treeAcceptsName (assert) { var $tree = $(html).find('#MyTree'); $tree.tree({ From b20bbe176c060db617020b242688eb17651bf41d Mon Sep 17 00:00:00 2001 From: Christopher McCulloh Date: Mon, 22 May 2017 12:16:54 -0400 Subject: [PATCH 03/57] separates out tree dataSource to make the file more manageable --- test/data/treeData.js | 115 ++++++++++++++++++++++++++++++++++++++++++ test/tree-test.js | 108 +++------------------------------------ 2 files changed, 121 insertions(+), 102 deletions(-) create mode 100644 test/data/treeData.js diff --git a/test/data/treeData.js b/test/data/treeData.js new file mode 100644 index 000000000..390293e82 --- /dev/null +++ b/test/data/treeData.js @@ -0,0 +1,115 @@ +/* global QUnit:false, module:false, test:false, asyncTest:false, expect:false */ +/* global start:false, stop:false ok:false, equal:false, notEqual:false, deepEqual:false */ +/* global notDeepEqual:false, strictEqual:false, notStrictEqual:false, raises:false */ +define(function treeDataFactory () { + var guid = function guid () { + var s4 = function s4 () { + return Math.floor((1 + Math.random()) * 0x10000) + .toString(16) + .substring(1); + }; + + var guid = s4() + s4() + '-' + s4() + '-' + s4() + '-' + s4() + '-' + s4() + s4() + s4(); + + return guid; + }; + + var callCountData = { + data: [ + { + 'name': 'Convex and Concave', + 'type': 'item', + 'attr': { + 'id': 'item4' + } + } + ] + }; + + var textData = { + data: [ + { + text: 'node text', + type: 'folder', + attr: { + id: 'folder1' + } + } + ] + }; + + var treeData = function generateTreeData () { + return { + data: [ + { + name: 'Ascending and Descending', + type: 'folder', + attr: { + id: 'folder' + guid() + } + }, + { + name: 'Sky and Water I (with custom icon)', + type: 'item', + attr: { + id: 'folder' + guid(), + 'data-icon': 'glyphicon glyphicon-file' + } + }, + { + name: 'Drawing Hands', + type: 'folder', + attr: { + id: 'folder' + guid(), + 'data-children': false + } + }, + { + name: 'Waterfall', + type: 'item', + attr: { + id: 'item2' + } + }, + { + name: 'Belvedere', + type: 'folder', + attr: { + id: 'folder' + guid() + } + }, + { + name: 'Relativity (with custom icon)', + type: 'item', + attr: { + id: 'item3', + 'data-icon': 'glyphicon glyphicon-picture' + } + }, + { + name: 'House of Stairs', + type: 'folder', + attr: { + id: 'folder' + guid() + } + }, + { + name: 'Convex and Concave', + type: 'item', + attr: { + id: 'item4' + } + }, + { + name: 'Load More', + type: 'overflow', + attr: { + id: 'overflow1' + } + } + ] + }; + }; + + return { treeData: treeData, callCountData: callCountData, textData: textData }; +}); diff --git a/test/tree-test.js b/test/tree-test.js index 95d68a423..84abd7576 100644 --- a/test/tree-test.js +++ b/test/tree-test.js @@ -11,122 +11,26 @@ define(function treeTest (require) { require('bootstrap'); require('fuelux/tree'); + var helperData = require('./data/treeData'); + QUnit.module('Fuel UX Tree', { beforeEach: function generateGUIDandDataSource () { var callLimit = 50; var callCount = 0; - function guid () { - function s4 () { - return Math.floor((1 + Math.random()) * 0x10000) - .toString(16) - .substring(1); - } - return s4() + s4() + '-' + s4() + '-' + s4() + '-' + s4() + '-' + s4() + s4() + s4(); - } - this.dataSource = function genDataSource (options, callback) { if (callCount >= callLimit) { - callback({ - data: [ - { - 'name': 'Convex and Concave', - 'type': 'item', - 'attr': { - 'id': 'item4' - } - } - ] - }, 400); + callback(helperData.callCountData, 400); return; } callCount++; - callback({ - data: [ - { - name: 'Ascending and Descending', - type: 'folder', - attr: { - id: 'folder' + guid() - } - }, - { - name: 'Sky and Water I (with custom icon)', - type: 'item', - attr: { - id: 'folder' + guid(), - 'data-icon': 'glyphicon glyphicon-file' - } - }, - { - name: 'Drawing Hands', - type: 'folder', - attr: { - id: 'folder' + guid(), - 'data-children': false - } - }, - { - name: 'Waterfall', - type: 'item', - attr: { - id: 'item2' - } - }, - { - name: 'Belvedere', - type: 'folder', - attr: { - id: 'folder' + guid() - } - }, - { - name: 'Relativity (with custom icon)', - type: 'item', - attr: { - id: 'item3', - 'data-icon': 'glyphicon glyphicon-picture' - } - }, - { - name: 'House of Stairs', - type: 'folder', - attr: { - id: 'folder' + guid() - } - }, - { - name: 'Convex and Concave', - type: 'item', - attr: { - id: 'item4' - } - }, - { - name: 'Load More', - type: 'overflow', - attr: { - id: 'overflow1' - } - } - ] - }); + callback(helperData.treeData()); }; this.textDataSource = function textDataSource (options, callback) { - callback({ - data: [ - { - text: 'node text', - type: 'folder', - attr: { - id: 'folder1' - } - } - ] - }); + callback(helperData.textData); }; } }); @@ -364,7 +268,7 @@ define(function treeTest (require) { var toBeOpened = $tree.find('.tree-branch:not(".tree-open, .hidden")').length; assert.equal($tree.find('.tree-branch.tree-open:not(".hidden")').length, 0, '0 folders open'); - $tree.one('disclosedVisible.fu.tree', function () { + $tree.one('disclosedVisible.fu.tree', function testDiscloseVisible () { assert.equal($tree.find('.tree-branch.tree-open:not(".hidden")').length, toBeOpened, toBeOpened + ' folders open'); ready(); }); From cb023888c5999f39de37601ba6b90aeb7052cd3f Mon Sep 17 00:00:00 2001 From: Christopher McCulloh Date: Mon, 22 May 2017 16:57:05 -0400 Subject: [PATCH 04/57] breaks tree tests up into their own files to clean it up in preparation for adding a bunch more --- grunt/tasks/test.js | 4 + test/tree-test.js | 333 +----------------- test/tree-tests/calls-datasource.js | 18 + test/tree-tests/defaults.js | 17 + test/tree-tests/disable-select-folders.js | 16 + test/tree-tests/disable-select-items.js | 16 + test/tree-tests/disclose-all.js | 35 ++ test/tree-tests/disclose-visible.js | 22 ++ test/tree-tests/does-folder-populate.js | 29 ++ test/tree-tests/folders-open-close.js | 28 ++ test/tree-tests/get-value-alias.js | 16 + .../treeData.js => tree-tests/helpers.js} | 40 ++- test/tree-tests/is-populated.js | 17 + test/tree-tests/multi-select.js | 35 ++ test/tree-tests/refresh.js | 28 ++ test/tree-tests/single-select.js | 43 +++ test/tree-tests/tree-accepts-name.js | 15 + 17 files changed, 390 insertions(+), 322 deletions(-) create mode 100644 test/tree-tests/calls-datasource.js create mode 100644 test/tree-tests/defaults.js create mode 100644 test/tree-tests/disable-select-folders.js create mode 100644 test/tree-tests/disable-select-items.js create mode 100644 test/tree-tests/disclose-all.js create mode 100644 test/tree-tests/disclose-visible.js create mode 100644 test/tree-tests/does-folder-populate.js create mode 100644 test/tree-tests/folders-open-close.js create mode 100644 test/tree-tests/get-value-alias.js rename test/{data/treeData.js => tree-tests/helpers.js} (71%) create mode 100644 test/tree-tests/is-populated.js create mode 100644 test/tree-tests/multi-select.js create mode 100644 test/tree-tests/refresh.js create mode 100644 test/tree-tests/single-select.js create mode 100644 test/tree-tests/tree-accepts-name.js diff --git a/grunt/tasks/test.js b/grunt/tasks/test.js index 81ad07730..b2ec69e82 100644 --- a/grunt/tasks/test.js +++ b/grunt/tasks/test.js @@ -3,6 +3,10 @@ module.exports = function test (grunt) { grunt.registerTask('test', 'run jshint, qunit source w/ coverage, and validate HTML', ['jshint', 'connect:testServer', 'qunit:noMoment', 'qunit:globals', 'test-dist', 'htmllint']); + grunt.registerTask('unittest', 'run jshint, qunit source w/ coverage, and validate HTML', + ['connect:testServer', 'test-dist']); + + grunt.registerTask('prep-commonjs-test', 'run commonjs config build and browserify to prep for commonjs test', ['commonjs', 'browserify:commonjs']); diff --git a/test/tree-test.js b/test/tree-test.js index 84abd7576..73930279b 100644 --- a/test/tree-test.js +++ b/test/tree-test.js @@ -11,35 +11,10 @@ define(function treeTest (require) { require('bootstrap'); require('fuelux/tree'); - var helperData = require('./data/treeData'); - QUnit.module('Fuel UX Tree', { - beforeEach: function generateGUIDandDataSource () { - var callLimit = 50; - var callCount = 0; - - this.dataSource = function genDataSource (options, callback) { - if (callCount >= callLimit) { - callback(helperData.callCountData, 400); - return; - } - - callCount++; - - callback(helperData.treeData()); - }; - - this.textDataSource = function textDataSource (options, callback) { - callback(helperData.textData); - }; - } + beforeEach: require('./tree-tests/helpers').generateGUIDandDataSource }); - var NUM_CHILDREN = 9; - var NUM_FOLDERS = 4; - var NUM_ITEMS = 4; - var NUM_OVERFLOWS = 1; - QUnit.test('should be defined on jquery object', function isTreeDefined (assert) { assert.ok($().tree, 'tree method is defined'); }); @@ -49,287 +24,20 @@ define(function treeTest (require) { assert.ok($tree.tree() === $tree, 'tree should be initialized'); }); - QUnit.test('should have correct defaults', function correctDefaults (assert) { - var $tree = $(html); - - var defaults = $tree.tree.defaults; - - assert.equal(defaults.multiSelect, false, 'multiSelect defaults to false'); - assert.equal(defaults.cacheItems, true, 'cacheItems defaults to true'); - assert.equal(defaults.folderSelect, true, 'folderSelect defaults to true'); - assert.equal(defaults.itemSelect, true, 'itemSelect defaults to true'); - assert.equal(defaults.disclosuresUpperLimit, 0, 'disclosuresUpperLimit defaults to 0'); - assert.ok(defaults.dataSource, 'dataSource exists by default'); - }); - - QUnit.test('should call dataSource correctly', function doesCallDataSource (assert) { - var $tree = $(html); - $tree.tree({ - dataSource: function dataSource (options, callback) { - assert.ok(true, 'dataSource function called prior to rendering'); - assert.equal(typeof options, 'object', 'dataSource provided options object'); - assert.equal(typeof callback, 'function', 'dataSource provided callback function'); - callback({ - data: [] - }); - } - }); - }); - - QUnit.test('Tree should be populated by items on initialization', function isTreePopulated (assert) { - var $tree = $(html).find('#MyTree'); - - $tree.tree({ - dataSource: this.dataSource - }); - - assert.equal($tree.find('.tree-branch:not([data-template])').length, NUM_FOLDERS, 'Initial set of folders have been added'); - assert.equal($tree.find('.tree-item:not([data-template])').length, NUM_ITEMS, 'Initial set of items have been added'); - assert.equal($tree.find('.tree-overflow:not([data-template])').length, NUM_OVERFLOWS, 'Initial overflow has been added'); - }); - - QUnit.test('Folder should populate when opened', function doesFolderPopulate (assert) { - var $tree = $(html).find('#MyTree'); - var $selNode; - - $tree.tree({ - dataSource: this.dataSource - }); - - $selNode = $tree.find('.tree-branch:eq(1)'); - $tree.tree('discloseFolder', $selNode.find('.tree-branch-name')); - assert.equal($selNode.find('.tree-branch-children > li').length, NUM_CHILDREN, 'Folder has been populated with items/sub-folders'); - - $tree = $(html).find('#MyTreeSelectableFolder'); - - $tree.tree({ - dataSource: this.dataSource, - folderSelect: true - }); - - $selNode = $tree.find('.tree-branch:eq(1)'); - $tree.tree('discloseFolder', $selNode.find('.tree-branch-header')); - assert.equal($selNode.find('.tree-branch-children > li').length, NUM_CHILDREN, 'Folder has been populated with sub-folders and items'); - }); - - QUnit.test('getValue alias should function', function getValueAliasWorks (assert) { - var $tree = $(html).find('#MyTree'); - - // MultiSelect: false is the default - $tree.tree({ - dataSource: this.dataSource - }); - - $tree.tree('selectItem', $tree.find('.tree-item:eq(1)')); - assert.deepEqual($tree.tree('selectedItems'), $tree.tree('getValue'), 'getValue aliases selectedItems'); - }); - - QUnit.test('Single item/folder selection works as designed', function singleSelectWorks (assert) { - var $tree = $(html).find('#MyTree'); - - // MultiSelect: false is the default - $tree.tree({ - dataSource: this.dataSource - }); - - $tree.tree('selectItem', $tree.find('.tree-item:eq(1)')); - assert.equal($tree.tree('selectedItems').length, 1, 'Return single selected value'); - $tree.tree('selectItem', $tree.find('.tree-item:eq(2)')); - assert.equal($tree.tree('selectedItems').length, 1, 'Return new single selected value'); - - $tree = $(html).find('#MyTreeSelectableFolder'); - - $tree.tree({ - dataSource: this.dataSource, - folderSelect: true - }); - - $tree.tree('selectItem', $tree.find('.tree-item:eq(1)')); - assert.equal($tree.tree('selectedItems').length, 1, 'Return single selected item (none previously selected, 1st programatic selection)'); - - $tree.tree('selectFolder', $tree.find('.tree-branch-name:eq(1)')); - assert.equal($tree.tree('selectedItems').length, 1, 'Return single selected folder (item previously selected, 2nd programatic selection)'); - - $tree.tree('selectItem', $tree.find('.tree-item:eq(2)')); - assert.equal($tree.tree('selectedItems').length, 1, 'Return single selected item (folder previously selected, 3rd programatic selection)'); - - $tree.find('.tree-item:eq(1)').click(); - assert.equal($tree.tree('selectedItems').length, 1, 'Return single selected item (item previously selected, 1st click selection)'); - - $tree.find('.tree-branch-name:eq(1)').click(); - assert.equal($tree.tree('selectedItems').length, 1, 'Return single selected folder (item previously selected, 2nd click selection)'); - - $tree.find('.tree-item:eq(2)').click(); - assert.equal($tree.tree('selectedItems').length, 1, 'Return single selected item (folder previously selected, 3rd click selection)'); - }); - - // Test("Overflow click works as designed", function () { - // var $tree = $(html).find('#MyTree'); - - // $tree.tree({ - // dataSource: this.dataSource - // }); - - // Equal($tree.find('> li:not([data-template])').length, NUM_CHILDREN, 'Initial set of folders (' + NUM_CHILDREN + ' children) have been added'); - // $tree.find('.tree-overflow:eq(0)').click(); - // //Once overflow is clicked, all original contents is loaded again, and original overflow is actually REMOVED from tree contents. - // var NUM_AFTER_OVERFLOW_CLICK = (NUM_CHILDREN * 2) - 1; - // equal($tree.find('> li:not([data-template])').length, NUM_AFTER_OVERFLOW_CLICK, 'Overflow contents (now ' + NUM_AFTER_OVERFLOW_CLICK + ' children) have loaded'); - - // }); - - QUnit.test('Multiple item/folder selection works as designed', function multiSelectWorks (assert) { - var $tree = $(html).find('#MyTree'); - - $tree.tree({ - dataSource: this.dataSource, - multiSelect: true - }); - - $tree.tree('selectItem', $tree.find('.tree-item:eq(1)')); - assert.equal($tree.tree('selectedItems').length, 1, 'Return single selected value'); - $tree.tree('selectItem', $tree.find('.tree-item:eq(2)')); - assert.equal($tree.tree('selectedItems').length, 2, 'Return multiple selected values'); - $tree.tree('selectItem', $tree.find('.tree-item:eq(1)')); - assert.equal($tree.tree('selectedItems').length, 1, 'Return single selected value'); - - $tree = $(html).find('#MyTreeSelectableFolder'); - - $tree.tree({ - dataSource: this.dataSource, - multiSelect: true, - folderSelect: true - }); - - $tree.tree('selectFolder', $tree.find('.tree-branch-name:eq(1)')); - assert.equal($tree.tree('selectedItems').length, 1, 'Return single selected value'); - $tree.tree('selectFolder', $tree.find('.tree-branch-name:eq(2)')); - assert.equal($tree.tree('selectedItems').length, 2, 'Return multiple selected values'); - $tree.tree('selectFolder', $tree.find('.tree-branch-name:eq(1)')); - assert.equal($tree.tree('selectedItems').length, 1, 'Return single selected value'); - }); - - QUnit.test('should not allow selecting items if disabled', function disableSelectItemsWorks (assert) { - var $tree = $(html).find('#MyTree'); - - $tree.tree({ - dataSource: this.dataSource, - itemSelect: false - }); - - $tree.tree('selectItem', $tree.find('.tree-item:eq(1)')); - assert.equal($tree.tree('selectedItems').length, 0, 'Return no value'); - }); - - QUnit.test('should not allow selecting folders if disabled', function disableSelectFoldersWorks (assert) { - var $tree = $(html).find('#MyTree'); - - $tree.tree({ - dataSource: this.dataSource, - folderSelect: false - }); - - $tree.tree('selectFolder', $tree.find('.tree-branch-name:eq(1)')); - assert.equal($tree.tree('selectedItems').length, 0, 'Return no value'); - }); - - QUnit.test('folders should open and close correctly', function foldersOpenClose (assert) { - var $tree = $(html).find('#MyTree'); - - $tree.tree({ - dataSource: this.dataSource - }); - - var $targetBranch = $($tree.find('.tree-branch')[ 0 ]); - - assert.equal($targetBranch.hasClass('tree-open'), false, 'Branch starts closed'); - $tree.tree('discloseFolder', $targetBranch); - assert.equal($targetBranch.hasClass('tree-open'), true, 'discloseFolder opens folder'); - $tree.tree('discloseFolder', $targetBranch); - assert.equal($targetBranch.hasClass('tree-open'), true, 'redundant discloseFolder calls leaves folder open'); - $tree.tree('closeFolder', $targetBranch); - assert.equal($targetBranch.hasClass('tree-open'), false, 'closeFolder closes folder'); - $tree.tree('closeFolder', $targetBranch); - assert.equal($targetBranch.hasClass('tree-open'), false, 'redundant closeFolder calls leaves folder closed'); - $tree.tree('toggleFolder', $targetBranch); - assert.equal($targetBranch.hasClass('tree-open'), true, 'toggleFolder on closed folder opens folder'); - $tree.tree('toggleFolder', $targetBranch); - assert.equal($targetBranch.hasClass('tree-open'), false, 'toggleFolder on open folder closes folder'); - }); - - QUnit.test('should disclose visible folders', function discloseVisibleWorks (assert) { - var ready = assert.async(); - var $tree = $('body').find('#MyTree'); - - $tree.tree({ - dataSource: this.dataSource - }); - - var toBeOpened = $tree.find('.tree-branch:not(".tree-open, .hidden")').length; - assert.equal($tree.find('.tree-branch.tree-open:not(".hidden")').length, 0, '0 folders open'); - - $tree.one('disclosedVisible.fu.tree', function testDiscloseVisible () { - assert.equal($tree.find('.tree-branch.tree-open:not(".hidden")').length, toBeOpened, toBeOpened + ' folders open'); - ready(); - }); - - $tree.tree('discloseVisible'); - }); - - QUnit.test('should disclose all folders up to limit, and then close them, then open them all', function discloseAllWorks (assert) { - var ready = assert.async(); - var $tree = $('body').find('#MyTree2'); - - $tree.tree({ - dataSource: this.dataSource, - disclosuresUpperLimit: 2 - }); - - assert.equal($tree.find('.tree-branch.tree-open:not(".hidden")').length, 0, '0 folders open'); - $tree.one('exceededDisclosuresLimit.fu.tree', function exceededDisclosuresLimit() { - assert.equal($tree.find('.tree-branch.tree-open:not(".hidden")').length, 20, '20 folders open'); - - $tree.one('closedAll.fu.tree', function closedAll() { - assert.equal($tree.find('.tree-branch.tree-open:not(".hidden")').length, 0, '0 folders open'); - - $tree.data('ignore-disclosures-limit', true); - - $tree.one('disclosedAll.fu.tree', function disclosedAll () { - assert.equal($tree.find('.tree-branch.tree-open:not(".hidden")').length, 200, '200 folders open'); - ready(); - }); - - $tree.tree('discloseAll'); - }); - - $tree.tree('closeAll'); - }); - - $tree.tree('discloseAll'); - }); - - QUnit.test('should refresh an already opened/cached folder with new nodes', function refreshWorks (assert) { - var $tree = $(html).find('#MyTree'); - var $folderToRefresh; - var initialLoadedFolderId; - var refreshedLoadedFolderId; - var selector = '.tree-branch-children > li:eq(0)'; - - $tree.tree({ - dataSource: this.dataSource - }); - $folderToRefresh = $tree.find('.tree-branch:eq(1)'); - - // Open folder - $tree.tree('discloseFolder', $folderToRefresh.find('.tree-branch-name')); - assert.equal($folderToRefresh.find('.tree-branch-children > li').length, NUM_CHILDREN, 'Folder has been populated with items/sub-folders'); - initialLoadedFolderId = $folderToRefresh.find(selector).attr('id'); - - // Refresh and see if it's the same ID - $tree.tree('refreshFolder', $folderToRefresh); - refreshedLoadedFolderId = $folderToRefresh.find('.tree-branch-children > li:eq(0)').attr('id'); - assert.notEqual(refreshedLoadedFolderId, initialLoadedFolderId, 'Folder has been refreshed and populated with different items/sub-folders'); - }); + QUnit.test('should have correct defaults', require('./tree-tests/defaults')); + QUnit.test('should call dataSource correctly', require('./tree-tests/calls-datasource')); + QUnit.test('Tree should be populated by items on initialization', require('./tree-tests/is-populated')); + QUnit.test('Folder should populate when opened', require('./tree-tests/does-folder-populate')); + QUnit.test('getValue alias should function', require('./tree-tests/get-value-alias')); + QUnit.test('Single item/folder selection works as designed', require('./tree-tests/single-select')); + QUnit.test('Multiple item/folder selection works as designed', require('./tree-tests/multi-select')); + QUnit.test('should not allow selecting items if disabled', require('./tree-tests/disable-select-items')); + QUnit.test('should not allow selecting folders if disabled', require('./tree-tests/disable-select-folders')); + QUnit.test('folders should open and close correctly', require('./tree-tests/folders-open-close')); + QUnit.test('should disclose visible folders', require('./tree-tests/disclose-visible')); + QUnit.test('should disclose all folders up to limit, and then close them, then open them all', require('./tree-tests/disclose-all')); + QUnit.test('should refresh an already opened/cached folder with new nodes', require('./tree-tests/refresh')); + QUnit.test('Tree should accept TEXT as the NAME property in the datasource', require('./tree-tests/tree-accepts-name')); QUnit.test('should destroy control', function destroyWorks (assert) { var $tree = $(html).find('#MyTree'); @@ -341,15 +49,4 @@ define(function treeTest (require) { assert.equal(typeof ($tree.tree('destroy')), 'string', 'returns string (markup)'); assert.equal($tree.parent().length, false, 'control has been removed from DOM'); }); - - QUnit.test('Tree should accept TEXT as the NAME property in the datasource', function treeAcceptsName (assert) { - var $tree = $(html).find('#MyTree'); - - $tree.tree({ - dataSource: this.textDataSource - }); - - $tree.tree('selectFolder', $tree.find('.tree-branch-name:eq(1)')); - assert.equal($tree.tree('selectedItems')[ 0 ].text, 'node text', 'Param TEXT used in the datasource'); - }); }); diff --git a/test/tree-tests/calls-datasource.js b/test/tree-tests/calls-datasource.js new file mode 100644 index 000000000..c04f2deba --- /dev/null +++ b/test/tree-tests/calls-datasource.js @@ -0,0 +1,18 @@ +define(function doesCallDataSourceModule (require) { + var $ = require('jquery'); + var html = require('text!test/markup/tree-markup.html!strip'); + + return function doesCallDataSource (assert) { + var $tree = $(html); + $tree.tree({ + dataSource: function dataSource (options, callback) { + assert.ok(true, 'dataSource function called prior to rendering'); + assert.equal(typeof options, 'object', 'dataSource provided options object'); + assert.equal(typeof callback, 'function', 'dataSource provided callback function'); + callback({ + data: [] + }); + } + }); + }; +}); diff --git a/test/tree-tests/defaults.js b/test/tree-tests/defaults.js new file mode 100644 index 000000000..90db20ffd --- /dev/null +++ b/test/tree-tests/defaults.js @@ -0,0 +1,17 @@ +define(function correctDefaultsModule (require) { + var $ = require('jquery'); + var html = require('text!test/markup/tree-markup.html!strip'); + + return function correctDefaults (assert) { + var $tree = $(html); + + var defaults = $tree.tree.defaults; + + assert.equal(defaults.multiSelect, false, 'multiSelect defaults to false'); + assert.equal(defaults.cacheItems, true, 'cacheItems defaults to true'); + assert.equal(defaults.folderSelect, true, 'folderSelect defaults to true'); + assert.equal(defaults.itemSelect, true, 'itemSelect defaults to true'); + assert.equal(defaults.disclosuresUpperLimit, 0, 'disclosuresUpperLimit defaults to 0'); + assert.ok(defaults.dataSource, 'dataSource exists by default'); + }; +}); diff --git a/test/tree-tests/disable-select-folders.js b/test/tree-tests/disable-select-folders.js new file mode 100644 index 000000000..63cc60123 --- /dev/null +++ b/test/tree-tests/disable-select-folders.js @@ -0,0 +1,16 @@ +define(function disableSelectFoldersModule (require) { + var $ = require('jquery'); + var html = require('text!test/markup/tree-markup.html!strip'); + + return function disableSelectFoldersWorks (assert) { + var $tree = $(html).find('#MyTree'); + + $tree.tree({ + dataSource: this.dataSource, + folderSelect: false + }); + + $tree.tree('selectFolder', $tree.find('.tree-branch-name:eq(1)')); + assert.equal($tree.tree('selectedItems').length, 0, 'Return no value'); + }; +}); diff --git a/test/tree-tests/disable-select-items.js b/test/tree-tests/disable-select-items.js new file mode 100644 index 000000000..84adee3aa --- /dev/null +++ b/test/tree-tests/disable-select-items.js @@ -0,0 +1,16 @@ +define(function disableSelectItemsModule (require) { + var $ = require('jquery'); + var html = require('text!test/markup/tree-markup.html!strip'); + + return function disableSelectItemsWorks (assert) { + var $tree = $(html).find('#MyTree'); + + $tree.tree({ + dataSource: this.dataSource, + itemSelect: false + }); + + $tree.tree('selectItem', $tree.find('.tree-item:eq(1)')); + assert.equal($tree.tree('selectedItems').length, 0, 'Return no value'); + }; +}); diff --git a/test/tree-tests/disclose-all.js b/test/tree-tests/disclose-all.js new file mode 100644 index 000000000..2551bdbf8 --- /dev/null +++ b/test/tree-tests/disclose-all.js @@ -0,0 +1,35 @@ +define(function discloseAllWorksModule (require) { + var $ = require('jquery'); + + return function discloseAllWorks (assert) { + var ready = assert.async(); + var $tree = $('body').find('#MyTree2'); + + $tree.tree({ + dataSource: this.dataSource, + disclosuresUpperLimit: 2 + }); + + assert.equal($tree.find('.tree-branch.tree-open:not(".hidden")').length, 0, '0 folders open'); + $tree.one('exceededDisclosuresLimit.fu.tree', function exceededDisclosuresLimit() { + assert.equal($tree.find('.tree-branch.tree-open:not(".hidden")').length, 20, '20 folders open'); + + $tree.one('closedAll.fu.tree', function closedAll() { + assert.equal($tree.find('.tree-branch.tree-open:not(".hidden")').length, 0, '0 folders open'); + + $tree.data('ignore-disclosures-limit', true); + + $tree.one('disclosedAll.fu.tree', function disclosedAll () { + assert.equal($tree.find('.tree-branch.tree-open:not(".hidden")').length, 200, '200 folders open'); + ready(); + }); + + $tree.tree('discloseAll'); + }); + + $tree.tree('closeAll'); + }); + + $tree.tree('discloseAll'); + }; +}); diff --git a/test/tree-tests/disclose-visible.js b/test/tree-tests/disclose-visible.js new file mode 100644 index 000000000..91788dd2d --- /dev/null +++ b/test/tree-tests/disclose-visible.js @@ -0,0 +1,22 @@ +define(function discloseVisibleWorksModule (require) { + var $ = require('jquery'); + + return function discloseVisibleWorks (assert) { + var ready = assert.async(); + var $tree = $('body').find('#MyTree'); + + $tree.tree({ + dataSource: this.dataSource + }); + + var toBeOpened = $tree.find('.tree-branch:not(".tree-open, .hidden")').length; + assert.equal($tree.find('.tree-branch.tree-open:not(".hidden")').length, 0, '0 folders open'); + + $tree.one('disclosedVisible.fu.tree', function testDiscloseVisible () { + assert.equal($tree.find('.tree-branch.tree-open:not(".hidden")').length, toBeOpened, toBeOpened + ' folders open'); + ready(); + }); + + $tree.tree('discloseVisible'); + }; +}); diff --git a/test/tree-tests/does-folder-populate.js b/test/tree-tests/does-folder-populate.js new file mode 100644 index 000000000..3e756897d --- /dev/null +++ b/test/tree-tests/does-folder-populate.js @@ -0,0 +1,29 @@ +define(function doesFolderPopulateModule (require) { + var $ = require('jquery'); + var html = require('text!test/markup/tree-markup.html!strip'); + var NUM_CHILDREN = require('./helpers').constants.NUM_CHILDREN; + + return function doesFolderPopulate (assert) { + var $tree = $(html).find('#MyTree'); + var $selNode; + + $tree.tree({ + dataSource: this.dataSource + }); + + $selNode = $tree.find('.tree-branch:eq(1)'); + $tree.tree('discloseFolder', $selNode.find('.tree-branch-name')); + assert.equal($selNode.find('.tree-branch-children > li').length, NUM_CHILDREN, 'Folder has been populated with items/sub-folders'); + + $tree = $(html).find('#MyTreeSelectableFolder'); + + $tree.tree({ + dataSource: this.dataSource, + folderSelect: true + }); + + $selNode = $tree.find('.tree-branch:eq(1)'); + $tree.tree('discloseFolder', $selNode.find('.tree-branch-header')); + assert.equal($selNode.find('.tree-branch-children > li').length, NUM_CHILDREN, 'Folder has been populated with sub-folders and items'); + }; +}); diff --git a/test/tree-tests/folders-open-close.js b/test/tree-tests/folders-open-close.js new file mode 100644 index 000000000..75d26bdf5 --- /dev/null +++ b/test/tree-tests/folders-open-close.js @@ -0,0 +1,28 @@ +define(function foldersOpenCloseModule (require) { + var $ = require('jquery'); + var html = require('text!test/markup/tree-markup.html!strip'); + + return function foldersOpenClose (assert) { + var $tree = $(html).find('#MyTree'); + + $tree.tree({ + dataSource: this.dataSource + }); + + var $targetBranch = $($tree.find('.tree-branch')[ 0 ]); + + assert.equal($targetBranch.hasClass('tree-open'), false, 'Branch starts closed'); + $tree.tree('discloseFolder', $targetBranch); + assert.equal($targetBranch.hasClass('tree-open'), true, 'discloseFolder opens folder'); + $tree.tree('discloseFolder', $targetBranch); + assert.equal($targetBranch.hasClass('tree-open'), true, 'redundant discloseFolder calls leaves folder open'); + $tree.tree('closeFolder', $targetBranch); + assert.equal($targetBranch.hasClass('tree-open'), false, 'closeFolder closes folder'); + $tree.tree('closeFolder', $targetBranch); + assert.equal($targetBranch.hasClass('tree-open'), false, 'redundant closeFolder calls leaves folder closed'); + $tree.tree('toggleFolder', $targetBranch); + assert.equal($targetBranch.hasClass('tree-open'), true, 'toggleFolder on closed folder opens folder'); + $tree.tree('toggleFolder', $targetBranch); + assert.equal($targetBranch.hasClass('tree-open'), false, 'toggleFolder on open folder closes folder'); + }; +}); diff --git a/test/tree-tests/get-value-alias.js b/test/tree-tests/get-value-alias.js new file mode 100644 index 000000000..a16cbcd09 --- /dev/null +++ b/test/tree-tests/get-value-alias.js @@ -0,0 +1,16 @@ +define(function getValueAliasModule (require) { + var $ = require('jquery'); + var html = require('text!test/markup/tree-markup.html!strip'); + + return function getValueAliasWorks (assert) { + var $tree = $(html).find('#MyTree'); + + // MultiSelect: false is the default + $tree.tree({ + dataSource: this.dataSource + }); + + $tree.tree('selectItem', $tree.find('.tree-item:eq(1)')); + assert.deepEqual($tree.tree('selectedItems'), $tree.tree('getValue'), 'getValue aliases selectedItems'); + }; +}); diff --git a/test/data/treeData.js b/test/tree-tests/helpers.js similarity index 71% rename from test/data/treeData.js rename to test/tree-tests/helpers.js index 390293e82..462340f48 100644 --- a/test/data/treeData.js +++ b/test/tree-tests/helpers.js @@ -2,6 +2,13 @@ /* global start:false, stop:false ok:false, equal:false, notEqual:false, deepEqual:false */ /* global notDeepEqual:false, strictEqual:false, notStrictEqual:false, raises:false */ define(function treeDataFactory () { + var constants = { + NUM_CHILDREN: 9, + NUM_FOLDERS: 4, + NUM_ITEMS: 4, + NUM_OVERFLOWS: 1 + }; + var guid = function guid () { var s4 = function s4 () { return Math.floor((1 + Math.random()) * 0x10000) @@ -9,9 +16,7 @@ define(function treeDataFactory () { .substring(1); }; - var guid = s4() + s4() + '-' + s4() + '-' + s4() + '-' + s4() + '-' + s4() + s4() + s4(); - - return guid; + return s4() + s4() + '-' + s4() + '-' + s4() + '-' + s4() + '-' + s4() + s4() + s4(); }; var callCountData = { @@ -111,5 +116,32 @@ define(function treeDataFactory () { }; }; - return { treeData: treeData, callCountData: callCountData, textData: textData }; + var generateGUIDandDataSource = function generateGUIDandDataSource () { + var callLimit = 50; + var callCount = 0; + + this.dataSource = function genDataSource (options, callback) { + if (callCount >= callLimit) { + callback(callCountData, 400); + return; + } + + callCount++; + + callback(treeData()); + }; + + this.textDataSource = function textDataSource (options, callback) { + callback(textData); + }; + }; + + + return { + treeData: treeData, + callCountData: callCountData, + textData: textData, + constants: constants, + generateGUIDandDataSource: generateGUIDandDataSource + }; }); diff --git a/test/tree-tests/is-populated.js b/test/tree-tests/is-populated.js new file mode 100644 index 000000000..b087a1b39 --- /dev/null +++ b/test/tree-tests/is-populated.js @@ -0,0 +1,17 @@ +define(function isTreePopulatedModule (require) { + var $ = require('jquery'); + var html = require('text!test/markup/tree-markup.html!strip'); + var constants = require('./helpers').constants; + + return function isTreePopulated (assert) { + var $tree = $(html).find('#MyTree'); + + $tree.tree({ + dataSource: this.dataSource + }); + + assert.equal($tree.find('.tree-branch:not([data-template])').length, constants.NUM_FOLDERS, 'Initial set of folders have been added'); + assert.equal($tree.find('.tree-item:not([data-template])').length, constants.NUM_ITEMS, 'Initial set of items have been added'); + assert.equal($tree.find('.tree-overflow:not([data-template])').length, constants.NUM_OVERFLOWS, 'Initial overflow has been added'); + }; +}); diff --git a/test/tree-tests/multi-select.js b/test/tree-tests/multi-select.js new file mode 100644 index 000000000..5991dc325 --- /dev/null +++ b/test/tree-tests/multi-select.js @@ -0,0 +1,35 @@ +define(function multiSelectWorksModule (require) { + var $ = require('jquery'); + var html = require('text!test/markup/tree-markup.html!strip'); + + return function multiSelectWorks (assert) { + var $tree = $(html).find('#MyTree'); + + $tree.tree({ + dataSource: this.dataSource, + multiSelect: true + }); + + $tree.tree('selectItem', $tree.find('.tree-item:eq(1)')); + assert.equal($tree.tree('selectedItems').length, 1, 'Return single selected value'); + $tree.tree('selectItem', $tree.find('.tree-item:eq(2)')); + assert.equal($tree.tree('selectedItems').length, 2, 'Return multiple selected values'); + $tree.tree('selectItem', $tree.find('.tree-item:eq(1)')); + assert.equal($tree.tree('selectedItems').length, 1, 'Return single selected value'); + + $tree = $(html).find('#MyTreeSelectableFolder'); + + $tree.tree({ + dataSource: this.dataSource, + multiSelect: true, + folderSelect: true + }); + + $tree.tree('selectFolder', $tree.find('.tree-branch-name:eq(1)')); + assert.equal($tree.tree('selectedItems').length, 1, 'Return single selected value'); + $tree.tree('selectFolder', $tree.find('.tree-branch-name:eq(2)')); + assert.equal($tree.tree('selectedItems').length, 2, 'Return multiple selected values'); + $tree.tree('selectFolder', $tree.find('.tree-branch-name:eq(1)')); + assert.equal($tree.tree('selectedItems').length, 1, 'Return single selected value'); + }; +}); diff --git a/test/tree-tests/refresh.js b/test/tree-tests/refresh.js new file mode 100644 index 000000000..6786a6dda --- /dev/null +++ b/test/tree-tests/refresh.js @@ -0,0 +1,28 @@ +define(function refreshWorksModule (require) { + var $ = require('jquery'); + var html = require('text!test/markup/tree-markup.html!strip'); + var NUM_CHILDREN = require('./helpers').constants.NUM_CHILDREN; + + return function refreshWorks (assert) { + var $tree = $(html).find('#MyTree'); + var $folderToRefresh; + var initialLoadedFolderId; + var refreshedLoadedFolderId; + var selector = '.tree-branch-children > li:eq(0)'; + + $tree.tree({ + dataSource: this.dataSource + }); + $folderToRefresh = $tree.find('.tree-branch:eq(1)'); + + // Open folder + $tree.tree('discloseFolder', $folderToRefresh.find('.tree-branch-name')); + assert.equal($folderToRefresh.find('.tree-branch-children > li').length, NUM_CHILDREN, 'Folder has been populated with items/sub-folders'); + initialLoadedFolderId = $folderToRefresh.find(selector).attr('id'); + + // Refresh and see if it's the same ID + $tree.tree('refreshFolder', $folderToRefresh); + refreshedLoadedFolderId = $folderToRefresh.find('.tree-branch-children > li:eq(0)').attr('id'); + assert.notEqual(refreshedLoadedFolderId, initialLoadedFolderId, 'Folder has been refreshed and populated with different items/sub-folders'); + }; +}); diff --git a/test/tree-tests/single-select.js b/test/tree-tests/single-select.js new file mode 100644 index 000000000..5909d4e19 --- /dev/null +++ b/test/tree-tests/single-select.js @@ -0,0 +1,43 @@ +define(function singleSelectWorksModule (require) { + var $ = require('jquery'); + var html = require('text!test/markup/tree-markup.html!strip'); + + return function singleSelectWorks (assert) { + var $tree = $(html).find('#MyTree'); + + // MultiSelect: false is the default + $tree.tree({ + dataSource: this.dataSource + }); + + $tree.tree('selectItem', $tree.find('.tree-item:eq(1)')); + assert.equal($tree.tree('selectedItems').length, 1, 'Return single selected value'); + $tree.tree('selectItem', $tree.find('.tree-item:eq(2)')); + assert.equal($tree.tree('selectedItems').length, 1, 'Return new single selected value'); + + $tree = $(html).find('#MyTreeSelectableFolder'); + + $tree.tree({ + dataSource: this.dataSource, + folderSelect: true + }); + + $tree.tree('selectItem', $tree.find('.tree-item:eq(1)')); + assert.equal($tree.tree('selectedItems').length, 1, 'Return single selected item (none previously selected, 1st programatic selection)'); + + $tree.tree('selectFolder', $tree.find('.tree-branch-name:eq(1)')); + assert.equal($tree.tree('selectedItems').length, 1, 'Return single selected folder (item previously selected, 2nd programatic selection)'); + + $tree.tree('selectItem', $tree.find('.tree-item:eq(2)')); + assert.equal($tree.tree('selectedItems').length, 1, 'Return single selected item (folder previously selected, 3rd programatic selection)'); + + $tree.find('.tree-item:eq(1)').click(); + assert.equal($tree.tree('selectedItems').length, 1, 'Return single selected item (item previously selected, 1st click selection)'); + + $tree.find('.tree-branch-name:eq(1)').click(); + assert.equal($tree.tree('selectedItems').length, 1, 'Return single selected folder (item previously selected, 2nd click selection)'); + + $tree.find('.tree-item:eq(2)').click(); + assert.equal($tree.tree('selectedItems').length, 1, 'Return single selected item (folder previously selected, 3rd click selection)'); + }; +}); diff --git a/test/tree-tests/tree-accepts-name.js b/test/tree-tests/tree-accepts-name.js new file mode 100644 index 000000000..1a85dde0d --- /dev/null +++ b/test/tree-tests/tree-accepts-name.js @@ -0,0 +1,15 @@ +define(function treeAcceptsNameModule (require) { + var $ = require('jquery'); + var html = require('text!test/markup/tree-markup.html!strip'); + + return function treeAcceptsName (assert) { + var $tree = $(html).find('#MyTree'); + + $tree.tree({ + dataSource: this.textDataSource + }); + + $tree.tree('selectFolder', $tree.find('.tree-branch-name:eq(1)')); + assert.equal($tree.tree('selectedItems')[ 0 ].text, 'node text', 'Param TEXT used in the datasource'); + }; +}); From 1286b571ea2e475e4fec28efac4af16a0037bc37 Mon Sep 17 00:00:00 2001 From: Christopher McCulloh Date: Tue, 23 May 2017 15:51:22 -0400 Subject: [PATCH 05/57] comment out other tests while developing --- test/tests.js | 34 +++++++++++++++++----------------- test/tree-test.js | 30 ++++++++++++++++-------------- 2 files changed, 33 insertions(+), 31 deletions(-) diff --git a/test/tests.js b/test/tests.js index dbca99213..9424e2e43 100644 --- a/test/tests.js +++ b/test/tests.js @@ -42,22 +42,22 @@ define(function testWrapper (require) { }); require('moment'); - require('./test/checkbox-test'); - require('./test/combobox-test'); - require('./test/datepicker-moment-test'); - require('./test/infinite-scroll-test'); - require('./test/loader-test'); - require('./test/pillbox-test'); - require('./test/placard-test'); - require('./test/radio-test'); - require('./test/repeater-test'); - require('./test/repeater-list-test'); - require('./test/repeater-thumbnail-test'); - require('./test/scheduler-test'); - require('./test/search-test'); - require('./test/selectlist-test'); - require('./test/spinbox-test'); - require('./test/picker-test'); + // require('./test/checkbox-test'); + // require('./test/combobox-test'); + // require('./test/datepicker-moment-test'); + // require('./test/infinite-scroll-test'); + // require('./test/loader-test'); + // require('./test/pillbox-test'); + // require('./test/placard-test'); + // require('./test/radio-test'); + // require('./test/repeater-test'); + // require('./test/repeater-list-test'); + // require('./test/repeater-thumbnail-test'); + // require('./test/scheduler-test'); + // require('./test/search-test'); + // require('./test/selectlist-test'); + // require('./test/spinbox-test'); + // require('./test/picker-test'); require('./test/tree-test'); - require('./test/wizard-test'); + // require('./test/wizard-test'); }); diff --git a/test/tree-test.js b/test/tree-test.js index 73930279b..0b15419e8 100644 --- a/test/tree-test.js +++ b/test/tree-test.js @@ -24,20 +24,22 @@ define(function treeTest (require) { assert.ok($tree.tree() === $tree, 'tree should be initialized'); }); - QUnit.test('should have correct defaults', require('./tree-tests/defaults')); - QUnit.test('should call dataSource correctly', require('./tree-tests/calls-datasource')); - QUnit.test('Tree should be populated by items on initialization', require('./tree-tests/is-populated')); - QUnit.test('Folder should populate when opened', require('./tree-tests/does-folder-populate')); - QUnit.test('getValue alias should function', require('./tree-tests/get-value-alias')); - QUnit.test('Single item/folder selection works as designed', require('./tree-tests/single-select')); - QUnit.test('Multiple item/folder selection works as designed', require('./tree-tests/multi-select')); - QUnit.test('should not allow selecting items if disabled', require('./tree-tests/disable-select-items')); - QUnit.test('should not allow selecting folders if disabled', require('./tree-tests/disable-select-folders')); - QUnit.test('folders should open and close correctly', require('./tree-tests/folders-open-close')); - QUnit.test('should disclose visible folders', require('./tree-tests/disclose-visible')); - QUnit.test('should disclose all folders up to limit, and then close them, then open them all', require('./tree-tests/disclose-all')); - QUnit.test('should refresh an already opened/cached folder with new nodes', require('./tree-tests/refresh')); - QUnit.test('Tree should accept TEXT as the NAME property in the datasource', require('./tree-tests/tree-accepts-name')); + // QUnit.test('should have correct defaults', require('./tree-tests/defaults')); + // QUnit.test('should call dataSource correctly', require('./tree-tests/calls-datasource')); + // QUnit.test('should be populated by items on initialization', require('./tree-tests/is-populated')); + // QUnit.test('folder should populate when opened', require('./tree-tests/does-folder-populate')); + // QUnit.test('getValue alias should function', require('./tree-tests/get-value-alias')); + // QUnit.test('single item/folder selection works as designed', require('./tree-tests/single-select')); + // QUnit.test('multiple item/folder selection works as designed', require('./tree-tests/multi-select')); + // QUnit.test('should not allow selecting items if disabled', require('./tree-tests/disable-select-items')); + // QUnit.test('should not allow selecting folders if disabled', require('./tree-tests/disable-select-folders')); + // QUnit.test('folders should open and close correctly', require('./tree-tests/folders-open-close')); + // QUnit.test('should disclose visible folders', require('./tree-tests/disclose-visible')); + // QUnit.test('should disclose all folders up to limit, and then close them, then open them all', require('./tree-tests/disclose-all')); + // QUnit.test('should refresh an already opened/cached folder with new nodes', require('./tree-tests/refresh')); + // QUnit.test('should accept TEXT as the NAME property in the datasource', require('./tree-tests/tree-accepts-name')); + // QUnit.test('should have proper tabindexes', require('./tree-tests/tab-indexes')); + QUnit.test('should respond to arrow keys', require('./tree-tests/responds-to-arrow-keys')); QUnit.test('should destroy control', function destroyWorks (assert) { var $tree = $(html).find('#MyTree'); From e80b8f1e57dc5f57109acdea19b6047782505c8e Mon Sep 17 00:00:00 2001 From: Christopher McCulloh Date: Tue, 23 May 2017 23:04:45 -0400 Subject: [PATCH 06/57] cleans up unit tests more --- bower.json | 2 +- test/tree-test.js | 63 +++++++++-------------- test/tree-tests/calls-datasource.js | 10 ++-- test/tree-tests/defaults.js | 9 +--- test/tree-tests/disable-select-folders.js | 13 ++--- test/tree-tests/disable-select-items.js | 13 ++--- test/tree-tests/disclose-all.js | 6 +-- test/tree-tests/disclose-visible.js | 8 ++- test/tree-tests/does-folder-populate.js | 16 +++--- test/tree-tests/folders-open-close.js | 19 +++---- test/tree-tests/get-value-alias.js | 13 ++--- test/tree-tests/helpers.js | 25 +++++++-- test/tree-tests/is-populated.js | 12 ++--- test/tree-tests/multi-select.js | 36 ++++++------- test/tree-tests/refresh.js | 11 ++-- test/tree-tests/single-select.js | 44 +++++++--------- test/tree-tests/tree-accepts-name.js | 13 ++--- 17 files changed, 133 insertions(+), 180 deletions(-) diff --git a/bower.json b/bower.json index 2319aea33..4ffcd4d1b 100644 --- a/bower.json +++ b/bower.json @@ -25,7 +25,7 @@ "devDependencies": { "jquery": null, "jquery-1.9.1": "jquery#1.9.1", - "qunit": "2.3.0", + "qunit": "2.3.2", "requirejs-text": "2.x", "underscore": "1.x", "blanket": "1.x", diff --git a/test/tree-test.js b/test/tree-test.js index 0b15419e8..0bc24828f 100644 --- a/test/tree-test.js +++ b/test/tree-test.js @@ -4,51 +4,38 @@ define(function treeTest (require) { var QUnit = require('qunit'); var $ = require('jquery'); - var html = require('text!test/markup/tree-markup.html!strip'); - - $('body').append(html); require('bootstrap'); require('fuelux/tree'); QUnit.module('Fuel UX Tree', { - beforeEach: require('./tree-tests/helpers').generateGUIDandDataSource - }); - - QUnit.test('should be defined on jquery object', function isTreeDefined (assert) { - assert.ok($().tree, 'tree method is defined'); - }); - - QUnit.test('should return element', function doesTreeReturnTree (assert) { - var $tree = $(html); - assert.ok($tree.tree() === $tree, 'tree should be initialized'); - }); - - // QUnit.test('should have correct defaults', require('./tree-tests/defaults')); - // QUnit.test('should call dataSource correctly', require('./tree-tests/calls-datasource')); - // QUnit.test('should be populated by items on initialization', require('./tree-tests/is-populated')); - // QUnit.test('folder should populate when opened', require('./tree-tests/does-folder-populate')); - // QUnit.test('getValue alias should function', require('./tree-tests/get-value-alias')); - // QUnit.test('single item/folder selection works as designed', require('./tree-tests/single-select')); - // QUnit.test('multiple item/folder selection works as designed', require('./tree-tests/multi-select')); - // QUnit.test('should not allow selecting items if disabled', require('./tree-tests/disable-select-items')); - // QUnit.test('should not allow selecting folders if disabled', require('./tree-tests/disable-select-folders')); - // QUnit.test('folders should open and close correctly', require('./tree-tests/folders-open-close')); - // QUnit.test('should disclose visible folders', require('./tree-tests/disclose-visible')); - // QUnit.test('should disclose all folders up to limit, and then close them, then open them all', require('./tree-tests/disclose-all')); - // QUnit.test('should refresh an already opened/cached folder with new nodes', require('./tree-tests/refresh')); - // QUnit.test('should accept TEXT as the NAME property in the datasource', require('./tree-tests/tree-accepts-name')); - // QUnit.test('should have proper tabindexes', require('./tree-tests/tab-indexes')); - QUnit.test('should respond to arrow keys', require('./tree-tests/responds-to-arrow-keys')); - - QUnit.test('should destroy control', function destroyWorks (assert) { - var $tree = $(html).find('#MyTree'); + beforeEach: require('./tree-tests/helpers').setup + }, function () { + QUnit.test('should be defined on jquery object', function isTreeDefined (assert) { + assert.ok($().tree, 'tree method is defined'); + }); - $tree.tree({ - dataSource: this.dataSource + QUnit.test('should return element', function doesTreeReturnTree (assert) { + assert.ok(this.$tree.tree() === this.$tree, 'tree should be initialized'); }); - assert.equal(typeof ($tree.tree('destroy')), 'string', 'returns string (markup)'); - assert.equal($tree.parent().length, false, 'control has been removed from DOM'); + QUnit.test('should have correct defaults', require('./tree-tests/defaults')); + QUnit.test('should call dataSource correctly', require('./tree-tests/calls-datasource')); + QUnit.test('should be populated by items on initialization', require('./tree-tests/is-populated')); + QUnit.test('folder should populate when opened', require('./tree-tests/does-folder-populate')); + QUnit.test('getValue alias should function', require('./tree-tests/get-value-alias')); + QUnit.test('single item/folder selection works as designed', require('./tree-tests/single-select')); + QUnit.test('multiple item/folder selection works as designed', require('./tree-tests/multi-select')); + QUnit.test('should not allow selecting items if disabled', require('./tree-tests/disable-select-items')); + QUnit.test('should not allow selecting folders if disabled', require('./tree-tests/disable-select-folders')); + QUnit.test('folders should open and close correctly', require('./tree-tests/folders-open-close')); + QUnit.test('should disclose visible folders', require('./tree-tests/disclose-visible')); + QUnit.test('should disclose all folders up to limit, and then close them, then open them all', require('./tree-tests/disclose-all')); + QUnit.test('should refresh an already opened/cached folder with new nodes', require('./tree-tests/refresh')); + QUnit.test('should accept TEXT as the NAME property in the datasource', require('./tree-tests/tree-accepts-name')); + // QUnit.test('should have proper tabindexes', require('./tree-tests/tab-indexes')); + QUnit.module( 'keyboard input', {}, require('./tree-tests/responds-to-keyboard-input')); + + QUnit.test('should destroy control', require('./tree-tests/is-destroyed')); }); }); diff --git a/test/tree-tests/calls-datasource.js b/test/tree-tests/calls-datasource.js index c04f2deba..c32827f72 100644 --- a/test/tree-tests/calls-datasource.js +++ b/test/tree-tests/calls-datasource.js @@ -1,10 +1,10 @@ define(function doesCallDataSourceModule (require) { var $ = require('jquery'); - var html = require('text!test/markup/tree-markup.html!strip'); return function doesCallDataSource (assert) { - var $tree = $(html); - $tree.tree({ + assert.expect( 3 ); + + this.$tree.tree({ dataSource: function dataSource (options, callback) { assert.ok(true, 'dataSource function called prior to rendering'); assert.equal(typeof options, 'object', 'dataSource provided options object'); @@ -14,5 +14,9 @@ define(function doesCallDataSourceModule (require) { }); } }); + + var $fixture = $( '#qunit-fixture' ); + + $fixture.append(this.$tree); }; }); diff --git a/test/tree-tests/defaults.js b/test/tree-tests/defaults.js index 90db20ffd..82480bb6a 100644 --- a/test/tree-tests/defaults.js +++ b/test/tree-tests/defaults.js @@ -1,11 +1,6 @@ -define(function correctDefaultsModule (require) { - var $ = require('jquery'); - var html = require('text!test/markup/tree-markup.html!strip'); - +define(function correctDefaultsModule () { return function correctDefaults (assert) { - var $tree = $(html); - - var defaults = $tree.tree.defaults; + var defaults = this.$tree.tree.defaults; assert.equal(defaults.multiSelect, false, 'multiSelect defaults to false'); assert.equal(defaults.cacheItems, true, 'cacheItems defaults to true'); diff --git a/test/tree-tests/disable-select-folders.js b/test/tree-tests/disable-select-folders.js index 63cc60123..61ee334ba 100644 --- a/test/tree-tests/disable-select-folders.js +++ b/test/tree-tests/disable-select-folders.js @@ -1,16 +1,11 @@ -define(function disableSelectFoldersModule (require) { - var $ = require('jquery'); - var html = require('text!test/markup/tree-markup.html!strip'); - +define(function disableSelectFoldersModule () { return function disableSelectFoldersWorks (assert) { - var $tree = $(html).find('#MyTree'); - - $tree.tree({ + this.$tree.tree({ dataSource: this.dataSource, folderSelect: false }); - $tree.tree('selectFolder', $tree.find('.tree-branch-name:eq(1)')); - assert.equal($tree.tree('selectedItems').length, 0, 'Return no value'); + this.$tree.tree('selectFolder', this.$tree.find('.tree-branch-name:eq(1)')); + assert.equal(this.$tree.tree('selectedItems').length, 0, 'Return no value'); }; }); diff --git a/test/tree-tests/disable-select-items.js b/test/tree-tests/disable-select-items.js index 84adee3aa..fd471fcfc 100644 --- a/test/tree-tests/disable-select-items.js +++ b/test/tree-tests/disable-select-items.js @@ -1,16 +1,11 @@ -define(function disableSelectItemsModule (require) { - var $ = require('jquery'); - var html = require('text!test/markup/tree-markup.html!strip'); - +define(function disableSelectItemsModule () { return function disableSelectItemsWorks (assert) { - var $tree = $(html).find('#MyTree'); - - $tree.tree({ + this.$tree.tree({ dataSource: this.dataSource, itemSelect: false }); - $tree.tree('selectItem', $tree.find('.tree-item:eq(1)')); - assert.equal($tree.tree('selectedItems').length, 0, 'Return no value'); + this.$tree.tree('selectItem', this.$tree.find('.tree-item:eq(1)')); + assert.equal(this.$tree.tree('selectedItems').length, 0, 'Return no value'); }; }); diff --git a/test/tree-tests/disclose-all.js b/test/tree-tests/disclose-all.js index 2551bdbf8..43b389fbf 100644 --- a/test/tree-tests/disclose-all.js +++ b/test/tree-tests/disclose-all.js @@ -1,9 +1,7 @@ -define(function discloseAllWorksModule (require) { - var $ = require('jquery'); - +define(function discloseAllWorksModule () { return function discloseAllWorks (assert) { var ready = assert.async(); - var $tree = $('body').find('#MyTree2'); + var $tree = this.$tree2; $tree.tree({ dataSource: this.dataSource, diff --git a/test/tree-tests/disclose-visible.js b/test/tree-tests/disclose-visible.js index 91788dd2d..789f51e69 100644 --- a/test/tree-tests/disclose-visible.js +++ b/test/tree-tests/disclose-visible.js @@ -1,10 +1,7 @@ -define(function discloseVisibleWorksModule (require) { - var $ = require('jquery'); - +define(function discloseVisibleWorksModule () { return function discloseVisibleWorks (assert) { var ready = assert.async(); - var $tree = $('body').find('#MyTree'); - + var $tree = this.$tree; $tree.tree({ dataSource: this.dataSource }); @@ -12,6 +9,7 @@ define(function discloseVisibleWorksModule (require) { var toBeOpened = $tree.find('.tree-branch:not(".tree-open, .hidden")').length; assert.equal($tree.find('.tree-branch.tree-open:not(".hidden")').length, 0, '0 folders open'); + $tree.one('disclosedVisible.fu.tree', function testDiscloseVisible () { assert.equal($tree.find('.tree-branch.tree-open:not(".hidden")').length, toBeOpened, toBeOpened + ' folders open'); ready(); diff --git a/test/tree-tests/does-folder-populate.js b/test/tree-tests/does-folder-populate.js index 3e756897d..a54fa93a9 100644 --- a/test/tree-tests/does-folder-populate.js +++ b/test/tree-tests/does-folder-populate.js @@ -1,29 +1,25 @@ define(function doesFolderPopulateModule (require) { - var $ = require('jquery'); - var html = require('text!test/markup/tree-markup.html!strip'); var NUM_CHILDREN = require('./helpers').constants.NUM_CHILDREN; return function doesFolderPopulate (assert) { - var $tree = $(html).find('#MyTree'); var $selNode; - $tree.tree({ + this.$tree.tree({ dataSource: this.dataSource }); - $selNode = $tree.find('.tree-branch:eq(1)'); - $tree.tree('discloseFolder', $selNode.find('.tree-branch-name')); + $selNode = this.$tree.find('.tree-branch:eq(1)'); + this.$tree.tree('discloseFolder', $selNode.find('.tree-branch-name')); assert.equal($selNode.find('.tree-branch-children > li').length, NUM_CHILDREN, 'Folder has been populated with items/sub-folders'); - $tree = $(html).find('#MyTreeSelectableFolder'); - $tree.tree({ + this.$selectableFolderTree.tree({ dataSource: this.dataSource, folderSelect: true }); - $selNode = $tree.find('.tree-branch:eq(1)'); - $tree.tree('discloseFolder', $selNode.find('.tree-branch-header')); + $selNode = this.$selectableFolderTree.find('.tree-branch:eq(1)'); + this.$selectableFolderTree.tree('discloseFolder', $selNode.find('.tree-branch-header')); assert.equal($selNode.find('.tree-branch-children > li').length, NUM_CHILDREN, 'Folder has been populated with sub-folders and items'); }; }); diff --git a/test/tree-tests/folders-open-close.js b/test/tree-tests/folders-open-close.js index 75d26bdf5..97e6b614a 100644 --- a/test/tree-tests/folders-open-close.js +++ b/test/tree-tests/folders-open-close.js @@ -1,28 +1,25 @@ define(function foldersOpenCloseModule (require) { var $ = require('jquery'); - var html = require('text!test/markup/tree-markup.html!strip'); return function foldersOpenClose (assert) { - var $tree = $(html).find('#MyTree'); - - $tree.tree({ + this.$tree.tree({ dataSource: this.dataSource }); - var $targetBranch = $($tree.find('.tree-branch')[ 0 ]); + var $targetBranch = $(this.$tree.find('.tree-branch')[ 0 ]); assert.equal($targetBranch.hasClass('tree-open'), false, 'Branch starts closed'); - $tree.tree('discloseFolder', $targetBranch); + this.$tree.tree('discloseFolder', $targetBranch); assert.equal($targetBranch.hasClass('tree-open'), true, 'discloseFolder opens folder'); - $tree.tree('discloseFolder', $targetBranch); + this.$tree.tree('discloseFolder', $targetBranch); assert.equal($targetBranch.hasClass('tree-open'), true, 'redundant discloseFolder calls leaves folder open'); - $tree.tree('closeFolder', $targetBranch); + this.$tree.tree('closeFolder', $targetBranch); assert.equal($targetBranch.hasClass('tree-open'), false, 'closeFolder closes folder'); - $tree.tree('closeFolder', $targetBranch); + this.$tree.tree('closeFolder', $targetBranch); assert.equal($targetBranch.hasClass('tree-open'), false, 'redundant closeFolder calls leaves folder closed'); - $tree.tree('toggleFolder', $targetBranch); + this.$tree.tree('toggleFolder', $targetBranch); assert.equal($targetBranch.hasClass('tree-open'), true, 'toggleFolder on closed folder opens folder'); - $tree.tree('toggleFolder', $targetBranch); + this.$tree.tree('toggleFolder', $targetBranch); assert.equal($targetBranch.hasClass('tree-open'), false, 'toggleFolder on open folder closes folder'); }; }); diff --git a/test/tree-tests/get-value-alias.js b/test/tree-tests/get-value-alias.js index a16cbcd09..424374654 100644 --- a/test/tree-tests/get-value-alias.js +++ b/test/tree-tests/get-value-alias.js @@ -1,16 +1,11 @@ -define(function getValueAliasModule (require) { - var $ = require('jquery'); - var html = require('text!test/markup/tree-markup.html!strip'); - +define(function getValueAliasModule () { return function getValueAliasWorks (assert) { - var $tree = $(html).find('#MyTree'); - // MultiSelect: false is the default - $tree.tree({ + this.$tree.tree({ dataSource: this.dataSource }); - $tree.tree('selectItem', $tree.find('.tree-item:eq(1)')); - assert.deepEqual($tree.tree('selectedItems'), $tree.tree('getValue'), 'getValue aliases selectedItems'); + this.$tree.tree('selectItem', this.$tree.find('.tree-item:eq(1)')); + assert.deepEqual(this.$tree.tree('selectedItems'), this.$tree.tree('getValue'), 'getValue aliases selectedItems'); }; }); diff --git a/test/tree-tests/helpers.js b/test/tree-tests/helpers.js index 462340f48..f6beab4e5 100644 --- a/test/tree-tests/helpers.js +++ b/test/tree-tests/helpers.js @@ -1,7 +1,9 @@ /* global QUnit:false, module:false, test:false, asyncTest:false, expect:false */ /* global start:false, stop:false ok:false, equal:false, notEqual:false, deepEqual:false */ /* global notDeepEqual:false, strictEqual:false, notStrictEqual:false, raises:false */ -define(function treeDataFactory () { +define(function treeDataFactory (require) { + var $ = require('jquery'); + var constants = { NUM_CHILDREN: 9, NUM_FOLDERS: 4, @@ -116,7 +118,7 @@ define(function treeDataFactory () { }; }; - var generateGUIDandDataSource = function generateGUIDandDataSource () { + var setup = function setup () { var callLimit = 50; var callCount = 0; @@ -134,14 +136,29 @@ define(function treeDataFactory () { this.textDataSource = function textDataSource (options, callback) { callback(textData); }; - }; + this.html = require('text!test/markup/tree-markup.html!strip'); + this.$html = $(this.html); + this.$tree = this.$html.find('#MyTree'); + this.$tree2 = this.$html.find('#MyTree2'); + this.$selectableFolderTree = $(this.html).find('#MyTreeSelectableFolder'); + + this.defaultEventObject = { + originalEvent: { + target: this.$tree.find('li:not(".hidden"):first') + }, + which: 37, + preventDefault: function preventDefault () { + console.log('default prevented'); + } + }; + }; return { treeData: treeData, callCountData: callCountData, textData: textData, constants: constants, - generateGUIDandDataSource: generateGUIDandDataSource + setup: setup }; }); diff --git a/test/tree-tests/is-populated.js b/test/tree-tests/is-populated.js index b087a1b39..9d8f857bd 100644 --- a/test/tree-tests/is-populated.js +++ b/test/tree-tests/is-populated.js @@ -1,17 +1,13 @@ define(function isTreePopulatedModule (require) { - var $ = require('jquery'); - var html = require('text!test/markup/tree-markup.html!strip'); var constants = require('./helpers').constants; return function isTreePopulated (assert) { - var $tree = $(html).find('#MyTree'); - - $tree.tree({ + this.$tree.tree({ dataSource: this.dataSource }); - assert.equal($tree.find('.tree-branch:not([data-template])').length, constants.NUM_FOLDERS, 'Initial set of folders have been added'); - assert.equal($tree.find('.tree-item:not([data-template])').length, constants.NUM_ITEMS, 'Initial set of items have been added'); - assert.equal($tree.find('.tree-overflow:not([data-template])').length, constants.NUM_OVERFLOWS, 'Initial overflow has been added'); + assert.equal(this.$tree.find('.tree-branch:not([data-template])').length, constants.NUM_FOLDERS, 'Initial set of folders have been added'); + assert.equal(this.$tree.find('.tree-item:not([data-template])').length, constants.NUM_ITEMS, 'Initial set of items have been added'); + assert.equal(this.$tree.find('.tree-overflow:not([data-template])').length, constants.NUM_OVERFLOWS, 'Initial overflow has been added'); }; }); diff --git a/test/tree-tests/multi-select.js b/test/tree-tests/multi-select.js index 5991dc325..6fa016290 100644 --- a/test/tree-tests/multi-select.js +++ b/test/tree-tests/multi-select.js @@ -1,35 +1,29 @@ -define(function multiSelectWorksModule (require) { - var $ = require('jquery'); - var html = require('text!test/markup/tree-markup.html!strip'); - +define(function multiSelectWorksModule () { return function multiSelectWorks (assert) { - var $tree = $(html).find('#MyTree'); - - $tree.tree({ + this.$tree.tree({ dataSource: this.dataSource, multiSelect: true }); - $tree.tree('selectItem', $tree.find('.tree-item:eq(1)')); - assert.equal($tree.tree('selectedItems').length, 1, 'Return single selected value'); - $tree.tree('selectItem', $tree.find('.tree-item:eq(2)')); - assert.equal($tree.tree('selectedItems').length, 2, 'Return multiple selected values'); - $tree.tree('selectItem', $tree.find('.tree-item:eq(1)')); - assert.equal($tree.tree('selectedItems').length, 1, 'Return single selected value'); + this.$tree.tree('selectItem', this.$tree.find('.tree-item:eq(1)')); + assert.equal(this.$tree.tree('selectedItems').length, 1, 'Return single selected value'); + this.$tree.tree('selectItem', this.$tree.find('.tree-item:eq(2)')); + assert.equal(this.$tree.tree('selectedItems').length, 2, 'Return multiple selected values'); + this.$tree.tree('selectItem', this.$tree.find('.tree-item:eq(1)')); + assert.equal(this.$tree.tree('selectedItems').length, 1, 'Return single selected value'); - $tree = $(html).find('#MyTreeSelectableFolder'); - $tree.tree({ + this.$selectableFolderTree.tree({ dataSource: this.dataSource, multiSelect: true, folderSelect: true }); - $tree.tree('selectFolder', $tree.find('.tree-branch-name:eq(1)')); - assert.equal($tree.tree('selectedItems').length, 1, 'Return single selected value'); - $tree.tree('selectFolder', $tree.find('.tree-branch-name:eq(2)')); - assert.equal($tree.tree('selectedItems').length, 2, 'Return multiple selected values'); - $tree.tree('selectFolder', $tree.find('.tree-branch-name:eq(1)')); - assert.equal($tree.tree('selectedItems').length, 1, 'Return single selected value'); + this.$selectableFolderTree.tree('selectFolder', this.$selectableFolderTree.find('.tree-branch-name:eq(1)')); + assert.equal(this.$selectableFolderTree.tree('selectedItems').length, 1, 'Return single selected value'); + this.$selectableFolderTree.tree('selectFolder', this.$selectableFolderTree.find('.tree-branch-name:eq(2)')); + assert.equal(this.$selectableFolderTree.tree('selectedItems').length, 2, 'Return multiple selected values'); + this.$selectableFolderTree.tree('selectFolder', this.$selectableFolderTree.find('.tree-branch-name:eq(1)')); + assert.equal(this.$selectableFolderTree.tree('selectedItems').length, 1, 'Return single selected value'); }; }); diff --git a/test/tree-tests/refresh.js b/test/tree-tests/refresh.js index 6786a6dda..5c13908a5 100644 --- a/test/tree-tests/refresh.js +++ b/test/tree-tests/refresh.js @@ -1,27 +1,24 @@ define(function refreshWorksModule (require) { - var $ = require('jquery'); - var html = require('text!test/markup/tree-markup.html!strip'); var NUM_CHILDREN = require('./helpers').constants.NUM_CHILDREN; return function refreshWorks (assert) { - var $tree = $(html).find('#MyTree'); var $folderToRefresh; var initialLoadedFolderId; var refreshedLoadedFolderId; var selector = '.tree-branch-children > li:eq(0)'; - $tree.tree({ + this.$tree.tree({ dataSource: this.dataSource }); - $folderToRefresh = $tree.find('.tree-branch:eq(1)'); + $folderToRefresh = this.$tree.find('.tree-branch:eq(1)'); // Open folder - $tree.tree('discloseFolder', $folderToRefresh.find('.tree-branch-name')); + this.$tree.tree('discloseFolder', $folderToRefresh.find('.tree-branch-name')); assert.equal($folderToRefresh.find('.tree-branch-children > li').length, NUM_CHILDREN, 'Folder has been populated with items/sub-folders'); initialLoadedFolderId = $folderToRefresh.find(selector).attr('id'); // Refresh and see if it's the same ID - $tree.tree('refreshFolder', $folderToRefresh); + this.$tree.tree('refreshFolder', $folderToRefresh); refreshedLoadedFolderId = $folderToRefresh.find('.tree-branch-children > li:eq(0)').attr('id'); assert.notEqual(refreshedLoadedFolderId, initialLoadedFolderId, 'Folder has been refreshed and populated with different items/sub-folders'); }; diff --git a/test/tree-tests/single-select.js b/test/tree-tests/single-select.js index 5909d4e19..46276aae9 100644 --- a/test/tree-tests/single-select.js +++ b/test/tree-tests/single-select.js @@ -1,43 +1,37 @@ -define(function singleSelectWorksModule (require) { - var $ = require('jquery'); - var html = require('text!test/markup/tree-markup.html!strip'); - +define(function singleSelectWorksModule () { return function singleSelectWorks (assert) { - var $tree = $(html).find('#MyTree'); - // MultiSelect: false is the default - $tree.tree({ + this.$tree.tree({ dataSource: this.dataSource }); - $tree.tree('selectItem', $tree.find('.tree-item:eq(1)')); - assert.equal($tree.tree('selectedItems').length, 1, 'Return single selected value'); - $tree.tree('selectItem', $tree.find('.tree-item:eq(2)')); - assert.equal($tree.tree('selectedItems').length, 1, 'Return new single selected value'); + this.$tree.tree('selectItem', this.$tree.find('.tree-item:eq(1)')); + assert.equal(this.$tree.tree('selectedItems').length, 1, 'Return single selected value'); + this.$tree.tree('selectItem', this.$tree.find('.tree-item:eq(2)')); + assert.equal(this.$tree.tree('selectedItems').length, 1, 'Return new single selected value'); - $tree = $(html).find('#MyTreeSelectableFolder'); - $tree.tree({ + this.$selectableFolderTree.tree({ dataSource: this.dataSource, folderSelect: true }); - $tree.tree('selectItem', $tree.find('.tree-item:eq(1)')); - assert.equal($tree.tree('selectedItems').length, 1, 'Return single selected item (none previously selected, 1st programatic selection)'); + this.$selectableFolderTree.tree('selectItem', this.$selectableFolderTree.find('.tree-item:eq(1)')); + assert.equal(this.$selectableFolderTree.tree('selectedItems').length, 1, 'Return single selected item (none previously selected, 1st programatic selection)'); - $tree.tree('selectFolder', $tree.find('.tree-branch-name:eq(1)')); - assert.equal($tree.tree('selectedItems').length, 1, 'Return single selected folder (item previously selected, 2nd programatic selection)'); + this.$selectableFolderTree.tree('selectFolder', this.$selectableFolderTree.find('.tree-branch-name:eq(1)')); + assert.equal(this.$selectableFolderTree.tree('selectedItems').length, 1, 'Return single selected folder (item previously selected, 2nd programatic selection)'); - $tree.tree('selectItem', $tree.find('.tree-item:eq(2)')); - assert.equal($tree.tree('selectedItems').length, 1, 'Return single selected item (folder previously selected, 3rd programatic selection)'); + this.$selectableFolderTree.tree('selectItem', this.$selectableFolderTree.find('.tree-item:eq(2)')); + assert.equal(this.$selectableFolderTree.tree('selectedItems').length, 1, 'Return single selected item (folder previously selected, 3rd programatic selection)'); - $tree.find('.tree-item:eq(1)').click(); - assert.equal($tree.tree('selectedItems').length, 1, 'Return single selected item (item previously selected, 1st click selection)'); + this.$selectableFolderTree.find('.tree-item:eq(1)').click(); + assert.equal(this.$selectableFolderTree.tree('selectedItems').length, 1, 'Return single selected item (item previously selected, 1st click selection)'); - $tree.find('.tree-branch-name:eq(1)').click(); - assert.equal($tree.tree('selectedItems').length, 1, 'Return single selected folder (item previously selected, 2nd click selection)'); + this.$selectableFolderTree.find('.tree-branch-name:eq(1)').click(); + assert.equal(this.$selectableFolderTree.tree('selectedItems').length, 1, 'Return single selected folder (item previously selected, 2nd click selection)'); - $tree.find('.tree-item:eq(2)').click(); - assert.equal($tree.tree('selectedItems').length, 1, 'Return single selected item (folder previously selected, 3rd click selection)'); + this.$selectableFolderTree.find('.tree-item:eq(2)').click(); + assert.equal(this.$selectableFolderTree.tree('selectedItems').length, 1, 'Return single selected item (folder previously selected, 3rd click selection)'); }; }); diff --git a/test/tree-tests/tree-accepts-name.js b/test/tree-tests/tree-accepts-name.js index 1a85dde0d..3e52f1176 100644 --- a/test/tree-tests/tree-accepts-name.js +++ b/test/tree-tests/tree-accepts-name.js @@ -1,15 +1,10 @@ -define(function treeAcceptsNameModule (require) { - var $ = require('jquery'); - var html = require('text!test/markup/tree-markup.html!strip'); - +define(function treeAcceptsNameModule () { return function treeAcceptsName (assert) { - var $tree = $(html).find('#MyTree'); - - $tree.tree({ + this.$tree.tree({ dataSource: this.textDataSource }); - $tree.tree('selectFolder', $tree.find('.tree-branch-name:eq(1)')); - assert.equal($tree.tree('selectedItems')[ 0 ].text, 'node text', 'Param TEXT used in the datasource'); + this.$tree.tree('selectFolder', this.$tree.find('.tree-branch-name:eq(1)')); + assert.equal(this.$tree.tree('selectedItems')[ 0 ].text, 'node text', 'Param TEXT used in the datasource'); }; }); From 06df5bbad394f2d295c16f4eeaa68a2f201f2b13 Mon Sep 17 00:00:00 2001 From: Christopher McCulloh Date: Tue, 23 May 2017 23:06:30 -0400 Subject: [PATCH 07/57] adds file for is-destroyed test --- test/tree-tests/is-destroyed.js | 6 ++++++ 1 file changed, 6 insertions(+) create mode 100644 test/tree-tests/is-destroyed.js diff --git a/test/tree-tests/is-destroyed.js b/test/tree-tests/is-destroyed.js new file mode 100644 index 000000000..df283c046 --- /dev/null +++ b/test/tree-tests/is-destroyed.js @@ -0,0 +1,6 @@ +define(function Module () { + return function destroyWorks (assert) { + assert.equal(typeof (this.$tree.tree('destroy')), 'string', 'returns string (markup)'); + assert.equal(this.$tree.parent().length, false, 'control has been removed from DOM'); + }; +}); From d5f84fd8a625bfe58aaedb096bdf281a88669c41 Mon Sep 17 00:00:00 2001 From: Christopher McCulloh Date: Tue, 23 May 2017 23:06:59 -0400 Subject: [PATCH 08/57] wip on accessibility testing --- test/tree-tests/responds-to-keyboard-input.js | 17 +++++++++++++++++ test/tree-tests/tab-indexes.js | 8 ++++++++ 2 files changed, 25 insertions(+) create mode 100644 test/tree-tests/responds-to-keyboard-input.js create mode 100644 test/tree-tests/tab-indexes.js diff --git a/test/tree-tests/responds-to-keyboard-input.js b/test/tree-tests/responds-to-keyboard-input.js new file mode 100644 index 000000000..8ba3c532c --- /dev/null +++ b/test/tree-tests/responds-to-keyboard-input.js @@ -0,0 +1,17 @@ +define(function respondsToKeyboardInputModule (require) { + var $ = require('jquery'); + var QUnit = require('qunit'); + + return function () { + QUnit.test('should respond to arrow keys', function respondsToKeyboardInput (assert) { + var eventObject = this.defaultEventObject; + eventObject.which = 37; + + var e = $.Event( 'keydown', eventObject); // eslint-disable-line new-cap + + this.$tree.trigger(e); + + assert.ok(true, 'test'); + }); + }; +}); diff --git a/test/tree-tests/tab-indexes.js b/test/tree-tests/tab-indexes.js new file mode 100644 index 000000000..80d650c6d --- /dev/null +++ b/test/tree-tests/tab-indexes.js @@ -0,0 +1,8 @@ +define(function Module (require) { + var $ = require('jquery'); + var html = require('text!test/markup/tree-markup.html!strip'); + + return function (assert) { + + }; +}); From 74768c5332d9f433e0d061ec44d9c337573e3ea9 Mon Sep 17 00:00:00 2001 From: Christopher McCulloh Date: Wed, 24 May 2017 13:39:58 -0400 Subject: [PATCH 09/57] separates accessibility testing out into its own module --- test/tree-test.js | 6 ++++-- test/tree-tests/accessibility-module.js | 14 ++++++++++++++ test/tree-tests/helpers.js | 13 +++++++++++++ test/tree-tests/responds-to-keyboard-input.js | 17 ----------------- 4 files changed, 31 insertions(+), 19 deletions(-) create mode 100644 test/tree-tests/accessibility-module.js delete mode 100644 test/tree-tests/responds-to-keyboard-input.js diff --git a/test/tree-test.js b/test/tree-test.js index 0bc24828f..ee5a520fd 100644 --- a/test/tree-test.js +++ b/test/tree-test.js @@ -10,7 +10,7 @@ define(function treeTest (require) { QUnit.module('Fuel UX Tree', { beforeEach: require('./tree-tests/helpers').setup - }, function () { + }, function runTreeTests () { QUnit.test('should be defined on jquery object', function isTreeDefined (assert) { assert.ok($().tree, 'tree method is defined'); }); @@ -34,7 +34,9 @@ define(function treeTest (require) { QUnit.test('should refresh an already opened/cached folder with new nodes', require('./tree-tests/refresh')); QUnit.test('should accept TEXT as the NAME property in the datasource', require('./tree-tests/tree-accepts-name')); // QUnit.test('should have proper tabindexes', require('./tree-tests/tab-indexes')); - QUnit.module( 'keyboard input', {}, require('./tree-tests/responds-to-keyboard-input')); + + + require('./tree-tests/accessibility-module')(QUnit); QUnit.test('should destroy control', require('./tree-tests/is-destroyed')); }); diff --git a/test/tree-tests/accessibility-module.js b/test/tree-tests/accessibility-module.js new file mode 100644 index 000000000..193d7e376 --- /dev/null +++ b/test/tree-tests/accessibility-module.js @@ -0,0 +1,14 @@ +define(function respondsToKeyboardInputModule (require) { + var $ = require('jquery'); + + return function (QUnit) { + QUnit.module( 'accessibility', {}, function () { + QUnit.test('should respond to left key', function respondsToKeyboardInput (assert) { + var e = this.getKeyDown('left'); + this.$tree.trigger(e); + + assert.ok(true, 'test'); + }); + }); + }; +}); diff --git a/test/tree-tests/helpers.js b/test/tree-tests/helpers.js index f6beab4e5..a33ea056d 100644 --- a/test/tree-tests/helpers.js +++ b/test/tree-tests/helpers.js @@ -118,6 +118,17 @@ define(function treeDataFactory (require) { }; }; + var KEYMAP = { + left: 37 + }; + + var getKeyDown = function getKeyDown (which) { + var eventObject = this.defaultEventObject; + eventObject.which = KEYMAP[which]; + + return $.Event( 'keydown', eventObject); // eslint-disable-line new-cap + }; + var setup = function setup () { var callLimit = 50; var callCount = 0; @@ -152,6 +163,8 @@ define(function treeDataFactory (require) { console.log('default prevented'); } }; + + this.getKeyDown = getKeyDown; }; return { diff --git a/test/tree-tests/responds-to-keyboard-input.js b/test/tree-tests/responds-to-keyboard-input.js deleted file mode 100644 index 8ba3c532c..000000000 --- a/test/tree-tests/responds-to-keyboard-input.js +++ /dev/null @@ -1,17 +0,0 @@ -define(function respondsToKeyboardInputModule (require) { - var $ = require('jquery'); - var QUnit = require('qunit'); - - return function () { - QUnit.test('should respond to arrow keys', function respondsToKeyboardInput (assert) { - var eventObject = this.defaultEventObject; - eventObject.which = 37; - - var e = $.Event( 'keydown', eventObject); // eslint-disable-line new-cap - - this.$tree.trigger(e); - - assert.ok(true, 'test'); - }); - }; -}); From 33c03d4fa3a29e4d15a4fc3495d8d1bbecde287d Mon Sep 17 00:00:00 2001 From: Christopher McCulloh Date: Thu, 25 May 2017 11:20:43 -0400 Subject: [PATCH 10/57] WIP trying to test focusIn --- test/tree-test.js | 45 +++++++++++++------------ test/tree-tests/accessibility-module.js | 15 ++++++--- test/tree-tests/focus-module.js | 30 +++++++++++++++++ test/tree-tests/helpers.js | 9 ++++- 4 files changed, 72 insertions(+), 27 deletions(-) create mode 100644 test/tree-tests/focus-module.js diff --git a/test/tree-test.js b/test/tree-test.js index ee5a520fd..d3d6c06b4 100644 --- a/test/tree-test.js +++ b/test/tree-test.js @@ -11,33 +11,34 @@ define(function treeTest (require) { QUnit.module('Fuel UX Tree', { beforeEach: require('./tree-tests/helpers').setup }, function runTreeTests () { - QUnit.test('should be defined on jquery object', function isTreeDefined (assert) { - assert.ok($().tree, 'tree method is defined'); - }); + // QUnit.test('should be defined on jquery object', function isTreeDefined (assert) { + // assert.ok($().tree, 'tree method is defined'); + // }); - QUnit.test('should return element', function doesTreeReturnTree (assert) { - assert.ok(this.$tree.tree() === this.$tree, 'tree should be initialized'); - }); + // QUnit.test('should return element', function doesTreeReturnTree (assert) { + // assert.ok(this.$tree.tree() === this.$tree, 'tree should be initialized'); + // }); - QUnit.test('should have correct defaults', require('./tree-tests/defaults')); - QUnit.test('should call dataSource correctly', require('./tree-tests/calls-datasource')); - QUnit.test('should be populated by items on initialization', require('./tree-tests/is-populated')); - QUnit.test('folder should populate when opened', require('./tree-tests/does-folder-populate')); - QUnit.test('getValue alias should function', require('./tree-tests/get-value-alias')); - QUnit.test('single item/folder selection works as designed', require('./tree-tests/single-select')); - QUnit.test('multiple item/folder selection works as designed', require('./tree-tests/multi-select')); - QUnit.test('should not allow selecting items if disabled', require('./tree-tests/disable-select-items')); - QUnit.test('should not allow selecting folders if disabled', require('./tree-tests/disable-select-folders')); - QUnit.test('folders should open and close correctly', require('./tree-tests/folders-open-close')); - QUnit.test('should disclose visible folders', require('./tree-tests/disclose-visible')); - QUnit.test('should disclose all folders up to limit, and then close them, then open them all', require('./tree-tests/disclose-all')); - QUnit.test('should refresh an already opened/cached folder with new nodes', require('./tree-tests/refresh')); - QUnit.test('should accept TEXT as the NAME property in the datasource', require('./tree-tests/tree-accepts-name')); + // QUnit.test('should have correct defaults', require('./tree-tests/defaults')); + // QUnit.test('should call dataSource correctly', require('./tree-tests/calls-datasource')); + // QUnit.test('should be populated by items on initialization', require('./tree-tests/is-populated')); + // QUnit.test('folder should populate when opened', require('./tree-tests/does-folder-populate')); + // QUnit.test('getValue alias should function', require('./tree-tests/get-value-alias')); + // QUnit.test('single item/folder selection works as designed', require('./tree-tests/single-select')); + // QUnit.test('multiple item/folder selection works as designed', require('./tree-tests/multi-select')); + // QUnit.test('should not allow selecting items if disabled', require('./tree-tests/disable-select-items')); + // QUnit.test('should not allow selecting folders if disabled', require('./tree-tests/disable-select-folders')); + // QUnit.test('folders should open and close correctly', require('./tree-tests/folders-open-close')); + // QUnit.test('should disclose visible folders', require('./tree-tests/disclose-visible')); + // QUnit.test('should disclose all folders up to limit, and then close them, then open them all', require('./tree-tests/disclose-all')); + // QUnit.test('should refresh an already opened/cached folder with new nodes', require('./tree-tests/refresh')); + // QUnit.test('should accept TEXT as the NAME property in the datasource', require('./tree-tests/tree-accepts-name')); // QUnit.test('should have proper tabindexes', require('./tree-tests/tab-indexes')); + require('./tree-tests/focus-module')(QUnit); - require('./tree-tests/accessibility-module')(QUnit); + // require('./tree-tests/accessibility-module')(QUnit); - QUnit.test('should destroy control', require('./tree-tests/is-destroyed')); + // QUnit.test('should destroy control', require('./tree-tests/is-destroyed')); }); }); diff --git a/test/tree-tests/accessibility-module.js b/test/tree-tests/accessibility-module.js index 193d7e376..514abc606 100644 --- a/test/tree-tests/accessibility-module.js +++ b/test/tree-tests/accessibility-module.js @@ -3,11 +3,18 @@ define(function respondsToKeyboardInputModule (require) { return function (QUnit) { QUnit.module( 'accessibility', {}, function () { - QUnit.test('should respond to left key', function respondsToKeyboardInput (assert) { - var e = this.getKeyDown('left'); - this.$tree.trigger(e); + QUnit.module( 'should respond to left key', {}, function() { + QUnit.test('when branch is closed', function respondsToKeyboardInput (assert) { + this.$tree.trigger(this.getKeyDown('left')); - assert.ok(true, 'test'); + assert.ok(true, 'test'); + }); + + QUnit.test('when branch is open', function respondsToKeyboardInput (assert) { + this.$tree.trigger(this.getKeyDown('left')); + + assert.ok(true, 'test'); + }); }); }); }; diff --git a/test/tree-tests/focus-module.js b/test/tree-tests/focus-module.js new file mode 100644 index 000000000..319af486e --- /dev/null +++ b/test/tree-tests/focus-module.js @@ -0,0 +1,30 @@ +define(function respondsToKeyboardInputModule (require) { + var $ = require('jquery'); + + return function (QUnit) { + QUnit.module( 'focusIn', {}, function () { + QUnit.test('should focus on first focusable branch when nothing is selected', function respondsToKeyboardInput (assert) { + var $tree = this.$tree; + + // this.$tree.tree('discloseVisible'); + $tree.tree({ + dataSource: this.dataSource + }); + + setTimeout(function() { + $tree.focus(); + }, 1000); + + // console.log('this.$tree', this.$tree.parent().html()) + + assert.ok(false, 'test'); + }); + + QUnit.test('should focus on first selected item when there is a selection', function respondsToKeyboardInput (assert) { + this.$tree.trigger(this.getKeyDown('left')); + + assert.ok(true, 'test'); + }); + }); + }; +}); diff --git a/test/tree-tests/helpers.js b/test/tree-tests/helpers.js index a33ea056d..b71c76ea5 100644 --- a/test/tree-tests/helpers.js +++ b/test/tree-tests/helpers.js @@ -119,7 +119,14 @@ define(function treeDataFactory (require) { }; var KEYMAP = { - left: 37 + enter: 13, + space: 32, + end: 35, + home: 36, + left: 37, + up: 38, + right: 39, + down: 40 }; var getKeyDown = function getKeyDown (which) { From 4b6ffaca178c86026d6d3d75d8b2ebf3ad92ef51 Mon Sep 17 00:00:00 2001 From: Christopher McCulloh Date: Fri, 26 May 2017 09:02:43 -0400 Subject: [PATCH 11/57] adds more shortcuts to helpers --- test/tree-tests/helpers.js | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/test/tree-tests/helpers.js b/test/tree-tests/helpers.js index b71c76ea5..8c89f2517 100644 --- a/test/tree-tests/helpers.js +++ b/test/tree-tests/helpers.js @@ -155,11 +155,13 @@ define(function treeDataFactory (require) { callback(textData); }; + var $fixture = $( '#qunit-fixture' ); this.html = require('text!test/markup/tree-markup.html!strip'); this.$html = $(this.html); - this.$tree = this.$html.find('#MyTree'); - this.$tree2 = this.$html.find('#MyTree2'); - this.$selectableFolderTree = $(this.html).find('#MyTreeSelectableFolder'); + $fixture.append(this.$html); + this.$tree = $fixture.find('#MyTree'); + this.$tree2 = $fixture.find('#MyTree2'); + this.$selectableFolderTree = $fixture.find('#MyTreeSelectableFolder'); this.defaultEventObject = { originalEvent: { From 378b08e7a2d22712d0c25bd3f316023e89a7d38b Mon Sep 17 00:00:00 2001 From: Christopher McCulloh Date: Fri, 26 May 2017 09:03:23 -0400 Subject: [PATCH 12/57] test focus on tree with no selected element. Tests tab index for focused element on focusIn --- test/tree-tests/focus-module.js | 54 +++++++++++++++++++++++++-------- 1 file changed, 42 insertions(+), 12 deletions(-) diff --git a/test/tree-tests/focus-module.js b/test/tree-tests/focus-module.js index 319af486e..7e4b9a884 100644 --- a/test/tree-tests/focus-module.js +++ b/test/tree-tests/focus-module.js @@ -1,30 +1,60 @@ -define(function respondsToKeyboardInputModule (require) { +define(function focusModule (require) { var $ = require('jquery'); return function (QUnit) { QUnit.module( 'focusIn', {}, function () { - QUnit.test('should focus on first focusable branch when nothing is selected', function respondsToKeyboardInput (assert) { + QUnit.test('should focus on first focusable branch when nothing is selected', function checkFocusOnNonSelect (assert) { + assert.expect( 1 ); var $tree = this.$tree; - // this.$tree.tree('discloseVisible'); + $tree.on('loaded.fu.tree', function () { + $tree.on('focus', function () { + var $focused = $(document.activeElement); + var $firstFocusableChild = $(document.activeElement); + assert.equal($focused.attr('id'), $firstFocusableChild.attr('id'), 'first focusable branch is focused on'); + }); + + var tree = document.getElementById('MyTree'); + + var event = new Event('focus'); + + tree.dispatchEvent(event); + }); + $tree.tree({ dataSource: this.dataSource }); + }); - setTimeout(function() { - $tree.focus(); - }, 1000); + QUnit.test('should correctly set tabindex', function testTabIndex (assert) { + assert.expect( 2 ); + var $tree = this.$tree; - // console.log('this.$tree', this.$tree.parent().html()) + $tree.on('loaded.fu.tree', function () { + var $focused = $($tree.find('li:not(".hidden"):first')[0]); + assert.equal($focused.attr('tabindex'), undefined, 'tabindex defaults to undefined'); - assert.ok(false, 'test'); - }); + $tree.on('focus', function () { + assert.equal($focused.attr('tabindex'), '0', 'tabindex set to 0'); + }); - QUnit.test('should focus on first selected item when there is a selection', function respondsToKeyboardInput (assert) { - this.$tree.trigger(this.getKeyDown('left')); + var tree = document.getElementById('MyTree'); - assert.ok(true, 'test'); + var event = new Event('focus'); + + tree.dispatchEvent(event); + }); + + $tree.tree({ + dataSource: this.dataSource + }); }); + + // QUnit.test('should focus on first selected item when there is a selection', function respondsToKeyboardInput (assert) { + // this.$tree.trigger(this.getKeyDown('left')); + + // assert.ok(true, 'test'); + // }); }); }; }); From 44cff68ff91e5d8fa21111740fc826106c44c6bf Mon Sep 17 00:00:00 2001 From: Christopher McCulloh Date: Fri, 26 May 2017 09:43:36 -0400 Subject: [PATCH 13/57] fixes npm lint errors --- test/tree-tests/focus-module.js | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/test/tree-tests/focus-module.js b/test/tree-tests/focus-module.js index 7e4b9a884..7dace7ee2 100644 --- a/test/tree-tests/focus-module.js +++ b/test/tree-tests/focus-module.js @@ -1,14 +1,14 @@ -define(function focusModule (require) { +define(function focusModuleFactory (require) { var $ = require('jquery'); - return function (QUnit) { - QUnit.module( 'focusIn', {}, function () { + return function focusModule (QUnit) { + QUnit.module( 'focusIn', {}, function focusInModule () { QUnit.test('should focus on first focusable branch when nothing is selected', function checkFocusOnNonSelect (assert) { assert.expect( 1 ); var $tree = this.$tree; - $tree.on('loaded.fu.tree', function () { - $tree.on('focus', function () { + $tree.on('loaded.fu.tree', function fireFocus () { + $tree.on('focus', function testFocus () { var $focused = $(document.activeElement); var $firstFocusableChild = $(document.activeElement); assert.equal($focused.attr('id'), $firstFocusableChild.attr('id'), 'first focusable branch is focused on'); @@ -26,15 +26,15 @@ define(function focusModule (require) { }); }); - QUnit.test('should correctly set tabindex', function testTabIndex (assert) { + QUnit.test('should correctly set tabindex', function tabIndexTest (assert) { assert.expect( 2 ); var $tree = this.$tree; - $tree.on('loaded.fu.tree', function () { + $tree.on('loaded.fu.tree', function fireFocus () { var $focused = $($tree.find('li:not(".hidden"):first')[0]); assert.equal($focused.attr('tabindex'), undefined, 'tabindex defaults to undefined'); - $tree.on('focus', function () { + $tree.on('focus', function testTabIndex () { assert.equal($focused.attr('tabindex'), '0', 'tabindex set to 0'); }); From 9cbc29271bce52affa491a8019d4047fa78c0e59 Mon Sep 17 00:00:00 2001 From: Christopher McCulloh Date: Fri, 26 May 2017 09:51:51 -0400 Subject: [PATCH 14/57] tests focusIn on select --- test/tree-tests/focus-module.js | 34 ++++++++++++++++++++++++++------- 1 file changed, 27 insertions(+), 7 deletions(-) diff --git a/test/tree-tests/focus-module.js b/test/tree-tests/focus-module.js index 7dace7ee2..991711537 100644 --- a/test/tree-tests/focus-module.js +++ b/test/tree-tests/focus-module.js @@ -10,7 +10,7 @@ define(function focusModuleFactory (require) { $tree.on('loaded.fu.tree', function fireFocus () { $tree.on('focus', function testFocus () { var $focused = $(document.activeElement); - var $firstFocusableChild = $(document.activeElement); + var $firstFocusableChild = $($tree.find('li:not(".hidden"):first')[0]); assert.equal($focused.attr('id'), $firstFocusableChild.attr('id'), 'first focusable branch is focused on'); }); @@ -26,6 +26,32 @@ define(function focusModuleFactory (require) { }); }); + QUnit.test('should focus on selected child branch when it is selected', function checkFocusOnSelect (assert) { + assert.expect( 1 ); + var $tree = this.$tree; + + $tree.on('loaded.fu.tree', function fireFocus () { + var $secondSelectableChild = $($tree.find('li:not(".hidden")')[1]); + $tree.tree('selectItem', $secondSelectableChild); + + + $tree.on('focus', function testFocus () { + var $focused = $(document.activeElement); + assert.equal($focused.attr('id'), $secondSelectableChild.attr('id'), 'selected item is focused on'); + }); + + var tree = document.getElementById('MyTree'); + + var event = new Event('focus'); + + tree.dispatchEvent(event); + }); + + $tree.tree({ + dataSource: this.dataSource + }); + }); + QUnit.test('should correctly set tabindex', function tabIndexTest (assert) { assert.expect( 2 ); var $tree = this.$tree; @@ -49,12 +75,6 @@ define(function focusModuleFactory (require) { dataSource: this.dataSource }); }); - - // QUnit.test('should focus on first selected item when there is a selection', function respondsToKeyboardInput (assert) { - // this.$tree.trigger(this.getKeyDown('left')); - - // assert.ok(true, 'test'); - // }); }); }; }); From d5faca007b8ed550f95b3cf18f1c25bbcc91a936 Mon Sep 17 00:00:00 2001 From: Christopher McCulloh Date: Fri, 26 May 2017 15:33:12 -0400 Subject: [PATCH 15/57] tests tabindexes --- test/tree-tests/focus-module.js | 18 +++++++++++++++--- 1 file changed, 15 insertions(+), 3 deletions(-) diff --git a/test/tree-tests/focus-module.js b/test/tree-tests/focus-module.js index 991711537..3670c07f4 100644 --- a/test/tree-tests/focus-module.js +++ b/test/tree-tests/focus-module.js @@ -51,9 +51,11 @@ define(function focusModuleFactory (require) { dataSource: this.dataSource }); }); + }); - QUnit.test('should correctly set tabindex', function tabIndexTest (assert) { - assert.expect( 2 ); + QUnit.module( 'fixFocusability', {}, function focusInModule () { + QUnit.test('should correctly set tabindexes', function tabIndexTest (assert) { + assert.expect( 3 ); var $tree = this.$tree; $tree.on('loaded.fu.tree', function fireFocus () { @@ -61,7 +63,17 @@ define(function focusModuleFactory (require) { assert.equal($focused.attr('tabindex'), undefined, 'tabindex defaults to undefined'); $tree.on('focus', function testTabIndex () { - assert.equal($focused.attr('tabindex'), '0', 'tabindex set to 0'); + var $notFocused = $($tree.find('li:not(".hidden, #' + $focused.attr('id') + '")')); + var allSetToMinus1 = true; + + $notFocused.each(function gatherIndices (i, elm) { + if (parseInt($(elm).attr('tabindex'), 10) >= 0) { + allSetToMinus1 = false; + } + }); + + assert.equal($focused.attr('tabindex'), '0', "focused branch's tabindex set to 0"); + assert.ok(allSetToMinus1, 'All ' + $notFocused.length + " other branch's tab indexes are set to -1"); }); var tree = document.getElementById('MyTree'); From 1b8caa5bd414618dc45d77e078303ee59799694c Mon Sep 17 00:00:00 2001 From: Christopher McCulloh Date: Fri, 26 May 2017 15:50:31 -0400 Subject: [PATCH 16/57] tests setFocus method --- test/tree-tests/focus-module.js | 72 +++++++++++++++++++++++++++++++++ 1 file changed, 72 insertions(+) diff --git a/test/tree-tests/focus-module.js b/test/tree-tests/focus-module.js index 3670c07f4..ea901ef70 100644 --- a/test/tree-tests/focus-module.js +++ b/test/tree-tests/focus-module.js @@ -88,5 +88,77 @@ define(function focusModuleFactory (require) { }); }); }); + + QUnit.module( 'setFocus', {}, function focusInModule () { + QUnit.test("should set tree's aria-activedescendant attr to branch id", function tabIndexTest (assert) { + assert.expect( 1 ); + var $tree = this.$tree; + + $tree.on('loaded.fu.tree', function fireFocus () { + $tree.on('focus', function testAriaActive () { + var $focused = $(document.activeElement); + assert.equal($tree.attr('aria-activedescendant'), $focused.attr('id'), "tree's aria-activedescendant is set to focused branch's ID"); + }); + + var tree = document.getElementById('MyTree'); + + var event = new Event('focus'); + + tree.dispatchEvent(event); + }); + + $tree.tree({ + dataSource: this.dataSource + }); + }); + + QUnit.test('should focus on passed in branch', function tabIndexTest (assert) { + assert.expect( 1 ); + var $tree = this.$tree; + + $tree.on('loaded.fu.tree', function fireFocus () { + var $passedInBranch = $($tree.find('li:not(".hidden"):first')[0]); + + $tree.on('focus', function testFocusedBranch () { + var $focused = $(document.activeElement); + assert.equal($passedInBranch.attr('id'), $focused.attr('id'), 'passed in branch is focused on'); + }); + + var tree = document.getElementById('MyTree'); + + var event = new Event('focus'); + + tree.dispatchEvent(event); + }); + + $tree.tree({ + dataSource: this.dataSource + }); + }); + + QUnit.test('should fire setFocus.fu.tree', function tabIndexTest (assert) { + assert.expect( 2 ); + var $tree = this.$tree; + + $tree.on('loaded.fu.tree', function fireFocus () { + var $expectedBranch = $($tree.find('li:not(".hidden"):first')[0]); + + $tree.on('setFocus.fu.tree', function testFiredEvent (e, bubbledBranch) { + assert.ok(true, 'setFocus.fu.tree fired.'); + assert.equal($expectedBranch.attr('id'), $(bubbledBranch).attr('id'), 'bubbled branch is expected branch'); + }); + + var tree = document.getElementById('MyTree'); + + var event = new Event('focus'); + + tree.dispatchEvent(event); + }); + + $tree.tree({ + dataSource: this.dataSource + }); + }); + }); }; }); From bd9ae29ee9a398f92144c7a917cf38e51ad8d694 Mon Sep 17 00:00:00 2001 From: Christopher McCulloh Date: Fri, 26 May 2017 21:38:42 -0400 Subject: [PATCH 17/57] adds test for left key press on closed branch on top node --- test/tree-test.js | 5 +-- test/tree-tests/accessibility-module.js | 21 ---------- test/tree-tests/helpers.js | 9 ++--- test/tree-tests/keyboard-navigation-module.js | 40 +++++++++++++++++++ 4 files changed, 45 insertions(+), 30 deletions(-) delete mode 100644 test/tree-tests/accessibility-module.js create mode 100644 test/tree-tests/keyboard-navigation-module.js diff --git a/test/tree-test.js b/test/tree-test.js index d3d6c06b4..723933626 100644 --- a/test/tree-test.js +++ b/test/tree-test.js @@ -35,9 +35,8 @@ define(function treeTest (require) { // QUnit.test('should accept TEXT as the NAME property in the datasource', require('./tree-tests/tree-accepts-name')); // QUnit.test('should have proper tabindexes', require('./tree-tests/tab-indexes')); - require('./tree-tests/focus-module')(QUnit); - - // require('./tree-tests/accessibility-module')(QUnit); + // require('./tree-tests/focus-module')(QUnit); + require('./tree-tests/keyboard-navigation-module')(QUnit); // QUnit.test('should destroy control', require('./tree-tests/is-destroyed')); }); diff --git a/test/tree-tests/accessibility-module.js b/test/tree-tests/accessibility-module.js deleted file mode 100644 index 514abc606..000000000 --- a/test/tree-tests/accessibility-module.js +++ /dev/null @@ -1,21 +0,0 @@ -define(function respondsToKeyboardInputModule (require) { - var $ = require('jquery'); - - return function (QUnit) { - QUnit.module( 'accessibility', {}, function () { - QUnit.module( 'should respond to left key', {}, function() { - QUnit.test('when branch is closed', function respondsToKeyboardInput (assert) { - this.$tree.trigger(this.getKeyDown('left')); - - assert.ok(true, 'test'); - }); - - QUnit.test('when branch is open', function respondsToKeyboardInput (assert) { - this.$tree.trigger(this.getKeyDown('left')); - - assert.ok(true, 'test'); - }); - }); - }); - }; -}); diff --git a/test/tree-tests/helpers.js b/test/tree-tests/helpers.js index 8c89f2517..d5e7c2cd9 100644 --- a/test/tree-tests/helpers.js +++ b/test/tree-tests/helpers.js @@ -164,13 +164,10 @@ define(function treeDataFactory (require) { this.$selectableFolderTree = $fixture.find('#MyTreeSelectableFolder'); this.defaultEventObject = { - originalEvent: { + originalEvent: $.Event( 'keydown', { // eslint-disable-line new-cap target: this.$tree.find('li:not(".hidden"):first') - }, - which: 37, - preventDefault: function preventDefault () { - console.log('default prevented'); - } + }), + which: 37 }; this.getKeyDown = getKeyDown; diff --git a/test/tree-tests/keyboard-navigation-module.js b/test/tree-tests/keyboard-navigation-module.js new file mode 100644 index 000000000..d1affcc6d --- /dev/null +++ b/test/tree-tests/keyboard-navigation-module.js @@ -0,0 +1,40 @@ +define(function keyboardNavigationModuleFactory (require) { + var $ = require('jquery'); + + return function keyboardNavigationModule (QUnit) { + QUnit.module( 'keyboard navigation', {}, function testKeyboardNav () { + QUnit.module( 'should respond to left key', {}, function testLeftKeyPresses () { + QUnit.test('on top node when branch is closed', function loadTree (assert) { + assert.expect( 1 ); + var $tree = this.$tree; + var leftKeyDown = this.getKeyDown('left'); + + $tree.on('loaded.fu.tree', function selectFolder () { + $tree.on('selected.fu.tree', function triggerKeypress () { + var $focused = $(document.activeElement); + $tree.on('keyboardNavigated.fu.tree', function testFocus () { + var $afterKeypressFocuse = $(document.activeElement); + assert.equal($focused.attr('id'), $afterKeypressFocuse.attr('id'), 'focus does not change'); + }); + + $focused.trigger(leftKeyDown); + }); + + // focus on first selectable folder + $tree.tree('selectFolder', $($tree.find('.tree-branch:not(".hidden")')[0])); + }); + + $tree.tree({ + dataSource: this.dataSource + }); + }); + + // QUnit.test('when branch is open', function respondsToKeyboardInput (assert) { + // this.$tree.trigger(this.getKeyDown('left')); + + // assert.ok(true, 'test'); + // }); + }); + }); + }; +}); From 8e65e1e42d1cc2638f87e0d5edd862dc4f48539f Mon Sep 17 00:00:00 2001 From: Christopher McCulloh Date: Tue, 30 May 2017 15:51:20 -0400 Subject: [PATCH 18/57] test left key press on open folder --- test/tree-tests/helpers.js | 8 ++- test/tree-tests/keyboard-navigation-module.js | 49 +++++++++++++++---- 2 files changed, 46 insertions(+), 11 deletions(-) diff --git a/test/tree-tests/helpers.js b/test/tree-tests/helpers.js index d5e7c2cd9..519d450bf 100644 --- a/test/tree-tests/helpers.js +++ b/test/tree-tests/helpers.js @@ -129,10 +129,16 @@ define(function treeDataFactory (require) { down: 40 }; - var getKeyDown = function getKeyDown (which) { + var getKeyDown = function getKeyDown (which, $target) { var eventObject = this.defaultEventObject; eventObject.which = KEYMAP[which]; + if ($target) { + eventObject.originalEvent = $.Event( 'keydown', { // eslint-disable-line new-cap + target: $target + }); + } + return $.Event( 'keydown', eventObject); // eslint-disable-line new-cap }; diff --git a/test/tree-tests/keyboard-navigation-module.js b/test/tree-tests/keyboard-navigation-module.js index d1affcc6d..405b9dce0 100644 --- a/test/tree-tests/keyboard-navigation-module.js +++ b/test/tree-tests/keyboard-navigation-module.js @@ -5,16 +5,18 @@ define(function keyboardNavigationModuleFactory (require) { QUnit.module( 'keyboard navigation', {}, function testKeyboardNav () { QUnit.module( 'should respond to left key', {}, function testLeftKeyPresses () { QUnit.test('on top node when branch is closed', function loadTree (assert) { - assert.expect( 1 ); + assert.expect( 3 ); var $tree = this.$tree; var leftKeyDown = this.getKeyDown('left'); - $tree.on('loaded.fu.tree', function selectFolder () { - $tree.on('selected.fu.tree', function triggerKeypress () { + $tree.one('loaded.fu.tree', function selectFolder () { + $tree.one('selected.fu.tree', function triggerKeypress () { var $focused = $(document.activeElement); - $tree.on('keyboardNavigated.fu.tree', function testFocus () { - var $afterKeypressFocuse = $(document.activeElement); - assert.equal($focused.attr('id'), $afterKeypressFocuse.attr('id'), 'focus does not change'); + assert.ok(!$focused.hasClass('tree-open'), 'key is being pressed on closed folder.'); + $tree.one('keyboardNavigated.fu.tree', function testFocus () { + var $afterKeypressFocus = $(document.activeElement); + assert.equal($focused.attr('id'), $afterKeypressFocus.attr('id'), 'focus does not change upon keypress.'); + assert.ok(!$focused.hasClass('tree-open'), 'folder is still closed.'); }); $focused.trigger(leftKeyDown); @@ -29,11 +31,38 @@ define(function keyboardNavigationModuleFactory (require) { }); }); - // QUnit.test('when branch is open', function respondsToKeyboardInput (assert) { - // this.$tree.trigger(this.getKeyDown('left')); + QUnit.test('when branch is disclosed, closes branch', function respondsToKeyboardInput (assert) { + assert.expect( 3 ); + var $tree = this.$tree; + var self = this; + + $tree.one('loaded.fu.tree', function selectFolder () { + $tree.one('setFocus.fu.tree', function triggerDisclosure () { + $tree.one('disclosedFolder.fu.tree', function triggerKeypress () { + var $focused = $(document.activeElement); + + assert.ok($focused.hasClass('tree-open'), 'key is being pressed on open folder.'); + $tree.on('keyboardNavigated.fu.tree', function testFocus () { + var $afterKeypressFocus = $(document.activeElement); + assert.equal($focused.attr('id'), $afterKeypressFocus.attr('id'), 'focus does not change upon keypress.'); + assert.ok(!$focused.hasClass('tree-open'), 'folder is now closed.'); + }); + var leftKeyDown = self.getKeyDown('left', $focused); + + $focused.trigger(leftKeyDown); + }); + + $tree.tree('discloseFolder', $($tree.find('.tree-branch:not(".hidden")')[0])); + }); - // assert.ok(true, 'test'); - // }); + // focus on first selectable folder + $tree.tree('selectFolder', $($tree.find('.tree-branch:not(".hidden")')[0])); + }); + + $tree.tree({ + dataSource: this.dataSource + }); + }); }); }); }; From ce5d289ef6a93cee24e325e08c0cbf35300314e6 Mon Sep 17 00:00:00 2001 From: Christopher McCulloh Date: Wed, 31 May 2017 16:58:34 -0400 Subject: [PATCH 19/57] uncomments out tests. Adds skip tests for stubbed out tests --- test/tests.js | 34 +++--- test/tree-test.js | 58 ++++++---- test/tree-tests/down-key-module.js | 19 +++ test/tree-tests/end-key-module.js | 11 ++ test/tree-tests/home-key-module.js | 11 ++ test/tree-tests/is-populated.js | 1 + test/tree-tests/keyboard-navigation-module.js | 69 ----------- test/tree-tests/left-key-module.js | 109 ++++++++++++++++++ test/tree-tests/right-key-module.js | 15 +++ test/tree-tests/space-key-module.js | 19 +++ test/tree-tests/tab-indexes.js | 12 +- test/tree-tests/up-key-module.js | 19 +++ 12 files changed, 266 insertions(+), 111 deletions(-) create mode 100644 test/tree-tests/down-key-module.js create mode 100644 test/tree-tests/end-key-module.js create mode 100644 test/tree-tests/home-key-module.js delete mode 100644 test/tree-tests/keyboard-navigation-module.js create mode 100644 test/tree-tests/left-key-module.js create mode 100644 test/tree-tests/right-key-module.js create mode 100644 test/tree-tests/space-key-module.js create mode 100644 test/tree-tests/up-key-module.js diff --git a/test/tests.js b/test/tests.js index 9424e2e43..dbca99213 100644 --- a/test/tests.js +++ b/test/tests.js @@ -42,22 +42,22 @@ define(function testWrapper (require) { }); require('moment'); - // require('./test/checkbox-test'); - // require('./test/combobox-test'); - // require('./test/datepicker-moment-test'); - // require('./test/infinite-scroll-test'); - // require('./test/loader-test'); - // require('./test/pillbox-test'); - // require('./test/placard-test'); - // require('./test/radio-test'); - // require('./test/repeater-test'); - // require('./test/repeater-list-test'); - // require('./test/repeater-thumbnail-test'); - // require('./test/scheduler-test'); - // require('./test/search-test'); - // require('./test/selectlist-test'); - // require('./test/spinbox-test'); - // require('./test/picker-test'); + require('./test/checkbox-test'); + require('./test/combobox-test'); + require('./test/datepicker-moment-test'); + require('./test/infinite-scroll-test'); + require('./test/loader-test'); + require('./test/pillbox-test'); + require('./test/placard-test'); + require('./test/radio-test'); + require('./test/repeater-test'); + require('./test/repeater-list-test'); + require('./test/repeater-thumbnail-test'); + require('./test/scheduler-test'); + require('./test/search-test'); + require('./test/selectlist-test'); + require('./test/spinbox-test'); + require('./test/picker-test'); require('./test/tree-test'); - // require('./test/wizard-test'); + require('./test/wizard-test'); }); diff --git a/test/tree-test.js b/test/tree-test.js index 723933626..3731a8051 100644 --- a/test/tree-test.js +++ b/test/tree-test.js @@ -11,33 +11,43 @@ define(function treeTest (require) { QUnit.module('Fuel UX Tree', { beforeEach: require('./tree-tests/helpers').setup }, function runTreeTests () { - // QUnit.test('should be defined on jquery object', function isTreeDefined (assert) { - // assert.ok($().tree, 'tree method is defined'); - // }); + QUnit.test('should be defined on jquery object', function isTreeDefined (assert) { + assert.ok($().tree, 'tree method is defined'); + }); - // QUnit.test('should return element', function doesTreeReturnTree (assert) { - // assert.ok(this.$tree.tree() === this.$tree, 'tree should be initialized'); - // }); + QUnit.test('should return element', function doesTreeReturnTree (assert) { + assert.ok(this.$tree.tree() === this.$tree, 'tree should be initialized'); + }); - // QUnit.test('should have correct defaults', require('./tree-tests/defaults')); - // QUnit.test('should call dataSource correctly', require('./tree-tests/calls-datasource')); - // QUnit.test('should be populated by items on initialization', require('./tree-tests/is-populated')); - // QUnit.test('folder should populate when opened', require('./tree-tests/does-folder-populate')); - // QUnit.test('getValue alias should function', require('./tree-tests/get-value-alias')); - // QUnit.test('single item/folder selection works as designed', require('./tree-tests/single-select')); - // QUnit.test('multiple item/folder selection works as designed', require('./tree-tests/multi-select')); - // QUnit.test('should not allow selecting items if disabled', require('./tree-tests/disable-select-items')); - // QUnit.test('should not allow selecting folders if disabled', require('./tree-tests/disable-select-folders')); - // QUnit.test('folders should open and close correctly', require('./tree-tests/folders-open-close')); - // QUnit.test('should disclose visible folders', require('./tree-tests/disclose-visible')); - // QUnit.test('should disclose all folders up to limit, and then close them, then open them all', require('./tree-tests/disclose-all')); - // QUnit.test('should refresh an already opened/cached folder with new nodes', require('./tree-tests/refresh')); - // QUnit.test('should accept TEXT as the NAME property in the datasource', require('./tree-tests/tree-accepts-name')); - // QUnit.test('should have proper tabindexes', require('./tree-tests/tab-indexes')); + QUnit.test('should have correct defaults', require('./tree-tests/defaults')); + QUnit.test('should call dataSource correctly', require('./tree-tests/calls-datasource')); + QUnit.test('should be populated by items on initialization', require('./tree-tests/is-populated')); + QUnit.test('folder should populate when opened', require('./tree-tests/does-folder-populate')); + QUnit.test('getValue alias should function', require('./tree-tests/get-value-alias')); + QUnit.test('single item/folder selection works as designed', require('./tree-tests/single-select')); + QUnit.test('multiple item/folder selection works as designed', require('./tree-tests/multi-select')); + QUnit.test('should not allow selecting items if disabled', require('./tree-tests/disable-select-items')); + QUnit.test('should not allow selecting folders if disabled', require('./tree-tests/disable-select-folders')); + QUnit.test('folders should open and close correctly', require('./tree-tests/folders-open-close')); + QUnit.test('should disclose visible folders', require('./tree-tests/disclose-visible')); + QUnit.test('should disclose all folders up to limit, and then close them, then open them all', require('./tree-tests/disclose-all')); + QUnit.test('should refresh an already opened/cached folder with new nodes', require('./tree-tests/refresh')); + QUnit.test('should accept TEXT as the NAME property in the datasource', require('./tree-tests/tree-accepts-name')); - // require('./tree-tests/focus-module')(QUnit); - require('./tree-tests/keyboard-navigation-module')(QUnit); + QUnit.module( 'Accessibility', {}, function accessibility () { + require('./tree-tests/tab-indexes')(QUnit); + require('./tree-tests/focus-module')(QUnit); + QUnit.module( 'keyboard navigation', {}, function testKeyboardNav () { + require('./tree-tests/left-key-module')(QUnit); + require('./tree-tests/right-key-module')(QUnit); + require('./tree-tests/up-key-module')(QUnit); + require('./tree-tests/down-key-module')(QUnit); + require('./tree-tests/space-key-module')(QUnit); + require('./tree-tests/home-key-module')(QUnit); + require('./tree-tests/end-key-module')(QUnit); + }); + }); - // QUnit.test('should destroy control', require('./tree-tests/is-destroyed')); + QUnit.test('should destroy control', require('./tree-tests/is-destroyed')); }); }); diff --git a/test/tree-tests/down-key-module.js b/test/tree-tests/down-key-module.js new file mode 100644 index 000000000..bf262e823 --- /dev/null +++ b/test/tree-tests/down-key-module.js @@ -0,0 +1,19 @@ +define(function keyboardNavigationModuleFactory (require) { + var $ = require('jquery'); + + return function downKeyModule (QUnit) { + QUnit.module( 'should respond to down key', {}, function testDownKeyPresses () { + QUnit.skip('when focus is on node above sibling node, moves focus down to sibling', function loadTree (assert) { + + }); + + QUnit.skip('when focus is on last focusable child of parent, moves focus out of parent onto first focusable sibling of parent', function loadTree (assert) { + + }); + + QUnit.skip('when focus is on open branch, moves focus into open branch onto first focusable child', function respondsToKeyboardInput (assert) { + + }); + }); + }; +}); diff --git a/test/tree-tests/end-key-module.js b/test/tree-tests/end-key-module.js new file mode 100644 index 000000000..aba54b638 --- /dev/null +++ b/test/tree-tests/end-key-module.js @@ -0,0 +1,11 @@ +define(function keyboardNavigationModuleFactory (require) { + var $ = require('jquery'); + + return function endKeyModule (QUnit) { + QUnit.module( 'should respond to end key', {}, function testEndKeyPresses () { + QUnit.skip('moves focus to last selectable node in tree', function loadTree (assert) { + + }); + }); + }; +}); diff --git a/test/tree-tests/home-key-module.js b/test/tree-tests/home-key-module.js new file mode 100644 index 000000000..578b20016 --- /dev/null +++ b/test/tree-tests/home-key-module.js @@ -0,0 +1,11 @@ +define(function keyboardNavigationModuleFactory (require) { + var $ = require('jquery'); + + return function homeKeyModule (QUnit) { + QUnit.module( 'should respond to home key', {}, function testHomeKeyPresses () { + QUnit.skip('moves focus to first selectable node in tree', function loadTree (assert) { + + }); + }); + }; +}); diff --git a/test/tree-tests/is-populated.js b/test/tree-tests/is-populated.js index 9d8f857bd..dc9144d63 100644 --- a/test/tree-tests/is-populated.js +++ b/test/tree-tests/is-populated.js @@ -2,6 +2,7 @@ define(function isTreePopulatedModule (require) { var constants = require('./helpers').constants; return function isTreePopulated (assert) { + assert.expect( 3 ); this.$tree.tree({ dataSource: this.dataSource }); diff --git a/test/tree-tests/keyboard-navigation-module.js b/test/tree-tests/keyboard-navigation-module.js deleted file mode 100644 index 405b9dce0..000000000 --- a/test/tree-tests/keyboard-navigation-module.js +++ /dev/null @@ -1,69 +0,0 @@ -define(function keyboardNavigationModuleFactory (require) { - var $ = require('jquery'); - - return function keyboardNavigationModule (QUnit) { - QUnit.module( 'keyboard navigation', {}, function testKeyboardNav () { - QUnit.module( 'should respond to left key', {}, function testLeftKeyPresses () { - QUnit.test('on top node when branch is closed', function loadTree (assert) { - assert.expect( 3 ); - var $tree = this.$tree; - var leftKeyDown = this.getKeyDown('left'); - - $tree.one('loaded.fu.tree', function selectFolder () { - $tree.one('selected.fu.tree', function triggerKeypress () { - var $focused = $(document.activeElement); - assert.ok(!$focused.hasClass('tree-open'), 'key is being pressed on closed folder.'); - $tree.one('keyboardNavigated.fu.tree', function testFocus () { - var $afterKeypressFocus = $(document.activeElement); - assert.equal($focused.attr('id'), $afterKeypressFocus.attr('id'), 'focus does not change upon keypress.'); - assert.ok(!$focused.hasClass('tree-open'), 'folder is still closed.'); - }); - - $focused.trigger(leftKeyDown); - }); - - // focus on first selectable folder - $tree.tree('selectFolder', $($tree.find('.tree-branch:not(".hidden")')[0])); - }); - - $tree.tree({ - dataSource: this.dataSource - }); - }); - - QUnit.test('when branch is disclosed, closes branch', function respondsToKeyboardInput (assert) { - assert.expect( 3 ); - var $tree = this.$tree; - var self = this; - - $tree.one('loaded.fu.tree', function selectFolder () { - $tree.one('setFocus.fu.tree', function triggerDisclosure () { - $tree.one('disclosedFolder.fu.tree', function triggerKeypress () { - var $focused = $(document.activeElement); - - assert.ok($focused.hasClass('tree-open'), 'key is being pressed on open folder.'); - $tree.on('keyboardNavigated.fu.tree', function testFocus () { - var $afterKeypressFocus = $(document.activeElement); - assert.equal($focused.attr('id'), $afterKeypressFocus.attr('id'), 'focus does not change upon keypress.'); - assert.ok(!$focused.hasClass('tree-open'), 'folder is now closed.'); - }); - var leftKeyDown = self.getKeyDown('left', $focused); - - $focused.trigger(leftKeyDown); - }); - - $tree.tree('discloseFolder', $($tree.find('.tree-branch:not(".hidden")')[0])); - }); - - // focus on first selectable folder - $tree.tree('selectFolder', $($tree.find('.tree-branch:not(".hidden")')[0])); - }); - - $tree.tree({ - dataSource: this.dataSource - }); - }); - }); - }); - }; -}); diff --git a/test/tree-tests/left-key-module.js b/test/tree-tests/left-key-module.js new file mode 100644 index 000000000..e4306b74c --- /dev/null +++ b/test/tree-tests/left-key-module.js @@ -0,0 +1,109 @@ +define(function keyboardNavigationModuleFactory (require) { + var $ = require('jquery'); + + return function leftKeyModule (QUnit) { + QUnit.module( 'should respond to left key', {}, function testLeftKeyPresses () { + QUnit.test('on top node when branch is closed', function loadTree (assert) { + assert.expect( 3 ); + var $tree = this.$tree; + var leftKeyDown = this.getKeyDown('left'); + + $tree.one('loaded.fu.tree', function selectFolder () { + $tree.one('selected.fu.tree', function triggerKeypress () { + var $focused = $(document.activeElement); + assert.ok(!$focused.hasClass('tree-open'), 'key is being pressed on closed folder.'); + $tree.one('keyboardNavigated.fu.tree', function testFocus () { + var $afterKeypressFocus = $(document.activeElement); + assert.equal($focused.attr('id'), $afterKeypressFocus.attr('id'), 'focus does not change upon keypress.'); + assert.ok(!$focused.hasClass('tree-open'), 'folder is still closed.'); + }); + + $focused.trigger(leftKeyDown); + }); + + // focus on first selectable folder + $tree.tree('selectFolder', $($tree.find('.tree-branch:not(".hidden")')[0])); + }); + + $tree.tree({ + dataSource: this.dataSource + }); + }); + + QUnit.skip('on child node when branch is closed', function loadTree (assert) { + assert.expect( 4 ); + var $tree = this.$tree; + var self = this; + + $tree.one('loaded.fu.tree', function selectFolder () { + $tree.one('setFocus.fu.tree', function triggerDisclosure () { + var $finalTargetFolder = $(document.activeElement); + + $tree.one('disclosedFolder.fu.tree', function triggerKeypress () { + $tree.one('setFocus.fu.tree', function selectChildFolder () { + var $focused = $(document.activeElement); + + assert.notOk($focused.hasClass('tree-open'), 'key is being pressed on closed folder.'); + assert.notEqual($focused.attr('id'), $finalTargetFolder.attr('id'), 'focus has changed from initially targeted folder.'); + $tree.on('keyboardNavigated.fu.tree', function testFocus () { + var $finalFocusedFolder = $(document.activeElement); + + assert.equal($finalFocusedFolder.attr('id'), $finalTargetFolder.attr('id'), 'focus has changed.'); + assert.notOk($focused.hasClass('tree-open'), 'folder is now closed.'); + }); + var leftKeyDown = self.getKeyDown('left', $focused); + + $focused.trigger(leftKeyDown); + }); + + // focus on first selectable folder + $tree.tree('selectFolder', $($finalTargetFolder.find('.tree-branch:not(".hidden")')[0])); + }); + + $tree.tree('discloseFolder', $($tree.find('.tree-branch:not(".hidden")')[0])); + }); + + // focus on first selectable folder + $tree.tree('selectFolder', $($tree.find('.tree-branch:not(".hidden")')[0])); + }); + + $tree.tree({ + dataSource: this.dataSource + }); + }); + + QUnit.test('when branch is disclosed, closes branch', function respondsToKeyboardInput (assert) { + assert.expect( 3 ); + var $tree = this.$tree; + var self = this; + + $tree.one('loaded.fu.tree', function selectFolder () { + $tree.one('setFocus.fu.tree', function triggerDisclosure () { + $tree.one('disclosedFolder.fu.tree', function triggerKeypress () { + var $focused = $(document.activeElement); + + assert.ok($focused.hasClass('tree-open'), 'key is being pressed on open folder.'); + $tree.on('keyboardNavigated.fu.tree', function testFocus () { + var $afterKeypressFocus = $(document.activeElement); + assert.equal($focused.attr('id'), $afterKeypressFocus.attr('id'), 'focus does not change upon keypress.'); + assert.ok(!$focused.hasClass('tree-open'), 'folder is now closed.'); + }); + var leftKeyDown = self.getKeyDown('left', $focused); + + $focused.trigger(leftKeyDown); + }); + + $tree.tree('discloseFolder', $($tree.find('.tree-branch:not(".hidden")')[0])); + }); + + // focus on first selectable folder + $tree.tree('selectFolder', $($tree.find('.tree-branch:not(".hidden")')[0])); + }); + + $tree.tree({ + dataSource: this.dataSource + }); + }); + }); + }; +}); diff --git a/test/tree-tests/right-key-module.js b/test/tree-tests/right-key-module.js new file mode 100644 index 000000000..14a188cda --- /dev/null +++ b/test/tree-tests/right-key-module.js @@ -0,0 +1,15 @@ +define(function keyboardNavigationModuleFactory (require) { + var $ = require('jquery'); + + return function rightKeyModule (QUnit) { + QUnit.module( 'should respond to right key', {}, function testRightKeyPresses () { + QUnit.skip('when branch is closed, discloses branch', function loadTree (assert) { + + }); + + QUnit.skip('when branch is disclosed, focuses into branch', function respondsToKeyboardInput (assert) { + + }); + }); + }; +}); diff --git a/test/tree-tests/space-key-module.js b/test/tree-tests/space-key-module.js new file mode 100644 index 000000000..f7e5ae92e --- /dev/null +++ b/test/tree-tests/space-key-module.js @@ -0,0 +1,19 @@ +define(function keyboardNavigationModuleFactory (require) { + var $ = require('jquery'); + + return function spaceKeyModule (QUnit) { + QUnit.module( 'should respond to space key', {}, function testSpaceKeyPresses () { + QUnit.skip('when focus is on selectable node, select node', function loadTree (assert) { + + }); + + QUnit.skip('when focus is on non-selectable, disclose-able node, toggles node', function loadTree (assert) { + + }); + + QUnit.skip('when focus is on non-selectable, non-disclose-able node, clicks on node (this is probably "loading...")', function respondsToKeyboardInput (assert) { + + }); + }); + }; +}); diff --git a/test/tree-tests/tab-indexes.js b/test/tree-tests/tab-indexes.js index 80d650c6d..9963fc0df 100644 --- a/test/tree-tests/tab-indexes.js +++ b/test/tree-tests/tab-indexes.js @@ -2,7 +2,17 @@ define(function Module (require) { var $ = require('jquery'); var html = require('text!test/markup/tree-markup.html!strip'); - return function (assert) { + return function tabIndexModule (QUnit) { + QUnit.module( 'tab indexes', {}, function testTabIndexes () { + QUnit.skip('are all set to -1 on tree load', function loadTree (assert) { + }); + QUnit.skip('are set to 1 for selected items', function loadTree (assert) { + + }); + QUnit.skip('are all set to -1 on blur', function loadTree (assert) { + + }); + }); }; }); diff --git a/test/tree-tests/up-key-module.js b/test/tree-tests/up-key-module.js new file mode 100644 index 000000000..f0005ae66 --- /dev/null +++ b/test/tree-tests/up-key-module.js @@ -0,0 +1,19 @@ +define(function keyboardNavigationModuleFactory (require) { + var $ = require('jquery'); + + return function upKeyModule (QUnit) { + QUnit.module( 'should respond to up key', {}, function testUpKeyPresses () { + QUnit.skip('when focus is on node below sibling node, moves focus up to sibling', function loadTree (assert) { + + }); + + QUnit.skip('when focus is below open sibling, moves focus into last focusable child of sibling', function loadTree (assert) { + + }); + + QUnit.skip('when focus is in first child of open branch, moves focus onto parent', function respondsToKeyboardInput (assert) { + + }); + }); + }; +}); From 96d9ab829f58bfb3174b7d6dac95ca4c7afa02ec Mon Sep 17 00:00:00 2001 From: Christopher McCulloh Date: Wed, 31 May 2017 17:03:25 -0400 Subject: [PATCH 20/57] uses qunit 2.3.0 because 2.3.1 & 2.3.2 (current latest) are broken. All sorts of tests throw an error about an assertion executing after the test is complete --- bower.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/bower.json b/bower.json index 4ffcd4d1b..2319aea33 100644 --- a/bower.json +++ b/bower.json @@ -25,7 +25,7 @@ "devDependencies": { "jquery": null, "jquery-1.9.1": "jquery#1.9.1", - "qunit": "2.3.2", + "qunit": "2.3.0", "requirejs-text": "2.x", "underscore": "1.x", "blanket": "1.x", From 17f9ce00f65134e2b90a6f0895705597e32d1ac1 Mon Sep 17 00:00:00 2001 From: Christopher McCulloh Date: Wed, 10 May 2017 14:17:02 -0400 Subject: [PATCH 21/57] (GH1964) fixes eslint errors --- js/tree.js | 183 ++++++++++++++++++++++++++--------------------------- 1 file changed, 89 insertions(+), 94 deletions(-) diff --git a/js/tree.js b/js/tree.js index 017311f6b..3d8f9b427 100644 --- a/js/tree.js +++ b/js/tree.js @@ -1,3 +1,5 @@ +/* global jQuery:true */ + /* * Fuel UX Tree * https://github.com/ExactTarget/fuelux @@ -11,7 +13,7 @@ // For more information on UMD visit: // https://github.com/umdjs/umd/blob/master/jqueryPlugin.js -(function (factory) { +(function umdFactory (factory) { if (typeof define === 'function' && define.amd) { // if AMD loader is available, register as an anonymous module. define(['jquery'], factory); @@ -22,7 +24,7 @@ // OR use browser globals if AMD is not present factory(jQuery); } -}(function ($) { +}(function tree ($) { // -- END UMD WRAPPER PREFACE -- // -- BEGIN MODULE CODE HERE -- @@ -36,16 +38,16 @@ this.options = $.extend({}, $.fn.tree.defaults, options); if (this.options.itemSelect) { - this.$element.on('click.fu.tree', '.tree-item', $.proxy(function (ev) { + this.$element.on('click.fu.tree', '.tree-item', $.proxy(function callSelect (ev) { this.selectItem(ev.currentTarget); }, this)); } - this.$element.on('click.fu.tree', '.tree-branch-name', $.proxy(function (ev) { + this.$element.on('click.fu.tree', '.tree-branch-name', $.proxy(function callToggle (ev) { this.toggleFolder(ev.currentTarget); }, this)); - this.$element.on('click.fu.tree', '.tree-overflow', $.proxy(function (ev){ + this.$element.on('click.fu.tree', '.tree-overflow', $.proxy(function callPopulate (ev) { this.populate($(ev.currentTarget)); }, this)); @@ -53,10 +55,10 @@ if (this.options.folderSelect) { this.$element.addClass('tree-folder-select'); this.$element.off('click.fu.tree', '.tree-branch-name'); - this.$element.on('click.fu.tree', '.icon-caret', $.proxy(function (ev) { + this.$element.on('click.fu.tree', '.icon-caret', $.proxy(function callToggle (ev) { this.toggleFolder($(ev.currentTarget).parent()); }, this)); - this.$element.on('click.fu.tree', '.tree-branch-name', $.proxy(function (ev) { + this.$element.on('click.fu.tree', '.tree-branch-name', $.proxy(function callSelect (ev) { this.selectFolder($(ev.currentTarget)); }, this)); } @@ -67,11 +69,11 @@ Tree.prototype = { constructor: Tree, - deselectAll: function deselectAll(nodes) { + deselectAll: function deselectAll(n) { // clear all child tree nodes and style as deselected - nodes = nodes || this.$element; + var nodes = n || this.$element; var $selectedElements = $(nodes).find('.tree-selected'); - $selectedElements.each(function (index, element) { + $selectedElements.each(function callStyleNodeDeselected (index, element) { styleNodeDeselected( $(element), $(element).find( '.glyphicon' ) ); }); return $selectedElements; @@ -80,7 +82,7 @@ destroy: function destroy() { // any external bindings [none] // empty elements to return to original markup - this.$element.find("li:not([data-template])").remove(); + this.$element.find('li:not([data-template])').remove(); this.$element.remove(); // returns string of markup @@ -91,7 +93,7 @@ this.populate(this.$element); }, - populate: function populate($el, isBackgroundProcess) { + populate: function populate($el, ibp) { var self = this; // populate was initiated based on clicking overflow link @@ -100,25 +102,25 @@ var $parent = ($el.hasClass('tree')) ? $el : $el.parent(); var atRoot = $parent.hasClass('tree'); - if(isOverflow && !atRoot){ + if (isOverflow && !atRoot) { $parent = $parent.parent(); } var treeData = $parent.data(); // expose overflow data to datasource so it can be responded to appropriately. - if(isOverflow){ + if (isOverflow) { treeData.overflow = $el.data(); } - isBackgroundProcess = isBackgroundProcess || false; // no user affordance needed (ex.- "loading") + var isBackgroundProcess = ibp || false; // no user affordance needed (ex.- "loading") - if(isOverflow){ - if(atRoot){ + if (isOverflow) { + if (atRoot) { // the loader at the root level needs to continually replace the overflow trigger // otherwise, when loader is shown below, it will be the loader for the last folder // in the tree, instead of the loader at the root level. $el.replaceWith($parent.find('> .tree-loader').remove()); - }else{ + } else { $el.remove(); } } @@ -130,22 +132,22 @@ } - this.options.dataSource(treeData ? treeData : {}, function (items) { - $.each(items.data, function (index, value) { + this.options.dataSource(treeData ? treeData : {}, function populateNodes (items) { + $.each(items.data, function buildNode (i, treeNode) { var $entity; - if (value.type === 'folder') { + if (treeNode.type === 'folder') { $entity = self.$element.find('[data-template=treebranch]:eq(0)').clone().removeClass('hide hidden').removeData('template').removeAttr('data-template'); // jQuery deprecated hide in 3.0. Use hidden instead. Leaving hide here to support previous markup - $entity.data(value); - $entity.find('.tree-branch-name > .tree-label').html(value.text || value.name); - } else if (value.type === 'item') { + $entity.data(treeNode); + $entity.find('.tree-branch-name > .tree-label').html(treeNode.text || treeNode.name); + } else if (treeNode.type === 'item') { $entity = self.$element.find('[data-template=treeitem]:eq(0)').clone().removeClass('hide hidden').removeData('template').removeAttr('data-template'); // jQuery deprecated hide in 3.0. Use hidden instead. Leaving hide here to support previous markup - $entity.find('.tree-item-name > .tree-label').html(value.text || value.name); - $entity.data(value); - } else if (value.type === 'overflow') { + $entity.find('.tree-item-name > .tree-label').html(treeNode.text || treeNode.name); + $entity.data(treeNode); + } else if (treeNode.type === 'overflow') { $entity = self.$element.find('[data-template=treeoverflow]:eq(0)').clone().removeClass('hide hidden').removeData('template').removeAttr('data-template'); // jQuery deprecated hide in 3.0. Use hidden instead. Leaving hide here to support previous markup - $entity.find('.tree-overflow-name > .tree-label').html(value.text || value.name); - $entity.data(value); + $entity.find('.tree-overflow-name > .tree-label').html(treeNode.text || treeNode.name); + $entity.data(treeNode); } // Decorate $entity with data or other attributes making the @@ -168,32 +170,32 @@ // the "name" attribute is also supported but is deprecated for "text". // add attributes to tree-branch or tree-item - var attr = value.attr || value.dataAttributes || []; - $.each(attr, function (key, value) { - switch (key) { - case 'cssClass': - case 'class': - case 'className': - $entity.addClass(value); - break; - - // allow custom icons - case 'data-icon': - $entity.find('.icon-item').removeClass().addClass('icon-item ' + value); - $entity.attr(key, value); - break; - - // ARIA support - case 'id': - $entity.attr(key, value); - $entity.attr('aria-labelledby', value + '-label'); - $entity.find('.tree-branch-name > .tree-label').attr('id', value + '-label'); - break; - - // style, data-* - default: - $entity.attr(key, value); - break; + var attrs = treeNode.attr || treeNode.dataAttributes || []; + $.each(attrs, function setAttribute (attr, setTo) { + switch (attr) { + case 'cssClass': + case 'class': + case 'className': + $entity.addClass(setTo); + break; + + // allow custom icons + case 'data-icon': + $entity.find('.icon-item').removeClass().addClass('icon-item ' + setTo); + $entity.attr(attr, setTo); + break; + + // ARIA support + case 'id': + $entity.attr(attr, setTo); + $entity.attr('aria-labelledby', setTo + '-label'); + $entity.find('.tree-branch-name > .tree-label').attr('id', setTo + '-label'); + break; + + // style, data-* + default: + $entity.attr(attr, setTo); + break; } }); @@ -225,8 +227,7 @@ // make the clicked.$element the container branch clicked.$element = clicked.$element.closest('.tree-branch'); clicked.$icon = clicked.$element.find('.icon-folder'); - } - else { + } else { clicked.$icon = clicked.$element.find('.icon-item'); } clicked.elementData = clicked.$element.data(); @@ -234,8 +235,7 @@ // the below functions pass objects by copy/reference and use modified object in this function if ( this.options.multiSelect ) { multiSelectSyncNodes(this, clicked, selected); - } - else { + } else { singleSelectSyncNodes(this, clicked, selected); } @@ -259,7 +259,7 @@ var $treeFolderContent = $branch.find('.tree-branch-children'); var $treeFolderContentFirstChild = $treeFolderContent.eq(0); - //take care of the styles + // take care of the styles $branch.addClass('tree-open'); $branch.attr('aria-expanded', 'true'); $treeFolderContentFirstChild.removeClass('hide hidden'); // jQuery deprecated hide in 3.0. Use hidden instead. Leaving hide here to support previous markup @@ -267,7 +267,7 @@ .removeClass('glyphicon-folder-close') .addClass('glyphicon-folder-open'); - //add the children to the folder + // add the children to the folder if (!$treeFolderContent.children().length) { this.populate($treeFolderContent); } @@ -281,7 +281,7 @@ var $treeFolderContent = $branch.find('.tree-branch-children'); var $treeFolderContentFirstChild = $treeFolderContent.eq(0); - //take care of the styles + // take care of the styles $branch.removeClass('tree-open'); $branch.attr('aria-expanded', 'false'); $treeFolderContentFirstChild.addClass('hidden'); @@ -321,12 +321,12 @@ selectedItems: function selectedItems() { var $sel = this.$element.find('.tree-selected'); - var data = []; + var selected = []; - $.each($sel, function (index, value) { - data.push($(value).data()); + $.each($sel, function buildSelectedArray (i, value) { + selected.push($(value).data()); }); - return data; + return selected; }, // collapses open folders @@ -347,15 +347,15 @@ } }; - //trigger callback when all folders have reported closed + // trigger callback when all folders have reported closed self.$element.on('closed.fu.tree', closedReported); - self.$element.find(".tree-branch.tree-open:not('.hidden, .hide')").each(function () { + self.$element.find(".tree-branch.tree-open:not('.hidden, .hide')").each(function closeFolder () { self.closeFolder(this); }); }, - //disclose visible will only disclose visible tree folders + // disclose visible will only disclose visible tree folders discloseVisible: function discloseVisible() { var self = this; @@ -378,7 +378,7 @@ } }; - //trigger callback when all folders have reported opened + // trigger callback when all folders have reported opened self.$element.on('loaded.fu.tree', openReported); // open all visible folders @@ -387,7 +387,7 @@ }); }, - /** + /* * Disclose all will keep listening for `loaded.fu.tree` and if `$(tree-el).data('ignore-disclosures-limit')` * is `true` (defaults to `true`) it will attempt to disclose any new closed folders than were * loaded in during the last disclosure. @@ -395,7 +395,7 @@ discloseAll: function discloseAll() { var self = this; - //first time + // first time if (typeof self.$element.data('disclosures') === 'undefined') { self.$element.data('disclosures', 0); } @@ -423,7 +423,6 @@ if (!self.$element.data('ignore-disclosures-limit')) { return; } - } self.$element.data('disclosures', self.$element.data('disclosures') + 1); @@ -437,7 +436,7 @@ * and then when the trigger happens, this will fire N times, where N equals the number * of recursive `discloseAll` executions (instead of just one) */ - self.$element.one('disclosedVisible.fu.tree', function () { + self.$element.one('disclosedVisible.fu.tree', function callDiscloseAll () { self.discloseAll(); }); @@ -454,14 +453,13 @@ disclosures: self.$element.data('disclosures') }); - //if `cacheItems` is false, and they call closeAll, the data is trashed and therefore - //disclosures needs to accurately reflect that + // if `cacheItems` is false, and they call closeAll, the data is trashed and therefore + // disclosures needs to accurately reflect that if (!self.options.cacheItems) { - self.$element.one('closeAll.fu.tree', function () { + self.$element.one('closeAll.fu.tree', function updateDisclosuresData () { self.$element.data('disclosures', 0); }); } - } }, @@ -475,8 +473,7 @@ if ($treeFolder.hasClass('tree-open')) { this.populate($treeFolderChildren, false); - } - else { + } else { this.populate($treeFolderChildren, true); } @@ -487,11 +484,11 @@ // ALIASES - //alias for collapse for consistency. "Collapse" is an ambiguous term (collapse what? All? One specific branch?) + // alias for collapse for consistency. "Collapse" is an ambiguous term (collapse what? All? One specific branch?) Tree.prototype.closeAll = Tree.prototype.collapse; - //alias for backwards compatibility because there's no reason not to. + // alias for backwards compatibility because there's no reason not to. Tree.prototype.openFolder = Tree.prototype.discloseFolder; - //For library consistency + // For library consistency Tree.prototype.getValue = Tree.prototype.selectedItems; // PRIVATE FUNCTIONS @@ -512,7 +509,7 @@ function multiSelectSyncNodes (self, clicked, selected) { // search for currently selected and add to selected data list if needed - $.each(selected.$elements, function (index, element) { + $.each(selected.$elements, function findCurrentlySelected (index, element) { var $element = $(element); if ($element[0] !== clicked.$element[0]) { selected.dataForEvent.push( $($element).data() ); @@ -520,11 +517,10 @@ }); if (clicked.$element.hasClass('tree-selected')) { - styleNodeDeselected (clicked.$element, clicked.$icon); + styleNodeDeselected(clicked.$element, clicked.$icon); // set event data selected.eventType = 'deselected'; - } - else { + } else { styleNodeSelected(clicked.$element, clicked.$icon); // set event data selected.eventType = 'selected'; @@ -535,13 +531,12 @@ function singleSelectSyncNodes(self, clicked, selected) { // element is not currently selected if (selected.$elements[0] !== clicked.$element[0]) { - var clearedElements = self.deselectAll(self.$element); + self.deselectAll(self.$element); styleNodeSelected(clicked.$element, clicked.$icon); // set event data selected.eventType = 'selected'; selected.dataForEvent = [clicked.elementData]; - } - else { + } else { styleNodeDeselected(clicked.$element, clicked.$icon); // set event data selected.eventType = 'deselected'; @@ -552,11 +547,11 @@ // TREE PLUGIN DEFINITION - $.fn.tree = function tree(option) { + $.fn.tree = function fntree (option) { var args = Array.prototype.slice.call(arguments, 1); var methodReturn; - var $set = this.each(function () { + var $set = this.each(function eachThis () { var $this = $(this); var data = $this.data('fu.tree'); var options = typeof option === 'object' && option; @@ -574,7 +569,7 @@ }; $.fn.tree.defaults = { - dataSource: function dataSource(options, callback) {}, + dataSource: function dataSource() {}, multiSelect: false, cacheItems: true, folderSelect: true, @@ -604,7 +599,7 @@ $.fn.tree.Constructor = Tree; - $.fn.tree.noConflict = function () { + $.fn.tree.noConflict = function noConflict () { $.fn.tree = old; return this; }; From 0df66170541b7591bcdb99af11b04ef2120edf44 Mon Sep 17 00:00:00 2001 From: Christopher McCulloh Date: Wed, 10 May 2017 14:19:00 -0400 Subject: [PATCH 22/57] (GH1964) adds tabindex=-1 to all tree node buttons --- reference/markup/tree-folders-selectable.html | 8 ++++---- reference/markup/tree.html | 8 ++++---- templates/handlebars/fuelux/tree.hbs | 10 +++++----- 3 files changed, 13 insertions(+), 13 deletions(-) diff --git a/reference/markup/tree-folders-selectable.html b/reference/markup/tree-folders-selectable.html index 4e3bace22..656df3f7f 100644 --- a/reference/markup/tree-folders-selectable.html +++ b/reference/markup/tree-folders-selectable.html @@ -2,11 +2,11 @@ Sample Markup -
    +