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

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

describe("rendering Modal", () => {
  let modal;

  beforeEach(() => {
    modal = render(
      <>
        <div id="root">
          <Modal id="id" data-testid="test-id" />
        </div>
        <div id="root-modals" />
      </>,
    );
  });
  describe("initial state and id", () => {
    it("has wrapper div with class modal", () => {
      const { getByTestId } = modal;
      expect(getByTestId("test-id").parentElement.tagName).toBe("DIV");
      expect(getByTestId("test-id").parentElement).toHaveClass("modal");
    });
    it("has wrapper div with id attribute set to id prop", () => {
      const { getByTestId } = modal;
      expect(getByTestId("test-id").parentElement.tagName).toBe("DIV");
      expect(getByTestId("test-id").parentElement.id).toBe("id");
    });
    it("has wrapper div with data-modal attribute set to true", () => {
      const { getByTestId } = modal;
      expect(getByTestId("test-id").parentElement.tagName).toBe("DIV");
      expect(
        getByTestId("test-id").parentElement.getAttribute("data-modal"),
      ).toBe("true");
    });
    it("has wrapper div with aria-labelledby attribute set to id-title when id prop is id", () => {
      const { getByTestId } = modal;
      expect(getByTestId("test-id").parentElement.tagName).toBe("DIV");
      expect(
        getByTestId("test-id").parentElement.getAttribute("aria-labelledby"),
      ).toBe("id-title");
    });
    it("has class modal__dialog", () => {
      const { getByTestId } = modal;
      expect(getByTestId("test-id")).toHaveClass("modal__dialog");
    });
    it("has child div with class modal__header", () => {
      const { getByTestId } = modal;
      const child =
        getByTestId("test-id").getElementsByClassName("modal__header");
      expect(child.length).toBe(1);
      expect(child[0]).toHaveClass("modal__header");
    });
  });
  describe("disableHeaderSpacing prop", () => {
    it("should have modal__header--no-spacing class when disableHeaderSpacing is true", () => {
      const { getByTestId } = render(
        <div id="root">
          <Modal
            id="modal-no-header-spacing"
            data-testid="modal-no-header-spacing"
            disableHeaderSpacing
          />
        </div>,
      );
      const child = getByTestId(
        "modal-no-header-spacing",
      ).getElementsByClassName("modal__header--no-spacing");
      expect(child.length).toBe(1);
      expect(child[0]).toHaveClass("modal__header--no-spacing");
    });
  });
  describe("disableFooterSpacing prop", () => {
    it("should have modal__footer--no-spacing class when disableFooterSpacing is true", () => {
      const { getByTestId } = render(
        <div id="root">
          <Modal
            id="modal-no-footer-spacing"
            data-testid="modal-no-footer-spacing"
            disableFooterSpacing
          />
        </div>,
      );
      const child = getByTestId(
        "modal-no-footer-spacing",
      ).getElementsByClassName("modal__footer--no-spacing");
      expect(child.length).toBe(1);
      expect(child[0]).toHaveClass("modal__footer--no-spacing");
    });
  });
});