Add latest changes from gitlab-org/gitlab@master

2 files changed, 41 insertions, 107 deletions

diff --git a/spec/frontend/packages_and_registries/package_registry/components/details/__snapshots__/version_row_spec.js.snap b/spec/frontend/packages_and_registries/package_registry/components/details/__snapshots__/version_row_spec.js.snap
deleted file mode 100644
index f00d707417a..00000000000
--- a/spec/frontend/packages_and_registries/package_registry/components/details/__snapshots__/version_row_spec.js.snap
+++ /dev/null
@@ -1,92 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`VersionRow renders 1`] = `
-<div
-  class="gl-display-flex gl-flex-direction-column gl-border-b-solid gl-border-t-solid gl-border-t-1 gl-border-b-1 gl-border-t-transparent gl-border-b-gray-100"
->
-  <div
-    class="gl-display-flex gl-align-items-center gl-py-3"
-  >
-    <!---->
-     
-    <div
-      class="gl-display-flex gl-xs-flex-direction-column gl-justify-content-space-between gl-align-items-stretch gl-flex-grow-1"
-    >
-      <div
-        class="gl-display-flex gl-flex-direction-column gl-xs-mb-3 gl-min-w-0 gl-flex-grow-1"
-      >
-        <div
-          class="gl-display-flex gl-align-items-center gl-text-body gl-font-weight-bold gl-min-h-6 gl-min-w-0"
-        >
-          <div
-            class="gl-display-flex gl-align-items-center gl-mr-3 gl-min-w-0"
-          >
-            <gl-link-stub
-              class="gl-text-body gl-min-w-0"
-              href="243"
-            >
-              <span
-                class="gl-truncate"
-                data-testid="truncate-end-container"
-                title="@gitlab-org/package-15"
-              >
-                <span
-                  class="gl-truncate-end"
-                >
-                  @gitlab-org/package-15
-                </span>
-              </span>
-            </gl-link-stub>
-             
-            <package-tags-stub
-              class="gl-ml-3"
-              hidelabel="true"
-              tagdisplaylimit="1"
-              tags="[object Object],[object Object],[object Object]"
-            />
-          </div>
-           
-          <!---->
-        </div>
-         
-        <div
-          class="gl-display-flex gl-align-items-center gl-text-gray-500 gl-min-h-6 gl-min-w-0 gl-flex-grow-1"
-        >
-          
-    1.0.1
-  
-        </div>
-      </div>
-       
-      <div
-        class="gl-display-flex gl-flex-direction-column gl-sm-align-items-flex-end gl-justify-content-space-between gl-text-gray-500 gl-flex-shrink-0"
-      >
-        <div
-          class="gl-display-flex gl-align-items-center gl-sm-text-body gl-sm-font-weight-bold gl-min-h-6"
-        >
-          <publish-method-stub
-            packageentity="[object Object]"
-          />
-        </div>
-         
-        <div
-          class="gl-display-flex gl-align-items-center gl-min-h-6"
-        >
-          <span>
-            Created 
-            <time-ago-tooltip-stub
-              cssclass=""
-              time="2021-08-10T09:33:54Z"
-              tooltipplacement="top"
-            />
-          </span>
-        </div>
-      </div>
-    </div>
-     
-    <!---->
-  </div>
-   
-  <!---->
-</div>
-`;
diff --git a/spec/frontend/packages_and_registries/package_registry/components/details/version_row_spec.js b/spec/frontend/packages_and_registries/package_registry/components/details/version_row_spec.js
index 31e4c68a3f4..0d74b59ae5b 100644
--- a/spec/frontend/packages_and_registries/package_registry/components/details/version_row_spec.js
+++ b/spec/frontend/packages_and_registries/package_registry/components/details/version_row_spec.js
@@ -1,11 +1,12 @@
-import { GlLink, GlSprintf, GlTruncate } from '@gitlab/ui';
+import { GlIcon, GlLink, GlSprintf, GlTruncate } from '@gitlab/ui';
 import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
 import { getIdFromGraphQLId } from '~/graphql_shared/utils';
 import PackageTags from '~/packages_and_registries/shared/components/package_tags.vue';
 import PublishMethod from '~/packages_and_registries/shared/components/publish_method.vue';
 import VersionRow from '~/packages_and_registries/package_registry/components/details/version_row.vue';
