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
|
import { GlDropdownItem } from '@gitlab/ui';
import { shallowMount } from '@vue/test-utils';
import { createMockDirective, getBinding } from 'helpers/vue_mock_directive';
import LeaveGroupDropdownItem from '~/members/components/action_dropdowns/leave_group_dropdown_item.vue';
import LeaveModal from '~/members/components/modals/leave_modal.vue';
import { LEAVE_MODAL_ID } from '~/members/constants';
import { member, permissions } from '../../mock_data';
describe('LeaveGroupDropdownItem', () => {
let wrapper;
const text = 'dummy';
const createComponent = (propsData = {}) => {
wrapper = shallowMount(LeaveGroupDropdownItem, {
propsData: {
member,
permissions,
...propsData,
},
directives: {
GlModal: createMockDirective(),
},
slots: {
default: text,
},
});
};
const findDropdownItem = () => wrapper.findComponent(GlDropdownItem);
beforeEach(() => {
createComponent();
});
afterEach(() => {
wrapper.destroy();
});
it('renders a slot with red text', () => {
expect(findDropdownItem().html()).toContain(`<span class="gl-text-red-500">${text}</span>`);
});
it('contains LeaveModal component', () => {
const leaveModal = wrapper.findComponent(LeaveModal);
expect(leaveModal.props()).toEqual({ member, permissions });
});
it('binds to the LeaveModal component', () => {
const binding = getBinding(findDropdownItem().element, 'gl-modal');
expect(binding.value).toBe(LEAVE_MODAL_ID);
});
});
|
