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
|
import { mount } from '@vue/test-utils';
import { nextTick } from 'vue';
import Api from '~/api';
import NamespaceSelect from '~/pages/admin/projects/components/namespace_select.vue';
describe('Dropdown select component', () => {
let wrapper;
const mountDropdown = (propsData) => {
wrapper = mount(NamespaceSelect, { propsData });
};
const findDropdownToggle = () => wrapper.find('button.dropdown-toggle');
const findNamespaceInput = () => wrapper.find('[data-testid="hidden-input"]');
const findFilterInput = () => wrapper.find('.namespace-search-box input');
const findDropdownOption = (match) => {
const buttons = wrapper
.findAll('button.dropdown-item')
.filter((node) => node.text().match(match));
return buttons.length ? buttons.at(0) : buttons;
};
const setFieldValue = async (field, value) => {
await field.setValue(value);
field.trigger('blur');
};
beforeEach(() => {
setFixtures('<div class="test-container"></div>');
jest.spyOn(Api, 'namespaces').mockImplementation((_, callback) =>
callback([
{ id: 10, kind: 'user', full_path: 'Administrator' },
{ id: 20, kind: 'group', full_path: 'GitLab Org' },
]),
);
});
it('creates a hidden input if fieldName is provided', () => {
mountDropdown({ fieldName: 'namespace-input' });
expect(findNamespaceInput().exists()).toBe(true);
expect(findNamespaceInput().attributes('name')).toBe('namespace-input');
});
describe('clicking dropdown options', () => {
it('retrieves namespaces based on filter query', async () => {
mountDropdown();
await setFieldValue(findFilterInput(), 'test');
expect(Api.namespaces).toHaveBeenCalledWith('test', expect.anything());
});
it('updates the dropdown value based upon selection', async () => {
mountDropdown({ fieldName: 'namespace-input' });
// wait for dropdown options to populate
await nextTick();
expect(findDropdownOption('user: Administrator').exists()).toBe(true);
expect(findDropdownOption('group: GitLab Org').exists()).toBe(true);
expect(findDropdownOption('group: Foobar').exists()).toBe(false);
findDropdownOption('user: Administrator').trigger('click');
await nextTick();
expect(findNamespaceInput().attributes('value')).toBe('10');
expect(findDropdownToggle().text()).toBe('user: Administrator');
});
it('triggers a setNamespace event upon selection', async () => {
mountDropdown();
// wait for dropdown options to populate
await nextTick();
findDropdownOption('group: GitLab Org').trigger('click');
expect(wrapper.emitted('setNamespace')).toHaveLength(1);
expect(wrapper.emitted('setNamespace')[0][0]).toBe(20);
});
it('displays "Any Namespace" option when showAny prop provided', () => {
mountDropdown({ showAny: true });
expect(wrapper.text()).toContain('Any namespace');
});
it('does not display "Any Namespace" option when showAny prop not provided', () => {
mountDropdown();
expect(wrapper.text()).not.toContain('Any namespace');
});
});
});
|
