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

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

describe("rendering CloneElementWithClassName", () => {
  describe("passed props", () => {
    it("renders children", () => {
      const { container } = render(
        <CloneElementWithClassName>
          <p>test</p>
        </CloneElementWithClassName>,
      );
      expect(container.querySelector("p")).toBeInTheDocument();
    });
    it("CloneElementWithClassName passes props to child", () => {
      const { getByTestId } = render(
        <CloneElementWithClassName data-testid="test-id">
          <p>test</p>
        </CloneElementWithClassName>,
      );
      expect(getByTestId("test-id").tagName).toBe("P");
    });
    it("CloneElementWithClassName passes class to child when className is set", () => {
      const { container } = render(
        <CloneElementWithClassName className="test-class">
          <p>test</p>
        </CloneElementWithClassName>,
      );
      expect(container.querySelector("p")).toBeInTheDocument();
      expect(container.querySelector("p")).toHaveClass("test-class");
    });
  });
});