Skip to content

G
gitlab-ce
Commit 847cf951 authored by Enrique Alcántara's avatar Enrique Alcántara Committed by Mike Greiling
Browse files
Options

Add role dropdown field to cluster form 

- Remove role dropdown Vue component and replace it
with a direct use of ClusterDropdown component too.
parent a9efa77e
Hide whitespace changes
Inline Side-by-side
Showing with 369 additions and 141 deletions
app/assets/javascripts/create_cluster/eks_cluster/components/cluster_form_dropdown.vue
View file @ 847cf951
......@@ -3,6 +3,8 @@ import DropdownSearchInput from '~/vue_shared/components/dropdown/dropdown_searc
import DropdownHiddenInput from '~/vue_shared/components/dropdown/dropdown_hidden_input.vue';
import DropdownButton from '~/vue_shared/components/dropdown/dropdown_button.vue';
const findItem = (items, valueProp, value) => items.find(item => item[valueProp] === value);
export default {
components: {
DropdownButton,
......@@ -26,7 +28,7 @@ export default {
default: '',
},
value: {
type: Object,
type: [Object, String],
required: false,
default: () => null,
},
......@@ -93,8 +95,8 @@ export default {
},
data() {
return {
selectedItem: findItem(this.items, this.value),
searchQuery: '',
selectedItem: null,
};
},
computed: {
......@@ -127,10 +129,15 @@ export default {
return (this.selectedItem && this.selectedItem[this.valueProperty]) || '';
},
},
watch: {
value(value) {
this.selectedItem = findItem(this.items, this.valueProperty, value);
},
},
methods: {
select(item) {
this.selectedItem = item;
this.$emit('input', item);
this.$emit('input', item[this.valueProperty]);
},
},
};
......
app/assets/javascripts/create_cluster/eks_cluster/components/eks_cluster_configuration_form.vue
View file @ 847cf951
......@@ -3,12 +3,15 @@ import { createNamespacedHelpers, mapState, mapActions } from 'vuex';
import { sprintf, s__ } from '~/locale';
import ClusterFormDropdown from './cluster_form_dropdown.vue';
import RegionDropdown from './region_dropdown.vue';
import RoleNameDropdown from './role_name_dropdown.vue';
import SecurityGroupDropdown from './security_group_dropdown.vue';
const { mapState: mapRolesState, mapActions: mapRolesActions } = createNamespacedHelpers('roles');
const { mapState: mapRegionsState, mapActions: mapRegionsActions } = createNamespacedHelpers(
'regions',
);
const { mapState: mapKeyPairsState, mapActions: mapKeyPairsActions } = createNamespacedHelpers(
'keyPairs',
);
const { mapState: mapVpcsState, mapActions: mapVpcActions } = createNamespacedHelpers('vpcs');
const { mapState: mapSubnetsState, mapActions: mapSubnetActions } = createNamespacedHelpers(
'subnets',
......@@ -18,16 +21,31 @@ export default {
components: {
ClusterFormDropdown,
RegionDropdown,
RoleNameDropdown,
SecurityGroupDropdown,
},
computed: {
...mapState(['selectedRegion', 'selectedVpc', 'selectedSubnet']),
...mapState([
'selectedRegion',
'selectedKeyPair',
'selectedVpc',
'selectedSubnet',
'selectedRole',
]),
...mapRolesState({
roles: 'items',
isLoadingRoles: 'isLoadingItems',
loadingRolesError: 'loadingItemsError',
}),
...mapRegionsState({
regions: 'items',
isLoadingRegions: 'isLoadingItems',
loadingRegionsError: 'loadingItemsError',
}),
...mapKeyPairsState({
keyPairs: 'items',
isLoadingKeyPairs: 'isLoadingItems',
loadingKeyPairsError: 'loadingItemsError',
}),
...mapVpcsState({
vpcs: 'items',
isLoadingVpcs: 'isLoadingItems',
......@@ -41,9 +59,38 @@ export default {
vpcDropdownDisabled() {
return !this.selectedRegion;
},
keyPairDropdownDisabled() {
return !this.selectedRegion;
},
subnetDropdownDisabled() {
return !this.selectedVpc;
},
roleDropdownHelpText() {
return sprintf(
s__(
'ClusterIntegration|Select the IAM Role to allow Amazon EKS and the Kubernetes control plane to manage AWS resources on your behalf. To use a new role name, first create one on %{startLink}Amazon Web Services%{endLink}.',
),
{
startLink:
'<a href="https://console.aws.amazon.com/iam/home?#roles" target="_blank" rel="noopener noreferrer">',
endLink: '</a>',
},
false,
);
},
keyPairDropdownHelpText() {
return sprintf(
s__(
'ClusterIntegration|Select the key pair name that will be used to create EC2 nodes. To use a new key pair name, first create one on %{startLink}Amazon Web Services%{endLink}.',
),
{
startLink:
'<a href="https://docs.aws.amazon.com/AWSEC2/latest/UserGuide/ec2-key-pairs.html#having-ec2-create-your-key-pair" target="_blank" rel="noopener noreferrer">',
endLink: '</a>',
},
false,
);
},
vpcDropdownHelpText() {
return sprintf(
s__(
......@@ -73,15 +120,19 @@ export default {
},
mounted() {
this.fetchRegions();
this.fetchRoles();
},
methods: {
...mapActions(['setRegion', 'setVpc', 'setSubnet']),
...mapActions(['setRegion', 'setVpc', 'setSubnet', 'setRole', 'setKeyPair']),
...mapRegionsActions({ fetchRegions: 'fetchItems' }),
...mapVpcActions({ fetchVpcs: 'fetchItems' }),
...mapSubnetActions({ fetchSubnets: 'fetchItems' }),
setRegionAndFetchVpcs(region) {
...mapRolesActions({ fetchRoles: 'fetchItems' }),
...mapKeyPairsActions({ fetchKeyPairs: 'fetchItems' }),
setRegionAndFetchVpcsAndKeyPairs(region) {
this.setRegion({ region });
this.fetchVpcs({ region });
this.fetchKeyPairs({ region });
},
setVpcAndFetchSubnets(vpc) {
this.setVpc({ vpc });
......@@ -93,27 +144,57 @@ export default {
<template>
<form name="eks-cluster-configuration-form">
<div class="form-group">
<label class="label-bold" name="role" for="eks-role">{{
s__('ClusterIntegration|Role name')
}}</label>
<role-name-dropdown />
<label class="label-bold" for="eks-role">{{ s__('ClusterIntegration|Role name') }}</label>
<cluster-form-dropdown
field-id="eks-role"
field-name="eks-role"
:input="selectedRole"
:items="roles"
:loading="isLoadingRoles"
:loading-text="s__('ClusterIntegration|Loading IAM Roles')"
:placeholder="s__('ClusterIntergation|Select role name')"
:search-field-placeholder="s__('ClusterIntegration|Search IAM Roles')"
:empty-text="s__('ClusterIntegration|No IAM Roles found')"
:has-errors="Boolean(loadingRolesError)"
:error-message="s__('ClusterIntegration|Could not load IAM roles')"
@input="setRole({ role: $event })"
/>
<p class="form-text text-muted" v-html="roleDropdownHelpText"></p>
</div>
<div class="form-group">
<label class="label-bold" name="role" for="eks-role">{{
s__('ClusterIntegration|Region')
}}</label>
<label class="label-bold" for="eks-role">{{ s__('ClusterIntegration|Region') }}</label>
<region-dropdown
:value="selectedRegion"
:regions="regions"
:error="loadingRegionsError"
:loading="isLoadingRegions"
@input="setRegionAndFetchVpcs($event)"
@input="setRegionAndFetchVpcsAndKeyPairs($event)"
/>
</div>
<div class="form-group">
<label class="label-bold" name="eks-vpc" for="eks-vpc">{{
s__('ClusterIntegration|VPC')
<label class="label-bold" for="eks-key-pair">{{
s__('ClusterIntegration|Key pair name')
}}</label>
<cluster-form-dropdown
field-id="eks-key-pair"
field-name="eks-key-pair"
:input="selectedKeyPair"
:items="keyPairs"
:disabled="keyPairDropdownDisabled"
:disabled-text="s__('ClusterIntegration|Select a region to choose a Key Pair')"
:loading="isLoadingKeyPairs"
:loading-text="s__('ClusterIntegration|Loading Key Pairs')"
:placeholder="s__('ClusterIntergation|Select key pair')"
:search-field-placeholder="s__('ClusterIntegration|Search Key Pairs')"
:empty-text="s__('ClusterIntegration|No Key Pairs found')"
:has-errors="Boolean(loadingKeyPairsError)"
:error-message="s__('ClusterIntegration|Could not load Key Pairs')"
@input="setKeyPair({ keyPair: $event })"
/>
<p class="form-text text-muted" v-html="keyPairDropdownHelpText"></p>
</div>
<div class="form-group">
<label class="label-bold" for="eks-vpc">{{ s__('ClusterIntegration|VPC') }}</label>
<cluster-form-dropdown
field-id="eks-vpc"
field-name="eks-vpc"
......@@ -126,16 +207,14 @@ export default {
:placeholder="s__('ClusterIntergation|Select a VPC')"
:search-field-placeholder="s__('ClusterIntegration|Search VPCs')"
:empty-text="s__('ClusterIntegration|No VPCs found')"
:has-errors="loadingVpcsError"
:has-errors="Boolean(loadingVpcsError)"
:error-message="s__('ClusterIntegration|Could not load VPCs for the selected region')"
@input="setVpcAndFetchSubnets($event)"
/>
<p class="form-text text-muted" v-html="vpcDropdownHelpText"></p>
</div>
<div class="form-group">
<label class="label-bold" name="eks-subnet" for="eks-subnet">{{
s__('ClusterIntegration|Subnet')
}}</label>
<label class="label-bold" for="eks-role">{{ s__('ClusterIntegration|Subnet') }}</label>
<cluster-form-dropdown
field-id="eks-subnet"
field-name="eks-subnet"
......@@ -148,7 +227,7 @@ export default {
:placeholder="s__('ClusterIntergation|Select a subnet')"
:search-field-placeholder="s__('ClusterIntegration|Search subnets')"
:empty-text="s__('ClusterIntegration|No subnet found')"
:has-errors="loadingSubnetsError"
:has-errors="Boolean(loadingSubnetsError)"
:error-message="s__('ClusterIntegration|Could not load subnets for the selected VPC')"
@input="setSubnet({ subnet: $event })"
/>
......
app/assets/javascripts/create_cluster/eks_cluster/components/role_name_dropdown.vue deleted 100644 → 0
View file @ a9efa77e
<script>
import { sprintf, s__ } from '~/locale';
import ClusterFormDropdown from './cluster_form_dropdown.vue';
export default {
components: {
ClusterFormDropdown,
},
props: {
roles: {
type: Array,
required: false,
default: () => [],
},
loading: {
type: Boolean,
required: false,
default: false,
},
},
computed: {
helpText() {
return sprintf(
s__(
'ClusterIntegration|Select the IAM Role to allow Amazon EKS and the Kubernetes control plane to manage AWS resources on your behalf. To use a new role name, first create one on %{startLink}Amazon Web Services%{endLink}.',
),
{
startLink:
'<a href="https://console.aws.amazon.com/iam/home?#roles" target="_blank" rel="noopener noreferrer">',
endLink: '</a>',
},
false,
);
},
},
};
</script>
<template>
<div>
<cluster-form-dropdown
field-id="eks-role-name"
field-name="eks-role-name"
:items="roles"
:loading="loading"
:loading-text="s__('ClusterIntegration|Loading IAM Roles')"
:placeholder="s__('ClusterIntergation|Select role name')"
:search-field-placeholder="s__('ClusterIntegration|Search IAM Roles')"
:empty-text="s__('ClusterIntegration|No IAM Roles found')"
/>
<p class="form-text text-muted" v-html="helpText"></p>
</div>
</template>
app/assets/javascripts/create_cluster/eks_cluster/services/aws_services_facade.js
View file @ 847cf951
import EC2 from 'aws-sdk/clients/ec2';
import IAM from 'aws-sdk/clients/iam';
export const fetchRoles = () =>
new Promise((resolve, reject) => {
const iam = new IAM();
iam
.listRoles()
.on('success', ({ data: { Roles: roles } }) => {
const transformedRoles = roles.map(({ RoleName: name }) => ({ name }));
resolve(transformedRoles);
})
.on('error', error => {
reject(error);
})
.send();
});
export const fetchKeyPairs = () =>
new Promise((resolve, reject) => {
const ec2 = new EC2();
ec2
.describeKeyPairs()
.on('success', ({ data: { KeyPairs: keyPairs } }) => {
const transformedKeyPairs = keyPairs.map(({ RegionName: name }) => ({ name }));
resolve(transformedKeyPairs);
})
.on('error', error => {
reject(error);
})
.send();
});
export const fetchRegions = () =>
new Promise((resolve, reject) => {
......
app/assets/javascripts/create_cluster/eks_cluster/store/actions.js
View file @ 847cf951
......@@ -4,6 +4,10 @@ export const setRegion = ({ commit }, payload) => {
commit(types.SET_REGION, payload);
};
export const setKeyPair = ({ commit }, payload) => {
commit(types.SET_KEY_PAIR, payload);
};
export const setVpc = ({ commit }, payload) => {
commit(types.SET_VPC, payload);
};
......@@ -12,4 +16,8 @@ export const setSubnet = ({ commit }, payload) => {
commit(types.SET_SUBNET, payload);
};
export const setRole = ({ commit }, payload) => {
commit(types.SET_ROLE, payload);
};
export default () => {};
app/assets/javascripts/create_cluster/eks_cluster/store/index.js
View file @ 847cf951
......@@ -15,10 +15,18 @@ const createStore = () =>
mutations,
state: state(),
modules: {
roles: {
namespaced: true,
...clusterDropdownStore(awsServices.fetchRoles),
},
regions: {
namespaced: true,
...clusterDropdownStore(awsServices.fetchRegions),
},
keyPairs: {
namespaced: true,
...clusterDropdownStore(awsServices.fetchKeyPairs),
},
vpcs: {
namespaced: true,
...clusterDropdownStore(awsServices.fetchVpcs),
......
app/assets/javascripts/create_cluster/eks_cluster/store/mutation_types.js
View file @ 847cf951
export const SET_REGION = 'SET_REGION';
export const SET_VPC = 'SET_VPC';
export const SET_KEY_PAIR = 'SET_KEY_PAIR';
export const SET_SUBNET = 'SET_SUBNET';
export const SET_ROLE = 'SET_ROLE';
app/assets/javascripts/create_cluster/eks_cluster/store/mutations.js
View file @ 847cf951
......@@ -4,10 +4,16 @@ export default {
[types.SET_REGION](state, { region }) {
state.selectedRegion = region;
},
[types.SET_KEY_PAIR](state, { keyPair }) {
state.selectedKeyPair = keyPair;
},
[types.SET_VPC](state, { vpc }) {
state.selectedVpc = vpc;
},
[types.SET_SUBNET](state, { subnet }) {
state.selectedSubnet = subnet;
},
[types.SET_ROLE](state, { role }) {
state.selectedRole = role;
},
};
app/assets/javascripts/create_cluster/eks_cluster/store/state.js
View file @ 847cf951
......@@ -4,6 +4,7 @@ export default () => ({
selectedRegion: '',
selectedRole: '',
selectedKeyPair: '',
selectedVpc: '',
selectedSubnet: '',
selectedSecurityGroup: '',
......
locale/gitlab.pot
View file @ 847cf951
......@@ -3417,6 +3417,12 @@ msgstr ""
msgid "ClusterIntegration|Copy Service Token"
msgstr ""
msgid "ClusterIntegration|Could not load IAM roles"
msgstr ""
msgid "ClusterIntegration|Could not load Key Pairs"
msgstr ""
msgid "ClusterIntegration|Could not load VPCs for the selected region"
msgstr ""
......@@ -3549,6 +3555,9 @@ msgstr ""
msgid "ClusterIntegration|JupyterHub, a multi-user Hub, spawns, manages, and proxies multiple instances of the single-user Jupyter notebook server. JupyterHub can be used to serve notebooks to a class of students, a corporate data science group, or a scientific research group."
msgstr ""
msgid "ClusterIntegration|Key pair name"
msgstr ""
msgid "ClusterIntegration|Knative"
msgstr ""
......@@ -3609,6 +3618,9 @@ msgstr ""
msgid "ClusterIntegration|Loading IAM Roles"
msgstr ""
msgid "ClusterIntegration|Loading Key Pairs"
msgstr ""
msgid "ClusterIntegration|Loading Regions"
msgstr ""
......@@ -3630,6 +3642,9 @@ msgstr ""
msgid "ClusterIntegration|No IAM Roles found"
msgstr ""
msgid "ClusterIntegration|No Key Pairs found"
msgstr ""
msgid "ClusterIntegration|No VPCs found"
msgstr ""
......@@ -3717,6 +3732,9 @@ msgstr ""
msgid "ClusterIntegration|Search IAM Roles"
msgstr ""
msgid "ClusterIntegration|Search Key Pairs"
msgstr ""
msgid "ClusterIntegration|Search VPCs"
msgstr ""
......@@ -3744,6 +3762,9 @@ msgstr ""
msgid "ClusterIntegration|Select a VPC to use for your EKS Cluster resources. To use a new VPC, first create one on %{startLink}Amazon Web Services%{endLink}."
msgstr ""
msgid "ClusterIntegration|Select a region to choose a Key Pair"
msgstr ""
msgid "ClusterIntegration|Select a region to choose a VPC"
msgstr ""
......@@ -3762,6 +3783,9 @@ msgstr ""
msgid "ClusterIntegration|Select the IAM Role to allow Amazon EKS and the Kubernetes control plane to manage AWS resources on your behalf. To use a new role name, first create one on %{startLink}Amazon Web Services%{endLink}."
msgstr ""
msgid "ClusterIntegration|Select the key pair name that will be used to create EC2 nodes. To use a new key pair name, first create one on %{startLink}Amazon Web Services%{endLink}."
msgstr ""
msgid "ClusterIntegration|Select zone"
msgstr ""
......@@ -3906,6 +3930,9 @@ msgstr ""
msgid "ClusterIntergation|Select a subnet"
msgstr ""
msgid "ClusterIntergation|Select key pair"
msgstr ""
msgid "ClusterIntergation|Select role name"
msgstr ""
......
spec/frontend/create_cluster/eks_cluster/components/cluster_form_dropdown_spec.js
View file @ 847cf951
......@@ -7,12 +7,22 @@ import DropdownHiddenInput from '~/vue_shared/components/dropdown/dropdown_hidde
describe('ClusterFormDropdown', () => {
let vm;
const firstItem = { name: 'item 1', value: 1 };
const secondItem = { name: 'item 2', value: 2 };
const items = [firstItem, secondItem, { name: 'item 3', value: 3 }];
beforeEach(() => {
vm = shallowMount(ClusterFormDropdown);
});
afterEach(() => vm.destroy());
describe('when initial value is provided', () => {
it('sets selectedItem to initial value', () => {
vm.setProps({ items, value: secondItem.value });
expect(vm.find(DropdownButton).props('toggleText')).toEqual(secondItem.name);
});
});
describe('when no item is selected', () => {
it('displays placeholder text', () => {
const placeholder = 'placeholder';
......@@ -24,18 +34,19 @@ describe('ClusterFormDropdown', () => {
});
describe('when an item is selected', () => {
const selectedItem = { name: 'Name', value: 'value' };
beforeEach(() => {
vm.setData({ selectedItem });
vm.setProps({ items });
vm.findAll('.js-dropdown-item')
.at(1)
.trigger('click');
});
it('displays selected item label', () => {
expect(vm.find(DropdownButton).props('toggleText')).toEqual(selectedItem.name);
expect(vm.find(DropdownButton).props('toggleText')).toEqual(secondItem.name);
});
it('sets selected value to dropdown hidden input', () => {
expect(vm.find(DropdownHiddenInput).props('value')).toEqual(selectedItem.value);
expect(vm.find(DropdownHiddenInput).props('value')).toEqual(secondItem.value);
});
});
......@@ -124,9 +135,7 @@ describe('ClusterFormDropdown', () => {
});
it('it filters results by search query', () => {
const secondItem = { name: 'second item' };
const items = [{ name: 'first item' }, secondItem];
const searchQuery = 'second';
const searchQuery = secondItem.name;
vm.setProps({ items });
vm.setData({ searchQuery });
......
spec/frontend/create_cluster/eks_cluster/components/eks_cluster_configuration_form_spec.js
View file @ 847cf951
......@@ -14,12 +14,16 @@ describe('EksClusterConfigurationForm', () => {
let store;
let actions;
let state;
let rolesState;
let regionsState;
let vpcsState;
let subnetsState;
let keyPairsState;
let vpcsActions;
let rolesActions;
let regionsActions;
let subnetsActions;
let keyPairsActions;
let vm;
beforeEach(() => {
......@@ -28,16 +32,27 @@ describe('EksClusterConfigurationForm', () => {
setRegion: jest.fn(),
setVpc: jest.fn(),
setSubnet: jest.fn(),
setRole: jest.fn(),
setKeyPair: jest.fn(),
};
regionsActions = {
fetchItems: jest.fn(),
};
keyPairsActions = {
fetchItems: jest.fn(),
};
vpcsActions = {
fetchItems: jest.fn(),
};
subnetsActions = {
fetchItems: jest.fn(),
};
rolesActions = {
fetchItems: jest.fn(),
};
rolesState = {
...clusterDropdownStoreState(),
};
regionsState = {
...clusterDropdownStoreState(),
};
......@@ -47,6 +62,9 @@ describe('EksClusterConfigurationForm', () => {
subnetsState = {
...clusterDropdownStoreState(),
};
keyPairsState = {
...clusterDropdownStoreState(),
};
store = new Vuex.Store({
state,
actions,
......@@ -66,6 +84,16 @@ describe('EksClusterConfigurationForm', () => {
state: subnetsState,
actions: subnetsActions,
},
roles: {
namespaced: true,
state: rolesState,
actions: rolesActions,
},
keyPairs: {
namespaced: true,
state: keyPairsState,
actions: keyPairsActions,
},
},
});
});
......@@ -82,13 +110,37 @@ describe('EksClusterConfigurationForm', () => {
});
const findRegionDropdown = () => vm.find(RegionDropdown);
const findKeyPairDropdown = () => vm.find('[field-id="eks-key-pair"]');
const findVpcDropdown = () => vm.find('[field-id="eks-vpc"]');
const findSubnetDropdown = () => vm.find('[field-id="eks-subnet"]');
const findRoleDropdown = () => vm.find('[field-id="eks-role"]');
describe('when mounted', () => {
it('fetches available regions', () => {
expect(regionsActions.fetchItems).toHaveBeenCalled();
});
it('fetches available roles', () => {
expect(rolesActions.fetchItems).toHaveBeenCalled();
});
});
it('sets isLoadingRoles to RoleDropdown loading property', () => {
rolesState.isLoadingItems = true;
return Vue.nextTick().then(() => {
expect(findRoleDropdown().props('loading')).toBe(rolesState.isLoadingItems);
});
});
it('sets roles to RoleDropdown items property', () => {
expect(findRoleDropdown().props('items')).toBe(rolesState.items);
});
it('sets RoleDropdown hasErrors to true when loading roles failed', () => {
rolesState.loadingItemsError = new Error();
expect(findRoleDropdown().props('hasErrors')).toEqual(true);
});
it('sets isLoadingRegions to RegionDropdown loading property', () => {
......@@ -107,6 +159,36 @@ describe('EksClusterConfigurationForm', () => {
expect(findRegionDropdown().props('error')).toBe(regionsState.loadingItemsError);
});
it('disables KeyPairDropdown when no region is selected', () => {
expect(findKeyPairDropdown().props('disabled')).toBe(true);
});
it('enables KeyPairDropdown when no region is selected', () => {
state.selectedRegion = { name: 'west-1 ' };
return Vue.nextTick().then(() => {
expect(findKeyPairDropdown().props('disabled')).toBe(false);
});
});
it('sets isLoadingKeyPairs to KeyPairDropdown loading property', () => {
keyPairsState.isLoadingItems = true;
return Vue.nextTick().then(() => {
expect(findKeyPairDropdown().props('loading')).toBe(keyPairsState.isLoadingItems);
});
});
it('sets keyPairs to KeyPairDropdown items property', () => {
expect(findKeyPairDropdown().props('items')).toBe(keyPairsState.items);
});
it('sets KeyPairDropdown hasErrors to true when loading key pairs fails', () => {
keyPairsState.loadingItemsError = new Error();
expect(findKeyPairDropdown().props('hasErrors')).toEqual(true);
});
it('disables VpcDropdown when no region is selected', () => {
expect(findVpcDropdown().props('disabled')).toBe(true);
});
......@@ -131,8 +213,10 @@ describe('EksClusterConfigurationForm', () => {
expect(findVpcDropdown().props('items')).toBe(vpcsState.items);
});
it('sets loadingVpcsError to VpcDropdown hasErrors property', () => {
expect(findVpcDropdown().props('hasErrors')).toBe(vpcsState.loadingItemsError);
it('sets VpcDropdown hasErrors to true when loading vpcs fails', () => {
vpcsState.loadingItemsError = new Error();
expect(findVpcDropdown().props('hasErrors')).toEqual(true);
});
it('disables SubnetDropdown when no vpc is selected', () => {
......@@ -159,8 +243,10 @@ describe('EksClusterConfigurationForm', () => {
expect(findSubnetDropdown().props('items')).toBe(subnetsState.items);
});
it('sets loadingSubnetsError to SubnetDropdown hasErrors property', () => {
expect(findSubnetDropdown().props('hasErrors')).toBe(subnetsState.loadingItemsError);
it('sets SubnetDropdown hasErrors to true when loading subnets fails', () => {
subnetsState.loadingItemsError = new Error();
expect(findSubnetDropdown().props('hasErrors')).toEqual(true);
});
describe('when region is selected', () => {
......@@ -177,6 +263,14 @@ describe('EksClusterConfigurationForm', () => {
it('fetches available vpcs', () => {
expect(vpcsActions.fetchItems).toHaveBeenCalledWith(expect.anything(), { region }, undefined);
});
it('fetches available key pairs', () => {
expect(keyPairsActions.fetchItems).toHaveBeenCalledWith(
expect.anything(),
{ region },
undefined,
);
});
});
describe('when vpc is selected', () => {
......@@ -206,4 +300,28 @@ describe('EksClusterConfigurationForm', () => {
expect(actions.setSubnet).toHaveBeenCalledWith(expect.anything(), { subnet }, undefined);
});
});
describe('when role is selected', () => {
const role = { name: 'admin' };
beforeEach(() => {
findRoleDropdown().vm.$emit('input', role);
});
it('dispatches setRole action', () => {
expect(actions.setRole).toHaveBeenCalledWith(expect.anything(), { role }, undefined);
});
});
describe('when key pair is selected', () => {
const keyPair = { name: 'key pair' };
beforeEach(() => {
findKeyPairDropdown().vm.$emit('input', keyPair);
});
it('dispatches setKeyPair action', () => {
expect(actions.setKeyPair).toHaveBeenCalledWith(expect.anything(), { keyPair }, undefined);
});
});
});
spec/frontend/create_cluster/eks_cluster/components/role_name_dropdown_spec.js deleted 100644 → 0
View file @ a9efa77e
import { shallowMount } from '@vue/test-utils';
import ClusterFormDropdown from '~/create_cluster/eks_cluster/components/cluster_form_dropdown.vue';
import RoleNameDropdown from '~/create_cluster/eks_cluster/components/role_name_dropdown.vue';
describe('RoleNameDropdown', () => {
let vm;
beforeEach(() => {
vm = shallowMount(RoleNameDropdown);
});
afterEach(() => vm.destroy());
it('renders a cluster-form-dropdown', () => {
expect(vm.find(ClusterFormDropdown).exists()).toBe(true);
});
it('sets roles to cluster-form-dropdown items property', () => {
const roles = [{ name: 'basic' }];
vm.setProps({ roles });
expect(vm.find(ClusterFormDropdown).props('items')).toEqual(roles);
});
it('sets a loading text', () => {
expect(vm.find(ClusterFormDropdown).props('loadingText')).toEqual('Loading IAM Roles');
});
it('sets a placeholder', () => {
expect(vm.find(ClusterFormDropdown).props('placeholder')).toEqual('Select role name');
});
it('sets an empty results text', () => {
expect(vm.find(ClusterFormDropdown).props('emptyText')).toEqual('No IAM Roles found');
});
it('sets a search field placeholder', () => {
expect(vm.find(ClusterFormDropdown).props('searchFieldPlaceholder')).toEqual(
'Search IAM Roles',
);
});
});
spec/frontend/create_cluster/eks_cluster/store/actions_spec.js
View file @ 847cf951
......@@ -2,24 +2,36 @@ import testAction from 'helpers/vuex_action_helper';
import createState from '~/create_cluster/eks_cluster/store/state';
import * as actions from '~/create_cluster/eks_cluster/store/actions';
import { SET_REGION, SET_VPC, SET_SUBNET } from '~/create_cluster/eks_cluster/store/mutation_types';
import {
SET_REGION,
SET_VPC,
SET_KEY_PAIR,
SET_SUBNET,
SET_ROLE,
} from '~/create_cluster/eks_cluster/store/mutation_types';
describe('EKS Cluster Store Actions', () => {
let region;
let vpc;
let subnet;
let role;
let keyPair;
beforeEach(() => {
region = { name: 'regions-1' };
vpc = { name: 'vpc-1' };
subnet = { name: 'subnet-1' };
role = { name: 'role-1' };
keyPair = { name: 'key-pair-1' };
});
it.each`
action | mutation | payload | payloadDescription
${'setRegion'} | ${SET_REGION} | ${{ region }} | ${'region'}
${'setVpc'} | ${SET_VPC} | ${{ vpc }} | ${'vpc'}
${'setSubnet'} | ${SET_SUBNET} | ${{ subnet }} | ${'subnet'}
action | mutation | payload | payloadDescription
${'setRole'} | ${SET_ROLE} | ${{ role }} | ${'role'}
${'setRegion'} | ${SET_REGION} | ${{ region }} | ${'region'}
${'setKeyPair'} | ${SET_KEY_PAIR} | ${{ keyPair }} | ${'key pair'}
${'setVpc'} | ${SET_VPC} | ${{ vpc }} | ${'vpc'}
${'setSubnet'} | ${SET_SUBNET} | ${{ subnet }} | ${'subnet'}
`(`$action commits $mutation with $payloadDescription payload`, data => {
const { action, mutation, payload } = data;
......
spec/frontend/create_cluster/eks_cluster/store/mutations_spec.js
View file @ 847cf951
import { SET_REGION, SET_VPC, SET_SUBNET } from '~/create_cluster/eks_cluster/store/mutation_types';
import {
SET_REGION,
SET_VPC,
SET_KEY_PAIR,
SET_SUBNET,
SET_ROLE,
} from '~/create_cluster/eks_cluster/store/mutation_types';
import createState from '~/create_cluster/eks_cluster/store/state';
import mutations from '~/create_cluster/eks_cluster/store/mutations';
......@@ -7,20 +13,26 @@ describe('Create EKS cluster store mutations', () => {
let region;
let vpc;
let subnet;
let role;
let keyPair;
beforeEach(() => {
region = { name: 'regions-1' };
vpc = { name: 'vpc-1' };
subnet = { name: 'subnet-1' };
role = { name: 'role-1' };
keyPair = { name: 'key pair' };
state = createState();
});
it.each`
mutation | mutatedProperty | payload | expectedValue | expectedValueDescription
${SET_REGION} | ${'selectedRegion'} | ${{ region }} | ${region} | ${'selected region payload'}
${SET_VPC} | ${'selectedVpc'} | ${{ vpc }} | ${vpc} | ${'selected vpc payload'}
${SET_SUBNET} | ${'selectedSubnet'} | ${{ subnet }} | ${subnet} | ${'selected sybnet payload'}
mutation | mutatedProperty | payload | expectedValue | expectedValueDescription
${SET_ROLE} | ${'selectedRole'} | ${{ role }} | ${role} | ${'selected role payload'}
${SET_REGION} | ${'selectedRegion'} | ${{ region }} | ${region} | ${'selected region payload'}
${SET_KEY_PAIR} | ${'selectedKeyPair'} | ${{ keyPair }} | ${keyPair} | ${'selected key pair payload'}
${SET_VPC} | ${'selectedVpc'} | ${{ vpc }} | ${vpc} | ${'selected vpc payload'}
${SET_SUBNET} | ${'selectedSubnet'} | ${{ subnet }} | ${subnet} | ${'selected sybnet payload'}
`(`$mutation sets $mutatedProperty to $expectedValueDescription`, data => {
const { mutation, mutatedProperty, payload, expectedValue } = data;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment
GitLab Nexedi Edition | About GitLab | About Nexedi | 沪ICP备2021021310号-2 | 沪ICP备2021021310号-7