Add latest changes from gitlab-org/gitlab@master

2 files changed, 153 insertions, 30 deletions

diff --git a/spec/frontend/registry/explorer/components/image_list_row_spec.js b/spec/frontend/registry/explorer/components/image_list_row_spec.js
new file mode 100644
index 00000000000..a6c5d485051
--- /dev/null
+++ b/spec/frontend/registry/explorer/components/image_list_row_spec.js
@@ -0,0 +1,140 @@
+import { shallowMount } from '@vue/test-utils';
+import { GlIcon, GlSprintf } from '@gitlab/ui';
+import { createMockDirective, getBinding } from 'helpers/vue_mock_directive';
+import Component from '~/registry/explorer/components/image_list_row.vue';
+import ClipboardButton from '~/vue_shared/components/clipboard_button.vue';
+import {
+  ROW_SCHEDULED_FOR_DELETION,
+  LIST_DELETE_BUTTON_DISABLED,
+} from '~/registry/explorer/constants';
+import { RouterLink } from '../stubs';
+import { imagesListResponse } from '../mock_data';
+
+describe('Image List Row', () => {
+  let wrapper;
+  const item = imagesListResponse.data[0];
+  const findDeleteBtn = () => wrapper.find('[data-testid="deleteImageButton"]');
+  const findDetailsLink = () => wrapper.find('[data-testid="detailsLink"]');
+  const findTagsCount = () => wrapper.find('[data-testid="tagsCount"]');
+  const findDeleteButtonWrapper = () => wrapper.find('[data-testid="deleteButtonWrapper"]');
+  const findClipboardButton = () => wrapper.find(ClipboardButton);
+
+  const mountComponent = props => {
+    wrapper = shallowMount(Component, {
+      stubs: {
+        RouterLink,
+        GlSprintf,
+      },
+      propsData: {
+        item,
+        ...props,
+      },
+      directives: {
+        GlTooltip: createMockDirective(),
+      },
+    });
+  };
+
+  afterEach(() => {
+    wrapper.destroy();
+    wrapper = null;
+  });
+
+  describe('main 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);
+    });
+
+    it('is disabled when item is being deleted', () => {
+      mountComponent({ item: { ...item, deleting: true } });
+      const tooltip = getBinding(wrapper.element, 'gl-tooltip');
+      expect(tooltip.value.disabled).toBe(false);
+    });
+  });
+
+  describe('image title and path', () => {
+    it('contains a link to the details page', () => {
+      mountComponent();
+      const link = findDetailsLink();
+      expect(link.html()).toContain(item.path);
+      expect(link.props('to').name).toBe('details');
+    });
+
+    it('contains a clipboard button', () => {
+      mountComponent();
+      const button = findClipboardButton();
+      expect(button.exists()).toBe(true);
+      expect(button.props('text')).toBe(item.location);
+      expect(button.props('title')).toBe(item.location);
+    });
+  });
+
+  describe('delete button wrapper', () => {
+    it('has a tooltip', () => {
+      mountComponent();
+      const tooltip = getBinding(findDeleteButtonWrapper().element, 'gl-tooltip');
+      expect(tooltip).toBeDefined();
+      expect(tooltip.value.title).toBe(LIST_DELETE_BUTTON_DISABLED);
+    });
+    it('tooltip is enabled when destroy_path is falsy', () => {
+      mountComponent({ item: { ...item, destroy_path: null } });
+      const tooltip = getBinding(findDeleteButtonWrapper().element, 'gl-tooltip');
+      expect(tooltip.value.disabled).toBeFalsy();
+    });
+  });
+
+  describe('delete button', () => {
+    it('exists', () => {
+      mountComponent();
+      expect(findDeleteBtn().exists()).toBe(true);
+    });
+
+    it('emits a delete event', () => {
+      mountComponent();
+      findDeleteBtn().vm.$emit('click');
+      expect(wrapper.emitted('delete')).toEqual([[item]]);
+    });
+
+    it.each`
+      destroy_path | deleting | state
+      ${null}      | ${null}  | ${'true'}
+      ${null}      | ${true}  | ${'true'}
+      ${'foo'}     | ${true}  | ${'true'}
+      ${'foo'}     | ${false} | ${undefined}
+    `(
+      'disabled is $state when destroy_path is $destroy_path and deleting is $deleting',
+      ({ destroy_path, deleting, state }) => {
+        mountComponent({ item: { ...item, destroy_path, deleting } });
+        expect(findDeleteBtn().attributes('disabled')).toBe(state);
+      },
+    );
+  });
+
+  describe('tags count', () => {
+    it('exists', () => {
+      mountComponent();
+      expect(findTagsCount().exists()).toBe(true);
+    });
+
+    it('contains a tag icon', () => {
+      mountComponent();
+      const icon = findTagsCount().find(GlIcon);
+      expect(icon.exists()).toBe(true);
+      expect(icon.props('name')).toBe('tag');
+    });
+
+    describe('tags count text', () => {
+      it('with one tag in the image', () => {
+        mountComponent({ item: { ...item, tags_count: 1 } });
+        expect(findTagsCount().text()).toMatchInterpolatedText('1 Tag');
+      });
+      it('with more than one tag in the image', () => {
+        mountComponent({ item: { ...item, tags_count: 3 } });
+        expect(findTagsCount().text()).toMatchInterpolatedText('3 Tags');
+      });
+    });
+  });
+});
diff --git a/spec/frontend/registry/explorer/components/image_list_spec.js b/spec/frontend/registry/explorer/components/image_list_spec.js
index 12f0fbe0c87..f849e60a749 100644
--- a/spec/frontend/registry/explorer/components/image_list_spec.js
+++ b/spec/frontend/registry/explorer/components/image_list_spec.js
@@ -1,26 +1,18 @@
 import { shallowMount } from '@vue/test-utils';
 import { GlPagination } from '@gitlab/ui';
 import Component from '~/registry/explorer/components/image_list.vue';
