Update VSA action specs

Updates the routes used in the VSA
actions to ensure they now include
the selected value stream

ee/app/assets/javascripts/analytics/cycle_analytics/components/base.vue

@@ -106,7 +106,7 @@ export default {
     shouldDisplayTypeOfWorkCharts() {
       return !this.hasNoAccessError && !this.isLoading;
     },
-    shouldDsiplayPathNavigation() {
+    shouldDisplayPathNavigation() {
       return this.featureFlags.hasPathNavigation && !this.hasNoAccessError && this.selectedStage;
     },
     shouldDisplayFilterBar() {
@@ -227,7 +227,7 @@ export default {
     </div>
     <div class="mw-100">
       <div class="mt-3 py-2 px-3 bg-gray-light border-top border-bottom">
-        <div v-if="shouldDsiplayPathNavigation" class="w-100 pb-2">
+        <div v-if="shouldDisplayPathNavigation" class="w-100 pb-2">
           <path-navigation
             class="js-path-navigation"
             :loading="isLoading"

ee/app/assets/javascripts/analytics/cycle_analytics/store/actions.js

@@ -66,11 +66,13 @@ export const receiveStageMedianValuesError = ({ commit }) => {
   createFlash(__('There was an error fetching median data for stages'));
 };
 
-const fetchStageMedian = (currentGroupPath, stageId, params) =>
-  Api.cycleAnalyticsStageMedian(currentGroupPath, stageId, params).then(({ data }) => ({
+const fetchStageMedian = (currentGroupPath, currentValueStreamId, stageId, params) =>
+  Api.cycleAnalyticsStageMedian(currentGroupPath, currentValueStreamId, stageId, params).then(
+    ({ data }) => ({
       id: stageId,
       ...data,
-  }));
+    }),
+  );
 
 export const fetchStageMedianValues = ({ dispatch, getters }) => {
   const {
@@ -160,13 +162,13 @@ export const fetchGroupStagesAndEvents = ({ dispatch, getters }) => {
     currentGroupPath: groupId,
     cycleAnalyticsRequestParams: { created_after, project_ids },
   } = getters;
+
   dispatch('requestGroupStages');
   dispatch('customStages/setStageEvents', []);
 
-  return Api.cycleAnalyticsGroupStagesAndEvents({
-    groupId,
-    valueStreamId,
-    params: { start_date: created_after, project_ids },
+  return Api.cycleAnalyticsGroupStagesAndEvents(groupId, valueStreamId, {
+    start_date: created_after,
+    project_ids,
   })
     .then(({ data: { stages = [], events = [] } }) => {
       dispatch('receiveGroupStagesSuccess', stages);
@@ -233,14 +235,11 @@ export const receiveRemoveStageError = ({ commit }) => {
   createFlash(__('There was an error removing your custom stage, please try again'));
 };
 
-export const removeStage = ({ dispatch, state }, stageId) => {
-  const {
-    selectedGroup: { fullPath },
-  } = state;
-
+export const removeStage = ({ dispatch, getters }, stageId) => {
+  const { currentGroupPath, currentValueStreamId } = getters;
   dispatch('requestRemoveStage');
 
-  return Api.cycleAnalyticsRemoveStage(stageId, fullPath)
+  return Api.cycleAnalyticsRemoveStage(currentGroupPath, currentValueStreamId, stageId)
     .then(() => dispatch('receiveRemoveStageSuccess'))
     .catch(error => dispatch('receiveRemoveStageError', error));
 };
@@ -303,7 +302,7 @@ export const receiveCreateValueStreamSuccess = ({ commit, dispatch }) => {
 
 export const createValueStream = ({ commit, dispatch, getters }, data) => {
   const { currentGroupPath } = getters;
-  commit(types.REQUEST_CREATE_VALUE_STREAM);cycleAnalyticsSummaryData
+  commit(types.REQUEST_CREATE_VALUE_STREAM);
 
   return Api.cycleAnalyticsCreateValueStream(currentGroupPath, data)
     .then(() => dispatch('receiveCreateValueStreamSuccess'))

ee/app/assets/javascripts/analytics/cycle_analytics/store/modules/duration_chart/actions.js

@@ -22,7 +22,6 @@ export const receiveDurationDataError = ({ commit }) => {
 
 export const fetchDurationData = ({ dispatch, rootGetters }) => {
   dispatch('requestDurationData');
-
   const {
     cycleAnalyticsRequestParams,
     activeStages,

ee/spec/frontend/analytics/cycle_analytics/components/base_spec.js

@@ -78,6 +78,7 @@ function createComponent({
   },
   shallow = true,
   withStageSelected = false,
+  withValueStreamSelected = true,
   featureFlags = {},
   props = {},
 } = {}) {
@@ -90,7 +91,6 @@ function createComponent({
       emptyStateSvgPath,
       noDataSvgPath,
       noAccessSvgPath,
-      baseStagesEndpoint: mockData.endpoints.baseStagesEndpoint,
       hideGroupDropDown,
       ...props,
     },
@@ -107,6 +107,10 @@ function createComponent({
     },
   });
 
+  if (withValueStreamSelected) {
+    comp.vm.$store.dispatch('receiveValueStreamsSuccess', mockData.valueStreams);
+  }
+
   if (withStageSelected) {
     comp.vm.$store.commit('SET_SELECTED_GROUP', {
       ...selectedGroup,
@@ -533,6 +537,7 @@ describe('Cycle Analytics component', () => {
           describe('enabled', () => {
             beforeEach(() => {
               wrapper = createComponent({
+                withValueStreamSelected: false,
                 withStageSelected: true,
                 pathNavigationEnabled: true,
               });
@@ -544,7 +549,7 @@ describe('Cycle Analytics component', () => {
               return waitForPromises();
             });
 
-            it('displays the path navigation', () => {
+            it('does not display the path navigation', () => {
               displaysPathNavigation(false);
             });
           });

ee/spec/frontend/analytics/cycle_analytics/mock_data.js

@@ -29,10 +29,10 @@ export const endpoints = {
   groupLabels: /groups\/[A-Z|a-z|\d|\-|_]+\/-\/labels.json/,
   recentActivityData: /analytics\/value_stream_analytics\/summary/,
   timeMetricsData: /analytics\/value_stream_analytics\/time_summary/,
-  durationData: /analytics\/value_stream_analytics\/stages\/\d+\/duration_chart/,
-  stageData: /analytics\/value_stream_analytics\/stages\/\d+\/records/,
-  stageMedian: /analytics\/value_stream_analytics\/stages\/\d+\/median/,
-  baseStagesEndpoint: /analytics\/value_stream_analytics\/stages$/,
+  durationData: /analytics\/value_stream_analytics\/value_streams\/\d+\/stages\/\d+\/duration_chart/,
+  stageData: /analytics\/value_stream_analytics\/value_streams\/\d+\/stages\/\d+\/records/,
+  stageMedian: /analytics\/value_stream_analytics\/value_streams\/\d+\/stages\/\d+\/median/,
+  baseStagesEndpoint: /analytics\/value_stream_analytics\/value_streams\/\d+\/stages$/,
   tasksByTypeData: /analytics\/type_of_work\/tasks_by_type/,
   tasksByTypeTopLabelsData: /analytics\/type_of_work\/tasks_by_type\/top_labels/,
   valueStreamData: /analytics\/value_stream_analytics\/value_streams/,

ee/spec/frontend/analytics/cycle_analytics/store/actions_spec.js

@@ -28,8 +28,13 @@ const [selectedStage] = activeStages;
 const selectedStageSlug = selectedStage.slug;
 const [selectedValueStream] = valueStreams;
 
+const mockGetters = {
+  currentGroupPath: () => selectedGroup.fullPath,
+  currentValueStreamId: () => selectedValueStream.id,
+};
+
 const stageEndpoint = ({ stageId }) =>
-  `/groups/${selectedGroup.fullPath}/-/analytics/value_stream_analytics/stages/${stageId}`;
+  `/groups/${selectedGroup.fullPath}/-/analytics/value_stream_analytics/value_streams/${selectedValueStream.id}/stages/${stageId}`;
 
 jest.mock('~/flash');
 
@@ -52,6 +57,8 @@ describe('Cycle analytics actions', () => {
         hasDurationChartMedian: true,
       },
       activeStages,
+      selectedValueStream,
+      ...mockGetters,
     };
     mock = new MockAdapter(axios);
   });
@@ -437,7 +444,6 @@ describe('Cycle analytics actions', () => {
 
     beforeEach(() => {
       mock.onPut(stageEndpoint({ stageId }), payload).replyOnce(httpStatusCodes.OK, payload);
-      state = { selectedGroup };
     });
 
     it('dispatches receiveUpdateStageSuccess and customStages/setSavingCustomStage', () => {
@@ -583,7 +589,6 @@ describe('Cycle analytics actions', () => {
 
     beforeEach(() => {
       mock.onDelete(stageEndpoint({ stageId })).replyOnce(httpStatusCodes.OK);
-      state = { selectedGroup };
     });
 
     it('dispatches receiveRemoveStageSuccess with put request response data', () => {
@@ -820,10 +825,6 @@ describe('Cycle analytics actions', () => {
     const stageId = 'cool-stage';
     const payload = { id: stageId, move_after_id: '2', move_before_id: '8' };
 
-    beforeEach(() => {
-      state = { selectedGroup };
-    });
-
     describe('with no errors', () => {
       beforeEach(() => {
         mock.onPut(stageEndpoint({ stageId })).replyOnce(httpStatusCodes.OK);

ee/spec/frontend/analytics/cycle_analytics/store/modules/duration_chart/actions_spec.js

@@ -15,6 +15,7 @@ import {
   transformedDurationData,
   transformedDurationMedianData,
   endpoints,
+  valueStreams,
 } from '../../../mock_data';
 import { shouldFlashAMessage } from '../../../helpers';
 
@@ -22,26 +23,30 @@ const selectedGroup = { fullPath: group.path };
 const [stage1, stage2] = stages;
 const hiddenStage = { ...stage1, hidden: true, id: 3, slug: 3 };
 const activeStages = [stage1, stage2];
+const [selectedValueStream] = valueStreams;
 
 const rootState = {
   startDate,
   endDate,
   stages: [...activeStages, hiddenStage],
   selectedGroup,
+  selectedValueStream,
   featureFlags: {
     hasDurationChart: true,
     hasDurationChartMedian: true,
   },
-  getters,
-  rootGetters: {
-    ...rootGetters,
-    activeStages,
-  },
 };
 
 describe('DurationChart actions', () => {
-  let state;
   let mock;
+  const state = {
+    ...rootState,
+    ...getters,
+    ...rootGetters,
+    activeStages,
+    currentGroupPath: () => selectedGroup.fullPath,
+    currentValueStreamId: () => selectedValueStream.id,
+  };
 
   beforeEach(() => {
     mock = new MockAdapter(axios);
@@ -60,7 +65,7 @@ describe('DurationChart actions', () => {
       return testAction(
         actions.fetchDurationData,
         null,
-        { activeStages },
+        state,
         [],
         [
           { type: 'requestDurationData' },
@@ -77,7 +82,11 @@ describe('DurationChart actions', () => {
       return actions
         .fetchDurationData({
           dispatch,
-          ...rootState,
+          rootState,
+          rootGetters: {
+            ...rootGetters,
+            activeStages,
+          },
         })
         .then(() => {
           const requestedUrls = mock.history.get.map(({ url }) => url);
@@ -98,7 +107,11 @@ describe('DurationChart actions', () => {
         return actions
           .fetchDurationData({
             dispatch,
-            ...rootState,
+            rootState,
+            rootGetters: {
+              ...rootGetters,
+              activeStages,
+            },
           })
           .then(() => {
             expect(dispatch).toHaveBeenCalledWith('receiveDurationDataError');
@@ -297,7 +310,7 @@ describe('DurationChart actions', () => {
       return testAction(
         actions.fetchDurationMedianData,
         null,
-        { ...rootState, activeStages },
+        state,
         [],
         [
           {
@@ -319,7 +332,7 @@ describe('DurationChart actions', () => {
           .fetchDurationMedianData({
             dispatch,
             rootState,
-            rootGetters: { activeStages },
+            rootGetters: { ...rootGetters, activeStages },
           })
           .then(() => {
             const requestedUrls = mock.history.get.map(({ url }) => url);