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, createLocalVue } from '@vue/test-utils';
import Vuex from 'vuex';
import createState from '~/create_cluster/gke_cluster/store/state';
import { selectedProjectMock, gapiProjectsResponseMock } from '../mock_data';
import GkeProjectIdDropdown from '~/create_cluster/gke_cluster/components/gke_project_id_dropdown.vue';
import DropdownButton from '~/vue_shared/components/dropdown/dropdown_button.vue';
import DropdownHiddenInput from '~/vue_shared/components/dropdown/dropdown_hidden_input.vue';
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',
};
const localVue = createLocalVue();
localVue.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,
localVue,
});
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', () => {
bootstrap();
wrapper.setData({ isLoading: false });
return wrapper.vm.$nextTick().then(() => {
expect(dropdownButtonLabel()).toBe(LABELS.DEFAULT);
});
});
it('returns project name if project selected', () => {
bootstrap(
{
selectedProject: selectedProjectMock,
},
{
hasProject: () => true,
},
);
wrapper.setData({ isLoading: false });
return wrapper.vm.$nextTick().then(() => {
expect(dropdownButtonLabel()).toBe(selectedProjectMock.name);
});
});
it('returns empty toggle text', () => {
bootstrap({
projects: null,
});
wrapper.setData({ isLoading: false });
return wrapper.vm.$nextTick().then(() => {
expect(dropdownButtonLabel()).toBe(LABELS.EMPTY);
});
});
});
describe('selectItem', () => {
it('reflects new value when dropdown item is clicked', () => {
bootstrap({ projects: gapiProjectsResponseMock.projects });
expect(dropdownHiddenInputValue()).toBe('');
wrapper.find('.dropdown-content button').trigger('click');
return wrapper.vm.$nextTick().then(() => {
expect(setProject).toHaveBeenCalledWith(
expect.anything(),
gapiProjectsResponseMock.projects[0],
);
});
});
});
});
|
