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
|
import { shallowMount, createLocalVue } from '@vue/test-utils';
import Vuex from 'vuex';
import GkeMachineTypeDropdown from '~/create_cluster/gke_cluster/components/gke_machine_type_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 { selectedMachineTypeMock, gapiMachineTypesResponseMock } from '../mock_data';
const componentConfig = {
fieldId: 'cluster_provider_gcp_attributes_gcp_machine_type',
fieldName: 'cluster[provider_gcp_attributes][gcp_machine_type]',
};
const setMachineType = jest.fn();
const LABELS = {
LOADING: 'Fetching machine types',
DISABLED_NO_PROJECT: 'Select project and zone to choose machine type',
DISABLED_NO_ZONE: 'Select zone to choose machine type',
DEFAULT: 'Select machine type',
};
const localVue = createLocalVue();
localVue.use(Vuex);
const createComponent = (store, propsData = componentConfig) =>
shallowMount(GkeMachineTypeDropdown, {
propsData,
store,
localVue,
});
const createStore = (initialState = {}, getters = {}) =>
new Vuex.Store({
state: {
...createState(),
...initialState,
},
getters: {
hasZone: () => false,
...getters,
},
actions: {
setMachineType,
},
});
describe('GkeMachineTypeDropdown', () => {
let wrapper;
let store;
afterEach(() => {
wrapper.destroy();
});
const dropdownButtonLabel = () => wrapper.find(DropdownButton).props('toggleText');
const dropdownHiddenInputValue = () => wrapper.find(DropdownHiddenInput).props('value');
describe('shows various toggle text depending on state', () => {
it('returns disabled state toggle text when no project and zone are selected', () => {
store = createStore({
projectHasBillingEnabled: false,
});
wrapper = createComponent(store);
expect(dropdownButtonLabel()).toBe(LABELS.DISABLED_NO_PROJECT);
});
it('returns disabled state toggle text when no zone is selected', () => {
store = createStore({
projectHasBillingEnabled: true,
});
wrapper = createComponent(store);
expect(dropdownButtonLabel()).toBe(LABELS.DISABLED_NO_ZONE);
});
it('returns loading toggle text', () => {
store = createStore();
wrapper = createComponent(store);
// 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: true });
return wrapper.vm.$nextTick().then(() => {
expect(dropdownButtonLabel()).toBe(LABELS.LOADING);
});
});
it('returns default toggle text', () => {
store = createStore(
{
projectHasBillingEnabled: true,
},
{ hasZone: () => true },
);
wrapper = createComponent(store);
expect(dropdownButtonLabel()).toBe(LABELS.DEFAULT);
});
it('returns machine type name if machine type selected', () => {
store = createStore(
{
projectHasBillingEnabled: true,
selectedMachineType: selectedMachineTypeMock,
},
{ hasZone: () => true },
);
wrapper = createComponent(store);
expect(dropdownButtonLabel()).toBe(selectedMachineTypeMock);
});
});
describe('form input', () => {
it('reflects new value when dropdown item is clicked', () => {
store = createStore({
machineTypes: gapiMachineTypesResponseMock.items,
});
wrapper = createComponent(store);
expect(dropdownHiddenInputValue()).toBe('');
wrapper.find('.dropdown-content button').trigger('click');
return wrapper.vm.$nextTick().then(() => {
expect(setMachineType).toHaveBeenCalledWith(expect.anything(), selectedMachineTypeMock);
});
});
});
});
|
