135 lines
3.8 KiB
JavaScript
135 lines
3.8 KiB
JavaScript
import { shallowMount, createLocalVue } from '@vue/test-utils';
|
|
import Vuex from 'vuex';
|
|
import { selectedMachineTypeMock, gapiMachineTypesResponseMock } from '../mock_data';
|
|
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 GkeMachineTypeDropdown from '~/create_cluster/gke_cluster/components/gke_machine_type_dropdown.vue';
|
|
|
|
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);
|
|
|
|
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,
|
|
undefined,
|
|
);
|
|
});
|
|
});
|
|
});
|
|
});
|