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
|
import { shallowMount } from '@vue/test-utils';
import { createMockDirective, getBinding } from 'helpers/vue_mock_directive';
import ResponsiveHome from '~/nav/components/responsive_home.vue';
import TopNavMenuItem from '~/nav/components/top_nav_menu_item.vue';
import TopNavMenuSections from '~/nav/components/top_nav_menu_sections.vue';
import TopNavNewDropdown from '~/nav/components/top_nav_new_dropdown.vue';
import { TEST_NAV_DATA } from '../mock_data';
const TEST_SEARCH_MENU_ITEM = {
id: 'search',
title: 'search',
icon: 'search',
href: '/search',
};
const TEST_NEW_DROPDOWN_VIEW_MODEL = {
title: 'new',
menu_sections: [],
};
describe('~/nav/components/responsive_home.vue', () => {
let wrapper;
let menuItemClickListener;
const createComponent = (props = {}) => {
wrapper = shallowMount(ResponsiveHome, {
propsData: {
navData: TEST_NAV_DATA,
...props,
},
directives: {
GlTooltip: createMockDirective(),
},
listeners: {
'menu-item-click': menuItemClickListener,
},
});
};
const findSearchMenuItem = () => wrapper.findComponent(TopNavMenuItem);
const findNewDropdown = () => wrapper.findComponent(TopNavNewDropdown);
const findMenuSections = () => wrapper.findComponent(TopNavMenuSections);
beforeEach(() => {
menuItemClickListener = jest.fn();
});
afterEach(() => {
wrapper.destroy();
});
describe('default', () => {
beforeEach(() => {
createComponent();
});
it.each`
desc | fn
${'does not show search menu item'} | ${findSearchMenuItem}
${'does not show new dropdown'} | ${findNewDropdown}
`('$desc', ({ fn }) => {
expect(fn().exists()).toBe(false);
});
it('shows menu sections', () => {
expect(findMenuSections().props('sections')).toEqual([
{ id: 'primary', menuItems: TEST_NAV_DATA.primary },
{ id: 'secondary', menuItems: TEST_NAV_DATA.secondary },
]);
});
it('emits when menu sections emits', () => {
expect(menuItemClickListener).not.toHaveBeenCalled();
findMenuSections().vm.$emit('menu-item-click', TEST_NAV_DATA.primary[0]);
expect(menuItemClickListener).toHaveBeenCalledWith(TEST_NAV_DATA.primary[0]);
});
});
describe('without secondary', () => {
beforeEach(() => {
createComponent({ navData: { ...TEST_NAV_DATA, secondary: null } });
});
it('shows menu sections', () => {
expect(findMenuSections().props('sections')).toEqual([
{ id: 'primary', menuItems: TEST_NAV_DATA.primary },
]);
});
});
describe('with search view', () => {
beforeEach(() => {
createComponent({
navData: {
...TEST_NAV_DATA,
views: { search: TEST_SEARCH_MENU_ITEM },
},
});
});
it('shows search menu item', () => {
expect(findSearchMenuItem().props()).toEqual({
menuItem: TEST_SEARCH_MENU_ITEM,
iconOnly: true,
});
});
it('shows tooltip for search', () => {
const tooltip = getBinding(findSearchMenuItem().element, 'gl-tooltip');
expect(tooltip.value).toEqual({ title: TEST_SEARCH_MENU_ITEM.title });
});
});
describe('with new view', () => {
beforeEach(() => {
createComponent({
navData: {
...TEST_NAV_DATA,
views: { new: TEST_NEW_DROPDOWN_VIEW_MODEL },
},
});
});
it('shows new dropdown', () => {
expect(findNewDropdown().props()).toEqual({
viewModel: TEST_NEW_DROPDOWN_VIEW_MODEL,
});
});
it('shows tooltip for new dropdown', () => {
const tooltip = getBinding(findNewDropdown().element, 'gl-tooltip');
expect(tooltip.value).toEqual({ title: TEST_NEW_DROPDOWN_VIEW_MODEL.title });
});
});
});
|
