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.

292 lines
9.6 KiB

1 year ago
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
  1. QUnit.module('repeater', {
  2. setup: function () {
  3. this.$fixture = $('#qunit-fixture');
  4. this.$fixture.html($('#template').html());
  5. this.$repeater = this.$fixture.find('.repeater');
  6. this.$addButton = this.$repeater.find('[data-repeater-create]');
  7. this.$fixture.append($('#template').html());
  8. this.$secondRepeater = this.$fixture.find('.repeater').last();
  9. this.$secondRepeater.find('[data-repeater-list]').data(
  10. 'repeater-list', 'group-b'
  11. );
  12. this.$secondRepeaterAddButton = this.$secondRepeater.find('[data-repeater-create]');
  13. }
  14. });
  15. QUnit.test('add item', function (assert) {
  16. this.$repeater.repeater();
  17. this.$secondRepeater.repeater();
  18. this.$addButton.click();
  19. var $items = this.$repeater.find('[data-repeater-item]');
  20. assert.strictEqual($items.length, 3, 'adds a third item to list');
  21. assert.deepEqual(
  22. getNamedInputValues($items.last()),
  23. generateNameMappedInputValues('a', 2, ''),
  24. 'added items inputs are clear'
  25. );
  26. assert.deepEqual(
  27. getNamedInputValues($items.first()),
  28. generateNameMappedInputValues('a', 0, 'A', {
  29. "group-a[0][multiple-select-input][]": ['A', 'B']
  30. }),
  31. 'does not clear other inputs'
  32. );
  33. assert.strictEqual(
  34. this.$secondRepeater.find('[data-repeater-item]').length,
  35. 2,
  36. 'does not add third item to second repeater'
  37. );
  38. });
  39. QUnit.test('instantiate with no first item', function (assert) {
  40. this.$repeater.find('[data-repeater-item]').last().remove();
  41. this.$repeater.find('[data-repeater-item]').css('display', 'none');
  42. assert.strictEqual(
  43. this.$repeater.find('[data-repeater-item]').css('display'), 'none',
  44. 'display:none css is set'
  45. );
  46. this.$repeater.repeater({ initEmpty: true });
  47. assert.strictEqual(
  48. this.$repeater.find('[data-repeater-item]').length, 0,
  49. 'starts with no items'
  50. );
  51. this.$addButton.click();
  52. assert.strictEqual(
  53. this.$repeater.find('[data-repeater-item]').length, 1,
  54. 'still able to create item'
  55. );
  56. assert.strictEqual(
  57. this.$repeater.find('[data-repeater-item]').css('display'), 'block',
  58. 'display:none css is not set'
  59. );
  60. assert.deepEqual(
  61. getNamedInputValues(this.$repeater.find('[data-repeater-item]')),
  62. generateNameMappedInputValues('a', 0, '', {
  63. "group-a[0][multiple-select-input][]": []
  64. }),
  65. 'maintains template'
  66. );
  67. });
  68. QUnit.test('instantiate group of repeaters with a single repeater() call', function (assert) {
  69. this.$fixture.find('.repeater').repeater();
  70. this.$addButton.click();
  71. var $items = this.$secondRepeater.find('[data-repeater-item]');
  72. assert.strictEqual(
  73. $items.length, 2,
  74. 'does not add a third item to unclicked list'
  75. );
  76. });
  77. QUnit.test('second repeater add item', function (assert) {
  78. this.$repeater.repeater();
  79. this.$secondRepeater.repeater();
  80. this.$secondRepeaterAddButton.click();
  81. var $items = this.$secondRepeater.find('[data-repeater-item]');
  82. assert.strictEqual($items.length, 3, 'adds a third item to list');
  83. assert.deepEqual(
  84. getNamedInputValues($items.last()),
  85. generateNameMappedInputValues('b', 2, ''),
  86. 'added items inputs are clear'
  87. );
  88. assert.deepEqual(
  89. getNamedInputValues($items.first()),
  90. generateNameMappedInputValues('b', 0, 'A', {
  91. "group-b[0][multiple-select-input][]": ['A', 'B']
  92. }),
  93. 'does not clear other inputs'
  94. );
  95. assert.strictEqual(
  96. this.$repeater.find('[data-repeater-item]').length,
  97. 2,
  98. 'does not add third item to first repeater'
  99. );
  100. });
  101. QUnit.test('multiple add buttons', function (assert) {
  102. this.$repeater.append(
  103. '<div data-repeater-create class="second-add">' +
  104. 'Another Add Button' +
  105. '</div>'
  106. );
  107. this.$repeater.repeater();
  108. this.$repeater.find('.second-add').click();
  109. var $items = this.$repeater.find('[data-repeater-item]');
  110. assert.strictEqual($items.length, 3, 'adds a third item to list');
  111. assert.deepEqual(
  112. getNamedInputValues($items.last()),
  113. generateNameMappedInputValues('a', 2, ''),
  114. 'added items inputs are clear'
  115. );
  116. assert.deepEqual(
  117. getNamedInputValues($items.first()),
  118. generateNameMappedInputValues('a', 0, 'A', {
  119. "group-a[0][multiple-select-input][]": ['A', 'B']
  120. }),
  121. 'does not clear other inputs'
  122. );
  123. });
  124. QUnit.test('add item with default values and rewrite names', function (assert) {
  125. this.$repeater.repeater({
  126. defaultValues: {
  127. 'text-input': 'foo',
  128. 'checkbox-input': ['A', 'B'],
  129. "multiple-select-input": ['B']
  130. }
  131. });
  132. this.$addButton.click();
  133. assert.deepEqual(
  134. getNamedInputValues(this.$repeater.find('[data-repeater-item]').last()),
  135. generateNameMappedInputValues('a', 2, '', {
  136. 'group-a[2][text-input]': 'foo',
  137. 'group-a[2][checkbox-input][]' : ['A', 'B'],
  138. "group-a[2][multiple-select-input][]": ['B']
  139. })
  140. );
  141. });
  142. QUnit.test('delete item', function (assert) {
  143. this.$repeater.repeater();
  144. this.$repeater.find('[data-repeater-delete]').first().click();
  145. assert.strictEqual(
  146. this.$repeater.find('[data-repeater-item]').length, 1,
  147. 'only one item remains'
  148. );
  149. assert.deepEqual(
  150. getNamedInputValues(this.$repeater),
  151. generateNameMappedInputValues('a', 0, 'B', {
  152. "group-a[0][multiple-select-input][]": ['A', 'B']
  153. }),
  154. 'second input remains and reindexed as first element'
  155. );
  156. });
  157. QUnit.test('delete item that has been added', function (assert) {
  158. this.$repeater.repeater();
  159. this.$addButton.click();
  160. assert.strictEqual(
  161. this.$repeater.find('[data-repeater-item]').length, 3,
  162. 'item added'
  163. );
  164. this.$repeater.find('[data-repeater-delete]').last().click();
  165. assert.strictEqual(
  166. this.$repeater.find('[data-repeater-item]').length, 2,
  167. 'item deleted'
  168. );
  169. assert.deepEqual(
  170. getNamedInputValues(this.$repeater.find('[data-repeater-item]').last()),
  171. generateNameMappedInputValues('a', 1, 'B', {
  172. "group-a[1][multiple-select-input][]": ['A', 'B']
  173. }),
  174. 'second input remains'
  175. );
  176. });
  177. QUnit.asyncTest('custom show callback', function (assert) {
  178. expect(2);
  179. this.$repeater.repeater({
  180. show: function () {
  181. assert.deepEqual(
  182. getNamedInputValues($(this)),
  183. generateNameMappedInputValues('a', 2, ''),
  184. '"this" set to blank element'
  185. );
  186. assert.strictEqual($(this).is(':hidden'), true, 'element is hidden');
  187. QUnit.start();
  188. }
  189. });
  190. this.$addButton.click();
  191. });
  192. QUnit.asyncTest('custom hide callback', function (assert) {
  193. expect(5);
  194. var $repeater = this.$repeater;
  195. $repeater.repeater({
  196. hide: function (removeItem) {
  197. assert.strictEqual($(this).length, 1, 'has one element');
  198. assert.deepEqual(
  199. getNamedInputValues($(this)),
  200. generateNameMappedInputValues('a', 0, 'A',{
  201. "group-a[0][multiple-select-input][]": ['A', 'B']
  202. }),
  203. '"this" is set to first element'
  204. );
  205. assert.strictEqual(
  206. $(this).is(':hidden'), false,
  207. 'element is not hidden'
  208. );
  209. assert.ok($.contains(document, this), 'element is attached to dom');
  210. removeItem();
  211. assert.ok(!$.contains(document, this), 'element is detached from dom');
  212. QUnit.start();
  213. }
  214. });
  215. this.$repeater.find('[data-repeater-item]').first()
  216. .find('[data-repeater-delete]').click();
  217. });
  218. QUnit.test('isFirstItemUndeletable configuration option', function (assert) {
  219. this.$repeater.repeater({ isFirstItemUndeletable: true });
  220. var $firstDeleteButton = this.$repeater.find('[data-repeater-item]')
  221. .first().find('[data-repeater-delete]');
  222. assert.strictEqual($firstDeleteButton.length, 0, 'first delete button is removed');
  223. });
  224. QUnit.asyncTest('has ready callback option and setIndexes', function (assert) {
  225. expect(3);
  226. var $list = this.$secondRepeater.find('[data-repeater-list]');
  227. this.$secondRepeater.repeater({
  228. ready: function (setIndexes) {
  229. assert.ok(isFunction(setIndexes), 'passed setIndexes function');
  230. var $lastItem = $list.find('[data-repeater-item]').last();
  231. $list.prepend($lastItem.clone());
  232. $lastItem.remove();
  233. setIndexes();
  234. var indeces = $list.find('[name]').map(function () {
  235. return $(this).attr('name').match(/\[([0-9])+\]/)[1];
  236. }).get();
  237. assert.strictEqual(indeces[0], '0');
  238. assert.strictEqual(indeces[10], '1');
  239. QUnit.start();
  240. }
  241. });
  242. });
  243. QUnit.test('repeaterVal', function (assert) {
  244. this.$repeater.repeater();
  245. assert.deepEqual(this.$repeater.repeaterVal(), {
  246. "group-a": [
  247. {
  248. "text-input": "A",
  249. "textarea-input": "A",
  250. "select-input": "A",
  251. "multiple-select-input": ["A", "B"],
  252. "radio-input": "A",
  253. "checkbox-input": ["A"]
  254. },
  255. {
  256. "text-input": "B",
  257. "textarea-input": "B",
  258. "select-input": "B",
  259. "multiple-select-input": ["A", "B"],
  260. "radio-input": "B",
  261. "checkbox-input": ["B"]
  262. }
  263. ]
  264. });
  265. });