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

import { ListItem } from "../ListItem";

const controlProps1 = {
  className: "test-class",
};
const controlProps2 = {
  className: "test-class",
  href: "test",
};

//conditional wrapper component inside ListItem requires child to render
describe("rendering ListItem", () => {
  describe("initial state", () => {
    it("has default class list__item", () => {
      const { getByTestId } = render(
        <ListItem data-testid="test-id">test-child</ListItem>,
      );
      expect(getByTestId("test-id")).toHaveClass("list__item");
    });
  });
  describe("passed props", () => {
    it("renders children", () => {
      const { getByText } = render(
        <ListItem data-testid="test-id">test-child</ListItem>,
      );
      expect(getByText("test-child")).toBeInTheDocument();
    });
    it("has additional class when className is set", () => {
      const { getByTestId } = render(
        <ListItem data-testid="test-id" className="test-class">
          test-child
        </ListItem>,
      );
      expect(getByTestId("test-id")).toHaveClass("list__item");
      expect(getByTestId("test-id")).toHaveClass("test-class");
    });
    it("renders button with type button when controlProps without href is passed", () => {
      const { getByRole } = render(
        <ListItem data-testid="test-id" controlProps={controlProps1}>
          test-child
        </ListItem>,
      );
      expect(getByRole("button")).toBeInTheDocument();
      expect(getByRole("button").getAttribute("type")).toBe("button");
    });
    it("renders button with class from controlProps.className when passed", () => {
      const { getByRole } = render(
        <ListItem data-testid="test-id" controlProps={controlProps1}>
          test-child
        </ListItem>,
      );
      expect(getByRole("button")).toBeInTheDocument();
      expect(getByRole("button")).toHaveClass("test-class");
    });
    it("renders button with class from controlProps.className when passed", () => {
      const { getByRole } = render(
        <ListItem data-testid="test-id" controlProps={controlProps1}>
          test-child
        </ListItem>,
      );
      expect(getByRole("button")).toBeInTheDocument();
      expect(getByRole("button")).toHaveClass("test-class");
    });
    it("children are rendered inside button element when button is rendered", () => {
      const { getByRole } = render(
        <ListItem data-testid="test-id" controlProps={controlProps1}>
          test-child
        </ListItem>,
      );
      expect(getByRole("button")).toBeInTheDocument();
      expect(getByRole("button").textContent).toBe("test-child");
    });
    it("renders anchor without type when controlProps with href is passed", () => {
      const { getByRole } = render(
        <ListItem data-testid="test-id" controlProps={controlProps2}>
          test-child
        </ListItem>,
      );
      expect(getByRole("link")).toBeInTheDocument();
      expect(getByRole("link").getAttribute("type")).toBeFalsy();
    });
    it("renders anchor with class from controlProps.className when passed", () => {
      const { getByRole } = render(
        <ListItem data-testid="test-id" controlProps={controlProps2}>
          test-child
        </ListItem>,
      );
      expect(getByRole("link")).toBeInTheDocument();
      expect(getByRole("link")).toHaveClass("test-class");
    });
    it("children are rendered inside anchor element when anchor is rendered", () => {
      const { getByRole } = render(
        <ListItem data-testid="test-id" controlProps={controlProps2}>
          test-child
        </ListItem>,
      );
      expect(getByRole("link")).toBeInTheDocument();
      expect(getByRole("link").textContent).toBe("test-child");
    });
  });
});