1 files changed, 26 insertions, 31 deletions

diff --git a/spec/frontend/packages_and_registries/package_registry/components/details/package_versions_list_spec.js b/spec/frontend/packages_and_registries/package_registry/components/details/package_versions_list_spec.js
index f0fa9592419..20a459e2c1a 100644
--- a/spec/frontend/packages_and_registries/package_registry/components/details/package_versions_list_spec.js
+++ b/spec/frontend/packages_and_registries/package_registry/components/details/package_versions_list_spec.js
@@ -1,7 +1,7 @@
-import { GlKeysetPagination } from '@gitlab/ui';
 import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
 import PackageVersionsList from '~/packages_and_registries/package_registry/components/details/package_versions_list.vue';
 import PackagesListLoader from '~/packages_and_registries/shared/components/packages_list_loader.vue';
+import RegistryList from '~/packages_and_registries/shared/components/registry_list.vue';
 import VersionRow from '~/packages_and_registries/package_registry/components/details/version_row.vue';
 import { packageData } from '../../mock_data';
 
@@ -21,7 +21,7 @@ describe('PackageVersionsList', () => {
 
   const uiElements = {
     findLoader: () => wrapper.findComponent(PackagesListLoader),
-    findListPagination: () => wrapper.findComponent(GlKeysetPagination),
+    findRegistryList: () => wrapper.findComponent(RegistryList),
     findEmptySlot: () => wrapper.findComponent(EmptySlotStub),
     findListRow: () => wrapper.findAllComponents(VersionRow),
   };
@@ -33,6 +33,9 @@ describe('PackageVersionsList', () => {
         isLoading: false,
         ...props,
       },
+      stubs: {
+        RegistryList,
+      },
       slots: {
         'empty-state': EmptySlotStub,
       },
@@ -55,8 +58,8 @@ describe('PackageVersionsList', () => {
       expect(uiElements.findEmptySlot().exists()).toBe(false);
     });
 
-    it('does not display pagination', () => {
-      expect(uiElements.findListPagination().exists()).toBe(false);
+    it('does not display registry list', () => {
+      expect(uiElements.findRegistryList().exists()).toBe(false);
     });
   });
 
@@ -77,8 +80,8 @@ describe('PackageVersionsList', () => {
       expect(uiElements.findListRow().exists()).toBe(false);
     });
 
-    it('does not display pagination', () => {
-      expect(uiElements.findListPagination().exists()).toBe(false);
+    it('does not display registry list', () => {
+      expect(uiElements.findRegistryList().exists()).toBe(false);
     });
   });
 
@@ -87,6 +90,19 @@ describe('PackageVersionsList', () => {
       mountComponent();
     });
 
+    it('displays package registry list', () => {
+      expect(uiElements.findRegistryList().exists()).toEqual(true);
+    });
+
+    it('binds the right props', () => {
+      expect(uiElements.findRegistryList().props()).toMatchObject({
+        items: packageList,
+        pagination: {},
+        isLoading: false,
+        hiddenDelete: true,
+      });
+    });
+
     it('displays package version rows', () => {
       expect(uiElements.findListRow().exists()).toEqual(true);
       expect(uiElements.findListRow()).toHaveLength(packageList.length);
@@ -102,27 +118,6 @@ describe('PackageVersionsList', () => {
       });
     });
 
-    describe('pagination display', () => {
-      it('does not display pagination if there is no previous or next page', () => {
-        expect(uiElements.findListPagination().exists()).toBe(false);
-      });
-
-      it('displays pagination if pageInfo.hasNextPage is true', async () => {
-        await wrapper.setProps({ pageInfo: { hasNextPage: true } });
-        expect(uiElements.findListPagination().exists()).toBe(true);
-      });
-
-      it('displays pagination if pageInfo.hasPreviousPage is true', async () => {
-        await wrapper.setProps({ pageInfo: { hasPreviousPage: true } });
-        expect(uiElements.findListPagination().exists()).toBe(true);
-      });
-
-      it('displays pagination if both pageInfo.hasNextPage and pageInfo.hasPreviousPage are true', async () => {
-        await wrapper.setProps({ pageInfo: { hasNextPage: true, hasPreviousPage: true } });
-        expect(uiElements.findListPagination().exists()).toBe(true);
-      });
-    });
-
     it('does not display loader', () => {
       expect(uiElements.findLoader().exists()).toBe(false);
     });
@@ -137,14 +132,14 @@ describe('PackageVersionsList', () => {
       mountComponent({ pageInfo: { hasNextPage: true } });
     });
 
-    it('emits prev-page event when paginator emits prev event', () => {
-      uiElements.findListPagination().vm.$emit('prev');
+    it('emits prev-page event when registry list emits prev event', () => {
+      uiElements.findRegistryList().vm.$emit('prev-page');
 
       expect(wrapper.emitted('prev-page')).toHaveLength(1);
     });
 
-    it('emits next-page when paginator emits next event', () => {
-      uiElements.findListPagination().vm.$emit('next');
+    it('emits next-page when registry list emits next event', () => {
+      uiElements.findRegistryList().vm.$emit('next-page');
 
       expect(wrapper.emitted('next-page')).toHaveLength(1);
     });