Commit fe2ef898 authored by Coung Ngo's avatar Coung Ngo

Improve Health Status code

Make changes as a result of reviewer comments
parent 7d9a2a7f
......@@ -31,6 +31,6 @@ export default {
:is-editable="mediator.store.editable"
:is-fetching="mediator.store.isFetching.status"
:status="mediator.store.status"
@onFormSubmit="handleFormSubmission"
@onStatusChange="handleFormSubmission"
/>
</template>
......@@ -73,7 +73,7 @@ export default {
},
methods: {
handleFormSubmission() {
this.$emit('onFormSubmit', this.selectedStatus);
this.$emit('onStatusChange', this.selectedStatus);
this.hideForm();
},
hideForm() {
......@@ -84,7 +84,7 @@ export default {
this.isFormShowing = !this.isFormShowing;
},
removeStatus() {
this.$emit('onFormSubmit', null);
this.$emit('onStatusChange', null);
},
},
};
......
import { shallowMount } from '@vue/test-utils';
import { mount, shallowMount } from '@vue/test-utils';
import Vue from 'vue';
import SidebarStatus from 'ee/sidebar/components/status/sidebar_status.vue';
import Status from 'ee/sidebar/components/status/status.vue';
const getStatusText = wrapper => wrapper.find('.value').text();
describe('SidebarStatus', () => {
const mediator = {
store: {
isFetching: {
status: true,
},
status: '',
},
};
const handleFormSubmissionMock = jest.fn();
const wrapper = shallowMount(SidebarStatus, {
propsData: {
mediator,
},
methods: {
handleFormSubmission: handleFormSubmissionMock,
},
let wrapper;
afterEach(() => {
wrapper.destroy();
wrapper = null;
});
it('renders Status component', () => {
expect(wrapper.contains(Status)).toBe(true);
describe('Status child component', () => {
let handleFormSubmissionMock;
beforeEach(() => {
const mediator = {
store: {
isFetching: {
status: true,
},
status: '',
},
};
handleFormSubmissionMock = jest.fn();
wrapper = shallowMount(SidebarStatus, {
propsData: {
mediator,
},
methods: {
handleFormSubmission: handleFormSubmissionMock,
},
});
});
it('renders Status component', () => {
expect(wrapper.contains(Status)).toBe(true);
});
it('calls handleFormSubmission when receiving an onStatusChange event from Status component', () => {
wrapper.find(Status).vm.$emit('onStatusChange', 'onTrack');
expect(handleFormSubmissionMock).toHaveBeenCalledWith('onTrack');
});
});
it('calls handleFormSubmission when receiving an onFormSubmit event from Status component', () => {
wrapper.find(Status).vm.$emit('onFormSubmit', 'onTrack');
it('removes status when user clicks on "remove status"', () => {
const mediator = {
store: {
editable: true,
isFetching: {
status: false,
},
status: 'onTrack',
},
updateStatus(status) {
const newMediator = { ...this };
newMediator.store.status = status;
wrapper.setProps({ mediator: newMediator });
return Promise.resolve();
},
};
wrapper = mount(SidebarStatus, {
propsData: {
mediator,
},
});
expect(getStatusText(wrapper)).toContain('On track');
wrapper.find('button.btn-link').trigger('click');
expect(handleFormSubmissionMock).toHaveBeenCalledWith('onTrack');
return Vue.nextTick().then(() => {
expect(getStatusText(wrapper)).toContain('None');
});
});
});
......@@ -112,7 +112,7 @@ describe('Status', () => {
expect(getRemoveStatusButton(wrapper).exists()).toBe(true);
});
it('emits an onFormSubmit event with argument null when clicked', () => {
it('emits an onStatusChange event with argument null when clicked', () => {
const props = {
isEditable: true,
status: healthStatus.AT_RISK,
......@@ -122,7 +122,7 @@ describe('Status', () => {
getRemoveStatusButton(wrapper).trigger('click');
expect(wrapper.emitted().onFormSubmit[0]).toEqual([null]);
expect(wrapper.emitted().onStatusChange[0]).toEqual([null]);
});
});
......@@ -267,7 +267,7 @@ describe('Status', () => {
// Test that "onTrack", "needsAttention", and "atRisk" values are emitted when form is submitted
it.each(Object.values(healthStatus))(
'emits onFormSubmit event with argument "%s" when user selects the option and submits form',
'emits onStatusChange event with argument "%s" when user selects the option and submits form',
status => {
getEditForm(wrapper)
.find(`input[value="${status}"]`)
......@@ -275,7 +275,7 @@ describe('Status', () => {
return Vue.nextTick().then(() => {
getEditForm(wrapper).trigger('submit');
expect(wrapper.emitted().onFormSubmit[0]).toEqual([status]);
expect(wrapper.emitted().onStatusChange[0]).toEqual([status]);
});
},
);
......
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