1 files changed, 37 insertions, 79 deletions

diff --git a/spec/frontend/monitoring/store/actions_spec.js b/spec/frontend/monitoring/store/actions_spec.js
index 8914f2e66ea..d0290386f12 100644
--- a/spec/frontend/monitoring/store/actions_spec.js
+++ b/spec/frontend/monitoring/store/actions_spec.js
@@ -8,7 +8,7 @@ import createFlash from '~/flash';
 import { defaultTimeRange } from '~/vue_shared/constants';
 import { ENVIRONMENT_AVAILABLE_STATE } from '~/monitoring/constants';
 
-import store from '~/monitoring/stores';
+import { createStore } from '~/monitoring/stores';
 import * as types from '~/monitoring/stores/mutation_types';
 import {
   fetchData,
@@ -26,7 +26,7 @@ import {
   clearExpandedPanel,
   setGettingStartedEmptyState,
   duplicateSystemDashboard,
-  updateVariableValues,
+  updateVariablesAndFetchData,
 } from '~/monitoring/stores/actions';
 import {
   gqClient,
@@ -52,20 +52,16 @@ import {
 
 jest.mock('~/flash');
 
-const resetStore = str => {
-  str.replaceState({
-    showEmptyState: true,
-    emptyState: 'loading',
-    groups: [],
-  });
-};
-
 describe('Monitoring store actions', () => {
   const { convertObjectPropsToCamelCase } = commonUtils;
 
   let mock;
+  let store;
+  let state;
 
   beforeEach(() => {
+    store = createStore();
+    state = store.state.monitoringDashboard;
     mock = new MockAdapter(axios);
 
     jest.spyOn(commonUtils, 'backOff').mockImplementation(callback => {
@@ -83,7 +79,6 @@ describe('Monitoring store actions', () => {
     });
   });
   afterEach(() => {
-    resetStore(store);
     mock.reset();
 
     commonUtils.backOff.mockReset();
@@ -92,8 +87,6 @@ describe('Monitoring store actions', () => {
 
   describe('fetchData', () => {
     it('dispatches fetchEnvironmentsData and fetchEnvironmentsData', () => {
-      const { state } = store;
-
       return testAction(
         fetchData,
         null,
@@ -111,8 +104,6 @@ describe('Monitoring store actions', () => {
       const origGon = window.gon;
       window.gon = { features: { metricsDashboardAnnotations: true } };
 
-      const { state } = store;
-
       return testAction(
         fetchData,
         null,
@@ -131,7 +122,6 @@ describe('Monitoring store actions', () => {
 
   describe('fetchDeploymentsData', () => {
     it('dispatches receiveDeploymentsDataSuccess on success', () => {
-      const { state } = store;
       state.deploymentsEndpoint = '/success';
       mock.onGet(state.deploymentsEndpoint).reply(200, {
         deployments: deploymentData,
@@ -146,7 +136,6 @@ describe('Monitoring store actions', () => {
       );
     });
     it('dispatches receiveDeploymentsDataFailure on error', () => {
-      const { state } = store;
       state.deploymentsEndpoint = '/error';
       mock.onGet(state.deploymentsEndpoint).reply(500);
 
@@ -164,11 +153,8 @@ describe('Monitoring store actions', () => {
   });
 
   describe('fetchEnvironmentsData', () => {
-    const { state } = store;
-    state.projectPath = 'gitlab-org/gitlab-test';
-
-    afterEach(() => {
-      resetStore(store);
+    beforeEach(() => {
+      state.projectPath = 'gitlab-org/gitlab-test';
     });
 
     it('setting SET_ENVIRONMENTS_FILTER should dispatch fetchEnvironmentsData', () => {
@@ -269,17 +255,14 @@ describe('Monitoring store actions', () => {
   });
 
   describe('fetchAnnotations', () => {
-    const { state } = store;
-    state.timeRange = {
-      start: '2020-04-15T12:54:32.137Z',
-      end: '2020-08-15T12:54:32.137Z',
-    };
-    state.projectPath = 'gitlab-org/gitlab-test';
-    state.currentEnvironmentName = 'production';
-    state.currentDashboard = '.gitlab/dashboards/custom_dashboard.yml';
-
-    afterEach(() => {
-      resetStore(store);
+    beforeEach(() => {
+      state.timeRange = {
+        start: '2020-04-15T12:54:32.137Z',
+        end: '2020-08-15T12:54:32.137Z',
+      };
+      state.projectPath = 'gitlab-org/gitlab-test';
+      state.currentEnvironmentName = 'production';
+      state.currentDashboard = '.gitlab/dashboards/custom_dashboard.yml';
     });
 
     it('fetches annotations data and dispatches receiveAnnotationsSuccess', () => {
@@ -353,7 +336,6 @@ describe('Monitoring store actions', () => {
   });
 
   describe('Toggles starred value of current dashboard', () => {
-    const { state } = store;
     let unstarredDashboard;
     let starredDashboard;
 
@@ -379,7 +361,13 @@ describe('Monitoring store actions', () => {
 
         return testAction(toggleStarredValue, null, state, [
           { type: types.REQUEST_DASHBOARD_STARRING },
-          { type: types.RECEIVE_DASHBOARD_STARRING_SUCCESS, payload: true },
+          {
+            type: types.RECEIVE_DASHBOARD_STARRING_SUCCESS,
+            payload: {
+              newStarredValue: true,
+              selectedDashboard: unstarredDashboard,
+            },
+          },
         ]);
       });
 
@@ -396,23 +384,19 @@ describe('Monitoring store actions', () => {
   });
 
   describe('Set initial state', () => {
-    let mockedState;
-    beforeEach(() => {
-      mockedState = storeState();
-    });
     it('should commit SET_INITIAL_STATE mutation', done => {
       testAction(
         setInitialState,
         {
-          metricsEndpoint: 'additional_metrics.json',
+          currentDashboard: '.gitlab/dashboards/dashboard.yml',
           deploymentsEndpoint: 'deployments.json',
         },
-        mockedState,
+        state,
         [
           {
             type: types.SET_INITIAL_STATE,
             payload: {
-              metricsEndpoint: 'additional_metrics.json',
+              currentDashboard: '.gitlab/dashboards/dashboard.yml',
               deploymentsEndpoint: 'deployments.json',
             },
           },
@@ -423,15 +407,11 @@ describe('Monitoring store actions', () => {
     });
   });
   describe('Set empty states', () => {
-    let mockedState;
-    beforeEach(() => {
-      mockedState = storeState();
-    });
     it('should commit SET_METRICS_ENDPOINT mutation', done => {
       testAction(
         setGettingStartedEmptyState,
         null,
-        mockedState,
+        state,
         [
           {
             type: types.SET_GETTING_STARTED_EMPTY_STATE,
@@ -443,23 +423,23 @@ describe('Monitoring store actions', () => {
     });
   });
 
-  describe('updateVariableValues', () => {
-    let mockedState;
-    beforeEach(() => {
-      mockedState = storeState();
-    });
-    it('should commit UPDATE_VARIABLE_VALUES mutation', done => {
+  describe('updateVariablesAndFetchData', () => {
+    it('should commit UPDATE_VARIABLES mutation and fetch data', done => {
       testAction(
-        updateVariableValues,
+        updateVariablesAndFetchData,
         { pod: 'POD' },
-        mockedState,
+        state,
         [
           {
-            type: types.UPDATE_VARIABLE_VALUES,
+            type: types.UPDATE_VARIABLES,
             payload: { pod: 'POD' },
           },
         ],
-        [],
+        [
+          {
+            type: 'fetchDashboardData',
+          },
+        ],
         done,
       );
     });
@@ -467,13 +447,11 @@ describe('Monitoring store actions', () => {
 
   describe('fetchDashboard', () => {
     let dispatch;
-    let state;
     let commit;
     const response = metricsDashboardResponse;
     beforeEach(() => {
       dispatch = jest.fn();
       commit = jest.fn();
-      state = storeState();
       state.dashboardEndpoint = '/dashboard';
     });
 
@@ -557,12 +535,10 @@ describe('Monitoring store actions', () => {
   describe('receiveMetricsDashboardSuccess', () => {
     let commit;
     let dispatch;
-    let state;
 
     beforeEach(() => {
       commit = jest.fn();
       dispatch = jest.fn();
-      state = storeState();
     });
 
     it('stores groups', () => {
@@ -623,13 +599,11 @@ describe('Monitoring store actions', () => {
   describe('fetchDashboardData', () => {
     let commit;
     let dispatch;
-    let state;
 
     beforeEach(() => {
       jest.spyOn(Tracking, 'event');
       commit = jest.fn();
       dispatch = jest.fn();
-      state = storeState();
 
       state.timeRange = defaultTimeRange;
     });
@@ -731,7 +705,6 @@ describe('Monitoring store actions', () => {
       step: 60,
     };
     let metric;
-    let state;
     let data;
     let prometheusEndpointPath;
 
@@ -929,10 +902,7 @@ describe('Monitoring store actions', () => {
   });
 
   describe('duplicateSystemDashboard', () => {
-    let state;
-
     beforeEach(() => {
-      state = storeState();
       state.dashboardsEndpoint = '/dashboards.json';
     });
 
@@ -1010,12 +980,6 @@ describe('Monitoring store actions', () => {
   });
 
   describe('setExpandedPanel', () => {
-    let state;
-
-    beforeEach(() => {
-      state = storeState();
-    });
-
     it('Sets a panel as expanded', () => {
       const group = 'group_1';
       const panel = { title: 'A Panel' };
@@ -1031,12 +995,6 @@ describe('Monitoring store actions', () => {
   });
 
   describe('clearExpandedPanel', () => {
-    let state;
-
-    beforeEach(() => {
-      state = storeState();
-    });
-
     it('Clears a panel as expanded', () => {
       return testAction(
         clearExpandedPanel,