Add latest changes from gitlab-org/gitlab@master

3 files changed, 69 insertions, 84 deletions

diff --git a/spec/frontend/behaviors/toasts_spec.js b/spec/frontend/behaviors/toasts_spec.js
new file mode 100644
index 00000000000..bad04758ea1
--- /dev/null
+++ b/spec/frontend/behaviors/toasts_spec.js
@@ -0,0 +1,59 @@
+import { initToastMessages } from '~/behaviors/toasts';
+import { setHTMLFixture } from 'helpers/fixtures';
+import showToast from '~/vue_shared/plugins/global_toast';
+
+jest.mock('~/vue_shared/plugins/global_toast');
+
+describe('initToastMessages', () => {
+  describe('when there are no messages', () => {
+    beforeEach(() => {
+      setHTMLFixture('<div></div>');
+
+      initToastMessages();
+    });
+
+    it('does not display any toasts', () => {
+      expect(showToast).not.toHaveBeenCalled();
+    });
+  });
+
+  describe('when there is a message', () => {
+    const expectedMessage = 'toast with jam is great';
+
+    beforeEach(() => {
+      setHTMLFixture(
+        `<div>
+           <div class="js-toast-message" data-message="${expectedMessage}"></div>
+         </div>`,
+      );
+
+      initToastMessages();
+    });
+
+    it('displays the message', () => {
+      expect(showToast).toHaveBeenCalledTimes(1);
+      expect(showToast).toHaveBeenCalledWith(expectedMessage);
+    });
+  });
+
+  describe('when there are multiple messages', () => {
+    beforeEach(() => {
+      setHTMLFixture(
+        `<div>
+            <div class="js-toast-message" data-message="foo"></div>
+            <div class="js-toast-message" data-message="bar"></div>
+            <div class="js-toast-message" data-message="baz"></div>
+         </div>`,
+      );
+
+      initToastMessages();
+    });
+
+    it('displays the messages', () => {
+      expect(showToast).toHaveBeenCalledTimes(3);
+      expect(showToast).toHaveBeenCalledWith('foo');
+      expect(showToast).toHaveBeenCalledWith('bar');
+      expect(showToast).toHaveBeenCalledWith('baz');
+    });
+  });
+});
diff --git a/spec/frontend/packages_and_registries/container_registry/explorer/components/details_page/details_header_spec.js b/spec/frontend/packages_and_registries/container_registry/explorer/components/details_page/details_header_spec.js
index 01089422376..98cd87cb07b 100644
--- a/spec/frontend/packages_and_registries/container_registry/explorer/components/details_page/details_header_spec.js
+++ b/spec/frontend/packages_and_registries/container_registry/explorer/components/details_page/details_header_spec.js
@@ -1,6 +1,6 @@
 import { GlDropdownItem, GlIcon, GlDropdown } from '@gitlab/ui';
 import VueApollo from 'vue-apollo';
-import Vue, { nextTick } from 'vue';
+import Vue from 'vue';
 import { numberToHumanSize } from '~/lib/utils/number_utils';
 import { useFakeDate } from 'helpers/fake_date';
 import createMockApollo from 'helpers/mock_apollo_helper';
@@ -21,7 +21,6 @@ import {
   ROOT_IMAGE_TOOLTIP,
 } from '~/packages_and_registries/container_registry/explorer/constants';
 import getContainerRepositoryMetadata from '~/packages_and_registries/container_registry/explorer/graphql/queries/get_container_repository_metadata.query.graphql';
