1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
|
import fuzzaldrinPlus from 'fuzzaldrin-plus';
import { GlDisclosureDropdownGroup, GlDisclosureDropdownItem, GlLoadingIcon } from '@gitlab/ui';
import { shallowMount } from '@vue/test-utils';
import MockAdapter from 'axios-mock-adapter';
import CommandPaletteItems from '~/super_sidebar/components/global_search/command_palette/command_palette_items.vue';
import {
COMMAND_HANDLE,
USERS_GROUP_TITLE,
USER_HANDLE,
SEARCH_SCOPE,
} from '~/super_sidebar/components/global_search/command_palette/constants';
import {
commandMapper,
linksReducer,
} from '~/super_sidebar/components/global_search/command_palette/utils';
import { getFormattedItem } from '~/super_sidebar/components/global_search/utils';
import axios from '~/lib/utils/axios_utils';
import { HTTP_STATUS_OK } from '~/lib/utils/http_status';
import waitForPromises from 'helpers/wait_for_promises';
import { COMMANDS, LINKS, USERS } from './mock_data';
const links = LINKS.reduce(linksReducer, []);
describe('CommandPaletteItems', () => {
let wrapper;
const autocompletePath = '/autocomplete';
const searchContext = { project: { id: 1 }, group: { id: 2 } };
const createComponent = (props) => {
wrapper = shallowMount(CommandPaletteItems, {
propsData: {
handle: COMMAND_HANDLE,
searchQuery: '',
...props,
},
stubs: {
GlDisclosureDropdownGroup,
GlDisclosureDropdownItem,
},
provide: {
commandPaletteCommands: COMMANDS,
commandPaletteLinks: LINKS,
autocompletePath,
searchContext,
},
});
};
const findItems = () => wrapper.findAllComponents(GlDisclosureDropdownItem);
const findGroups = () => wrapper.findAllComponents(GlDisclosureDropdownGroup);
const findLoader = () => wrapper.findComponent(GlLoadingIcon);
describe('COMMANDS & LINKS', () => {
it('renders all commands initially', () => {
createComponent();
const commandGroup = COMMANDS.map(commandMapper)[0];
expect(findItems()).toHaveLength(commandGroup.items.length);
expect(findGroups().at(0).props('group')).toEqual({
name: commandGroup.name,
items: commandGroup.items,
});
});
describe('with search query', () => {
it('should filter commands and links by the search query', async () => {
jest.spyOn(fuzzaldrinPlus, 'filter');
createComponent({ searchQuery: 'mr' });
const searchQuery = 'todo';
await wrapper.setProps({ searchQuery });
const commandGroup = COMMANDS.map(commandMapper)[0];
expect(fuzzaldrinPlus.filter).toHaveBeenCalledWith(
commandGroup.items,
searchQuery,
expect.objectContaining({ key: 'text' }),
);
expect(fuzzaldrinPlus.filter).toHaveBeenCalledWith(
links,
searchQuery,
expect.objectContaining({ key: 'keywords' }),
);
});
it('should display no results message when no command matched the search query', async () => {
jest.spyOn(fuzzaldrinPlus, 'filter').mockReturnValue([]);
createComponent({ searchQuery: 'mr' });
const searchQuery = 'todo';
await wrapper.setProps({ searchQuery });
expect(wrapper.text()).toBe('No results found');
});
});
});
describe('USERS, ISSUES, PROJECTS', () => {
let mockAxios;
beforeEach(() => {
mockAxios = new MockAdapter(axios);
});
it('should NOT start search by the search query which is less than 3 chars', () => {
jest.spyOn(axios, 'get');
const searchQuery = 'us';
createComponent({ handle: USER_HANDLE, searchQuery });
expect(axios.get).not.toHaveBeenCalled();
expect(findLoader().exists()).toBe(false);
});
it('should start scoped search with 3+ chars and display a loader', () => {
jest.spyOn(axios, 'get');
const searchQuery = 'user';
createComponent({ handle: USER_HANDLE, searchQuery });
expect(axios.get).toHaveBeenCalledWith(
`${autocompletePath}?term=${searchQuery}&project_id=${searchContext.project.id}&filter=search&scope=${SEARCH_SCOPE[USER_HANDLE]}`,
);
expect(findLoader().exists()).toBe(true);
});
it('should render returned items', async () => {
mockAxios.onGet().replyOnce(HTTP_STATUS_OK, USERS);
const searchQuery = 'user';
createComponent({ handle: USER_HANDLE, searchQuery });
await waitForPromises();
expect(findItems()).toHaveLength(USERS.length);
expect(findGroups().at(0).props('group')).toMatchObject({
name: USERS_GROUP_TITLE,
items: USERS.map(getFormattedItem),
});
});
it('should display no results message when no users matched the search query', async () => {
mockAxios.onGet().replyOnce(HTTP_STATUS_OK, []);
const searchQuery = 'user';
createComponent({ handle: USER_HANDLE, searchQuery });
await waitForPromises();
expect(wrapper.text()).toBe('No results found');
});
});
});
|
