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

import { FieldsetContext } from "../../Fieldset/FieldsetContext";
import { FieldContext } from "../FieldContext";
import { Messages } from "../Messages";

describe("rendering Messages", () => {
  const values = {
    controlId: "id",
    messages: [
      { type: "info", text: "message-1" },
      { type: "info", text: "message-2" },
    ],
  };
  const values2 = {
    controlId: "id",
    messages: [
      { type: "info", text: "message-1", isMain: true },
      { type: "info", text: "message-2" },
    ],
  };
  describe("passes props", () => {
    it("renders number of messages equal to length of messages array provided by FieldContext.Provided", () => {
      const { container } = render(
        <FieldContext.Provider value={values}>
          <Messages />
        </FieldContext.Provider>,
      );
      expect(container.getElementsByClassName("message").length).toBe(2);
    });
    it("renders number of messages equal to length of messages array provided by FieldsetContext.Provided", () => {
      const { container } = render(
        <FieldsetContext.Provider value={values}>
          <Messages />
        </FieldsetContext.Provider>,
      );
      expect(container.getElementsByClassName("message").length).toBe(2);
    });
    it("messages have id {controlId}-message-{index} where controlId is passed by provider and index is index of message", () => {
      const { container } = render(
        <FieldsetContext.Provider value={values}>
          <Messages />
        </FieldsetContext.Provider>,
      );
      expect(container.getElementsByClassName("message").length).toBe(2);
      for (let i in values.messages) {
        expect(
          container.getElementsByClassName("message")[i].getAttribute("id"),
        ).toBe(`id-message-${i}`);
      }
    });
    it("messages have icons with classes based on type passed from messages array by provider", () => {
      const { container } = render(
        <FieldsetContext.Provider value={values}>
          <Messages />
        </FieldsetContext.Provider>,
      );
      expect(container.getElementsByClassName("message").length).toBe(2);
      for (let i in values.messages) {
        expect(
          container.getElementsByClassName("message")[i].querySelector("svg"),
        ).toHaveClass("icon--info");
      }
    });
    it("messages have children passed from messages array by provider", () => {
      const { container } = render(
        <FieldsetContext.Provider value={values}>
          <Messages />
        </FieldsetContext.Provider>,
      );
      expect(container.getElementsByClassName("message").length).toBe(2);
      for (let i in values.messages) {
        expect(container.getElementsByClassName("message")[i].textContent).toBe(
          `message-${parseInt(i) + 1}`,
        );
      }
    });

    it("renders only messages with isMain attribute set to true when isMain prop is passed", () => {
      const { container } = render(
        <FieldsetContext.Provider value={values2}>
          <Messages isMain />
        </FieldsetContext.Provider>,
      );
      expect(container.getElementsByClassName("message").length).toBe(1);
      expect(container.getElementsByClassName("message")[0].textContent).toBe(
        "message-1",
      );
    });
    it("renders messages with isMain atrribute not set when isMain prop not is passed", () => {
      const { container } = render(
        <FieldsetContext.Provider value={values2}>
          <Messages />
        </FieldsetContext.Provider>,
      );
      expect(container.getElementsByClassName("message").length).toBe(1);
      expect(container.getElementsByClassName("message")[0].textContent).toBe(
        "message-2",
      );
    });
  });
});