@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.
- package/CHANGELOG.md +7 -0
- package/dist/components/experimental/experiment_badge/experiment_badge.js +6 -6
- package/package.json +16 -12
- package/src/components/experimental/experiment_badge/experiment_badge.vue +12 -11
- package/src/components/base/accordion/accordion.spec.js +0 -58
- package/src/components/base/accordion/accordion.stories.js +0 -59
- package/src/components/base/accordion/accordion_item.spec.js +0 -131
- package/src/components/base/accordion/accordion_item.stories.js +0 -57
- package/src/components/base/alert/alert.spec.js +0 -229
- package/src/components/base/alert/alert.stories.js +0 -166
- package/src/components/base/avatar/avatar.spec.js +0 -91
- package/src/components/base/avatar/avatar.stories.js +0 -160
- package/src/components/base/avatar_labeled/avatar_labeled.spec.js +0 -109
- package/src/components/base/avatar_labeled/avatar_labeled.stories.js +0 -187
- package/src/components/base/avatar_link/avatar_link.stories.js +0 -86
- package/src/components/base/avatars_inline/avatars_inline.spec.js +0 -124
- package/src/components/base/avatars_inline/avatars_inline.stories.js +0 -83
- package/src/components/base/badge/badge.spec.js +0 -83
- package/src/components/base/badge/badge.stories.js +0 -184
- package/src/components/base/banner/banner.spec.js +0 -112
- package/src/components/base/banner/banner.stories.js +0 -103
- package/src/components/base/breadcrumb/breadcrumb.spec.js +0 -240
- package/src/components/base/breadcrumb/breadcrumb.stories.js +0 -100
- package/src/components/base/breadcrumb/breadcrumb_item.spec.js +0 -45
- package/src/components/base/broadcast_message/broadcast_message.spec.js +0 -32
- package/src/components/base/broadcast_message/broadcast_message.stories.js +0 -112
- package/src/components/base/button/button.spec.js +0 -225
- package/src/components/base/button/button.stories.js +0 -529
- package/src/components/base/button_group/button_group.stories.js +0 -132
- package/src/components/base/card/card.spec.js +0 -139
- package/src/components/base/card/card.stories.js +0 -48
- package/src/components/base/carousel/carousel.spec.js +0 -24
- package/src/components/base/carousel/carousel.stories.js +0 -51
- package/src/components/base/collapse/collapse.spec.js +0 -24
- package/src/components/base/collapse/collapse.stories.js +0 -42
- package/src/components/base/datepicker/datepicker.spec.js +0 -431
- package/src/components/base/datepicker/datepicker.stories.js +0 -149
- package/src/components/base/daterange_picker/daterange_picker.spec.js +0 -307
- package/src/components/base/daterange_picker/daterange_picker.stories.js +0 -145
- package/src/components/base/drawer/drawer.spec.js +0 -136
- package/src/components/base/drawer/drawer.stories.js +0 -272
- package/src/components/base/dropdown/dropdown.spec.js +0 -457
- package/src/components/base/dropdown/dropdown.stories.js +0 -574
- package/src/components/base/dropdown/dropdown_form.spec.js +0 -9
- package/src/components/base/dropdown/dropdown_item.spec.js +0 -67
- package/src/components/base/dropdown/dropdown_item.stories.js +0 -113
- package/src/components/base/filtered_search/__snapshots__/filtered_search_term.spec.js.snap +0 -31
- package/src/components/base/filtered_search/filtered_search.spec.js +0 -908
- package/src/components/base/filtered_search/filtered_search.stories.js +0 -678
- package/src/components/base/filtered_search/filtered_search_suggestion.spec.js +0 -67
- package/src/components/base/filtered_search/filtered_search_suggestion.stories.js +0 -33
- package/src/components/base/filtered_search/filtered_search_suggestion_list.spec.js +0 -337
- package/src/components/base/filtered_search/filtered_search_suggestion_list.stories.js +0 -53
- package/src/components/base/filtered_search/filtered_search_term.spec.js +0 -212
- package/src/components/base/filtered_search/filtered_search_term.stories.js +0 -60
- package/src/components/base/filtered_search/filtered_search_token.spec.js +0 -461
- package/src/components/base/filtered_search/filtered_search_token.stories.js +0 -199
- package/src/components/base/filtered_search/filtered_search_token_segment.spec.js +0 -393
- package/src/components/base/filtered_search/filtered_search_token_segment.stories.js +0 -110
- package/src/components/base/filtered_search/filtered_search_utils.spec.js +0 -82
- package/src/components/base/form/form.stories.js +0 -101
- package/src/components/base/form/form_checkbox/form_checkbox.stories.js +0 -55
- package/src/components/base/form/form_checkbox_tree/form_checkbox_tree.spec.js +0 -265
- package/src/components/base/form/form_checkbox_tree/form_checkbox_tree.stories.js +0 -134
- package/src/components/base/form/form_combobox/form_combobox.spec.js +0 -301
- package/src/components/base/form/form_combobox/form_combobox.stories.js +0 -116
- package/src/components/base/form/form_date/form_date.spec.js +0 -85
- package/src/components/base/form/form_date/form_date.stories.js +0 -108
- package/src/components/base/form/form_fields/form_field_validator.spec.js +0 -51
- package/src/components/base/form/form_fields/form_fields.spec.js +0 -531
- package/src/components/base/form/form_fields/form_fields.stories.js +0 -150
- package/src/components/base/form/form_fields/mappers.spec.js +0 -17
- package/src/components/base/form/form_fields/validators.spec.js +0 -56
- package/src/components/base/form/form_group/form_group.spec.js +0 -110
- package/src/components/base/form/form_group/form_group.stories.js +0 -123
- package/src/components/base/form/form_input/form_input.spec.js +0 -130
- package/src/components/base/form/form_input/form_input.stories.js +0 -128
- package/src/components/base/form/form_input_group/form_input_group.spec.js +0 -121
- package/src/components/base/form/form_input_group/form_input_group.stories.js +0 -86
- package/src/components/base/form/form_radio/form_radio.spec.js +0 -116
- package/src/components/base/form/form_radio/form_radio.stories.js +0 -70
- package/src/components/base/form/form_radio_group/form_radio_group.spec.js +0 -86
- package/src/components/base/form/form_radio_group/form_radio_group.stories.js +0 -79
- package/src/components/base/form/form_select/form_select.spec.js +0 -69
- package/src/components/base/form/form_select/form_select.stories.js +0 -156
- package/src/components/base/form/form_text/form_text.stories.js +0 -27
- package/src/components/base/form/form_textarea/form_textarea.spec.js +0 -242
- package/src/components/base/form/form_textarea/form_textarea.stories.js +0 -68
- package/src/components/base/form/input_group_text/input_group_text.spec.js +0 -9
- package/src/components/base/form/input_group_text/input_group_text.stories.js +0 -30
- package/src/components/base/icon/__snapshots__/icon.spec.js.snap +0 -14
- package/src/components/base/icon/icon.spec.js +0 -92
- package/src/components/base/icon/icon.stories.js +0 -56
- package/src/components/base/infinite_scroll/infinite_scroll.spec.js +0 -182
- package/src/components/base/infinite_scroll/infinite_scroll.stories.js +0 -94
- package/src/components/base/keyset_pagination/keyset_pagination.spec.js +0 -313
- package/src/components/base/keyset_pagination/keyset_pagination.stories.js +0 -66
- package/src/components/base/label/label.spec.js +0 -257
- package/src/components/base/label/label.stories.js +0 -76
- package/src/components/base/link/link.spec.js +0 -88
- package/src/components/base/link/link.stories.js +0 -64
- package/src/components/base/loading_icon/loading_icon.spec.js +0 -109
- package/src/components/base/loading_icon/loading_icon.stories.js +0 -60
- package/src/components/base/markdown/markdown.spec.js +0 -24
- package/src/components/base/markdown/markdown.stories.js +0 -33
- package/src/components/base/modal/modal.spec.js +0 -265
- package/src/components/base/modal/modal.stories.js +0 -197
- package/src/components/base/nav/nav.spec.js +0 -19
- package/src/components/base/nav/nav.stories.js +0 -57
- package/src/components/base/nav/nav_item.spec.js +0 -16
- package/src/components/base/nav/nav_item_dropdown.spec.js +0 -58
- package/src/components/base/navbar/navbar.spec.js +0 -21
- package/src/components/base/navbar/navbar.stories.js +0 -28
- package/src/components/base/new_dropdowns/base_dropdown/base_dropdown.spec.js +0 -566
- package/src/components/base/new_dropdowns/disclosure/disclosure_dropdown.spec.js +0 -452
- package/src/components/base/new_dropdowns/disclosure/disclosure_dropdown.stories.js +0 -345
- package/src/components/base/new_dropdowns/disclosure/disclosure_dropdown_group.spec.js +0 -84
- package/src/components/base/new_dropdowns/disclosure/disclosure_dropdown_item.spec.js +0 -200
- package/src/components/base/new_dropdowns/disclosure/utils.spec.js +0 -74
- package/src/components/base/new_dropdowns/listbox/listbox.spec.js +0 -950
- package/src/components/base/new_dropdowns/listbox/listbox.stories.js +0 -840
- package/src/components/base/new_dropdowns/listbox/listbox_group.spec.js +0 -61
- package/src/components/base/new_dropdowns/listbox/listbox_item.spec.js +0 -129
- package/src/components/base/new_dropdowns/listbox/listbox_search_input.spec.js +0 -62
- package/src/components/base/new_dropdowns/listbox/utils.spec.js +0 -58
- package/src/components/base/paginated_list/__snapshots__/paginated_list.spec.js.snap +0 -922
- package/src/components/base/paginated_list/paginated_list.spec.js +0 -212
- package/src/components/base/paginated_list/paginated_list.stories.js +0 -207
- package/src/components/base/pagination/pagination.spec.js +0 -401
- package/src/components/base/pagination/pagination.stories.js +0 -129
- package/src/components/base/path/__snapshots__/path.spec.js.snap +0 -586
- package/src/components/base/path/path.spec.js +0 -237
- package/src/components/base/path/path.stories.js +0 -84
- package/src/components/base/popover/popover.spec.js +0 -104
- package/src/components/base/popover/popover.stories.js +0 -109
- package/src/components/base/progress_bar/progress_bar.stories.js +0 -34
- package/src/components/base/search_box_by_click/search_box_by_click.spec.js +0 -209
- package/src/components/base/search_box_by_click/search_box_by_click.stories.js +0 -100
- package/src/components/base/search_box_by_type/search_box_by_type.spec.js +0 -164
- package/src/components/base/search_box_by_type/search_box_by_type.stories.js +0 -63
- package/src/components/base/segmented_control/segmented_control.spec.js +0 -135
- package/src/components/base/segmented_control/segmented_control.stories.js +0 -59
- package/src/components/base/skeleton_loader/skeleton_loader.spec.js +0 -151
- package/src/components/base/skeleton_loader/skeleton_loader.stories.js +0 -86
- package/src/components/base/sorting/sorting.spec.js +0 -170
- package/src/components/base/sorting/sorting.stories.js +0 -98
- package/src/components/base/table/table.spec.js +0 -192
- package/src/components/base/table/table.stories.js +0 -186
- package/src/components/base/table_lite/table_lite.spec.js +0 -40
- package/src/components/base/table_lite/table_lite.stories.js +0 -74
- package/src/components/base/tabs/tab/tab.spec.js +0 -34
- package/src/components/base/tabs/tabs/scrollable_tabs.spec.js +0 -260
- package/src/components/base/tabs/tabs/tabs.spec.js +0 -366
- package/src/components/base/tabs/tabs/tabs.stories.js +0 -209
- package/src/components/base/toast/toast.spec.js +0 -72
- package/src/components/base/toast/toast.stories.js +0 -88
- package/src/components/base/toggle/toggle.spec.js +0 -168
- package/src/components/base/toggle/toggle.stories.js +0 -106
- package/src/components/base/token/token.spec.js +0 -48
- package/src/components/base/token/token.stories.js +0 -58
- package/src/components/base/token_selector/helpers.spec.js +0 -40
- package/src/components/base/token_selector/token_container.spec.js +0 -306
- package/src/components/base/token_selector/token_selector.spec.js +0 -653
- package/src/components/base/token_selector/token_selector.stories.js +0 -114
- package/src/components/base/token_selector/token_selector_dropdown.spec.js +0 -347
- package/src/components/base/tooltip/tooltip.spec.js +0 -27
- package/src/components/base/tooltip/tooltip.stories.js +0 -70
- package/src/components/charts/area/area.spec.js +0 -286
- package/src/components/charts/area/area.stories.js +0 -208
- package/src/components/charts/bar/__snapshots__/bar.spec.js.snap +0 -82
- package/src/components/charts/bar/bar.spec.js +0 -92
- package/src/components/charts/bar/bar.stories.js +0 -72
- package/src/components/charts/chart/chart.spec.js +0 -167
- package/src/components/charts/chart/chart.stories.js +0 -111
- package/src/components/charts/column/__snapshots__/column_chart.spec.js.snap +0 -323
- package/src/components/charts/column/column.stories.js +0 -111
- package/src/components/charts/column/column_chart.spec.js +0 -223
- package/src/components/charts/discrete_scatter/discrete_scatter.spec.js +0 -173
- package/src/components/charts/discrete_scatter/discrete_scatter.stories.js +0 -64
- package/src/components/charts/gauge/gauge.spec.js +0 -280
- package/src/components/charts/gauge/gauge.stories.js +0 -97
- package/src/components/charts/heatmap/heatmap.spec.js +0 -103
- package/src/components/charts/heatmap/heatmap.stories.js +0 -78
- package/src/components/charts/legend/legend.spec.js +0 -274
- package/src/components/charts/legend/legend.stories.js +0 -174
- package/src/components/charts/line/line.spec.js +0 -278
- package/src/components/charts/line/line.stories.js +0 -238
- package/src/components/charts/series_label/series_label.stories.js +0 -78
- package/src/components/charts/single_stat/single_stat.spec.js +0 -217
- package/src/components/charts/single_stat/single_stat.stories.js +0 -103
- package/src/components/charts/sparkline/sparkline.spec.js +0 -220
- package/src/components/charts/sparkline/sparkline.stories.js +0 -85
- package/src/components/charts/stacked_column/__snapshots__/stacked_column.spec.js.snap +0 -905
- package/src/components/charts/stacked_column/stacked_column.spec.js +0 -194
- package/src/components/charts/stacked_column/stacked_column.stories.js +0 -130
- package/src/components/charts/tooltip/tooltip.spec.js +0 -282
- package/src/components/charts/tooltip/tooltip.stories.js +0 -90
- package/src/components/experimental/duo/chat/components/duo_chat_conversation/duo_chat_conversation.spec.js +0 -46
- package/src/components/experimental/duo/chat/components/duo_chat_conversation/duo_chat_conversation.stories.js +0 -62
- package/src/components/experimental/duo/chat/components/duo_chat_loader/duo_chat_loader.spec.js +0 -70
- package/src/components/experimental/duo/chat/components/duo_chat_loader/duo_chat_loader.stories.js +0 -31
- package/src/components/experimental/duo/chat/components/duo_chat_message/copy_code_element.spec.js +0 -64
- package/src/components/experimental/duo/chat/components/duo_chat_message/duo_chat_message.spec.js +0 -534
- package/src/components/experimental/duo/chat/components/duo_chat_message/duo_chat_message.stories.js +0 -55
- package/src/components/experimental/duo/chat/components/duo_chat_message/utils.spec.js +0 -24
- package/src/components/experimental/duo/chat/components/duo_chat_message_sources/duo_chat_message_sources.spec.js +0 -93
- package/src/components/experimental/duo/chat/components/duo_chat_message_sources/duo_chat_message_sources.stories.js +0 -32
- package/src/components/experimental/duo/chat/components/duo_chat_predefined_prompts/duo_chat_predefined_prompts.spec.js +0 -35
- package/src/components/experimental/duo/chat/components/duo_chat_predefined_prompts/duo_chat_predefined_prompts.stories.js +0 -36
- package/src/components/experimental/duo/chat/duo_chat.spec.js +0 -828
- package/src/components/experimental/duo/chat/duo_chat.stories.js +0 -240
- package/src/components/experimental/duo/chat/markdown_renderer.spec.js +0 -55
- package/src/components/experimental/duo/user_feedback/user_feedback.spec.js +0 -100
- package/src/components/experimental/duo/user_feedback/user_feedback.stories.js +0 -107
- package/src/components/experimental/duo/user_feedback/user_feedback_modal.spec.js +0 -134
- package/src/components/experimental/experiment_badge/experiment_badge.spec.js +0 -77
- package/src/components/experimental/experiment_badge/experiment_badge.stories.js +0 -58
- package/src/components/regions/dashboard_skeleton/dashboard_skeleton.stories.js +0 -29
- package/src/components/regions/empty_state/empty_state.spec.js +0 -293
- package/src/components/regions/empty_state/empty_state.stories.js +0 -160
- package/src/components/shared_components/charts/tooltip_default_format.spec.js +0 -69
- package/src/components/shared_components/clear_icon_button/__snapshots__/clear_icon_button.spec.js.snap +0 -15
- package/src/components/shared_components/clear_icon_button/clear_icon_button.spec.js +0 -23
- package/src/components/shared_components/close_button/__snapshots__/close_button.spec.js.snap +0 -12
- package/src/components/shared_components/close_button/close_button.spec.js +0 -22
- package/src/components/utilities/animated_number/animated_number.spec.js +0 -133
- package/src/components/utilities/animated_number/animated_number.stories.js +0 -63
- package/src/components/utilities/friendly_wrap/friendly_wrap.spec.js +0 -123
- package/src/components/utilities/friendly_wrap/friendly_wrap.stories.js +0 -56
- package/src/components/utilities/intersection_observer/intersection_observer.spec.js +0 -116
- package/src/components/utilities/intersection_observer/intersection_observer.stories.js +0 -162
- package/src/components/utilities/intersperse/intersperse.spec.js +0 -115
- package/src/components/utilities/intersperse/intersperse.stories.js +0 -53
- package/src/components/utilities/sprintf/sprintf.spec.js +0 -337
- package/src/components/utilities/sprintf/sprintf.stories.js +0 -104
- package/src/components/utilities/truncate/truncate.spec.js +0 -125
- package/src/components/utilities/truncate/truncate.stories.js +0 -50
- package/src/components/utilities/truncate_text/truncate_text.spec.js +0 -150
- package/src/components/utilities/truncate_text/truncate_text.stories.js +0 -45
- package/src/directives/hover_load/hover_load.spec.js +0 -64
- package/src/directives/hover_load/hover_load.stories.js +0 -51
- package/src/directives/outside/outside.spec.js +0 -338
- package/src/directives/outside/outside.stories.js +0 -35
- package/src/directives/resize_observer/resize_observer.spec.js +0 -125
- package/src/directives/resize_observer/resize_observer.stories.js +0 -76
- package/src/directives/safe_html/safe_html.spec.js +0 -149
- package/src/directives/safe_html/safe_html.stories.js +0 -60
- package/src/directives/safe_link/safe_link.spec.js +0 -135
- package/src/directives/safe_link/safe_link.stories.js +0 -39
- package/src/internal/color_contrast/color_contrast.spec.js +0 -34
- package/src/internal/color_contrast/color_contrast.stories.js +0 -41
- package/src/scss/functions.spec.scss +0 -54
- package/src/scss/mixins.spec.scss +0 -93
- package/src/scss/run_scss_tests.spec.js +0 -26
- package/src/scss/typescale/typescale.stories.js +0 -61
- package/src/tokens/color.constant.tokens.stories.js +0 -19
- package/src/tokens/color.dark.tokens.stories.js +0 -26
- package/src/tokens/color.data_viz.dark.tokens.stories.js +0 -19
- package/src/tokens/color.data_viz.tokens.stories.js +0 -19
- package/src/tokens/color.theme.dark.tokens.stories.js +0 -21
- package/src/tokens/color.theme.tokens.stories.js +0 -21
- package/src/tokens/color.tokens.stories.js +0 -26
- package/src/tokens/color.transparency.tokens.stories.js +0 -14
- package/src/tokens/text.dark.tokens.stories.js +0 -18
- package/src/tokens/text.tokens.stories.js +0 -17
- package/src/tokens/tokens.stories.js +0 -16
- package/src/utils/breakpoints.spec.js +0 -26
- package/src/utils/charts/config.spec.js +0 -478
- package/src/utils/charts/utils.spec.js +0 -106
- package/src/utils/datetime_utility.spec.js +0 -98
- package/src/utils/is_slot_empty.spec.js +0 -73
- package/src/utils/number_utils.spec.js +0 -110
- package/src/utils/stories_utils.spec.js +0 -18
- package/src/utils/string_utils.spec.js +0 -56
- 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
|
-
});
|