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

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

describe("rendering Divider", () => {
  describe("initial state", () => {
    it("has default class divider", () => {
      const { getByTestId } = render(<Divider data-testid="test-id" />);
      expect(getByTestId("test-id")).toHaveClass("divider");
    });
    it("child div has default class divider__line", () => {
      const { container } = render(<Divider />);
      expect(container.getElementsByClassName("divider__line").length).toBe(1);
    });
  });

  describe("passed props", () => {
    it("has additional class when className is set", () => {
      const { getByTestId } = render(
        <Divider data-testid="test-id" className="test-class" />,
      );
      expect(getByTestId("test-id")).toHaveClass("divider");
      expect(getByTestId("test-id")).toHaveClass("test-class");
    });
    it("has class divider__content when content prop is set", () => {
      const { container } = render(<Divider content="test-content" />);
      expect(container.getElementsByClassName("divider__content").length).toBe(
        1,
      );
    });
    it("has second class divider__line when content prop is set", () => {
      const { container } = render(<Divider content="test-content" />);
      expect(container.getElementsByClassName("divider__line").length).toBe(2);
    });
    it("renders content prop", () => {
      const { getByText } = render(<Divider content="test-content" />);
      expect(getByText("test-content")).toBeInTheDocument();
    });
    it("has class divider__content when icon prop is set", () => {
      const { container } = render(<Divider icon="test-icon" />);
      expect(container.getElementsByClassName("divider__content").length).toBe(
        1,
      );
    });
    it("has second class divider__line when icon prop is set", () => {
      const { container } = render(<Divider icon="test-icon" />);
      expect(container.getElementsByClassName("divider__line").length).toBe(2);
    });
    it("renders use element inside svg element with attribute xlinkhref set to /sprite.svg#test-icon when icon prop is set to test-icon", () => {
      const { container } = render(<Divider icon="test-icon" />);
      expect(container.querySelector("use").getAttribute("xlink:href")).toBe(
        "/sprite.svg#test-icon",
      );
    });
    it("when both icon and content props are set only content is rendered", () => {
      const { container, getByText } = render(
        <Divider icon="test-icon" content="test-content" />,
      );
      expect(getByText("test-content")).toBeInTheDocument();
      expect(container.querySelector("svg")).toBeFalsy();
    });
  });
});