114 lines
3.3 KiB
JavaScript
114 lines
3.3 KiB
JavaScript
|
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);
|
||
|
});
|
||
|
});
|
||
|
});
|