Add latest changes from gitlab-org/gitlab@master

2 files changed, 92 insertions, 34 deletions

diff --git a/spec/frontend/registry/explorer/components/details_page/tags_list_row_spec.js b/spec/frontend/registry/explorer/components/details_page/tags_list_row_spec.js
index 8b70f84c1bd..dc9063bde2c 100644
--- a/spec/frontend/registry/explorer/components/details_page/tags_list_row_spec.js
+++ b/spec/frontend/registry/explorer/components/details_page/tags_list_row_spec.js
@@ -1,5 +1,6 @@
 import { GlFormCheckbox, GlSprintf, GlIcon } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
+import { nextTick } from 'vue';
 
 import { createMockDirective, getBinding } from 'helpers/vue_mock_directive';
 import DeleteButton from '~/registry/explorer/components/delete_button.vue';
@@ -72,8 +73,15 @@ describe('tags list row', () => {
       expect(findCheckbox().exists()).toBe(false);
     });
 
-    it('is disabled when the digest is missing', () => {
-      mountComponent({ tag: { ...tag, digest: null } });
+    it.each`
+      digest   | disabled
+      ${'foo'} | ${true}
+      ${null}  | ${false}
+      ${null}  | ${true}
+      ${'foo'} | ${true}
+    `('is disabled when the digest $digest and disabled is $disabled', ({ digest, disabled }) => {
+      mountComponent({ tag: { ...tag, digest }, disabled });
+
       expect(findCheckbox().attributes('disabled')).toBe('true');
     });
 
@@ -141,6 +149,12 @@ describe('tags list row', () => {
         title: tag.location,
       });
     });
