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

import { FieldContext } from "../FieldContext";
import { FieldLabel } from "../Label";

// htmlFor is required, therefore controlId is required
describe("rendering Label", () => {
  describe("renders label", () => {
    it("label is rendered when control.type is not equal 'range'", () => {
      const { container } = render(
        <FieldContext.Provider
          value={{ controlId: "id", control: "not-range" }}
        >
          <FieldLabel />
        </FieldContext.Provider>,
      );
      expect(container.querySelector("label")).toBeInTheDocument();
    });
    it("label has classes label and form-field__label", () => {
      const { container } = render(
        <FieldContext.Provider
          value={{ controlId: "id", control: "not-range" }}
        >
          <FieldLabel />
        </FieldContext.Provider>,
      );
      expect(container.querySelector("label")).toHaveClass("label");
      expect(container.querySelector("label")).toHaveClass("form-field__label");
    });
    it("label has id id-label when controlId is set to 'id'", () => {
      const { container } = render(
        <FieldContext.Provider
          value={{ controlId: "id", control: "not-range" }}
        >
          <FieldLabel />
        </FieldContext.Provider>,
      );
      expect(container.querySelector("label")).toHaveClass("label");
      expect(container.querySelector("label")).toHaveClass("form-field__label");
    });
    it("has htmlFor seto to id when when controlId is set to 'id'", () => {
      const { container } = render(
        <FieldContext.Provider
          value={{ controlId: "id", control: "not-range" }}
        >
          <FieldLabel />
        </FieldContext.Provider>,
      );
      expect(container.querySelector("label").htmlFor).toBe("id");
    });
    it("renders label value provided by FieldContext.Provider inside label element", () => {
      const { container } = render(
        <FieldContext.Provider
          value={{ controlId: "id", control: "not-range", label: "test" }}
        >
          <FieldLabel />
        </FieldContext.Provider>,
      );
      expect(container.querySelector("label").textContent).toBe("test");
    });
  });
  describe("control.type is set to 'range'", () => {
    it("span is rendered when control.type is not equal 'range'", () => {
      const { container } = render(
        <FieldContext.Provider
          value={{ controlId: "id", control: { type: "range" } }}
        >
          <FieldLabel />
        </FieldContext.Provider>,
      );
      expect(container.querySelector("span")).toBeInTheDocument();
    });
    it("span has classes label and form-field__label", () => {
      const { container } = render(
        <FieldContext.Provider
          value={{ controlId: "id", control: { type: "range" } }}
        >
          <FieldLabel />
        </FieldContext.Provider>,
      );
      expect(container.querySelector("span")).toHaveClass("label");
      expect(container.querySelector("span")).toHaveClass("form-field__label");
    });
    it("span has id id-label when controlId is set to 'id'", () => {
      const { container } = render(
        <FieldContext.Provider
          value={{ controlId: "id", control: { type: "range" } }}
        >
          <FieldLabel />
        </FieldContext.Provider>,
      );
      expect(container.querySelector("span")).toHaveClass("label");
      expect(container.querySelector("span")).toHaveClass("form-field__label");
    });
    it("renders label value provided by FieldContext.Provider inside span element", () => {
      const { container } = render(
        <FieldContext.Provider
          value={{ controlId: "id", control: { type: "range" }, label: "test" }}
        >
          <FieldLabel />
        </FieldContext.Provider>,
      );
      expect(container.querySelector("span").textContent).toBe("test");
    });
  });
  describe("labelAfter is set", () => {
    it("renders div wrapper with class form-field__label", () => {
      const { container } = render(
        <FieldContext.Provider
          value={{ controlId: "id", control: "not-range", labelAfter: "test" }}
        >
          <FieldLabel />
        </FieldContext.Provider>,
      );
      expect(container.querySelector("div")).toBeInTheDocument();
      expect(container.querySelector("div")).toHaveClass("form-field__label");
    });
    it("renders labelAfter value", () => {
      const { getByText } = render(
        <FieldContext.Provider
          value={{ controlId: "id", control: "not-range", labelAfter: "test" }}
        >
          <FieldLabel />
        </FieldContext.Provider>,
      );
      expect(getByText("test")).toBeInTheDocument();
    });
    it("label doesnt have class form-field__label when labelAfter is set", () => {
      const { container } = render(
        <FieldContext.Provider
          value={{
            controlId: "id",
            control: "not-range",
            labelAfter: "test",
          }}
        >
          <FieldLabel />
        </FieldContext.Provider>,
      );
      expect(container.querySelector("label")).toHaveClass("label");
      expect(container.querySelector("label")).not.toHaveClass(
        "form-field__label",
      );
    });
    it("span doesnt have class form-field__label when labelAfter is set", () => {
      const { container } = render(
        <FieldContext.Provider
          value={{
            controlId: "id",
            control: { type: "range" },
            labelAfter: "test",
          }}
        >
          <FieldLabel />
        </FieldContext.Provider>,
      );
      expect(container.querySelector("span")).toHaveClass("label");
      expect(container.querySelector("span")).not.toHaveClass(
        "form-field__label",
      );
    });
  });
});