No Description
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

multiple-tests.js 5.5KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258
  1. module('Selection containers - Multiple');
  2. var MultipleSelection = require('select2/selection/multiple');
  3. var $ = require('jquery');
  4. var Options = require('select2/options');
  5. var Utils = require('select2/utils');
  6. var options = new Options({});
  7. test('display uses templateSelection', function (assert) {
  8. var called = false;
  9. var templateOptions = new Options({
  10. templateSelection: function (data) {
  11. called = true;
  12. return data.text;
  13. }
  14. });
  15. var selection = new MultipleSelection(
  16. $('#qunit-fixture .multiple'),
  17. templateOptions
  18. );
  19. var out = selection.display({
  20. text: 'test'
  21. });
  22. assert.ok(called);
  23. assert.equal(out, 'test');
  24. });
  25. test('templateSelection can addClass', function (assert) {
  26. var called = false;
  27. var templateOptions = new Options({
  28. templateSelection: function (data, container) {
  29. called = true;
  30. container.addClass('testclass');
  31. return data.text;
  32. }
  33. });
  34. var selection = new MultipleSelection(
  35. $('#qunit-fixture .multiple'),
  36. templateOptions
  37. );
  38. var $container = selection.selectionContainer();
  39. var out = selection.display({
  40. text: 'test'
  41. }, $container);
  42. assert.ok(called);
  43. assert.equal(out, 'test');
  44. assert.ok($container.hasClass('testclass'));
  45. });
  46. test('empty update clears the selection', function (assert) {
  47. var selection = new MultipleSelection(
  48. $('#qunit-fixture .multiple'),
  49. options
  50. );
  51. var $selection = selection.render();
  52. var $rendered = $selection.find('.select2-selection__rendered');
  53. $rendered.text('testing');
  54. selection.update([]);
  55. assert.equal(
  56. $rendered.text(),
  57. '',
  58. 'There should have been nothing rendered'
  59. );
  60. });
  61. test('empty update clears the selection title', function (assert) {
  62. var selection = new MultipleSelection(
  63. $('#qunit-fixture .multiple'),
  64. options
  65. );
  66. var $selection = selection.render();
  67. selection.update([]);
  68. var $rendered = $selection.find('.select2-selection__rendered li');
  69. assert.equal(
  70. $rendered.attr('title'),
  71. undefined,
  72. 'The title should be removed if nothing is rendered'
  73. );
  74. });
  75. test('update sets the title to the data text', function (assert) {
  76. var selection = new MultipleSelection(
  77. $('#qunit-fixture .multiple'),
  78. options
  79. );
  80. var $selection = selection.render();
  81. selection.update([{
  82. text: 'test'
  83. }]);
  84. var $rendered = $selection.find('.select2-selection__rendered li');
  85. assert.equal(
  86. $rendered.attr('title'),
  87. 'test',
  88. 'The title should have been set to the text'
  89. );
  90. });
  91. test('update sets the title to the data title', function (assert) {
  92. var selection = new MultipleSelection(
  93. $('#qunit-fixture .multiple'),
  94. options
  95. );
  96. var $selection = selection.render();
  97. selection.update([{
  98. text: 'test',
  99. title: 'correct'
  100. }]);
  101. var $rendered = $selection.find('.select2-selection__rendered li');
  102. assert.equal(
  103. $rendered.attr('title'),
  104. 'correct',
  105. 'The title should have taken precedence over the text'
  106. );
  107. });
  108. test('update should clear title for placeholder options', function (assert) {
  109. var selection = new MultipleSelection(
  110. $('#qunit-fixture .multiple'),
  111. options
  112. );
  113. var $selection = selection.render();
  114. selection.update([{
  115. id: '',
  116. text: ''
  117. }]);
  118. var $rendered = $selection.find('.select2-selection__rendered li');
  119. assert.equal(
  120. $rendered.attr('title'),
  121. undefined,
  122. 'The title should be removed if a placeholder is rendered'
  123. );
  124. });
  125. test('update should clear title for options without text', function (assert) {
  126. var selection = new MultipleSelection(
  127. $('#qunit-fixture .multiple'),
  128. options
  129. );
  130. var $selection = selection.render();
  131. selection.update([{
  132. id: ''
  133. }]);
  134. var $rendered = $selection.find('.select2-selection__rendered li');
  135. assert.equal(
  136. $rendered.attr('title'),
  137. undefined,
  138. 'The title should be removed if there is no text or title property'
  139. );
  140. });
  141. test('escapeMarkup is being used', function (assert) {
  142. var selection = new MultipleSelection(
  143. $('#qunit-fixture .multiple'),
  144. options
  145. );
  146. var $selection = selection.render();
  147. var $rendered = $selection.find('.select2-selection__rendered');
  148. var unescapedText = '<script>bad("stuff");</script>';
  149. selection.update([{
  150. text: unescapedText
  151. }]);
  152. assert.equal(
  153. $rendered.text().substr(1),
  154. unescapedText,
  155. 'The text should be escaped by default to prevent injection'
  156. );
  157. });
  158. test('clear button respects the disabled state', function (assert) {
  159. var options = new Options({
  160. disabled: true
  161. });
  162. var $select = $('#qunit-fixture .multiple');
  163. var container = new MockContainer();
  164. var $container = $('<div></div>');
  165. var selection = new MultipleSelection(
  166. $select,
  167. options
  168. );
  169. var $selection = selection.render();
  170. $container.append($selection);
  171. selection.bind(container, $container);
  172. // Select an option
  173. selection.update([{
  174. text: 'Test'
  175. }]);
  176. var $rendered = $selection.find('.select2-selection__rendered');
  177. var $pill = $rendered.find('.select2-selection__choice');
  178. assert.equal($pill.length, 1, 'There should only be one selection');
  179. var $remove = $pill.find('.select2-selection__choice__remove');
  180. assert.equal(
  181. $remove.length,
  182. 1,
  183. 'The remove icon is displayed for the selection'
  184. );
  185. // Set up the unselect handler
  186. selection.on('unselect', function (params) {
  187. assert.ok(false, 'The unselect handler should not be triggered');
  188. });
  189. // Trigger the handler for the remove icon
  190. $remove.trigger('click');
  191. });