-import TitleArea from '~/vue_shared/components/registry/title_area.vue';
 import { containerRepositoryMock, imageTagsCountMock } from '../../mock_data';
 
 describe('Details Header', () => {
@@ -44,12 +43,6 @@ describe('Details Header', () => {
   const findMenu = () => wrapper.findComponent(GlDropdown);
   const findSize = () => wrapper.findByTestId('image-size');
 
-  const waitForMetadataItems = async () => {
-    // Metadata items are printed by a loop in the title-area and it takes two ticks for them to be available
-    await nextTick();
-    await nextTick();
-  };
-
   const mountComponent = ({
     propsData = { image: defaultImage },
     resolver = jest.fn().mockResolvedValue(imageTagsCountMock()),
@@ -66,7 +59,6 @@ describe('Details Header', () => {
         GlTooltip: createMockDirective('gl-tooltip'),
       },
       stubs: {
-        TitleArea,
         GlDropdown,
         GlDropdownItem,
       },
@@ -169,11 +161,9 @@ describe('Details Header', () => {
 
   describe('metadata items', () => {
     describe('tags count', () => {
-      it('displays "-- tags" while loading', async () => {
+      it('displays "-- tags" while loading', () => {
         mountComponent();
 
-        await waitForMetadataItems();
-
         expect(findTagsCount().props('text')).toBe('-- tags');
       });
 
@@ -181,7 +171,6 @@ describe('Details Header', () => {
         mountComponent();
 
         await waitForPromises();
-        await waitForMetadataItems();
 
         expect(findTagsCount().props('text')).toBe('13 tags');
       });
@@ -192,23 +181,20 @@ describe('Details Header', () => {
         });
 
         await waitForPromises();
-        await waitForMetadataItems();
 
         expect(findTagsCount().props('text')).toBe('1 tag');
       });
 
-      it('has the correct icon', async () => {
+      it('has the correct icon', () => {
         mountComponent();
-        await waitForMetadataItems();
 
         expect(findTagsCount().props('icon')).toBe('tag');
       });
     });
 
     describe('size metadata item', () => {
-      it('when size is not returned, it hides the item', async () => {
+      it('when size is not returned, it hides the item', () => {
         mountComponent();
-        await waitForMetadataItems();
 
         expect(findSize().exists()).toBe(false);
       });
@@ -220,7 +206,6 @@ describe('Details Header', () => {
         });
 
         await waitForPromises();
-        await waitForMetadataItems();
 
         expect(findSize().props()).toMatchObject({
           icon: 'disk',
@@ -230,18 +215,11 @@ describe('Details Header', () => {
     });
 
     describe('cleanup metadata item', () => {
-      it('has the correct icon', async () => {
-        mountComponent();
-        await waitForMetadataItems();
-
-        expect(findCleanup().props('icon')).toBe('expire');
-      });
-
-      it('when cleanup is not scheduled', async () => {
+      it('when cleanup is not scheduled has the right icon and props', () => {
         mountComponent();
-        await waitForMetadataItems();
 
         expect(findCleanup().props()).toMatchObject({
+          icon: 'expire',
           text: CLEANUP_DISABLED_TEXT,
           textTooltip: CLEANUP_DISABLED_TOOLTIP,
         });
@@ -255,7 +233,7 @@ describe('Details Header', () => {
         ${UNFINISHED_STATUS}  | ${'Cleanup incomplete'}          | ${CLEANUP_UNFINISHED_TOOLTIP}
       `(
         'when the status is $status the text is $text and the tooltip is $tooltip',
-        async ({ status, text, tooltip }) => {
+        ({ status, text, tooltip }) => {
           mountComponent({
             propsData: {
               image: {
@@ -267,7 +245,6 @@ describe('Details Header', () => {
               },
             },
           });
-          await waitForMetadataItems();
 
           expect(findCleanup().props()).toMatchObject({
             text,
@@ -278,25 +255,22 @@ describe('Details Header', () => {
     });
 
     describe('visibility and created at', () => {
-      it('has created text', async () => {
+      it('has created text', () => {
         mountComponent();
-        await waitForMetadataItems();
 
         expect(findCreatedAndVisibility().props('text')).toBe('Created Nov 3, 2020 13:29');
       });
 
       describe('visibility icon', () => {
-        it('shows an eye when the project is public', async () => {
+        it('shows an eye when the project is public', () => {
           mountComponent();
-          await waitForMetadataItems();
 
           expect(findCreatedAndVisibility().props('icon')).toBe('eye');
         });
-        it('shows an eye slashed when the project is not public', async () => {
+        it('shows an eye slashed when the project is not public', () => {
           mountComponent({
             propsData: { image: { ...defaultImage, project: { visibility: 'private' } } },
           });
-          await waitForMetadataItems();
 
           expect(findCreatedAndVisibility().props('icon')).toBe('eye-slash');
         });
diff --git a/spec/frontend/vue_shared/components/registry/title_area_spec.js b/spec/frontend/vue_shared/components/registry/title_area_spec.js
index ec1451de470..d6705bd1e88 100644
--- a/spec/frontend/vue_shared/components/registry/title_area_spec.js
+++ b/spec/frontend/vue_shared/components/registry/title_area_spec.js
@@ -6,16 +6,12 @@ import component from '~/vue_shared/components/registry/title_area.vue';
 describe('title area', () => {
   let wrapper;
 
-  const DYNAMIC_SLOT = 'metadata-dynamic-slot';
-
   const findSubHeaderSlot = () => wrapper.findByTestId('sub-header');
   const findRightActionsSlot = () => wrapper.findByTestId('right-actions');
   const findMetadataSlot = (name) => wrapper.findByTestId(name);
   const findTitle = () => wrapper.findByTestId('title');
   const findAvatar = () => wrapper.findComponent(GlAvatar);
   const findInfoMessages = () => wrapper.findAllByTestId('info-message');
-  const findDynamicSlot = () => wrapper.findByTestId(DYNAMIC_SLOT);
-  const findSlotOrderElements = () => wrapper.findAll('[slot-test]');
   const findSkeletonLoader = () => wrapper.findComponent(GlSkeletonLoader);
 
   const mountComponent = ({ propsData = { title: 'foo' }, slots } = {}) => {
@@ -132,50 +128,6 @@ describe('title area', () => {
     });
   });
 
-  describe('dynamic slots', () => {
-    const createDynamicSlot = () => {
-      return wrapper.vm.$createElement('div', {
-        attrs: {
-          'data-testid': DYNAMIC_SLOT,
-          'slot-test': true,
-        },
-      });
-    };
-
-    it('shows dynamic slots', async () => {
-      mountComponent();
-      // we manually add a new slot to simulate dynamic slots being evaluated after the initial mount
-      wrapper.vm.$slots[DYNAMIC_SLOT] = createDynamicSlot();
-
-      // updating the slots like we do on line 141 does not cause the updated lifecycle-hook to be triggered
-      wrapper.vm.$forceUpdate();
-      await nextTick();
-
-      expect(findDynamicSlot().exists()).toBe(true);
-    });
-
-    it('preserve the order of the slots', async () => {
-      mountComponent({
-        slots: {
-          'metadata-foo': '<div slot-test data-testid="metadata-foo"></div>',
-        },
-      });
-
-      // rewrite slot putting dynamic slot as first
-      wrapper.vm.$slots = {
-        'metadata-dynamic-slot': createDynamicSlot(),
-        'metadata-foo': wrapper.vm.$slots['metadata-foo'],
-      };
-
-      // updating the slots like we do on line 159 does not cause the updated lifecycle-hook to be triggered
-      wrapper.vm.$forceUpdate();
-      await nextTick();
-
-      expect(findSlotOrderElements().at(0).attributes('data-testid')).toBe(DYNAMIC_SLOT);
-      expect(findSlotOrderElements().at(1).attributes('data-testid')).toBe('metadata-foo');
-    });
-  });
-
   describe('info-messages', () => {
     it('shows a message when the props contains one', () => {
       mountComponent({ propsData: { infoMessages: [{ text: 'foo foo bar bar' }] } });