Add latest changes from gitlab-org/gitlab@master

5 files changed, 47 insertions, 60 deletions

diff --git a/spec/frontend/projects/components/shared/delete_modal_spec.js b/spec/frontend/projects/components/shared/delete_modal_spec.js
index c6213fd4b6d..7e040db4beb 100644
--- a/spec/frontend/projects/components/shared/delete_modal_spec.js
+++ b/spec/frontend/projects/components/shared/delete_modal_spec.js
@@ -49,7 +49,7 @@ describe('DeleteModal', () => {
         attributes: {
           variant: 'danger',
           disabled: true,
-          'data-qa-selector': 'confirm_delete_button',
+          'data-testid': 'confirm-delete-button',
         },
       },
       actionCancel: {
diff --git a/spec/frontend/projects/settings_service_desk/components/custom_email_spec.js b/spec/frontend/projects/settings_service_desk/components/custom_email_spec.js
index faef932fc7f..0a593f3812a 100644
--- a/spec/frontend/projects/settings_service_desk/components/custom_email_spec.js
+++ b/spec/frontend/projects/settings_service_desk/components/custom_email_spec.js
@@ -3,7 +3,6 @@ import { mount } from '@vue/test-utils';
 import { nextTick } from 'vue';
 import CustomEmail from '~/projects/settings_service_desk/components/custom_email.vue';
 import {
-  I18N_VERIFICATION_ERRORS,
   I18N_STATE_VERIFICATION_STARTED,
   I18N_STATE_VERIFICATION_FAILED,
   I18N_STATE_VERIFICATION_FAILED_RESET_PARAGRAPH,
@@ -15,6 +14,7 @@ describe('CustomEmail', () => {
   let wrapper;
 
   const defaultProps = {
+    incomingEmail: 'incoming+test-1-issue-@example.com',
     customEmail: 'user@example.com',
     smtpAddress: 'smtp.example.com',
     verificationState: 'started',
@@ -70,19 +70,21 @@ describe('CustomEmail', () => {
   });
 
   describe('verification error', () => {
-    it.each([
-      'smtp_host_issue',
-      'invalid_credentials',
-      'mail_not_received_within_timeframe',
-      'incorrect_from',
-      'incorrect_token',
-      'read_timeout',
-    ])('displays %s label and description', (error) => {
+    it.each`
+      error                                   | label                                                 | description
+      ${'smtp_host_issue'}                    | ${'SMTP host issue'}                                  | ${'A connection to the specified host could not be made or an SSL issue occurred.'}
+      ${'invalid_credentials'}                | ${'Invalid credentials'}                              | ${'The given credentials (username and password) were rejected by the SMTP server, or you need to explicitly set an authentication method.'}
+      ${'mail_not_received_within_timeframe'} | ${'Verification email not received within timeframe'} | ${"The verification email wasn't received in time. There is a 30 minutes timeframe for verification emails to appear in your instance's Service Desk. Make sure that you have set up email forwarding correctly."}
+      ${'incorrect_from'}                     | ${'Incorrect From header'}                            | ${'Check your forwarding settings and make sure the original email sender remains in the From header.'}
+      ${'incorrect_token'}                    | ${'Incorrect verification token'}                     | ${"The received email didn't contain the verification token that was sent to your email address."}
+      ${'read_timeout'}                       | ${'Read timeout'}                                     | ${'The SMTP server did not respond in time.'}
+      ${'incorrect_forwarding_target'}        | ${'Incorrect forwarding target'}                      | ${`Forward all emails to the custom email address to ${defaultProps.incomingEmail}`}
+    `('displays $error label and description', ({ error, label, description }) => {
       createWrapper({ verificationError: error });
       const text = wrapper.text();
 
-      expect(text).toContain(I18N_VERIFICATION_ERRORS[error].label);
-      expect(text).toContain(I18N_VERIFICATION_ERRORS[error].description);
+      expect(text).toContain(label);
+      expect(text).toContain(description);
     });
   });
 
diff --git a/spec/frontend/projects/settings_service_desk/components/custom_email_wrapper_spec.js b/spec/frontend/projects/settings_service_desk/components/custom_email_wrapper_spec.js
index 174e05ceeee..8d3a7a5fde5 100644
--- a/spec/frontend/projects/settings_service_desk/components/custom_email_wrapper_spec.js
+++ b/spec/frontend/projects/settings_service_desk/components/custom_email_wrapper_spec.js
@@ -38,6 +38,12 @@ describe('CustomEmailWrapper', () => {
     customEmailEndpoint: '/flightjs/Flight/-/service_desk/custom_email',
   };
 
+  const defaultCustomEmailProps = {
+    incomingEmail: defaultProps.incomingEmail,
+    customEmail: 'user@example.com',
+    smtpAddress: 'smtp.example.com',
+  };
+
   const showToast = jest.fn();
 
   const createWrapper = (props = {}) => {
@@ -117,8 +123,7 @@ describe('CustomEmailWrapper', () => {
         expect(showToast).toHaveBeenCalledWith(I18N_TOAST_SAVED);
 
         expect(findCustomEmail().props()).toEqual({
-          customEmail: 'user@example.com',
-          smtpAddress: 'smtp.example.com',
+          ...defaultCustomEmailProps,
           verificationState: 'started',
           verificationError: null,
           isEnabled: false,
@@ -140,8 +145,7 @@ describe('CustomEmailWrapper', () => {
 
     it('displays CustomEmail component', () => {
       expect(findCustomEmail().props()).toEqual({
-        customEmail: 'user@example.com',
-        smtpAddress: 'smtp.example.com',
+        ...defaultCustomEmailProps,
         verificationState: 'started',
         verificationError: null,
         isEnabled: false,
@@ -193,8 +197,7 @@ describe('CustomEmailWrapper', () => {
 
     it('fetches data from endpoint and displays CustomEmail component', () => {
       expect(findCustomEmail().props()).toEqual({
-        customEmail: 'user@example.com',
-        smtpAddress: 'smtp.example.com',
+        ...defaultCustomEmailProps,
         verificationState: 'failed',
         verificationError: 'smtp_host_issue',
         isEnabled: false,
@@ -225,8 +228,7 @@ describe('CustomEmailWrapper', () => {
 
     it('fetches data from endpoint and displays CustomEmail component', () => {
       expect(findCustomEmail().props()).toEqual({
-        customEmail: 'user@example.com',
-        smtpAddress: 'smtp.example.com',
+        ...defaultCustomEmailProps,
         verificationState: 'finished',
         verificationError: null,
         isEnabled: false,
@@ -257,8 +259,7 @@ describe('CustomEmailWrapper', () => {
       expect(showToast).toHaveBeenCalledWith(I18N_TOAST_ENABLED);
 
       expect(findCustomEmail().props()).toEqual({
-        customEmail: 'user@example.com',
-        smtpAddress: 'smtp.example.com',
+        ...defaultCustomEmailProps,
         verificationState: 'finished',
         verificationError: null,
         isEnabled: true,
@@ -279,8 +280,7 @@ describe('CustomEmailWrapper', () => {
 
     it('fetches data from endpoint and displays CustomEmail component', () => {
       expect(findCustomEmail().props()).toEqual({
-        customEmail: 'user@example.com',
-        smtpAddress: 'smtp.example.com',
+        ...defaultCustomEmailProps,
         verificationState: 'finished',
         verificationError: null,
         isEnabled: true,
@@ -301,8 +301,7 @@ describe('CustomEmailWrapper', () => {
       expect(showToast).toHaveBeenCalledWith(I18N_TOAST_DISABLED);
 
       expect(findCustomEmail().props()).toEqual({
-        customEmail: 'user@example.com',
-        smtpAddress: 'smtp.example.com',
+        ...defaultCustomEmailProps,
         verificationState: 'finished',
         verificationError: null,
         isEnabled: false,
diff --git a/spec/frontend/vue_shared/components/entity_select/entity_select_spec.js b/spec/frontend/vue_shared/components/entity_select/entity_select_spec.js
index 1376133ec37..02da6079466 100644
--- a/spec/frontend/vue_shared/components/entity_select/entity_select_spec.js
+++ b/spec/frontend/vue_shared/components/entity_select/entity_select_spec.js
@@ -8,7 +8,7 @@ import waitForPromises from 'helpers/wait_for_promises';
 describe('EntitySelect', () => {
   let wrapper;
   let fetchItemsMock;
-  let fetchInitialSelectionTextMock;
+  let fetchInitialSelectionMock;
 
   // Mocks
   const itemMock = {
@@ -96,16 +96,16 @@ describe('EntitySelect', () => {
     });
 
     it("fetches the initially selected value's name", async () => {
-      fetchInitialSelectionTextMock = jest.fn().mockImplementation(() => itemMock.text);
+      fetchInitialSelectionMock = jest.fn().mockImplementation(() => itemMock);
       createComponent({
         props: {
-          fetchInitialSelectionText: fetchInitialSelectionTextMock,
+          fetchInitialSelection: fetchInitialSelectionMock,
           initialSelection: itemMock.value,
         },
       });
       await nextTick();
 
-      expect(fetchInitialSelectionTextMock).toHaveBeenCalledTimes(1);
+      expect(fetchInitialSelectionMock).toHaveBeenCalledTimes(1);
       expect(findListbox().props('toggleText')).toBe(itemMock.text);
     });
   });
@@ -188,7 +188,7 @@ describe('EntitySelect', () => {
         findListbox().vm.$emit('reset');
         await nextTick();
 
-        expect(Object.keys(wrapper.emitted('input')[2][0]).length).toBe(0);
+        expect(wrapper.emitted('input')[2][0]).toEqual({});
       });
     });
   });
diff --git a/spec/frontend/vue_shared/components/entity_select/organization_select_spec.js b/spec/frontend/vue_shared/components/entity_select/organization_select_spec.js
index 02a85edc523..6dc38bbd0c6 100644
--- a/spec/frontend/vue_shared/components/entity_select/organization_select_spec.js
+++ b/spec/frontend/vue_shared/components/entity_select/organization_select_spec.js
@@ -1,8 +1,8 @@
 import VueApollo from 'vue-apollo';
-import Vue, { nextTick } from 'vue';
-import { GlCollapsibleListbox } from '@gitlab/ui';
+import Vue from 'vue';
+import { GlCollapsibleListbox, GlAlert } from '@gitlab/ui';
 import { chunk } from 'lodash';
-import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
+import { mountExtended } from 'helpers/vue_test_utils_helper';
 import OrganizationSelect from '~/vue_shared/components/entity_select/organization_select.vue';
 import EntitySelect from '~/vue_shared/components/entity_select/entity_select.vue';
 import { DEFAULT_PER_PAGE } from '~/api';
@@ -17,6 +17,7 @@ import getOrganizationQuery from '~/organizations/shared/graphql/queries/organiz
 import { organizations as nodes, pageInfo, pageInfoEmpty } from '~/organizations/mock_data';
 import waitForPromises from 'helpers/wait_for_promises';
 import createMockApollo from 'helpers/mock_apollo_helper';
+import { getIdFromGraphQLId } from '~/graphql_shared/utils';
 
 Vue.use(VueApollo);
 
@@ -31,11 +32,6 @@ describe('OrganizationSelect', () => {
     pageInfo,
   };
 
-  // Stubs
-  const GlAlert = {
-    template: '<div><slot /></div>',
-  };
-
   // Props
   const label = 'label';
   const description = 'description';
@@ -67,7 +63,7 @@ describe('OrganizationSelect', () => {
   } = {}) => {
     mockApollo = createMockApollo(handlers);
 
-    wrapper = shallowMountExtended(OrganizationSelect, {
+    wrapper = mountExtended(OrganizationSelect, {
       apolloProvider: mockApollo,
       propsData: {
         label,
@@ -77,10 +73,6 @@ describe('OrganizationSelect', () => {
         toggleClass,
         ...props,
       },
-      stubs: {
-        GlAlert,
-        EntitySelect,
-      },
       listeners: {
         input: handleInput,
       },
@@ -88,10 +80,6 @@ describe('OrganizationSelect', () => {
   };
   const openListbox = () => findListbox().vm.$emit('shown');
 
-  afterEach(() => {
-    mockApollo = null;
-  });
-
   describe('entity_select props', () => {
     beforeEach(() => {
       createComponent();
@@ -114,15 +102,16 @@ describe('OrganizationSelect', () => {
   describe('on mount', () => {
     it('fetches organizations when the listbox is opened', async () => {
       createComponent();
-      await waitForPromises();
-
       openListbox();
       await waitForPromises();
-      expect(findListbox().props('items')).toEqual([
-        { text: nodes[0].name, value: 1 },
-        { text: nodes[1].name, value: 2 },
-        { text: nodes[2].name, value: 3 },
-      ]);
+
+      const expectedItems = nodes.map((node) => ({
+        ...node,
+        text: node.name,
+        value: getIdFromGraphQLId(node.id),
+      }));
+
+      expect(findListbox().props('items')).toEqual(expectedItems);
     });
 
     describe('with an initial selection', () => {
@@ -136,7 +125,7 @@ describe('OrganizationSelect', () => {
       it('show an error if fetching initially selected fails', async () => {
         createComponent({
           props: { initialSelection: organization.id },
-          handlers: [[getOrganizationQuery, jest.fn().mockRejectedValueOnce(new Error())]],
+          handlers: [[getOrganizationQuery, jest.fn().mockRejectedValueOnce()]],
         });
 
         expect(findAlert().exists()).toBe(false);
@@ -183,7 +172,6 @@ describe('OrganizationSelect', () => {
       await waitForPromises();
 
       findListbox().vm.$emit('bottom-reached');
-      await nextTick();
       await waitForPromises();
     });
 
@@ -198,10 +186,8 @@ describe('OrganizationSelect', () => {
 
   it('shows an error when fetching organizations fails', async () => {
     createComponent({
-      handlers: [[getCurrentUserOrganizationsQuery, jest.fn().mockRejectedValueOnce(new Error())]],
+      handlers: [[getCurrentUserOrganizationsQuery, jest.fn().mockRejectedValueOnce()]],
     });
-    await waitForPromises();
-
     openListbox();
     expect(findAlert().exists()).toBe(false);