Migrate project_id dropdown tests to jest

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

+import { shallowMount, createLocalVue } from '@vue/test-utils';
+import Vuex from 'vuex';
+import createState from '~/create_cluster/gke_cluster/store/state';
+import { selectedProjectMock, gapiProjectsResponseMock } from '../mock_data';
+import GkeProjectIdDropdown from '~/create_cluster/gke_cluster/components/gke_project_id_dropdown.vue';
+import DropdownButton from '~/vue_shared/components/dropdown/dropdown_button.vue';
+import DropdownHiddenInput from '~/vue_shared/components/dropdown/dropdown_hidden_input.vue';
+
+const componentConfig = {
+  docsUrl: 'https://console.cloud.google.com/home/dashboard',
+  fieldId: 'cluster_provider_gcp_attributes_gcp_project_id',
+  fieldName: 'cluster[provider_gcp_attributes][gcp_project_id]',
+};
+
+const LABELS = {
+  LOADING: 'Fetching projects',
+  VALIDATING_PROJECT_BILLING: 'Validating project billing status',
+  DEFAULT: 'Select project',
+  EMPTY: 'No projects found',
+};
+
+const localVue = createLocalVue();
+
+localVue.use(Vuex);
+
+describe('GkeProjectIdDropdown', () => {
+  let wrapper;
+  let vuexStore;
+  let setProject;
+
+  beforeEach(() => {
+    setProject = jest.fn();
+  });
+
+  const createStore = (initialState = {}, getters = {}) =>
+    new Vuex.Store({
+      state: {
+        ...createState(),
+        ...initialState,
+      },
+      actions: {
+        fetchProjects: jest.fn().mockResolvedValueOnce([]),
+        setProject,
+      },
+      getters: {
+        hasProject: () => false,
+        ...getters,
+      },
+    });
+
+  const createComponent = (store, propsData = componentConfig) =>
+    shallowMount(GkeProjectIdDropdown, {
+      propsData,
+      store,
+      localVue,
+    });
+
+  const bootstrap = (initialState, getters) => {
+    vuexStore = createStore(initialState, getters);
+    wrapper = createComponent(vuexStore);
+  };
+
+  const dropdownButtonLabel = () => wrapper.find(DropdownButton).props('toggleText');
+  const dropdownHiddenInputValue = () => wrapper.find(DropdownHiddenInput).props('value');
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  describe('toggleText', () => {
+    it('returns loading toggle text', () => {
+      bootstrap();
+
+      expect(dropdownButtonLabel()).toBe(LABELS.LOADING);
+    });
+
+    it('returns project billing validation text', () => {
+      bootstrap({ isValidatingProjectBilling: true });
+
+      expect(dropdownButtonLabel()).toBe(LABELS.VALIDATING_PROJECT_BILLING);
+    });
+
+    it('returns default toggle text', () => {
+      bootstrap();
+
+      wrapper.setData({ isLoading: false });
+
+      return wrapper.vm.$nextTick().then(() => {
+        expect(dropdownButtonLabel()).toBe(LABELS.DEFAULT);
+      });
+    });
+
+    it('returns project name if project selected', () => {
+      bootstrap(
+        {
+          selectedProject: selectedProjectMock,
+        },
+        {
+          hasProject: () => true,
+        },
+      );
+      wrapper.setData({ isLoading: false });
+
+      return wrapper.vm.$nextTick().then(() => {
+        expect(dropdownButtonLabel()).toBe(selectedProjectMock.name);
+      });
+    });
+
+    it('returns empty toggle text', () => {
+      bootstrap({
+        projects: null,
+      });
+      wrapper.setData({ isLoading: false });
+
+      return wrapper.vm.$nextTick().then(() => {
+        expect(dropdownButtonLabel()).toBe(LABELS.EMPTY);
+      });
+    });
+  });
+
+  describe('selectItem', () => {
+    it('reflects new value when dropdown item is clicked', () => {
+      bootstrap({ projects: gapiProjectsResponseMock.projects });
+
+      expect(dropdownHiddenInputValue()).toBe('');
+
+      wrapper.find('.dropdown-content button').trigger('click');
+
+      return wrapper.vm.$nextTick().then(() => {
+        expect(setProject).toHaveBeenCalledWith(
+          expect.anything(),
+          gapiProjectsResponseMock.projects[0],
+          undefined,
+        );
+      });
+    });
+  });
+});

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

