Updated specs to use cycle_analytics fixture

Fixed existing specs to use data from the
generated cycle analytics JSON fixtures

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

 import Vue from 'vue';
 import { mount } from '@vue/test-utils';
 import CustomStageForm from 'ee/analytics/cycle_analytics/components/custom_stage_form.vue';
-import { apiResponse, groupLabels } from '../mock_data';
+import { customStageEvents, groupLabels } from '../mock_data';
+
+const startEvents = customStageEvents.filter(ev => ev.canBeStartEvent);
+const stopEvents = customStageEvents.filter(ev => !ev.canBeStartEvent);
+// const labelStartEvent = startEvents.find(({ type }) => type === 'label'); // returning 0, currently no label events seeded
+// TODO: the shim below should be removed once we have label events seeding
+const labelStartEvent = { ...startEvents[0], type: 'label' };
+const firstAllowedStopEvent = labelStartEvent.allowedEndEvents[0];
+// We need to enusre that the stop event can be applied to the start event
+const labelStopEvent = {
+  ...stopEvents.find(ev => ev.identifier === firstAllowedStopEvent),
+  type: 'label',
+};
 
-const { events } = apiResponse;
+const events = [
+  ...startEvents.slice(1),
+  ...stopEvents.filter(ev => ev.identifier !== firstAllowedStopEvent),
+  labelStartEvent,
+  labelStopEvent,
+];
 
