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
|
import { nextTick } from 'vue';
import {
GlDisclosureDropdown,
GlTooltip,
GlDisclosureDropdownGroup,
GlDisclosureDropdownItem,
} from '@gitlab/ui';
import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
import InviteMembersTrigger from '~/invite_members/components/invite_members_trigger.vue';
import { __ } from '~/locale';
import CreateMenu from '~/super_sidebar/components/create_menu.vue';
import { createNewMenuGroups } from '../mock_data';
describe('CreateMenu component', () => {
let wrapper;
const findGlDisclosureDropdown = () => wrapper.findComponent(GlDisclosureDropdown);
const findGlDisclosureDropdownGroups = () => wrapper.findAllComponents(GlDisclosureDropdownGroup);
const findGlDisclosureDropdownItems = () => wrapper.findAllComponents(GlDisclosureDropdownItem);
const findInviteMembersTrigger = () => wrapper.findComponent(InviteMembersTrigger);
const findGlTooltip = () => wrapper.findComponent(GlTooltip);
const createWrapper = ({ provide = {} } = {}) => {
wrapper = shallowMountExtended(CreateMenu, {
provide: {
isImpersonating: false,
...provide,
},
propsData: {
groups: createNewMenuGroups,
},
stubs: {
InviteMembersTrigger,
GlDisclosureDropdown,
},
});
};
describe('default', () => {
beforeEach(() => {
createWrapper();
});
it('passes custom offset to the dropdown', () => {
createWrapper();
expect(findGlDisclosureDropdown().props('dropdownOffset')).toEqual({
crossAxis: -147,
mainAxis: 4,
});
});
it("sets the toggle's label", () => {
expect(findGlDisclosureDropdown().props('toggleText')).toBe(__('Create new...'));
});
it('has correct amount of dropdown groups', () => {
const items = findGlDisclosureDropdownGroups();
expect(items.exists()).toBe(true);
expect(items).toHaveLength(createNewMenuGroups.length);
});
it('has correct amount of dropdown items', () => {
const items = findGlDisclosureDropdownItems();
const numberOfMenuItems = createNewMenuGroups
.map((group) => group.items.length)
.reduce((a, b) => a + b);
expect(items.exists()).toBe(true);
expect(items).toHaveLength(numberOfMenuItems);
});
it('renders the invite member trigger', () => {
expect(findInviteMembersTrigger().exists()).toBe(true);
});
it("sets the toggle ID and tooltip's target", () => {
expect(findGlDisclosureDropdown().props('toggleId')).toBe(wrapper.vm.$options.toggleId);
expect(findGlTooltip().props('target')).toBe(`#${wrapper.vm.$options.toggleId}`);
});
it('hides the tooltip when the dropdown is opened', async () => {
findGlDisclosureDropdown().vm.$emit('shown');
await nextTick();
expect(findGlTooltip().exists()).toBe(false);
});
it('shows the tooltip when the dropdown is closed', async () => {
findGlDisclosureDropdown().vm.$emit('shown');
findGlDisclosureDropdown().vm.$emit('hidden');
await nextTick();
expect(findGlTooltip().exists()).toBe(true);
});
});
it('decreases the dropdown offset when impersonating a user', () => {
createWrapper({ provide: { isImpersonating: true } });
expect(findGlDisclosureDropdown().props('dropdownOffset')).toEqual({
crossAxis: -115,
mainAxis: 4,
});
});
});
|