+
+    it('is disabled when the component is disabled', () => {
+      mountComponent({ ...defaultProps, disabled: true });
+
+      expect(findClipboardButton().attributes('disabled')).toBe('true');
+    });
   });
 
   describe('warning icon', () => {
@@ -266,15 +280,19 @@ describe('tags list row', () => {
     });
 
     it.each`
-      canDelete | digest
-      ${true}   | ${null}
-      ${false}  | ${'foo'}
-      ${false}  | ${null}
-    `('is disabled when canDelete is $canDelete and digest is $digest', ({ canDelete, digest }) => {
-      mountComponent({ ...defaultProps, tag: { ...tag, canDelete, digest } });
-
-      expect(findDeleteButton().attributes('disabled')).toBe('true');
-    });
+      canDelete | digest   | disabled
+      ${true}   | ${null}  | ${true}
+      ${false}  | ${'foo'} | ${true}
+      ${false}  | ${null}  | ${true}
+      ${true}   | ${'foo'} | ${true}
+    `(
+      'is disabled when canDelete is $canDelete and digest is $digest and disabled is $disabled',
+      ({ canDelete, digest, disabled }) => {
+        mountComponent({ ...defaultProps, tag: { ...tag, canDelete, digest }, disabled });
+
+        expect(findDeleteButton().attributes('disabled')).toBe('true');
+      },
+    );
 
     it('delete event emits delete', () => {
       mountComponent();
@@ -287,13 +305,10 @@ describe('tags list row', () => {
 
   describe('details rows', () => {
     describe('when the tag has a digest', () => {
-      beforeEach(() => {
+      it('has 3 details rows', async () => {
         mountComponent();
+        await nextTick();
 
-        return wrapper.vm.$nextTick();
-      });
-
-      it('has 3 details rows', () => {
         expect(findDetailsRows().length).toBe(3);
       });
 
@@ -303,17 +318,37 @@ describe('tags list row', () => {
         ${'manifest detail'}       | ${findManifestDetail}      | ${'Manifest digest: sha256:2cf3d2fdac1b04a14301d47d51cb88dcd26714c74f91440eeee99ce399089062'}             | ${'log'}        | ${true}
         ${'configuration detail'}  | ${findConfigurationDetail} | ${'Configuration digest: sha256:c2613843ab33aabf847965442b13a8b55a56ae28837ce182627c0716eb08c02b'}        | ${'cloud-gear'} | ${true}
       `('$name details row', ({ finderFunction, text, icon, clipboard }) => {
-        it(`has ${text} as text`, () => {
+        it(`has ${text} as text`, async () => {
+          mountComponent();
+          await nextTick();
+
           expect(finderFunction().text()).toMatchInterpolatedText(text);
         });
 
-        it(`has the ${icon} icon`, () => {
+        it(`has the ${icon} icon`, async () => {
+          mountComponent();
+          await nextTick();
+
           expect(finderFunction().props('icon')).toBe(icon);
         });
 
-        it(`is ${clipboard} that clipboard button exist`, () => {
-          expect(finderFunction().find(ClipboardButton).exists()).toBe(clipboard);
-        });
+        if (clipboard) {
+          it(`clipboard button exist`, async () => {
+            mountComponent();
+            await nextTick();
+
+            expect(finderFunction().find(ClipboardButton).exists()).toBe(clipboard);
+          });
+
+          it('is disabled when the component is disabled', async () => {
+            mountComponent({ ...defaultProps, disabled: true });
+            await nextTick();
+
+            expect(finderFunction().findComponent(ClipboardButton).attributes('disabled')).toBe(
+              'true',
+            );
+          });
+        }
       });
     });
 
@@ -321,7 +356,7 @@ describe('tags list row', () => {
       it('hides the details rows', async () => {
         mountComponent({ tag: { ...tag, digest: null } });
 
-        await wrapper.vm.$nextTick();
+        await nextTick();
         expect(findDetailsRows().length).toBe(0);
       });
     });
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 6c897b983f7..323d7b177e7 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
@@ -25,10 +25,11 @@ describe('Image List Row', () => {
 
   const findDetailsLink = () => wrapper.find('[data-testid="details-link"]');
   const findTagsCount = () => wrapper.find('[data-testid="tags-count"]');
-  const findDeleteBtn = () => wrapper.find(DeleteButton);
-  const findClipboardButton = () => wrapper.find(ClipboardButton);
+  const findDeleteBtn = () => wrapper.findComponent(DeleteButton);
+  const findClipboardButton = () => wrapper.findComponent(ClipboardButton);
   const findWarningIcon = () => wrapper.find('[data-testid="warning-icon"]');
-  const findSkeletonLoader = () => wrapper.find(GlSkeletonLoader);
+  const findSkeletonLoader = () => wrapper.findComponent(GlSkeletonLoader);
+  const findListItemComponent = () => wrapper.findComponent(ListItem);
 
   const mountComponent = (props) => {
     wrapper = shallowMount(Component, {
@@ -52,20 +53,28 @@ describe('Image List Row', () => {
     wrapper = null;
   });
 
-  describe('main tooltip', () => {
-    it(`the title is ${ROW_SCHEDULED_FOR_DELETION}`, () => {
-      mountComponent();
+  describe('list item component', () => {
+    describe('tooltip', () => {
+      it(`the title is ${ROW_SCHEDULED_FOR_DELETION}`, () => {
+        mountComponent();
+
+        const tooltip = getBinding(wrapper.element, 'gl-tooltip');
+        expect(tooltip).toBeDefined();
+        expect(tooltip.value.title).toBe(ROW_SCHEDULED_FOR_DELETION);
+      });
 
-      const tooltip = getBinding(wrapper.element, 'gl-tooltip');
-      expect(tooltip).toBeDefined();
-      expect(tooltip.value.title).toBe(ROW_SCHEDULED_FOR_DELETION);
+      it('is disabled when item is being deleted', () => {
+        mountComponent({ item: { ...item, status: IMAGE_DELETE_SCHEDULED_STATUS } });
+
+        const tooltip = getBinding(wrapper.element, 'gl-tooltip');
+        expect(tooltip.value.disabled).toBe(false);
+      });
     });
 
-    it('is disabled when item is being deleted', () => {
+    it('is disabled when the item is in deleting status', () => {
       mountComponent({ item: { ...item, status: IMAGE_DELETE_SCHEDULED_STATUS } });
 
-      const tooltip = getBinding(wrapper.element, 'gl-tooltip');
-      expect(tooltip.value.disabled).toBe(false);
+      expect(findListItemComponent().props('disabled')).toBe(true);
     });
   });
 
@@ -118,6 +127,20 @@ describe('Image List Row', () => {
         },
       );
     });
+
+    describe('when the item is deleting', () => {
+      beforeEach(() => {
+        mountComponent({ item: { ...item, status: IMAGE_DELETE_SCHEDULED_STATUS } });
+      });
+
+      it('the router link is disabled', () => {
+        // we check the event prop as is the only workaround to disable a router link
+        expect(findDetailsLink().props('event')).toBe('');
+      });
+      it('the clipboard button is disabled', () => {
+        expect(findClipboardButton().attributes('disabled')).toBe('true');
+      });
+    });
   });
 
   describe('delete button', () => {