vitess.io/vitess@v0.16.2/web/vtadmin/src/components/dataTable/PaginationNav.test.tsx (about) 1 /* eslint-disable jest/no-conditional-expect */ 2 /** 3 * Copyright 2021 The Vitess Authors. 4 * 5 * Licensed under the Apache License, Version 2.0 (the "License"); 6 * you may not use this file except in compliance with the License. 7 * You may obtain a copy of the License at 8 * 9 * http://www.apache.org/licenses/LICENSE-2.0 10 * 11 * Unless required by applicable law or agreed to in writing, software 12 * distributed under the License is distributed on an "AS IS" BASIS, 13 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 14 * See the License for the specific language governing permissions and 15 * limitations under the License. 16 */ 17 import { render, screen, within } from '@testing-library/react'; 18 import { MemoryRouter } from 'react-router-dom'; 19 import { PaginationNav, Props } from './PaginationNav'; 20 21 const formatLink = (page: number) => ({ 22 pathname: '/test', 23 search: `?hello=world&page=${page}`, 24 }); 25 26 describe('PaginationNav', () => { 27 const tests: { 28 name: string; 29 props: Props; 30 expected: null | Array<number | null>; 31 }[] = [ 32 { 33 name: 'renders without breaks', 34 props: { currentPage: 1, formatLink, maxVisible: 3, totalPages: 2 }, 35 expected: [1, 2], 36 }, 37 { 38 name: 'renders breaks on the right', 39 props: { currentPage: 1, formatLink, maxVisible: 5, totalPages: 11 }, 40 expected: [1, 2, 3, null, 11], 41 }, 42 { 43 name: 'renders breaks on the left', 44 props: { currentPage: 11, formatLink, maxVisible: 5, totalPages: 11 }, 45 expected: [1, null, 9, 10, 11], 46 }, 47 { 48 name: 'renders breaks in the middle', 49 props: { currentPage: 6, formatLink, maxVisible: 5, totalPages: 11 }, 50 expected: [1, null, 6, null, 11], 51 }, 52 { 53 name: 'renders widths according to the minWidth prop', 54 props: { currentPage: 6, formatLink, maxVisible: 9, minWidth: 2, totalPages: 100 }, 55 expected: [1, 2, null, 5, 6, 7, null, 99, 100], 56 }, 57 { 58 name: 'does not render if totalPages == 0', 59 props: { currentPage: 1, formatLink, totalPages: 0 }, 60 expected: null, 61 }, 62 { 63 name: 'renders even if page > totalPages', 64 props: { currentPage: 100000, formatLink, maxVisible: 5, totalPages: 11 }, 65 expected: [1, null, 9, 10, 11], 66 }, 67 ]; 68 69 test.each(tests.map(Object.values))('%s', (name: string, props: Props, expected: Array<number | null>) => { 70 render(<PaginationNav {...props} />, { wrapper: MemoryRouter }); 71 72 const nav = screen.queryByRole('navigation'); 73 if (expected === null) { 74 expect(nav).toBeNull(); 75 return; 76 } 77 78 const lis = screen.getAllByRole('listitem'); 79 expect(lis).toHaveLength(expected.length); 80 81 lis.forEach((li, idx) => { 82 const e = expected[idx]; 83 const link = within(li).queryByRole('link'); 84 85 if (e === null) { 86 // Placeholders don't render links 87 expect(link).toBeNull(); 88 } else { 89 expect(link).toHaveAttribute('href', `/test?hello=world&page=${e}`); 90 expect(link).toHaveTextContent(`${e}`); 91 92 if (e === props.currentPage) { 93 expect(link).toHaveClass('activeLink'); 94 } else { 95 expect(link).not.toHaveClass('activeLink'); 96 } 97 } 98 }); 99 }); 100 });