-import Vue from 'vue';
-import { mountComponentWithStore } from 'spec/helpers/vue_mount_component_helper';
-import GkeProjectIdDropdown from '~/create_cluster/gke_cluster/components/gke_project_id_dropdown.vue';
-import { createStore } from '~/create_cluster/gke_cluster/store';
-import { SET_PROJECTS } from '~/create_cluster/gke_cluster/store/mutation_types';
-import { emptyProjectMock, selectedProjectMock } from '../mock_data';
-import { gapi } from '../helpers';
-
-const componentConfig = {
-  docsUrl: 'https://console.cloud.google.com/home/dashboard',
-  fieldId: 'cluster_provider_gcp_attributes_gcp_project_id',
-  fieldName: 'cluster[provider_gcp_attributes][gcp_project_id]',
-};
-
-const LABELS = {
-  LOADING: 'Fetching projects',
-  VALIDATING_PROJECT_BILLING: 'Validating project billing status',
-  DEFAULT: 'Select project',
-  EMPTY: 'No projects found',
-};
-
-const createComponent = (store, props = componentConfig) => {
-  const Component = Vue.extend(GkeProjectIdDropdown);
-
-  return mountComponentWithStore(Component, {
-    el: null,
-    props,
-    store,
-  });
-};
-
-describe('GkeProjectIdDropdown', () => {
-  let vm;
-  let store;
-
-  let originalGapi;
-  beforeAll(() => {
-    originalGapi = window.gapi;
-    window.gapi = gapi();
-  });
-
-  afterAll(() => {
-    window.gapi = originalGapi;
-  });
-
-  beforeEach(() => {
-    store = createStore();
-    vm = createComponent(store);
-  });
-
-  afterEach(() => {
-    vm.$destroy();
-  });
-
-  describe('toggleText', () => {
-    it('returns loading toggle text', () => {
-      expect(vm.toggleText).toBe(LABELS.LOADING);
-    });
-
-    it('returns project billing validation text', () => {
-      vm.setIsValidatingProjectBilling(true);
-
-      expect(vm.toggleText).toBe(LABELS.VALIDATING_PROJECT_BILLING);
-    });
-
-    it('returns default toggle text', done =>
-      setTimeout(() => {
-        vm.setItem(emptyProjectMock);
-
-        expect(vm.toggleText).toBe(LABELS.DEFAULT);
-
-        done();
-      }));
-
-    it('returns project name if project selected', done =>
-      setTimeout(() => {
-        vm.isLoading = false;
-
-        expect(vm.toggleText).toBe(selectedProjectMock.name);
-
-        done();
-      }));
-
-    it('returns empty toggle text', done =>
-      setTimeout(() => {
-        vm.$store.commit(SET_PROJECTS, null);
-        vm.setItem(emptyProjectMock);
-
-        expect(vm.toggleText).toBe(LABELS.EMPTY);
-
-        done();
-      }));
-  });
-
-  describe('selectItem', () => {
-    it('reflects new value when dropdown item is clicked', done => {
-      expect(vm.$el.querySelector('input').value).toBe('');
-
-      return vm
-        .$nextTick()
-        .then(() => {
-          vm.$el.querySelector('.dropdown-content button').click();
-
-          return vm
-            .$nextTick()
-            .then(() => {
-              expect(vm.$el.querySelector('input').value).toBe(selectedProjectMock.projectId);
-              done();
-            })
-            .catch(done.fail);
-        })
-        .catch(done.fail);
-    });
-  });
-});