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  });