Add latest changes from gitlab-org/gitlab@13-12-stable-eev13.12.0-rc42

2 files changed, 106 insertions, 45 deletions

diff --git a/spec/frontend/vue_shared/alert_details/sidebar/alert_managment_sidebar_assignees_spec.js b/spec/frontend/vue_shared/alert_details/sidebar/alert_sidebar_assignees_spec.js
index 28646994ed1..db9b0930c06 100644
--- a/spec/frontend/vue_shared/alert_details/sidebar/alert_managment_sidebar_assignees_spec.js
+++ b/spec/frontend/vue_shared/alert_details/sidebar/alert_sidebar_assignees_spec.js
@@ -1,7 +1,7 @@
 import { GlDropdownItem } from '@gitlab/ui';
-import { shallowMount } from '@vue/test-utils';
 import axios from 'axios';
 import MockAdapter from 'axios-mock-adapter';
+import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
 import SidebarAssignee from '~/vue_shared/alert_details/components/sidebar/sidebar_assignee.vue';
 import SidebarAssignees from '~/vue_shared/alert_details/components/sidebar/sidebar_assignees.vue';
 import AlertSetAssignees from '~/vue_shared/alert_details/graphql/mutations/alert_set_assignees.mutation.graphql';
@@ -13,6 +13,29 @@ describe('Alert Details Sidebar Assignees', () => {
   let wrapper;
   let mock;
 
+  const mockPath = '/-/autocomplete/users.json';
+  const mockUsers = [
+    {
+      avatar_url:
+        'https://www.gravatar.com/avatar/e64c7d89f26bd1972efa854d13d7dd61?s=80&d=identicon',
+      id: 1,
+      name: 'User 1',
+      username: 'root',
+    },
+    {
+      avatar_url:
+        'https://www.gravatar.com/avatar/e64c7d89f26bd1972efa854d13d7dd61?s=80&d=identicon',
+      id: 2,
+      name: 'User 2',
+      username: 'not-root',
+    },
+  ];
+
+  const findAssigned = () => wrapper.findByTestId('assigned-users');
+  const findDropdown = () => wrapper.findComponent(GlDropdownItem);
+  const findSidebarIcon = () => wrapper.findByTestId('assignees-icon');
+  const findUnassigned = () => wrapper.findByTestId('unassigned-users');
+
   function mountComponent({
     data,
     users = [],
@@ -21,7 +44,7 @@ describe('Alert Details Sidebar Assignees', () => {
     loading = false,
     stubs = {},
   } = {}) {
-    wrapper = shallowMount(SidebarAssignees, {
+    wrapper = shallowMountExtended(SidebarAssignees, {
       data() {
         return {
           users,
@@ -56,10 +79,7 @@ describe('Alert Details Sidebar Assignees', () => {
     mock.restore();
   });
 
-  const findAssigned = () => wrapper.find('[data-testid="assigned-users"]');
-  const findUnassigned = () => wrapper.find('[data-testid="unassigned-users"]');
-
-  describe('updating the alert status', () => {
+  describe('sidebar expanded', () => {
     const mockUpdatedMutationResult = {
       data: {
         alertSetAssignees: {
@@ -73,30 +93,13 @@ describe('Alert Details Sidebar Assignees', () => {
 
     beforeEach(() => {
       mock = new MockAdapter(axios);
-      const path = '/-/autocomplete/users.json';
-      const users = [
-        {
-          avatar_url:
-            'https://www.gravatar.com/avatar/e64c7d89f26bd1972efa854d13d7dd61?s=80&d=identicon',
-          id: 1,
-          name: 'User 1',
-          username: 'root',
-        },
-        {
-          avatar_url:
-            'https://www.gravatar.com/avatar/e64c7d89f26bd1972efa854d13d7dd61?s=80&d=identicon',
-          id: 2,
-          name: 'User 2',
-          username: 'not-root',
-        },
-      ];
 
-      mock.onGet(path).replyOnce(200, users);
+      mock.onGet(mockPath).replyOnce(200, mockUsers);
       mountComponent({
         data: { alert: mockAlert },
         sidebarCollapsed: false,
         loading: false,
-        users,
+        users: mockUsers,
         stubs: {
           SidebarAssignee,
         },
@@ -106,7 +109,11 @@ describe('Alert Details Sidebar Assignees', () => {
     it('renders a unassigned option', async () => {
       wrapper.setData({ isDropdownSearching: false });
       await wrapper.vm.$nextTick();
-      expect(wrapper.find(GlDropdownItem).text()).toBe('Unassigned');
+      expect(findDropdown().text()).toBe('Unassigned');
+    });
+
+    it('does not display the collapsed sidebar icon', () => {
+      expect(findSidebarIcon().exists()).toBe(false);
     });
 
     it('calls `$apollo.mutate` with `AlertSetAssignees` mutation and variables containing `iid`, `assigneeUsernames`, & `projectPath`', async () => {
@@ -170,4 +177,28 @@ describe('Alert Details Sidebar Assignees', () => {
       expect(findAssigned().find('.dropdown-menu-user-username').text()).toBe('@root');
     });
   });
+
+  describe('sidebar collapsed', () => {
+    beforeEach(() => {
+      mock = new MockAdapter(axios);
+
+      mock.onGet(mockPath).replyOnce(200, mockUsers);
+
+      mountComponent({
+        data: { alert: mockAlert },
+        loading: false,
+        users: mockUsers,
+        stubs: {
+          SidebarAssignee,
+        },
+      });
+    });
+    it('does not display the status dropdown', () => {
+      expect(findDropdown().exists()).toBe(false);
+    });
+
+    it('does display the collapsed sidebar icon', () => {
+      expect(findSidebarIcon().exists()).toBe(true);
+    });
+  });
 });
diff --git a/spec/frontend/vue_shared/alert_details/sidebar/alert_sidebar_status_spec.js b/spec/frontend/vue_shared/alert_details/sidebar/alert_sidebar_status_spec.js
index 0014957517f..d5be5b623b8 100644
--- a/spec/frontend/vue_shared/alert_details/sidebar/alert_sidebar_status_spec.js
+++ b/spec/frontend/vue_shared/alert_details/sidebar/alert_sidebar_status_spec.js
@@ -1,5 +1,5 @@
 import { GlDropdown, GlDropdownItem, GlLoadingIcon } from '@gitlab/ui';
-import { mount } from '@vue/test-utils';
+import { mountExtended } from 'helpers/vue_test_utils_helper';
 import updateAlertStatusMutation from '~/graphql_shared/mutations/alert_status_update.mutation.graphql';
 import AlertStatus from '~/vue_shared/alert_details/components/alert_status.vue';
 import AlertSidebarStatus from '~/vue_shared/alert_details/components/sidebar/sidebar_status.vue';
@@ -10,12 +10,13 @@ const mockAlert = mockAlerts[0];
 
 describe('Alert Details Sidebar Status', () => {
   let wrapper;
-  const findStatusDropdown = () => wrapper.find(GlDropdown);
-  const findStatusDropdownItem = () => wrapper.find(GlDropdownItem);
-  const findStatusLoadingIcon = () => wrapper.find(GlLoadingIcon);
-  const findStatusDropdownHeader = () => wrapper.find('[data-testid="dropdown-header"]');
+  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.find('[data-testid="status"]');
+  const findStatus = () => wrapper.findByTestId('status');
+  const findSidebarIcon = () => wrapper.findByTestId('status-icon');
 
   function mountComponent({
     data,
@@ -24,7 +25,7 @@ describe('Alert Details Sidebar Status', () => {
     stubs = {},
     provide = {},
   } = {}) {
-    wrapper = mount(AlertSidebarStatus, {
+    wrapper = mountExtended(AlertSidebarStatus, {
       propsData: {
         alert: { ...mockAlert },
         ...data,
@@ -52,7 +53,7 @@ describe('Alert Details Sidebar Status', () => {
     }
   });
 
-  describe('Alert Sidebar Dropdown Status', () => {
+  describe('sidebar expanded', () => {
     beforeEach(() => {
       mountComponent({
         data: { alert: mockAlert },
@@ -69,6 +70,10 @@ describe('Alert Details Sidebar Status', () => {
       expect(findStatusDropdownHeader().exists()).toBe(true);
     });
 
+    it('does not display the collapsed sidebar icon', () => {
+      expect(findSidebarIcon().exists()).toBe(false);
+    });
+
     describe('updating the alert status', () => {
       const mockUpdatedMutationResult = {
         data: {
@@ -109,22 +114,47 @@ describe('Alert Details Sidebar Status', () => {
         expect(findStatusLoadingIcon().exists()).toBe(false);
         expect(findStatus().text()).toBe('Triggered');
       });
+
+      it('renders default translated statuses', () => {
+        mountComponent({ sidebarCollapsed: false });
+        expect(findAlertStatus().props('statuses')).toBe(PAGE_CONFIG.OPERATIONS.STATUSES);
+        expect(findStatus().text()).toBe('Triggered');
+      });
+
+      it('emits "alert-update" when the status has been updated', () => {
+        mountComponent({ sidebarCollapsed: false });
+        expect(wrapper.emitted('alert-update')).toBeUndefined();
+        findAlertStatus().vm.$emit('handle-updating');
+        expect(wrapper.emitted('alert-update')).toEqual([[]]);
+      });
+
+      it('renders translated statuses', () => {
+        const status = 'TEST';
+        const statuses = { [status]: 'Test' };
+        mountComponent({
+          data: { alert: { ...mockAlert, status } },
+          provide: { statuses },
+          sidebarCollapsed: false,
+        });
+        expect(findAlertStatus().props('statuses')).toBe(statuses);
+        expect(findStatus().text()).toBe(statuses.TEST);
+      });
     });
   });
 
-  describe('Statuses', () => {
-    it('renders default translated statuses', () => {
-      mountComponent({});
-      expect(findAlertStatus().props('statuses')).toBe(PAGE_CONFIG.OPERATIONS.STATUSES);
-      expect(findStatus().text()).toBe('Triggered');
+  describe('sidebar collapsed', () => {
+    beforeEach(() => {
+      mountComponent({
+        data: { alert: mockAlert },
+        loading: false,
+      });
+    });
+    it('does not display the status dropdown', () => {
+      expect(findStatusDropdown().exists()).toBe(false);
     });
 
-    it('renders translated statuses', () => {
-      const status = 'TEST';
-      const statuses = { [status]: 'Test' };
-      mountComponent({ data: { alert: { ...mockAlert, status } }, provide: { statuses } });
-      expect(findAlertStatus().props('statuses')).toBe(statuses);
-      expect(findStatus().text()).toBe(statuses.TEST);
+    it('does display the collapsed sidebar icon', () => {
+      expect(findSidebarIcon().exists()).toBe(true);
     });
   });
 });