Merge branch '330543-update-alert-status-sidebar-components' into 'master'

Add additional alert status tests

See merge request gitlab-org/gitlab!64028

app/assets/javascripts/vue_shared/alert_details/components/sidebar/sidebar_status.vue

 <script>
-import { GlIcon, GlLoadingIcon, GlTooltip, GlSprintf } from '@gitlab/ui';
+import { GlButton, GlIcon, GlLoadingIcon, GlTooltip, GlSprintf } from '@gitlab/ui';
 import { PAGE_CONFIG } from '../../constants';
 import AlertStatus from '../alert_status.vue';
 
 export default {
   components: {
     GlIcon,
+    GlButton,
     GlLoadingIcon,
     GlTooltip,
     GlSprintf,
@@ -96,16 +97,15 @@ export default {
         class="gl-text-gray-900 gl-mb-2 gl-line-height-20 gl-display-flex gl-justify-content-space-between"
       >
         {{ s__('AlertManagement|Status') }}
-        <a
+        <gl-button
           v-if="isEditable"
-          ref="editButton"
-          class="btn-link"
-          href="#"
+          class="gl-text-black-normal!"
+          variant="link"
           @click="toggleFormDropdown"
           @keydown.esc="hideDropdown"
         >
           {{ s__('AlertManagement|Edit') }}
-        </a>
+        </gl-button>
       </p>
 
       <alert-status

spec/frontend/vue_shared/alert_details/alert_status_spec.js

 import { GlDropdown, GlDropdownItem } from '@gitlab/ui';
-import { shallowMount } from '@vue/test-utils';
+import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
 import waitForPromises from 'helpers/wait_for_promises';
 import updateAlertStatusMutation from '~/graphql_shared//mutations/alert_status_update.mutation.graphql';
 import Tracking from '~/tracking';
@@ -10,9 +10,10 @@ const mockAlert = mockAlerts[0];
 
 describe('AlertManagementStatus', () => {
   let wrapper;
-  const findStatusDropdown = () => wrapper.find(GlDropdown);
-  const findFirstStatusOption = () => findStatusDropdown().find(GlDropdownItem);
+  const findStatusDropdown = () => wrapper.findComponent(GlDropdown);
+  const findFirstStatusOption = () => findStatusDropdown().findComponent(GlDropdownItem);
   const findAllStatusOptions = () => findStatusDropdown().findAll(GlDropdownItem);
+  const findStatusDropdownHeader = () => wrapper.findByTestId('dropdown-header');
 
   const selectFirstStatusOption = () => {
     findFirstStatusOption().vm.$emit('click');
@@ -21,7 +22,7 @@ describe('AlertManagementStatus', () => {
   };
 
   function mountComponent({ props = {}, provide = {}, loading = false, stubs = {} } = {}) {
-    wrapper = shallowMount(AlertManagementStatus, {
+    wrapper = shallowMountExtended(AlertManagementStatus, {
       propsData: {
         alert: { ...mockAlert },
         projectPath: 'gitlab-org/gitlab',
@@ -43,17 +44,29 @@ describe('AlertManagementStatus', () => {
     });
   }
 
-  beforeEach(() => {
-    mountComponent();
-  });
-
   afterEach(() => {
     if (wrapper) {
       wrapper.destroy();
-      wrapper = null;
     }
   });
 
+  describe('sidebar', () => {
+    it('displays the dropdown status header', () => {
+      mountComponent({ props: { isSidebar: true } });
+      expect(findStatusDropdownHeader().exists()).toBe(true);
+    });
+
+    it('hides the dropdown by default', () => {
+      mountComponent({ props: { isSidebar: true } });
+      expect(wrapper.classes()).toContain('gl-display-none');
+    });
+
+    it('shows the dropdown', () => {
+      mountComponent({ props: { isSidebar: true, isDropdownShowing: true } });
+      expect(wrapper.classes()).toContain('show');
+    });
+  });
+
   describe('updating the alert status', () => {
     const iid = '1527542';
     const mockUpdatedMutationResult = {
@@ -99,6 +112,13 @@ describe('AlertManagementStatus', () => {
         ]);
       });
 
+      it('emits an update event at the start and ending of the updating', async () => {
+        await selectFirstStatusOption();
+        expect(wrapper.emitted('handle-updating').length > 1).toBe(true);
+        expect(wrapper.emitted('handle-updating')[0]).toEqual([true]);
+        expect(wrapper.emitted('handle-updating')[1]).toEqual([false]);
+      });
+
       it('emits an error when triggered a second time', async () => {
         await selectFirstStatusOption();
         await wrapper.vm.$nextTick();

spec/frontend/vue_shared/alert_details/sidebar/alert_sidebar_status_spec.js

-import { GlDropdown, GlDropdownItem, GlLoadingIcon } from '@gitlab/ui';
-import { mountExtended } from 'helpers/vue_test_utils_helper';
-import updateAlertStatusMutation from '~/graphql_shared/mutations/alert_status_update.mutation.graphql';
+import { GlDropdown, GlLoadingIcon } from '@gitlab/ui';
+import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
 import AlertStatus from '~/vue_shared/alert_details/components/alert_status.vue';
 import AlertSidebarStatus from '~/vue_shared/alert_details/components/sidebar/sidebar_status.vue';
 import { PAGE_CONFIG } from '~/vue_shared/alert_details/constants';
@@ -11,9 +10,7 @@ const mockAlert = mockAlerts[0];
 describe('Alert Details Sidebar Status', () => {
   let wrapper;
   const findStatusDropdown = () => wrapper.findComponent(GlDropdown);
-  const findStatusDropdownItem = () => wrapper.findComponent(GlDropdownItem);
   const findStatusLoadingIcon = () => wrapper.findComponent(GlLoadingIcon);
-  const findStatusDropdownHeader = () => wrapper.findByTestId('dropdown-header');
   const findAlertStatus = () => wrapper.findComponent(AlertStatus);
   const findStatus = () => wrapper.findByTestId('status');
   const findSidebarIcon = () => wrapper.findByTestId('status-icon');
@@ -25,7 +22,7 @@ describe('Alert Details Sidebar Status', () => {
     stubs = {},
     provide = {},
   } = {}) {
-    wrapper = mountExtended(AlertSidebarStatus, {
+    wrapper = shallowMountExtended(AlertSidebarStatus, {
       propsData: {
         alert: { ...mockAlert },
         ...data,
@@ -63,11 +60,7 @@ describe('Alert Details Sidebar Status', () => {
     });
 
     it('displays status dropdown', () => {
-      expect(findStatusDropdown().exists()).toBe(true);
-    });
-
-    it('displays the dropdown status header', () => {
-      expect(findStatusDropdownHeader().exists()).toBe(true);
+      expect(findAlertStatus().exists()).toBe(true);
     });
 
     it('does not display the collapsed sidebar icon', () => {
@@ -75,42 +68,24 @@ describe('Alert Details Sidebar Status', () => {
     });
 
     describe('updating the alert status', () => {
-      const mockUpdatedMutationResult = {
-        data: {
-          updateAlertStatus: {
-            errors: [],
-            alert: {
-              status: 'acknowledged',
-            },
-          },
-        },
-      };
-
-      beforeEach(() => {
+      it('ensures dropdown is hidden when loading', async () => {
         mountComponent({
           data: { alert: mockAlert },
           sidebarCollapsed: false,
           loading: false,
         });
-      });
-
-      it('calls `$apollo.mutate` with `updateAlertStatus` mutation and variables containing `iid`, `status`, & `projectPath`', () => {
-        jest.spyOn(wrapper.vm.$apollo, 'mutate').mockResolvedValue(mockUpdatedMutationResult);
-        findStatusDropdownItem().vm.$emit('click');
-
-        expect(wrapper.vm.$apollo.mutate).toHaveBeenCalledWith({
-          mutation: updateAlertStatusMutation,
-          variables: {
-            iid: '1527542',
-            status: 'TRIGGERED',
-            projectPath: 'projectPath',
-          },
-        });
+        findAlertStatus().vm.$emit('handle-updating', true);
+        await wrapper.vm.$nextTick();
+        expect(findStatusLoadingIcon().exists()).toBe(true);
       });
 
       it('stops updating when the request fails', () => {
-        jest.spyOn(wrapper.vm.$apollo, 'mutate').mockReturnValue(Promise.reject(new Error()));
-        findStatusDropdownItem().vm.$emit('click');
+        mountComponent({
+          data: { alert: mockAlert },
+          sidebarCollapsed: false,
+          loading: false,
+        });
+        findAlertStatus().vm.$emit('handle-updating', false);
         expect(findStatusLoadingIcon().exists()).toBe(false);
         expect(findStatus().text()).toBe('Triggered');
       });