@gitlab/ui 80.13.0 → 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 (277) hide show
  1. package/CHANGELOG.md +14 -0
  2. package/dist/components/base/filtered_search/filtered_search.js +3 -2
  3. package/dist/components/experimental/experiment_badge/experiment_badge.js +6 -6
  4. package/package.json +19 -13
  5. package/src/components/base/filtered_search/filtered_search.vue +3 -2
  6. package/src/components/experimental/experiment_badge/experiment_badge.vue +12 -11
  7. package/src/components/base/accordion/accordion.spec.js +0 -58
  8. package/src/components/base/accordion/accordion.stories.js +0 -59
  9. package/src/components/base/accordion/accordion_item.spec.js +0 -131
  10. package/src/components/base/accordion/accordion_item.stories.js +0 -57
  11. package/src/components/base/alert/alert.spec.js +0 -229
  12. package/src/components/base/alert/alert.stories.js +0 -166
  13. package/src/components/base/avatar/avatar.spec.js +0 -91
  14. package/src/components/base/avatar/avatar.stories.js +0 -160
  15. package/src/components/base/avatar_labeled/avatar_labeled.spec.js +0 -109
  16. package/src/components/base/avatar_labeled/avatar_labeled.stories.js +0 -187
  17. package/src/components/base/avatar_link/avatar_link.stories.js +0 -86
  18. package/src/components/base/avatars_inline/avatars_inline.spec.js +0 -124
  19. package/src/components/base/avatars_inline/avatars_inline.stories.js +0 -83
  20. package/src/components/base/badge/badge.spec.js +0 -83
  21. package/src/components/base/badge/badge.stories.js +0 -184
  22. package/src/components/base/banner/banner.spec.js +0 -112
  23. package/src/components/base/banner/banner.stories.js +0 -103
  24. package/src/components/base/breadcrumb/breadcrumb.spec.js +0 -240
  25. package/src/components/base/breadcrumb/breadcrumb.stories.js +0 -100
  26. package/src/components/base/breadcrumb/breadcrumb_item.spec.js +0 -45
  27. package/src/components/base/broadcast_message/broadcast_message.spec.js +0 -32
  28. package/src/components/base/broadcast_message/broadcast_message.stories.js +0 -112
  29. package/src/components/base/button/button.spec.js +0 -225
  30. package/src/components/base/button/button.stories.js +0 -529
  31. package/src/components/base/button_group/button_group.stories.js +0 -132
  32. package/src/components/base/card/card.spec.js +0 -139
  33. package/src/components/base/card/card.stories.js +0 -48
  34. package/src/components/base/carousel/carousel.spec.js +0 -24
  35. package/src/components/base/carousel/carousel.stories.js +0 -51
  36. package/src/components/base/collapse/collapse.spec.js +0 -24
  37. package/src/components/base/collapse/collapse.stories.js +0 -42
  38. package/src/components/base/datepicker/datepicker.spec.js +0 -431
  39. package/src/components/base/datepicker/datepicker.stories.js +0 -141
  40. package/src/components/base/daterange_picker/daterange_picker.spec.js +0 -307
  41. package/src/components/base/daterange_picker/daterange_picker.stories.js +0 -145
  42. package/src/components/base/drawer/drawer.spec.js +0 -136
  43. package/src/components/base/drawer/drawer.stories.js +0 -272
  44. package/src/components/base/dropdown/dropdown.spec.js +0 -457
  45. package/src/components/base/dropdown/dropdown.stories.js +0 -574
  46. package/src/components/base/dropdown/dropdown_form.spec.js +0 -9
  47. package/src/components/base/dropdown/dropdown_item.spec.js +0 -67
  48. package/src/components/base/dropdown/dropdown_item.stories.js +0 -113
  49. package/src/components/base/filtered_search/__snapshots__/filtered_search_term.spec.js.snap +0 -31
  50. package/src/components/base/filtered_search/filtered_search.spec.js +0 -891
  51. package/src/components/base/filtered_search/filtered_search.stories.js +0 -678
  52. package/src/components/base/filtered_search/filtered_search_suggestion.spec.js +0 -67
  53. package/src/components/base/filtered_search/filtered_search_suggestion.stories.js +0 -33
  54. package/src/components/base/filtered_search/filtered_search_suggestion_list.spec.js +0 -337
  55. package/src/components/base/filtered_search/filtered_search_suggestion_list.stories.js +0 -53
  56. package/src/components/base/filtered_search/filtered_search_term.spec.js +0 -212
  57. package/src/components/base/filtered_search/filtered_search_term.stories.js +0 -60
  58. package/src/components/base/filtered_search/filtered_search_token.spec.js +0 -461
  59. package/src/components/base/filtered_search/filtered_search_token.stories.js +0 -199
  60. package/src/components/base/filtered_search/filtered_search_token_segment.spec.js +0 -393
  61. package/src/components/base/filtered_search/filtered_search_token_segment.stories.js +0 -110
  62. package/src/components/base/filtered_search/filtered_search_utils.spec.js +0 -82
  63. package/src/components/base/form/form.stories.js +0 -101
  64. package/src/components/base/form/form_checkbox/form_checkbox.stories.js +0 -55
  65. package/src/components/base/form/form_checkbox_tree/form_checkbox_tree.spec.js +0 -265
  66. package/src/components/base/form/form_checkbox_tree/form_checkbox_tree.stories.js +0 -134
  67. package/src/components/base/form/form_combobox/form_combobox.spec.js +0 -301
  68. package/src/components/base/form/form_combobox/form_combobox.stories.js +0 -114
  69. package/src/components/base/form/form_date/form_date.spec.js +0 -85
  70. package/src/components/base/form/form_date/form_date.stories.js +0 -108
  71. package/src/components/base/form/form_fields/form_field_validator.spec.js +0 -51
  72. package/src/components/base/form/form_fields/form_fields.spec.js +0 -531
  73. package/src/components/base/form/form_fields/form_fields.stories.js +0 -150
  74. package/src/components/base/form/form_fields/mappers.spec.js +0 -17
  75. package/src/components/base/form/form_fields/validators.spec.js +0 -56
  76. package/src/components/base/form/form_group/form_group.spec.js +0 -110
  77. package/src/components/base/form/form_group/form_group.stories.js +0 -123
  78. package/src/components/base/form/form_input/form_input.spec.js +0 -130
  79. package/src/components/base/form/form_input/form_input.stories.js +0 -128
  80. package/src/components/base/form/form_input_group/form_input_group.spec.js +0 -121
  81. package/src/components/base/form/form_input_group/form_input_group.stories.js +0 -86
  82. package/src/components/base/form/form_radio/form_radio.spec.js +0 -116
  83. package/src/components/base/form/form_radio/form_radio.stories.js +0 -70
  84. package/src/components/base/form/form_radio_group/form_radio_group.spec.js +0 -86
  85. package/src/components/base/form/form_radio_group/form_radio_group.stories.js +0 -79
  86. package/src/components/base/form/form_select/form_select.spec.js +0 -69
  87. package/src/components/base/form/form_select/form_select.stories.js +0 -156
  88. package/src/components/base/form/form_text/form_text.stories.js +0 -27
  89. package/src/components/base/form/form_textarea/form_textarea.spec.js +0 -242
  90. package/src/components/base/form/form_textarea/form_textarea.stories.js +0 -68
  91. package/src/components/base/form/input_group_text/input_group_text.spec.js +0 -9
  92. package/src/components/base/form/input_group_text/input_group_text.stories.js +0 -30
  93. package/src/components/base/icon/__snapshots__/icon.spec.js.snap +0 -14
  94. package/src/components/base/icon/icon.spec.js +0 -92
  95. package/src/components/base/icon/icon.stories.js +0 -56
  96. package/src/components/base/infinite_scroll/infinite_scroll.spec.js +0 -182
  97. package/src/components/base/infinite_scroll/infinite_scroll.stories.js +0 -94
  98. package/src/components/base/keyset_pagination/keyset_pagination.spec.js +0 -313
  99. package/src/components/base/keyset_pagination/keyset_pagination.stories.js +0 -66
  100. package/src/components/base/label/label.spec.js +0 -257
  101. package/src/components/base/label/label.stories.js +0 -76
  102. package/src/components/base/link/link.spec.js +0 -88
  103. package/src/components/base/link/link.stories.js +0 -64
  104. package/src/components/base/loading_icon/loading_icon.spec.js +0 -109
  105. package/src/components/base/loading_icon/loading_icon.stories.js +0 -60
  106. package/src/components/base/markdown/markdown.spec.js +0 -24
  107. package/src/components/base/markdown/markdown.stories.js +0 -33
  108. package/src/components/base/modal/modal.spec.js +0 -265
  109. package/src/components/base/modal/modal.stories.js +0 -159
  110. package/src/components/base/nav/nav.spec.js +0 -19
  111. package/src/components/base/nav/nav.stories.js +0 -57
  112. package/src/components/base/nav/nav_item.spec.js +0 -16
  113. package/src/components/base/nav/nav_item_dropdown.spec.js +0 -58
  114. package/src/components/base/navbar/navbar.spec.js +0 -21
  115. package/src/components/base/navbar/navbar.stories.js +0 -28
  116. package/src/components/base/new_dropdowns/base_dropdown/base_dropdown.spec.js +0 -566
  117. package/src/components/base/new_dropdowns/disclosure/disclosure_dropdown.spec.js +0 -452
  118. package/src/components/base/new_dropdowns/disclosure/disclosure_dropdown.stories.js +0 -345
  119. package/src/components/base/new_dropdowns/disclosure/disclosure_dropdown_group.spec.js +0 -84
  120. package/src/components/base/new_dropdowns/disclosure/disclosure_dropdown_item.spec.js +0 -200
  121. package/src/components/base/new_dropdowns/disclosure/utils.spec.js +0 -74
  122. package/src/components/base/new_dropdowns/listbox/listbox.spec.js +0 -950
  123. package/src/components/base/new_dropdowns/listbox/listbox.stories.js +0 -840
  124. package/src/components/base/new_dropdowns/listbox/listbox_group.spec.js +0 -61
  125. package/src/components/base/new_dropdowns/listbox/listbox_item.spec.js +0 -129
  126. package/src/components/base/new_dropdowns/listbox/listbox_search_input.spec.js +0 -62
  127. package/src/components/base/new_dropdowns/listbox/utils.spec.js +0 -58
  128. package/src/components/base/paginated_list/__snapshots__/paginated_list.spec.js.snap +0 -922
  129. package/src/components/base/paginated_list/paginated_list.spec.js +0 -212
  130. package/src/components/base/paginated_list/paginated_list.stories.js +0 -207
  131. package/src/components/base/pagination/pagination.spec.js +0 -401
  132. package/src/components/base/pagination/pagination.stories.js +0 -129
  133. package/src/components/base/path/__snapshots__/path.spec.js.snap +0 -586
  134. package/src/components/base/path/path.spec.js +0 -237
  135. package/src/components/base/path/path.stories.js +0 -84
  136. package/src/components/base/popover/popover.spec.js +0 -104
  137. package/src/components/base/popover/popover.stories.js +0 -109
  138. package/src/components/base/progress_bar/progress_bar.stories.js +0 -34
  139. package/src/components/base/search_box_by_click/search_box_by_click.spec.js +0 -209
  140. package/src/components/base/search_box_by_click/search_box_by_click.stories.js +0 -100
  141. package/src/components/base/search_box_by_type/search_box_by_type.spec.js +0 -164
  142. package/src/components/base/search_box_by_type/search_box_by_type.stories.js +0 -63
  143. package/src/components/base/segmented_control/segmented_control.spec.js +0 -135
  144. package/src/components/base/segmented_control/segmented_control.stories.js +0 -59
  145. package/src/components/base/skeleton_loader/skeleton_loader.spec.js +0 -151
  146. package/src/components/base/skeleton_loader/skeleton_loader.stories.js +0 -86
  147. package/src/components/base/sorting/sorting.spec.js +0 -170
  148. package/src/components/base/sorting/sorting.stories.js +0 -98
  149. package/src/components/base/table/table.spec.js +0 -192
  150. package/src/components/base/table/table.stories.js +0 -186
  151. package/src/components/base/table_lite/table_lite.spec.js +0 -40
  152. package/src/components/base/table_lite/table_lite.stories.js +0 -74
  153. package/src/components/base/tabs/tab/tab.spec.js +0 -34
  154. package/src/components/base/tabs/tabs/scrollable_tabs.spec.js +0 -260
  155. package/src/components/base/tabs/tabs/tabs.spec.js +0 -366
  156. package/src/components/base/tabs/tabs/tabs.stories.js +0 -209
  157. package/src/components/base/toast/toast.spec.js +0 -72
  158. package/src/components/base/toast/toast.stories.js +0 -87
  159. package/src/components/base/toggle/toggle.spec.js +0 -168
  160. package/src/components/base/toggle/toggle.stories.js +0 -106
  161. package/src/components/base/token/token.spec.js +0 -48
  162. package/src/components/base/token/token.stories.js +0 -58
  163. package/src/components/base/token_selector/helpers.spec.js +0 -40
  164. package/src/components/base/token_selector/token_container.spec.js +0 -306
  165. package/src/components/base/token_selector/token_selector.spec.js +0 -653
  166. package/src/components/base/token_selector/token_selector.stories.js +0 -114
  167. package/src/components/base/token_selector/token_selector_dropdown.spec.js +0 -347
  168. package/src/components/base/tooltip/tooltip.spec.js +0 -27
  169. package/src/components/base/tooltip/tooltip.stories.js +0 -69
  170. package/src/components/charts/area/area.spec.js +0 -286
  171. package/src/components/charts/area/area.stories.js +0 -208
  172. package/src/components/charts/bar/__snapshots__/bar.spec.js.snap +0 -82
  173. package/src/components/charts/bar/bar.spec.js +0 -92
  174. package/src/components/charts/bar/bar.stories.js +0 -72
  175. package/src/components/charts/chart/chart.spec.js +0 -167
  176. package/src/components/charts/chart/chart.stories.js +0 -111
  177. package/src/components/charts/column/__snapshots__/column_chart.spec.js.snap +0 -323
  178. package/src/components/charts/column/column.stories.js +0 -111
  179. package/src/components/charts/column/column_chart.spec.js +0 -223
  180. package/src/components/charts/discrete_scatter/discrete_scatter.spec.js +0 -173
  181. package/src/components/charts/discrete_scatter/discrete_scatter.stories.js +0 -64
  182. package/src/components/charts/gauge/gauge.spec.js +0 -280
  183. package/src/components/charts/gauge/gauge.stories.js +0 -97
  184. package/src/components/charts/heatmap/heatmap.spec.js +0 -103
  185. package/src/components/charts/heatmap/heatmap.stories.js +0 -78
  186. package/src/components/charts/legend/legend.spec.js +0 -274
  187. package/src/components/charts/legend/legend.stories.js +0 -174
  188. package/src/components/charts/line/line.spec.js +0 -278
  189. package/src/components/charts/line/line.stories.js +0 -238
  190. package/src/components/charts/series_label/series_label.stories.js +0 -78
  191. package/src/components/charts/single_stat/single_stat.spec.js +0 -217
  192. package/src/components/charts/single_stat/single_stat.stories.js +0 -103
  193. package/src/components/charts/sparkline/sparkline.spec.js +0 -220
  194. package/src/components/charts/sparkline/sparkline.stories.js +0 -85
  195. package/src/components/charts/stacked_column/__snapshots__/stacked_column.spec.js.snap +0 -905
  196. package/src/components/charts/stacked_column/stacked_column.spec.js +0 -194
  197. package/src/components/charts/stacked_column/stacked_column.stories.js +0 -130
  198. package/src/components/charts/tooltip/tooltip.spec.js +0 -282
  199. package/src/components/charts/tooltip/tooltip.stories.js +0 -90
  200. package/src/components/experimental/duo/chat/components/duo_chat_conversation/duo_chat_conversation.spec.js +0 -46
  201. package/src/components/experimental/duo/chat/components/duo_chat_conversation/duo_chat_conversation.stories.js +0 -62
  202. package/src/components/experimental/duo/chat/components/duo_chat_loader/duo_chat_loader.spec.js +0 -70
  203. package/src/components/experimental/duo/chat/components/duo_chat_loader/duo_chat_loader.stories.js +0 -31
  204. package/src/components/experimental/duo/chat/components/duo_chat_message/copy_code_element.spec.js +0 -64
  205. package/src/components/experimental/duo/chat/components/duo_chat_message/duo_chat_message.spec.js +0 -534
  206. package/src/components/experimental/duo/chat/components/duo_chat_message/duo_chat_message.stories.js +0 -55
  207. package/src/components/experimental/duo/chat/components/duo_chat_message/utils.spec.js +0 -24
  208. package/src/components/experimental/duo/chat/components/duo_chat_message_sources/duo_chat_message_sources.spec.js +0 -93
  209. package/src/components/experimental/duo/chat/components/duo_chat_message_sources/duo_chat_message_sources.stories.js +0 -32
  210. package/src/components/experimental/duo/chat/components/duo_chat_predefined_prompts/duo_chat_predefined_prompts.spec.js +0 -35
  211. package/src/components/experimental/duo/chat/components/duo_chat_predefined_prompts/duo_chat_predefined_prompts.stories.js +0 -36
  212. package/src/components/experimental/duo/chat/duo_chat.spec.js +0 -828
  213. package/src/components/experimental/duo/chat/duo_chat.stories.js +0 -240
  214. package/src/components/experimental/duo/chat/markdown_renderer.spec.js +0 -55
  215. package/src/components/experimental/duo/user_feedback/user_feedback.spec.js +0 -100
  216. package/src/components/experimental/duo/user_feedback/user_feedback.stories.js +0 -107
  217. package/src/components/experimental/duo/user_feedback/user_feedback_modal.spec.js +0 -134
  218. package/src/components/experimental/experiment_badge/experiment_badge.spec.js +0 -77
  219. package/src/components/experimental/experiment_badge/experiment_badge.stories.js +0 -58
  220. package/src/components/regions/dashboard_skeleton/dashboard_skeleton.stories.js +0 -29
  221. package/src/components/regions/empty_state/empty_state.spec.js +0 -293
  222. package/src/components/regions/empty_state/empty_state.stories.js +0 -160
  223. package/src/components/shared_components/charts/tooltip_default_format.spec.js +0 -69
  224. package/src/components/shared_components/clear_icon_button/__snapshots__/clear_icon_button.spec.js.snap +0 -15
  225. package/src/components/shared_components/clear_icon_button/clear_icon_button.spec.js +0 -23
  226. package/src/components/shared_components/close_button/__snapshots__/close_button.spec.js.snap +0 -12
  227. package/src/components/shared_components/close_button/close_button.spec.js +0 -22
  228. package/src/components/utilities/animated_number/animated_number.spec.js +0 -133
  229. package/src/components/utilities/animated_number/animated_number.stories.js +0 -63
  230. package/src/components/utilities/friendly_wrap/friendly_wrap.spec.js +0 -123
  231. package/src/components/utilities/friendly_wrap/friendly_wrap.stories.js +0 -56
  232. package/src/components/utilities/intersection_observer/intersection_observer.spec.js +0 -116
  233. package/src/components/utilities/intersection_observer/intersection_observer.stories.js +0 -162
  234. package/src/components/utilities/intersperse/intersperse.spec.js +0 -115
  235. package/src/components/utilities/intersperse/intersperse.stories.js +0 -53
  236. package/src/components/utilities/sprintf/sprintf.spec.js +0 -337
  237. package/src/components/utilities/sprintf/sprintf.stories.js +0 -104
  238. package/src/components/utilities/truncate/truncate.spec.js +0 -125
  239. package/src/components/utilities/truncate/truncate.stories.js +0 -50
  240. package/src/components/utilities/truncate_text/truncate_text.spec.js +0 -150
  241. package/src/components/utilities/truncate_text/truncate_text.stories.js +0 -45
  242. package/src/directives/hover_load/hover_load.spec.js +0 -64
  243. package/src/directives/hover_load/hover_load.stories.js +0 -51
  244. package/src/directives/outside/outside.spec.js +0 -338
  245. package/src/directives/outside/outside.stories.js +0 -35
  246. package/src/directives/resize_observer/resize_observer.spec.js +0 -125
  247. package/src/directives/resize_observer/resize_observer.stories.js +0 -76
  248. package/src/directives/safe_html/safe_html.spec.js +0 -149
  249. package/src/directives/safe_html/safe_html.stories.js +0 -60
  250. package/src/directives/safe_link/safe_link.spec.js +0 -135
  251. package/src/directives/safe_link/safe_link.stories.js +0 -39
  252. package/src/internal/color_contrast/color_contrast.spec.js +0 -34
  253. package/src/internal/color_contrast/color_contrast.stories.js +0 -41
  254. package/src/scss/functions.spec.scss +0 -54
  255. package/src/scss/mixins.spec.scss +0 -93
  256. package/src/scss/run_scss_tests.spec.js +0 -26
  257. package/src/scss/typescale/typescale.stories.js +0 -61
  258. package/src/tokens/color.constant.tokens.stories.js +0 -19
  259. package/src/tokens/color.dark.tokens.stories.js +0 -26
  260. package/src/tokens/color.data_viz.dark.tokens.stories.js +0 -19
  261. package/src/tokens/color.data_viz.tokens.stories.js +0 -19
  262. package/src/tokens/color.theme.dark.tokens.stories.js +0 -21
  263. package/src/tokens/color.theme.tokens.stories.js +0 -21
  264. package/src/tokens/color.tokens.stories.js +0 -26
  265. package/src/tokens/color.transparency.tokens.stories.js +0 -14
  266. package/src/tokens/text.dark.tokens.stories.js +0 -18
  267. package/src/tokens/text.tokens.stories.js +0 -17
  268. package/src/tokens/tokens.stories.js +0 -16
  269. package/src/utils/breakpoints.spec.js +0 -26
  270. package/src/utils/charts/config.spec.js +0 -478
  271. package/src/utils/charts/utils.spec.js +0 -106
  272. package/src/utils/datetime_utility.spec.js +0 -98
  273. package/src/utils/is_slot_empty.spec.js +0 -73
  274. package/src/utils/number_utils.spec.js +0 -110
  275. package/src/utils/stories_utils.spec.js +0 -18
  276. package/src/utils/string_utils.spec.js +0 -56
  277. 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
- });