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

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

describe("rendering ModalBody", () => {
  describe("initial state", () => {
    it("renders div with class modal__body", () => {
      const { getByTestId } = render(<ModalBody data-testid="test-id" />);
      expect(getByTestId("test-id").tagName).toBe("DIV");
      expect(getByTestId("test-id")).toHaveClass("modal__body");
    });
  });
  describe("passed props", () => {
    it("renders children", () => {
      const { getByText } = render(<ModalBody>test</ModalBody>);
      expect(getByText("test")).toBeInTheDocument();
    });

    [
      "background-primary",
      "background-secondary",
      "background-accent",
      "surface-primary",
      "surface-secondary",
      "surface-tertiary",
      "surface-subtle",
      "fill-accent1",
      "fill-accent2",
    ].map((color) => {
      it(`has class ${color} and modal__body--colorful when color is set to ${color}`, () => {
        const { getByTestId } = render(
          <ModalBody color={color} data-testid="test-id" />,
        );
        expect(getByTestId("test-id")).toHaveClass(color);
        expect(getByTestId("test-id")).toHaveClass("modal__body--colorful");
      });
    });

    it("has classes background-contrast and text-inverse when color is set to background-contrast", () => {
      const { getByTestId } = render(
        <ModalBody color="background-contrast" data-testid="test-id" />,
      );
      expect(getByTestId("test-id")).toHaveClass("background-contrast");
      expect(getByTestId("test-id")).toHaveClass("text-inverse");
      expect(getByTestId("test-id")).toHaveClass("modal__body--colorful");
    });

    it("applies disableSpacing prop", () => {
      const { getByTestId } = render(
        <ModalBody disableSpacing data-testid="test-id" />,
      );
      expect(getByTestId("test-id")).toHaveClass("modal__body--no-spacing");
    });
  });
});