Update value stream form FE specs

Fixes the related vuex mutation specs
and moves some functions to utils

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

@@ -115,15 +115,15 @@ export const validateStage = (fields) => {
  * returned as an array in a object with key`name`
  *
  * @param {Object} fields key value pair of form field values
- * @returns {Object} key value pair of form fields with an array of errors
+ * @returns {Array} an array of errors
  */
 export const validateValueStreamName = ({ name = '' }) => {
-  const errors = { name: [] };
+  const errors = [];
   if (name.length > NAME_MAX_LENGTH) {
-    errors.name.push(ERRORS.MAX_LENGTH);
+    errors.push(ERRORS.MAX_LENGTH);
   }
   if (!name.length) {
-    errors.name.push(ERRORS.VALUE_STREAM_NAME_MIN_LENGTH);
+    errors.push(ERRORS.VALUE_STREAM_NAME_MIN_LENGTH);
   }
   return errors;
 };

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

@@ -102,7 +102,10 @@ export default {
     const { name: nameError = [], stages: stageErrors = [{}] } = initialFormErrors;
     const additionalFields = hasExtendedFormFields
       ? {
-          stages: DEFAULT_STAGE_CONFIG,
+          stages:
+            initialPreset === PRESET_OPTIONS_DEFAULT
+              ? DEFAULT_STAGE_CONFIG
+              : [{ ...defaultCustomStageFields }],
           stageErrors: stageErrors || initializeStageErrors(initialPreset),
           ...initialData,
         }
@@ -132,21 +135,13 @@ export default {
       const { initialFormErrors } = this;
       return Boolean(Object.keys(initialFormErrors).length);
     },
-    isSuccessfullyCreated() {
-      // TODO: get this from state somehow
-      return false;
-    },
     isLoading() {
       return this.isCreating;
     },
     primaryProps() {
       return {
         text: this.$options.I18N.FORM_TITLE,
-        attributes: [
-          { variant: 'success' },
-          { disabled: this.isSuccessfullyCreated },
-          { loading: this.isLoading },
-        ],
+        attributes: [{ variant: 'success' }, { loading: this.isLoading }],
       };
     },
     secondaryProps() {

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

-import { toArray } from 'lodash';
 import { convertObjectPropsToCamelCase } from '~/lib/utils/common_utils';
 import { transformRawStages } from '../utils';
 import * as types from './mutation_types';
@@ -122,7 +121,7 @@ export default {
     state.isCreatingValueStream = true;
     state.createValueStreamErrors = {};
   },
-  [types.RECEIVE_CREATE_VALUE_STREAM_ERROR](state, { data: { stages }, errors = {} }) {
+  [types.RECEIVE_CREATE_VALUE_STREAM_ERROR](state, { data: { stages = [] }, errors = {} }) {
     state.isCreatingValueStream = false;
 
     // TODO: move to utils + add additional specs

ee/spec/features/groups/analytics/cycle_analytics/multiple_value_streams_spec.rb

@@ -12,8 +12,6 @@ RSpec.describe 'Multiple value streams', :js do
   end
 
   value_stream_selector = '[data-testid="dropdown-value-streams"]'
-  extended_form_fields_selector = '[data-testid="extended-form-fields"]'
-  custom_value_stream_name = "New created value stream"
 
   let(:value_stream_dropdown) { page.find(value_stream_selector) }
   let!(:default_value_stream) { create(:cycle_analytics_group_value_stream, group: group, name: 'default') }
@@ -25,24 +23,7 @@ RSpec.describe 'Multiple value streams', :js do
   def select_group(target_group = group)
     visit group_analytics_cycle_analytics_path(target_group)
 
-    expect(page).to have_selector '.js-stage-table'
-    wait_for_requests
-  end
-
-  # TODO: these methods are borrowed from ee/spec/features/groups/analytics/cycle_analytics/customizable_cycle_analytics_spec.rb
-  def toggle_dropdown(field)
-    page.within("[data-testid='#{field}']") do
-      find('.dropdown-toggle').click
-
-      wait_for_requests
-
-      expect(find('.dropdown-menu')).to have_selector('.dropdown-item')
-    end
-  end
-
-  def select_dropdown_option_by_value(name, value, elem = '.dropdown-item')
-    toggle_dropdown name
-    page.find("[data-testid='#{name}'] .dropdown-menu").find("#{elem}[value='#{value}']").click
+    expect(page).to have_selector '.js-stage-table' # wait_for_stages_to_load
   end
 
   before do
@@ -66,58 +47,16 @@ RSpec.describe 'Multiple value streams', :js do
     before do
       select_group
 
-      toggle_value_stream_dropdown
-      page.find_button(_('Create new Value Stream')).click
-    end
-
-    it 'includes additional form fields' do
-      expect(page).to have_selector(extended_form_fields_selector)
-    end
-
-    it 'can create a value stream' do
-      fill_in 'create-value-stream-name', with: custom_value_stream_name
-
-      page.find_button(_('Create Value Stream')).click
       wait_for_requests
-
-      expect(page).to have_text(_("'%{name}' Value Stream created") % { name: custom_value_stream_name })
     end
 
-    it 'can create a value stream with a custom stage' do
-      fill_in 'create-value-stream-name', with: custom_value_stream_name
-      page.find_button(_('Add another stage')).click
-
-      fill_in "custom-stage-name-6", with: "Cool custom stage - name"
-      select_dropdown_option_by_value "custom-stage-start-event-6", :merge_request_created
-      select_dropdown_option_by_value "custom-stage-end-event-6", :merge_request_merged
-
-      page.find_button(_('Create Value Stream')).click
-      wait_for_requests
-
-      expect(page).to have_text(_("'%{name}' Value Stream created") % { name: custom_value_stream_name })
-    end
-  end
-
-  describe 'with the `value_stream_analytics_extended_form` feature flag disabled' do
-    before do
-      stub_licensed_features(cycle_analytics_for_groups: true, type_of_work_analytics: true)
-      stub_feature_flags(value_stream_analytics_extended_form: false)
-
-      sign_in(user)
-
-      select_group
+    it 'can create a value stream' do
+      custom_value_stream_name = "New created value stream"
       toggle_value_stream_dropdown
 
       page.find_button(_('Create new Value Stream')).click
-    end
-
-    it 'does not include additional form fields' do
-      expect(page).not_to have_selector(extended_form_fields_selector)
-    end
 
-    it 'can create a value stream' do
       fill_in 'create-value-stream-name', with: custom_value_stream_name
-
       page.find_button(_('Create Value Stream')).click
       wait_for_requests
 
@@ -133,6 +72,8 @@ RSpec.describe 'Multiple value streams', :js do
       create(:cycle_analytics_group_stage, value_stream: value_stream)
 
       select_group
+
+      wait_for_requests
     end
 
     it 'can delete a value stream' do

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

@@ -111,7 +111,7 @@ describe('validateStage', () => {
 
 describe('validateValueStreamName,', () => {
   it('with valid data returns an empty array', () => {
-    expect(validateValueStreamName({ name: 'Cool stream name' })).toEqual({ name: [] });
+    expect(validateValueStreamName({ name: 'Cool stream name' })).toEqual([]);
   });
 
   it.each`
@@ -120,6 +120,6 @@ describe('validateValueStreamName,', () => {
     ${''}                              | ${ERRORS.VALUE_STREAM_NAME_MIN_LENGTH} | ${'too short'}
   `('returns "$error" if name is $msg', ({ name, error }) => {
     const result = validateValueStreamName({ name });
-    expectFieldError({ result, error, field: 'name' });
+    expect(result).toEqual([error]);
   });
 });

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

@@ -93,7 +93,7 @@ describe('ValueStreamForm', () => {
     });
 
     it('submit button is enabled', () => {
-      expect(findSubmitDisabledAttribute('disabled')).toBe(false);
+      expect(findSubmitDisabledAttribute('disabled')).toBeUndefined();
     });
 
     it('does not include extended fields', () => {
@@ -138,9 +138,17 @@ describe('ValueStreamForm', () => {
 
         expect(wrapper.vm.stages.length).toBe(7);
       });
+
+      it('validates existing fields when clicked', () => {
+        expect(wrapper.vm.nameError).toEqual([]);
+
+        clickAddStage();
+
+        expect(wrapper.vm.nameError).toEqual(['Name is required']);
+      });
     });
 
-    describe.only('form errors', () => {
+    describe('form errors', () => {
       const commonExtendedData = {
         props: {
           hasExtendedFormFields: true,
@@ -148,7 +156,7 @@ describe('ValueStreamForm', () => {
         },
       };
 
-      it('renders errors for a default stage name', () => {
+      it('renders errors for a default stage field', () => {
         wrapper = createComponent({
           ...commonExtendedData,
           stubs: {
@@ -170,10 +178,9 @@ describe('ValueStreamForm', () => {
           },
         });
 
-        console.log('wrapper', wrapper.html());
         expectFieldError('custom-stage-name-0', initialFormStageErrors.stages[0].name[0]);
         expectFieldError(
-          'custom-stage-name-0',
+          'custom-stage-end-event-0',
           initialFormStageErrors.stages[0].endEventIdentifier[0],
         );
       });

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

@@ -948,7 +948,7 @@ describe('Value Stream Analytics actions', () => {
             { type: types.REQUEST_CREATE_VALUE_STREAM },
             {
               type: types.RECEIVE_CREATE_VALUE_STREAM_ERROR,
-              payload: { message, errors },
+              payload: { message, data: payload, errors },
             },
           ],
           [],

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

@@ -15,6 +15,7 @@ import {
 } from '../mock_data';
 
 let state = null;
+const { stages } = customizableStagesAndEvents;
 
 describe('Value Stream Analytics mutations', () => {
   beforeEach(() => {
@@ -61,16 +62,16 @@ describe('Value Stream Analytics mutations', () => {
   });
 
   it.each`
-    mutation                                     | payload                                  | expectedState
-    ${types.SET_FEATURE_FLAGS}                   | ${{ hasDurationChart: true }}            | ${{ featureFlags: { hasDurationChart: true } }}
-    ${types.SET_SELECTED_PROJECTS}               | ${selectedProjects}                      | ${{ selectedProjects }}
-    ${types.SET_DATE_RANGE}                      | ${{ startDate, endDate }}                | ${{ startDate, endDate }}
-    ${types.SET_SELECTED_STAGE}                  | ${{ id: 'first-stage' }}                 | ${{ selectedStage: { id: 'first-stage' } }}
-    ${types.RECEIVE_CREATE_VALUE_STREAM_ERROR}   | ${{ errors: { name: ['is required'] } }} | ${{ createValueStreamErrors: { name: ['is required'] }, isCreatingValueStream: false }}
-    ${types.RECEIVE_DELETE_VALUE_STREAM_ERROR}   | ${'Some error occurred'}                 | ${{ deleteValueStreamError: 'Some error occurred' }}
-    ${types.RECEIVE_VALUE_STREAMS_SUCCESS}       | ${valueStreams}                          | ${{ valueStreams, isLoadingValueStreams: false }}
-    ${types.SET_SELECTED_VALUE_STREAM}           | ${valueStreams[1].id}                    | ${{ selectedValueStream: {} }}
-    ${types.RECEIVE_CREATE_VALUE_STREAM_SUCCESS} | ${valueStreams[1]}                       | ${{ selectedValueStream: valueStreams[1] }}
+    mutation                                     | payload                                                    | expectedState
+    ${types.SET_FEATURE_FLAGS}                   | ${{ hasDurationChart: true }}                              | ${{ featureFlags: { hasDurationChart: true } }}
+    ${types.SET_SELECTED_PROJECTS}               | ${selectedProjects}                                        | ${{ selectedProjects }}
+    ${types.SET_DATE_RANGE}                      | ${{ startDate, endDate }}                                  | ${{ startDate, endDate }}
+    ${types.SET_SELECTED_STAGE}                  | ${{ id: 'first-stage' }}                                   | ${{ selectedStage: { id: 'first-stage' } }}
+    ${types.RECEIVE_CREATE_VALUE_STREAM_ERROR}   | ${{ data: { stages }, errors: { name: ['is required'] } }} | ${{ createValueStreamErrors: { name: ['is required'] }, isCreatingValueStream: false }}
+    ${types.RECEIVE_DELETE_VALUE_STREAM_ERROR}   | ${'Some error occurred'}                                   | ${{ deleteValueStreamError: 'Some error occurred' }}
+    ${types.RECEIVE_VALUE_STREAMS_SUCCESS}       | ${valueStreams}                                            | ${{ valueStreams, isLoadingValueStreams: false }}
+    ${types.SET_SELECTED_VALUE_STREAM}           | ${valueStreams[1].id}                                      | ${{ selectedValueStream: {} }}
+    ${types.RECEIVE_CREATE_VALUE_STREAM_SUCCESS} | ${valueStreams[1]}                                         | ${{ selectedValueStream: valueStreams[1] }}
   `(
     '$mutation with payload $payload will update state with $expectedState',
     ({ mutation, payload, expectedState }) => {
@@ -126,7 +127,7 @@ describe('Value Stream Analytics mutations', () => {
   describe(`${types.RECEIVE_GROUP_STAGES_SUCCESS}`, () => {
     describe('with data', () => {
       beforeEach(() => {
-        mutations[types.RECEIVE_GROUP_STAGES_SUCCESS](state, customizableStagesAndEvents.stages);
+        mutations[types.RECEIVE_GROUP_STAGES_SUCCESS](state, stages);
       });
 
       it('will convert the stats object to stages', () => {
@@ -180,14 +181,11 @@ describe('Value Stream Analytics mutations', () => {
       ${'selectedProjects'} | ${initialData.selectedProjects}
       ${'startDate'}        | ${initialData.createdAfter}
       ${'endDate'}          | ${initialData.createdBefore}
-    `(
-      '$mutation with payload $payload will update state with $expectedState',
-      ({ stateKey, expectedState }) => {
-        state = {};
-        mutations[types.INITIALIZE_CYCLE_ANALYTICS](state, initialData);
+    `('$stateKey will be set to $expectedState', ({ stateKey, expectedState }) => {
+      state = {};
+      mutations[types.INITIALIZE_CYCLE_ANALYTICS](state, initialData);
 
-        expect(state[stateKey]).toEqual(expectedState);
-      },
-    );
+      expect(state[stateKey]).toEqual(expectedState);
+    });
   });
 });

locale/gitlab.pot

@@ -1692,6 +1692,9 @@ msgstr ""
 msgid "Add another link"
 msgstr ""
 
+msgid "Add another stage"
+msgstr ""
+
 msgid "Add approval rule"
 msgstr ""