Add latest changes from gitlab-org/gitlab@master

3 files changed, 185 insertions, 91 deletions

diff --git a/spec/frontend/registry/explorer/components/image_list_spec.js b/spec/frontend/registry/explorer/components/image_list_spec.js
new file mode 100644
index 00000000000..12f0fbe0c87
--- /dev/null
+++ b/spec/frontend/registry/explorer/components/image_list_spec.js
@@ -0,0 +1,74 @@
+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 { 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 findPagination = () => wrapper.find(GlPagination);
+
+  const mountComponent = () => {
+    wrapper = shallowMount(Component, {
+      stubs: {
+        RouterLink,
+      },
+      propsData: {
+        images: imagesListResponse.data,
+        pagination: imagePagination,
+      },
+    });
+  };
+
+  beforeEach(() => {
+    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);
+  });
+
+  it('should be possible to delete a repo', () => {
+    const deleteBtn = findDeleteBtn();
+    expect(deleteBtn.exists()).toBe(true);
+  });
+
+  describe('pagination', () => {
+    it('exists', () => {
+      expect(findPagination().exists()).toBe(true);
+    });
+
+    it('is wired to the correct pagination props', () => {
+      const pagination = findPagination();
+      expect(pagination.props('perPage')).toBe(imagePagination.perPage);
+      expect(pagination.props('totalItems')).toBe(imagePagination.total);
+      expect(pagination.props('value')).toBe(imagePagination.page);
+    });
+
+    it('emits a pageChange event when the page change', () => {
+      wrapper.setData({ currentPage: 2 });
+      expect(wrapper.emitted('pageChange')).toEqual([[2]]);
+    });
+  });
+});
diff --git a/spec/frontend/registry/explorer/mock_data.js b/spec/frontend/registry/explorer/mock_data.js
index 2d8cd4e42bc..f6beccda9b1 100644
--- a/spec/frontend/registry/explorer/mock_data.js
+++ b/spec/frontend/registry/explorer/mock_data.js
@@ -87,3 +87,11 @@ export const tagsListResponse = {
   ],
   headers,
 };
+
+export const imagePagination = {
+  perPage: 10,
+  page: 1,
+  total: 14,
+  totalPages: 2,
+  nextPage: 2,
+};
diff --git a/spec/frontend/registry/explorer/pages/list_spec.js b/spec/frontend/registry/explorer/pages/list_spec.js
index 1d530483093..97742b9e9b3 100644
--- a/spec/frontend/registry/explorer/pages/list_spec.js
+++ b/spec/frontend/registry/explorer/pages/list_spec.js
@@ -1,11 +1,13 @@
 import { shallowMount } from '@vue/test-utils';
-import { GlPagination, GlSkeletonLoader, GlSprintf, GlAlert } from '@gitlab/ui';
+import { GlSkeletonLoader, GlSprintf, GlAlert, GlSearchBoxByClick } from '@gitlab/ui';
 import Tracking from '~/tracking';
+import waitForPromises from 'helpers/wait_for_promises';
 import component from '~/registry/explorer/pages/list.vue';
 import QuickstartDropdown from '~/registry/explorer/components/quickstart_dropdown.vue';
 import GroupEmptyState from '~/registry/explorer/components/group_empty_state.vue';
 import ProjectEmptyState from '~/registry/explorer/components/project_empty_state.vue';
 import ProjectPolicyAlert from '~/registry/explorer/components/project_policy_alert.vue';
