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

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

describe("rendering Message", () => {
  describe("initial state", () => {
    it("has default class message", () => {
      const { getByTestId } = render(<Message data-testid="test-id" />);
      expect(getByTestId("test-id")).toHaveClass("message");
    });
  });
  describe("passed props", () => {
    it("renders children", () => {
      const { getByText } = render(
        <Message data-testid="test-id">test</Message>,
      );
      expect(getByText("test")).toBeInTheDocument();
    });
    it("has additional class when className when set", () => {
      const { getByTestId } = render(
        <Message data-testid="test-id" className="test-class" />,
      );
      expect(getByTestId("test-id")).toHaveClass("message");
      expect(getByTestId("test-id")).toHaveClass("test-class");
    });
    it("Icon's svg element that has class message__icon", () => {
      const { getByTestId } = render(
        <Message data-testid="test-id" type="info" />,
      );
      const svg = getByTestId("test-id").querySelector("svg");
      expect(svg).toBeInTheDocument();
      expect(svg).toHaveClass("message__icon");
    });
    it("Icon's svg element that has class icon--medium", () => {
      const { getByTestId } = render(
        <Message data-testid="test-id" type="info" />,
      );
      const svg = getByTestId("test-id").querySelector("svg");
      expect(svg).toBeInTheDocument();
      expect(svg).toHaveClass("icon--medium");
    });
    it("has Icon with use element that has /sprite.svg#info xlinkhref when type is set to info", () => {
      const { getByTestId } = render(
        <Message data-testid="test-id" type="info" />,
      );
      const use = getByTestId("test-id").querySelector("use");
      expect(use).toBeInTheDocument();
      expect(use.getAttribute("xlink:href")).toEqual("/sprite.svg#info");
    });
    it("has Icon with use element that has /sprite.svg#warning-important xlinkhref when type is set to warning", () => {
      const { getByTestId } = render(
        <Message data-testid="test-id" type="warning" />,
      );
      const use = getByTestId("test-id").querySelector("use");
      expect(use).toBeInTheDocument();
      expect(use.getAttribute("xlink:href")).toEqual(
        "/sprite.svg#warning-important",
      );
    });
    it("has Icon with use element that has /sprite.svg#error-severe xlinkhref when type is set to error", () => {
      const { getByTestId } = render(
        <Message data-testid="test-id" type="error" />,
      );
      const use = getByTestId("test-id").querySelector("use");
      expect(use).toBeInTheDocument();
      expect(use.getAttribute("xlink:href")).toEqual(
        "/sprite.svg#error-severe",
      );
    });
  });
});