fix tests

each suite needs its own instance of the store, but the state has to be returned via a factory otherwise the suites all share the same reference to one state object

app/assets/javascripts/projects/gke_cluster_dropdowns/store/index.js

@@ -3,13 +3,16 @@ import Vuex from 'vuex';
 import * as actions from './actions';
 import * as getters from './getters';
 import mutations from './mutations';
-import state from './state';
+import { state } from './state';
 
 Vue.use(Vuex);
 
-export default new Vuex.Store({
-  actions,
-  getters,
-  mutations,
-  state,
-});
+export const createStore = () =>
+  new Vuex.Store({
+    actions,
+    getters,
+    mutations,
+    state: state(),
+  });
+
+export default createStore();

app/assets/javascripts/projects/gke_cluster_dropdowns/store/state.js

-export default {
+export const state = () => ({
   selectedProject: {
     projectId: '',
     name: '',
@@ -9,4 +9,6 @@ export default {
   projects: [],
   zones: [],
   machineTypes: [],
-};
+});
+
+export default state();

spec/javascripts/projects/gke_cluster_dropdowns/components/gke_machine_type_dropdown_spec.js

 import Vue from 'vue';
 import GkeMachineTypeDropdown from '~/projects/gke_cluster_dropdowns/components/gke_machine_type_dropdown.vue';
+import { createStore } from '~/projects/gke_cluster_dropdowns/store';
 import {
   SET_PROJECT,
+  SET_PROJECT_BILLING_STATUS,
   SET_ZONE,
   SET_MACHINE_TYPES,
 } from '~/projects/gke_cluster_dropdowns/store/mutation_types';
-import mountComponent from 'spec/helpers/vue_mount_component_helper';
-
-import { resetStore } from '../helpers';
+import { mountComponentWithStore } from 'spec/helpers/vue_mount_component_helper';
 import {
   selectedZoneMock,
   selectedProjectMock,
@@ -27,23 +27,27 @@ const LABELS = {
   DEFAULT: 'Select machine type',
 };
 
-const createComponent = (config = componentConfig) => {
+const createComponent = (store, props = componentConfig) => {
   const Component = Vue.extend(GkeMachineTypeDropdown);
 
-  return mountComponent(Component, config);
+  return mountComponentWithStore(Component, {
+    el: null,
+    props,
+    store,
+  });
 };
 
 describe('GkeMachineTypeDropdown', () => {
   let vm;
+  let store;
 
   beforeEach(() => {
-    vm = createComponent();
+    store = createStore();
+    vm = createComponent(store);
   });
 
   afterEach(() => {
     vm.$destroy();
-
-    resetStore(vm.$store);
   });
 
   describe('shows various toggle text depending on state', () => {
@@ -53,6 +57,7 @@ describe('GkeMachineTypeDropdown', () => {
 
     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);
     });
@@ -67,6 +72,7 @@ describe('GkeMachineTypeDropdown', () => {
       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);

spec/javascripts/projects/gke_cluster_dropdowns/components/gke_project_id_dropdown_spec.js

 import Vue from 'vue';
 import GkeProjectIdDropdown from '~/projects/gke_cluster_dropdowns/components/gke_project_id_dropdown.vue';
+import { createStore } from '~/projects/gke_cluster_dropdowns/store';
 import { SET_PROJECTS } from '~/projects/gke_cluster_dropdowns/store/mutation_types';
-import mountComponent from 'spec/helpers/vue_mount_component_helper';
-
-import { resetStore } from '../helpers';
+import { mountComponentWithStore } from 'spec/helpers/vue_mount_component_helper';
 import { emptyProjectMock, selectedProjectMock } from '../mock_data';
 
 const componentConfig = {
@@ -18,23 +17,27 @@ const LABELS = {
   EMPTY: 'No projects found',
 };
 
-const createComponent = (config = componentConfig) => {
+const createComponent = (store, props = componentConfig) => {
   const Component = Vue.extend(GkeProjectIdDropdown);
 
-  return mountComponent(Component, config);
+  return mountComponentWithStore(Component, {
+    el: null,
+    props,
+    store,
+  });
 };
 
 describe('GkeProjectIdDropdown', () => {
   let vm;
+  let store;
 
   beforeEach(() => {
-    vm = createComponent();
+    store = createStore();
+    vm = createComponent(store);
   });
 
   afterEach(() => {
     vm.$destroy();
-
-    resetStore(vm.$store);
   });
 
   describe('toggleText', () => {

spec/javascripts/projects/gke_cluster_dropdowns/components/gke_zone_dropdown_spec.js

 import Vue from 'vue';
 import GkeZoneDropdown from '~/projects/gke_cluster_dropdowns/components/gke_zone_dropdown.vue';
-import { SET_PROJECT, SET_ZONES } from '~/projects/gke_cluster_dropdowns/store/mutation_types';
-import mountComponent from 'spec/helpers/vue_mount_component_helper';
-
-import { resetStore } from '../helpers';
+import { createStore } from '~/projects/gke_cluster_dropdowns/store';
+import {
+  SET_PROJECT,
+  SET_ZONES,
+  SET_PROJECT_BILLING_STATUS,
+} from '~/projects/gke_cluster_dropdowns/store/mutation_types';
+import { mountComponentWithStore } from 'spec/helpers/vue_mount_component_helper';
 import { selectedZoneMock, selectedProjectMock, gapiZonesResponseMock } from '../mock_data';
 
 const componentConfig = {
@@ -17,23 +20,27 @@ const LABELS = {
   DEFAULT: 'Select zone',
 };
 
-const createComponent = (config = componentConfig) => {
+const createComponent = (store, props = componentConfig) => {
   const Component = Vue.extend(GkeZoneDropdown);
 
-  return mountComponent(Component, config);
+  return mountComponentWithStore(Component, {
+    el: null,
+    props,
+    store,
+  });
 };
 
 describe('GkeZoneDropdown', () => {
   let vm;
+  let store;
 
   beforeEach(() => {
-    vm = createComponent();
+    store = createStore();
+    vm = createComponent(store);
   });
 
   afterEach(() => {
     vm.$destroy();
-
-    resetStore(vm.$store);
   });
 
   describe('toggleText', () => {
@@ -51,6 +58,8 @@ describe('GkeZoneDropdown', () => {
       expect(vm.toggleText).toBe(LABELS.DISABLED);
 
       vm.$store.commit(SET_PROJECT, selectedProjectMock);
+      vm.$store.commit(SET_PROJECT_BILLING_STATUS, true);
+
       expect(vm.toggleText).toBe(LABELS.DEFAULT);
     });
 

spec/javascripts/projects/gke_cluster_dropdowns/helpers.js

@@ -4,24 +4,19 @@ import {
   gapiMachineTypesResponseMock,
 } from './mock_data';
 
-// eslint-disable-next-line import/prefer-default-export
-export const resetStore = store => {
-  store.replaceState({
-    selectedProject: {
-      projectId: '',
-      name: '',
-    },
-    selectedZone: '',
-    selectedMachineType: '',
-    projects: [],
-    zones: [],
-    machineTypes: [],
-  });
-};
-
 // eslint-disable-next-line import/prefer-default-export
 export const gapi = () => ({
   client: {
+    cloudbilling: {
+      projects: {
+        getBillingInfo: () =>
+          new Promise(resolve => {
+            resolve({
+              result: { billingEnabled: true },
+            });
+          }),
+      },
+    },
     cloudresourcemanager: {
       projects: {
         list: () =>

spec/javascripts/projects/gke_cluster_dropdowns/stores/actions_spec.js

 import testAction from 'spec/helpers/vuex_action_helper';
 import * as actions from '~/projects/gke_cluster_dropdowns/store/actions';
-import store from '~/projects/gke_cluster_dropdowns/store';
-import { resetStore, gapi } from '../helpers';
+import { createStore } from '~/projects/gke_cluster_dropdowns/store';
+import { gapi } from '../helpers';
 import { selectedProjectMock, selectedZoneMock, selectedMachineTypeMock } from '../mock_data';
 
 describe('GCP Cluster Dropdown Store Actions', () => {
-  afterEach(() => {
-    resetStore(store);
+  let store;
+
+  beforeEach(() => {
+    store = createStore();
   });
 
   describe('setProject', () => {