-const startEvents = events.filter(ev => ev.canBeStartEvent);
-const stopEvents = events.filter(ev => !ev.canBeStartEvent);
+// console.log('events', events);
 
 const initData = {
   name: 'Cool stage pre',
@@ -129,7 +145,7 @@ describe('CustomStageForm', () => {
         it('will display the start event label field if a label event is selected', done => {
           wrapper.setData({
             fields: {
-              startEvent: 'issue_label_added',
+              startEvent: labelStartEvent.identifier,
             },
           });
 
@@ -143,7 +159,7 @@ describe('CustomStageForm', () => {
           const selectedLabelId = groupLabels[0].id;
           expect(wrapper.vm.fields.startEventLabel).toEqual(null);
 
-          wrapper.find(sel.startEvent).setValue('issue_label_added');
+          wrapper.find(sel.startEvent).setValue(labelStartEvent.identifier);
           Vue.nextTick(() => {
             wrapper
               .find(sel.startEventLabel)
@@ -162,12 +178,7 @@ describe('CustomStageForm', () => {
 
     describe('Stop event', () => {
       beforeEach(() => {
-        wrapper = createComponent(
-          {
-            events,
-          },
-          false,
-        );
+        wrapper = createComponent({}, false);
       });
 
       it('notifies that a start event needs to be selected first', () => {
@@ -208,17 +219,24 @@ describe('CustomStageForm', () => {
 
       it('will only display valid stop events allowed for the selected start event', done => {
         let stopOptions = wrapper.find(sel.stopEvent).findAll('option');
+        const index = 2;
+        const selectedStopEventIdentifer = startEvents[index].allowedEndEvents[0];
+        const selectedStopEvent = stopEvents.find(
+          ev => ev.identifier === selectedStopEventIdentifer,
+        );
+
         expect(stopOptions.at(0).html()).toEqual('<option value="">Select stop event</option>');
 
-        selectDropdownOption(wrapper, sel.startEvent, 1);
+        selectDropdownOption(wrapper, sel.startEvent, index);
 
         Vue.nextTick(() => {
           stopOptions = wrapper.find(sel.stopEvent).findAll('option');
+
           [
             { name: 'Select stop event', identifier: '' },
             {
-              name: 'Issue first associated with a milestone or issue first added to a board',
-              identifier: 'issue_stage_end',
+              name: selectedStopEvent.name,
+              identifier: selectedStopEvent.identifier,
             },
           ].forEach(({ name, identifier }, i) => {
             expect(stopOptions.at(i).html()).toEqual(
@@ -307,8 +325,8 @@ describe('CustomStageForm', () => {
 
           wrapper.setData({
             fields: {
-              startEvent: 'issue_label_added',
-              stopEvent: 'issue_label_removed',
+              stopEvent: labelStopEvent.identifier,
+              startEvent: labelStartEvent.identifier,
             },
           });
 
@@ -324,8 +342,8 @@ describe('CustomStageForm', () => {
 
           wrapper.setData({
             fields: {
-              startEvent: 'issue_label_added',
-              stopEvent: 'issue_label_removed',
+              startEvent: labelStartEvent.identifier,
+              stopEvent: labelStopEvent.identifier,
             },
           });
 
@@ -373,10 +391,16 @@ describe('CustomStageForm', () => {
       });
 
       describe('with all fields set', () => {
+        const startEventIndex = 2;
+        const firstStopEventIdentifier = startEvents[startEventIndex].allowedEndEvents[0];
+        const stopEventIndex = stopEvents.findIndex(
+          ev => ev.identifier === firstStopEventIdentifier,
+        );
+
         beforeEach(() => {
           wrapper = createComponent({}, false);
 
-          selectDropdownOption(wrapper, sel.startEvent, 1);
+          selectDropdownOption(wrapper, sel.startEvent, startEventIndex);
 
           return Vue.nextTick(() => {
             selectDropdownOption(wrapper, sel.stopEvent, 1);
@@ -402,9 +426,9 @@ describe('CustomStageForm', () => {
           const res = [
             {
               name: 'Cool stage',
-              startEvent: 'issue_created',
+              startEvent: startEvents[startEventIndex].identifier,
               startEventLabel: null,
-              stopEvent: 'issue_stage_end',
+              stopEvent: stopEvents[stopEventIndex].identifier,
               stopEventLabel: null,
             },
           ];
@@ -440,8 +464,8 @@ describe('CustomStageForm', () => {
         wrapper.setData({
           fields: {
             name: 'Cool stage pre',
-            startEvent: 'issue_label_added',
-            stopEvent: 'issue_label_removed',
+            startEvent: labelStartEvent.identifier,
+            stopEvent: labelStopEvent.identifier,
           },
         });
 
@@ -512,8 +536,8 @@ describe('CustomStageForm', () => {
         wrapper.setData({
           fields: {
             name: 'Cool stage pre',
-            startEvent: 'issue_label_added',
-            stopEvent: 'issue_label_removed',
+            startEvent: labelStartEvent.identifier,
+            stopEvent: labelStopEvent.identifier,
           },
         });
 

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

@@ -6,14 +6,23 @@ import {
   eventsByIdentifier,
   getLabelEventsIdentifiers,
 } from 'ee/analytics/cycle_analytics/utils';
-import { apiResponse } from './mock_data';
+import { customStageEvents } from './mock_data';
 
-const { events } = apiResponse;
+const startEvents = customStageEvents.filter(ev => ev.canBeStartEvent);
+const stopEvents = customStageEvents.filter(ev => !ev.canBeStartEvent);
 
-const startEvent = events[0];
-const endEvent = events[1];
-const labelEvent = events[11];
-const labelEvents = [events[10], events[11]].map(i => i.identifier);
+const startEvent = customStageEvents.find(ev => ev.canBeStartEvent);
+const endEvent = customStageEvents.find(ev => !ev.canBeStartEvent);
+const labelStartEvent = { ...startEvent, type: 'label' };
+const labelStopEvent = { ...endEvent, type: 'label' };
+const labelEvents = [labelStartEvent, labelStopEvent].map(i => i.identifier);
+
+const events = [
+  ...startEvents.filter(ev => ev.identifier !== labelStartEvent.identifier),
+  ...stopEvents.filter(ev => ev.identifier !== labelStopEvent.identifier),
+  labelStartEvent,
+  labelStopEvent,
+];
 
 describe('Cycle analytics utils', () => {
   describe('isStartEvent', () => {
@@ -30,10 +39,10 @@ describe('Cycle analytics utils', () => {
 
   describe('isLabelEvent', () => {
     it('will return true if the given event identifier is in the labelEvents array', () => {
-      expect(isLabelEvent(labelEvents, labelEvent.identifier)).toEqual(true);
+      expect(isLabelEvent(labelEvents, labelStartEvent.identifier)).toEqual(true);
     });
     it('will return false if the given event identifier is not in the labelEvents array', () => {
-      [startEvent.identifier, null, undefined, ''].forEach(ev => {
+      [startEvents[1].identifier, null, undefined, ''].forEach(ev => {
         expect(isLabelEvent(labelEvents, ev)).toEqual(false);
       });
       expect(isLabelEvent(labelEvents)).toEqual(false);
@@ -68,6 +77,7 @@ describe('Cycle analytics utils', () => {
       expect(res.length).toEqual(labelEvents.length);
       expect(res).toEqual(labelEvents);
     });
+
     it('will return an empty array when there are no matches', () => {
       const ev = [{ _type: 'simple' }, { type: 'simple' }, { t: 'simple' }];
       expect(getLabelEventsIdentifiers(ev)).toEqual([]);
@@ -77,8 +87,8 @@ describe('Cycle analytics utils', () => {
 
   describe('getAllowedEndEvents', () => {
     it('will return the relevant end events for a given start event identifier', () => {
-      const se = events[10].allowedEndEvents;
-      expect(getAllowedEndEvents(events, 'issue_label_added')).toEqual(se);
+      const se = events[0];
+      expect(getAllowedEndEvents(events, se.identifier)).toEqual(se.allowedEndEvents);
     });
 
     it('will return an empty array if there are no end events available', () => {
@@ -90,7 +100,7 @@ describe('Cycle analytics utils', () => {
 
   describe('eventsByIdentifier', () => {
     it('will return the events with an identifier in the provided array', () => {
-      expect(eventsByIdentifier(events, labelEvents)).toEqual([events[10], events[11]]);
+      expect(eventsByIdentifier(events, labelEvents)).toEqual([labelStartEvent, labelStopEvent]);
     });
 
     it('will return an empty array if there are no matching events', () => {