github.com/pyroscope-io/pyroscope@v0.37.3-0.20230725203016-5f6947968bd0/webapp/javascript/ui/Table.spec.tsx (about)

     1  import React from 'react';
     2  import { renderHook, act } from '@testing-library/react-hooks';
     3  import { render, within, screen } from '@testing-library/react';
     4  import Table, { useTableSort } from './Table';
     5  
     6  const mockHeadRow = [
     7    { name: 'self', label: 'test col2', sortable: 1 },
     8    { name: 'name', label: 'test col1', sortable: 1 },
     9    { name: 'total', label: 'test col3', sortable: 1 },
    10    { name: 'selfLeft', label: 'test col4', sortable: 1 },
    11    { name: 'selfRight', label: 'test col5', sortable: 1 },
    12    { name: 'selfDiff', label: 'test col6', sortable: 1 },
    13    { name: 'totalLeft', label: 'test col7', sortable: 1 },
    14    { name: 'totalRight', label: 'test col8', sortable: 1 },
    15    { name: 'totalDiff', label: 'test col9', sortable: 1 },
    16  ];
    17  
    18  describe('Hook: useTableSort', () => {
    19    const render = () => renderHook(() => useTableSort(mockHeadRow)).result;
    20  
    21    it('should return initial sort values', () => {
    22      const hook = render();
    23      expect(hook.current).toStrictEqual({
    24        sortBy: 'self',
    25        sortByDirection: 'desc',
    26        updateSortParams: expect.any(Function),
    27      });
    28    });
    29  
    30    it('should update sort direction', () => {
    31      const hook = render();
    32  
    33      expect(hook.current.sortByDirection).toBe('desc');
    34      act(() => {
    35        hook.current.updateSortParams('self');
    36      });
    37      expect(hook.current.sortByDirection).toBe('asc');
    38    });
    39  
    40    it('should update sort value and sort direction', () => {
    41      const hook = render();
    42  
    43      expect(hook.current).toMatchObject({
    44        sortBy: 'self',
    45        sortByDirection: 'desc',
    46      });
    47  
    48      act(() => {
    49        hook.current.updateSortParams('name');
    50      });
    51      expect(hook.current).toMatchObject({
    52        sortBy: 'name',
    53        sortByDirection: 'desc',
    54      });
    55  
    56      act(() => {
    57        hook.current.updateSortParams('name');
    58      });
    59      expect(hook.current).toMatchObject({
    60        sortBy: 'name',
    61        sortByDirection: 'asc',
    62      });
    63    });
    64  });
    65  
    66  describe('pagination', () => {
    67    const header = [{ name: 'id', label: 'Id' }];
    68    const rows = [
    69      { cells: [{ value: 1 }] },
    70      { cells: [{ value: 2 }] },
    71      { cells: [{ value: 3 }] },
    72    ];
    73  
    74    it('does not paginate by default', async () => {
    75      render(
    76        <Table table={{ type: 'filled', headRow: header, bodyRows: rows }} />
    77      );
    78  
    79      const tbody = document.getElementsByTagName('tbody')[0];
    80      const items = await within(tbody).findAllByRole('row');
    81      expect(items).toHaveLength(rows.length);
    82    });
    83  
    84    it('paginates', async () => {
    85      render(
    86        <Table
    87          itemsPerPage={1}
    88          table={{
    89            type: 'filled',
    90            headRow: header,
    91            bodyRows: rows,
    92          }}
    93        />
    94      );
    95  
    96      const tbody = document.getElementsByTagName('tbody')[0];
    97  
    98      // First page
    99      expect(screen.getByLabelText('Previous Page')).toBeDisabled();
   100      expect(screen.getByLabelText('Next Page')).toBeEnabled();
   101      let items = await within(tbody).findAllByRole('row');
   102      expect(items).toHaveLength(1);
   103      expect(items[0]).toHaveTextContent('1');
   104  
   105      // Second page
   106      screen.getByLabelText('Next Page').click();
   107      expect(screen.getByLabelText('Previous Page')).toBeEnabled();
   108      expect(screen.getByLabelText('Next Page')).toBeEnabled();
   109      items = await within(tbody).findAllByRole('row');
   110      expect(items).toHaveLength(1);
   111      expect(items[0]).toHaveTextContent('2');
   112  
   113      // Third page
   114      screen.getByLabelText('Next Page').click();
   115      expect(screen.getByLabelText('Previous Page')).toBeEnabled();
   116      expect(screen.getByLabelText('Next Page')).toBeDisabled();
   117      items = await within(tbody).findAllByRole('row');
   118      expect(items).toHaveLength(1);
   119      expect(items[0]).toHaveTextContent('3');
   120    });
   121  });