add change page logic to pagination component - add first test for pagination

app/assets/javascripts/vue_pagination/index.js.es6

@@ -9,11 +9,41 @@
   const FIRST = '<< First';
   const LAST = 'Last >>';
 
+  const getParameterByName = (name) => {
+    const url = window.location.href;
+    name = name.replace(/[[\]]/g, '\\$&');
+    const regex = new RegExp(`[?&]${name}(=([^&#]*)|&|#|$)`);
+    const results = regex.exec(url);
+    if (!results) return null;
+    if (!results[2]) return '';
+    return decodeURIComponent(results[2].replace(/\+/g, ' '));
+  };
+
   gl.VueGlPagination = Vue.extend({
     props: [
-      'changepage',
+      'change',
       'pageInfo',
     ],
+    methods: {
+      changepage(e) {
+        let pagenum = this.pageInfo.page;
+        let apiScope = getParameterByName('scope');
+
+        if (!apiScope) apiScope = 'all';
+
+        const text = e.target.innerText;
+        const { totalPages, nextPage, previousPage } = this.pageInfo;
+
+        if (text === SPREAD) return;
+        if (/^-?[\d.]+(?:e-?\d+)?$/.test(text)) pagenum = +text;
+        if (text === LAST) pagenum = totalPages;
+        if (text === NEXT) pagenum = nextPage;
+        if (text === PREV) pagenum = previousPage;
+        if (text === FIRST) pagenum = 1;
+
+        this.change(pagenum, apiScope);
+      },
+    },
     computed: {
       prev() {
         return this.pageInfo.previousPage;

app/assets/javascripts/vue_pipelines_index/pipelines.js.es6

@@ -2,12 +2,6 @@
 /* eslint-disable no-param-reassign, no-bitwise*/
 
 ((gl) => {
-  const SPREAD = '...';
-  const PREV = 'Prev';
-  const NEXT = 'Next';
-  const FIRST = '<< First';
-  const LAST = 'Last >>';
-
   const getParameterByName = (name) => {
     const url = window.location.href;
     name = name.replace(/[[\]]/g, '\\$&');
@@ -51,21 +45,11 @@
       this.store.fetchDataLoop.call(this, Vue, this.pagenum, this.scope, this.apiScope);
     },
     methods: {
-      changepage(e) {
-        const scope = getParameterByName('scope');
-        if (scope) this.apiScope = scope;
-        const text = e.target.innerText;
-        const { totalPages, nextPage, previousPage } = this.pageInfo;
-        if (text === SPREAD) return;
-        if (/^-?[\d.]+(?:e-?\d+)?$/.test(text)) this.pagenum = +text;
-        if (text === LAST) this.pagenum = totalPages;
-        if (text === NEXT) this.pagenum = nextPage;
-        if (text === PREV) this.pagenum = previousPage;
-        if (text === FIRST) this.pagenum = 1;
-        window.history.pushState({}, null, `?scope=${this.apiScope}&p=${this.pagenum}`);
+      change(pagenum, apiScope) {
+        window.history.pushState({}, null, `?scope=${apiScope}&p=${pagenum}`);
         clearInterval(this.timeLoopInterval);
         this.pageRequest = true;
-        this.store.fetchDataLoop.call(this, Vue, this.pagenum, this.scope, this.apiScope);
+        this.store.fetchDataLoop.call(this, Vue, pagenum, this.scope, apiScope);
       },
       author(pipeline) {
         if (!pipeline.commit) return ({ avatar_url: '', web_url: '', username: '' });
@@ -129,7 +113,7 @@
         <gl-pagination
           v-if='pageInfo.total > pageInfo.perPage'
           :pagenum='pagenum'
-          :changepage='changepage'
+          :change='change'
           :count='count.all'
           :pageInfo='pageInfo'
         >

spec/javascripts/vue_pagination/pagination_spec.js.es6

+//= require vue
+//= require vue_pagination/index
+
+describe('Pagination component', () => {
+  let component;
+
+  const changeChanges = {
+    one: '',
+    two: '',
+  };
+
+  const change = (one, two) => {
+    changeChanges.one = one;
+    changeChanges.two = two;
+  };
+
+  it('should render', () => {
+    fixture.set('<div class="test-pagination-container"></div>');
+
+    component = new window.gl.VueGlPagination({
+      el: document.querySelector('.test-pagination-container'),
+      propsData: {
+        pageInfo: {
+          totalPages: 10,
+          nextPage: 2,
+          previousPage: '',
+        },
+        change,
+      },
+    });
+
+    expect(component.$el.classList).toContain('gl-pagination');
+
+    component.changepage({ target: { innerText: '1' } });
+
+    expect(changeChanges.one).toEqual(1);
+    expect(changeChanges.two).toEqual('all');
+  });
+});