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
|
import { GlDisclosureDropdownGroup, GlDisclosureDropdownItem, GlIcon } from '@gitlab/ui';
import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
import GlobalSearchFrequentItems from '~/super_sidebar/components/global_search/components/frequent_items.vue';
import FrequentItem from '~/super_sidebar/components/global_search/components/frequent_item.vue';
import FrequentItemSkeleton from '~/super_sidebar/components/global_search/components/frequent_item_skeleton.vue';
import { frecentGroupsMock } from 'jest/super_sidebar/mock_data';
describe('FrequentlyVisitedItems', () => {
let wrapper;
const mockProps = {
emptyStateText: 'mock empty state text',
groupName: 'mock group name',
viewAllItemsText: 'View all items',
viewAllItemsIcon: 'question-o',
viewAllItemsPath: '/mock/all_items',
};
const createComponent = (props) => {
wrapper = shallowMountExtended(GlobalSearchFrequentItems, {
propsData: {
...mockProps,
...props,
},
stubs: {
GlDisclosureDropdownGroup,
},
});
};
const findItems = () => wrapper.findAllComponents(GlDisclosureDropdownItem);
const findSkeleton = () => wrapper.findComponent(FrequentItemSkeleton);
const findItemRenderer = (root) => root.findComponent(FrequentItem);
describe('common behavior', () => {
beforeEach(() => {
createComponent({
items: frecentGroupsMock,
});
});
it('renders the group name', () => {
expect(wrapper.text()).toContain(mockProps.groupName);
});
it('renders the view all items link', () => {
const lastItem = findItems().at(-1);
expect(lastItem.props('item')).toMatchObject({
text: mockProps.viewAllItemsText,
href: mockProps.viewAllItemsPath,
});
const icon = lastItem.findComponent(GlIcon);
expect(icon.props('name')).toBe(mockProps.viewAllItemsIcon);
});
});
describe('while items are being fetched', () => {
beforeEach(() => {
createComponent({
loading: true,
});
});
it('shows the loading state', () => {
expect(findSkeleton().exists()).toBe(true);
});
it('does not show the empty state', () => {
expect(wrapper.text()).not.toContain(mockProps.emptyStateText);
});
});
describe('when there are no items', () => {
beforeEach(() => {
createComponent();
});
it('does not show the loading state', () => {
expect(findSkeleton().exists()).toBe(false);
});
it('shows the empty state', () => {
expect(wrapper.text()).toContain(mockProps.emptyStateText);
});
});
describe('when there are items', () => {
beforeEach(() => {
createComponent({
items: frecentGroupsMock,
});
});
it('renders the items', () => {
const items = findItems();
frecentGroupsMock.forEach((item, index) => {
const dropdownItem = items.at(index);
// Check GlDisclosureDropdownItem's item has the right structure
expect(dropdownItem.props('item')).toMatchObject({
text: item.name,
href: item.webUrl,
});
// Check FrequentItem's item has the right structure
expect(findItemRenderer(dropdownItem).props('item')).toMatchObject({
id: item.id,
title: item.name,
subtitle: expect.any(String),
avatar: item.avatarUrl,
});
});
});
it('does not show the loading state', () => {
expect(findSkeleton().exists()).toBe(false);
});
it('does not show the empty state', () => {
expect(wrapper.text()).not.toContain(mockProps.emptyStateText);
});
});
});
|
