import { describe, expect, it } from "vitest";
import { render, screen } from "@testing-library/react";
import Item from "@/components/blog/relatedContent/Item";

const DATA = {
  uuid: "8f1c0f2e-0000-4000-8000-000000000001",
  title: "تیتری که بسیار بلند است و باید ستون متن را پر کند بدون آنکه عکس را باریک کند",
  created: 1750000000,
};

describe("آیتم مطالب مرتبط", () => {
  it("ظرف عکس در فلکس فشرده نمی‌شود", () => {
    render(<Item data={DATA} idx={0} loading={false} />);

    const image = screen.getByRole("img", { name: DATA.title });

    // jsdom چیدمان را اندازه نمی‌گیرد؛ آنچه قابل تست است همین قرارداد کلاس است.
    expect(image.closest("a")).toHaveClass("shrink-0");
  });

  it("ستون متن اجازهٔ کوچک شدن دارد تا سرریز نکند", () => {
    const { container } = render(<Item data={DATA} idx={0} loading={false} />);

    expect(container.querySelector("li > div")).toHaveClass("min-w-0");
  });
});