storj/web/satellite/tests/unit/common/Pagination.spec.ts

372 lines
12 KiB
TypeScript
Raw Normal View History

// Copyright (C) 2019 Storj Labs, Inc.
// See LICENSE for copying information.
import * as sinon from 'sinon';
2019-09-09 11:33:39 +01:00
import Pagination from '@/components/common/Pagination.vue';
2019-09-09 11:33:39 +01:00
import { mount, shallowMount } from '@vue/test-utils';
describe('Pagination.vue', () => {
it('renders correctly', () => {
const wrapper = shallowMount(Pagination);
expect(wrapper).toMatchSnapshot();
});
it('renders correctly with props', () => {
const wrapper = shallowMount(Pagination, {
propsData: {
totalPageCount: 10,
onPageClickCallback: () => new Promise(() => false),
},
mocks: {
$route: {
query: {
pageNumber: 2,
},
},
$router: {
replace: () => false,
},
},
});
expect(wrapper).toMatchSnapshot();
});
it('inits correctly with totalPageCount equals 10 and current pageNumber in first block', () => {
const wrapper = mount(Pagination, {
propsData: {
totalPageCount: 10,
onPageClickCallback: () => new Promise(() => false),
},
mocks: {
$route: {
query: {
pageNumber: 2,
},
},
$router: {
replace: () => false,
},
},
});
const wrapperData = wrapper.vm.$data;
expect(wrapperData.currentPageNumber).toBe(2);
expect(wrapperData.pagesArray.length).toBe(10);
expect(wrapperData.firstBlockPages.length).toBe(3);
expect(wrapperData.middleBlockPages.length).toBe(0);
expect(wrapperData.lastBlockPages.length).toBe(1);
expect(wrapper.findAll('span').at(1).classes().includes('selected')).toBe(true);
});
it('inits correctly with totalPageCount equals 10 and current pageNumber in middle block', () => {
const wrapper = shallowMount(Pagination, {
propsData: {
totalPageCount: 12,
onPageClickCallback: () => new Promise(() => false),
},
mocks: {
$route: {
query: {
pageNumber: 5,
},
},
$router: {
replace: () => false,
},
},
});
const wrapperData = wrapper.vm.$data;
expect(wrapperData.currentPageNumber).toBe(5);
expect(wrapperData.pagesArray.length).toBe(12);
expect(wrapperData.firstBlockPages.length).toBe(1);
expect(wrapperData.middleBlockPages.length).toBe(3);
expect(wrapperData.lastBlockPages.length).toBe(1);
});
it('inits correctly with totalPageCount equals 10 and current pageNumber in last block', () => {
const wrapper = shallowMount(Pagination, {
propsData: {
totalPageCount: 13,
onPageClickCallback: () => new Promise(() => false),
},
mocks: {
$route: {
query: {
pageNumber: 12,
},
},
$router: {
replace: () => false,
},
},
});
const wrapperData = wrapper.vm.$data;
expect(wrapperData.currentPageNumber).toBe(12);
expect(wrapperData.pagesArray.length).toBe(13);
expect(wrapperData.firstBlockPages.length).toBe(1);
expect(wrapperData.middleBlockPages.length).toBe(0);
expect(wrapperData.lastBlockPages.length).toBe(3);
});
it('inits correctly with totalPageCount equals 4 and no current pageNumber in query', () => {
const wrapper = shallowMount(Pagination, {
propsData: {
totalPageCount: 4,
onPageClickCallback: () => new Promise(() => false),
},
mocks: {
$route: {
query: {
pageNumber: null,
},
},
$router: {
replace: () => false,
},
},
});
const wrapperData = wrapper.vm.$data;
expect(wrapperData.currentPageNumber).toBe(1);
expect(wrapperData.pagesArray.length).toBe(4);
expect(wrapperData.firstBlockPages.length).toBe(4);
expect(wrapperData.middleBlockPages.length).toBe(0);
expect(wrapperData.lastBlockPages.length).toBe(0);
});
it('behaves correctly on page click', async () => {
const routerReplaceSpy = sinon.spy();
const callbackSpy = sinon.stub();
const wrapper = mount(Pagination, {
propsData: {
totalPageCount: 9,
onPageClickCallback: callbackSpy,
},
mocks: {
$route: {
query: {
pageNumber: null,
},
},
$router: {
replace: routerReplaceSpy,
},
},
});
const wrapperData = wrapper.vm.$data;
wrapper.findAll('span').at(2).trigger('click');
await expect(callbackSpy.callCount).toBe(1);
expect(routerReplaceSpy.callCount).toBe(1);
expect(wrapperData.currentPageNumber).toBe(3);
expect(wrapperData.firstBlockPages.length).toBe(1);
expect(wrapperData.middleBlockPages.length).toBe(3);
expect(wrapperData.lastBlockPages.length).toBe(1);
});
it('behaves correctly on next page button click', async () => {
const routerReplaceSpy = sinon.spy();
const callbackSpy = sinon.stub();
const wrapper = mount(Pagination, {
propsData: {
totalPageCount: 9,
onPageClickCallback: callbackSpy,
},
mocks: {
$route: {
query: {
pageNumber: null,
},
},
$router: {
replace: routerReplaceSpy,
},
},
});
const wrapperData = wrapper.vm.$data;
wrapper.findAll('.pagination-container__button').at(1).trigger('click');
await expect(callbackSpy.callCount).toBe(1);
expect(routerReplaceSpy.callCount).toBe(1);
expect(wrapperData.currentPageNumber).toBe(2);
expect(wrapperData.firstBlockPages.length).toBe(3);
expect(wrapperData.middleBlockPages.length).toBe(0);
expect(wrapperData.lastBlockPages.length).toBe(1);
});
it('behaves correctly on previous page button click', async () => {
const routerReplaceSpy = sinon.spy();
const callbackSpy = sinon.stub();
const wrapper = mount(Pagination, {
propsData: {
totalPageCount: 9,
onPageClickCallback: callbackSpy,
},
mocks: {
$route: {
query: {
pageNumber: 8,
},
},
$router: {
replace: routerReplaceSpy,
},
},
});
const wrapperData = wrapper.vm.$data;
wrapper.findAll('.pagination-container__button').at(0).trigger('click');
await expect(callbackSpy.callCount).toBe(1);
expect(routerReplaceSpy.callCount).toBe(2);
expect(wrapperData.currentPageNumber).toBe(7);
expect(wrapperData.firstBlockPages.length).toBe(1);
expect(wrapperData.middleBlockPages.length).toBe(3);
expect(wrapperData.lastBlockPages.length).toBe(1);
});
it('behaves correctly on previous page button click when current is 1', async () => {
const routerReplaceSpy = sinon.spy();
const callbackSpy = sinon.stub();
const wrapper = mount(Pagination, {
propsData: {
totalPageCount: 9,
onPageClickCallback: callbackSpy,
},
mocks: {
$route: {
query: {
pageNumber: null,
},
},
$router: {
replace: routerReplaceSpy,
},
},
});
const wrapperData = wrapper.vm.$data;
wrapper.findAll('.pagination-container__button').at(0).trigger('click');
await expect(callbackSpy.callCount).toBe(0);
expect(routerReplaceSpy.callCount).toBe(0);
expect(wrapperData.currentPageNumber).toBe(1);
expect(wrapperData.firstBlockPages.length).toBe(3);
expect(wrapperData.middleBlockPages.length).toBe(0);
expect(wrapperData.lastBlockPages.length).toBe(1);
});
it('behaves correctly on next page button click when current is last', async () => {
const routerReplaceSpy = sinon.spy();
const callbackSpy = sinon.stub();
const wrapper = mount(Pagination, {
propsData: {
totalPageCount: 9,
onPageClickCallback: callbackSpy,
},
mocks: {
$route: {
query: {
pageNumber: 9,
},
},
$router: {
replace: routerReplaceSpy,
},
},
});
const wrapperData = wrapper.vm.$data;
wrapper.findAll('.pagination-container__button').at(1).trigger('click');
await expect(callbackSpy.callCount).toBe(0);
expect(routerReplaceSpy.callCount).toBe(1);
expect(wrapperData.currentPageNumber).toBe(9);
expect(wrapperData.firstBlockPages.length).toBe(1);
expect(wrapperData.middleBlockPages.length).toBe(0);
expect(wrapperData.lastBlockPages.length).toBe(3);
});
it('should reset current page index to 1', async () => {
const wrapper = shallowMount(Pagination, {
propsData: {
totalPageCount: 4,
onPageClickCallback: () => Promise.resolve({}),
},
mocks: {
$route: {
query: {
pageNumber: null,
},
},
$router: {
replace: () => false,
},
},
});
await wrapper.vm.nextPage();
expect(wrapper.vm.$data.currentPageNumber).toBe(2);
wrapper.vm.resetPageIndex();
const wrapperData = wrapper.vm.$data;
expect(wrapperData.currentPageNumber).toBe(1);
expect(wrapperData.pagesArray.length).toBe(4);
});
it('should completely reinitialize Pagination on totalPageCount change', async () => {
const wrapper = shallowMount(Pagination, {
propsData: {
totalPageCount: 4,
onPageClickCallback: () => Promise.resolve({}),
},
mocks: {
$route: {
query: {
pageNumber: null,
},
},
$router: {
replace: () => false,
},
},
});
await wrapper.vm.nextPage();
expect(wrapper.vm.$data.currentPageNumber).toBe(2);
wrapper.setProps({totalPageCount: 7});
const wrapperData = wrapper.vm.$data;
expect(wrapperData.currentPageNumber).toBe(1);
expect(wrapperData.pagesArray.length).toBe(7);
});
});