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
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
|
import { GlDropdown, GlDropdownItem, GlIcon, GlSearchBoxByType } from '@gitlab/ui';
import { mount } from '@vue/test-utils';
import { nextTick } from 'vue';
import { allEnvironments } from '~/ci_variable_list/constants';
import CiEnvironmentsDropdown from '~/ci_variable_list/components/ci_environments_dropdown.vue';
describe('Ci environments dropdown', () => {
let wrapper;
const envs = ['dev', 'prod', 'staging'];
const defaultProps = { environments: envs, selectedEnvironmentScope: '' };
const findDropdownText = () => wrapper.findComponent(GlDropdown).text();
const findAllDropdownItems = () => wrapper.findAllComponents(GlDropdownItem);
const findDropdownItemByIndex = (index) => wrapper.findAllComponents(GlDropdownItem).at(index);
const findActiveIconByIndex = (index) => findDropdownItemByIndex(index).findComponent(GlIcon);
const findSearchBox = () => wrapper.findComponent(GlSearchBoxByType);
const createComponent = ({ props = {}, searchTerm = '' } = {}) => {
wrapper = mount(CiEnvironmentsDropdown, {
propsData: {
...defaultProps,
...props,
},
});
findSearchBox().vm.$emit('input', searchTerm);
};
afterEach(() => {
wrapper.destroy();
});
describe('No environments found', () => {
beforeEach(() => {
createComponent({ searchTerm: 'stable' });
});
it('renders create button with search term if environments do not contain search term', () => {
expect(findAllDropdownItems()).toHaveLength(2);
expect(findDropdownItemByIndex(1).text()).toBe('Create wildcard: stable');
});
it('renders empty results message', () => {
expect(findDropdownItemByIndex(0).text()).toBe('No matching results');
});
});
describe('Search term is empty', () => {
beforeEach(() => {
createComponent({ props: { environments: envs } });
});
it('renders all environments when search term is empty', () => {
expect(findAllDropdownItems()).toHaveLength(3);
expect(findDropdownItemByIndex(0).text()).toBe(envs[0]);
expect(findDropdownItemByIndex(1).text()).toBe(envs[1]);
expect(findDropdownItemByIndex(2).text()).toBe(envs[2]);
});
it('should not display active checkmark on the inactive stage', () => {
expect(findActiveIconByIndex(0).classes('gl-visibility-hidden')).toBe(true);
});
});
describe('when `*` is the value of selectedEnvironmentScope props', () => {
const wildcardScope = '*';
beforeEach(() => {
createComponent({ props: { selectedEnvironmentScope: wildcardScope } });
});
it('shows the `All environments` text and not the wildcard', () => {
expect(findDropdownText()).toContain(allEnvironments.text);
expect(findDropdownText()).not.toContain(wildcardScope);
});
});
describe('Environments found', () => {
const currentEnv = envs[2];
beforeEach(async () => {
createComponent({ searchTerm: currentEnv });
await nextTick();
});
it('renders only the environment searched for', () => {
expect(findAllDropdownItems()).toHaveLength(1);
expect(findDropdownItemByIndex(0).text()).toBe(currentEnv);
});
it('should not display create button', () => {
const environments = findAllDropdownItems().filter((env) => env.text().startsWith('Create'));
expect(environments).toHaveLength(0);
expect(findAllDropdownItems()).toHaveLength(1);
});
it('should not display empty results message', () => {
expect(wrapper.findComponent({ ref: 'noMatchingResults' }).exists()).toBe(false);
});
it('should clear the search term when showing the dropdown', () => {
wrapper.findComponent(GlDropdown).trigger('click');
expect(findSearchBox().text()).toBe('');
});
describe('Custom events', () => {
describe('when clicking on an environment', () => {
const itemIndex = 0;
beforeEach(() => {
createComponent();
});
it('should emit `select-environment` if an environment is clicked', async () => {
await nextTick();
await findDropdownItemByIndex(itemIndex).vm.$emit('click');
expect(wrapper.emitted('select-environment')).toEqual([[envs[itemIndex]]]);
});
});
describe('when creating a new environment from a search term', () => {
const search = 'new-env';
beforeEach(() => {
createComponent({ searchTerm: search });
});
it('should emit createClicked if an environment is clicked', async () => {
await nextTick();
findDropdownItemByIndex(1).vm.$emit('click');
expect(wrapper.emitted('create-environment-scope')).toEqual([[search]]);
});
});
});
});
});
|
