Add latest changes from gitlab-org/gitlab@master

5 files changed, 184 insertions, 57 deletions

diff --git a/spec/frontend/commit/__snapshots__/commit_pipeline_status_component_spec.js.snap b/spec/frontend/commit/__snapshots__/commit_pipeline_status_component_spec.js.snap
deleted file mode 100644
index 9199db69fed..00000000000
--- a/spec/frontend/commit/__snapshots__/commit_pipeline_status_component_spec.js.snap
+++ /dev/null
@@ -1,39 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Commit pipeline status component when polling is not successful renders not found CI icon without loader 1`] = `
-<div
-  class="ci-status-link"
->
-  <a>
-    <ciicon-stub
-      aria-label="Pipeline: not found"
-      cssclasses=""
-      data-container="body"
-      data-original-title="Pipeline: not found"
-      size="24"
-      status="[object Object]"
-      title=""
-    />
-  </a>
-</div>
-`;
-
-exports[`Commit pipeline status component when polling is successful renders CI icon without loader 1`] = `
-<div
-  class="ci-status-link"
->
-  <a
-    href="/frontend-fixtures/pipelines-project/pipelines/47"
-  >
-    <ciicon-stub
-      aria-label="Pipeline: pending"
-      cssclasses=""
-      data-container="body"
-      data-original-title="Pipeline: pending"
-      size="24"
-      status="[object Object]"
-      title=""
-    />
-  </a>
-</div>
-`;
diff --git a/spec/frontend/commit/commit_pipeline_status_component_spec.js b/spec/frontend/commit/commit_pipeline_status_component_spec.js
index 1768fd745c9..1736d1d0df8 100644
--- a/spec/frontend/commit/commit_pipeline_status_component_spec.js
+++ b/spec/frontend/commit/commit_pipeline_status_component_spec.js
@@ -2,6 +2,7 @@ import Visibility from 'visibilityjs';
 import { GlLoadingIcon } from '@gitlab/ui';
 import Poll from '~/lib/utils/poll';
 import flash from '~/flash';
+import CiIcon from '~/vue_shared/components/ci_icon.vue';
 import CommitPipelineStatus from '~/projects/tree/components/commit_pipeline_status_component.vue';
 import { shallowMount } from '@vue/test-utils';
 import { getJSONFixture } from '../helpers/fixtures';
@@ -36,6 +37,10 @@ describe('Commit pipeline status component', () => {
     });
   };
 
+  const findLoader = () => wrapper.find(GlLoadingIcon);
+  const findLink = () => wrapper.find('a');
+  const findCiIcon = () => findLink().find(CiIcon);
+
   afterEach(() => {
     wrapper.destroy();
     wrapper = null;
@@ -111,14 +116,14 @@ describe('Commit pipeline status component', () => {
 
     it('shows the loading icon at start', () => {
       createComponent();
-      expect(wrapper.find(GlLoadingIcon).exists()).toBe(true);
+      expect(findLoader().exists()).toBe(true);
 
       pollConfig.successCallback({
         data: { pipelines: [] },
       });
 
       return wrapper.vm.$nextTick().then(() => {
-        expect(wrapper.find(GlLoadingIcon).exists()).toBe(false);
+        expect(findLoader().exists()).toBe(false);
       });
     });
 
@@ -130,8 +135,17 @@ describe('Commit pipeline status component', () => {
         return wrapper.vm.$nextTick();
       });
 
-      it('renders CI icon without loader', () => {
-        expect(wrapper.element).toMatchSnapshot();
+      it('does not render loader', () => {
+        expect(findLoader().exists()).toBe(false);
+      });
+
+      it('renders link with href', () => {
+        expect(findLink().attributes('href')).toEqual(mockCiStatus.details_path);
+      });
+
+      it('renders CI icon', () => {
+        expect(findCiIcon().attributes('data-original-title')).toEqual('Pipeline: pending');
+        expect(findCiIcon().props('status')).toEqual(mockCiStatus);
       });
     });
 
@@ -140,8 +154,21 @@ describe('Commit pipeline status component', () => {
         pollConfig.errorCallback();
       });
 
-      it('renders not found CI icon without loader', () => {
-        expect(wrapper.element).toMatchSnapshot();
+      it('does not render loader', () => {
+        expect(findLoader().exists()).toBe(false);
+      });
+
+      it('renders link with href', () => {
+        expect(findLink().attributes('href')).toBeUndefined();
+      });
+
+      it('renders not found CI icon', () => {
+        expect(findCiIcon().attributes('data-original-title')).toEqual('Pipeline: not found');
+        expect(findCiIcon().props('status')).toEqual({
+          text: 'not found',
+          icon: 'status_notfound',
+          group: 'notfound',
+        });
       });
 
       it('displays flash error message', () => {
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
index 1bd16d356b9..cc7c6735a80 100644
--- 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
@@ -4,6 +4,7 @@ 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';
 
+import eksClusterFormState from '~/create_cluster/eks_cluster/store/state';
 import clusterDropdownStoreState from '~/create_cluster/eks_cluster/store/cluster_dropdown/state';
 
 const localVue = createLocalVue();
@@ -12,29 +13,59 @@ localVue.use(Vuex);
 describe('EksClusterConfigurationForm', () => {
   let store;
   let actions;
+  let state;
   let regionsState;
+  let vpcsState;
+  let subnetsState;
+  let vpcsActions;
   let regionsActions;
+  let subnetsActions;
   let vm;
 
   beforeEach(() => {
+    state = eksClusterFormState();
     actions = {
       setRegion: jest.fn(),
       setVpc: jest.fn(),
+      setSubnet: jest.fn(),
     };
     regionsActions = {
       fetchItems: jest.fn(),
     };
+    vpcsActions = {
+      fetchItems: jest.fn(),
+    };
+    subnetsActions = {
+      fetchItems: jest.fn(),
+    };
     regionsState = {
       ...clusterDropdownStoreState(),
     };
+    vpcsState = {
+      ...clusterDropdownStoreState(),
+    };
+    subnetsState = {
+      ...clusterDropdownStoreState(),
+    };
     store = new Vuex.Store({
+      state,
       actions,
       modules: {
+        vpcs: {
+          namespaced: true,
+          state: vpcsState,
+          actions: vpcsActions,
+        },
         regions: {
           namespaced: true,
           state: regionsState,
           actions: regionsActions,
         },
+        subnets: {
+          namespaced: true,
+          state: subnetsState,
+          actions: subnetsActions,
+        },
       },
     });
   });
@@ -51,6 +82,8 @@ describe('EksClusterConfigurationForm', () => {
   });
 
   const findRegionDropdown = () => vm.find(RegionDropdown);
+  const findVpcDropdown = () => vm.find('[field-id="eks-vpc"]');
+  const findSubnetDropdown = () => vm.find('[field-id="eks-subnet"]');
 
   describe('when mounted', () => {
     it('fetches available regions', () => {
@@ -62,16 +95,72 @@ describe('EksClusterConfigurationForm', () => {
     regionsState.isLoadingItems = true;
 
     return Vue.nextTick().then(() => {
-      expect(findRegionDropdown().props('loading')).toEqual(regionsState.isLoadingItems);
+      expect(findRegionDropdown().props('loading')).toBe(regionsState.isLoadingItems);
     });
   });
 
   it('sets regions to RegionDropdown regions property', () => {
-    expect(findRegionDropdown().props('regions')).toEqual(regionsState.items);
+    expect(findRegionDropdown().props('regions')).toBe(regionsState.items);
   });
 
   it('sets loadingRegionsError to RegionDropdown error property', () => {
-    expect(findRegionDropdown().props('error')).toEqual(regionsState.loadingItemsError);
+    expect(findRegionDropdown().props('error')).toBe(regionsState.loadingItemsError);
+  });
+
+  it('disables VpcDropdown when no region is selected', () => {
+    expect(findVpcDropdown().props('disabled')).toBe(true);
+  });
+
+  it('enables VpcDropdown when no region is selected', () => {
+    state.selectedRegion = { name: 'west-1 ' };
+
+    return Vue.nextTick().then(() => {
+      expect(findVpcDropdown().props('disabled')).toBe(false);
+    });
+  });
+
+  it('sets isLoadingVpcs to VpcDropdown loading property', () => {
+    vpcsState.isLoadingItems = true;
+
+    return Vue.nextTick().then(() => {
+      expect(findVpcDropdown().props('loading')).toBe(vpcsState.isLoadingItems);
+    });
+  });
+
+  it('sets vpcs to VpcDropdown items property', () => {
+    expect(findVpcDropdown().props('items')).toBe(vpcsState.items);
+  });
+
+  it('sets loadingVpcsError to VpcDropdown hasErrors property', () => {
+    expect(findVpcDropdown().props('hasErrors')).toBe(vpcsState.loadingItemsError);
+  });
+
+  it('disables SubnetDropdown when no vpc is selected', () => {
+    expect(findSubnetDropdown().props('disabled')).toBe(true);
+  });
+
+  it('enables SubnetDropdown when a vpc is selected', () => {
+    state.selectedVpc = { name: 'vpc-1 ' };
+
+    return Vue.nextTick().then(() => {
+      expect(findSubnetDropdown().props('disabled')).toBe(false);
+    });
+  });
+
+  it('sets isLoadingSubnets to SubnetDropdown loading property', () => {
+    subnetsState.isLoadingItems = true;
+
+    return Vue.nextTick().then(() => {
+      expect(findSubnetDropdown().props('loading')).toBe(subnetsState.isLoadingItems);
+    });
+  });
+
+  it('sets subnets to SubnetDropdown items property', () => {
+    expect(findSubnetDropdown().props('items')).toBe(subnetsState.items);
+  });
+
+  it('sets loadingSubnetsError to SubnetDropdown hasErrors property', () => {
+    expect(findSubnetDropdown().props('hasErrors')).toBe(subnetsState.loadingItemsError);
   });
 
   describe('when region is selected', () => {
@@ -84,5 +173,37 @@ describe('EksClusterConfigurationForm', () => {
     it('dispatches setRegion action', () => {
       expect(actions.setRegion).toHaveBeenCalledWith(expect.anything(), { region }, undefined);
     });
+
+    it('fetches available vpcs', () => {
+      expect(vpcsActions.fetchItems).toHaveBeenCalledWith(expect.anything(), { region }, undefined);
+    });
+  });
+
+  describe('when vpc is selected', () => {
+    const vpc = { name: 'vpc-1' };
+
+    beforeEach(() => {
+      findVpcDropdown().vm.$emit('input', vpc);
+    });
+
+    it('dispatches setVpc action', () => {
+      expect(actions.setVpc).toHaveBeenCalledWith(expect.anything(), { vpc }, undefined);
+    });
+
+    it('dispatches fetchSubnets action', () => {
+      expect(subnetsActions.fetchItems).toHaveBeenCalledWith(expect.anything(), { vpc }, undefined);
+    });
+  });
+
+  describe('when a subnet is selected', () => {
+    const subnet = { name: 'subnet-1' };
+
+    beforeEach(() => {
+      findSubnetDropdown().vm.$emit('input', subnet);
+    });
+
+    it('dispatches setSubnet action', () => {
+      expect(actions.setSubnet).toHaveBeenCalledWith(expect.anything(), { subnet }, undefined);
+    });
   });
 });
diff --git a/spec/frontend/create_cluster/eks_cluster/store/actions_spec.js b/spec/frontend/create_cluster/eks_cluster/store/actions_spec.js
index 3744ddb3dc6..893c657e699 100644
--- a/spec/frontend/create_cluster/eks_cluster/store/actions_spec.js
+++ b/spec/frontend/create_cluster/eks_cluster/store/actions_spec.js
@@ -1,17 +1,28 @@
 import testAction from 'helpers/vuex_action_helper';
 
 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';
+import { SET_REGION, SET_VPC, SET_SUBNET } from '~/create_cluster/eks_cluster/store/mutation_types';
 
 describe('EKS Cluster Store Actions', () => {
-  describe('setRegion', () => {
-    it(`commits ${types.SET_REGION} mutation`, () => {
-      const region = { name: 'west-1' };
+  let region;
+  let vpc;
+  let subnet;
 
-      testAction(actions.setRegion, { region }, createState(), [
-        { type: types.SET_REGION, payload: { region } },
-      ]);
-    });
+  beforeEach(() => {
+    region = { name: 'regions-1' };
+    vpc = { name: 'vpc-1' };
+    subnet = { name: 'subnet-1' };
+  });
+
+  it.each`
+    action         | mutation      | payload       | payloadDescription
+    ${'setRegion'} | ${SET_REGION} | ${{ region }} | ${'region'}
+    ${'setVpc'}    | ${SET_VPC}    | ${{ vpc }}    | ${'vpc'}
+    ${'setSubnet'} | ${SET_SUBNET} | ${{ subnet }} | ${'subnet'}
+  `(`$action commits $mutation with $payloadDescription payload`, data => {
+    const { action, mutation, payload } = data;
+
+    testAction(actions[action], payload, createState(), [{ type: mutation, payload }]);
   });
 });
diff --git a/spec/frontend/create_cluster/eks_cluster/store/mutations_spec.js b/spec/frontend/create_cluster/eks_cluster/store/mutations_spec.js
index 99f05b0f449..38199471f79 100644
--- a/spec/frontend/create_cluster/eks_cluster/store/mutations_spec.js
+++ b/spec/frontend/create_cluster/eks_cluster/store/mutations_spec.js
@@ -1,19 +1,26 @@
-import { SET_REGION } from '~/create_cluster/eks_cluster/store/mutation_types';
+import { SET_REGION, SET_VPC, SET_SUBNET } 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 region;
+  let vpc;
+  let subnet;
 
   beforeEach(() => {
     region = { name: 'regions-1' };
+    vpc = { name: 'vpc-1' };
+    subnet = { name: 'subnet-1' };
+
     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 sets $mutatedProperty to $expectedValueDescription`, data => {
     const { mutation, mutatedProperty, payload, expectedValue } = data;