Skip to content

G
gitlab-ce
Commit f9584a7e authored by Ezekiel Kigbo's avatar Ezekiel Kigbo
Browse files
Options

Replace callback tests with promises 

Replaces the done() in the custom_stage_form_spec
with returned promises
parent 7256e544
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 482 additions and 454 deletions
ee/app/assets/javascripts/analytics/cycle_analytics/components/base.vue
View file @ f9584a7e
...@@ -136,6 +136,7 @@ export default { ...@@ -136,6 +136,7 @@ export default {
'setSelectedStage', 'setSelectedStage',
'hideCustomStageForm', 'hideCustomStageForm',
'showCustomStageForm', 'showCustomStageForm',
'showEditCustomStageForm',
'setDateRange', 'setDateRange',
'fetchTasksByTypeData', 'fetchTasksByTypeData',
'updateSelectedDurationChartStages', 'updateSelectedDurationChartStages',
...@@ -143,7 +144,6 @@ export default { ...@@ -143,7 +144,6 @@ export default {
'updateStage', 'updateStage',
'removeStage', 'removeStage',
'setFeatureFlags', 'setFeatureFlags',
'editCustomStage',
'clearCustomStageFormErrors', 'clearCustomStageFormErrors',
'updateStage', 'updateStage',
'setTasksByTypeFilters', 'setTasksByTypeFilters',
...@@ -166,7 +166,7 @@ export default { ...@@ -166,7 +166,7 @@ export default {
this.showCustomStageForm(); this.showCustomStageForm();
}, },
onShowEditStageForm(initData = {}) { onShowEditStageForm(initData = {}) {
this.editCustomStage(initData); this.showEditCustomStageForm(initData);
}, },
initDateRange() { initDateRange() {
const endDate = new Date(Date.now()); const endDate = new Date(Date.now());
...@@ -281,11 +281,11 @@ export default { ...@@ -281,11 +281,11 @@ export default {
:current-stage-events="currentStageEvents" :current-stage-events="currentStageEvents"
:custom-stage-form-events="customStageFormEvents" :custom-stage-form-events="customStageFormEvents"
:custom-stage-form-errors="customStageFormErrors" :custom-stage-form-errors="customStageFormErrors"
@clearCustomStageFormErrors="clearCustomStageFormErrors"
:labels="labels" :labels="labels"
:no-data-svg-path="noDataSvgPath" :no-data-svg-path="noDataSvgPath"
:no-access-svg-path="noAccessSvgPath" :no-access-svg-path="noAccessSvgPath"
:can-edit-stages="hasCustomizableCycleAnalytics" :can-edit-stages="hasCustomizableCycleAnalytics"
@clearCustomStageFormErrors="clearCustomStageFormErrors"
@selectStage="onStageSelect" @selectStage="onStageSelect"
@editStage="onShowEditStageForm" @editStage="onShowEditStageForm"
@showAddStageForm="onShowAddStageForm" @showAddStageForm="onShowAddStageForm"
......
ee/app/assets/javascripts/analytics/cycle_analytics/components/custom_stage_form.vue
View file @ f9584a7e
...@@ -58,22 +58,19 @@ export default { ...@@ -58,22 +58,19 @@ export default {
errors: { errors: {
type: Object, type: Object,
required: false, required: false,
default: () => {}, default: null,
}, },
}, },
data() { data() {
return { return {
labelEvents: getLabelEventsIdentifiers(this.events), labelEvents: getLabelEventsIdentifiers(this.events),
fields: {}, fields: {
...defaultFields,
...this.initialFields,
},
}; };
}, },
computed: { computed: {
defaultFieldData() {
return {
...defaultFields,
...this.initialFields,
};
},
startEventOptions() { startEventOptions() {
return [ return [
{ value: null, text: s__('CustomCycleAnalytics|Select start event') }, { value: null, text: s__('CustomCycleAnalytics|Select start event') },
...@@ -150,27 +147,20 @@ export default { ...@@ -150,27 +147,20 @@ export default {
: s__('CustomCycleAnalytics|New stage'); : s__('CustomCycleAnalytics|New stage');
}, },
}, },
mounted() { watch: {
this.resetFormFields(); initialFields(newFields) {
this.fields = {
...defaultFields,
...newFields,
};
},
}, },
// updated() {
// this.resetFormFields();
// },
methods: { methods: {
resetFormFields() {
this.fields = this.defaultFieldData;
// console.log('this.fields', this.fields);
// console.log('this.initialFields', this.initialFields);
// console.log('defaultFields', defaultFields);
// Object.entries(this.defaultFieldData).
// for (let [key, value] of Object.entries(this.defaultFieldData)) {
// // console.log('setting', key, value);
// this.$set(this.fields, key, value);
// }
// console.log('this.fields', this.fields);
},
handleCancel() { handleCancel() {
this.resetFormFields(); this.fields = {
...defaultFields,
...this.initialFields,
};
this.$emit('cancel'); this.$emit('cancel');
}, },
handleSave() { handleSave() {
...@@ -194,9 +184,6 @@ export default { ...@@ -194,9 +184,6 @@ export default {
fieldErrors(key) { fieldErrors(key) {
return !this.isValid(key) ? this.errors[key].join('\n') : null; return !this.isValid(key) ? this.errors[key].join('\n') : null;
}, },
onUpdateFormField() {
if (this.errors) this.$emit('clearErrors');
},
}, },
}; };
</script> </script>
...@@ -206,6 +193,7 @@ export default { ...@@ -206,6 +193,7 @@ export default {
<h4>{{ formTitle }}</h4> <h4>{{ formTitle }}</h4>
</div> </div>
<gl-form-group <gl-form-group
ref="name"
:label="s__('CustomCycleAnalytics|Name')" :label="s__('CustomCycleAnalytics|Name')"
:state="isValid('name')" :state="isValid('name')"
:invalid-feedback="fieldErrors('name')" :invalid-feedback="fieldErrors('name')"
...@@ -217,12 +205,13 @@ export default { ...@@ -217,12 +205,13 @@ export default {
name="custom-stage-name" name="custom-stage-name"
:placeholder="s__('CustomCycleAnalytics|Enter a name for the stage')" :placeholder="s__('CustomCycleAnalytics|Enter a name for the stage')"
required required
@change="onUpdateFormField"
/> />
<!-- @change="onUpdateFormField" -->
</gl-form-group> </gl-form-group>
<div class="d-flex" :class="{ 'justify-content-between': startEventRequiresLabel }"> <div class="d-flex" :class="{ 'justify-content-between': startEventRequiresLabel }">
<div :class="[startEventRequiresLabel ? 'w-50 mr-1' : 'w-100']"> <div :class="[startEventRequiresLabel ? 'w-50 mr-1' : 'w-100']">
<gl-form-group <gl-form-group
ref="startEventIdentifier"
:label="s__('CustomCycleAnalytics|Start event')" :label="s__('CustomCycleAnalytics|Start event')"
:state="isValid('startEventIdentifier')" :state="isValid('startEventIdentifier')"
:invalid-feedback="fieldErrors('startEventIdentifier')" :invalid-feedback="fieldErrors('startEventIdentifier')"
...@@ -232,12 +221,13 @@ export default { ...@@ -232,12 +221,13 @@ export default {
name="custom-stage-start-event" name="custom-stage-start-event"
:required="true" :required="true"
:options="startEventOptions" :options="startEventOptions"
@change="onUpdateFormField"
/> />
<!-- @change="onUpdateFormField" -->
</gl-form-group> </gl-form-group>
</div> </div>
<div v-if="startEventRequiresLabel" class="w-50 ml-1"> <div v-if="startEventRequiresLabel" class="w-50 ml-1">
<gl-form-group <gl-form-group
ref="startEventLabelId"
:label="s__('CustomCycleAnalytics|Start event label')" :label="s__('CustomCycleAnalytics|Start event label')"
:state="isValid('startEventLabelId')" :state="isValid('startEventLabelId')"
:invalid-feedback="fieldErrors('startEventLabelId')" :invalid-feedback="fieldErrors('startEventLabelId')"
...@@ -248,14 +238,15 @@ export default { ...@@ -248,14 +238,15 @@ export default {
name="custom-stage-start-event-label" name="custom-stage-start-event-label"
@selectLabel="handleSelectLabel('startEventLabelId', $event)" @selectLabel="handleSelectLabel('startEventLabelId', $event)"
@clearLabel="handleClearLabel('startEventLabelId')" @clearLabel="handleClearLabel('startEventLabelId')"
@change="onUpdateFormField"
/> />
<!-- @change="onUpdateFormField" -->
</gl-form-group> </gl-form-group>
</div> </div>
</div> </div>
<div class="d-flex" :class="{ 'justify-content-between': endEventRequiresLabel }"> <div class="d-flex" :class="{ 'justify-content-between': endEventRequiresLabel }">
<div :class="[endEventRequiresLabel ? 'w-50 mr-1' : 'w-100']"> <div :class="[endEventRequiresLabel ? 'w-50 mr-1' : 'w-100']">
<gl-form-group <gl-form-group
ref="endEventIdentifier"
:label="s__('CustomCycleAnalytics|Stop event')" :label="s__('CustomCycleAnalytics|Stop event')"
:description=" :description="
!hasStartEvent ? s__('CustomCycleAnalytics|Please select a start event first') : '' !hasStartEvent ? s__('CustomCycleAnalytics|Please select a start event first') : ''
...@@ -263,20 +254,19 @@ export default { ...@@ -263,20 +254,19 @@ export default {
:state="isValid('endEventIdentifier')" :state="isValid('endEventIdentifier')"
:invalid-feedback="fieldErrors('endEventIdentifier') || endEventError" :invalid-feedback="fieldErrors('endEventIdentifier') || endEventError"
> >
<!-- :state="hasValidStartAndEndEventPair"
:invalid-feedback="endEventError" -->
<gl-form-select <gl-form-select
v-model="fields.endEventIdentifier" v-model="fields.endEventIdentifier"
name="custom-stage-stop-event" name="custom-stage-stop-event"
:options="endEventOptions" :options="endEventOptions"
:required="true" :required="true"
:disabled="!hasStartEvent" :disabled="!hasStartEvent"
@change="onUpdateFormField"
/> />
<!-- @change="onUpdateFormField" -->
</gl-form-group> </gl-form-group>
</div> </div>
<div v-if="endEventRequiresLabel" class="w-50 ml-1"> <div v-if="endEventRequiresLabel" class="w-50 ml-1">
<gl-form-group <gl-form-group
ref="endEventLabelId"
:label="s__('CustomCycleAnalytics|Stop event label')" :label="s__('CustomCycleAnalytics|Stop event label')"
:state="isValid('endEventLabelId')" :state="isValid('endEventLabelId')"
:invalid-feedback="fieldErrors('endEventLabelId')" :invalid-feedback="fieldErrors('endEventLabelId')"
...@@ -287,8 +277,8 @@ export default { ...@@ -287,8 +277,8 @@ export default {
name="custom-stage-stop-event-label" name="custom-stage-stop-event-label"
@selectLabel="handleSelectLabel('endEventLabelId', $event)" @selectLabel="handleSelectLabel('endEventLabelId', $event)"
@clearLabel="handleClearLabel('endEventLabelId')" @clearLabel="handleClearLabel('endEventLabelId')"
@change="onUpdateFormField"
/> />
<!-- @change="onUpdateFormField" -->
</gl-form-group> </gl-form-group>
</div> </div>
</div> </div>
......
ee/app/assets/javascripts/analytics/cycle_analytics/store/actions.js
View file @ f9584a7e
...@@ -138,8 +138,8 @@ export const fetchCycleAnalyticsData = ({ dispatch }) => { ...@@ -138,8 +138,8 @@ export const fetchCycleAnalyticsData = ({ dispatch }) => {
export const hideCustomStageForm = ({ commit }) => commit(types.HIDE_CUSTOM_STAGE_FORM); export const hideCustomStageForm = ({ commit }) => commit(types.HIDE_CUSTOM_STAGE_FORM);
export const showCustomStageForm = ({ commit }) => commit(types.SHOW_CUSTOM_STAGE_FORM); export const showCustomStageForm = ({ commit }) => commit(types.SHOW_CUSTOM_STAGE_FORM);
export const editCustomStage = ({ commit, dispatch }, selectedStage = {}) => { export const showEditCustomStageForm = ({ commit, dispatch }, selectedStage = {}) => {
commit(types.EDIT_CUSTOM_STAGE); commit(types.SHOW_EDIT_CUSTOM_STAGE_FORM);
dispatch('setSelectedStage', selectedStage); dispatch('setSelectedStage', selectedStage);
}; };
......
ee/app/assets/javascripts/analytics/cycle_analytics/store/mutation_types.js
View file @ f9584a7e
...@@ -21,7 +21,7 @@ export const RECEIVE_STAGE_MEDIANS_ERROR = 'RECEIVE_STAGE_MEDIANS_ERROR'; ...@@ -21,7 +21,7 @@ export const RECEIVE_STAGE_MEDIANS_ERROR = 'RECEIVE_STAGE_MEDIANS_ERROR';
export const HIDE_CUSTOM_STAGE_FORM = 'HIDE_CUSTOM_STAGE_FORM'; export const HIDE_CUSTOM_STAGE_FORM = 'HIDE_CUSTOM_STAGE_FORM';
export const SHOW_CUSTOM_STAGE_FORM = 'SHOW_CUSTOM_STAGE_FORM'; export const SHOW_CUSTOM_STAGE_FORM = 'SHOW_CUSTOM_STAGE_FORM';
export const EDIT_CUSTOM_STAGE = 'EDIT_CUSTOM_STAGE'; export const SHOW_EDIT_CUSTOM_STAGE_FORM = 'SHOW_EDIT_CUSTOM_STAGE_FORM';
export const CLEAR_CUSTOM_STAGE_FORM_ERRORS = 'CLEAR_CUSTOM_STAGE_FORM_ERRORS'; export const CLEAR_CUSTOM_STAGE_FORM_ERRORS = 'CLEAR_CUSTOM_STAGE_FORM_ERRORS';
export const REQUEST_GROUP_LABELS = 'REQUEST_GROUP_LABELS'; export const REQUEST_GROUP_LABELS = 'REQUEST_GROUP_LABELS';
......
ee/app/assets/javascripts/analytics/cycle_analytics/store/mutations.js
View file @ f9584a7e
...@@ -98,7 +98,7 @@ export default { ...@@ -98,7 +98,7 @@ export default {
state.isCreatingCustomStage = true; state.isCreatingCustomStage = true;
state.isEditingCustomStage = false; state.isEditingCustomStage = false;
}, },
[types.EDIT_CUSTOM_STAGE](state) { [types.SHOW_EDIT_CUSTOM_STAGE_FORM](state) {
state.isEditingCustomStage = true; state.isEditingCustomStage = true;
state.isCreatingCustomStage = false; state.isCreatingCustomStage = false;
}, },
......
ee/spec/frontend/analytics/cycle_analytics/components/__snapshots__/custom_stage_form_spec.js.snap
View file @ f9584a7e
...@@ -6,7 +6,7 @@ exports[`CustomStageForm Editing a custom stage isSavingCustomStage=true display ...@@ -6,7 +6,7 @@ exports[`CustomStageForm Editing a custom stage isSavingCustomStage=true display
</button>" </button>"
`; `;
exports[`CustomStageForm Empty form Start event with events does not select events with canBeStartEvent=false for the start events dropdown 1`] = ` exports[`CustomStageForm Start event with events does not select events with canBeStartEvent=false for the start events dropdown 1`] = `
"<select name=\\"custom-stage-start-event\\" required=\\"required\\" aria-required=\\"true\\" class=\\"gl-form-select custom-select\\" id=\\"__BVID__123\\"> "<select name=\\"custom-stage-start-event\\" required=\\"required\\" aria-required=\\"true\\" class=\\"gl-form-select custom-select\\" id=\\"__BVID__123\\">
<option value=\\"\\">Select start event</option> <option value=\\"\\">Select start event</option>
<option value=\\"issue_created\\">Issue created</option> <option value=\\"issue_created\\">Issue created</option>
...@@ -29,7 +29,7 @@ exports[`CustomStageForm Empty form Start event with events does not select even ...@@ -29,7 +29,7 @@ exports[`CustomStageForm Empty form Start event with events does not select even
</select>" </select>"
`; `;
exports[`CustomStageForm Empty form Start event with events selects events with canBeStartEvent=true for the start events dropdown 1`] = ` exports[`CustomStageForm Start event with events selects events with canBeStartEvent=true for the start events dropdown 1`] = `
"<select name=\\"custom-stage-start-event\\" required=\\"required\\" aria-required=\\"true\\" class=\\"gl-form-select custom-select\\" id=\\"__BVID__95\\"> "<select name=\\"custom-stage-start-event\\" required=\\"required\\" aria-required=\\"true\\" class=\\"gl-form-select custom-select\\" id=\\"__BVID__95\\">
<option value=\\"\\">Select start event</option> <option value=\\"\\">Select start event</option>
<option value=\\"issue_created\\">Issue created</option> <option value=\\"issue_created\\">Issue created</option>
...@@ -52,7 +52,49 @@ exports[`CustomStageForm Empty form Start event with events selects events with ...@@ -52,7 +52,49 @@ exports[`CustomStageForm Empty form Start event with events selects events with
</select>" </select>"
`; `;
exports[`CustomStageForm Empty form isSavingCustomStage=true displays a loading icon 1`] = ` exports[`CustomStageForm With errors renders the errors for the relevant fields 1`] = `
"<fieldset aria-invalid=\\"true\\" class=\\"form-group gl-form-group is-invalid\\" id=\\"__BVID__1372\\" aria-describedby=\\"__BVID__1372__BV_feedback_invalid_\\">
<legend tabindex=\\"-1\\" class=\\"col-form-label pt-0 col-form-label\\" id=\\"__BVID__1372__BV_label_\\">Name</legend>
<div tabindex=\\"-1\\" role=\\"group\\"><input name=\\"custom-stage-name\\" type=\\"text\\" placeholder=\\"Enter a name for the stage\\" required=\\"required\\" aria-required=\\"true\\" class=\\"gl-form-input form-control form-control\\" id=\\"__BVID__1374\\">
<div tabindex=\\"-1\\" role=\\"alert\\" aria-live=\\"assertive\\" aria-atomic=\\"true\\" class=\\"invalid-feedback d-block\\" id=\\"__BVID__1372__BV_feedback_invalid_\\">is reserved
cant be blank</div>
<!---->
<!---->
</div>
</fieldset>"
`;
exports[`CustomStageForm With errors renders the errors for the relevant fields 2`] = `
"<fieldset aria-invalid=\\"true\\" class=\\"form-group gl-form-group is-invalid\\" id=\\"__BVID__1376\\" aria-describedby=\\"__BVID__1376__BV_feedback_invalid_\\">
<legend tabindex=\\"-1\\" class=\\"col-form-label pt-0 col-form-label\\" id=\\"__BVID__1376__BV_label_\\">Start event</legend>
<div tabindex=\\"-1\\" role=\\"group\\"><select name=\\"custom-stage-start-event\\" required=\\"required\\" aria-required=\\"true\\" class=\\"gl-form-select custom-select\\" id=\\"__BVID__1378\\">
<option value=\\"\\">Select start event</option>
<option value=\\"issue_created\\">Issue created</option>
<option value=\\"issue_first_mentioned_in_commit\\">Issue first mentioned in a commit</option>
<option value=\\"merge_request_created\\">Merge request created</option>
<option value=\\"merge_request_first_deployed_to_production\\">Merge request first deployed to production</option>
<option value=\\"merge_request_last_build_finished\\">Merge request last build finish time</option>
<option value=\\"merge_request_last_build_started\\">Merge request last build start time</option>
<option value=\\"merge_request_merged\\">Merge request merged</option>
<option value=\\"code_stage_start\\">Issue first mentioned in a commit</option>
<option value=\\"plan_stage_start\\">Issue first associated with a milestone or issue first added to a board</option>
<option value=\\"issue_closed\\">Issue closed</option>
<option value=\\"issue_first_added_to_board\\">Issue first added to a board</option>
<option value=\\"issue_first_associated_with_milestone\\">Issue first associated with a milestone</option>
<option value=\\"issue_label_added\\">Issue label was added</option>
<option value=\\"issue_label_removed\\">Issue label was removed</option>
<option value=\\"merge_request_closed\\">Merge request closed</option>
<option value=\\"merge_request_label_added\\">Merge Request label was added</option>
<option value=\\"merge_request_label_removed\\">Merge Request label was removed</option>
</select>
<div tabindex=\\"-1\\" role=\\"alert\\" aria-live=\\"assertive\\" aria-atomic=\\"true\\" class=\\"invalid-feedback d-block\\" id=\\"__BVID__1376__BV_feedback_invalid_\\">cant be blank</div>
<!---->
<!---->
</div>
</fieldset>"
`;
exports[`CustomStageForm isSavingCustomStage=true displays a loading icon 1`] = `
"<button disabled=\\"disabled\\" type=\\"button\\" class=\\"js-save-stage btn btn-success\\"><span class=\\"gl-spinner-container\\"><span aria-label=\\"Loading\\" aria-hidden=\\"true\\" class=\\"gl-spinner gl-spinner-orange gl-spinner-sm\\"></span></span> "<button disabled=\\"disabled\\" type=\\"button\\" class=\\"js-save-stage btn btn-success\\"><span class=\\"gl-spinner-container\\"><span aria-label=\\"Loading\\" aria-hidden=\\"true\\" class=\\"gl-spinner gl-spinner-orange gl-spinner-sm\\"></span></span>
Add stage Add stage
</button>" </button>"
......
ee/spec/frontend/analytics/cycle_analytics/mock_data.js
View file @ f9584a7e
...@@ -118,6 +118,13 @@ export const labelStopEvent = customStageLabelEvents.find( ...@@ -118,6 +118,13 @@ export const labelStopEvent = customStageLabelEvents.find(
ev => ev.identifier === labelStartEvent.allowedEndEvents[0], ev => ev.identifier === labelStartEvent.allowedEndEvents[0],
); );
export const rawCustomStageFormErrors = {
name: ['is reserved', 'cant be blank'],
start_event_identifier: ['cant be blank'],
};
export const customStageFormErrors = convertObjectPropsToCamelCase(rawCustomStageFormErrors);
const dateRange = getDatesInRange(startDate, endDate, toYmd); const dateRange = getDatesInRange(startDate, endDate, toYmd);
export const tasksByTypeData = getJSONFixture('analytics/type_of_work/tasks_by_type.json').map( export const tasksByTypeData = getJSONFixture('analytics/type_of_work/tasks_by_type.json').map(
......
ee/spec/frontend/analytics/cycle_analytics/store/mutations_spec.js
View file @ f9584a7e
...@@ -38,7 +38,9 @@ describe('Cycle analytics mutations', () => { ...@@ -38,7 +38,9 @@ describe('Cycle analytics mutations', () => {
mutation | stateKey | value mutation | stateKey | value
${types.HIDE_CUSTOM_STAGE_FORM} | ${'isCreatingCustomStage'} | ${false} ${types.HIDE_CUSTOM_STAGE_FORM} | ${'isCreatingCustomStage'} | ${false}
${types.SHOW_CUSTOM_STAGE_FORM} | ${'isCreatingCustomStage'} | ${true} ${types.SHOW_CUSTOM_STAGE_FORM} | ${'isCreatingCustomStage'} | ${true}
${types.EDIT_CUSTOM_STAGE} | ${'isEditingCustomStage'} | ${true} ${types.SHOW_CUSTOM_STAGE_FORM} | ${'isEditingCustomStage'} | ${false}
${types.SHOW_EDIT_CUSTOM_STAGE_FORM} | ${'isEditingCustomStage'} | ${true}
${types.SHOW_EDIT_CUSTOM_STAGE_FORM} | ${'isCreatingCustomStage'} | ${false}
${types.REQUEST_STAGE_DATA} | ${'isLoadingStage'} | ${true} ${types.REQUEST_STAGE_DATA} | ${'isLoadingStage'} | ${true}
${types.RECEIVE_STAGE_DATA_ERROR} | ${'isEmptyStage'} | ${true} ${types.RECEIVE_STAGE_DATA_ERROR} | ${'isEmptyStage'} | ${true}
${types.RECEIVE_STAGE_DATA_ERROR} | ${'isLoadingStage'} | ${false} ${types.RECEIVE_STAGE_DATA_ERROR} | ${'isLoadingStage'} | ${false}
......
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
GitLab Nexedi Edition | About GitLab | About Nexedi | 沪ICP备2021021310号-2 | 沪ICP备2021021310号-7