@gitlab/ui 80.13.1 → 80.13.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (275) hide show
  1. package/CHANGELOG.md +7 -0
  2. package/dist/components/experimental/experiment_badge/experiment_badge.js +6 -6
  3. package/package.json +16 -12
  4. package/src/components/experimental/experiment_badge/experiment_badge.vue +12 -11
  5. package/src/components/base/accordion/accordion.spec.js +0 -58
  6. package/src/components/base/accordion/accordion.stories.js +0 -59
  7. package/src/components/base/accordion/accordion_item.spec.js +0 -131
  8. package/src/components/base/accordion/accordion_item.stories.js +0 -57
  9. package/src/components/base/alert/alert.spec.js +0 -229
  10. package/src/components/base/alert/alert.stories.js +0 -166
  11. package/src/components/base/avatar/avatar.spec.js +0 -91
  12. package/src/components/base/avatar/avatar.stories.js +0 -160
  13. package/src/components/base/avatar_labeled/avatar_labeled.spec.js +0 -109
  14. package/src/components/base/avatar_labeled/avatar_labeled.stories.js +0 -187
  15. package/src/components/base/avatar_link/avatar_link.stories.js +0 -86
  16. package/src/components/base/avatars_inline/avatars_inline.spec.js +0 -124
  17. package/src/components/base/avatars_inline/avatars_inline.stories.js +0 -83
  18. package/src/components/base/badge/badge.spec.js +0 -83
  19. package/src/components/base/badge/badge.stories.js +0 -184
  20. package/src/components/base/banner/banner.spec.js +0 -112
  21. package/src/components/base/banner/banner.stories.js +0 -103
  22. package/src/components/base/breadcrumb/breadcrumb.spec.js +0 -240
  23. package/src/components/base/breadcrumb/breadcrumb.stories.js +0 -100
  24. package/src/components/base/breadcrumb/breadcrumb_item.spec.js +0 -45
  25. package/src/components/base/broadcast_message/broadcast_message.spec.js +0 -32
  26. package/src/components/base/broadcast_message/broadcast_message.stories.js +0 -112
  27. package/src/components/base/button/button.spec.js +0 -225
  28. package/src/components/base/button/button.stories.js +0 -529
  29. package/src/components/base/button_group/button_group.stories.js +0 -132
  30. package/src/components/base/card/card.spec.js +0 -139
  31. package/src/components/base/card/card.stories.js +0 -48
  32. package/src/components/base/carousel/carousel.spec.js +0 -24
  33. package/src/components/base/carousel/carousel.stories.js +0 -51
  34. package/src/components/base/collapse/collapse.spec.js +0 -24
  35. package/src/components/base/collapse/collapse.stories.js +0 -42
  36. package/src/components/base/datepicker/datepicker.spec.js +0 -431
  37. package/src/components/base/datepicker/datepicker.stories.js +0 -149
  38. package/src/components/base/daterange_picker/daterange_picker.spec.js +0 -307
  39. package/src/components/base/daterange_picker/daterange_picker.stories.js +0 -145
  40. package/src/components/base/drawer/drawer.spec.js +0 -136
  41. package/src/components/base/drawer/drawer.stories.js +0 -272
  42. package/src/components/base/dropdown/dropdown.spec.js +0 -457
  43. package/src/components/base/dropdown/dropdown.stories.js +0 -574
  44. package/src/components/base/dropdown/dropdown_form.spec.js +0 -9
  45. package/src/components/base/dropdown/dropdown_item.spec.js +0 -67
  46. package/src/components/base/dropdown/dropdown_item.stories.js +0 -113
  47. package/src/components/base/filtered_search/__snapshots__/filtered_search_term.spec.js.snap +0 -31
  48. package/src/components/base/filtered_search/filtered_search.spec.js +0 -908
  49. package/src/components/base/filtered_search/filtered_search.stories.js +0 -678
  50. package/src/components/base/filtered_search/filtered_search_suggestion.spec.js +0 -67
  51. package/src/components/base/filtered_search/filtered_search_suggestion.stories.js +0 -33
  52. package/src/components/base/filtered_search/filtered_search_suggestion_list.spec.js +0 -337
  53. package/src/components/base/filtered_search/filtered_search_suggestion_list.stories.js +0 -53
  54. package/src/components/base/filtered_search/filtered_search_term.spec.js +0 -212
  55. package/src/components/base/filtered_search/filtered_search_term.stories.js +0 -60
  56. package/src/components/base/filtered_search/filtered_search_token.spec.js +0 -461
  57. package/src/components/base/filtered_search/filtered_search_token.stories.js +0 -199
  58. package/src/components/base/filtered_search/filtered_search_token_segment.spec.js +0 -393
  59. package/src/components/base/filtered_search/filtered_search_token_segment.stories.js +0 -110
  60. package/src/components/base/filtered_search/filtered_search_utils.spec.js +0 -82
  61. package/src/components/base/form/form.stories.js +0 -101
  62. package/src/components/base/form/form_checkbox/form_checkbox.stories.js +0 -55
  63. package/src/components/base/form/form_checkbox_tree/form_checkbox_tree.spec.js +0 -265
  64. package/src/components/base/form/form_checkbox_tree/form_checkbox_tree.stories.js +0 -134
  65. package/src/components/base/form/form_combobox/form_combobox.spec.js +0 -301
  66. package/src/components/base/form/form_combobox/form_combobox.stories.js +0 -116
  67. package/src/components/base/form/form_date/form_date.spec.js +0 -85
  68. package/src/components/base/form/form_date/form_date.stories.js +0 -108
  69. package/src/components/base/form/form_fields/form_field_validator.spec.js +0 -51
  70. package/src/components/base/form/form_fields/form_fields.spec.js +0 -531
  71. package/src/components/base/form/form_fields/form_fields.stories.js +0 -150
  72. package/src/components/base/form/form_fields/mappers.spec.js +0 -17
  73. package/src/components/base/form/form_fields/validators.spec.js +0 -56
  74. package/src/components/base/form/form_group/form_group.spec.js +0 -110
  75. package/src/components/base/form/form_group/form_group.stories.js +0 -123
  76. package/src/components/base/form/form_input/form_input.spec.js +0 -130
  77. package/src/components/base/form/form_input/form_input.stories.js +0 -128
  78. package/src/components/base/form/form_input_group/form_input_group.spec.js +0 -121
  79. package/src/components/base/form/form_input_group/form_input_group.stories.js +0 -86
  80. package/src/components/base/form/form_radio/form_radio.spec.js +0 -116
  81. package/src/components/base/form/form_radio/form_radio.stories.js +0 -70
  82. package/src/components/base/form/form_radio_group/form_radio_group.spec.js +0 -86
  83. package/src/components/base/form/form_radio_group/form_radio_group.stories.js +0 -79
  84. package/src/components/base/form/form_select/form_select.spec.js +0 -69
  85. package/src/components/base/form/form_select/form_select.stories.js +0 -156
  86. package/src/components/base/form/form_text/form_text.stories.js +0 -27
  87. package/src/components/base/form/form_textarea/form_textarea.spec.js +0 -242
  88. package/src/components/base/form/form_textarea/form_textarea.stories.js +0 -68
  89. package/src/components/base/form/input_group_text/input_group_text.spec.js +0 -9
  90. package/src/components/base/form/input_group_text/input_group_text.stories.js +0 -30
  91. package/src/components/base/icon/__snapshots__/icon.spec.js.snap +0 -14
  92. package/src/components/base/icon/icon.spec.js +0 -92
  93. package/src/components/base/icon/icon.stories.js +0 -56
  94. package/src/components/base/infinite_scroll/infinite_scroll.spec.js +0 -182
  95. package/src/components/base/infinite_scroll/infinite_scroll.stories.js +0 -94
  96. package/src/components/base/keyset_pagination/keyset_pagination.spec.js +0 -313
  97. package/src/components/base/keyset_pagination/keyset_pagination.stories.js +0 -66
  98. package/src/components/base/label/label.spec.js +0 -257
  99. package/src/components/base/label/label.stories.js +0 -76
  100. package/src/components/base/link/link.spec.js +0 -88
  101. package/src/components/base/link/link.stories.js +0 -64
  102. package/src/components/base/loading_icon/loading_icon.spec.js +0 -109
  103. package/src/components/base/loading_icon/loading_icon.stories.js +0 -60
  104. package/src/components/base/markdown/markdown.spec.js +0 -24
  105. package/src/components/base/markdown/markdown.stories.js +0 -33
  106. package/src/components/base/modal/modal.spec.js +0 -265
  107. package/src/components/base/modal/modal.stories.js +0 -197
  108. package/src/components/base/nav/nav.spec.js +0 -19
  109. package/src/components/base/nav/nav.stories.js +0 -57
  110. package/src/components/base/nav/nav_item.spec.js +0 -16
  111. package/src/components/base/nav/nav_item_dropdown.spec.js +0 -58
  112. package/src/components/base/navbar/navbar.spec.js +0 -21
  113. package/src/components/base/navbar/navbar.stories.js +0 -28
  114. package/src/components/base/new_dropdowns/base_dropdown/base_dropdown.spec.js +0 -566
  115. package/src/components/base/new_dropdowns/disclosure/disclosure_dropdown.spec.js +0 -452
  116. package/src/components/base/new_dropdowns/disclosure/disclosure_dropdown.stories.js +0 -345
  117. package/src/components/base/new_dropdowns/disclosure/disclosure_dropdown_group.spec.js +0 -84
  118. package/src/components/base/new_dropdowns/disclosure/disclosure_dropdown_item.spec.js +0 -200
  119. package/src/components/base/new_dropdowns/disclosure/utils.spec.js +0 -74
  120. package/src/components/base/new_dropdowns/listbox/listbox.spec.js +0 -950
  121. package/src/components/base/new_dropdowns/listbox/listbox.stories.js +0 -840
  122. package/src/components/base/new_dropdowns/listbox/listbox_group.spec.js +0 -61
  123. package/src/components/base/new_dropdowns/listbox/listbox_item.spec.js +0 -129
  124. package/src/components/base/new_dropdowns/listbox/listbox_search_input.spec.js +0 -62
  125. package/src/components/base/new_dropdowns/listbox/utils.spec.js +0 -58
  126. package/src/components/base/paginated_list/__snapshots__/paginated_list.spec.js.snap +0 -922
  127. package/src/components/base/paginated_list/paginated_list.spec.js +0 -212
  128. package/src/components/base/paginated_list/paginated_list.stories.js +0 -207
  129. package/src/components/base/pagination/pagination.spec.js +0 -401
  130. package/src/components/base/pagination/pagination.stories.js +0 -129
  131. package/src/components/base/path/__snapshots__/path.spec.js.snap +0 -586
  132. package/src/components/base/path/path.spec.js +0 -237
  133. package/src/components/base/path/path.stories.js +0 -84
  134. package/src/components/base/popover/popover.spec.js +0 -104
  135. package/src/components/base/popover/popover.stories.js +0 -109
  136. package/src/components/base/progress_bar/progress_bar.stories.js +0 -34
  137. package/src/components/base/search_box_by_click/search_box_by_click.spec.js +0 -209
  138. package/src/components/base/search_box_by_click/search_box_by_click.stories.js +0 -100
  139. package/src/components/base/search_box_by_type/search_box_by_type.spec.js +0 -164
  140. package/src/components/base/search_box_by_type/search_box_by_type.stories.js +0 -63
  141. package/src/components/base/segmented_control/segmented_control.spec.js +0 -135
  142. package/src/components/base/segmented_control/segmented_control.stories.js +0 -59
  143. package/src/components/base/skeleton_loader/skeleton_loader.spec.js +0 -151
  144. package/src/components/base/skeleton_loader/skeleton_loader.stories.js +0 -86
  145. package/src/components/base/sorting/sorting.spec.js +0 -170
  146. package/src/components/base/sorting/sorting.stories.js +0 -98
  147. package/src/components/base/table/table.spec.js +0 -192
  148. package/src/components/base/table/table.stories.js +0 -186
  149. package/src/components/base/table_lite/table_lite.spec.js +0 -40
  150. package/src/components/base/table_lite/table_lite.stories.js +0 -74
  151. package/src/components/base/tabs/tab/tab.spec.js +0 -34
  152. package/src/components/base/tabs/tabs/scrollable_tabs.spec.js +0 -260
  153. package/src/components/base/tabs/tabs/tabs.spec.js +0 -366
  154. package/src/components/base/tabs/tabs/tabs.stories.js +0 -209
  155. package/src/components/base/toast/toast.spec.js +0 -72
  156. package/src/components/base/toast/toast.stories.js +0 -88
  157. package/src/components/base/toggle/toggle.spec.js +0 -168
  158. package/src/components/base/toggle/toggle.stories.js +0 -106
  159. package/src/components/base/token/token.spec.js +0 -48
  160. package/src/components/base/token/token.stories.js +0 -58
  161. package/src/components/base/token_selector/helpers.spec.js +0 -40
  162. package/src/components/base/token_selector/token_container.spec.js +0 -306
  163. package/src/components/base/token_selector/token_selector.spec.js +0 -653
  164. package/src/components/base/token_selector/token_selector.stories.js +0 -114
  165. package/src/components/base/token_selector/token_selector_dropdown.spec.js +0 -347
  166. package/src/components/base/tooltip/tooltip.spec.js +0 -27
  167. package/src/components/base/tooltip/tooltip.stories.js +0 -70
  168. package/src/components/charts/area/area.spec.js +0 -286
  169. package/src/components/charts/area/area.stories.js +0 -208
  170. package/src/components/charts/bar/__snapshots__/bar.spec.js.snap +0 -82
  171. package/src/components/charts/bar/bar.spec.js +0 -92
  172. package/src/components/charts/bar/bar.stories.js +0 -72
  173. package/src/components/charts/chart/chart.spec.js +0 -167
  174. package/src/components/charts/chart/chart.stories.js +0 -111
  175. package/src/components/charts/column/__snapshots__/column_chart.spec.js.snap +0 -323
  176. package/src/components/charts/column/column.stories.js +0 -111
  177. package/src/components/charts/column/column_chart.spec.js +0 -223
  178. package/src/components/charts/discrete_scatter/discrete_scatter.spec.js +0 -173
  179. package/src/components/charts/discrete_scatter/discrete_scatter.stories.js +0 -64
  180. package/src/components/charts/gauge/gauge.spec.js +0 -280
  181. package/src/components/charts/gauge/gauge.stories.js +0 -97
  182. package/src/components/charts/heatmap/heatmap.spec.js +0 -103
  183. package/src/components/charts/heatmap/heatmap.stories.js +0 -78
  184. package/src/components/charts/legend/legend.spec.js +0 -274
  185. package/src/components/charts/legend/legend.stories.js +0 -174
  186. package/src/components/charts/line/line.spec.js +0 -278
  187. package/src/components/charts/line/line.stories.js +0 -238
  188. package/src/components/charts/series_label/series_label.stories.js +0 -78
  189. package/src/components/charts/single_stat/single_stat.spec.js +0 -217
  190. package/src/components/charts/single_stat/single_stat.stories.js +0 -103
  191. package/src/components/charts/sparkline/sparkline.spec.js +0 -220
  192. package/src/components/charts/sparkline/sparkline.stories.js +0 -85
  193. package/src/components/charts/stacked_column/__snapshots__/stacked_column.spec.js.snap +0 -905
  194. package/src/components/charts/stacked_column/stacked_column.spec.js +0 -194
  195. package/src/components/charts/stacked_column/stacked_column.stories.js +0 -130
  196. package/src/components/charts/tooltip/tooltip.spec.js +0 -282
  197. package/src/components/charts/tooltip/tooltip.stories.js +0 -90
  198. package/src/components/experimental/duo/chat/components/duo_chat_conversation/duo_chat_conversation.spec.js +0 -46
  199. package/src/components/experimental/duo/chat/components/duo_chat_conversation/duo_chat_conversation.stories.js +0 -62
  200. package/src/components/experimental/duo/chat/components/duo_chat_loader/duo_chat_loader.spec.js +0 -70
  201. package/src/components/experimental/duo/chat/components/duo_chat_loader/duo_chat_loader.stories.js +0 -31
  202. package/src/components/experimental/duo/chat/components/duo_chat_message/copy_code_element.spec.js +0 -64
  203. package/src/components/experimental/duo/chat/components/duo_chat_message/duo_chat_message.spec.js +0 -534
  204. package/src/components/experimental/duo/chat/components/duo_chat_message/duo_chat_message.stories.js +0 -55
  205. package/src/components/experimental/duo/chat/components/duo_chat_message/utils.spec.js +0 -24
  206. package/src/components/experimental/duo/chat/components/duo_chat_message_sources/duo_chat_message_sources.spec.js +0 -93
  207. package/src/components/experimental/duo/chat/components/duo_chat_message_sources/duo_chat_message_sources.stories.js +0 -32
  208. package/src/components/experimental/duo/chat/components/duo_chat_predefined_prompts/duo_chat_predefined_prompts.spec.js +0 -35
  209. package/src/components/experimental/duo/chat/components/duo_chat_predefined_prompts/duo_chat_predefined_prompts.stories.js +0 -36
  210. package/src/components/experimental/duo/chat/duo_chat.spec.js +0 -828
  211. package/src/components/experimental/duo/chat/duo_chat.stories.js +0 -240
  212. package/src/components/experimental/duo/chat/markdown_renderer.spec.js +0 -55
  213. package/src/components/experimental/duo/user_feedback/user_feedback.spec.js +0 -100
  214. package/src/components/experimental/duo/user_feedback/user_feedback.stories.js +0 -107
  215. package/src/components/experimental/duo/user_feedback/user_feedback_modal.spec.js +0 -134
  216. package/src/components/experimental/experiment_badge/experiment_badge.spec.js +0 -77
  217. package/src/components/experimental/experiment_badge/experiment_badge.stories.js +0 -58
  218. package/src/components/regions/dashboard_skeleton/dashboard_skeleton.stories.js +0 -29
  219. package/src/components/regions/empty_state/empty_state.spec.js +0 -293
  220. package/src/components/regions/empty_state/empty_state.stories.js +0 -160
  221. package/src/components/shared_components/charts/tooltip_default_format.spec.js +0 -69
  222. package/src/components/shared_components/clear_icon_button/__snapshots__/clear_icon_button.spec.js.snap +0 -15
  223. package/src/components/shared_components/clear_icon_button/clear_icon_button.spec.js +0 -23
  224. package/src/components/shared_components/close_button/__snapshots__/close_button.spec.js.snap +0 -12
  225. package/src/components/shared_components/close_button/close_button.spec.js +0 -22
  226. package/src/components/utilities/animated_number/animated_number.spec.js +0 -133
  227. package/src/components/utilities/animated_number/animated_number.stories.js +0 -63
  228. package/src/components/utilities/friendly_wrap/friendly_wrap.spec.js +0 -123
  229. package/src/components/utilities/friendly_wrap/friendly_wrap.stories.js +0 -56
  230. package/src/components/utilities/intersection_observer/intersection_observer.spec.js +0 -116
  231. package/src/components/utilities/intersection_observer/intersection_observer.stories.js +0 -162
  232. package/src/components/utilities/intersperse/intersperse.spec.js +0 -115
  233. package/src/components/utilities/intersperse/intersperse.stories.js +0 -53
  234. package/src/components/utilities/sprintf/sprintf.spec.js +0 -337
  235. package/src/components/utilities/sprintf/sprintf.stories.js +0 -104
  236. package/src/components/utilities/truncate/truncate.spec.js +0 -125
  237. package/src/components/utilities/truncate/truncate.stories.js +0 -50
  238. package/src/components/utilities/truncate_text/truncate_text.spec.js +0 -150
  239. package/src/components/utilities/truncate_text/truncate_text.stories.js +0 -45
  240. package/src/directives/hover_load/hover_load.spec.js +0 -64
  241. package/src/directives/hover_load/hover_load.stories.js +0 -51
  242. package/src/directives/outside/outside.spec.js +0 -338
  243. package/src/directives/outside/outside.stories.js +0 -35
  244. package/src/directives/resize_observer/resize_observer.spec.js +0 -125
  245. package/src/directives/resize_observer/resize_observer.stories.js +0 -76
  246. package/src/directives/safe_html/safe_html.spec.js +0 -149
  247. package/src/directives/safe_html/safe_html.stories.js +0 -60
  248. package/src/directives/safe_link/safe_link.spec.js +0 -135
  249. package/src/directives/safe_link/safe_link.stories.js +0 -39
  250. package/src/internal/color_contrast/color_contrast.spec.js +0 -34
  251. package/src/internal/color_contrast/color_contrast.stories.js +0 -41
  252. package/src/scss/functions.spec.scss +0 -54
  253. package/src/scss/mixins.spec.scss +0 -93
  254. package/src/scss/run_scss_tests.spec.js +0 -26
  255. package/src/scss/typescale/typescale.stories.js +0 -61
  256. package/src/tokens/color.constant.tokens.stories.js +0 -19
  257. package/src/tokens/color.dark.tokens.stories.js +0 -26
  258. package/src/tokens/color.data_viz.dark.tokens.stories.js +0 -19
  259. package/src/tokens/color.data_viz.tokens.stories.js +0 -19
  260. package/src/tokens/color.theme.dark.tokens.stories.js +0 -21
  261. package/src/tokens/color.theme.tokens.stories.js +0 -21
  262. package/src/tokens/color.tokens.stories.js +0 -26
  263. package/src/tokens/color.transparency.tokens.stories.js +0 -14
  264. package/src/tokens/text.dark.tokens.stories.js +0 -18
  265. package/src/tokens/text.tokens.stories.js +0 -17
  266. package/src/tokens/tokens.stories.js +0 -16
  267. package/src/utils/breakpoints.spec.js +0 -26
  268. package/src/utils/charts/config.spec.js +0 -478
  269. package/src/utils/charts/utils.spec.js +0 -106
  270. package/src/utils/datetime_utility.spec.js +0 -98
  271. package/src/utils/is_slot_empty.spec.js +0 -73
  272. package/src/utils/number_utils.spec.js +0 -110
  273. package/src/utils/stories_utils.spec.js +0 -18
  274. package/src/utils/string_utils.spec.js +0 -56
  275. package/src/utils/utils.spec.js +0 -156
