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

describe("rendering Row", () => {
  const expandrow = {
    key1: "col1",
    key2: "col2",
  };
  const headers = [
    {
      key: "key1",
      label: "header-1",
    },
    {
      key: "key2",
      label: "header-2",
      cellProps: {
        className: "test-cellprop",
      },
    },
  ];
  const row1 = {
    key1: "col1",
    key2: "col2",
  };
  const row2 = {
    key1: "col1",
    key2: "col2",
    expand: [expandrow],
  };
  const row3 = {
    key1: "col1",
    key2: "col2",
    expand: [expandrow, expandrow],
  };
  const row4 = {
    key1: "col1",
    key2: "col2",
    expand: [expandrow, expandrow, expandrow, expandrow, expandrow],
  };
  let row;
  describe("renders row without expand array", () => {
    beforeEach(() => {
      row = render(
        <TableContext.Provider value={{ headers: headers }}>
          <table>
            <tbody>
              <tr>
                <Row row={row1} />
              </tr>
            </tbody>
          </table>
        </TableContext.Provider>,
      );
    });
    it("renders number of cells with td tag equal to number of row keys", () => {
      const { container } = row;
      expect(container.querySelectorAll("td").length).toBe(2);
    });
    it("renders content of row keys", () => {
      const { getByText } = row;
      expect(getByText("col1")).toBeInTheDocument();
      expect(getByText("col2")).toBeInTheDocument();
    });
    it("when header column has cellProps defined, they are passed to row column", () => {
      const { getByText } = row;
      expect(getByText("col2").className).toBe("test-cellprop");
    });
  });
  describe("renders row with expand array of lenght 1", () => {
    beforeEach(() => {
      row = render(
        <TableContext.Provider
          value={{
            headers: headers,
            expandableRows: { hasExpandableRows: true },
          }}
        >
          <table>
            <tbody>
              <tr>
                <Row row={row2} />
              </tr>
            </tbody>
          </table>
        </TableContext.Provider>,
      );
    });
    it("renders number of cells with td tag equal to number of row keys, one for expand row button", () => {
      const { container } = row;
      expect(container.querySelectorAll("td").length).toBe(3);
    });
    it("button is rendered inside of cell with classes align-right table__cell--shrink table__cell--expand", () => {
      const { container } = row;
      expect(container.querySelector("button").parentElement.className).toBe(
        "align-right table__cell--shrink table__cell--expand",
      );
    });
    it("button has btn--square class ", () => {
      const { container } = row;
      expect(container.querySelector("button")).toHaveClass("btn--square");
    });
    it("button has btn--small class ", () => {
      const { container } = row;
      expect(container.querySelector("button")).toHaveClass("btn--small");
    });
    it("button has btn--ghost class ", () => {
      const { container } = row;
      expect(container.querySelector("button")).toHaveClass("btn--ghost");
    });
    it("button has mb-none class ", () => {
      const { container } = row;
      expect(container.querySelector("button")).toHaveClass("mb-none");
    });
    it("button has attribute data-subrow-toggle set to true ", () => {
      const { container } = row;
      expect(
        container.querySelector("button").getAttribute("data-subrow-toggle"),
      ).toBe("true");
    });
    it("button has attribute aria-expanded set to false", () => {
      const { container } = row;
      expect(
        container.querySelector("button").getAttribute("aria-expanded"),
      ).toBe("false");
    });
    it("button has type button", () => {
      const { container } = row;
      expect(container.querySelector("button").getAttribute("type")).toBe(
        "button",
      );
    });
    it("button has child span", () => {
      const { container } = row;
      expect(
        container.querySelector("button").querySelector("span"),
      ).toBeInTheDocument();
    });
    it("span has class visually-hidden", () => {
      const { container } = row;
      expect(
        container.querySelector("button").querySelector("span"),
      ).toHaveClass("visually-hidden");
    });
    it("span has textcontent Zobraziť 1 súvisiaci riadok when lenght of expand array in row is 1", () => {
      const { container } = row;
      expect(
        container.querySelector("button").querySelector("span").textContent,
      ).toBe("Zobraziť 1 súvisiaci riadok");
    });
    it("button has child svg inco with class icon--large", () => {
      const { container } = row;
      expect(
        container.querySelector("button").querySelector("svg"),
      ).toHaveClass("icon--large");
    });
  });
  describe("renders row with expand array of lenght 2", () => {
    it("span has textcontent Zobraziť 2 súvisiace riadky when lenght of expand array in row is 2", () => {
      const { container } = render(
        <TableContext.Provider
          value={{
            headers: headers,
            expandableRows: { hasExpandableRows: true },
          }}
        >
          <table>
            <tbody>
              <tr>
                <Row row={row3} />
              </tr>
            </tbody>
          </table>
        </TableContext.Provider>,
      );
      expect(
        container.querySelector("button").querySelector("span").textContent,
      ).toBe("Zobraziť 2 súvisiace riadky");
    });
  });
  describe("renders row with expand array of lenght 5", () => {
    it("span has textcontent Zobraziť 5 súvisiacich riadkov when lenght of expand array in row is 5", () => {
      const { container } = render(
        <TableContext.Provider
          value={{
            headers: headers,
            expandableRows: { hasExpandableRows: true },
          }}
        >
          <table>
            <tbody>
              <tr>
                <Row row={row4} />
              </tr>
            </tbody>
          </table>
        </TableContext.Provider>,
      );
      expect(
        container.querySelector("button").querySelector("span").textContent,
      ).toBe("Zobraziť 5 súvisiacich riadkov");
    });
  });
});