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', () => {
-  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');
+    });
   });
 });

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