Fix deprecated methods in reports tests

app/assets/javascripts/reports/accessibility_report/store/index.js

@@ -7,10 +7,11 @@ import state from './state';
 
 Vue.use(Vuex);
 
-export default initialState =>
-  new Vuex.Store({
+export const getStoreConfig = initialState => ({
   actions,
   getters,
   mutations,
   state: state(initialState),
-  });
+});
+
+export default initialState => new Vuex.Store(getStoreConfig(initialState));

app/assets/javascripts/reports/codequality_report/store/index.js

@@ -7,10 +7,11 @@ import state from './state';
 
 Vue.use(Vuex);
 
-export default initialState =>
-  new Vuex.Store({
+export const getStoreConfig = initialState => ({
   actions,
   getters,
   mutations,
   state: state(initialState),
-  });
+});
+
+export default initialState => new Vuex.Store(getStoreConfig(initialState));

app/assets/javascripts/reports/store/index.js

@@ -7,10 +7,11 @@ import state from './state';
 
 Vue.use(Vuex);
 
-export default () =>
-  new Vuex.Store({
+export const getStoreConfig = () => ({
   actions,
   mutations,
   getters,
   state: state(),
-  });
+});
+
+export default () => new Vuex.Store(getStoreConfig());

spec/frontend/reports/accessibility_report/grouped_accessibility_reports_app_spec.js

@@ -2,7 +2,7 @@ import { mount, createLocalVue } from '@vue/test-utils';
 import Vuex from 'vuex';
 import GroupedAccessibilityReportsApp from '~/reports/accessibility_report/grouped_accessibility_reports_app.vue';
 import AccessibilityIssueBody from '~/reports/accessibility_report/components/accessibility_issue_body.vue';
-import store from '~/reports/accessibility_report/store';
+import { getStoreConfig } from '~/reports/accessibility_report/store';
 import { mockReport } from './mock_data';
 
 const localVue = createLocalVue();
@@ -20,16 +20,17 @@ describe('Grouped accessibility reports app', () => {
       propsData: {
         endpoint: 'endpoint.json',
       },
-      methods: {
-        fetchReport: () => {},
-      },
     });
   };
 
   const findHeader = () => wrapper.find('[data-testid="report-section-code-text"]');
 
   beforeEach(() => {
-    mockStore = store();
+    mockStore = new Vuex.Store({
+      ...getStoreConfig(),
+      actions: { fetchReport: () => {}, setEndpoint: () => {} },
+    });
+
     mountComponent();
   });
 

spec/frontend/reports/codequality_report/grouped_codequality_reports_app_spec.js

@@ -2,7 +2,7 @@ import { mount, createLocalVue } from '@vue/test-utils';
 import Vuex from 'vuex';
 import GroupedCodequalityReportsApp from '~/reports/codequality_report/grouped_codequality_reports_app.vue';
 import CodequalityIssueBody from '~/reports/codequality_report/components/codequality_issue_body.vue';
-import store from '~/reports/codequality_report/store';
+import { getStoreConfig } from '~/reports/codequality_report/store';
 import { mockParsedHeadIssues, mockParsedBaseIssues } from './mock_data';
 
 const localVue = createLocalVue();
@@ -13,21 +13,22 @@ describe('Grouped code quality reports app', () => {
   let wrapper;
   let mockStore;
 
+  const PATHS = {
+    codequalityHelpPath: 'codequality_help.html',
+    basePath: 'base.json',
+    headPath: 'head.json',
+    baseBlobPath: 'base/blob/path/',
+    headBlobPath: 'head/blob/path/',
+  };
+
   const mountComponent = (props = {}) => {
     wrapper = mount(Component, {
       store: mockStore,
       localVue,
       propsData: {
-        basePath: 'base.json',
-        headPath: 'head.json',
-        baseBlobPath: 'base/blob/path/',
-        headBlobPath: 'head/blob/path/',
-        codequalityHelpPath: 'codequality_help.html',
+        ...PATHS,
         ...props,
       },
-      methods: {
-        fetchReports: () => {},
-      },
     });
   };
 
@@ -35,7 +36,19 @@ describe('Grouped code quality reports app', () => {
   const findIssueBody = () => wrapper.find(CodequalityIssueBody);
 
   beforeEach(() => {
-    mockStore = store();
+    const { state, ...storeConfig } = getStoreConfig();
+    mockStore = new Vuex.Store({
+      ...storeConfig,
+      actions: {
+        setPaths: () => {},
+        fetchReports: () => {},
+      },
+      state: {
+        ...state,
+        ...PATHS,
+      },
+    });
+
     mountComponent();
   });
 

spec/frontend/reports/components/grouped_test_reports_app_spec.js

 import { mount, createLocalVue } from '@vue/test-utils';
 import Vuex from 'vuex';
 import GroupedTestReportsApp from '~/reports/components/grouped_test_reports_app.vue';
-import store from '~/reports/store';
+import { getStoreConfig } from '~/reports/store';
 
 import { failedReport } from '../mock_data/mock_data';
 import successTestReports from '../mock_data/no_failures_report.json';
@@ -29,9 +29,6 @@ describe('Grouped test reports app', () => {
         pipelinePath,
         ...props,
       },
-      methods: {
-        fetchReports: () => {},
-      },
     });
   };
 
@@ -49,7 +46,13 @@ describe('Grouped test reports app', () => {
     wrapper.findAll('[data-testid="test-issue-body-description"]');
 
   beforeEach(() => {
-    mockStore = store();
+    mockStore = new Vuex.Store({
+      ...getStoreConfig(),
+      actions: {
+        fetchReports: () => {},
+        setEndpoint: () => {},
+      },
+    });
     mountComponent();
   });