Add latest changes from gitlab-org/gitlab@master

1 files changed, 42 insertions, 23 deletions

diff --git a/spec/frontend/notifications/components/notifications_dropdown_spec.js b/spec/frontend/notifications/components/notifications_dropdown_spec.js
index e74729b9d35..2fe8e9c677e 100644
--- a/spec/frontend/notifications/components/notifications_dropdown_spec.js
+++ b/spec/frontend/notifications/components/notifications_dropdown_spec.js
@@ -1,7 +1,7 @@
 import axios from 'axios';
 import MockAdapter from 'axios-mock-adapter';
 import { shallowMount } from '@vue/test-utils';
-import { GlButtonGroup, GlDropdown, GlDropdownItem } from '@gitlab/ui';
+import { GlButtonGroup, GlButton, GlDropdown, GlDropdownItem } from '@gitlab/ui';
 import { createMockDirective, getBinding } from 'helpers/vue_mock_directive';
 import waitForPromises from 'helpers/wait_for_promises';
 import httpStatus from '~/lib/utils/http_status';
@@ -27,6 +27,8 @@ describe('NotificationsDropdown', () => {
         GlTooltip: createMockDirective(),
       },
       provide: {
+        dropdownItems: mockDropdownItems,
+        initialNotificationLevel: 'global',
         ...injectedProperties,
       },
       mocks: {
@@ -38,6 +40,7 @@ describe('NotificationsDropdown', () => {
   }
 
   const findButtonGroup = () => wrapper.find(GlButtonGroup);
+  const findButton = () => wrapper.find(GlButton);
   const findDropdown = () => wrapper.find(GlDropdown);
   const findByTestId = (testId) => wrapper.find(`[data-testid="${testId}"]`);
   const findAllNotificationsDropdownItems = () => wrapper.findAll(NotificationsDropdownItem);
@@ -66,7 +69,6 @@ describe('NotificationsDropdown', () => {
     describe('when notification level is "custom"', () => {
       beforeEach(() => {
         wrapper = createComponent({
-          dropdownItems: mockDropdownItems,
           initialNotificationLevel: 'custom',
         });
       });
@@ -74,12 +76,29 @@ describe('NotificationsDropdown', () => {
       it('renders a button group', () => {
         expect(findButtonGroup().exists()).toBe(true);
       });
+
+      it('shows the button text when showLabel is true', () => {
+        wrapper = createComponent({
+          initialNotificationLevel: 'custom',
+          showLabel: true,
+        });
+
+        expect(findButton().text()).toBe('Custom');
+      });
+
+      it("doesn't show the button text when showLabel is false", () => {
+        wrapper = createComponent({
+          initialNotificationLevel: 'custom',
+          showLabel: false,
+        });
+
+        expect(findButton().text()).toBe('');
+      });
     });
 
     describe('when notification level is not "custom"', () => {
       beforeEach(() => {
         wrapper = createComponent({
-          dropdownItems: mockDropdownItems,
           initialNotificationLevel: 'global',
         });
       });
@@ -87,6 +106,22 @@ describe('NotificationsDropdown', () => {
       it('does not render a button group', () => {
         expect(findButtonGroup().exists()).toBe(false);
       });
+
+      it('shows the button text when showLabel is true', () => {
+        wrapper = createComponent({
+          showLabel: true,
+        });
+
+        expect(findDropdown().props('text')).toBe('Global');
+      });
+
+      it("doesn't show the button text when showLabel is false", () => {
+        wrapper = createComponent({
+          showLabel: false,
+        });
+
+        expect(findDropdown().props('text')).toBe(null);
+      });
     });
 
     describe('button tooltip', () => {
@@ -101,7 +136,6 @@ describe('NotificationsDropdown', () => {
         ${'custom'}        | ${'Custom'}
       `(`renders "${tooltipTitlePrefix} - $title" for "$level" level`, ({ level, title }) => {
         wrapper = createComponent({
-          dropdownItems: mockDropdownItems,
           initialNotificationLevel: level,
         });
 
@@ -115,7 +149,6 @@ describe('NotificationsDropdown', () => {
     describe('button icon', () => {
       beforeEach(() => {
         wrapper = createComponent({
-          dropdownItems: mockDropdownItems,
           initialNotificationLevel: 'disabled',
         });
       });
@@ -125,10 +158,7 @@ describe('NotificationsDropdown', () => {
       });
 
       it('renders the "notifications" icon when notification level is not "disabled"', () => {
-        wrapper = createComponent({
-          dropdownItems: mockDropdownItems,
-          initialNotificationLevel: 'global',
-        });
+        wrapper = createComponent();
 
         expect(findDropdown().props('icon')).toBe('notifications');
       });
@@ -144,10 +174,7 @@ describe('NotificationsDropdown', () => {
         ${4}          | ${'disabled'}      | ${'Disabled'}    | ${'You will not get any notifications via email'}
         ${5}          | ${'custom'}        | ${'Custom'}      | ${'You will only receive notifications for the events you choose'}
       `('displays "$title" and "$description"', ({ dropdownIndex, title, description }) => {
-        wrapper = createComponent({
-          dropdownItems: mockDropdownItems,
-          initialNotificationLevel: 'global',
-        });
+        wrapper = createComponent();
 
         expect(findAllNotificationsDropdownItems().at(dropdownIndex).props('title')).toBe(title);
         expect(findAllNotificationsDropdownItems().at(dropdownIndex).props('description')).toBe(
@@ -171,8 +198,6 @@ describe('NotificationsDropdown', () => {
       'calls the $endpointType endpoint when $condition',
       async ({ projectId, groupId, endpointUrl }) => {
         wrapper = createComponent({
-          dropdownItems: mockDropdownItems,
-          initialNotificationLevel: 'global',
           projectId,
           groupId,
         });
@@ -187,10 +212,7 @@ describe('NotificationsDropdown', () => {
 
     it('updates the selectedNotificationLevel and marks the item with a checkmark', async () => {
       mockAxios.onPut('/api/v4/notification_settings').reply(httpStatus.OK, {});
-      wrapper = createComponent({
-        dropdownItems: mockDropdownItems,
-        initialNotificationLevel: 'global',
-      });
+      wrapper = createComponent();
 
       const dropdownItem = findDropdownItemAt(1);
 
@@ -202,10 +224,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, {});
-      wrapper = createComponent({
-        dropdownItems: mockDropdownItems,
-        initialNotificationLevel: 'global',
-      });
+      wrapper = createComponent();
 
       await clickDropdownItemAt(1);