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.

array-tests.js 7.8KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386
  1. module('Data adapters - Array');
  2. var ArrayData = require('select2/data/array');
  3. var $ = require('jquery');
  4. var Options = require('select2/options');
  5. var Utils = require('select2/utils');
  6. var UserDefinedType = function (id, text) {
  7. var self = this;
  8. self.id = id;
  9. self.text = text;
  10. return self;
  11. };
  12. var arrayOptions = new Options({
  13. data: [
  14. {
  15. id: 'default',
  16. text: 'Default'
  17. },
  18. {
  19. id: '1',
  20. text: 'One'
  21. },
  22. {
  23. id: '2',
  24. text: '2'
  25. },
  26. new UserDefinedType(1, 'aaaaaa')
  27. ]
  28. });
  29. var extraOptions = new Options ({
  30. data: [
  31. {
  32. id: 'default',
  33. text: 'Default',
  34. extra: true
  35. },
  36. {
  37. id: 'One',
  38. text: 'One',
  39. extra: true
  40. }
  41. ]
  42. });
  43. var nestedOptions = new Options({
  44. data: [
  45. {
  46. text: 'Default',
  47. children: [
  48. {
  49. text: 'Next',
  50. children: [
  51. {
  52. id: 'a',
  53. text: 'Option'
  54. }
  55. ]
  56. }
  57. ]
  58. }
  59. ]
  60. });
  61. test('current gets default for single', function (assert) {
  62. var $select = $('#qunit-fixture .single-empty');
  63. var data = new ArrayData($select, arrayOptions);
  64. var container = new MockContainer();
  65. data.bind(container, $('<div></div>'));
  66. data.current(function (val) {
  67. assert.equal(
  68. val.length,
  69. 1,
  70. 'There should always be a selected item for array data.'
  71. );
  72. var item = val[0];
  73. assert.equal(
  74. item.id,
  75. 'default',
  76. 'The first item should be selected'
  77. );
  78. });
  79. });
  80. test('current gets default for multiple', function (assert) {
  81. var $select = $('#qunit-fixture .multiple');
  82. var data = new ArrayData($select, arrayOptions);
  83. var container = new MockContainer();
  84. data.bind(container, $('<div></div>'));
  85. data.current(function (val) {
  86. assert.equal(
  87. val.length,
  88. 0,
  89. 'There should be no default selection.'
  90. );
  91. });
  92. });
  93. test('current works with existing selections', function (assert) {
  94. var $select = $('#qunit-fixture .multiple');
  95. var data = new ArrayData($select, arrayOptions);
  96. var container = new MockContainer();
  97. data.bind(container, $('<div></div>'));
  98. $select.val(['One']);
  99. data.current(function (val) {
  100. assert.equal(
  101. val.length,
  102. 1,
  103. 'There should only be one existing selection.'
  104. );
  105. var option = val[0];
  106. assert.equal(
  107. option.id,
  108. 'One',
  109. 'The id should be equal to the value of the option tag.'
  110. );
  111. assert.equal(
  112. option.text,
  113. 'One',
  114. 'The text should be equal to the text of the option tag.'
  115. );
  116. });
  117. });
  118. test('current works with selected data', function (assert) {
  119. var $select = $('#qunit-fixture .single-empty');
  120. var data = new ArrayData($select, arrayOptions);
  121. var container = new MockContainer();
  122. data.bind(container, $('<div></div>'));
  123. data.select({
  124. id: '2',
  125. text: '2'
  126. });
  127. data.current(function (val) {
  128. assert.equal(
  129. val.length,
  130. 1,
  131. 'There should only be one option selected.'
  132. );
  133. var option = val[0];
  134. assert.equal(
  135. option.id,
  136. '2',
  137. 'The id should match the original id from the array.'
  138. );
  139. assert.equal(
  140. option.text,
  141. '2',
  142. 'The text should match the original text from the array.'
  143. );
  144. });
  145. });
  146. test('select works for single', function (assert) {
  147. var $select = $('#qunit-fixture .single-empty');
  148. var data = new ArrayData($select, arrayOptions);
  149. var container = new MockContainer();
  150. data.bind(container, $('<div></div>'));
  151. assert.equal(
  152. $select.val(),
  153. 'default',
  154. 'There should already be a selection'
  155. );
  156. data.select({
  157. id: '1',
  158. text: 'One'
  159. });
  160. assert.equal(
  161. $select.val(),
  162. '1',
  163. 'The selected value should be the same as the selected id'
  164. );
  165. });
  166. test('multiple sets the value', function (assert) {
  167. var $select = $('#qunit-fixture .multiple');
  168. var data = new ArrayData($select, arrayOptions);
  169. var container = new MockContainer();
  170. data.bind(container, $('<div></div>'));
  171. assert.ok(
  172. $select.val() == null || $select.val().length == 0,
  173. 'nothing should be selected'
  174. );
  175. data.select({
  176. id: 'default',
  177. text: 'Default'
  178. });
  179. assert.deepEqual($select.val(), ['default']);
  180. });
  181. test('multiple adds to the old value', function (assert) {
  182. var $select = $('#qunit-fixture .multiple');
  183. var data = new ArrayData($select, arrayOptions);
  184. var container = new MockContainer();
  185. data.bind(container, $('<div></div>'));
  186. $select.val(['One']);
  187. assert.deepEqual($select.val(), ['One']);
  188. data.select({
  189. id: 'default',
  190. text: 'Default'
  191. });
  192. assert.deepEqual($select.val(), ['One', 'default']);
  193. });
  194. test('option tags are automatically generated', function (assert) {
  195. var $select = $('#qunit-fixture .single-empty');
  196. var data = new ArrayData($select, arrayOptions);
  197. var container = new MockContainer();
  198. data.bind(container, $('<div></div>'));
  199. assert.equal(
  200. $select.find('option').length,
  201. 4,
  202. 'An <option> element should be created for each object'
  203. );
  204. });
  205. test('automatically generated option tags have a result id', function (assert) {
  206. var $select = $('#qunit-fixture .single-empty');
  207. var data = new ArrayData($select, arrayOptions);
  208. var container = new MockContainer();
  209. data.bind(container, $('<div></div>'));
  210. data.select({
  211. id: 'default'
  212. });
  213. assert.ok(
  214. Utils.GetData($select.find(':selected')[0], 'data')._resultId,
  215. '<option> default should have a result ID assigned'
  216. );
  217. });
  218. test('option tags can receive new data', function(assert) {
  219. var $select = $('#qunit-fixture .single');
  220. var data = new ArrayData($select, extraOptions);
  221. var container = new MockContainer();
  222. data.bind(container, $('<div></div>'));
  223. assert.equal(
  224. $select.find('option').length,
  225. 2,
  226. 'Only one more <option> element should be created'
  227. );
  228. data.select({
  229. id: 'default'
  230. });
  231. assert.ok(
  232. Utils.GetData($select.find(':selected')[0], 'data').extra,
  233. '<option> default should have new data'
  234. );
  235. data.select({
  236. id: 'One'
  237. });
  238. assert.ok(
  239. Utils.GetData($select.find(':selected')[0], 'data').extra,
  240. '<option> One should have new data'
  241. );
  242. });
  243. test('optgroup tags can also be generated', function (assert) {
  244. var $select = $('#qunit-fixture .single-empty');
  245. var data = new ArrayData($select, nestedOptions);
  246. var container = new MockContainer();
  247. data.bind(container, $('<div></div>'));
  248. assert.equal(
  249. $select.find('option').length,
  250. 1,
  251. 'An <option> element should be created for the one selectable object'
  252. );
  253. assert.equal(
  254. $select.find('optgroup').length,
  255. 2,
  256. 'An <optgroup> element should be created for the two with children'
  257. );
  258. });
  259. test('optgroup tags have the right properties', function (assert) {
  260. var $select = $('#qunit-fixture .single-empty');
  261. var data = new ArrayData($select, nestedOptions);
  262. var container = new MockContainer();
  263. data.bind(container, $('<div></div>'));
  264. var $group = $select.children('optgroup');
  265. assert.equal(
  266. $group.prop('label'),
  267. 'Default',
  268. 'An `<optgroup>` label should match the text property'
  269. );
  270. assert.equal(
  271. $group.children().length,
  272. 1,
  273. 'The <optgroup> should have one child under it'
  274. );
  275. });
  276. test('existing selections are respected on initialization', function (assert) {
  277. var $select = $(
  278. '<select>' +
  279. '<option>First</option>' +
  280. '<option selected>Second</option>' +
  281. '</select>'
  282. );
  283. var options = new Options({
  284. data: [
  285. {
  286. id: 'Second',
  287. text: 'Second'
  288. },
  289. {
  290. id: 'Third',
  291. text: 'Third'
  292. }
  293. ]
  294. });
  295. assert.equal($select.val(), 'Second');
  296. var data = new ArrayData($select, options);
  297. var container = new MockContainer();
  298. data.bind(container, $('<div></div>'));
  299. assert.equal($select.val(), 'Second');
  300. });