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
|
import { shallowMount } from '@vue/test-utils';
import { GlIcon } from '@gitlab/ui';
import { createMockDirective, getBinding } from 'helpers/vue_mock_directive';
import IdeSidebarNav from '~/ide/components/ide_sidebar_nav.vue';
import { SIDE_RIGHT, SIDE_LEFT } from '~/ide/constants';
const TEST_TABS = [
{
title: 'Lorem',
icon: 'angle-up',
views: [{ name: 'lorem-1' }, { name: 'lorem-2' }],
},
{
title: 'Ipsum',
icon: 'angle-down',
views: [{ name: 'ipsum-1' }, { name: 'ipsum-2' }],
},
];
const TEST_CURRENT_INDEX = 1;
const TEST_CURRENT_VIEW = TEST_TABS[TEST_CURRENT_INDEX].views[1].name;
const TEST_OPEN_VIEW = TEST_TABS[TEST_CURRENT_INDEX].views[0];
describe('ide/components/ide_sidebar_nav', () => {
let wrapper;
const createComponent = (props = {}) => {
if (wrapper) {
throw new Error('wrapper already exists');
}
wrapper = shallowMount(IdeSidebarNav, {
propsData: {
tabs: TEST_TABS,
currentView: TEST_CURRENT_VIEW,
isOpen: false,
...props,
},
directives: {
tooltip: createMockDirective(),
},
});
};
afterEach(() => {
wrapper.destroy();
wrapper = null;
});
const findButtons = () => wrapper.findAll('li button');
const findButtonsData = () =>
findButtons().wrappers.map((button) => {
return {
title: button.attributes('title'),
ariaLabel: button.attributes('aria-label'),
classes: button.classes(),
qaSelector: button.attributes('data-qa-selector'),
icon: button.find(GlIcon).props('name'),
tooltip: getBinding(button.element, 'tooltip').value,
};
});
const clickTab = () => findButtons().at(TEST_CURRENT_INDEX).trigger('click');
describe.each`
isOpen | side | otherSide | classes | classesObj | emitEvent | emitArg
${false} | ${SIDE_LEFT} | ${SIDE_RIGHT} | ${[]} | ${{}} | ${'open'} | ${[TEST_OPEN_VIEW]}
${false} | ${SIDE_RIGHT} | ${SIDE_LEFT} | ${['is-right']} | ${{}} | ${'open'} | ${[TEST_OPEN_VIEW]}
${true} | ${SIDE_RIGHT} | ${SIDE_LEFT} | ${['is-right']} | ${{ [TEST_CURRENT_INDEX]: ['active'] }} | ${'close'} | ${[]}
`(
'with side = $side, isOpen = $isOpen',
({ isOpen, side, otherSide, classes, classesObj, emitEvent, emitArg }) => {
let bsTooltipHide;
beforeEach(() => {
createComponent({ isOpen, side });
bsTooltipHide = jest.fn();
wrapper.vm.$root.$on('bv::hide::tooltip', bsTooltipHide);
});
it('renders buttons', () => {
expect(findButtonsData()).toEqual(
TEST_TABS.map((tab, index) => ({
title: tab.title,
ariaLabel: tab.title,
classes: ['ide-sidebar-link', ...classes, ...(classesObj[index] || [])],
qaSelector: `${tab.title.toLowerCase()}_tab_button`,
icon: tab.icon,
tooltip: {
container: 'body',
placement: otherSide,
},
})),
);
});
it('when tab clicked, emits event', () => {
expect(wrapper.emitted()).toEqual({});
clickTab();
expect(wrapper.emitted()).toEqual({
[emitEvent]: [emitArg],
});
});
it('when tab clicked, hides tooltip', () => {
expect(bsTooltipHide).not.toHaveBeenCalled();
clickTab();
expect(bsTooltipHide).toHaveBeenCalled();
});
},
);
});
|
