Use GitLab ui pagination component for groups

3 files changed, 76 insertions, 3 deletions

diff --git a/spec/features/dashboard/groups_list_spec.rb b/spec/features/dashboard/groups_list_spec.rb
index eceb12e91cd..e75c43d5338 100644
--- a/spec/features/dashboard/groups_list_spec.rb
+++ b/spec/features/dashboard/groups_list_spec.rb
@@ -125,7 +125,7 @@ describe 'Dashboard Groups page', :js do
     end
 
     it 'loads results for next page' do
-      expect(page).to have_selector('.gl-pagination .page', count: 2)
+      expect(page).to have_selector('.gl-pagination .page-item a[role=menuitemradio]', count: 2)
 
       # Check first page
       expect(page).to have_content(group2.full_name)
@@ -134,7 +134,7 @@ describe 'Dashboard Groups page', :js do
       expect(page).not_to have_selector("#group-#{group.id}")
 
       # Go to next page
-      find(".gl-pagination .page:not(.active) a").click
+      find('.gl-pagination .page-item:not(.active) a[role=menuitemradio]').click
 
       wait_for_requests
 
diff --git a/spec/javascripts/groups/components/app_spec.js b/spec/javascripts/groups/components/app_spec.js
index 76933cf337b..89c07d1f06d 100644
--- a/spec/javascripts/groups/components/app_spec.js
+++ b/spec/javascripts/groups/components/app_spec.js
@@ -24,6 +24,8 @@ const createComponent = (hideProjects = false) => {
   const store = new GroupsStore(false);
   const service = new GroupsService(mockEndpoint);
 
+  store.state.pageInfo = mockPageInfo;
+
   return new Component({
     propsData: {
       store,
@@ -484,7 +486,6 @@ describe('AppComponent', () => {
     it('should render groups tree', done => {
       vm.store.state.groups = [mockParentGroupItem];
       vm.isLoading = false;
-      vm.store.state.pageInfo = mockPageInfo;
       Vue.nextTick(() => {
         expect(vm.$el.querySelector('.groups-list-tree-container')).toBeDefined();
         done();
diff --git a/spec/javascripts/vue_shared/components/pagination_links_spec.js b/spec/javascripts/vue_shared/components/pagination_links_spec.js
new file mode 100644
index 00000000000..c9d183872b4
--- /dev/null
+++ b/spec/javascripts/vue_shared/components/pagination_links_spec.js
@@ -0,0 +1,72 @@
+import Vue from 'vue';
+import PaginationLinks from '~/vue_shared/components/pagination_links.vue';
+import { s__ } from '~/locale';
+import mountComponent from '../../helpers/vue_mount_component_helper';
+
+describe('Pagination links component', () => {
+  const paginationLinksComponent = Vue.extend(PaginationLinks);
+  const change = page => page;
+  const pageInfo = {
+    page: 3,
+    perPage: 5,
+    total: 30,
+  };
+  const translations = {
+    firstText: s__('Pagination|« First'),
+    prevText: s__('Pagination|Prev'),
+    nextText: s__('Pagination|Next'),
+    lastText: s__('Pagination|Last »'),
+  };
+
+  let paginationLinks;
+  let glPagination;
+  let destinationComponent;
+
+  beforeEach(() => {
+    paginationLinks = mountComponent(
+      paginationLinksComponent,
+      {
+        change,
+        pageInfo,
+      },
+    );
+    [glPagination] = paginationLinks.$children;
+    [destinationComponent] = glPagination.$children;
+  });
+
+  afterEach(() => {
+    paginationLinks.$destroy();
+  });
+
+  it('should provide translated text to GitLab UI pagination', () => {
+    Object.entries(translations).forEach(entry =>
+      expect(
+        destinationComponent[entry[0]],
+      ).toBe(entry[1]),
+    );
+  });
+
+  it('should pass change to GitLab UI pagination', () => {
+    expect(
+      Object.is(glPagination.change, change),
+    ).toBe(true);
+  });
+
+  it('should pass page from pageInfo to GitLab UI pagination', () => {
+    expect(
+      destinationComponent.value,
+    ).toBe(pageInfo.page);
+  });
+
+  it('should pass per page from pageInfo to GitLab UI pagination', () => {
+    expect(
+      destinationComponent.perPage,
+    ).toBe(pageInfo.perPage);
+  });
+
+  it('should pass total items from pageInfo to GitLab UI pagination', () => {
+    expect(
+      destinationComponent.totalRows,
+    ).toBe(pageInfo.total);
+  });
+});