Update custom stage form specs

Updates the related specs and replaces
the finders with data-testids

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

@@ -11,7 +11,7 @@ import TypeOfWorkCharts from './type_of_work_charts.vue';
 import UrlSync from '~/vue_shared/components/url_sync.vue';
 import { toYmd } from '../../shared/utils';
 import StageTableNav from './stage_table_nav.vue';
-import CustomStageForm from './create_value_stream_form/custom_stage_form.vue';
+import CustomStageForm from './custom_stage_form.vue';
 import PathNavigation from './path_navigation.vue';
 import FilterBar from './filter_bar.vue';
 import ValueStreamSelect from './value_stream_select.vue';

ee/app/assets/javascripts/analytics/cycle_analytics/components/create_value_stream_form/custom_stage_fields.vue

@@ -96,7 +96,7 @@ export default {
     <div class="d-flex" :class="{ 'justify-content-between': startEventRequiresLabel }">
       <div :class="[startEventRequiresLabel ? 'w-50 mr-1' : 'w-100']">
         <gl-form-group
-          data-testid="custom-stage-start-event-identifier"
+          data-testid="custom-stage-start-event"
           :label="s__('CustomCycleAnalytics|Start event')"
           label-for="custom-stage-start-event"
           :state="!hasFieldErrors('startEventIdentifier')"
@@ -113,7 +113,7 @@ export default {
       </div>
       <div v-if="startEventRequiresLabel" class="w-50 ml-1">
         <gl-form-group
-          data-testid="custom-stage-start-event-label-id"
+          data-testid="custom-stage-start-event-label"
           :label="s__('CustomCycleAnalytics|Start event label')"
           label-for="custom-stage-start-event-label"
           :state="!hasFieldErrors('startEventLabelId')"
@@ -130,7 +130,7 @@ export default {
     <div class="d-flex" :class="{ 'justify-content-between': endEventRequiresLabel }">
       <div :class="[endEventRequiresLabel ? 'w-50 mr-1' : 'w-100']">
         <gl-form-group
-          data-testid="custom-stage-end-event-identifier"
+          data-testid="custom-stage-end-event"
           :label="s__('CustomCycleAnalytics|End event')"
           label-for="custom-stage-end-event"
           :state="!hasFieldErrors('endEventIdentifier')"
@@ -148,7 +148,7 @@ export default {
       </div>
       <div v-if="endEventRequiresLabel" class="w-50 ml-1">
         <gl-form-group
-          data-testid="custom-stage-end-event-label-id"
+          data-testid="custom-stage-end-event-label"
           :label="s__('CustomCycleAnalytics|End event label')"
           label-for="custom-stage-end-event-label"
           :state="!hasFieldErrors('endEventLabelId')"

ee/app/assets/javascripts/analytics/cycle_analytics/components/create_value_stream_form/utils.js

@@ -49,7 +49,7 @@ export const validateFields = fields => {
     newErrors.endEventIdentifier = [ERRORS.START_EVENT_REQUIRED];
   }
 
-  if (fields?.endEventIdentifier) {
+  if (fields?.startEventIdentifier && fields?.endEventIdentifier) {
     newErrors.endEventIdentifier = [];
   }
   return newErrors;

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

@@ -163,10 +163,11 @@ export default {
     handleUpdateFields(field, value) {
       this.fields = { ...this.fields, [field]: value };
       const newErrors = validateFields(this.fields);
-      newErrors.endEventIdentifier = this.eventMismatchError
-        ? [ERRORS.INVALID_EVENT_PAIRS]
-        : newErrors.endEventIdentifier;
-      this.errors = newErrors;
+      newErrors.endEventIdentifier =
+        this.fields.startEventIdentifier && this.eventMismatchError
+          ? [ERRORS.INVALID_EVENT_PAIRS]
+          : newErrors.endEventIdentifier;
+      this.errors = { ...this.errors, ...newErrors };
     },
   },
 };

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

 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`CustomStageForm Editing a custom stage isSavingCustomStage=true displays a loading icon 1`] = `
-"<button type=\\"button\\" disabled=\\"disabled\\" class=\\"btn js-save-stage btn-success btn-md disabled gl-button\\">
+"<button data-testid=\\"save-custom-stage\\" type=\\"button\\" disabled=\\"disabled\\" class=\\"btn btn-success btn-md disabled gl-button\\">
   <!---->
   <!----> <span class=\\"gl-button-text\\"><span class=\\"gl-spinner-container\\"><span aria-label=\\"Loading\\" class=\\"align-text-bottom gl-spinner gl-spinner-dark gl-spinner-sm\\"></span></span>
   Update stage
@@ -9,7 +9,7 @@ exports[`CustomStageForm Editing a custom stage isSavingCustomStage=true display
 `;
 
 exports[`CustomStageForm isSavingCustomStage=true displays a loading icon 1`] = `
-"<button type=\\"button\\" disabled=\\"disabled\\" class=\\"btn js-save-stage btn-success btn-md disabled gl-button\\">
+"<button data-testid=\\"save-custom-stage\\" type=\\"button\\" disabled=\\"disabled\\" class=\\"btn btn-success btn-md disabled gl-button\\">
   <!---->
   <!----> <span class=\\"gl-button-text\\"><span class=\\"gl-spinner-container\\"><span aria-label=\\"Loading\\" class=\\"align-text-bottom gl-spinner gl-spinner-dark gl-spinner-sm\\"></span></span>
   Add stage

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

@@ -5,7 +5,7 @@ import MockAdapter from 'axios-mock-adapter';
 import Vuex from 'vuex';
 import AddStageButton from 'ee/analytics/cycle_analytics/components/add_stage_button.vue';
 import Component from 'ee/analytics/cycle_analytics/components/base.vue';
-import CustomStageForm from 'ee/analytics/cycle_analytics/components/create_value_stream_form/custom_stage_form.vue';
+import CustomStageForm from 'ee/analytics/cycle_analytics/components/custom_stage_form.vue';
 import DurationChart from 'ee/analytics/cycle_analytics/components/duration_chart.vue';
 import FilterBar from 'ee/analytics/cycle_analytics/components/filter_bar.vue';
 import Metrics from 'ee/analytics/cycle_analytics/components/metrics.vue';

ee/spec/frontend/analytics/cycle_analytics/components/create_value_stream_form/helpers.js

-export const findName = wrapper => wrapper.find('[data-testid="custom-stage-name"]');
-export const findStartEvent = wrapper =>
-  wrapper.find('[data-testid="custom-stage-start-event-identifier"]');
-export const findEndEvent = wrapper =>
-  wrapper.find('[data-testid="custom-stage-end-event-identifier"]');
-export const findStartEventLabel = wrapper =>
-  wrapper.find('[data-testid="custom-stage-start-event-label-id"]');
-export const findEndEventLabel = wrapper =>
-  wrapper.find('[data-testid="custom-stage-end-event-label-id"]');
-
-export const formatStartEventOpts = events => [
-  { text: 'Select start event', value: null },
-  ...events
-    .filter(ev => ev.canBeStartEvent)
-    .map(({ name: text, identifier: value }) => ({ text, value })),
-];
-
-export const formatEndEventOpts = events => [
-  { text: 'Select end event', value: null },
-  ...events
-    .filter(ev => !ev.canBeStartEvent)
-    .map(({ name: text, identifier: value }) => ({ text, value })),
-];

locale/gitlab.pot

@@ -8333,6 +8333,12 @@ msgstr ""
 msgid "CustomCycleAnalytics|Editing stage"
 msgstr ""
 
+msgid "CustomCycleAnalytics|End event"
+msgstr ""
+
+msgid "CustomCycleAnalytics|End event label"
+msgstr ""
+
 msgid "CustomCycleAnalytics|Enter a name for the stage"
 msgstr ""
 
@@ -8345,6 +8351,9 @@ msgstr ""
 msgid "CustomCycleAnalytics|Please select a start event first"
 msgstr ""
 
+msgid "CustomCycleAnalytics|Select end event"
+msgstr ""
+
 msgid "CustomCycleAnalytics|Select start event"
 msgstr ""
 
@@ -8357,15 +8366,12 @@ msgstr ""
 msgid "CustomCycleAnalytics|Start event"
 msgstr ""
 
-msgid "CustomCycleAnalytics|Start event changed, please select a valid stop event"
+msgid "CustomCycleAnalytics|Start event changed, please select a valid end event"
 msgstr ""
 
 msgid "CustomCycleAnalytics|Start event label"
 msgstr ""
 
-msgid "CustomCycleAnalytics|Stop event"
-msgstr ""
-
 msgid "CustomCycleAnalytics|Stop event label"
 msgstr ""