From bff8e5bad99ccf515133a82576ca38165de0624c Mon Sep 17 00:00:00 2001
From: Regis <boudinot.regis@yahoo.com>
Date: Thu, 8 Dec 2016 17:37:00 -0700
Subject: [PATCH] add change page logic to pagination component - add first
 test for pagination

---
 .../javascripts/vue_pagination/index.js.es6   | 32 ++++++++++++++-
 .../vue_pipelines_index/pipelines.js.es6      | 24 ++----------
 .../vue_pagination/pagination_spec.js.es6     | 39 +++++++++++++++++++
 3 files changed, 74 insertions(+), 21 deletions(-)
 create mode 100644 spec/javascripts/vue_pagination/pagination_spec.js.es6

diff --git a/app/assets/javascripts/vue_pagination/index.js.es6 b/app/assets/javascripts/vue_pagination/index.js.es6
index 961f7101fb1..ed2357b5d9e 100644
--- a/app/assets/javascripts/vue_pagination/index.js.es6
+++ b/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;
diff --git a/app/assets/javascripts/vue_pipelines_index/pipelines.js.es6 b/app/assets/javascripts/vue_pipelines_index/pipelines.js.es6
index 2c18b6cc7e5..ac889bb2d9f 100644
--- a/app/assets/javascripts/vue_pipelines_index/pipelines.js.es6
+++ b/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'
         >
diff --git a/spec/javascripts/vue_pagination/pagination_spec.js.es6 b/spec/javascripts/vue_pagination/pagination_spec.js.es6
new file mode 100644
index 00000000000..201295ec97e
--- /dev/null
+++ b/spec/javascripts/vue_pagination/pagination_spec.js.es6
@@ -0,0 +1,39 @@
+//= 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');
+  });
+});