Commit 2ecea9de authored by Ezekiel Kigbo's avatar Ezekiel Kigbo Committed by Brandon Labuschagne

Minor fixes for VSA jest specs

parent 202c9728
<script>
import { GlTooltipDirective, GlIcon } from '@gitlab/ui';
import { n__ } from '~/locale';
import { EVENTS_LIST_ITEM_LIMIT } from '../constants';
export default {
components: {
GlIcon,
},
directives: {
GlTooltip: GlTooltipDirective,
},
props: {
count: {
type: Number,
required: true,
},
},
eventsListItemLimit: EVENTS_LIST_ITEM_LIMIT,
tooltipTitle: n__(
'Limited to showing %d event at most',
'Limited to showing %d events at most',
EVENTS_LIST_ITEM_LIMIT,
),
};
</script>
<template>
<!-- TODO: im not sure why this is rendered only for exactly 50 items, why not >= 50? -->
<span v-if="count >= $options.eventsListItemLimit" class="events-info float-right">
<gl-icon v-gl-tooltip="{ title: $options.tooltipTitle }" name="warning" />
{{ n__('Showing %d event', 'Showing %d events', $options.eventsListItemLimit) }}
</span>
</template>
...@@ -336,6 +336,7 @@ export default { ...@@ -336,6 +336,7 @@ export default {
<transition name="fade"> <transition name="fade">
<gl-button <gl-button
v-if="canRestore" v-if="canRestore"
data-testid="vsa-reset-button"
class="gl-ml-3" class="gl-ml-3"
variant="link" variant="link"
@click="handleResetDefaults" @click="handleResetDefaults"
......
import { GlModal, GlFormInput } from '@gitlab/ui'; import { GlModal, GlFormInput } from '@gitlab/ui';
import { shallowMount, createLocalVue } from '@vue/test-utils'; import { shallowMount, createLocalVue } from '@vue/test-utils';
import Vuex from 'vuex'; import Vuex from 'vuex';
import { PRESET_OPTIONS_BLANK } from 'ee/analytics/cycle_analytics/components/create_value_stream_form/constants'; import {
PRESET_OPTIONS_BLANK,
PRESET_OPTIONS_DEFAULT,
} from 'ee/analytics/cycle_analytics/components/create_value_stream_form/constants';
import CustomStageFields from 'ee/analytics/cycle_analytics/components/create_value_stream_form/custom_stage_fields.vue'; import CustomStageFields from 'ee/analytics/cycle_analytics/components/create_value_stream_form/custom_stage_fields.vue';
import DefaultStageFields from 'ee/analytics/cycle_analytics/components/create_value_stream_form/default_stage_fields.vue'; import DefaultStageFields from 'ee/analytics/cycle_analytics/components/create_value_stream_form/default_stage_fields.vue';
import ValueStreamForm from 'ee/analytics/cycle_analytics/components/value_stream_form.vue'; import ValueStreamForm from 'ee/analytics/cycle_analytics/components/value_stream_form.vue';
...@@ -44,7 +47,7 @@ describe('ValueStreamForm', () => { ...@@ -44,7 +47,7 @@ describe('ValueStreamForm', () => {
name: 'Editable value stream', name: 'Editable value stream',
}; };
const initialPreset = PRESET_OPTIONS_BLANK; const initialPreset = PRESET_OPTIONS_DEFAULT;
const fakeStore = () => const fakeStore = () =>
new Vuex.Store({ new Vuex.Store({
...@@ -86,13 +89,14 @@ describe('ValueStreamForm', () => { ...@@ -86,13 +89,14 @@ describe('ValueStreamForm', () => {
const findModal = () => wrapper.findComponent(GlModal); const findModal = () => wrapper.findComponent(GlModal);
const findExtendedFormFields = () => wrapper.findByTestId('extended-form-fields'); const findExtendedFormFields = () => wrapper.findByTestId('extended-form-fields');
const findPresetSelector = () => wrapper.findByTestId('vsa-preset-selector'); const findPresetSelector = () => wrapper.findByTestId('vsa-preset-selector');
const findRestoreButton = (index) => wrapper.findByTestId(`stage-action-restore-${index}`); const findRestoreButton = () => wrapper.findByTestId('vsa-reset-button');
const findRestoreStageButton = (index) => wrapper.findByTestId(`stage-action-restore-${index}`);
const findHiddenStages = () => wrapper.findAllByTestId('vsa-hidden-stage').wrappers; const findHiddenStages = () => wrapper.findAllByTestId('vsa-hidden-stage').wrappers;
const findBtn = (btn) => findModal().props(btn); const findBtn = (btn) => findModal().props(btn);
const clickSubmit = () => findModal().vm.$emit('primary', mockEvent); const clickSubmit = () => findModal().vm.$emit('primary', mockEvent);
const clickAddStage = () => findModal().vm.$emit('secondary', mockEvent); const clickAddStage = () => findModal().vm.$emit('secondary', mockEvent);
const clickRestoreStageAtIndex = (index) => findRestoreButton(index).vm.$emit('click'); const clickRestoreStageAtIndex = (index) => findRestoreStageButton(index).vm.$emit('click');
const expectFieldError = (testId, error = '') => const expectFieldError = (testId, error = '') =>
expect(wrapper.findByTestId(testId).attributes('invalid-feedback')).toBe(error); expect(wrapper.findByTestId(testId).attributes('invalid-feedback')).toBe(error);
...@@ -118,6 +122,18 @@ describe('ValueStreamForm', () => { ...@@ -118,6 +122,18 @@ describe('ValueStreamForm', () => {
it('has the preset button', () => { it('has the preset button', () => {
expect(findPresetSelector().exists()).toBe(true); expect(findPresetSelector().exists()).toBe(true);
}); });
it('will toggle between the blank and default templates', () => {
expect(wrapper.vm.stages).toHaveLength(defaultStageConfig.length);
findPresetSelector().vm.$emit('input', PRESET_OPTIONS_BLANK);
expect(wrapper.vm.stages).toHaveLength(1);
findPresetSelector().vm.$emit('input', PRESET_OPTIONS_DEFAULT);
expect(wrapper.vm.stages).toHaveLength(defaultStageConfig.length);
});
}); });
it('does not display any hidden stages', () => { it('does not display any hidden stages', () => {
...@@ -215,6 +231,20 @@ describe('ValueStreamForm', () => { ...@@ -215,6 +231,20 @@ describe('ValueStreamForm', () => {
expect(findHiddenStages().length).toBe(0); expect(findHiddenStages().length).toBe(0);
}); });
describe('restore defaults button', () => {
it('will clear the form fields', async () => {
expect(wrapper.vm.stages).toHaveLength(stageCount);
await clickAddStage();
expect(wrapper.vm.stages).toHaveLength(stageCount + 1);
findRestoreButton().vm.$emit('click');
expect(wrapper.vm.stages).toHaveLength(stageCount);
});
});
describe('with hidden stages', () => { describe('with hidden stages', () => {
const hiddenStages = defaultStageConfig.map((s) => ({ ...s, hidden: true })); const hiddenStages = defaultStageConfig.map((s) => ({ ...s, hidden: true }));
......
...@@ -181,6 +181,18 @@ describe('Value Stream Analytics actions', () => { ...@@ -181,6 +181,18 @@ describe('Value Stream Analytics actions', () => {
}); });
}); });
describe('receiveCycleAnalyticsDataSuccess', () => {
it(`commits the ${types.RECEIVE_VALUE_STREAM_DATA_SUCCESS} and dispatches the 'typeOfWork/fetchTopRankedGroupLabels' action`, () => {
return testAction(
actions.receiveCycleAnalyticsDataSuccess,
null,
state,
[{ type: types.RECEIVE_VALUE_STREAM_DATA_SUCCESS }],
[{ type: 'typeOfWork/fetchTopRankedGroupLabels' }],
);
});
});
describe('receiveCycleAnalyticsDataError', () => { describe('receiveCycleAnalyticsDataError', () => {
it(`commits the ${types.RECEIVE_VALUE_STREAM_DATA_ERROR} mutation on a 403 response`, () => { it(`commits the ${types.RECEIVE_VALUE_STREAM_DATA_ERROR} mutation on a 403 response`, () => {
const response = { status: 403 }; const response = { status: 403 };
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment