2017-03-17 13:30:32 -04:00
|
|
|
import Vue from 'vue';
|
2017-05-10 04:00:50 -04:00
|
|
|
import paginationComp from '~/vue_shared/components/table_pagination.vue';
|
2016-12-08 19:37:00 -05:00
|
|
|
|
|
|
|
describe('Pagination component', () => {
|
|
|
|
let component;
|
2017-03-17 13:30:32 -04:00
|
|
|
let PaginationComponent;
|
2017-07-07 17:23:13 -04:00
|
|
|
let spy;
|
2018-09-27 11:40:24 -04:00
|
|
|
let mountComponent;
|
2016-12-08 19:37:00 -05:00
|
|
|
|
2017-03-17 13:30:32 -04:00
|
|
|
beforeEach(() => {
|
2017-07-07 17:23:13 -04:00
|
|
|
spy = jasmine.createSpy('spy');
|
2017-03-17 13:30:32 -04:00
|
|
|
PaginationComponent = Vue.extend(paginationComp);
|
2016-12-13 12:38:51 -05:00
|
|
|
|
2018-10-17 03:13:26 -04:00
|
|
|
mountComponent = function(props) {
|
2017-07-07 17:23:13 -04:00
|
|
|
return new PaginationComponent({
|
|
|
|
propsData: props,
|
|
|
|
}).$mount();
|
|
|
|
};
|
2016-12-13 12:52:07 -05:00
|
|
|
});
|
2016-12-13 12:38:51 -05:00
|
|
|
|
2017-07-07 17:23:13 -04:00
|
|
|
describe('render', () => {
|
2017-12-18 18:08:28 -05:00
|
|
|
it('should not render anything', () => {
|
2018-09-27 11:40:24 -04:00
|
|
|
component = mountComponent({
|
2017-12-18 18:08:28 -05:00
|
|
|
pageInfo: {
|
2019-02-27 08:32:08 -05:00
|
|
|
nextPage: NaN,
|
2017-12-18 18:08:28 -05:00
|
|
|
page: 1,
|
|
|
|
perPage: 20,
|
2019-02-27 08:32:08 -05:00
|
|
|
previousPage: NaN,
|
2017-12-18 18:08:28 -05:00
|
|
|
total: 15,
|
|
|
|
totalPages: 1,
|
|
|
|
},
|
|
|
|
change: spy,
|
|
|
|
});
|
|
|
|
|
2018-01-08 20:06:27 -05:00
|
|
|
expect(component.$el.childNodes.length).toEqual(0);
|
2017-12-18 18:08:28 -05:00
|
|
|
});
|
|
|
|
|
2017-07-07 17:23:13 -04:00
|
|
|
describe('prev button', () => {
|
|
|
|
it('should be disabled and non clickable', () => {
|
2018-09-27 11:40:24 -04:00
|
|
|
component = mountComponent({
|
2017-07-07 17:23:13 -04:00
|
|
|
pageInfo: {
|
|
|
|
nextPage: 2,
|
|
|
|
page: 1,
|
|
|
|
perPage: 20,
|
|
|
|
previousPage: NaN,
|
|
|
|
total: 84,
|
|
|
|
totalPages: 5,
|
|
|
|
},
|
|
|
|
change: spy,
|
|
|
|
});
|
|
|
|
|
|
|
|
expect(
|
|
|
|
component.$el.querySelector('.js-previous-button').classList.contains('disabled'),
|
2018-06-05 12:38:22 -04:00
|
|
|
).toEqual(true);
|
2017-07-07 17:23:13 -04:00
|
|
|
|
2019-02-27 05:16:46 -05:00
|
|
|
component.$el.querySelector('.js-previous-button .page-link').click();
|
2017-07-07 17:23:13 -04:00
|
|
|
|
|
|
|
expect(spy).not.toHaveBeenCalled();
|
|
|
|
});
|
|
|
|
|
2019-02-27 08:32:08 -05:00
|
|
|
it('should be disabled and non clickable when total and totalPages are NaN', () => {
|
|
|
|
component = mountComponent({
|
|
|
|
pageInfo: {
|
|
|
|
nextPage: 2,
|
|
|
|
page: 1,
|
|
|
|
perPage: 20,
|
|
|
|
previousPage: NaN,
|
|
|
|
total: NaN,
|
|
|
|
totalPages: NaN,
|
|
|
|
},
|
|
|
|
change: spy,
|
|
|
|
});
|
|
|
|
|
|
|
|
expect(
|
|
|
|
component.$el.querySelector('.js-previous-button').classList.contains('disabled'),
|
|
|
|
).toEqual(true);
|
|
|
|
|
|
|
|
component.$el.querySelector('.js-previous-button .page-link').click();
|
|
|
|
|
|
|
|
expect(spy).not.toHaveBeenCalled();
|
|
|
|
});
|
|
|
|
|
2017-07-07 17:23:13 -04:00
|
|
|
it('should be enabled and clickable', () => {
|
2018-09-27 11:40:24 -04:00
|
|
|
component = mountComponent({
|
2017-07-07 17:23:13 -04:00
|
|
|
pageInfo: {
|
|
|
|
nextPage: 3,
|
|
|
|
page: 2,
|
|
|
|
perPage: 20,
|
|
|
|
previousPage: 1,
|
|
|
|
total: 84,
|
|
|
|
totalPages: 5,
|
|
|
|
},
|
|
|
|
change: spy,
|
|
|
|
});
|
|
|
|
|
2019-02-27 05:16:46 -05:00
|
|
|
component.$el.querySelector('.js-previous-button .page-link').click();
|
2018-10-09 14:03:09 -04:00
|
|
|
|
2017-07-07 17:23:13 -04:00
|
|
|
expect(spy).toHaveBeenCalledWith(1);
|
|
|
|
});
|
2019-02-27 08:32:08 -05:00
|
|
|
|
|
|
|
it('should be enabled and clickable when total and totalPages are NaN', () => {
|
|
|
|
component = mountComponent({
|
|
|
|
pageInfo: {
|
|
|
|
nextPage: 3,
|
|
|
|
page: 2,
|
|
|
|
perPage: 20,
|
|
|
|
previousPage: 1,
|
|
|
|
total: NaN,
|
|
|
|
totalPages: NaN,
|
|
|
|
},
|
|
|
|
change: spy,
|
|
|
|
});
|
|
|
|
|
|
|
|
component.$el.querySelector('.js-previous-button .page-link').click();
|
|
|
|
|
|
|
|
expect(spy).toHaveBeenCalledWith(1);
|
|
|
|
});
|
2017-07-07 17:23:13 -04:00
|
|
|
});
|
|
|
|
|
|
|
|
describe('first button', () => {
|
|
|
|
it('should call the change callback with the first page', () => {
|
2018-09-27 11:40:24 -04:00
|
|
|
component = mountComponent({
|
2017-07-07 17:23:13 -04:00
|
|
|
pageInfo: {
|
|
|
|
nextPage: 3,
|
|
|
|
page: 2,
|
|
|
|
perPage: 20,
|
|
|
|
previousPage: 1,
|
|
|
|
total: 84,
|
|
|
|
totalPages: 5,
|
|
|
|
},
|
|
|
|
change: spy,
|
|
|
|
});
|
|
|
|
|
2019-02-27 05:16:46 -05:00
|
|
|
const button = component.$el.querySelector('.js-first-button .page-link');
|
2017-07-07 17:23:13 -04:00
|
|
|
|
|
|
|
expect(button.textContent.trim()).toEqual('« First');
|
|
|
|
|
|
|
|
button.click();
|
|
|
|
|
|
|
|
expect(spy).toHaveBeenCalledWith(1);
|
|
|
|
});
|
2019-02-27 08:32:08 -05:00
|
|
|
|
|
|
|
it('should call the change callback with the first page when total and totalPages are NaN', () => {
|
|
|
|
component = mountComponent({
|
|
|
|
pageInfo: {
|
|
|
|
nextPage: 3,
|
|
|
|
page: 2,
|
|
|
|
perPage: 20,
|
|
|
|
previousPage: 1,
|
|
|
|
total: NaN,
|
|
|
|
totalPages: NaN,
|
|
|
|
},
|
|
|
|
change: spy,
|
|
|
|
});
|
|
|
|
|
|
|
|
const button = component.$el.querySelector('.js-first-button .page-link');
|
|
|
|
|
|
|
|
expect(button.textContent.trim()).toEqual('« First');
|
|
|
|
|
|
|
|
button.click();
|
|
|
|
|
|
|
|
expect(spy).toHaveBeenCalledWith(1);
|
|
|
|
});
|
2017-07-07 17:23:13 -04:00
|
|
|
});
|
|
|
|
|
|
|
|
describe('last button', () => {
|
|
|
|
it('should call the change callback with the last page', () => {
|
2018-09-27 11:40:24 -04:00
|
|
|
component = mountComponent({
|
2017-07-07 17:23:13 -04:00
|
|
|
pageInfo: {
|
|
|
|
nextPage: 3,
|
|
|
|
page: 2,
|
|
|
|
perPage: 20,
|
|
|
|
previousPage: 1,
|
|
|
|
total: 84,
|
|
|
|
totalPages: 5,
|
|
|
|
},
|
|
|
|
change: spy,
|
|
|
|
});
|
|
|
|
|
2019-02-27 05:16:46 -05:00
|
|
|
const button = component.$el.querySelector('.js-last-button .page-link');
|
2017-07-07 17:23:13 -04:00
|
|
|
|
|
|
|
expect(button.textContent.trim()).toEqual('Last »');
|
|
|
|
|
|
|
|
button.click();
|
|
|
|
|
|
|
|
expect(spy).toHaveBeenCalledWith(5);
|
|
|
|
});
|
2019-02-27 08:32:08 -05:00
|
|
|
|
|
|
|
it('should not render', () => {
|
|
|
|
component = mountComponent({
|
|
|
|
pageInfo: {
|
|
|
|
nextPage: 3,
|
|
|
|
page: 2,
|
|
|
|
perPage: 20,
|
|
|
|
previousPage: 1,
|
|
|
|
total: NaN,
|
|
|
|
totalPages: NaN,
|
|
|
|
},
|
|
|
|
change: spy,
|
|
|
|
});
|
|
|
|
|
|
|
|
expect(component.$el.querySelector('.js-last-button .page-link')).toBeNull();
|
|
|
|
});
|
2017-07-07 17:23:13 -04:00
|
|
|
});
|
|
|
|
|
|
|
|
describe('next button', () => {
|
|
|
|
it('should be disabled and non clickable', () => {
|
2018-09-27 11:40:24 -04:00
|
|
|
component = mountComponent({
|
2017-07-07 17:23:13 -04:00
|
|
|
pageInfo: {
|
2019-02-27 08:32:08 -05:00
|
|
|
nextPage: NaN,
|
2017-07-07 17:23:13 -04:00
|
|
|
page: 5,
|
|
|
|
perPage: 20,
|
2019-02-27 08:32:08 -05:00
|
|
|
previousPage: 4,
|
2017-07-07 17:23:13 -04:00
|
|
|
total: 84,
|
|
|
|
totalPages: 5,
|
|
|
|
},
|
|
|
|
change: spy,
|
|
|
|
});
|
|
|
|
|
2018-10-17 03:13:26 -04:00
|
|
|
expect(component.$el.querySelector('.js-next-button').textContent.trim()).toEqual('Next');
|
2017-07-07 17:23:13 -04:00
|
|
|
|
2019-02-27 05:16:46 -05:00
|
|
|
component.$el.querySelector('.js-next-button .page-link').click();
|
2017-07-07 17:23:13 -04:00
|
|
|
|
|
|
|
expect(spy).not.toHaveBeenCalled();
|
|
|
|
});
|
|
|
|
|
2019-02-27 08:32:08 -05:00
|
|
|
it('should be disabled and non clickable when total and totalPages are NaN', () => {
|
|
|
|
component = mountComponent({
|
|
|
|
pageInfo: {
|
|
|
|
nextPage: NaN,
|
|
|
|
page: 5,
|
|
|
|
perPage: 20,
|
|
|
|
previousPage: 4,
|
|
|
|
total: NaN,
|
|
|
|
totalPages: NaN,
|
|
|
|
},
|
|
|
|
change: spy,
|
|
|
|
});
|
|
|
|
|
|
|
|
expect(component.$el.querySelector('.js-next-button').textContent.trim()).toEqual('Next');
|
|
|
|
|
|
|
|
component.$el.querySelector('.js-next-button .page-link').click();
|
|
|
|
|
|
|
|
expect(spy).not.toHaveBeenCalled();
|
|
|
|
});
|
|
|
|
|
2017-07-07 17:23:13 -04:00
|
|
|
it('should be enabled and clickable', () => {
|
2018-09-27 11:40:24 -04:00
|
|
|
component = mountComponent({
|
2017-07-07 17:23:13 -04:00
|
|
|
pageInfo: {
|
|
|
|
nextPage: 4,
|
|
|
|
page: 3,
|
|
|
|
perPage: 20,
|
|
|
|
previousPage: 2,
|
|
|
|
total: 84,
|
|
|
|
totalPages: 5,
|
|
|
|
},
|
|
|
|
change: spy,
|
|
|
|
});
|
|
|
|
|
2019-02-27 05:16:46 -05:00
|
|
|
component.$el.querySelector('.js-next-button .page-link').click();
|
2017-07-07 17:23:13 -04:00
|
|
|
|
|
|
|
expect(spy).toHaveBeenCalledWith(4);
|
|
|
|
});
|
2019-02-27 08:32:08 -05:00
|
|
|
|
|
|
|
it('should be enabled and clickable when total and totalPages are NaN', () => {
|
|
|
|
component = mountComponent({
|
|
|
|
pageInfo: {
|
|
|
|
nextPage: 4,
|
|
|
|
page: 3,
|
|
|
|
perPage: 20,
|
|
|
|
previousPage: 2,
|
|
|
|
total: NaN,
|
|
|
|
totalPages: NaN,
|
|
|
|
},
|
|
|
|
change: spy,
|
|
|
|
});
|
|
|
|
|
|
|
|
component.$el.querySelector('.js-next-button .page-link').click();
|
|
|
|
|
|
|
|
expect(spy).toHaveBeenCalledWith(4);
|
|
|
|
});
|
2017-07-07 17:23:13 -04:00
|
|
|
});
|
|
|
|
|
|
|
|
describe('numbered buttons', () => {
|
|
|
|
it('should render 5 pages', () => {
|
2018-09-27 11:40:24 -04:00
|
|
|
component = mountComponent({
|
2017-07-07 17:23:13 -04:00
|
|
|
pageInfo: {
|
|
|
|
nextPage: 4,
|
|
|
|
page: 3,
|
|
|
|
perPage: 20,
|
|
|
|
previousPage: 2,
|
|
|
|
total: 84,
|
|
|
|
totalPages: 5,
|
|
|
|
},
|
|
|
|
change: spy,
|
|
|
|
});
|
|
|
|
|
|
|
|
expect(component.$el.querySelectorAll('.page').length).toEqual(5);
|
|
|
|
});
|
2019-02-27 08:32:08 -05:00
|
|
|
|
|
|
|
it('should not render any page', () => {
|
|
|
|
component = mountComponent({
|
|
|
|
pageInfo: {
|
|
|
|
nextPage: 4,
|
|
|
|
page: 3,
|
|
|
|
perPage: 20,
|
|
|
|
previousPage: 2,
|
|
|
|
total: NaN,
|
|
|
|
totalPages: NaN,
|
|
|
|
},
|
|
|
|
change: spy,
|
|
|
|
});
|
|
|
|
|
|
|
|
expect(component.$el.querySelectorAll('.page').length).toEqual(0);
|
|
|
|
});
|
2017-07-07 17:23:13 -04:00
|
|
|
});
|
|
|
|
|
2019-02-27 08:32:08 -05:00
|
|
|
describe('spread operator', () => {
|
|
|
|
it('should render', () => {
|
|
|
|
component = mountComponent({
|
|
|
|
pageInfo: {
|
|
|
|
nextPage: 4,
|
|
|
|
page: 3,
|
|
|
|
perPage: 20,
|
|
|
|
previousPage: 2,
|
|
|
|
total: 84,
|
|
|
|
totalPages: 10,
|
|
|
|
},
|
|
|
|
change: spy,
|
|
|
|
});
|
|
|
|
|
|
|
|
expect(component.$el.querySelector('.separator').textContent.trim()).toEqual('...');
|
2017-07-07 17:23:13 -04:00
|
|
|
});
|
2016-12-16 18:31:28 -05:00
|
|
|
|
2019-02-27 08:32:08 -05:00
|
|
|
it('should not render', () => {
|
|
|
|
component = mountComponent({
|
|
|
|
pageInfo: {
|
|
|
|
nextPage: 4,
|
|
|
|
page: 3,
|
|
|
|
perPage: 20,
|
|
|
|
previousPage: 2,
|
|
|
|
total: NaN,
|
|
|
|
totalPages: NaN,
|
|
|
|
},
|
|
|
|
change: spy,
|
|
|
|
});
|
|
|
|
|
|
|
|
expect(component.$el.querySelector('.separator')).toBeNull();
|
|
|
|
});
|
2017-07-07 17:23:13 -04:00
|
|
|
});
|
2016-12-16 18:31:28 -05:00
|
|
|
});
|
|
|
|
});
|