allowClear-tests.js 4.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219
  1. module('Selection containers - Placeholders - Allow clear');
  2. var Placeholder = require('select2/selection/placeholder');
  3. var AllowClear = require('select2/selection/allowClear');
  4. var SingleSelection = require('select2/selection/single');
  5. var $ = require('jquery');
  6. var Options = require('select2/options');
  7. var Utils = require('select2/utils');
  8. var AllowClearPlaceholder = Utils.Decorate(
  9. Utils.Decorate(SingleSelection, Placeholder),
  10. AllowClear
  11. );
  12. var allowClearOptions = new Options({
  13. placeholder: {
  14. id: 'placeholder',
  15. text: 'This is the placeholder'
  16. },
  17. allowClear: true
  18. });
  19. test('clear is not displayed for single placeholder', function (assert) {
  20. var selection = new AllowClearPlaceholder(
  21. $('#qunit-fixture .single-with-placeholder'),
  22. allowClearOptions
  23. );
  24. var $selection = selection.render();
  25. selection.update([{
  26. id: 'placeholder'
  27. }]);
  28. assert.equal(
  29. $selection.find('.select2-selection__clear').length,
  30. 0,
  31. 'The clear icon should not be displayed'
  32. );
  33. });
  34. test('clear is not displayed for multiple placeholder', function (assert) {
  35. var selection = new AllowClearPlaceholder(
  36. $('#qunit-fixture .single-with-placeholder'),
  37. allowClearOptions
  38. );
  39. var $selection = selection.render();
  40. selection.update([]);
  41. assert.equal(
  42. $selection.find('.select2-selection__clear').length,
  43. 0,
  44. 'The clear icon should not be displayed'
  45. );
  46. });
  47. test('clear is displayed for placeholder', function (assert) {
  48. var selection = new AllowClearPlaceholder(
  49. $('#qunit-fixture .single-with-placeholder'),
  50. allowClearOptions
  51. );
  52. var $selection = selection.render();
  53. selection.update([{
  54. id: 'one',
  55. test: 'one'
  56. }]);
  57. assert.equal(
  58. $selection.find('.select2-selection__clear').length,
  59. 1,
  60. 'The clear icon should be displayed'
  61. );
  62. });
  63. test('clicking clear will set the placeholder value', function (assert) {
  64. var $element = $('#qunit-fixture .single-with-placeholder');
  65. var selection = new AllowClearPlaceholder(
  66. $element,
  67. allowClearOptions
  68. );
  69. var container = new MockContainer();
  70. var $selection = selection.render();
  71. selection.bind(container, $('<div></div'));
  72. $element.val('One');
  73. selection.update([{
  74. id: 'One',
  75. text: 'One'
  76. }]);
  77. var $remove = $selection.find('.select2-selection__clear');
  78. $remove.trigger('mousedown');
  79. assert.equal(
  80. $element.val(),
  81. 'placeholder',
  82. 'The value should have been reset to the placeholder'
  83. );
  84. });
  85. test('clicking clear will trigger the unselect event', function (assert) {
  86. expect(3);
  87. var $element = $('#qunit-fixture .single-with-placeholder');
  88. var selection = new AllowClearPlaceholder(
  89. $element,
  90. allowClearOptions
  91. );
  92. var container = new MockContainer();
  93. var $selection = selection.render();
  94. selection.bind(container, $('<div></div'));
  95. $element.val('One');
  96. selection.update([{
  97. id: 'One',
  98. text: 'One'
  99. }]);
  100. selection.on('unselect', function (ev) {
  101. assert.ok(
  102. 'data' in ev && ev.data,
  103. 'The event should have been triggered with the data property'
  104. );
  105. assert.ok(
  106. $.isPlainObject(ev.data),
  107. 'The data should be an object'
  108. );
  109. assert.equal(
  110. ev.data.id,
  111. 'One',
  112. 'The previous object should be unselected'
  113. );
  114. });
  115. var $remove = $selection.find('.select2-selection__clear');
  116. $remove.trigger('mousedown');
  117. });
  118. test('preventing the unselect event cancels the clearing', function (assert) {
  119. var $element = $('#qunit-fixture .single-with-placeholder');
  120. var selection = new AllowClearPlaceholder(
  121. $element,
  122. allowClearOptions
  123. );
  124. var container = new MockContainer();
  125. var $selection = selection.render();
  126. selection.bind(container, $('<div></div'));
  127. $element.val('One');
  128. selection.update([{
  129. id: 'One',
  130. text: 'One'
  131. }]);
  132. selection.on('unselect', function (ev) {
  133. ev.prevented = true;
  134. });
  135. var $remove = $selection.find('.select2-selection__clear');
  136. $remove.trigger('mousedown');
  137. assert.equal(
  138. $element.val(),
  139. 'One',
  140. 'The placeholder should not have been set'
  141. );
  142. });
  143. test('clear does not work when disabled', function (assert) {
  144. var $element = $('#qunit-fixture .single-with-placeholder');
  145. var selection = new AllowClearPlaceholder(
  146. $element,
  147. allowClearOptions
  148. );
  149. var container = new MockContainer();
  150. var $selection = selection.render();
  151. selection.bind(container, $('<div></div'));
  152. selection.update([{
  153. id: 'One',
  154. text: 'One'
  155. }]);
  156. $element.val('One');
  157. selection.options.set('disabled', true);
  158. var $remove = $selection.find('.select2-selection__clear');
  159. $remove.trigger('mousedown');
  160. assert.equal(
  161. $element.val(),
  162. 'One',
  163. 'The placeholder should not have been set'
  164. );
  165. });