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

describe("rendering Footer", () => {
  const footers = [
    {
      key1: "row1",
      key2: "row1",
    },
    {
      key1: "row2",
      key2: "row2",
      expand: [
        {
          key1: "row2-expand",
          key2: "row2-expand",
        },
      ],
    },
  ];
  const headers = [
    {
      key: "key1",
      label: "header-1",
    },
    {
      key: "key2",
      label: "header-2",
      cellProps: {
        className: "test-cellprop",
      },
    },
  ];
  let footer;

  beforeEach(() => {
    footer = render(
      <TableContext.Provider
        value={{
          headers: headers,
          footers: footers,
          expandableRows: { hasExpandableRows: true },
        }}
      >
        <table>
          <Footer />
        </table>
      </TableContext.Provider>,
    );
  });
  it("renders multiple rows", () => {
    const { container } = footer;
    expect(container.querySelectorAll("tr").length).toBe(2);
  });
  it("renders cells text content", () => {
    const { getAllByText } = footer;
    expect(getAllByText("row1").length).toBe(2);
    expect(getAllByText("row2").length).toBe(2);
  });
  it("footer row can be expandable - have span with text Zobraziť 1 súvisiaci riadok inside button when expand length is 1", () => {
    const { getAllByText } = footer;
    expect(
      getAllByText("row2")[0]
        .parentElement.querySelector("button")
        .querySelector("span").textContent,
    ).toBe("Zobraziť 1 súvisiaci riadok");
  });
});