Helix SwarmHelix Swarm
Loading...

multipickerTest.html

  • //
  • guest/
  • thomas_gray/
  • jambox/
  • main/
  • swarm/
  • tests/
  • qunit/
  • multipickerTest.html #1
  • View
  • Commits
  • Open Download .zip Download (12 KB) 
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8">
  5.     <title>Swarm QUnit Test Runner</title>
  6.     <link rel="stylesheet" href="/vendor/qunit-1.14.0.css">
  7. </head>
  8. <body>
  9.     <div id="qunit"></div>
  10.     <div id="qunit-fixture"></div>
  11.     <script src="/vendor/qunit-1.14.0.js"></script>
  12.     <script src="/vendor/jquery/jquery-1.11.1.min.js"></script>
  13.     <!-- @TODO: Use dependency injection for tests -->
  14.     <script src="/vendor/bootstrap/js/bootstrap.js"></script>
  15.     <script src="/vendor/jsrender/jsrender.js"></script>
  16.     <script src="/vendor/jed/jed.js"></script>
  17.     <script src="/swarm/js/application.js"></script>
  18.     <script src="/swarm/js/i18n.js"></script>
  19.     <script src="/swarm/js/jquery-plugins.js"></script>
  20.     <script src="/libs/utils.js"></script>
  21.     <script src="/libs/testConfig.js"></script>
  22.     <script>
  23.     /* "$.fn.multiPicker" TEST MODULE */
  24.     (function() {
  25.         // define the module
  26.         module('$.fn.multiPicker', {
  27.             setup: function() {
  28.                 swarm.translator.init();
  29.             },
  30.             teardown: function() {
  31.  
  32.             }
  33.         });
  34.  
  35.         test('loaded', 1, function() {
  36.             // test that the plugin is loaded
  37.             ok(!!$.fn.multiPicker);
  38.         });
  39.  
  40.         test('init', 1, function() {
  41.             // test that the plugin is usable and outputs markup
  42.             var element = $('<input type="text" />').appendTo('#qunit-fixture');
  43.             element.multiPicker({
  44.                 selected:       ['test init 1', 'test init 2'],
  45.                 itemsContainer: '#qunit-fixture'
  46.             });
  47.             equal($('#qunit-fixture').find('.multipicker-item').length, 2);
  48.         });
  49.  
  50.         test('typeaheadLookup', 3, function() {
  51.             // test that the typeahead lookup function pulls from the multipicker source
  52.             var element = $('<input type="text" />').appendTo('#qunit-fixture');
  53.             var source  = ['test lookup 1', 'test lookup 2'];
  54.             element.multiPicker({
  55.                 itemsContainer: '#qunit-fixture',
  56.                 source:         source
  57.             });
  58.  
  59.             var typeahead = element.data('multipicker').typeahead;
  60.             element.val('test');
  61.             var resultMenu = typeahead.lookup().$menu;
  62.  
  63.             equal(resultMenu.find('li').length, 2);
  64.             resultMenu.find('li').each(function() {
  65.                 var inSourceArray = $.inArray($(this).text(), source) !== -1;
  66.                 ok(inSourceArray);
  67.             });
  68.         });
  69.  
  70.         test('setSource', 1, function() {
  71.             // test that the setSource function properly set's the typeahead source
  72.             var element = $('<input type="text" />').appendTo('#qunit-fixture');
  73.             var source  = ['test source 1', 'test source 2'];
  74.             element.multiPicker({
  75.                 itemsContainer: '#qunit-fixture'
  76.             });
  77.             element.data('multipicker').setSource(source);
  78.             var typeahead = element.data('multipicker').typeahead;
  79.             deepEqual(typeahead.source, source);
  80.         });
  81.  
  82.         test('highlighter', 1, function() {
  83.             // test that highlighter escapes properly
  84.             var element = $('<input type="text" />').appendTo('#qunit-fixture');
  85.             element.multiPicker({
  86.                 itemsContainer: '#qunit-fixture'
  87.             });
  88.             var plugin = element.data('multipicker');
  89.             plugin.typeahead.query = 'no match';
  90.  
  91.             var value   = 'Hip</span> & <span>Hop';
  92.             var escaped = 'Hip&lt;/span&gt; &amp; &lt;span&gt;Hop';
  93.             equal(plugin.highlighter(value), escaped);
  94.         });
  95.  
  96.         test('matcher', 3, function() {
  97.             // test that selected items are not included in results
  98.             var element = $('<input type="text" />').appendTo('#qunit-fixture');
  99.             element.multiPicker({
  100.                 selected:       ['test match 1', 'test match 2'],
  101.                 source:         ['test match 1', 'test match 2', 'test match 3'],
  102.                 itemsContainer: '#qunit-fixture'
  103.             });
  104.             var plugin = element.data('multipicker');
  105.             plugin.typeahead.query = 'test';
  106.  
  107.             // only the non-selected source should be matchable
  108.             ok(plugin.matcher('test match 3'));
  109.             ok(!plugin.matcher('test match 2'));
  110.             ok(!plugin.matcher('test match 1'));
  111.         });
  112.  
  113.  
  114.         test('select', 1, function() {
  115.             // test that the select method is correctly integrated between the typeahead and multipicker
  116.             var element = $('<input type="text" />').appendTo('#qunit-fixture');
  117.             element.multiPicker({
  118.                 itemsContainer: '#qunit-fixture',
  119.                 source:         ['test select 1', 'test select 2']
  120.             });
  121.             var plugin = element.data('multipicker');
  122.             element.val('2');
  123.             plugin.typeahead.lookup().select();
  124.  
  125.             deepEqual(plugin.getSelected(), ['test select 2']);
  126.         });
  127.  
  128.         test('getSelected', 1, function() {
  129.             // test getSelected returns the items we put into it
  130.             var element = $('<input type="text" />').appendTo('#qunit-fixture');
  131.             var items   = ['test selected 1', 'test selected 2'];
  132.             element.multiPicker({
  133.                 selected:       items,
  134.                 itemsContainer: '#qunit-fixture'
  135.             });
  136.  
  137.             var plugin = element.data('multipicker');
  138.             deepEqual(plugin.getSelected(), items);
  139.         });
  140.  
  141.         test('updateRequired', 3, function() {
  142.             // test the required state of the input is toggled based on the selected contents
  143.             var element = $('<input type="text" />').appendTo('#qunit-fixture');
  144.             element.multiPicker({
  145.                 itemsContainer: '#qunit-fixture',
  146.                 source:         ['test require 1', 'test require 2'],
  147.                 required:       true
  148.             });
  149.  
  150.             ok(element.prop('required'));
  151.  
  152.             var plugin = element.data('multipicker');
  153.             element.val('2');
  154.             plugin.typeahead.lookup().select();
  155.  
  156.             ok(!element.prop('required'));
  157.  
  158.             plugin.clear();
  159.             ok(element.prop('required'));
  160.         });
  161.  
  162.         test('clear', 2, function() {
  163.             // test that the clear function clears all items
  164.             var element = $('<input type="text" />').appendTo('#qunit-fixture');
  165.             element.multiPicker({
  166.                 selected:       ['test clear 1', 'test clear 2'],
  167.                 itemsContainer: '#qunit-fixture'
  168.             });
  169.             equal($('#qunit-fixture').find('.multipicker-item').length, 2);
  170.             element.multiPicker('clear');
  171.             equal($('#qunit-fixture').find('.multipicker-item').length, 0);
  172.         });
  173.  
  174.         test('removeButton', 2, function() {
  175.             // test that the selected pill remove buttons works
  176.             var element = $('<input type="text" />').appendTo('#qunit-fixture');
  177.             element.multiPicker({
  178.                 selected:       ['test remove'],
  179.                 itemsContainer: '#qunit-fixture'
  180.             });
  181.             equal($('#qunit-fixture').find('.multipicker-item').length, 1);
  182.             $('#qunit-fixture').find('.multipicker-item .item-remove').click();
  183.             equal($('#qunit-fixture').find('.multipicker-item').length, 0);
  184.         });
  185.     }());
  186.     /* End OF "$.fn.multiPicker" TEST MODULE */
  187.     </script>
  188.     <script>
  189.     /* "$.fn.userMultiPicker" TEST MODULE */
  190.     (function() {
  191.         // deferred object that each test can resolve for testing the user list
  192.         var usersDeferred;
  193.  
  194.         // define the module
  195.         module('$.fn.userMultiPicker', {
  196.             setup: function() {
  197.                 usersDeferred = $.Deferred();
  198.                 $.fn.userMultiPicker.Promise = function() {
  199.                     return usersDeferred.promise();
  200.                 };
  201.             },
  202.             teardown: function() {
  203.  
  204.             }
  205.         });
  206.  
  207.         test('loaded', 1, function() {
  208.             // test that the plugin is loaded
  209.             ok(!!$.fn.userMultiPicker);
  210.         });
  211.  
  212.         test('init', 1, function() {
  213.             // test that the plugin is usable and outputs markup
  214.             var element = $('<input type="text" />').appendTo('#qunit-fixture');
  215.             element.userMultiPicker({
  216.                 selected:       ['test init 1', 'test init 2'],
  217.                 itemsContainer: '#qunit-fixture'
  218.             });
  219.             equal($('#qunit-fixture').find('.multipicker-item').length, 2);
  220.         });
  221.  
  222.         test('setSource', 1, function() {
  223.             // test that the setSource function properly set's the typeahead source
  224.             var element = $('<input type="text" />').appendTo('#qunit-fixture');
  225.             var source  = [{id:'test source 1', fullName: 'test source 1'}, {id: 'test source 2', fullName: 'test 2'}];
  226.             var output  = ['test source 1', 'test source 2 (test 2)'];
  227.             element.userMultiPicker({
  228.                 itemsContainer: '#qunit-fixture'
  229.             });
  230.             element.data('user-multipicker').setSource(source);
  231.             var typeahead = element.data('user-multipicker').typeahead;
  232.             deepEqual(typeahead.source, output);
  233.         });
  234.  
  235.         test('setSourceFromPromise', 1, function() {
  236.             // test that the resolving the multipickers's user promise sets the typeahead source
  237.             var element = $('<input type="text" />').appendTo('#qunit-fixture');
  238.             var source  = [{id:'test promise 1', fullName: 'test promise 1'}, {id: 'test promise 2', fullName: 'test 2'}];
  239.             var output  = ['test promise 1', 'test promise 2 (test 2)'];
  240.             element.userMultiPicker({
  241.                 itemsContainer: '#qunit-fixture'
  242.             });
  243.  
  244.             usersDeferred.resolve(source);
  245.             var typeahead = element.data('user-multipicker').typeahead;
  246.             deepEqual(typeahead.source, output);
  247.         });
  248.  
  249.         test('updater', 2, function() {
  250.             // test that the updater method splits as expected
  251.             var element = $('<input type="text" />').appendTo('#qunit-fixture');
  252.             var source  = [
  253.                 {id:'test updater 1', fullName: 'test updater 1'}, {id: 'test updater 2', fullName: 'test 2'}
  254.             ];
  255.             element.userMultiPicker({
  256.                 source:         source,
  257.                 itemsContainer: '#qunit-fixture'
  258.             });
  259.             var plugin = element.data('user-multipicker');
  260.             $.each(plugin.typeahead.source, function(index, value) {
  261.                 equal(plugin.updater(value), source[index].id);
  262.             });
  263.         });
  264.  
  265.         test('matcher', 4, function() {
  266.             // test that excluded and selected users are not included in results
  267.             var element = $('<input type="text" />').appendTo('#qunit-fixture');
  268.             element.userMultiPicker({
  269.                 selected:      ['test match 1', 'test match 2'],
  270.                 excludeUsers:  ['test match 4'],
  271.                 source:        [
  272.                     {id:'test match 1', fullname: '1'},
  273.                     {id:'test match 2', fullName: '2'},
  274.                     {id:'test match 3', fullName: '3'},
  275.                     {id:'test match 4', fullName: '4'}
  276.                 ],
  277.                 itemsContainer: '#qunit-fixture'
  278.             });
  279.             var plugin = element.data('user-multipicker');
  280.             plugin.typeahead.query = 'test';
  281.  
  282.             // only the non-selected source and non-excluded user should be matchable
  283.             ok(plugin.matcher('test match 3'));
  284.             ok(!plugin.matcher('test match 2'));
  285.             ok(!plugin.matcher('test match 1'));
  286.             ok(!plugin.matcher('test match 4'));
  287.         });
  288.     }());
  289.     /* End OF "$.fn.userMultiPicker" TEST MODULE */
  290.     </script>
  291. </body>
  292. </html>
# Change User Description Committed
#1 18730 Liz Lam clean up code and move things around 9 years ago