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

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

describe("rendering Tile", () => {
  describe("initial state", () => {
    it("renders div with class tile", () => {
      const { getByTestId } = render(<Tile data-testid="test-id" />);
      expect(getByTestId("test-id").tagName).toBe("DIV");
      expect(getByTestId("test-id")).toHaveClass("tile");
      expect(getByTestId("test-id")).not.toHaveClass("surface-primary");
    });
    it("renders child div with class tile__body", () => {
      const { getByTestId } = render(<Tile data-testid="test-id" />);
      expect(getByTestId("test-id").children.length).toBe(1);
      expect(getByTestId("test-id").children[0].tagName).toBe("DIV");
      expect(getByTestId("test-id").children[0]).toHaveClass("tile__body");
    });
  });
  describe("passed props", () => {
    it("renders children", () => {
      const { getByText } = render(<Tile>test</Tile>);
      expect(getByText("test")).toBeInTheDocument();
    });
    it("has additional class when className is set", () => {
      const { getByTestId } = render(
        <Tile data-testid="test-id" className="test-class" />,
      );
      expect(getByTestId("test-id")).toHaveClass("tile");
      expect(getByTestId("test-id")).toHaveClass("test-class");
    });
    it("applies hAlign and vAlign classes to body", () => {
      const { getByTestId } = render(
        <Tile data-testid="test-id" hAlign="center" vAlign="space-between" />,
      );
      const body = getByTestId("test-id").querySelector(".tile__body");
      expect(body).toHaveClass("align-items-center");
      expect(body).toHaveClass("justify-content-space-between");
    });
    it("applies compact wrapper class when variant is compact", () => {
      const { getByTestId } = render(
        <Tile data-testid="test-id" variant="compact" />,
      );
      expect(getByTestId("test-id")).toHaveClass("tile--compact");
      const body = getByTestId("test-id").querySelector(".tile__body");
      expect(body).not.toHaveClass("tile__body--compact");
    });
    it("applies variant class to wrapper when variant is set", () => {
      const { getByTestId } = render(
        <Tile data-testid="test-id" variant="action" />,
      );
      expect(getByTestId("test-id")).toHaveClass("tile--action");
    });
    it("renders Icon when variant is 'action'", () => {
      const { getByTestId } = render(
        <Tile data-testid="test-id" variant="action" />,
      );
      const body = getByTestId("test-id").querySelector(".tile__body");
      expect(body.querySelector("svg")).toBeInTheDocument();
      expect(body.lastElementChild.tagName).toBe("svg");
      expect(body).not.toHaveClass("tile__body--action");
    });
  });
});