Add latest changes from gitlab-org/gitlab@13-7-stable-eev13.7.0-rc42

1 files changed, 41 insertions, 19 deletions

diff --git a/spec/frontend/registry/explorer/components/list_page/image_list_spec.js b/spec/frontend/registry/explorer/components/list_page/image_list_spec.js
index 03ba6ad7f80..54befc9973a 100644
--- a/spec/frontend/registry/explorer/components/list_page/image_list_spec.js
+++ b/spec/frontend/registry/explorer/components/list_page/image_list_spec.js
@@ -1,29 +1,25 @@
 import { shallowMount } from '@vue/test-utils';
-import { GlPagination } from '@gitlab/ui';
+import { GlKeysetPagination } from '@gitlab/ui';
 import Component from '~/registry/explorer/components/list_page/image_list.vue';
 import ImageListRow from '~/registry/explorer/components/list_page/image_list_row.vue';
 
-import { imagesListResponse, imagePagination } from '../../mock_data';
+import { imagesListResponse, pageInfo as defaultPageInfo } from '../../mock_data';
 
 describe('Image List', () => {
   let wrapper;
 
   const findRow = () => wrapper.findAll(ImageListRow);
-  const findPagination = () => wrapper.find(GlPagination);
+  const findPagination = () => wrapper.find(GlKeysetPagination);
 
-  const mountComponent = () => {
+  const mountComponent = (pageInfo = defaultPageInfo) => {
     wrapper = shallowMount(Component, {
       propsData: {
-        images: imagesListResponse.data,
-        pagination: imagePagination,
+        images: imagesListResponse,
+        pageInfo,
       },
     });
   };
 
-  beforeEach(() => {
-    mountComponent();
-  });
-
   afterEach(() => {
     wrapper.destroy();
     wrapper = null;
@@ -31,10 +27,14 @@ describe('Image List', () => {
 
   describe('list', () => {
     it('contains one list element for each image', () => {
-      expect(findRow().length).toBe(imagesListResponse.data.length);
+      mountComponent();
+
+      expect(findRow().length).toBe(imagesListResponse.length);
     });
 
     it('when delete event is emitted on the row it emits up a delete event', () => {
+      mountComponent();
+
       findRow()
         .at(0)
         .vm.$emit('delete', 'foo');
@@ -44,19 +44,41 @@ describe('Image List', () => {
 
   describe('pagination', () => {
     it('exists', () => {
+      mountComponent();
+
       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.each`
+      hasNextPage | hasPreviousPage | isVisible
+      ${true}     | ${true}         | ${true}
+      ${true}     | ${false}        | ${true}
+      ${false}    | ${true}         | ${true}
+    `(
+      'when hasNextPage is $hasNextPage and hasPreviousPage is $hasPreviousPage: is $isVisible that the component is visible',
+      ({ hasNextPage, hasPreviousPage, isVisible }) => {
+        mountComponent({ hasNextPage, hasPreviousPage });
+
+        expect(findPagination().exists()).toBe(isVisible);
+        expect(findPagination().props('hasPreviousPage')).toBe(hasPreviousPage);
+        expect(findPagination().props('hasNextPage')).toBe(hasNextPage);
+      },
+    );
+
+    it('emits "prev-page" when the user clicks the back page button', () => {
+      mountComponent({ hasPreviousPage: true });
+
+      findPagination().vm.$emit('prev');
+
+      expect(wrapper.emitted('prev-page')).toEqual([[]]);
     });
 
-    it('emits a pageChange event when the page change', () => {
-      findPagination().vm.$emit(GlPagination.model.event, 2);
-      expect(wrapper.emitted('pageChange')).toEqual([[2]]);
+    it('emits "next-page" when the user clicks the forward page button', () => {
+      mountComponent({ hasNextPage: true });
+
+      findPagination().vm.$emit('next');
+
+      expect(wrapper.emitted('next-page')).toEqual([[]]);
     });
   });
 });