Add latest changes from gitlab-org/gitlab@master

4 files changed, 267 insertions, 0 deletions

diff --git a/spec/frontend/create_cluster/eks_cluster/components/eks_cluster_configuration_form_spec.js b/spec/frontend/create_cluster/eks_cluster/components/eks_cluster_configuration_form_spec.js
new file mode 100644
index 00000000000..5b04328bb78
--- /dev/null
+++ b/spec/frontend/create_cluster/eks_cluster/components/eks_cluster_configuration_form_spec.js
@@ -0,0 +1,74 @@
+import { shallowMount, createLocalVue } from '@vue/test-utils';
+import Vuex from 'vuex';
+import Vue from 'vue';
+import EksClusterConfigurationForm from '~/create_cluster/eks_cluster/components/eks_cluster_configuration_form.vue';
+import RegionDropdown from '~/create_cluster/eks_cluster/components/region_dropdown.vue';
+
+const localVue = createLocalVue();
+localVue.use(Vuex);
+
+describe('EksClusterConfigurationForm', () => {
+  let store;
+  let actions;
+  let state;
+  let vm;
+
+  beforeEach(() => {
+    actions = {
+      fetchRegions: jest.fn(),
+      setRegion: jest.fn(),
+    };
+    state = {
+      regions: [{ name: 'region 1' }],
+      isLoadingRegions: false,
+      loadingRegionsError: { message: '' },
+    };
+    store = new Vuex.Store({
+      state,
+      actions,
+    });
+  });
+
+  beforeEach(() => {
+    vm = shallowMount(EksClusterConfigurationForm, {
+      localVue,
+      store,
+    });
+  });
+
+  afterEach(() => {
+    vm.destroy();
+  });
+
+  const findRegionDropdown = () => vm.find(RegionDropdown);
+
+  describe('when mounted', () => {
+    it('fetches available regions', () => {
+      expect(actions.fetchRegions).toHaveBeenCalled();
+    });
+  });
+
+  it('sets isLoadingRegions to RegionDropdown loading property', () => {
+    state.isLoadingRegions = true;
+
+    return Vue.nextTick().then(() => {
+      expect(findRegionDropdown().props('loading')).toEqual(state.isLoadingRegions);
+    });
+  });
+
+  it('sets regions to RegionDropdown regions property', () => {
+    expect(findRegionDropdown().props('regions')).toEqual(state.regions);
+  });
+
+  it('sets loadingRegionsError to RegionDropdown error property', () => {
+    expect(findRegionDropdown().props('error')).toEqual(state.loadingRegionsError);
+  });
+
+  it('dispatches setRegion action when region is selected', () => {
+    const region = { region: 'us-west-2' };
+
+    findRegionDropdown().vm.$emit('input', region);
+
+    expect(actions.setRegion).toHaveBeenCalledWith(expect.anything(), { region }, undefined);
+  });
+});
diff --git a/spec/frontend/create_cluster/eks_cluster/components/region_dropdown_spec.js b/spec/frontend/create_cluster/eks_cluster/components/region_dropdown_spec.js
new file mode 100644
index 00000000000..0ebb5026a4b
--- /dev/null
+++ b/spec/frontend/create_cluster/eks_cluster/components/region_dropdown_spec.js
@@ -0,0 +1,55 @@
+import { shallowMount } from '@vue/test-utils';
+
+import ClusterFormDropdown from '~/create_cluster/eks_cluster/components/cluster_form_dropdown.vue';
+import RegionDropdown from '~/create_cluster/eks_cluster/components/region_dropdown.vue';
+
+describe('RegionDropdown', () => {
+  let vm;
+
+  const getClusterFormDropdown = () => vm.find(ClusterFormDropdown);
+
+  beforeEach(() => {
+    vm = shallowMount(RegionDropdown);
+  });
+  afterEach(() => vm.destroy());
+
+  it('renders a cluster-form-dropdown', () => {
+    expect(getClusterFormDropdown().exists()).toBe(true);
+  });
+
+  it('sets regions to cluster-form-dropdown items property', () => {
+    const regions = [{ name: 'basic' }];
+
+    vm.setProps({ regions });
+
+    expect(getClusterFormDropdown().props('items')).toEqual(regions);
+  });
+
+  it('sets a loading text', () => {
+    expect(getClusterFormDropdown().props('loadingText')).toEqual('Loading Regions');
+  });
+
+  it('sets a placeholder', () => {
+    expect(getClusterFormDropdown().props('placeholder')).toEqual('Select a region');
+  });
+
+  it('sets an empty results text', () => {
+    expect(getClusterFormDropdown().props('emptyText')).toEqual('No region found');
+  });
+
+  it('sets a search field placeholder', () => {
+    expect(getClusterFormDropdown().props('searchFieldPlaceholder')).toEqual('Search regions');
+  });
+
+  it('sets hasErrors property', () => {
+    vm.setProps({ error: {} });
+
+    expect(getClusterFormDropdown().props('hasErrors')).toEqual(true);
+  });
+
+  it('sets an error message', () => {
+    expect(getClusterFormDropdown().props('errorMessage')).toEqual(
+      'Could not load regions from your AWS account',
+    );
+  });
+});
diff --git a/spec/frontend/create_cluster/eks_cluster/store/actions_spec.js b/spec/frontend/create_cluster/eks_cluster/store/actions_spec.js
new file mode 100644
index 00000000000..9a3970813ed
--- /dev/null
+++ b/spec/frontend/create_cluster/eks_cluster/store/actions_spec.js
@@ -0,0 +1,98 @@
+import testAction from 'helpers/vuex_action_helper';
+
+import * as awsServicesFacade from '~/create_cluster/eks_cluster/services/aws_services_facade';
+import createState from '~/create_cluster/eks_cluster/store/state';
+import * as types from '~/create_cluster/eks_cluster/store/mutation_types';
+import * as actions from '~/create_cluster/eks_cluster/store/actions';
+
+describe('EKS Cluster Store Actions', () => {
+  const regions = [{ name: 'region 1' }];
+
+  describe('fetchRegions', () => {
+    describe('on success', () => {
+      beforeEach(() => {
+        jest.spyOn(awsServicesFacade, 'fetchRegions').mockResolvedValueOnce(regions);
+      });
+
+      it('dispatches success with received regions', () =>
+        testAction(
+          actions.fetchRegions,
+          null,
+          createState(),
+          [],
+          [
+            { type: 'requestRegions' },
+            {
+              type: 'receiveRegionsSuccess',
+              payload: { regions },
+            },
+          ],
+        ));
+    });
+
+    describe('on failure', () => {
+      const error = new Error('Could not fetch regions');
+
+      beforeEach(() => {
+        jest.spyOn(awsServicesFacade, 'fetchRegions').mockRejectedValueOnce(error);
+      });
+
+      it('dispatches success with received regions', () =>
+        testAction(
+          actions.fetchRegions,
+          null,
+          createState(),
+          [],
+          [
+            { type: 'requestRegions' },
+            {
+              type: 'receiveRegionsError',
+              payload: { error },
+            },
+          ],
+        ));
+    });
+  });
+
+  describe('requestRegions', () => {
+    it(`commits ${types.REQUEST_REGIONS} mutation`, () =>
+      testAction(actions.requestRegions, null, createState(), [{ type: types.REQUEST_REGIONS }]));
+  });
+
+  describe('receiveRegionsSuccess', () => {
+    it(`commits ${types.RECEIVE_REGIONS_SUCCESS} mutation`, () =>
+      testAction(actions.receiveRegionsSuccess, { regions }, createState(), [
+        {
+          type: types.RECEIVE_REGIONS_SUCCESS,
+          payload: {
+            regions,
+          },
+        },
+      ]));
+  });
+
+  describe('receiveRegionsError', () => {
+    it(`commits ${types.RECEIVE_REGIONS_ERROR} mutation`, () => {
+      const error = new Error('Error fetching regions');
+
+      testAction(actions.receiveRegionsError, { error }, createState(), [
+        {
+          type: types.RECEIVE_REGIONS_ERROR,
+          payload: {
+            error,
+          },
+        },
+      ]);
+    });
+  });
+
+  describe('setRegion', () => {
+    it(`commits ${types.SET_REGION} mutation`, () => {
+      const region = { name: 'west-1' };
+
+      testAction(actions.setRegion, { region }, createState(), [
+        { type: types.SET_REGION, payload: { region } },
+      ]);
+    });
+  });
+});
diff --git a/spec/frontend/create_cluster/eks_cluster/store/mutations_spec.js b/spec/frontend/create_cluster/eks_cluster/store/mutations_spec.js
new file mode 100644
index 00000000000..f2d48635f8c
--- /dev/null
+++ b/spec/frontend/create_cluster/eks_cluster/store/mutations_spec.js
@@ -0,0 +1,40 @@
+import {
+  REQUEST_REGIONS,
+  RECEIVE_REGIONS_ERROR,
+  RECEIVE_REGIONS_SUCCESS,
+  SET_REGION,
+} 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';
+
+describe('Create EKS cluster store mutations', () => {
+  let state;
+  let emptyPayload;
+  let regions;
+  let region;
+  let error;
+
+  beforeEach(() => {
+    emptyPayload = {};
+    region = { name: 'regions-1' };
+    regions = [region];
+    error = new Error('could not load error');
+    state = createState();
+  });
+
+  it.each`
+    mutation                   | mutatedProperty          | payload         | expectedValue | expectedValueDescription
+    ${REQUEST_REGIONS}         | ${'isLoadingRegions'}    | ${emptyPayload} | ${true}       | ${true}
+    ${REQUEST_REGIONS}         | ${'loadingRegionsError'} | ${emptyPayload} | ${null}       | ${null}
+    ${RECEIVE_REGIONS_SUCCESS} | ${'isLoadingRegions'}    | ${{ regions }}  | ${false}      | ${false}
+    ${RECEIVE_REGIONS_SUCCESS} | ${'regions'}             | ${{ regions }}  | ${regions}    | ${'regions payload'}
+    ${RECEIVE_REGIONS_ERROR}   | ${'isLoadingRegions'}    | ${{ error }}    | ${false}      | ${false}
+    ${RECEIVE_REGIONS_ERROR}   | ${'error'}               | ${{ error }}    | ${error}      | ${'received error object'}
+    ${SET_REGION}              | ${'selectedRegion'}      | ${{ region }}   | ${region}     | ${'selected region payload'}
+  `(`$mutation sets $mutatedProperty to $expectedValueDescription`, data => {
+    const { mutation, mutatedProperty, payload, expectedValue } = data;
+
+    mutations[mutation](state, payload);
+    expect(state[mutatedProperty]).toBe(expectedValue);
+  });
+});