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

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

describe("rendering ClickableControl", () => {
  describe("initial state", () => {
    it("has default class list__control", () => {
      const { getByTestId } = render(
        <ClickableControl data-testid="test-id" />,
      );
      expect(getByTestId("test-id")).toHaveClass("list__control");
    });
    it("renders default element button", () => {
      const { getByTestId } = render(
        <ClickableControl data-testid="test-id" />,
      );
      expect(getByTestId("test-id").tagName).toBe("BUTTON");
    });
    it("element button has type button", () => {
      const { getByTestId } = render(
        <ClickableControl data-testid="test-id" />,
      );
      expect(getByTestId("test-id").getAttribute("type")).toBe("button");
    });
    it("renders Icon with use element that has attribute xlinkhref=''", () => {
      const { getByTestId } = render(
        <ClickableControl data-testid="test-id" />,
      );
      const use = getByTestId("test-id").querySelector("use");
      expect(use).toBeInTheDocument();
      expect(use.getAttribute("xlink:href")).toBe("/sprite.svg#chevron-right");
    });
    it("svg element has class list__indicator", () => {
      const { getByTestId } = render(
        <ClickableControl data-testid="test-id" />,
      );
      expect(getByTestId("test-id").querySelector("svg")).toBeTruthy();
      expect(getByTestId("test-id").querySelector("svg")).toHaveClass(
        "list__indicator",
      );
    });
    it("svg element has class icon--medium", () => {
      const { getByTestId } = render(
        <ClickableControl data-testid="test-id" />,
      );
      expect(getByTestId("test-id").querySelector("svg")).toBeTruthy();
      expect(getByTestId("test-id").querySelector("svg")).toHaveClass(
        "icon--medium",
      );
    });
  });
  describe("passed props", () => {
    it("renders children", () => {
      const { getByTestId } = render(
        <ClickableControl data-testid="test-id">test-child</ClickableControl>,
      );
      expect(getByTestId("test-id").textContent).toBe("test-child");
    });
    it("has additional class when className is set", () => {
      const { getByTestId } = render(
        <ClickableControl data-testid="test-id" className="test-class" />,
      );
      expect(getByTestId("test-id")).toHaveClass("test-class");
    });
    it("renders anchor element instead of button when href prop is passed", () => {
      const { getByTestId } = render(
        <ClickableControl data-testid="test-id" href="/test" />,
      );
      expect(getByTestId("test-id").tagName).toBe("A");
    });
    it("anchor element renders children", () => {
      const { getByTestId } = render(
        <ClickableControl data-testid="test-id" href="/test">
          test-child
        </ClickableControl>,
      );
      expect(getByTestId("test-id").tagName).toBe("A");
      expect(getByTestId("test-id").textContent).toBe("test-child");
    });
    it("anchor element has additional class when className is set", () => {
      const { getByTestId } = render(
        <ClickableControl
          data-testid="test-id"
          href="/test"
          className="test-class"
        />,
      );
      expect(getByTestId("test-id").tagName).toBe("A");
      expect(getByTestId("test-id")).toHaveClass("test-class");
    });
    it("anchor element doesnt have type attribute", () => {
      const { getByTestId } = render(
        <ClickableControl data-testid="test-id" href="/test" />,
      );
      expect(getByTestId("test-id").tagName).toBe("A");
      expect(getByTestId("test-id").getAttribute("type")).toBeFalsy();
    });
  });
});