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

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

describe("rendering ModalProductHeader", () => {
  it("has default class modal__product-header", () => {
    const { getByTestId } = render(
      <ModalProductHeader data-testid="test-id">Header</ModalProductHeader>,
    );
    expect(getByTestId("test-id")).toHaveClass("modal__product-header");
  });

  it("renders children", () => {
    const { getByText } = render(
      <ModalProductHeader>Product Header</ModalProductHeader>,
    );
    expect(getByText("Product Header")).toBeInTheDocument();
  });

  it("renders image if provided", () => {
    const { getByTestId } = render(
      <ModalProductHeader
        image={<div data-testid="test-image">Test Image</div>}
      >
        Header
      </ModalProductHeader>,
    );
    expect(getByTestId("test-image")).toBeInTheDocument();
  });

  it("has additional class when className is set", () => {
    const { getByTestId } = render(
      <ModalProductHeader data-testid="test-id" className="test-class">
        Header
      </ModalProductHeader>,
    );
    expect(getByTestId("test-id")).toHaveClass("modal__product-header");
    expect(getByTestId("test-id")).toHaveClass("test-class");
  });

  it('has modal__product-header--space-small class when space="small"', () => {
    const { getByTestId } = render(
      <ModalProductHeader data-testid="test-id" space="small">
        Header
      </ModalProductHeader>,
    );
    expect(getByTestId("test-id")).toHaveClass(
      "modal__product-header--space-small",
    );
  });

  it("does not have modal__product-header--space-small class when space is not set", () => {
    const { getByTestId } = render(
      <ModalProductHeader data-testid="test-id">Header</ModalProductHeader>,
    );
    expect(getByTestId("test-id")).not.toHaveClass(
      "modal__product-header--space-small",
    );
  });

  it("has content wrapper with modal__product-content class", () => {
    const { container } = render(
      <ModalProductHeader>Product Header</ModalProductHeader>,
    );
    expect(
      container.querySelector(".modal__product-content"),
    ).toBeInTheDocument();
    expect(
      container.querySelector(".modal__product-content"),
    ).toHaveTextContent("Product Header");
  });

  it("has titleId attribute when titleId prop is provided", () => {
    const { container } = render(
      <ModalProductHeader titleId="test-title-id">
        Product Header
      </ModalProductHeader>,
    );
    expect(container.querySelector(".modal__product-content")).toHaveAttribute(
      "id",
      "test-title-id",
    );
  });
});