1 files changed, 94 insertions, 15 deletions

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 faeca76d746..67340822fa5 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,13 @@
-import { GlLink, GlSprintf, GlTruncate } from '@gitlab/ui';
+import { GlFormCheckbox, GlIcon, GlLink, GlSprintf, GlTruncate } from '@gitlab/ui';
 import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
 import { getIdFromGraphQLId } from '~/graphql_shared/utils';
+import ListItem from '~/vue_shared/components/registry/list_item.vue';
 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';
 
@@ -19,17 +21,23 @@ describe('VersionRow', () => {
   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);
+  const findBulkDeleteAction = () => wrapper.findComponent(GlFormCheckbox);
 
-  function createComponent(packageEntity = packageVersion) {
+  function createComponent({ packageEntity = packageVersion, selected = false } = {}) {
     wrapper = shallowMountExtended(VersionRow, {
       propsData: {
         packageEntity,
+        selected,
       },
       stubs: {
-        ListItem,
         GlSprintf,
         GlTruncate,
       },
+      directives: {
+        GlTooltip: createMockDirective(),
+      },
     });
   }
 
@@ -37,16 +45,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);
   });
 
@@ -73,17 +80,89 @@ describe('VersionRow', () => {
     expect(findTimeAgoTooltip().props('time')).toBe(packageVersion.createdAt);
   });
 
-  describe('disabled status', () => {
-    it('disables the list item', () => {
-      createComponent({ ...packageVersion, status: 'something' });
+  describe('left action template', () => {
+    it('does not render checkbox if not permitted', () => {
+      createComponent({ packageEntity: { ...packageVersion, canDestroy: false } });
+
+      expect(findBulkDeleteAction().exists()).toBe(false);
+    });
+
+    it('renders checkbox', () => {
+      createComponent();
+
+      expect(findBulkDeleteAction().exists()).toBe(true);
+      expect(findBulkDeleteAction().attributes('checked')).toBeUndefined();
+    });
+
+    it('emits select when checked', () => {
+      createComponent();
+
+      findBulkDeleteAction().vm.$emit('change');
+
+      expect(wrapper.emitted('select')).toHaveLength(1);
+    });
+
+    it('renders checkbox in selected state if selected', () => {
+      createComponent({
+        selected: true,
+      });
+
+      expect(findBulkDeleteAction().attributes('checked')).toBe('true');
+      expect(findListItem().props('selected')).toBe(true);
+    });
+  });
+
+  describe(`when the package is in ${PACKAGE_ERROR_STATUS} status`, () => {
+    beforeEach(() => {
+      createComponent({
+        packageEntity: {
+          ...packageVersion,
+          status: PACKAGE_ERROR_STATUS,
+          _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);
+    });
+
+    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',
+      });
+    });
+  });
 
-      expect(findListItem().props('disabled')).toBe(true);
+  describe('disabled status', () => {
+    beforeEach(() => {
+      createComponent({
+        packageEntity: {
+          ...packageVersion,
+          status: 'something',
+          _links: {
+            webPath: null,
+          },
+        },
+      });
     });
 
-    it('disables the link', () => {
-      createComponent({ ...packageVersion, status: 'something' });
+    it('lists the package name', () => {
+      expect(findPackageName().props('text')).toBe('@gitlab-org/package-15');
+    });
 
-      expect(findLink().attributes('disabled')).toBe('true');
+    it('does not have a link to navigate to the details page', () => {
+      expect(findLink().exists()).toBe(false);
     });
   });
 });