modify pagination tests to match new component usage

3 files changed, 61 insertions, 88 deletions

diff --git a/app/assets/javascripts/groups/components/groups.vue b/app/assets/javascripts/groups/components/groups.vue
index d169c0834d1..4523eafb9cc 100644
--- a/app/assets/javascripts/groups/components/groups.vue
+++ b/app/assets/javascripts/groups/components/groups.vue
@@ -1,57 +1,63 @@
 <script>
-  import bp from '../../breakpoints';
-  import { mergeUrlParams } from '~/lib/utils/url_utility';
-  import { s__ } from '../../locale';
+import { mergeUrlParams } from '~/lib/utils/url_utility';
+import bp from '../../breakpoints';
+import { s__ } from '../../locale';
 
-  export default {
-    props: {
-      groups: {
-        type: Array,
-        required: true,
-      },
-      pageInfo: {
-        type: Object,
-        required: true,
-      },
-      searchEmpty: {
-        type: Boolean,
-        required: true,
-      },
-      searchEmptyMessage: {
-        type: String,
-        required: true,
-      },
+export default {
+  props: {
+    groups: {
+      type: Array,
+      required: true,
     },
-    data: () => ({
-      breakpoint: bp.getBreakpointSize()
-    }),
-    created () {
-      window.addEventListener('resize', this.setBreakpoint)
+    pageInfo: {
+      type: Object,
+      required: true,
     },
-    beforeDestroy () {
-      window.removeEventListener('resize', this.setBreakpoint)
+    searchEmpty: {
+      type: Boolean,
+      required: true,
     },
-    computed: {
-      paginationLimit () {
-        switch (this.breakpoint) {
-          case 'xs':
-            return 1
-          case 'sm':
-            return 5
-          default:
-            return 11
-        }
-      }
+    searchEmptyMessage: {
+      type: String,
+      required: true,
+    },
+  },
+  data: () => ({
+    breakpoint: bp.getBreakpointSize(),
+    paginationText: {
+      first: s__('Pagination|« First'),
+      prev: s__('Pagination|Prev'),
+      next: s__('Pagination|Next'),
+      last: s__('Pagination|Last »'),
     },
-    methods: {
-      change(page) {
-        return mergeUrlParams({ page }, window.location.href);
-      },
-      setBreakpoint () {
-        this.breakpoint = bp.getBreakpointSize()
+  }),
+  computed: {
+    paginationLimit() {
+      switch (this.breakpoint) {
+        case 'xs':
+          return 1;
+        case 'sm':
+          return 5;
+        default:
+          return 11;
       }
-    }
-  };
+    },
+  },
+  created() {
+    window.addEventListener('resize', this.setBreakpoint);
+  },
+  beforeDestroy() {
+    window.removeEventListener('resize', this.setBreakpoint);
+  },
+  methods: {
+    change(page) {
+      return mergeUrlParams({ page }, window.location.href);
+    },
+    setBreakpoint() {
+      this.breakpoint = bp.getBreakpointSize();
+    },
+  },
+};
 </script>
 
 <template>
@@ -67,16 +73,16 @@
       :groups="groups"
     />
     <gl-pagination
-      class="gl-pagination d-flex justify-content-center prepend-top-default"
       v-if="!searchEmpty && pageInfo.totalPages > 1"
       :limit="paginationLimit"
       :link-gen="change"
       :value="pageInfo.page"
       :number-of-pages="pageInfo.totalPages"
-      :first-text="s__('Pagination|« First')"
-      :prev-text="s__('Pagination|Prev')"
-      :next-text="s__('Pagination|Next')"
-      :last-text="s__('Pagination|Last »')"
+      :first-text="paginationText.first"
+      :prev-text="paginationText.prev"
+      :next-text="paginationText.next"
+      :last-text="paginationText.last"
+      class="gl-pagination d-flex justify-content-center prepend-top-default"
     />
   </div>
 </template>
diff --git a/spec/javascripts/groups/components/app_spec.js b/spec/javascripts/groups/components/app_spec.js
index 03d4b472b87..09f42bba896 100644
--- a/spec/javascripts/groups/components/app_spec.js
+++ b/spec/javascripts/groups/components/app_spec.js
@@ -172,36 +172,6 @@ describe('AppComponent', () => {
       });
     });
 
-    describe('fetchPage', () => {
-      it('should fetch groups for provided page details and update window state', (done) => {
-        spyOn(vm, 'fetchGroups').and.returnValue(returnServicePromise(mockGroups));
-        spyOn(vm, 'updateGroups').and.callThrough();
-        const mergeUrlParams = spyOnDependency(appComponent, 'mergeUrlParams').and.callThrough();
-        spyOn(window.history, 'replaceState');
-        spyOn($, 'scrollTo');
-
-        vm.fetchPage(2, null, null, true);
-        expect(vm.isLoading).toBe(true);
-        expect(vm.fetchGroups).toHaveBeenCalledWith({
-          page: 2,
-          filterGroupsBy: null,
-          sortBy: null,
-          updatePagination: true,
-          archived: true,
-        });
-        setTimeout(() => {
-          expect(vm.isLoading).toBe(false);
-          expect($.scrollTo).toHaveBeenCalledWith(0);
-          expect(mergeUrlParams).toHaveBeenCalledWith({ page: 2 }, jasmine.any(String));
-          expect(window.history.replaceState).toHaveBeenCalledWith({
-            page: jasmine.any(String),
-          }, jasmine.any(String), jasmine.any(String));
-          expect(vm.updateGroups).toHaveBeenCalled();
-          done();
-        }, 0);
-      });
-    });
-
     describe('toggleChildren', () => {
       let groupItem;
 
diff --git a/spec/javascripts/groups/components/groups_spec.js b/spec/javascripts/groups/components/groups_spec.js
index 793c4909d89..514145c9921 100644
--- a/spec/javascripts/groups/components/groups_spec.js
+++ b/spec/javascripts/groups/components/groups_spec.js
@@ -3,7 +3,6 @@ import Vue from 'vue';
 import groupsComponent from '~/groups/components/groups.vue';
 import groupFolderComponent from '~/groups/components/group_folder.vue';
 import groupItemComponent from '~/groups/components/group_item.vue';
-import eventHub from '~/groups/event_hub';
 import mountComponent from 'spec/helpers/vue_mount_component_helper';
 import { mockGroups, mockPageInfo } from '../mock_data';
 
@@ -38,11 +37,9 @@ describe('GroupsComponent', () => {
 
   describe('methods', () => {
     describe('change', () => {
-      it('should emit `fetchPage` event when page is changed via pagination', () => {
-        spyOn(eventHub, '$emit').and.stub();
-
-        vm.change(2);
-        expect(eventHub.$emit).toHaveBeenCalledWith('fetchPage', 2, jasmine.any(Object), jasmine.any(Object), jasmine.any(Object));
+      it('should return the appropriate pagination results page url when provided a page number', () => {
+        const url = vm.change(2);
+        expect(url).toMatch(/^https?:\/\/localhost:\d+\/.*(?:\?.+&|\?)page=2(?:&|$)/);
       });
     });
   });