Add latest changes from gitlab-org/gitlab@13-8-stable-eev13.8.0-rc42

4 files changed, 36 insertions, 14 deletions

diff --git a/spec/frontend/registry/explorer/components/list_page/__snapshots__/project_empty_state_spec.js.snap b/spec/frontend/registry/explorer/components/list_page/__snapshots__/project_empty_state_spec.js.snap
index bab6b25cc15..46b07b4c2d6 100644
--- a/spec/frontend/registry/explorer/components/list_page/__snapshots__/project_empty_state_spec.js.snap
+++ b/spec/frontend/registry/explorer/components/list_page/__snapshots__/project_empty_state_spec.js.snap
@@ -56,7 +56,7 @@ exports[`Registry Project Empty state to match the default snapshot 1`] = `
   </p>
    
   <gl-form-input-group-stub
-    class="gl-mb-4 "
+    class="gl-mb-4"
     predefinedoptions="[object Object]"
     value=""
   >
diff --git a/spec/frontend/registry/explorer/components/list_page/image_list_row_spec.js b/spec/frontend/registry/explorer/components/list_page/image_list_row_spec.js
index b9839d92f1d..a06c4795b2e 100644
--- a/spec/frontend/registry/explorer/components/list_page/image_list_row_spec.js
+++ b/spec/frontend/registry/explorer/components/list_page/image_list_row_spec.js
@@ -1,5 +1,5 @@
 import { shallowMount } from '@vue/test-utils';
-import { GlIcon, GlSprintf } from '@gitlab/ui';
+import { GlIcon, GlSprintf, GlSkeletonLoader } from '@gitlab/ui';
 import { createMockDirective, getBinding } from 'helpers/vue_mock_directive';
 import { getIdFromGraphQLId } from '~/graphql_shared/utils';
 import ClipboardButton from '~/vue_shared/components/clipboard_button.vue';
@@ -23,12 +23,13 @@ describe('Image List Row', () => {
   const [item] = imagesListResponse;
 
   const findDetailsLink = () => wrapper.find('[data-testid="details-link"]');
-  const findTagsCount = () => wrapper.find('[data-testid="tagsCount"]');
+  const findTagsCount = () => wrapper.find('[data-testid="tags-count"]');
   const findDeleteBtn = () => wrapper.find(DeleteButton);
   const findClipboardButton = () => wrapper.find(ClipboardButton);
   const findWarningIcon = () => wrapper.find('[data-testid="warning-icon"]');
+  const findSkeletonLoader = () => wrapper.find(GlSkeletonLoader);
 
-  const mountComponent = props => {
+  const mountComponent = (props) => {
     wrapper = shallowMount(Component, {
       stubs: {
         RouterLink,
@@ -164,6 +165,20 @@ describe('Image List Row', () => {
       expect(icon.props('name')).toBe('tag');
     });
 
+    describe('loading state', () => {
+      it('shows a loader when metadataLoading is true', () => {
+        mountComponent({ metadataLoading: true });
+
+        expect(findSkeletonLoader().exists()).toBe(true);
+      });
+
+      it('hides the tags count while loading', () => {
+        mountComponent({ metadataLoading: true });
+
+        expect(findTagsCount().exists()).toBe(false);
+      });
+    });
+
     describe('tags count text', () => {
       it('with one tag in the image', () => {
         mountComponent({ item: { ...item, tagsCount: 1 } });
diff --git a/spec/frontend/registry/explorer/components/list_page/image_list_spec.js b/spec/frontend/registry/explorer/components/list_page/image_list_spec.js
index 54befc9973a..61c362f4d78 100644
--- a/spec/frontend/registry/explorer/components/list_page/image_list_spec.js
+++ b/spec/frontend/registry/explorer/components/list_page/image_list_spec.js
@@ -11,11 +11,12 @@ describe('Image List', () => {
   const findRow = () => wrapper.findAll(ImageListRow);
   const findPagination = () => wrapper.find(GlKeysetPagination);
 
-  const mountComponent = (pageInfo = defaultPageInfo) => {
+  const mountComponent = (props) => {
     wrapper = shallowMount(Component, {
       propsData: {
         images: imagesListResponse,
-        pageInfo,
+        pageInfo: defaultPageInfo,
+        ...props,
       },
     });
   };
@@ -35,11 +36,14 @@ describe('Image List', () => {
     it('when delete event is emitted on the row it emits up a delete event', () => {
       mountComponent();
 
-      findRow()
-        .at(0)
-        .vm.$emit('delete', 'foo');
+      findRow().at(0).vm.$emit('delete', 'foo');
       expect(wrapper.emitted('delete')).toEqual([['foo']]);
     });
+
+    it('passes down the metadataLoading prop', () => {
+      mountComponent({ metadataLoading: true });
+      expect(findRow().at(0).props('metadataLoading')).toBe(true);
+    });
   });
 
   describe('pagination', () => {
@@ -57,7 +61,7 @@ describe('Image List', () => {
     `(
       'when hasNextPage is $hasNextPage and hasPreviousPage is $hasPreviousPage: is $isVisible that the component is visible',
       ({ hasNextPage, hasPreviousPage, isVisible }) => {
-        mountComponent({ hasNextPage, hasPreviousPage });
+        mountComponent({ pageInfo: { ...defaultPageInfo, hasNextPage, hasPreviousPage } });
 
         expect(findPagination().exists()).toBe(isVisible);
         expect(findPagination().props('hasPreviousPage')).toBe(hasPreviousPage);
@@ -66,7 +70,7 @@ describe('Image List', () => {
     );
 
     it('emits "prev-page" when the user clicks the back page button', () => {
-      mountComponent({ hasPreviousPage: true });
+      mountComponent();
 
       findPagination().vm.$emit('prev');
 
@@ -74,7 +78,7 @@ describe('Image List', () => {
     });
 
     it('emits "next-page" when the user clicks the forward page button', () => {
-      mountComponent({ hasNextPage: true });
+      mountComponent();
 
       findPagination().vm.$emit('next');
 
diff --git a/spec/frontend/registry/explorer/components/list_page/registry_header_spec.js b/spec/frontend/registry/explorer/components/list_page/registry_header_spec.js
index 3c997093d46..58439c185e3 100644
--- a/spec/frontend/registry/explorer/components/list_page/registry_header_spec.js
+++ b/spec/frontend/registry/explorer/components/list_page/registry_header_spec.js
@@ -41,9 +41,12 @@ describe('registry_header', () => {
 
   describe('header', () => {
     it('has a title', () => {
-      mountComponent();
+      mountComponent({ metadataLoading: true });
 
-      expect(findTitleArea().props('title')).toBe(CONTAINER_REGISTRY_TITLE);
+      expect(findTitleArea().props()).toMatchObject({
+        title: CONTAINER_REGISTRY_TITLE,
+        metadataLoading: true,
+      });
     });
 
     it('has a commands slot', () => {