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

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

describe("rendering Hint", () => {
  describe("initial state", () => {
    it("doesnt render when children are not set", () => {
      const { container } = render(<Hint />);
      expect(container.querySelector("p")).not.toBeInTheDocument();
    });
  });
  describe("passed props", () => {
    it("is rendered when children are set ", () => {
      const { container } = render(<Hint>test</Hint>);
      expect(container.querySelector("p")).toBeInTheDocument();
    });
    it("renders children", () => {
      const { getByText } = render(<Hint data-testid="test-id">test</Hint>);
      expect(getByText("test")).toBeInTheDocument();
    });
    it("has  class hint", () => {
      const { getByTestId } = render(<Hint data-testid="test-id">test</Hint>);
      expect(getByTestId("test-id")).toHaveClass("hint");
    });
    it("has additional class when className is set", () => {
      const { getByTestId } = render(
        <Hint data-testid="test-id" className="test-class">
          test
        </Hint>,
      );
      expect(getByTestId("test-id")).toHaveClass("hint");
      expect(getByTestId("test-id")).toHaveClass("test-class");
    });
  });
});