import { render } from "@testing-library/react";
import { Header } from "../Header.tsx";
import TableContext from "../TableContext";

describe("rendering Header", () => {
  const headers = [
    {
      key: "1",
      label: "header-1",
    },
    {
      key: "2",
      label: "header-2",
      isSortable: true,
    },
    {
      cellProps: {
        className: "test-class--cell",
      },
      key: "3",
      label: "header-3",
    },
    {
      headCellProps: {
        className: "test-class--head-cell",
      },
      key: "4",
      label: "header-4",
    },
  ];

  let header;
  describe("passes props", () => {
    beforeEach(() => {
      header = render(
        <TableContext.Provider value={{ headers: headers }}>
          <table>
            <Header data-testid="test-id" />
          </table>
        </TableContext.Provider>,
      );
    });
    it("renders number of cells with th tag equal to length of headers array", () => {
      const { container } = header;
      expect(container.querySelectorAll("th").length).toBe(4);
    });
    it('cells with th tag have scope set to "col"', () => {
      const { container } = header;
      const th = container.querySelectorAll("th");
      for (let i in headers.length) {
        expect(th[i].getAttribute("scope")).toBe("col");
      }
    });
    it('sortable cells have aria-sort attribute set to "none", otherwise is not set', () => {
      const { container } = header;
      const th = container.querySelectorAll("th");
      for (let i in headers) {
        if (th[i].textContent === "header-2 zoradiť vzostupne podľa header-2") {
          expect(th[i].getAttribute("aria-sort")).toBe("none");
        } else {
          expect(th[i].getAttribute("aria-sort")).toBe(null);
        }
      }
    });
    it("headCellProps are passed", () => {
      const { container } = header;
      const th = container.querySelectorAll("th");
      for (let i in headers) {
        if (th[i].textContent === "header-4") {
          expect(th[i]).toHaveClass("test-class--head-cell");
        } else {
          expect(th[i]).not.toHaveClass("test-class--head-cell");
        }
      }
    });
    it("cellProps are passed", () => {
      const { container } = header;
      const th = container.querySelectorAll("th");
      for (let i in headers) {
        if (th[i].textContent === "header-3") {
          expect(th[i]).toHaveClass("test-class--cell");
        } else {
          expect(th[i]).not.toHaveClass("test-class--cell");
        }
      }
    });
    it('button with class "table__sort-button" is rendered inside sortable cell', () => {
      const { container } = header;
      const th = container.querySelector('th[aria-sort="none"]');
      expect(th).toBeInTheDocument();
      expect(th.querySelector("button")).toBeInTheDocument();
      expect(th.querySelector("button")).toHaveClass("table__sort-button");
    });
    it('span with class "sr-only" is rendered inside sortable cell', () => {
      const { container } = header;
      const th = container.querySelector('th[aria-sort="none"]');
      expect(th).toBeInTheDocument();
      expect(th.querySelector("span")).toBeInTheDocument();
      expect(th.querySelector("span")).toHaveClass("sr-only");
    });
    it('has cell with th tag and class "table__cell--shrink" when hasExpandableRows is set to true', () => {
      const { container } = render(
        <TableContext.Provider
          value={{
            headers: headers,
            expandableRows: { hasExpandableRows: true },
          }}
        >
          <table>
            <Header data-testid="test-id" />
          </table>
        </TableContext.Provider>,
      );
      const th = container.getElementsByClassName("table__cell--shrink");
      expect(th.length).toBe(1);
      expect(th[0].tagName).toBe("TH");
    });
  });
});