import { render } from "@testing-library/react";
import { axe } from "vitest-axe";

import "../../../../__mocks__/resizeObserverMock";
import { Table } from "../";
import {
  ascendingHeaders,
  ascendingRowsByDate,
  descendingHeaders,
  descendingRowsByDate,
  expandableTableRows,
  footer,
  headers,
  rows,
  scrollableHeaders,
  scrollableRows,
  sortableRows,
  unsortedHeaders,
} from "../docsData";

const defaultProps = {
  headers,
  rows,
};

const example = (
  <>
    <Table {...defaultProps} caption={<h2>Random data</h2>} />
    <Table
      caption={<h3>Random data and footer</h3>}
      {...defaultProps}
      footers={footer}
    />
    <Table
      data-table
      headers={scrollableHeaders}
      rows={scrollableRows}
      caption={<h3>Scrollable on all viewports</h3>}
      isScrollable
    />
    <Table
      caption={<h3>Random unsorted data</h3>}
      headers={unsortedHeaders}
      rows={sortableRows}
    />
    <Table
      caption={<h3>Random sorted data (ascending by Date)</h3>}
      headers={ascendingHeaders}
      rows={ascendingRowsByDate}
    />
    <Table
      caption={<h3>Random sorted data (descending by Date)</h3>}
      headers={descendingHeaders}
      rows={descendingRowsByDate}
    />
    <Table
      caption={<h3>Random data</h3>}
      headers={headers}
      rows={expandableTableRows}
    />
  </>
);

it("is valid html", () => {
  const { container } = render(example);
  expect(container).toHTMLValidate({
    rules: {
      "attribute-boolean-style": "off",
      "valid-id": "off",
      "attribute-empty-style": "off",
    },
  });
});

it("is accessible", async () => {
  const { container } = render(example);
  expect(await axe(container)).toHaveNoViolations();
});