Add latest changes from gitlab-org/gitlab@14-10-stable-eev14.10.0-rc42

4 files changed, 77 insertions, 7 deletions

diff --git a/spec/frontend/sidebar/assignees_realtime_spec.js b/spec/frontend/sidebar/assignees_realtime_spec.js
index 2249a1c08b8..ae8f07bf901 100644
--- a/spec/frontend/sidebar/assignees_realtime_spec.js
+++ b/spec/frontend/sidebar/assignees_realtime_spec.js
@@ -2,11 +2,16 @@ import { shallowMount } from '@vue/test-utils';
 import Vue from 'vue';
 import VueApollo from 'vue-apollo';
 import createMockApollo from 'helpers/mock_apollo_helper';
+import waitForPromises from 'helpers/wait_for_promises';
 import AssigneesRealtime from '~/sidebar/components/assignees/assignees_realtime.vue';
 import issuableAssigneesSubscription from '~/sidebar/queries/issuable_assignees.subscription.graphql';
 import SidebarMediator from '~/sidebar/sidebar_mediator';
 import getIssueAssigneesQuery from '~/vue_shared/components/sidebar/queries/get_issue_assignees.query.graphql';
-import Mock, { issuableQueryResponse, subscriptionNullResponse } from './mock_data';
+import Mock, {
+  issuableQueryResponse,
+  subscriptionNullResponse,
+  subscriptionResponse,
+} from './mock_data';
 
 Vue.use(VueApollo);
 
@@ -20,7 +25,6 @@ describe('Assignees Realtime', () => {
 
   const createComponent = ({
     issuableType = 'issue',
-    issuableId = 1,
     subscriptionHandler = subscriptionInitialHandler,
   } = {}) => {
     fakeApollo = createMockApollo([
@@ -30,7 +34,6 @@ describe('Assignees Realtime', () => {
     wrapper = shallowMount(AssigneesRealtime, {
       propsData: {
         issuableType,
-        issuableId,
         queryVariables: {
           issuableIid: '1',
           projectPath: 'path/to/project',
@@ -60,11 +63,23 @@ describe('Assignees Realtime', () => {
     });
   });
 
-  it('calls the subscription with correct variable for issue', () => {
+  it('calls the subscription with correct variable for issue', async () => {
     createComponent();
+    await waitForPromises();
 
     expect(subscriptionInitialHandler).toHaveBeenCalledWith({
       issuableId: 'gid://gitlab/Issue/1',
     });
   });
+
+  it('emits an `assigneesUpdated` event on subscription response', async () => {
+    createComponent({
+      subscriptionHandler: jest.fn().mockResolvedValue(subscriptionResponse),
+    });
+    await waitForPromises();
+
+    expect(wrapper.emitted('assigneesUpdated')).toEqual([
+      [{ id: '1', assignees: subscriptionResponse.data.issuableAssigneesUpdated.assignees.nodes }],
+    ]);
+  });
 });
diff --git a/spec/frontend/sidebar/components/incidents/escalation_status_spec.js b/spec/frontend/sidebar/components/incidents/escalation_status_spec.js
index 7a736624fc0..8d8c10d10f1 100644
--- a/spec/frontend/sidebar/components/incidents/escalation_status_spec.js
+++ b/spec/frontend/sidebar/components/incidents/escalation_status_spec.js
@@ -1,4 +1,5 @@
 import { GlDropdown, GlDropdownItem } from '@gitlab/ui';
+import waitForPromises from 'helpers/wait_for_promises';
 import { mountExtended } from 'helpers/vue_test_utils_helper';
 import EscalationStatus from '~/sidebar/components/incidents/escalation_status.vue';
 import {
@@ -25,6 +26,11 @@ describe('EscalationStatus', () => {
 
   const findDropdownComponent = () => wrapper.findComponent(GlDropdown);
   const findDropdownItems = () => wrapper.findAllComponents(GlDropdownItem);
+  const findDropdownMenu = () => findDropdownComponent().find('.dropdown-menu');
+  const toggleDropdown = async () => {
+    await findDropdownComponent().findComponent('button').trigger('click');
+    await waitForPromises();
+  };
 
   describe('status', () => {
     it('shows the current status', () => {
@@ -49,4 +55,32 @@ describe('EscalationStatus', () => {
       expect(wrapper.emitted().input[0][0]).toBe(STATUS_ACKNOWLEDGED);
     });
   });
+
+  describe('close behavior', () => {
+    it('allows the dropdown to be closed by default', async () => {
+      createComponent();
+      // Open dropdown
+      await toggleDropdown();
+
+      expect(findDropdownMenu().classes('show')).toBe(true);
+
+      // Attempt to close dropdown
+      await toggleDropdown();
+
+      expect(findDropdownMenu().classes('show')).toBe(false);
+    });
+
+    it('preventDropdownClose prevents the dropdown from closing', async () => {
+      createComponent({ preventDropdownClose: true });
+      // Open dropdown
+      await toggleDropdown();
+
+      expect(findDropdownMenu().classes('show')).toBe(true);
+
+      // Attempt to close dropdown
+      await toggleDropdown();
+
+      expect(findDropdownMenu().classes('show')).toBe(true);
+    });
+  });
 });
diff --git a/spec/frontend/sidebar/mock_data.js b/spec/frontend/sidebar/mock_data.js
index fbca00636b6..2b421037339 100644
--- a/spec/frontend/sidebar/mock_data.js
+++ b/spec/frontend/sidebar/mock_data.js
@@ -415,6 +415,28 @@ export const subscriptionNullResponse = {
   },
 };
 
+export const subscriptionResponse = {
+  data: {
+    issuableAssigneesUpdated: {
+      id: '1',
+      assignees: {
+        nodes: [
+          {
+            __typename: 'UserCore',
+            id: 'gid://gitlab/User/1',
+            avatarUrl:
+              'https://www.gravatar.com/avatar/e64c7d89f26bd1972efa854d13d7dd61?s=80\u0026d=identicon',
+            name: 'Administrator',
+            username: 'root',
+            webUrl: '/root',
+            status: null,
+          },
+        ],
+      },
+    },
+  },
+};
+
 const mockUser1 = {
   __typename: 'UserCore',
   id: 'gid://gitlab/User/1',
diff --git a/spec/frontend/sidebar/participants_spec.js b/spec/frontend/sidebar/participants_spec.js
index 356628849d9..2517b625225 100644
--- a/spec/frontend/sidebar/participants_spec.js
+++ b/spec/frontend/sidebar/participants_spec.js
@@ -17,8 +17,7 @@ const PARTICIPANT_LIST = [PARTICIPANT, { ...PARTICIPANT, id: 2 }, { ...PARTICIPA
 describe('Participants', () => {
   let wrapper;
 
-  const getMoreParticipantsButton = () => wrapper.find('button');
-
+  const getMoreParticipantsButton = () => wrapper.find('[data-testid="more-participants"]');
   const getCollapsedParticipantsCount = () => wrapper.find('[data-testid="collapsed-count"]');
 
   const mountComponent = (propsData) =>
@@ -167,7 +166,7 @@ describe('Participants', () => {
 
       expect(wrapper.vm.isShowingMoreParticipants).toBe(false);
 
-      getMoreParticipantsButton().trigger('click');
+      getMoreParticipantsButton().vm.$emit('click');
 
       expect(wrapper.vm.isShowingMoreParticipants).toBe(true);
     });