+import ImageList from '~/registry/explorer/components/image_list.vue';
 import { createStore } from '~/registry/explorer/stores/';
 import {
   SET_MAIN_LOADING,
@@ -16,9 +18,11 @@ import {
 import {
   DELETE_IMAGE_SUCCESS_MESSAGE,
   DELETE_IMAGE_ERROR_MESSAGE,
+  IMAGE_REPOSITORY_LIST_LABEL,
+  SEARCH_PLACEHOLDER_TEXT,
 } from '~/registry/explorer/constants';
 import { imagesListResponse } from '../mock_data';
-import { GlModal, GlEmptyState, RouterLink } from '../stubs';
+import { GlModal, GlEmptyState } from '../stubs';
 import { $toast } from '../../shared/mocks';
 
 describe('List Page', () => {
@@ -26,20 +30,21 @@ describe('List Page', () => {
   let dispatchSpy;
   let store;
 
-  const findDeleteBtn = () => wrapper.find({ ref: 'deleteImageButton' });
   const findDeleteModal = () => wrapper.find(GlModal);
   const findSkeletonLoader = () => wrapper.find(GlSkeletonLoader);
   const findImagesList = () => wrapper.find({ ref: 'imagesList' });
-  const findRowItems = () => wrapper.findAll({ ref: 'rowItem' });
+
   const findEmptyState = () => wrapper.find(GlEmptyState);
-  const findDetailsLink = () => wrapper.find({ ref: 'detailsLink' });
-  const findClipboardButton = () => wrapper.find({ ref: 'clipboardButton' });
-  const findPagination = () => wrapper.find(GlPagination);
+
   const findQuickStartDropdown = () => wrapper.find(QuickstartDropdown);
   const findProjectEmptyState = () => wrapper.find(ProjectEmptyState);
   const findGroupEmptyState = () => wrapper.find(GroupEmptyState);
   const findProjectPolicyAlert = () => wrapper.find(ProjectPolicyAlert);
   const findDeleteAlert = () => wrapper.find(GlAlert);
+  const findImageList = () => wrapper.find(ImageList);
+  const findListHeader = () => wrapper.find('[data-testid="listHeader"]');
+  const findSearchBox = () => wrapper.find(GlSearchBoxByClick);
+  const findEmptySearchMessage = () => wrapper.find('[data-testid="emptySearch"]');
 
   const mountComponent = ({ mocks } = {}) => {
     wrapper = shallowMount(component, {
@@ -48,7 +53,6 @@ describe('List Page', () => {
         GlModal,
         GlEmptyState,
         GlSprintf,
-        RouterLink,
       },
       mocks: {
         $toast,
@@ -164,6 +168,7 @@ describe('List Page', () => {
     beforeEach(() => {
       store.commit(SET_IMAGES_LIST_SUCCESS, []);
       mountComponent();
+      return waitForPromises();
     });
 
     it('quick start is not visible', () => {
@@ -191,54 +196,39 @@ describe('List Page', () => {
       it('quick start is not visible', () => {
         expect(findQuickStartDropdown().exists()).toBe(false);
       });
+
+      it('list header is not visible', () => {
+        expect(findListHeader().exists()).toBe(false);
+      });
     });
   });
 
   describe('list is not empty', () => {
-    beforeEach(() => {
-      mountComponent();
-    });
-
-    it('quick start is visible', () => {
-      expect(findQuickStartDropdown().exists()).toBe(true);
-    });
-
-    describe('listElement', () => {
-      let listElements;
-      let firstElement;
-
+    describe('unfiltered state', () => {
       beforeEach(() => {
-        listElements = findRowItems();
-        [firstElement] = store.state.images;
+        mountComponent();
       });
 
-      it('contains one list element for each image', () => {
-        expect(listElements.length).toBe(store.state.images.length);
+      it('quick start is visible', () => {
+        expect(findQuickStartDropdown().exists()).toBe(true);
       });
 
-      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('list component is visible', () => {
+        expect(findImageList().exists()).toBe(true);
       });
 
-      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);
+      it('list header is  visible', () => {
+        const header = findListHeader();
+        expect(header.exists()).toBe(true);
+        expect(header.text()).toBe(IMAGE_REPOSITORY_LIST_LABEL);
       });
 
       describe('delete image', () => {
-        it('should be possible to delete a repo', () => {
-          const deleteBtn = findDeleteBtn();
-          expect(deleteBtn.exists()).toBe(true);
-        });
-
+        const itemToDelete = { path: 'bar' };
         it('should call deleteItem when confirming deletion', () => {
           dispatchSpy.mockResolvedValue();
-          findDeleteBtn().vm.$emit('click');
-          expect(wrapper.vm.itemToDelete).not.toEqual({});
+          findImageList().vm.$emit('delete', itemToDelete);
+          expect(wrapper.vm.itemToDelete).toEqual(itemToDelete);
           findDeleteModal().vm.$emit('ok');
           expect(store.dispatch).toHaveBeenCalledWith(
             'requestDeleteImage',
@@ -248,8 +238,8 @@ describe('List Page', () => {
 
         it('should show a success alert when delete request is successful', () => {
           dispatchSpy.mockResolvedValue();
-          findDeleteBtn().vm.$emit('click');
-          expect(wrapper.vm.itemToDelete).not.toEqual({});
+          findImageList().vm.$emit('delete', itemToDelete);
+          expect(wrapper.vm.itemToDelete).toEqual(itemToDelete);
           return wrapper.vm.handleDeleteImage().then(() => {
             const alert = findDeleteAlert();
             expect(alert.exists()).toBe(true);
@@ -261,8 +251,8 @@ describe('List Page', () => {
 
         it('should show an error alert when delete request fails', () => {
           dispatchSpy.mockRejectedValue();
-          findDeleteBtn().vm.$emit('click');
-          expect(wrapper.vm.itemToDelete).not.toEqual({});
+          findImageList().vm.$emit('delete', itemToDelete);
+          expect(wrapper.vm.itemToDelete).toEqual(itemToDelete);
           return wrapper.vm.handleDeleteImage().then(() => {
             const alert = findDeleteAlert();
             expect(alert.exists()).toBe(true);
@@ -272,71 +262,93 @@ describe('List Page', () => {
           });
         });
       });
+    });
 
-      describe('pagination', () => {
-        it('exists', () => {
-          expect(findPagination().exists()).toBe(true);
-        });
+    describe('search', () => {
+      it('has a search box element', () => {
+        mountComponent();
+        const searchBox = findSearchBox();
+        expect(searchBox.exists()).toBe(true);
+        expect(searchBox.attributes('placeholder')).toBe(SEARCH_PLACEHOLDER_TEXT);
+      });
 
-        it('is wired to the correct pagination props', () => {
-          const pagination = findPagination();
-          expect(pagination.props('perPage')).toBe(store.state.pagination.perPage);
-          expect(pagination.props('totalItems')).toBe(store.state.pagination.total);
-          expect(pagination.props('value')).toBe(store.state.pagination.page);
+      it('performs a search', () => {
+        mountComponent();
+        findSearchBox().vm.$emit('submit', 'foo');
+        expect(store.dispatch).toHaveBeenCalledWith('requestImagesList', {
+          name: 'foo',
         });
+      });
 
-        it('fetch the data from the API when the v-model changes', () => {
-          dispatchSpy.mockReturnValue();
-          wrapper.setData({ currentPage: 2 });
-          return wrapper.vm.$nextTick().then(() => {
-            expect(store.dispatch).toHaveBeenCalledWith('requestImagesList', { page: 2 });
-          });
+      it('when search result is empty displays an empty search message', () => {
+        mountComponent();
+        store.commit(SET_IMAGES_LIST_SUCCESS, []);
+        return wrapper.vm.$nextTick().then(() => {
+          expect(findEmptySearchMessage().exists()).toBe(true);
         });
       });
     });
 
-    describe('modal', () => {
-      it('exists', () => {
-        expect(findDeleteModal().exists()).toBe(true);
-      });
-
-      it('contains a description with the path of the item to delete', () => {
-        wrapper.setData({ itemToDelete: { path: 'foo' } });
-        return wrapper.vm.$nextTick().then(() => {
-          expect(findDeleteModal().html()).toContain('foo');
+    describe('pagination', () => {
+      it('pageChange event triggers the appropriate store function', () => {
+        mountComponent();
+        findImageList().vm.$emit('pageChange', 2);
+        expect(store.dispatch).toHaveBeenCalledWith('requestImagesList', {
+          pagination: { page: 2 },
+          name: wrapper.vm.search,
         });
       });
     });
+  });
 
-    describe('tracking', () => {
-      const testTrackingCall = action => {
-        expect(Tracking.event).toHaveBeenCalledWith(undefined, action, {
-          label: 'registry_repository_delete',
-        });
-      };
+  describe('modal', () => {
+    beforeEach(() => {
+      mountComponent();
+    });
 
-      beforeEach(() => {
-        jest.spyOn(Tracking, 'event');
-        dispatchSpy.mockResolvedValue();
-      });
+    it('exists', () => {
+      expect(findDeleteModal().exists()).toBe(true);
+    });
 
-      it('send an event when delete button is clicked', () => {
-        const deleteBtn = findDeleteBtn();
-        deleteBtn.vm.$emit('click');
-        testTrackingCall('click_button');
+    it('contains a description with the path of the item to delete', () => {
+      wrapper.setData({ itemToDelete: { path: 'foo' } });
+      return wrapper.vm.$nextTick().then(() => {
+        expect(findDeleteModal().html()).toContain('foo');
       });
+    });
+  });
 
-      it('send an event when cancel is pressed on modal', () => {
-        const deleteModal = findDeleteModal();
-        deleteModal.vm.$emit('cancel');
-        testTrackingCall('cancel_delete');
-      });
+  describe('tracking', () => {
+    beforeEach(() => {
+      mountComponent();
+    });
 
-      it('send an event when confirm is clicked on modal', () => {
-        const deleteModal = findDeleteModal();
-        deleteModal.vm.$emit('ok');
-        testTrackingCall('confirm_delete');
+    const testTrackingCall = action => {
+      expect(Tracking.event).toHaveBeenCalledWith(undefined, action, {
+        label: 'registry_repository_delete',
       });
+    };
+
+    beforeEach(() => {
+      jest.spyOn(Tracking, 'event');
+      dispatchSpy.mockResolvedValue();
+    });
+
+    it('send an event when delete button is clicked', () => {
+      findImageList().vm.$emit('delete', {});
+      testTrackingCall('click_button');
+    });
+
+    it('send an event when cancel is pressed on modal', () => {
+      const deleteModal = findDeleteModal();
+      deleteModal.vm.$emit('cancel');
+      testTrackingCall('cancel_delete');
+    });
+
+    it('send an event when confirm is clicked on modal', () => {
+      const deleteModal = findDeleteModal();
+      deleteModal.vm.$emit('ok');
+      testTrackingCall('confirm_delete');
     });
   });
 });