-import ListItem from '~/vue_shared/components/registry/list_item.vue';
 import TimeAgoTooltip from '~/vue_shared/components/time_ago_tooltip.vue';
+import { PACKAGE_ERROR_STATUS } from '~/packages_and_registries/package_registry/constants';
+import { createMockDirective, getBinding } from 'helpers/vue_mock_directive';
 
 import { packageVersions } from '../../mock_data';
 
@@ -14,12 +15,12 @@ const packageVersion = packageVersions()[0];
 describe('VersionRow', () => {
   let wrapper;
 
-  const findListItem = () => wrapper.findComponent(ListItem);
   const findLink = () => wrapper.findComponent(GlLink);
   const findPackageTags = () => wrapper.findComponent(PackageTags);
   const findPublishMethod = () => wrapper.findComponent(PublishMethod);
   const findTimeAgoTooltip = () => wrapper.findComponent(TimeAgoTooltip);
   const findPackageName = () => wrapper.findComponent(GlTruncate);
+  const findWarningIcon = () => wrapper.findComponent(GlIcon);
 
   function createComponent(packageEntity = packageVersion) {
     wrapper = shallowMountExtended(VersionRow, {
@@ -27,10 +28,12 @@ describe('VersionRow', () => {
         packageEntity,
       },
       stubs: {
-        ListItem,
         GlSprintf,
         GlTruncate,
       },
+      directives: {
+        GlTooltip: createMockDirective(),
+      },
     });
   }
 
@@ -38,16 +41,15 @@ describe('VersionRow', () => {
     wrapper.destroy();
   });
 
-  it('renders', () => {
+  it('has a link to the version detail', () => {
     createComponent();
 
-    expect(wrapper.element).toMatchSnapshot();
+    expect(findLink().attributes('href')).toBe(`${getIdFromGraphQLId(packageVersion.id)}`);
   });
 
-  it('has a link to the version detail', () => {
+  it('lists the package name', () => {
     createComponent();
 
-    expect(findLink().attributes('href')).toBe(`${getIdFromGraphQLId(packageVersion.id)}`);
     expect(findLink().text()).toBe(packageVersion.name);
   });
 
@@ -74,27 +76,51 @@ describe('VersionRow', () => {
     expect(findTimeAgoTooltip().props('time')).toBe(packageVersion.createdAt);
   });
 
-  describe('disabled status', () => {
+  describe(`when the package is in ${PACKAGE_ERROR_STATUS} status`, () => {
     beforeEach(() => {
       createComponent({
         ...packageVersion,
-        status: 'something',
+        status: PACKAGE_ERROR_STATUS,
         _links: {
           webPath: null,
         },
       });
     });
 
-    it('disables the list item', () => {
-      expect(findListItem().props('disabled')).toBe(true);
+    it('lists the package name', () => {
+      expect(findPackageName().props('text')).toBe('@gitlab-org/package-15');
     });
 
-    it('lists the package name', () => {
-      expect(findPackageName().props()).toMatchObject({
-        text: '@gitlab-org/package-15',
+    it('does not have a link to navigate to the details page', () => {
+      expect(findLink().exists()).toBe(false);
+    });
+
+    it('has a warning icon', () => {
+      const icon = findWarningIcon();
+      const tooltip = getBinding(icon.element, 'gl-tooltip');
+      expect(icon.props('name')).toBe('warning');
+      expect(icon.props('ariaLabel')).toBe('Warning');
+      expect(tooltip.value).toMatchObject({
+        title: 'Invalid Package: failed metadata extraction',
+      });
+    });
+  });
+
+  describe('disabled status', () => {
+    beforeEach(() => {
+      createComponent({
+        ...packageVersion,
+        status: 'something',
+        _links: {
+          webPath: null,
+        },
       });
     });
 
+    it('lists the package name', () => {
+      expect(findPackageName().props('text')).toBe('@gitlab-org/package-15');
+    });
+
     it('does not have a link to navigate to the details page', () => {
       expect(findLink().exists()).toBe(false);
     });