diff --git a/ee/app/assets/javascripts/analytics/cycle_analytics/vsa_settings/components/value_stream_form_content_actions.vue b/ee/app/assets/javascripts/analytics/cycle_analytics/vsa_settings/components/value_stream_form_content_actions.vue index 57d94e1d37109cc3719f4936730db1d7c930bd66..d227dd88f2ecadf7f650e2c46ddc3a07b0407627 100644 --- a/ee/app/assets/javascripts/analytics/cycle_analytics/vsa_settings/components/value_stream_form_content_actions.vue +++ b/ee/app/assets/javascripts/analytics/cycle_analytics/vsa_settings/components/value_stream_form_content_actions.vue @@ -45,17 +45,22 @@ export default { <template> <div class="gl-flex gl-w-full gl-flex-col gl-gap-3 sm:gl-w-auto sm:gl-flex-row"> - <gl-button variant="confirm" :loading="isLoading" @click="$emit('clickPrimaryAction')">{{ - primaryButtonText - }}</gl-button> <gl-button + data-testid="primary-button" + variant="confirm" + :loading="isLoading" + @click="$emit('clickPrimaryAction')" + >{{ primaryButtonText }}</gl-button + > + <gl-button + data-testid="add-button" category="secondary" variant="confirm" :disabled="isLoading" @click="$emit('clickAddStageAction')" >{{ $options.i18n.addStageAction }}</gl-button > - <gl-button :href="valueStreamPath" :disabled="isLoading">{{ + <gl-button data-testid="cancel-button" :href="valueStreamPath" :disabled="isLoading">{{ $options.i18n.cancelAction }}</gl-button> </div> diff --git a/ee/spec/frontend/analytics/cycle_analytics/vsa_settings/components/value_stream_form_content_actions_spec.js b/ee/spec/frontend/analytics/cycle_analytics/vsa_settings/components/value_stream_form_content_actions_spec.js index bda7509a419c913bda8769bf1517eba3b5ef48fb..63fbb36f6a4dd9caa68468dd6769a3b5c857287a 100644 --- a/ee/spec/frontend/analytics/cycle_analytics/vsa_settings/components/value_stream_form_content_actions_spec.js +++ b/ee/spec/frontend/analytics/cycle_analytics/vsa_settings/components/value_stream_form_content_actions_spec.js @@ -5,10 +5,9 @@ import { valueStreamPath } from '../../mock_data'; describe('ValueStreamFormContentActions', () => { let wrapper; - const findNewValueStreamBtn = () => wrapper.findByText('New value stream'); - const findSaveValueStreamBtn = () => wrapper.findByText('Save value stream'); - const findValueStreamCancelBtn = () => wrapper.findByText('Cancel'); - const findAddStageBtn = () => wrapper.findByText('Add a stage'); + const findPrimaryBtn = () => wrapper.findByTestId('primary-button'); + const findValueStreamCancelBtn = () => wrapper.findByTestId('cancel-button'); + const findAddStageBtn = () => wrapper.findByTestId('add-button'); const createComponent = ({ props = {} } = {}) => { wrapper = shallowMountExtended(ValueStreamFormContentHeader, { @@ -20,16 +19,17 @@ describe('ValueStreamFormContentActions', () => { }; describe.each` - isEditing | findPrimaryActionBtn - ${false} | ${findNewValueStreamBtn} - ${true} | ${findSaveValueStreamBtn} - `('when `isEditing` is `$isEditing`', ({ isEditing, findPrimaryActionBtn }) => { + isEditing | text + ${false} | ${'New value stream'} + ${true} | ${'Save value stream'} + `('when `isEditing` is `$isEditing`', ({ isEditing, text }) => { beforeEach(() => { createComponent({ props: { isEditing } }); }); it('renders primary action correctly', () => { - expect(findPrimaryActionBtn().props()).toMatchObject({ + expect(findPrimaryBtn().text()).toBe(text); + expect(findPrimaryBtn().props()).toMatchObject({ variant: 'confirm', loading: false, disabled: false, @@ -37,7 +37,7 @@ describe('ValueStreamFormContentActions', () => { }); it('emits `clickPrimaryAction` event when primary action is selected', () => { - findPrimaryActionBtn().vm.$emit('click'); + findPrimaryBtn().vm.$emit('click'); expect(wrapper.emitted('clickPrimaryAction')).toHaveLength(1); }); @@ -67,7 +67,7 @@ describe('ValueStreamFormContentActions', () => { }); it('sets primary action to a loading state', () => { - expect(findPrimaryActionBtn().props('loading')).toBe(true); + expect(findPrimaryBtn().props('loading')).toBe(true); }); it('disables all other actions', () => {