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
|
import { shallowMount } from '@vue/test-utils';
import Vue, { nextTick } from 'vue';
import Vuex from 'vuex';
import GkeProjectIdDropdown from '~/create_cluster/gke_cluster/components/gke_project_id_dropdown.vue';
import createState from '~/create_cluster/gke_cluster/store/state';
import DropdownButton from '~/vue_shared/components/dropdown/dropdown_button.vue';
import DropdownHiddenInput from '~/vue_shared/components/dropdown/dropdown_hidden_input.vue';
import { selectedProjectMock, gapiProjectsResponseMock } from '../mock_data';
const componentConfig = {
docsUrl: 'https://console.cloud.google.com/home/dashboard',
fieldId: 'cluster_provider_gcp_attributes_gcp_project_id',
fieldName: 'cluster[provider_gcp_attributes][gcp_project_id]',
};
const LABELS = {
LOADING: 'Fetching projects',
VALIDATING_PROJECT_BILLING: 'Validating project billing status',
DEFAULT: 'Select project',
EMPTY: 'No projects found',
};
Vue.use(Vuex);
describe('GkeProjectIdDropdown', () => {
let wrapper;
let vuexStore;
let setProject;
beforeEach(() => {
setProject = jest.fn();
});
const createStore = (initialState = {}, getters = {}) =>
new Vuex.Store({
state: {
...createState(),
...initialState,
},
actions: {
fetchProjects: jest.fn().mockResolvedValueOnce([]),
setProject,
},
getters: {
hasProject: () => false,
...getters,
},
});
const createComponent = (store, propsData = componentConfig) =>
shallowMount(GkeProjectIdDropdown, {
propsData,
store,
});
const bootstrap = (initialState, getters) => {
vuexStore = createStore(initialState, getters);
wrapper = createComponent(vuexStore);
};
const dropdownButtonLabel = () => wrapper.find(DropdownButton).props('toggleText');
const dropdownHiddenInputValue = () => wrapper.find(DropdownHiddenInput).props('value');
afterEach(() => {
wrapper.destroy();
});
describe('toggleText', () => {
it('returns loading toggle text', () => {
bootstrap();
expect(dropdownButtonLabel()).toBe(LABELS.LOADING);
});
it('returns project billing validation text', () => {
bootstrap({ isValidatingProjectBilling: true });
expect(dropdownButtonLabel()).toBe(LABELS.VALIDATING_PROJECT_BILLING);
});
it('returns default toggle text', async () => {
bootstrap();
// setData usage is discouraged. See https://gitlab.com/groups/gitlab-org/-/epics/7330 for details
// eslint-disable-next-line no-restricted-syntax
wrapper.setData({ isLoading: false });
await nextTick();
expect(dropdownButtonLabel()).toBe(LABELS.DEFAULT);
});
it('returns project name if project selected', async () => {
bootstrap(
{
selectedProject: selectedProjectMock,
},
{
hasProject: () => true,
},
);
// setData usage is discouraged. See https://gitlab.com/groups/gitlab-org/-/epics/7330 for details
// eslint-disable-next-line no-restricted-syntax
wrapper.setData({ isLoading: false });
await nextTick();
expect(dropdownButtonLabel()).toBe(selectedProjectMock.name);
});
it('returns empty toggle text', async () => {
bootstrap({
projects: null,
});
// setData usage is discouraged. See https://gitlab.com/groups/gitlab-org/-/epics/7330 for details
// eslint-disable-next-line no-restricted-syntax
wrapper.setData({ isLoading: false });
await nextTick();
expect(dropdownButtonLabel()).toBe(LABELS.EMPTY);
});
});
describe('selectItem', () => {
it('reflects new value when dropdown item is clicked', async () => {
bootstrap({ projects: gapiProjectsResponseMock.projects });
expect(dropdownHiddenInputValue()).toBe('');
wrapper.find('.dropdown-content button').trigger('click');
await nextTick();
expect(setProject).toHaveBeenCalledWith(
expect.anything(),
gapiProjectsResponseMock.projects[0],
);
});
});
});
|
