Migrate gke_machine_type_dropdown_spec.js to jest

Migrate gke machine type dropdown specs from Karma to jest

spec/frontend/create_cluster/gke_cluster/components/gke_machine_type_dropdown_spec.js

+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,
+    sync: false,
+  });
+
+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,
+        );
+      });
+    });
+  });
+});

spec/frontend/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',
+};

spec/javascripts/create_cluster/gke_cluster/components/gke_machine_type_dropdown_spec.js

-import Vue from 'vue';
-import { mountComponentWithStore } from 'spec/helpers/vue_mount_component_helper';
-import GkeMachineTypeDropdown from '~/create_cluster/gke_cluster/components/gke_machine_type_dropdown.vue';
-import { createStore } from '~/create_cluster/gke_cluster/store';
-import {
-  SET_PROJECT,
-  SET_PROJECT_BILLING_STATUS,
-  SET_ZONE,
-  SET_MACHINE_TYPES,
-} from '~/create_cluster/gke_cluster/store/mutation_types';
-import {
-  selectedZoneMock,
-  selectedProjectMock,
-  selectedMachineTypeMock,
-  gapiMachineTypesResponseMock,
-} from '../mock_data';
-
-const componentConfig = {
-  fieldId: 'cluster_provider_gcp_attributes_gcp_machine_type',
-  fieldName: 'cluster[provider_gcp_attributes][gcp_machine_type]',
-};
-
-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 createComponent = (store, props = componentConfig) => {
-  const Component = Vue.extend(GkeMachineTypeDropdown);
-
-  return mountComponentWithStore(Component, {
-    el: null,
-    props,
-    store,
-  });
-};
-
-describe('GkeMachineTypeDropdown', () => {
-  let vm;
-  let store;
-
-  beforeEach(() => {
-    store = createStore();
-    vm = createComponent(store);
-  });
-
-  afterEach(() => {
-    vm.$destroy();
-  });
-
-  describe('shows various toggle text depending on state', () => {
-    it('returns disabled state toggle text when no project and zone are selected', () => {
-      expect(vm.toggleText).toBe(LABELS.DISABLED_NO_PROJECT);
-    });
-
-    it('returns disabled state toggle text when no zone is selected', () => {
-      vm.$store.commit(SET_PROJECT, selectedProjectMock);
-      vm.$store.commit(SET_PROJECT_BILLING_STATUS, true);
-
-      expect(vm.toggleText).toBe(LABELS.DISABLED_NO_ZONE);
-    });
-
-    it('returns loading toggle text', () => {
-      vm.isLoading = true;
-
-      expect(vm.toggleText).toBe(LABELS.LOADING);
-    });
-
-    it('returns default toggle text', () => {
-      expect(vm.toggleText).toBe(LABELS.DISABLED_NO_PROJECT);
-
-      vm.$store.commit(SET_PROJECT, selectedProjectMock);
-      vm.$store.commit(SET_PROJECT_BILLING_STATUS, true);
-      vm.$store.commit(SET_ZONE, selectedZoneMock);
-
-      expect(vm.toggleText).toBe(LABELS.DEFAULT);
-    });
-
-    it('returns machine type name if machine type selected', () => {
-      vm.setItem(selectedMachineTypeMock);
-
-      expect(vm.toggleText).toBe(selectedMachineTypeMock);
-    });
-  });
-
-  describe('form input', () => {
-    it('reflects new value when dropdown item is clicked', done => {
-      expect(vm.$el.querySelector('input').value).toBe('');
-      vm.$store.commit(SET_MACHINE_TYPES, gapiMachineTypesResponseMock.items);
-
-      return vm
-        .$nextTick()
-        .then(() => {
-          vm.$el.querySelector('.dropdown-content button').click();
-
-          return vm
-            .$nextTick()
-            .then(() => {
-              expect(vm.$el.querySelector('input').value).toBe(selectedMachineTypeMock);
-              done();
-            })
-            .catch(done.fail);
-        })
-        .catch(done.fail);
-    });
-  });
-});