-import ClipboardButton from '~/vue_shared/components/clipboard_button.vue';
-import { RouterLink } from '../stubs';
+import ImageListRow from '~/registry/explorer/components/image_list_row.vue';
+
 import { imagesListResponse, imagePagination } from '../mock_data';
 
 describe('Image List', () => {
   let wrapper;
 
-  const firstElement = imagesListResponse.data[0];
-
-  const findDeleteBtn = () => wrapper.find('[data-testid="deleteImageButton"]');
-  const findRowItems = () => wrapper.findAll('[data-testid="rowItem"]');
-  const findDetailsLink = () => wrapper.find('[data-testid="detailsLink"]');
-  const findClipboardButton = () => wrapper.find(ClipboardButton);
+  const findRow = () => wrapper.findAll(ImageListRow);
   const findPagination = () => wrapper.find(GlPagination);
 
   const mountComponent = () => {
     wrapper = shallowMount(Component, {
-      stubs: {
-        RouterLink,
-      },
       propsData: {
         images: imagesListResponse.data,
         pagination: imagePagination,
@@ -32,26 +24,17 @@ describe('Image List', () => {
     mountComponent();
   });
 
-  it('contains one list element for each image', () => {
-    expect(findRowItems().length).toBe(imagesListResponse.data.length);
-  });
-
-  it('contains a link to the details page', () => {
-    const link = findDetailsLink();
-    expect(link.html()).toContain(firstElement.path);
-    expect(link.props('to').name).toBe('details');
-  });
-
-  it('contains a clipboard button', () => {
-    const button = findClipboardButton();
-    expect(button.exists()).toBe(true);
-    expect(button.props('text')).toBe(firstElement.location);
-    expect(button.props('title')).toBe(firstElement.location);
-  });
+  describe('list', () => {
+    it('contains one list element for each image', () => {
+      expect(findRow().length).toBe(imagesListResponse.data.length);
+    });
 
-  it('should be possible to delete a repo', () => {
-    const deleteBtn = findDeleteBtn();
-    expect(deleteBtn.exists()).toBe(true);
+    it('when delete event is emitted on the row it emits up a delete event', () => {
+      findRow()
+        .at(0)
+        .vm.$emit('delete', 'foo');
+      expect(wrapper.emitted('delete')).toEqual([['foo']]);
+    });
   });
 
   describe('pagination', () => {