Improve Health Status code

Make changes as a result of reviewer comments

ee/app/assets/javascripts/sidebar/components/status/sidebar_status.vue

@@ -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>

ee/app/assets/javascripts/sidebar/components/status/status.vue

@@ -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);
     },
   },
 };

ee/spec/frontend/sidebar/components/status/sidebar_status_spec.js

-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', () => {
+  let wrapper;
+
+  afterEach(() => {
+    wrapper.destroy();
+    wrapper = null;
+  });
+
+  describe('Status child component', () => {
+    let handleFormSubmissionMock;
+
+    beforeEach(() => {
       const mediator = {
         store: {
           isFetching: {
@@ -12,9 +26,9 @@ describe('SidebarStatus', () => {
         },
       };
 
-  const handleFormSubmissionMock = jest.fn();
+      handleFormSubmissionMock = jest.fn();
 
-  const wrapper = shallowMount(SidebarStatus, {
+      wrapper = shallowMount(SidebarStatus, {
         propsData: {
           mediator,
         },
@@ -22,14 +36,48 @@ describe('SidebarStatus', () => {
           handleFormSubmission: handleFormSubmissionMock,
         },
       });
+    });
 
     it('renders Status component', () => {
       expect(wrapper.contains(Status)).toBe(true);
     });
 
-  it('calls handleFormSubmission when receiving an onFormSubmit event from Status component', () => {
-    wrapper.find(Status).vm.$emit('onFormSubmit', 'onTrack');
+    it('calls handleFormSubmission when receiving an onStatusChange event from Status component', () => {
+      wrapper.find(Status).vm.$emit('onStatusChange', 'onTrack');
 
       expect(handleFormSubmissionMock).toHaveBeenCalledWith('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');
+
+    return Vue.nextTick().then(() => {
+      expect(getStatusText(wrapper)).toContain('None');
+    });
+  });
 });

ee/spec/frontend/sidebar/components/status/status_spec.js

@@ -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]);
           });
         },
       );