@@ -1,67 +0,0 @@
1
- import { shallowMount } from '@vue/test-utils';
2
- import Vue from 'vue';
3
- import GlDropdownItem from '../dropdown/dropdown_item.vue';
4
- import FilteredSearchSuggestion from './filtered_search_suggestion.vue';
5
-
6
- describe('Filtered search suggestion component', () => {
7
- let wrapper;
8
- let listMock;
9
-
10
- const createComponent = (value) => {
11
- wrapper = shallowMount(FilteredSearchSuggestion, {
12
- propsData: { value },
13
- provide: {
14
- filteredSearchSuggestionListInstance: listMock,
15
- },
16
- });
17
- };
18
-
19
- beforeEach(() => {
20
- listMock = Vue.observable({
21
- register: jest.fn(),
22
- unregister: jest.fn(),
23
- $emit: jest.fn(),
24
- activeItem: null,
25
- });
26
- });
27
-
28
- beforeAll(() => {
29
- if (!HTMLElement.prototype.scrollIntoView) {
30
- HTMLElement.prototype.scrollIntoView = jest.fn();
31
- }
32
- });
33
-
34
- afterAll(() => {
35
- if (HTMLElement.prototype.scrollIntoView.mock) {
36
- delete HTMLElement.prototype.scrollIntoView;
37
- }
38
- });
39
-
40
- it('registers in list instance when mounted', () => {
41
- createComponent();
42
- expect(listMock.register).toHaveBeenCalledWith(wrapper.vm);
43
- });
44
-
45
- it('unregisters in list instance when unmounted', () => {
46
- createComponent();
47
- wrapper.destroy();
48
- expect(listMock.unregister).toHaveBeenCalledWith(wrapper.vm);
49
- });
50
-
51
- it('emits suggestion event on list instance when clicked', () => {
52
- const value = 'demo';
53
- createComponent(value);
54
- wrapper.findComponent(GlDropdownItem).trigger('mousedown');
55
- expect(listMock.$emit).toHaveBeenCalledWith('suggestion', value);
56
- });
57
-
58
- it('adds active class to dropdown when active in list', () => {
59
- createComponent();
60
- listMock.activeItem = wrapper.vm;
61
- return wrapper.vm.$nextTick(() => {
62
- expect(wrapper.findComponent(GlDropdownItem).classes()).toContain(
63
- 'gl-filtered-search-suggestion-active'
64
- );
65
- });
66
- });
67
- });
@@ -1,33 +0,0 @@
1
- import GlFilteredSearchSuggestion from './filtered_search_suggestion.vue';
2
- import readme from './filtered_search_suggestion.md';
3
-
4
- const noop = () => {};
5
-
6
- export const Default = () => ({
7
- components: { GlFilteredSearchSuggestion },
8
- provide: {
9
- filteredSearchSuggestionListInstance: {
10
- register: noop,
11
- unregister: noop,
12
- $emit: noop,
13
- activeItem: null,
14
- },
15
- },
16
- template: `
17
- <ul>
18
- <gl-filtered-search-suggestion value="demo">Demo suggestion</gl-filtered-search-suggestion>
19
- </ul>
20
- `,
21
- });
22
-
23
- export default {
24
- title: 'base/filtered-search/suggestion',
25
- component: GlFilteredSearchSuggestion,
26
- parameters: {
27
- docs: {
28
- description: {
29
- component: readme,
30
- },
31
- },
32
- },
33
- };
@@ -1,337 +0,0 @@
1
- import { nextTick } from 'vue';
2
- import { shallowMount, mount } from '@vue/test-utils';
3
- import FilteredSearchSuggestion from './filtered_search_suggestion.vue';
4
- import FilteredSearchSuggestionList from './filtered_search_suggestion_list.vue';
5
-
6
- describe('Filtered search suggestion list component', () => {
7
- let wrapper;
8
-
9
- describe('suggestions API', () => {
10
- const createComponent = ({ termsAsTokens = false } = {}) => {
11
- wrapper = shallowMount(FilteredSearchSuggestionList, {
12
- provide: { suggestionsListClass: () => 'custom-class', termsAsTokens: () => termsAsTokens },
13
- });
14
- };
15
-
16
- it('has expected public methods', () => {
17
- createComponent();
18
- expect(wrapper.vm.register).toBeInstanceOf(Function);
19
- expect(wrapper.vm.unregister).toBeInstanceOf(Function);
20
- expect(wrapper.vm.getValue).toBeInstanceOf(Function);
21
- expect(wrapper.vm.nextItem).toBeInstanceOf(Function);
22
- expect(wrapper.vm.prevItem).toBeInstanceOf(Function);
23
- });
24
-
25
- describe('navigation', () => {
26
- const stubs = [{ value: 'stub1' }, { value: 'stub2' }, { value: 'stub3' }];
27
- beforeEach(() => {
28
- createComponent();
29
- stubs.forEach((s) => {
30
- wrapper.vm.register(s);
31
- });
32
- });
33
-
34
- it('does not select item by default', () => {
35
- expect(wrapper.vm.getValue()).toBe(null);
36
- });
37
-
38
- it('selects first item on nextItem call', async () => {
39
- wrapper.vm.nextItem();
40
- await nextTick();
41
- expect(wrapper.vm.getValue()).toBe(stubs[0].value);
42
- });
43
-
44
- it('deselects first item on prevItem call', async () => {
45
- wrapper.vm.nextItem();
46
- wrapper.vm.prevItem();
47
- await nextTick();
48
- expect(wrapper.vm.getValue()).toBe(null);
49
- });
50
-
51
- it('deselects last item on nextItem call', async () => {
52
- stubs.forEach(() => wrapper.vm.nextItem());
53
- wrapper.vm.nextItem();
54
- await nextTick();
55
- expect(wrapper.vm.getValue()).toBe(null);
56
- });
57
-
58
- it('remove selection if suggestion is unregistered', async () => {
59
- wrapper.vm.nextItem();
60
- await nextTick();
61
- wrapper.vm.unregister(stubs[0]);
62
- await nextTick();
63
- expect(wrapper.vm.getValue()).toBe(null);
64
- });
65
-
66
- it('selects correct suggestion when item (un)registration is late', async () => {
67
- // Initially stub2 is at index 1.
68
- await wrapper.setProps({ initialValue: 'stub2' });
69
- // Remove item at index 0, so stub2 moves to index 0
70
- wrapper.vm.unregister(stubs[0]);
71
- await nextTick();
72
- // stub2 should still be selected
73
- expect(wrapper.vm.getValue()).toBe('stub2');
74
- });
75
- });
76
-
77
- describe('navigation with termsAsTokens', () => {
78
- const stubs = [{ value: 'stub1' }, { value: 'stub2' }, { value: 'stub3' }];
79
- beforeEach(() => {
80
- createComponent({ termsAsTokens: true });
81
- stubs.forEach((s) => {
82
- wrapper.vm.register(s);
83
- });
84
- });
85
-
86
- it('does not select item by default', () => {
87
- expect(wrapper.vm.getValue()).toBe(null);
88
- });
89
-
90
- it('selects first item on nextItem call', async () => {
91
- wrapper.vm.nextItem();
92
- await nextTick();
93
- expect(wrapper.vm.getValue()).toBe(stubs[0].value);
94
- });
95
-
96
- it('wraps to last item on prevItem call', async () => {
97
- wrapper.vm.nextItem();
98
- wrapper.vm.prevItem();
99
- await nextTick();
100
- expect(wrapper.vm.getValue()).toBe(stubs[2].value);
101
- });
102
-
103
- it('wraps to first item on nextItem call', async () => {
104
- stubs.forEach(() => wrapper.vm.nextItem());
105
- wrapper.vm.nextItem();
106
- await nextTick();
107
- expect(wrapper.vm.getValue()).toBe(stubs[0].value);
108
- });
109
-
110
- it('remove selection if suggestion is unregistered', async () => {
111
- wrapper.vm.nextItem();
112
- await nextTick();
113
- wrapper.vm.unregister(stubs[0]);
114
- await nextTick();
115
- expect(wrapper.vm.getValue()).toBe(null);
116
- });
117
-
118
- it('selects correct suggestion when item (un)registration is late', async () => {
119
- // Initially stub2 is at index 1.
120
- await wrapper.setProps({ initialValue: 'stub2' });
121
- // Remove item at index 0, so stub2 moves to index 0
122
- wrapper.vm.unregister(stubs[0]);
123
- await nextTick();
124
- // stub2 should still be selected
125
- expect(wrapper.vm.getValue()).toBe('stub2');
126
- });
127
- });
128
- });
129
-
130
- describe('integration tests', () => {
131
- const list = {
132
- components: {
133
- GlFilteredSearchSuggestion: FilteredSearchSuggestion,
134
- },
135
- template: `
136
- <div>
137
- <gl-filtered-search-suggestion value="One">One</gl-filtered-search-suggestion>
138
- <gl-filtered-search-suggestion value="Two">Two</gl-filtered-search-suggestion>
139
- <gl-filtered-search-suggestion :value="false">Three</gl-filtered-search-suggestion>
140
- </div>
141
- `,
142
- };
143
-
144
- const createComponent = ({ termsAsTokens = false } = {}) => {
145
- wrapper = mount(FilteredSearchSuggestionList, {
146
- provide: { suggestionsListClass: () => 'custom-class', termsAsTokens: () => termsAsTokens },
147
- slots: {
148
- default: list,
149
- },
150
- });
151
- };
152
-
153
- const findActiveSuggestion = () => wrapper.find('.gl-filtered-search-suggestion-active');
154
-
155
- beforeAll(() => {
156
- if (!HTMLElement.prototype.scrollIntoView) {
157
- HTMLElement.prototype.scrollIntoView = jest.fn();
158
- }
159
- });
160
-
161
- afterAll(() => {
162
- if (HTMLElement.prototype.scrollIntoView.mock) {
163
- delete HTMLElement.prototype.scrollIntoView;
164
- }
165
- });
166
-
167
- describe('with termsAsTokens = false', () => {
168
- beforeEach(() => {
169
- createComponent();
170
- });
171
-
172
- it('selects first suggestion', async () => {
173
- wrapper.vm.nextItem();
174
- await nextTick();
175
- expect(wrapper.vm.getValue()).toBe('One');
176
- });
177
-
178
- it('selects second suggestion', async () => {
179
- wrapper.vm.nextItem();
180
- wrapper.vm.nextItem();
181
- await nextTick();
182
- expect(wrapper.vm.getValue()).toBe('Two');
183
- });
184
-
185
- it('deselects first suggestion after list end', async () => {
186
- wrapper.vm.nextItem();
187
- wrapper.vm.nextItem();
188
- wrapper.vm.nextItem();
189
- wrapper.vm.nextItem();
190
- await nextTick();
191
- expect(wrapper.vm.getValue()).toBe(null);
192
- });
193
-
194
- it('deselects first suggestion after list start', async () => {
195
- wrapper.vm.nextItem();
196
- wrapper.vm.prevItem();
197
- await nextTick();
198
- expect(wrapper.vm.getValue()).toBe(null);
199
- });
200
-
201
- it('selects last suggestion in circle when selecting previous item', async () => {
202
- wrapper.vm.nextItem();
203
- wrapper.vm.prevItem();
204
- wrapper.vm.prevItem();
205
- await nextTick();
206
- expect(wrapper.vm.getValue()).toBe(false);
207
- });
208
-
209
- it('selects first suggestion in circle when selecting next item', async () => {
210
- wrapper.vm.nextItem();
211
- wrapper.vm.nextItem();
212
- wrapper.vm.nextItem();
213
- wrapper.vm.nextItem();
214
- wrapper.vm.nextItem();
215
- await nextTick();
216
- expect(wrapper.vm.getValue()).toBe('One');
217
- });
218
-
219
- it('highlights suggestion if initial-value is provided', async () => {
220
- await wrapper.setProps({ initialValue: 'Two' });
221
- expect(findActiveSuggestion().text()).toBe('Two');
222
- });
223
-
224
- it('highlights suggestion if initial-value is provided, regardless of case sensitivity', async () => {
225
- await wrapper.setProps({ initialValue: 'two' });
226
- expect(findActiveSuggestion().text()).toBe('Two');
227
- });
228
-
229
- it('highlights suggestion if initial-value is provided, regardless of falsiness', async () => {
230
- await wrapper.setProps({ initialValue: false });
231
- expect(findActiveSuggestion().text()).toBe('Three');
232
- });
233
-
234
- it('highlights first suggestion if initial-value is provided, deselected then selected', async () => {
235
- await wrapper.setProps({ initialValue: 'One' });
236
- wrapper.vm.prevItem();
237
- wrapper.vm.nextItem();
238
- await nextTick();
239
- expect(findActiveSuggestion().text()).toBe('One');
240
- });
241
-
242
- it('does not highlight anything if initial-value matches nothing', async () => {
243
- await wrapper.setProps({ initialValue: 'missing' });
244
- expect(findActiveSuggestion().exists()).toBe(false);
245
- });
246
-
247
- it('applies the injected suggestion-list-class to the dropdown', () => {
248
- expect(wrapper.classes()).toContain('custom-class');
249
- });
250
- });
251
-
252
- describe('with termsAsTokens = true', () => {
253
- beforeEach(() => {
254
- createComponent({ termsAsTokens: true });
255
- });
256
-
257
- it('selects first suggestion', async () => {
258
- wrapper.vm.nextItem();
259
- await nextTick();
260
- expect(wrapper.vm.getValue()).toBe('One');
261
- });
262
-
263
- it('selects second suggestion', async () => {
264
- wrapper.vm.nextItem();
265
- wrapper.vm.nextItem();
266
- await nextTick();
267
- expect(wrapper.vm.getValue()).toBe('Two');
268
- });
269
-
270
- it('wraps to first suggestion after list end', async () => {
271
- wrapper.vm.nextItem();
272
- wrapper.vm.nextItem();
273
- wrapper.vm.nextItem();
274
- wrapper.vm.nextItem();
275
- await nextTick();
276
- expect(wrapper.vm.getValue()).toBe('One');
277
- });
278
-
279
- it('wraps to last suggestion before list start', async () => {
280
- wrapper.vm.nextItem();
281
- wrapper.vm.prevItem();
282
- await nextTick();
283
- expect(wrapper.vm.getValue()).toBe(false);
284
- });
285
-
286
- it('selects second-to-last suggestion in circle when selecting previous item', async () => {
287
- wrapper.vm.nextItem();
288
- wrapper.vm.prevItem();
289
- wrapper.vm.prevItem();
290
- await nextTick();
291
- expect(wrapper.vm.getValue()).toBe('Two');
292
- });
293
-
294
- it('selects second suggestion in circle when selecting next item', async () => {
295
- wrapper.vm.nextItem();
296
- wrapper.vm.nextItem();
297
- wrapper.vm.nextItem();
298
- wrapper.vm.nextItem();
299
- wrapper.vm.nextItem();
300
- await nextTick();
301
- expect(wrapper.vm.getValue()).toBe('Two');
302
- });
303
-
304
- it('highlights suggestion if initial-value is provided', async () => {
305
- await wrapper.setProps({ initialValue: 'Two' });
306
- expect(findActiveSuggestion().text()).toBe('Two');
307
- });
308
-
309
- it('highlights suggestion if initial-value is provided, regardless of case sensitivity', async () => {
310
- await wrapper.setProps({ initialValue: 'two' });
311
- expect(findActiveSuggestion().text()).toBe('Two');
312
- });
313
-
314
- it('highlights suggestion if initial-value is provided, regardless of falsiness', async () => {
315
- await wrapper.setProps({ initialValue: false });
316
- expect(findActiveSuggestion().text()).toBe('Three');
317
- });
318
-
319
- it('highlights first suggestion if initial-value is provided, deselected then selected', async () => {
320
- await wrapper.setProps({ initialValue: 'One' });
321
- wrapper.vm.prevItem();
322
- wrapper.vm.nextItem();
323
- await nextTick();
324
- expect(findActiveSuggestion().text()).toBe('One');
325
- });
326
-
327
- it('does not highlight anything if initial-value matches nothing', async () => {
328
- await wrapper.setProps({ initialValue: 'missing' });
329
- expect(findActiveSuggestion().exists()).toBe(false);
330
- });
331
-
332
- it('applies the injected suggestion-list-class to the dropdown', () => {
333
- expect(wrapper.classes()).toContain('custom-class');
334
- });
335
- });
336
- });
337
- });
@@ -1,53 +0,0 @@
1
- import { userEvent, within } from '@storybook/test';
2
- import GlFilteredSearchSuggestionList from './filtered_search_suggestion_list.vue';
3
- import GlFilteredSearchSuggestion from './filtered_search_suggestion.vue';
4
- import { provide } from './common_story_options';
5
- import readme from './filtered_search_suggestion_list.md';
6
-
7
- export const Default = () => ({
8
- components: { GlFilteredSearchSuggestionList, GlFilteredSearchSuggestion },
9
- data() {
10
- return {
11
- iteration: 1,
12
- items: Array.from({ length: 5 }).map((_, idx) => `item-${idx}-iteration-1`),
13
- };
14
- },
15
- provide,
16
- methods: {
17
- change() {
18
- this.iteration += 1;
19
- this.items = Array.from({ length: 3 + Math.floor(Math.random() * 5) }).map(
20
- (_, idx) => `item-${idx}-iteration-${this.iteration}`
21
- );
22
- },
23
- },
24
- template: `
25
- <div>
26
- <button @click="$refs.suggestions.prevItem()">prev</button>
27
- <button @click="$refs.suggestions.nextItem()">next</button>
28
- <button @click="change">replace suggestions in list</button>
29
- <gl-filtered-search-suggestion-list ref="suggestions" style="float: none; position: relative;">
30
- <gl-filtered-search-suggestion v-for="item in items" :key="item" :value="item">
31
- {{item}}
32
- </gl-filtered-search-suggestion>
33
- </gl-filtered-search-suggestion-list>
34
- </div>
35
- `,
36
- });
37
- Default.play = async ({ canvasElement }) => {
38
- const canvas = within(canvasElement);
39
- const button = canvas.getByRole('button', { name: 'next' });
40
- await userEvent.click(button);
41
- };
42
-
43
- export default {
44
- title: 'base/filtered-search/suggestion-list',
45
- component: GlFilteredSearchSuggestionList,
46
- parameters: {
47
- docs: {
48
- description: {
49
- component: readme,
50
- },
51
- },
52
- },
53
- };
@@ -1,212 +0,0 @@
1
- import { nextTick } from 'vue';
2
- import { shallowMount } from '@vue/test-utils';
3
- import GlToken from '../token/token.vue';
4
- import FilteredSearchTerm from './filtered_search_term.vue';
5
- import { INTENT_ACTIVATE_PREVIOUS, TERM_TOKEN_TYPE } from './filtered_search_utils';
6
-
7
- const availableTokens = [
8
- { type: 'foo', title: 'test1-foo', token: 'stub', icon: 'eye' },
9
- { type: 'bar', title: 'test2-bar', token: 'stub', icon: 'eye' },
10
- { type: 'baz', title: 'test1-baz', token: 'stub', icon: 'eye' },
11
- ];
12
-
13
- const pointerClass = 'gl-cursor-pointer';
14
-
15
- describe('Filtered search term', () => {
16
- let wrapper;
17
-
18
- const searchInputAttributes = { 'data-testid': 'foo-bar', 'data-prop': 'foo-property' };
19
-
20
- const defaultProps = {
21
- availableTokens: [],
22
- cursorPosition: 'end',
23
- };
24
-
25
- const segmentStub = {
26
- name: 'gl-filtered-search-token-segment-stub',
27
- template: '<div><slot v-if="!active" name="view"></slot><slot name="suggestions"></slot></div>',
28
- props: [
29
- 'searchInputAttributes',
30
- 'isLastToken',
31
- 'currentValue',
32
- 'viewOnly',
33
- 'options',
34
- 'active',
35
- ],
36
- };
37
-
38
- const createComponent = ({ termsAsTokens = false, ...props } = {}) => {
39
- wrapper = shallowMount(FilteredSearchTerm, {
40
- propsData: { ...defaultProps, ...props },
41
- provide: {
42
- termsAsTokens: () => termsAsTokens,
43
- },
44
- stubs: {
45
- 'gl-filtered-search-token-segment': segmentStub,
46
- },
47
- });
48
- };
49
-
50
- const findSearchInput = () => wrapper.find('input');
51
- const findTokenSegmentComponent = () => wrapper.findComponent(segmentStub);
52
- const findToken = () => wrapper.findComponent(GlToken);
53
-
54
- it('renders value in inactive mode', () => {
55
- createComponent({ value: { data: 'test-value' } });
56
- expect(wrapper.html()).toMatchSnapshot();
57
- });
58
-
59
- it('renders token in inactive mode with termsAsTokens', () => {
60
- createComponent({ value: { data: 'test value' }, termsAsTokens: true });
61
- expect(findToken().exists()).toBe(true);
62
- expect(findToken().props().viewOnly).toBe(false);
63
- expect(findToken().classes()).toContain(pointerClass);
64
- expect(findToken().text()).toBe('test value');
65
- });
66
-
67
- it('renders nothing with value in active mode (delegates to segment)', () => {
68
- createComponent({ value: { data: 'test-value' }, active: true });
69
- expect(wrapper.text()).not.toContain('test-value');
70
- expect(wrapper.html()).toMatchSnapshot();
71
- });
72
-
73
- it('renders input with placeholder if placeholder prop is provided', () => {
74
- createComponent({ placeholder: 'placeholder-stub' });
75
- expect(findSearchInput().attributes('placeholder')).toBe('placeholder-stub');
76
- });
77
-
78
- it('filters suggestions by input', async () => {
79
- createComponent({ availableTokens, active: true, value: { data: 'test1' } });
80
-
81
- await nextTick();
82
-
83
- expect(findTokenSegmentComponent().props('options')).toHaveLength(2);
84
- });
85
-
86
- it('suggests text search when termsAsTokens=true', async () => {
87
- createComponent({
88
- availableTokens,
89
- active: true,
90
- value: { data: 'foo' },
91
- termsAsTokens: true,
92
- });
93
-
94
- await nextTick();
95
-
96
- expect(findTokenSegmentComponent().props('options')).toEqual([
97
- expect.objectContaining({
98
- value: 'foo',
99
- title: 'test1-foo',
100
- }),
101
- expect.objectContaining({
102
- value: TERM_TOKEN_TYPE,
103
- title: 'Search for this text',
104
- }),
105
- ]);
106
- });
107
-
108
- it.each`
109
- originalEvent | originalPayload | emittedEvent | payload
110
- ${'activate'} | ${undefined} | ${'activate'} | ${undefined}
111
- ${'deactivate'} | ${undefined} | ${'deactivate'} | ${undefined}
112
- ${'split'} | ${'foo'} | ${'split'} | ${'foo'}
113
- ${'submit'} | ${undefined} | ${'submit'} | ${undefined}
114
- ${'previous'} | ${undefined} | ${'previous'} | ${undefined}
115
- ${'next'} | ${undefined} | ${'next'} | ${undefined}
116
- ${'complete'} | ${'foo'} | ${'replace'} | ${{ type: 'foo' }}
117
- ${'complete'} | ${TERM_TOKEN_TYPE} | ${'complete'} | ${undefined}
118
- ${'backspace'} | ${undefined} | ${'destroy'} | ${{ intent: INTENT_ACTIVATE_PREVIOUS }}
119
- `(
120
- 'emits $emittedEvent when token segment emits $originalEvent',
121
- async ({ originalEvent, originalPayload, emittedEvent, payload }) => {
122
- createComponent({ active: true, value: { data: 'something' } });
123
-
124
- findTokenSegmentComponent().vm.$emit(originalEvent, originalPayload);
125
-
126
- await nextTick();
127
-
128
- expect(wrapper.emitted(emittedEvent)).toHaveLength(1);
129
-
130
- if (payload !== undefined) {
131
- expect(wrapper.emitted(emittedEvent)[0][0]).toEqual(payload);
132
- }
133
- }
134
- );
135
-
136
- it('passes `searchInputAttributes`, `isLastToken`, `currentValue` & `viewOnly` props to `GlFilteredSearchTokenSegment`', () => {
137
- const isLastToken = true;
138
- const viewOnly = true;
139
- const currentValue = [
140
- { type: 'filtered-search-term', value: { data: 'something' } },
141
- { type: 'filtered-search-term', value: { data: '' } },
142
- ];
143
-
144
- createComponent({
145
- value: { data: 'something' },
146
- searchInputAttributes,
147
- isLastToken,
148
- currentValue,
149
- viewOnly,
150
- });
151
-
152
- expect(findTokenSegmentComponent().props()).toEqual(
153
- expect.objectContaining({
154
- searchInputAttributes,
155
- isLastToken,
156
- currentValue,
157
- viewOnly,
158
- })
159
- );
160
- });
161
-
162
- it('by default sets `viewOnly` to false on `GlFilteredSearchTokenSegment`', () => {
163
- createComponent();
164
-
165
- expect(findTokenSegmentComponent().props('viewOnly')).toBe(false);
166
- });
167
-
168
- it('sets viewOnly prop and removes pointer class on token when termsAsTokens=true', () => {
169
- createComponent({
170
- value: { data: 'foo' },
171
- viewOnly: true,
172
- termsAsTokens: true,
173
- });
174
-
175
- expect(findToken().props().viewOnly).toBe(true);
176
- expect(findToken().classes()).not.toContain(pointerClass);
177
- });
178
-
179
- it('adds `searchInputAttributes` prop to search term input', () => {
180
- createComponent({
181
- placeholder: 'placeholder-stub',
182
- searchInputAttributes,
183
- });
184
-
185
- expect(findSearchInput().attributes('data-prop')).toBe(searchInputAttributes['data-prop']);
186
- });
187
-
188
- it('activates and deactivates when the input is focused/blurred', async () => {
189
- createComponent({ placeholder: 'placeholder-stub' });
190
- await nextTick();
191
-
192
- expect(wrapper.emitted()).toEqual({});
193
-
194
- await findSearchInput().trigger('focusin');
195
-
196
- expect(wrapper.emitted()).toEqual({ activate: [[]] });
197
-
198
- await findSearchInput().trigger('focusout');
199
-
200
- expect(wrapper.emitted()).toEqual({ activate: [[]], deactivate: [[]] });
201
- });
202
-
203
- describe.each([true, false])('when `viewOnly` is %s', (viewOnly) => {
204
- beforeEach(() => {
205
- createComponent({ viewOnly, searchInputAttributes, placeholder: 'placeholder-stub' });
206
- });
207
-
208
- it(`${viewOnly ? 'adds' : 'does not add'} \`gl-bg-gray-10\` class to search term input`, () => {
209
- expect(findSearchInput().classes('gl-bg-gray-10')).toBe(viewOnly);
210
- });
211
- });
212
- });