add change page logic to pagination component - add first test for pagination
This commit is contained in:
parent
b5cd430a6c
commit
bff8e5bad9
3 changed files with 74 additions and 21 deletions
|
@ -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;
|
||||
|
|
|
@ -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'
|
||||
>
|
||||
|
|
39
spec/javascripts/vue_pagination/pagination_spec.js.es6
Normal file
39
spec/javascripts/vue_pagination/pagination_spec.js.es6
Normal file
|
@ -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');
|
||||
});
|
||||
});
|
Loading…
Reference in a new issue