Add latest changes from gitlab-org/gitlab@15-8-stable-eev15.8.0-rc42

3 files changed, 93 insertions, 12 deletions

diff --git a/spec/frontend/notifications/components/custom_notifications_modal_spec.js b/spec/frontend/notifications/components/custom_notifications_modal_spec.js
index cd04adac72d..70749557e61 100644
--- a/spec/frontend/notifications/components/custom_notifications_modal_spec.js
+++ b/spec/frontend/notifications/components/custom_notifications_modal_spec.js
@@ -5,7 +5,7 @@ import MockAdapter from 'axios-mock-adapter';
 import { nextTick } from 'vue';
 import { extendedWrapper } from 'helpers/vue_test_utils_helper';
 import waitForPromises from 'helpers/wait_for_promises';
-import httpStatus from '~/lib/utils/http_status';
+import { HTTP_STATUS_NOT_FOUND, HTTP_STATUS_OK } from '~/lib/utils/http_status';
 import CustomNotificationsModal from '~/notifications/components/custom_notifications_modal.vue';
 import { i18n } from '~/notifications/constants';
 
@@ -138,7 +138,7 @@ describe('CustomNotificationsModal', () => {
 
           mockAxios
             .onGet(endpointUrl)
-            .reply(httpStatus.OK, mockNotificationSettingsResponses.default);
+            .reply(HTTP_STATUS_OK, mockNotificationSettingsResponses.default);
 
           wrapper = createComponent({ injectedProperties });
 
@@ -155,7 +155,7 @@ describe('CustomNotificationsModal', () => {
 
         mockAxios
           .onGet(endpointUrl)
-          .reply(httpStatus.OK, mockNotificationSettingsResponses.default);
+          .reply(HTTP_STATUS_OK, mockNotificationSettingsResponses.default);
 
         wrapper = createComponent();
 
@@ -173,7 +173,7 @@ describe('CustomNotificationsModal', () => {
       });
 
       it('shows a toast message when the request fails', async () => {
-        mockAxios.onGet('/api/v4/notification_settings').reply(httpStatus.NOT_FOUND, {});
+        mockAxios.onGet('/api/v4/notification_settings').reply(HTTP_STATUS_NOT_FOUND, {});
         wrapper = createComponent();
 
         wrapper.findComponent(GlModal).vm.$emit('show');
@@ -201,11 +201,11 @@ describe('CustomNotificationsModal', () => {
         async ({ projectId, groupId, endpointUrl }) => {
           mockAxios
             .onGet(endpointUrl)
-            .reply(httpStatus.OK, mockNotificationSettingsResponses.default);
+            .reply(HTTP_STATUS_OK, mockNotificationSettingsResponses.default);
 
           mockAxios
             .onPut(endpointUrl)
-            .reply(httpStatus.OK, mockNotificationSettingsResponses.updated);
+            .reply(HTTP_STATUS_OK, mockNotificationSettingsResponses.updated);
 
           const injectedProperties = {
             projectId,
@@ -241,7 +241,7 @@ describe('CustomNotificationsModal', () => {
       );
 
       it('shows a toast message when the request fails', async () => {
-        mockAxios.onPut('/api/v4/notification_settings').reply(httpStatus.NOT_FOUND, {});
+        mockAxios.onPut('/api/v4/notification_settings').reply(HTTP_STATUS_NOT_FOUND, {});
         wrapper = createComponent();
 
         // setData usage is discouraged. See https://gitlab.com/groups/gitlab-org/-/epics/7330 for details
diff --git a/spec/frontend/notifications/components/notification_email_listbox_input_spec.js b/spec/frontend/notifications/components/notification_email_listbox_input_spec.js
new file mode 100644
index 00000000000..c490c737cf1
--- /dev/null
+++ b/spec/frontend/notifications/components/notification_email_listbox_input_spec.js
@@ -0,0 +1,81 @@
+import { shallowMount } from '@vue/test-utils';
+import { nextTick } from 'vue';
+import ListboxInput from '~/vue_shared/components/listbox_input/listbox_input.vue';
+import NotificationEmailListboxInput from '~/notifications/components/notification_email_listbox_input.vue';
+
+describe('NotificationEmailListboxInput', () => {
+  let wrapper;
+
+  // Props
+  const label = 'label';
+  const name = 'name';
+  const emails = ['test@gitlab.com'];
+  const emptyValueText = 'emptyValueText';
+  const value = 'value';
+  const disabled = false;
+
+  // Finders
+  const findListboxInput = () => wrapper.findComponent(ListboxInput);
+
+  const createComponent = (attachTo) => {
+    wrapper = shallowMount(NotificationEmailListboxInput, {
+      provide: {
+        label,
+        name,
+        emails,
+        emptyValueText,
+        value,
+        disabled,
+      },
+      attachTo,
+    });
+  };
+
+  describe('props', () => {
+    beforeEach(() => {
+      createComponent();
+    });
+
+    it.each`
+      propName      | propValue
+      ${'label'}    | ${label}
+      ${'name'}     | ${name}
+      ${'selected'} | ${value}
+      ${'disabled'} | ${disabled}
+    `('passes the $propName prop to ListboxInput', ({ propName, propValue }) => {
+      expect(findListboxInput().props(propName)).toBe(propValue);
+    });
+
+    it('passes the options to ListboxInput', () => {
+      expect(findListboxInput().props('items')).toStrictEqual([
+        { text: emptyValueText, value: '' },
+        { text: emails[0], value: emails[0] },
+      ]);
+    });
+  });
+
+  describe('form', () => {
+    let form;
+
+    beforeEach(() => {
+      form = document.createElement('form');
+      const root = document.createElement('div');
+      form.appendChild(root);
+      createComponent(root);
+    });
+
+    afterEach(() => {
+      form = null;
+    });
+
+    it('submits the parent form when the value changes', async () => {
+      jest.spyOn(form, 'submit');
+      expect(form.submit).not.toHaveBeenCalled();
+
+      findListboxInput().vm.$emit('select');
+      await nextTick();
+
+      expect(form.submit).toHaveBeenCalled();
+    });
+  });
+});
diff --git a/spec/frontend/notifications/components/notifications_dropdown_spec.js b/spec/frontend/notifications/components/notifications_dropdown_spec.js
index 7a98b374095..0f13de0e6d8 100644
--- a/spec/frontend/notifications/components/notifications_dropdown_spec.js
+++ b/spec/frontend/notifications/components/notifications_dropdown_spec.js
@@ -4,7 +4,7 @@ import axios from 'axios';
 import MockAdapter from 'axios-mock-adapter';
 import { createMockDirective, getBinding } from 'helpers/vue_mock_directive';
 import waitForPromises from 'helpers/wait_for_promises';
-import httpStatus from '~/lib/utils/http_status';
+import { HTTP_STATUS_NOT_FOUND, HTTP_STATUS_OK } from '~/lib/utils/http_status';
 import CustomNotificationsModal from '~/notifications/components/custom_notifications_modal.vue';
 import NotificationsDropdown from '~/notifications/components/notifications_dropdown.vue';
 import NotificationsDropdownItem from '~/notifications/components/notifications_dropdown_item.vue';
@@ -98,7 +98,7 @@ describe('NotificationsDropdown', () => {
 
       it('opens the modal when the user clicks the button', async () => {
         jest.spyOn(axios, 'put');
-        mockAxios.onPut('/api/v4/notification_settings').reply(httpStatus.OK, {});
+        mockAxios.onPut('/api/v4/notification_settings').reply(HTTP_STATUS_OK, {});
 
         wrapper = createComponent({
           initialNotificationLevel: 'custom',
@@ -233,7 +233,7 @@ describe('NotificationsDropdown', () => {
     );
 
     it('updates the selectedNotificationLevel and marks the item with a checkmark', async () => {
-      mockAxios.onPut('/api/v4/notification_settings').reply(httpStatus.OK, {});
+      mockAxios.onPut('/api/v4/notification_settings').reply(HTTP_STATUS_OK, {});
       wrapper = createComponent();
 
       const dropdownItem = findDropdownItemAt(1);
@@ -245,7 +245,7 @@ describe('NotificationsDropdown', () => {
     });
 
     it("won't update the selectedNotificationLevel and shows a toast message when the request fails and", async () => {
-      mockAxios.onPut('/api/v4/notification_settings').reply(httpStatus.NOT_FOUND, {});
+      mockAxios.onPut('/api/v4/notification_settings').reply(HTTP_STATUS_NOT_FOUND, {});
       wrapper = createComponent();
 
       await clickDropdownItemAt(1);
@@ -257,7 +257,7 @@ describe('NotificationsDropdown', () => {
     });
 
     it('opens the modal when the user clicks on the "Custom" dropdown item', async () => {
-      mockAxios.onPut('/api/v4/notification_settings').reply(httpStatus.OK, {});
+      mockAxios.onPut('/api/v4/notification_settings').reply(HTTP_STATUS_OK, {});
       wrapper = createComponent();
 
       await clickDropdownItemAt(5);