Table

render(
    <>
      <TableSection aria-labelledby="employee-hours">
        <Table>
          <TableCaption id="employee-hours">Billable hours</TableCaption>
          <TableHeader>
            <TableRow>
              <TableHeaderCell align="start">Full name</TableHeaderCell>
              <TableHeaderCellSortable sort="descending" align="end">
                Hours
              </TableHeaderCellSortable>
            </TableRow>
          </TableHeader>
          <TableBody>
            <TableRow>
              <TableHeaderCell scope="row">Hannah Ardent</TableHeaderCell>
              <TableDataCell align="end">40</TableDataCell>
            </TableRow>
            <TableRow>
              <TableHeaderCell scope="row">Isaiah Berlin</TableHeaderCell>
              <TableDataCell align="end">32</TableDataCell>
            </TableRow>
          </TableBody>
          <TableFooter>
            <TableRow>
              <TableHeaderCell scope="row">Total billable hours</TableHeaderCell>
              <TableDataCell align="end">72</TableDataCell>
            </TableRow>
          </TableFooter>
        </Table>
      </TableSection>
      <TablePagination
        aria-label="Billable hours table"
        pageSize={10}
        previousDisabled
        nextDisabled
        onPageChange={jest.fn()}
        onPageSizeChange={jest.fn()}
      />
    </>,
  );

  // TableSection
  const section = screen.getByRole('region', {
    name: 'Billable hours',
  });

  // TableSection -> Table
  const table = within(section).getByRole('table', {
    name: 'Billable hours',
  });

  // TableSection -> Table -> TableRow
  const [headerRow, hannahRow, isaiahRow, footerRow] = within(table).getAllByRole('row');

  // TableSection -> Table -> TableRow -> TableHeaderCell
  const [fullNameHeaderCell, billableHoursHeaderCell] = within(headerRow).getAllByRole(
    'columnheader',
  );

  expect(fullNameHeaderCell).toHaveAccessibleName('Full name');
  expect(billableHoursHeaderCell).toHaveAccessibleName('Hours');

  expect(billableHoursHeaderCell).toHaveAttribute('aria-sort', 'descending');

  // TableSection -> Table -> TableRow -> TableHeaderCell
  const hannahFullNameCell = within(hannahRow).getByRole('rowheader', {
    name: 'Hannah Ardent',
  });

  // TableSection -> Table -> TableRow -> TableHeaderCell
  const isaiahFullNameCell = within(isaiahRow).getByRole('rowheader', {
    name: 'Isaiah Berlin',
  });

  expect(hannahFullNameCell).toBeInTheDocument();
  expect(isaiahFullNameCell).toBeInTheDocument();

  // TableSection -> Table -> TableRow -> TableDataCell
  const [hannahHoursCell] = within(hannahRow).getAllByRole('cell');
  expect(hannahHoursCell).toHaveAccessibleName('40');

  // TableSection -> Table -> TableRow -> TableDataCell
  const [isaiahHoursCell] = within(isaiahRow).getAllByRole('cell');
  expect(isaiahHoursCell).toHaveAccessibleName('32');

  // TableSection -> Table -> TableRow -> TableHeaderCell
  const totalBillableHoursHeaderCell = within(footerRow).getByRole('rowheader', {
    name: 'Total billable hours',
  });

  expect(totalBillableHoursHeaderCell).toBeInTheDocument();

  // TableSection -> Table -> TableRow -> TableDataCell
  const [totalBillableHoursCell] = within(footerRow).getAllByRole('cell');
  expect(totalBillableHoursCell).toHaveAccessibleName('72');

  // TablePagination
  const tablePagination = screen.getByRole('navigation', {
    name: 'Billable hours table',
  });

  // TablePagination -> Select
  const pageSizeSelect = within(tablePagination).getByRole('combobox', {
    name: 'Per page:',
  });

  expect(pageSizeSelect).toHaveDisplayValue('10');

  // TablePagination -> Button
  const firstPageButton = within(tablePagination).getByRole('button', { name: 'First page' });
  const previousPageButton = within(tablePagination).getByRole('button', {
    name: 'Previous page',
  });
  const nextPageButton = within(tablePagination).getByRole('button', { name: 'Next page' });
  const lastPageButton = within(tablePagination).getByRole('button', { name: 'Last page' });

  expect(firstPageButton).toBeDisabled();
  expect(previousPageButton).toBeDisabled();
  expect(nextPageButton).toBeDisabled();
  expect(lastPageButton).toBeDisabled();