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
|
import { nextTick } from 'vue';
import {
GlDisclosureDropdown,
GlTooltip,
GlDisclosureDropdownGroup,
GlDisclosureDropdownItem,
} from '@gitlab/ui';
import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
import { stubComponent } from 'helpers/stub_component';
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 closeAndFocusMock = jest.fn();
const createWrapper = () => {
wrapper = shallowMountExtended(CreateMenu, {
propsData: {
groups: createNewMenuGroups,
},
stubs: {
InviteMembersTrigger,
GlDisclosureDropdown: stubComponent(GlDisclosureDropdown, {
methods: { closeAndFocus: closeAndFocusMock },
}),
},
});
};
describe('default', () => {
beforeEach(() => {
createWrapper();
});
it('passes popper options to the dropdown', () => {
createWrapper();
expect(findGlDisclosureDropdown().props('popperOptions')).toEqual({
modifiers: [{ name: 'offset', options: { offset: [-147, 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('closes the dropdown when invite members modal is opened', () => {
findInviteMembersTrigger().vm.$emit('modal-opened');
expect(closeAndFocusMock).toHaveBeenCalled();
});
});
});
|
