react-responsive-pagination
Version:
React component for responsive pagination
190 lines (189 loc) • 7.59 kB
JavaScript
import { test, describe } from 'node:test';
import { deepEqual, equal } from 'node:assert';
import { narrowToWideCompositions } from "./index.js";
import { dropNavThenEllipsis } from "../narrowBehaviour.js";
import { shorthandOf } from "../compositionItem.test.js";
const defaultParams = { narrowBehaviour: undefined, omitNav: false };
describe('narrowToWideCompositions - total', () => {
test('outputs nothing for total < 1', () => {
const compositions = narrowToWideCompositions({
...defaultParams,
current: 5,
total: 0,
});
equal(compositions.next().done, true);
});
});
describe('narrowToWideCompositions - current', () => {
test('clamps current up to 1', () => {
const narrowestComposition = narrowToWideCompositions({
...defaultParams,
current: 0,
total: 5,
}).next().value;
const expected = ['<', '*1', 2, '…R', 5, '>2'];
deepEqual(shorthandOf(narrowestComposition), expected);
});
test('clamps current down to total', () => {
const narrowestComposition = narrowToWideCompositions({
...defaultParams,
current: 7,
total: 5,
}).next().value;
const expected = ['<4', 1, '…L', 4, '*5', '>'];
deepEqual(shorthandOf(narrowestComposition), expected);
});
});
describe('narrowToWideCompositions - smallest compositions', () => {
test('outputs a number either side of the active number', () => {
const narrowestComposition = narrowToWideCompositions({
...defaultParams,
current: 5,
total: 10,
}).next().value;
const expected = ['<4', 1, '…L', 4, '*5', 6, '…R', 10, '>6'];
deepEqual(shorthandOf(narrowestComposition), expected);
});
test('will not use ellipsis to replace a single number at the start', () => {
const narrowestComposition = narrowToWideCompositions({
...defaultParams,
current: 4,
total: 10,
}).next().value;
const expected = ['<3', 1, 2, 3, '*4', 5, '…R', 10, '>5'];
deepEqual(shorthandOf(narrowestComposition), expected);
});
test('will not use ellipsis to replace a single number at the end', () => {
const narrowestComposition = narrowToWideCompositions({
...defaultParams,
current: 7,
total: 10,
}).next().value;
const expected = ['<6', 1, '…L', 6, '*7', 8, 9, 10, '>8'];
deepEqual(shorthandOf(narrowestComposition), expected);
});
test('will not use ellipsis to replace a single number at both side', () => {
const narrowestComposition = narrowToWideCompositions({
...defaultParams,
current: 4,
total: 7,
}).next().value;
const expected = ['<3', 1, 2, 3, '*4', 5, 6, 7, '>5'];
deepEqual(shorthandOf(narrowestComposition), expected);
});
});
describe('narrowToWideCompositions - small range compositions', () => {
test('handles 1 page correctly', () => {
const narrowestComposition = narrowToWideCompositions({
...defaultParams,
current: 1,
total: 1,
}).next().value;
deepEqual(shorthandOf(narrowestComposition), ['<', '*1', '>']);
});
test('handles 2 pages correctly', () => {
const narrowestComposition = narrowToWideCompositions({
...defaultParams,
current: 1,
total: 2,
}).next().value;
deepEqual(shorthandOf(narrowestComposition), ['<', '*1', 2, '>2']);
});
test('handles 3 pages correctly', () => {
const narrowestComposition = narrowToWideCompositions({
...defaultParams,
current: 1,
total: 3,
}).next().value;
deepEqual(shorthandOf(narrowestComposition), ['<', '*1', 2, 3, '>2']);
});
});
describe('narrowToWideCompositions - widening compositions', () => {
test('will expand evenly starting on right', () => {
const compositions = narrowToWideCompositions({
...defaultParams,
current: 6,
total: 11,
});
const expectedCompositions = [
['<5', 1, '…L', 5, '*6', 7, '…R', 11, '>7'],
['<5', 1, '…L', 5, '*6', 7, 8, '…R', 11, '>7'],
['<5', 1, '…L', 4, 5, '*6', 7, 8, '…R', 11, '>7'],
['<5', 1, '…L', 4, 5, '*6', 7, 8, 9, 10, 11, '>7'],
['<5', 1, 2, 3, 4, 5, '*6', 7, 8, 9, 10, 11, '>7'],
];
for (const expected of expectedCompositions) {
deepEqual(shorthandOf(compositions.next().value), expected);
}
equal(compositions.next().done, true);
});
test('will expand evenly until the start is fully expanded', () => {
const compositions = narrowToWideCompositions({
...defaultParams,
current: 5,
total: 11,
});
const expectedCompositions = [
['<4', 1, '…L', 4, '*5', 6, '…R', 11, '>6'],
['<4', 1, '…L', 4, '*5', 6, 7, '…R', 11, '>6'],
['<4', 1, 2, 3, 4, '*5', 6, 7, '…R', 11, '>6'],
['<4', 1, 2, 3, 4, '*5', 6, 7, 8, '…R', 11, '>6'],
['<4', 1, 2, 3, 4, '*5', 6, 7, 8, 9, 10, 11, '>6'],
];
for (const expected of expectedCompositions) {
deepEqual(shorthandOf(compositions.next().value), expected);
}
equal(compositions.next().done, true);
});
test('will expand evenly until the end is fully expanded', () => {
const compositions = narrowToWideCompositions({
...defaultParams,
current: 7,
total: 11,
});
const expectedCompositions = [
['<6', 1, '…L', 6, '*7', 8, '…R', 11, '>8'],
['<6', 1, '…L', 6, '*7', 8, 9, 10, 11, '>8'],
['<6', 1, '…L', 5, 6, '*7', 8, 9, 10, 11, '>8'],
['<6', 1, '…L', 4, 5, 6, '*7', 8, 9, 10, 11, '>8'],
['<6', 1, 2, 3, 4, 5, 6, '*7', 8, 9, 10, 11, '>8'],
];
for (const expected of expectedCompositions) {
deepEqual(shorthandOf(compositions.next().value), expected);
}
equal(compositions.next().done, true);
});
});
describe('narrowToWideCompositions - narrowBehaviour', () => {
test('will apply a narrowBehaviour if specified', () => {
const compositions = narrowToWideCompositions({
...defaultParams,
current: 5,
total: 9,
narrowBehaviour: dropNavThenEllipsis,
});
const expectedCompositions = [
[1, 4, '*5', 6, 9],
[1, '…L', 4, '*5', 6, '…R', 9],
['<4', 1, '…L', 4, '*5', 6, '…R', 9, '>6'],
['<4', 1, '…L', 4, '*5', 6, 7, 8, 9, '>6'],
['<4', 1, 2, 3, 4, '*5', 6, 7, 8, 9, '>6'],
];
for (const expected of expectedCompositions) {
deepEqual(shorthandOf(compositions.next().value), expected);
}
equal(compositions.next().done, true);
});
});
describe('narrowToWideCompositions - omitNav', () => {
test('will not render nav when true', () => {
const narrowestComposition = narrowToWideCompositions({
...defaultParams,
current: 2,
total: 6,
omitNav: true,
}).next().value;
const expected = [1, '*2', 3, '…R', 6];
deepEqual(shorthandOf(narrowestComposition), expected);
});
});