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
|
import Vuex from 'vuex';
import { shallowMount, createLocalVue } from '@vue/test-utils';
import GkeSubnetworkDropdown from '~/create_cluster/gke_cluster/components/gke_subnetwork_dropdown.vue';
import ClusterFormDropdown from '~/create_cluster/components/cluster_form_dropdown.vue';
import createClusterDropdownState from '~/create_cluster/store/cluster_dropdown/state';
const localVue = createLocalVue();
localVue.use(Vuex);
describe('GkeSubnetworkDropdown', () => {
let wrapper;
let store;
const defaultProps = { fieldName: 'field-name' };
const selectedSubnetwork = '123456';
const setSubnetwork = jest.fn();
const buildStore = ({ clusterDropdownState } = {}) =>
new Vuex.Store({
state: {
selectedSubnetwork,
},
actions: {
setSubnetwork,
},
getters: {
hasNetwork: () => false,
},
modules: {
subnetworks: {
namespaced: true,
state: {
...createClusterDropdownState(),
...(clusterDropdownState || {}),
},
},
},
});
const buildWrapper = (propsData = defaultProps) =>
shallowMount(GkeSubnetworkDropdown, {
propsData,
store,
localVue,
});
afterEach(() => {
wrapper.destroy();
});
it('sets correct field-name', () => {
const fieldName = 'field-name';
store = buildStore();
wrapper = buildWrapper({ fieldName });
expect(wrapper.find(ClusterFormDropdown).props('fieldName')).toBe(fieldName);
});
it('sets selected subnetwork as the dropdown value', () => {
store = buildStore();
wrapper = buildWrapper();
expect(wrapper.find(ClusterFormDropdown).props('value')).toBe(selectedSubnetwork);
});
it('maps subnetworks store items to the dropdown items property', () => {
const items = [{ name: 'subnetwork' }];
store = buildStore({ clusterDropdownState: { items } });
wrapper = buildWrapper();
expect(wrapper.find(ClusterFormDropdown).props('items')).toBe(items);
});
describe('when subnetwork dropdown store is loading items', () => {
it('sets subnetwork dropdown as loading', () => {
store = buildStore({ clusterDropdownState: { isLoadingItems: true } });
wrapper = buildWrapper();
expect(wrapper.find(ClusterFormDropdown).props('loading')).toBe(true);
});
});
describe('when there is no selected network', () => {
it('disables the subnetwork dropdown', () => {
store = buildStore();
wrapper = buildWrapper();
expect(wrapper.find(ClusterFormDropdown).props('disabled')).toBe(true);
});
});
describe('when an error occurs while loading subnetworks', () => {
it('sets the subnetwork dropdown as having errors', () => {
store = buildStore({ clusterDropdownState: { loadingItemsError: new Error() } });
wrapper = buildWrapper();
expect(wrapper.find(ClusterFormDropdown).props('hasErrors')).toBe(true);
});
});
describe('when dropdown emits input event', () => {
it('dispatches the setSubnetwork action', () => {
store = buildStore();
wrapper = buildWrapper();
wrapper.find(ClusterFormDropdown).vm.$emit('input', selectedSubnetwork);
expect(setSubnetwork).toHaveBeenCalledWith(expect.anything(), selectedSubnetwork, undefined);
});
});
});
|
