Merge branch '194223-move-gke_zone_dropdown_spec' into 'master'

Migrate gke_zone_dropdown_spec to Jest

See merge request gitlab-org/gitlab!25813

spec/javascripts/create_cluster/gke_cluster/components/gke_zone_dropdown_spec.js → spec/frontend/create_cluster/gke_cluster/components/gke_zone_dropdown_spec.js

-import Vue from 'vue';
-import { mountComponentWithStore } from 'spec/helpers/vue_mount_component_helper';
+import { shallowMount } from '@vue/test-utils';
 import GkeZoneDropdown from '~/create_cluster/gke_cluster/components/gke_zone_dropdown.vue';
+import DropdownHiddenInput from '~/vue_shared/components/dropdown/dropdown_hidden_input.vue';
+import DropdownButton from '~/vue_shared/components/dropdown/dropdown_button.vue';
 import { createStore } from '~/create_cluster/gke_cluster/store';
 import {
   SET_PROJECT,
@@ -9,7 +10,7 @@ import {
 } from '~/create_cluster/gke_cluster/store/mutation_types';
 import { selectedZoneMock, selectedProjectMock, gapiZonesResponseMock } from '../mock_data';
 
-const componentConfig = {
+const propsData = {
   fieldId: 'cluster_provider_gcp_attributes_gcp_zone',
   fieldName: 'cluster[provider_gcp_attributes][gcp_zone]',
 };
@@ -20,75 +21,81 @@ const LABELS = {
   DEFAULT: 'Select zone',
 };
 
-const createComponent = (store, props = componentConfig) => {
-  const Component = Vue.extend(GkeZoneDropdown);
-
-  return mountComponentWithStore(Component, {
-    el: null,
-    props,
-    store,
-  });
-};
-
 describe('GkeZoneDropdown', () => {
-  let vm;
   let store;
+  let wrapper;
 
   beforeEach(() => {
     store = createStore();
-    vm = createComponent(store);
+    wrapper = shallowMount(GkeZoneDropdown, { propsData, store });
   });
 
   afterEach(() => {
-    vm.$destroy();
+    wrapper.destroy();
   });
 
   describe('toggleText', () => {
+    let dropdownButton;
+
+    beforeEach(() => {
+      dropdownButton = wrapper.find(DropdownButton);
+    });
+
     it('returns disabled state toggle text', () => {
-      expect(vm.toggleText).toBe(LABELS.DISABLED);
+      expect(dropdownButton.props('toggleText')).toBe(LABELS.DISABLED);
     });
 
-    it('returns loading toggle text', () => {
-      vm.isLoading = true;
+    describe('isLoading', () => {
+      beforeEach(() => {
+        wrapper.setData({ isLoading: true });
+        return wrapper.vm.$nextTick();
+      });
 
-      expect(vm.toggleText).toBe(LABELS.LOADING);
+      it('returns loading toggle text', () => {
+        expect(dropdownButton.props('toggleText')).toBe(LABELS.LOADING);
+      });
     });
 
-    it('returns default toggle text', () => {
-      expect(vm.toggleText).toBe(LABELS.DISABLED);
+    describe('project is set', () => {
+      beforeEach(() => {
+        wrapper.vm.$store.commit(SET_PROJECT, selectedProjectMock);
+        wrapper.vm.$store.commit(SET_PROJECT_BILLING_STATUS, true);
+        return wrapper.vm.$nextTick();
+      });
 
-      vm.$store.commit(SET_PROJECT, selectedProjectMock);
-      vm.$store.commit(SET_PROJECT_BILLING_STATUS, true);
-
-      expect(vm.toggleText).toBe(LABELS.DEFAULT);
+      it('returns default toggle text', () => {
+        expect(dropdownButton.props('toggleText')).toBe(LABELS.DEFAULT);
+      });
     });
 
-    it('returns project name if project selected', () => {
-      vm.setItem(selectedZoneMock);
+    describe('project is selected', () => {
+      beforeEach(() => {
+        wrapper.vm.setItem(selectedZoneMock);
+        return wrapper.vm.$nextTick();
+      });
 
-      expect(vm.toggleText).toBe(selectedZoneMock);
+      it('returns project name if project selected', () => {
+        expect(dropdownButton.props('toggleText')).toBe(selectedZoneMock);
+      });
     });
   });
 
   describe('selectItem', () => {
-    it('reflects new value when dropdown item is clicked', done => {
-      expect(vm.$el.querySelector('input').value).toBe('');
-      vm.$store.commit(SET_ZONES, gapiZonesResponseMock.items);
-
-      return vm
-        .$nextTick()
-        .then(() => {
-          vm.$el.querySelector('.dropdown-content button').click();
-
-          return vm
-            .$nextTick()
-            .then(() => {
-              expect(vm.$el.querySelector('input').value).toBe(selectedZoneMock);
-              done();
-            })
-            .catch(done.fail);
-        })
-        .catch(done.fail);
+    beforeEach(() => {
+      wrapper.vm.$store.commit(SET_ZONES, gapiZonesResponseMock.items);
+      return wrapper.vm.$nextTick();
+    });
+
+    it('reflects new value when dropdown item is clicked', () => {
+      const dropdown = wrapper.find(DropdownHiddenInput);
+
+      expect(dropdown.attributes('value')).toBe('');
+
+      wrapper.find('.dropdown-content button').trigger('click');
+
+      return wrapper.vm.$nextTick().then(() => {
+        expect(dropdown.attributes('value')).toBe(selectedZoneMock);
+      });
     });
   });
 });

spec/javascripts/create_cluster/.eslintrc.yml

-rules:
-  # https://gitlab.com/gitlab-org/gitlab/issues/33025
-  promise/no-nesting: off

spec/javascripts/create_cluster/gke_cluster/mock_data.js

-export const emptyProjectMock = {
-  projectId: '',
-  name: '',
-};
-
-export const selectedProjectMock = {
-  projectId: 'gcp-project-123',
-  name: 'gcp-project',
-};
-
-export const selectedZoneMock = 'us-central1-a';
-
-export const selectedMachineTypeMock = 'n1-standard-2';
-
-export const gapiProjectsResponseMock = {
-  projects: [
-    {
-      projectNumber: '1234',
-      projectId: 'gcp-project-123',
-      lifecycleState: 'ACTIVE',
-      name: 'gcp-project',
-      createTime: '2017-12-16T01:48:29.129Z',
-      parent: {
-        type: 'organization',
-        id: '12345',
-      },
-    },
-  ],
-};
-
-export const gapiZonesResponseMock = {
-  kind: 'compute#zoneList',
-  id: 'projects/gitlab-internal-153318/zones',
-  items: [
-    {
-      kind: 'compute#zone',
-      id: '2000',
-      creationTimestamp: '1969-12-31T16:00:00.000-08:00',
-      name: 'us-central1-a',
-      description: 'us-central1-a',
-      status: 'UP',
-      region:
-        'https://www.googleapis.com/compute/v1/projects/gitlab-internal-153318/regions/us-central1',
-      selfLink:
-        'https://www.googleapis.com/compute/v1/projects/gitlab-internal-153318/zones/us-central1-a',
-      availableCpuPlatforms: ['Intel Skylake', 'Intel Broadwell', 'Intel Sandy Bridge'],
-    },
-  ],
-  selfLink: 'https://www.googleapis.com/compute/v1/projects/gitlab-internal-153318/zones',
-};
-
-export const gapiMachineTypesResponseMock = {
-  kind: 'compute#machineTypeList',
-  id: 'projects/gitlab-internal-153318/zones/us-central1-a/machineTypes',
-  items: [
-    {
-      kind: 'compute#machineType',
-      id: '3002',
-      creationTimestamp: '1969-12-31T16:00:00.000-08:00',
-      name: 'n1-standard-2',
-      description: '2 vCPUs, 7.5 GB RAM',
-      guestCpus: 2,
-      memoryMb: 7680,
-      imageSpaceGb: 10,
-      maximumPersistentDisks: 64,
-      maximumPersistentDisksSizeGb: '65536',
-      zone: 'us-central1-a',
-      selfLink:
-        'https://www.googleapis.com/compute/v1/projects/gitlab-internal-153318/zones/us-central1-a/machineTypes/n1-standard-2',
-      isSharedCpu: false,
-    },
-  ],
-  selfLink:
-    'https://www.googleapis.com/compute/v1/projects/gitlab-internal-153318/zones/us-central1-a/machineTypes',
-};