select-tests.js 9.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457
  1. module('Data adapters - Select - current');
  2. var SelectData = require('select2/data/select');
  3. var $ = require('jquery');
  4. var Options = require('select2/options');
  5. var selectOptions = new Options({});
  6. test('current gets default for single', function (assert) {
  7. var $select = $('#qunit-fixture .single');
  8. var data = new SelectData($select, selectOptions);
  9. data.current(function (data) {
  10. assert.equal(
  11. data.length,
  12. 1,
  13. 'There should only be one selected option'
  14. );
  15. var option = data[0];
  16. assert.equal(
  17. option.id,
  18. 'One',
  19. 'The value of the option tag should be the id'
  20. );
  21. assert.equal(
  22. option.text,
  23. 'One',
  24. 'The text within the option tag should be the text'
  25. );
  26. });
  27. });
  28. test('current gets default for multiple', function (assert) {
  29. var $select = $('#qunit-fixture .multiple');
  30. var data = new SelectData($select, selectOptions);
  31. data.current(function (data) {
  32. assert.equal(
  33. data.length,
  34. 0,
  35. 'Multiple selects have no default selection.'
  36. );
  37. });
  38. });
  39. test('current gets options with explicit value', function (assert) {
  40. var $select = $('#qunit-fixture .single');
  41. var $option = $('<option value="1">One</option>');
  42. $select.append($option);
  43. var data = new SelectData($select, selectOptions);
  44. $select.val('1');
  45. data.current(function (data) {
  46. assert.equal(
  47. data.length,
  48. 1,
  49. 'There should be one selected option'
  50. );
  51. var option = data[0];
  52. assert.equal(
  53. option.id,
  54. '1',
  55. 'The option value should be the selected id'
  56. );
  57. assert.equal(
  58. option.text,
  59. 'One',
  60. 'The text should match the text for the option tag'
  61. );
  62. });
  63. });
  64. test('current gets options with implicit value', function (assert) {
  65. var $select = $('#qunit-fixture .single');
  66. var data = new SelectData($select, selectOptions);
  67. $select.val('One');
  68. data.current(function (val) {
  69. assert.equal(
  70. val.length,
  71. 1,
  72. 'There should only be one selected value'
  73. );
  74. var option = val[0];
  75. assert.equal(
  76. option.id,
  77. 'One',
  78. 'The id should be the same as the option text'
  79. );
  80. assert.equal(
  81. option.text,
  82. 'One',
  83. 'The text should be the same as the option text'
  84. );
  85. });
  86. });
  87. test('select works for single', function (assert) {
  88. var $select = $('#qunit-fixture .single-with-placeholder');
  89. var data = new SelectData($select, selectOptions);
  90. assert.equal($select.val(), 'placeholder');
  91. data.select({
  92. id: 'One',
  93. text: 'One'
  94. });
  95. assert.equal($select.val(), 'One');
  96. });
  97. test('multiple sets the value', function (assert) {
  98. var $select = $('#qunit-fixture .multiple');
  99. var data = new SelectData($select, selectOptions);
  100. assert.equal($select.val(), null);
  101. data.select({
  102. id: 'Two',
  103. text: 'Two'
  104. });
  105. assert.deepEqual($select.val(), ['Two']);
  106. });
  107. test('multiple adds to the old value', function (assert) {
  108. var $select = $('#qunit-fixture .multiple');
  109. var data = new SelectData($select, selectOptions);
  110. $select.val(['Two']);
  111. assert.deepEqual($select.val(), ['Two']);
  112. data.select({
  113. id: 'One',
  114. text: 'One'
  115. });
  116. assert.deepEqual($select.val(), ['One', 'Two']);
  117. });
  118. test('duplicates - single - same id on select triggers change',
  119. function (assert) {
  120. var $select = $('#qunit-fixture .duplicates');
  121. var data = new SelectData($select, data);
  122. var second = $('#qunit-fixture .duplicates option')[2];
  123. var changeTriggered = false;
  124. assert.equal($select.val(), 'one');
  125. $select.on('change', function () {
  126. changeTriggered = true;
  127. });
  128. data.select({
  129. id: 'one',
  130. text: 'Uno',
  131. element: second
  132. });
  133. assert.equal(
  134. $select.val(),
  135. 'one',
  136. 'The value never changed'
  137. );
  138. assert.ok(
  139. changeTriggered,
  140. 'The change event should be triggered'
  141. );
  142. assert.ok(
  143. second.selected,
  144. 'The second duplicate is selected, not the first'
  145. );
  146. });
  147. test('duplicates - single - different id on select triggers change',
  148. function (assert) {
  149. var $select = $('#qunit-fixture .duplicates');
  150. var data = new SelectData($select, data);
  151. var second = $('#qunit-fixture .duplicates option')[2];
  152. var changeTriggered = false;
  153. $select.val('two');
  154. $select.on('change', function () {
  155. changeTriggered = true;
  156. });
  157. data.select({
  158. id: 'one',
  159. text: 'Uno',
  160. element: second
  161. });
  162. assert.equal(
  163. $select.val(),
  164. 'one',
  165. 'The value changed to the duplicate id'
  166. );
  167. assert.ok(
  168. changeTriggered,
  169. 'The change event should be triggered'
  170. );
  171. assert.ok(
  172. second.selected,
  173. 'The second duplicate is selected, not the first'
  174. );
  175. });
  176. test('duplicates - multiple - same id on select triggers change',
  177. function (assert) {
  178. var $select = $('#qunit-fixture .duplicates-multi');
  179. var data = new SelectData($select, data);
  180. var second = $('#qunit-fixture .duplicates-multi option')[2];
  181. var changeTriggered = false;
  182. $select.val(['one']);
  183. $select.on('change', function () {
  184. changeTriggered = true;
  185. });
  186. data.select({
  187. id: 'one',
  188. text: 'Uno',
  189. element: second
  190. });
  191. assert.deepEqual(
  192. $select.val(),
  193. ['one', 'one'],
  194. 'The value now has duplicates'
  195. );
  196. assert.ok(
  197. changeTriggered,
  198. 'The change event should be triggered'
  199. );
  200. assert.ok(
  201. second.selected,
  202. 'The second duplicate is selected, not the first'
  203. );
  204. });
  205. test('duplicates - multiple - different id on select triggers change',
  206. function (assert) {
  207. var $select = $('#qunit-fixture .duplicates-multi');
  208. var data = new SelectData($select, data);
  209. var second = $('#qunit-fixture .duplicates-multi option')[2];
  210. var changeTriggered = false;
  211. $select.val(['two']);
  212. $select.on('change', function () {
  213. changeTriggered = true;
  214. });
  215. data.select({
  216. id: 'one',
  217. text: 'Uno',
  218. element: second
  219. });
  220. assert.deepEqual(
  221. $select.val(),
  222. ['two', 'one'],
  223. 'The value has the new id'
  224. );
  225. assert.ok(
  226. changeTriggered,
  227. 'The change event should be triggered'
  228. );
  229. assert.ok(
  230. second.selected,
  231. 'The second duplicate is selected, not the first'
  232. );
  233. });
  234. module('Data adapter - Select - query');
  235. test('all options are returned with no term', function (assert) {
  236. var $select = $('#qunit-fixture .single');
  237. var data = new SelectData($select, selectOptions);
  238. data.query({}, function (data) {
  239. assert.equal(
  240. data.results.length,
  241. 1,
  242. 'The number of items returned should be equal to the number of options'
  243. );
  244. });
  245. });
  246. test('the matcher checks the text', function (assert) {
  247. var $select = $('#qunit-fixture .single');
  248. var data = new SelectData($select, selectOptions);
  249. data.query({
  250. term: 'One'
  251. }, function (data) {
  252. assert.equal(
  253. data.results.length,
  254. 1,
  255. 'Only the "One" option should be found'
  256. );
  257. });
  258. });
  259. test('the matcher ignores case', function (assert) {
  260. var $select = $('#qunit-fixture .single');
  261. var data = new SelectData($select, selectOptions);
  262. data.query({
  263. term: 'one'
  264. }, function (data) {
  265. assert.equal(
  266. data.results.length,
  267. 1,
  268. 'The "One" option should still be found'
  269. );
  270. });
  271. });
  272. test('no options may be returned with no matches', function (assert) {
  273. var $select = $('#qunit-fixture .single');
  274. var data = new SelectData($select, selectOptions);
  275. data.query({
  276. term: 'qwerty'
  277. }, function (data) {
  278. assert.equal(
  279. data.results.length,
  280. 0,
  281. 'Only matching items should be returned'
  282. );
  283. });
  284. });
  285. test('optgroup tags are marked with children', function (assert) {
  286. var $select = $('#qunit-fixture .groups');
  287. var data = new SelectData($select, selectOptions);
  288. data.query({}, function (data) {
  289. assert.ok(
  290. 'children' in data.results[0],
  291. 'The optgroup element should have children when queried'
  292. );
  293. });
  294. });
  295. test('empty optgroups are still shown when queried', function (assert) {
  296. var $select = $('#qunit-fixture .groups');
  297. var data = new SelectData($select, selectOptions);
  298. data.query({}, function (data) {
  299. assert.equal(
  300. data.results.length,
  301. 2,
  302. 'The empty optgroup element should still be returned when queried'
  303. );
  304. var item = data.results[1];
  305. assert.equal(
  306. item.text,
  307. 'Empty',
  308. 'The text of the empty optgroup should match the label'
  309. );
  310. assert.equal(
  311. item.children.length,
  312. 0,
  313. 'There should be no children in the empty opgroup'
  314. );
  315. });
  316. });
  317. test('multiple options with the same value are returned', function (assert) {
  318. var $select = $('#qunit-fixture .duplicates');
  319. var data = new SelectData($select, selectOptions);
  320. data.query({}, function (data) {
  321. assert.equal(
  322. data.results.length,
  323. 3,
  324. 'The duplicate option should still be returned when queried'
  325. );
  326. var first = data.results[0];
  327. var duplicate = data.results[2];
  328. assert.equal(
  329. first.id,
  330. duplicate.id,
  331. 'The duplicates should have the same id'
  332. );
  333. assert.notEqual(
  334. first.text,
  335. duplicate.text,
  336. 'The duplicates do not have the same text'
  337. );
  338. });
  339. });
  340. test('data objects use the text of the option', function (assert) {
  341. var $select = $('#qunit-fixture .duplicates');
  342. var data = new SelectData($select, selectOptions);
  343. var $option = $('<option>&amp;</option>');
  344. var item = data.item($option);
  345. assert.equal(item.id, '&');
  346. assert.equal(item.text, '&');
  347. });