debian-mirror-gitlab/spec/javascripts/vue_shared/components/table_pagination_spec.js

353 lines
8.8 KiB
JavaScript
Raw Normal View History

2017-08-17 22:00:37 +05:30
import Vue from 'vue';
2017-09-10 17:25:29 +05:30
import paginationComp from '~/vue_shared/components/table_pagination.vue';
2017-08-17 22:00:37 +05:30
describe('Pagination component', () => {
let component;
let PaginationComponent;
2017-09-10 17:25:29 +05:30
let spy;
2018-12-05 23:21:45 +05:30
let mountComponent;
2017-08-17 22:00:37 +05:30
beforeEach(() => {
2017-09-10 17:25:29 +05:30
spy = jasmine.createSpy('spy');
2017-08-17 22:00:37 +05:30
PaginationComponent = Vue.extend(paginationComp);
2018-12-13 13:39:08 +05:30
mountComponent = function(props) {
2017-09-10 17:25:29 +05:30
return new PaginationComponent({
propsData: props,
}).$mount();
};
2017-08-17 22:00:37 +05:30
});
2017-09-10 17:25:29 +05:30
describe('render', () => {
2018-03-17 18:26:18 +05:30
it('should not render anything', () => {
2018-12-05 23:21:45 +05:30
component = mountComponent({
2018-03-17 18:26:18 +05:30
pageInfo: {
2019-05-18 00:54:41 +05:30
nextPage: NaN,
2018-03-17 18:26:18 +05:30
page: 1,
perPage: 20,
2019-05-18 00:54:41 +05:30
previousPage: NaN,
2018-03-17 18:26:18 +05:30
total: 15,
totalPages: 1,
},
change: spy,
});
expect(component.$el.childNodes.length).toEqual(0);
});
2017-09-10 17:25:29 +05:30
describe('prev button', () => {
it('should be disabled and non clickable', () => {
2018-12-05 23:21:45 +05:30
component = mountComponent({
2017-09-10 17:25:29 +05:30
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-11-08 19:23:39 +05:30
).toEqual(true);
2017-09-10 17:25:29 +05:30
2019-05-18 00:54:41 +05:30
component.$el.querySelector('.js-previous-button .page-link').click();
expect(spy).not.toHaveBeenCalled();
});
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();
2017-09-10 17:25:29 +05:30
expect(spy).not.toHaveBeenCalled();
});
it('should be enabled and clickable', () => {
2018-12-05 23:21:45 +05:30
component = mountComponent({
2017-09-10 17:25:29 +05:30
pageInfo: {
nextPage: 3,
page: 2,
perPage: 20,
previousPage: 1,
total: 84,
totalPages: 5,
},
change: spy,
});
2019-05-18 00:54:41 +05:30
component.$el.querySelector('.js-previous-button .page-link').click();
expect(spy).toHaveBeenCalledWith(1);
});
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();
2018-12-13 13:39:08 +05:30
2017-09-10 17:25:29 +05:30
expect(spy).toHaveBeenCalledWith(1);
});
});
describe('first button', () => {
it('should call the change callback with the first page', () => {
2018-12-05 23:21:45 +05:30
component = mountComponent({
2017-09-10 17:25:29 +05:30
pageInfo: {
nextPage: 3,
page: 2,
perPage: 20,
previousPage: 1,
total: 84,
totalPages: 5,
},
change: spy,
});
2019-05-18 00:54:41 +05:30
const button = component.$el.querySelector('.js-first-button .page-link');
expect(button.textContent.trim()).toEqual('« First');
button.click();
expect(spy).toHaveBeenCalledWith(1);
});
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');
2017-09-10 17:25:29 +05:30
expect(button.textContent.trim()).toEqual('« First');
button.click();
expect(spy).toHaveBeenCalledWith(1);
});
});
describe('last button', () => {
it('should call the change callback with the last page', () => {
2018-12-05 23:21:45 +05:30
component = mountComponent({
2017-09-10 17:25:29 +05:30
pageInfo: {
nextPage: 3,
page: 2,
perPage: 20,
previousPage: 1,
total: 84,
totalPages: 5,
},
change: spy,
});
2019-05-18 00:54:41 +05:30
const button = component.$el.querySelector('.js-last-button .page-link');
2017-09-10 17:25:29 +05:30
expect(button.textContent.trim()).toEqual('Last »');
button.click();
expect(spy).toHaveBeenCalledWith(5);
});
2019-05-18 00:54:41 +05:30
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-09-10 17:25:29 +05:30
});
describe('next button', () => {
it('should be disabled and non clickable', () => {
2018-12-05 23:21:45 +05:30
component = mountComponent({
2017-09-10 17:25:29 +05:30
pageInfo: {
2019-05-18 00:54:41 +05:30
nextPage: NaN,
2017-09-10 17:25:29 +05:30
page: 5,
perPage: 20,
2019-05-18 00:54:41 +05:30
previousPage: 4,
2017-09-10 17:25:29 +05:30
total: 84,
totalPages: 5,
},
change: spy,
});
2018-12-13 13:39:08 +05:30
expect(component.$el.querySelector('.js-next-button').textContent.trim()).toEqual('Next');
2017-09-10 17:25:29 +05:30
2019-05-18 00:54:41 +05:30
component.$el.querySelector('.js-next-button .page-link').click();
expect(spy).not.toHaveBeenCalled();
});
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();
2017-09-10 17:25:29 +05:30
expect(spy).not.toHaveBeenCalled();
});
it('should be enabled and clickable', () => {
2018-12-05 23:21:45 +05:30
component = mountComponent({
2017-09-10 17:25:29 +05:30
pageInfo: {
nextPage: 4,
page: 3,
perPage: 20,
previousPage: 2,
total: 84,
totalPages: 5,
},
change: spy,
});
2019-05-18 00:54:41 +05:30
component.$el.querySelector('.js-next-button .page-link').click();
expect(spy).toHaveBeenCalledWith(4);
});
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();
2017-09-10 17:25:29 +05:30
expect(spy).toHaveBeenCalledWith(4);
});
});
describe('numbered buttons', () => {
it('should render 5 pages', () => {
2018-12-05 23:21:45 +05:30
component = mountComponent({
2017-09-10 17:25:29 +05:30
pageInfo: {
nextPage: 4,
page: 3,
perPage: 20,
previousPage: 2,
total: 84,
totalPages: 5,
},
change: spy,
});
expect(component.$el.querySelectorAll('.page').length).toEqual(5);
});
2019-05-18 00:54:41 +05:30
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-09-10 17:25:29 +05:30
});
2019-05-18 00:54:41 +05:30
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-09-10 17:25:29 +05:30
});
2017-08-17 22:00:37 +05:30
2019-05-18 00:54:41 +05:30
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-09-10 17:25:29 +05:30
});
2017-08-17 22:00:37 +05:30
});
});