import { render } from "@testing-library/react";
import Base from "../../../Tooltip/tests/BaseWrapper";
import { FormTooltip } from "../Tooltip";

//id is required
describe("rendering Tooltip", () => {
  let tooltip;

  beforeEach(() => {
    tooltip = render(
      <Base>
        <FormTooltip data-testid="test-id" id="test">
          test
        </FormTooltip>
      </Base>,
    );
  });
  it("renders children", () => {
    const { getByText } = tooltip;
    expect(getByText("test")).toBeInTheDocument();
  });
  it("has class form-field__tooltip", () => {
    const { container } = tooltip;
    expect(container.querySelector("svg")).toBeInTheDocument();
    expect(container.querySelector("svg")).toHaveClass("form-field__tooltip");
  });
  it("has data-tooltip-placement set to right", () => {
    const { getByTestId } = tooltip;
    expect(getByTestId("test-id").getAttribute("data-tooltip-placement")).toBe(
      "right",
    );
  });
  it("has id attribute test-tooltip when id prop is set to test", () => {
    const { getByTestId } = tooltip;
    expect(getByTestId("test-id").getAttribute("id")).toBe("test-tooltip");
  });
});