import test from "node:test";
import assert from "node:assert/strict";
import { readFile } from "node:fs/promises";

const read = (path) => readFile(new URL(`../${path}`, import.meta.url), "utf8");

test("portrait square and landscape step images share invariant cover framing", async () => {
  const image = await read("src/components/dashboard/step/StepImage.tsx");
  for (const sourceFormat of ["portrait", "square", "landscape"]) {
    assert.ok(sourceFormat);
    assert.match(image, /aspect-video w-full overflow-hidden rounded-xl/);
    assert.match(image, /block aspect-\[3\/2\] shrink-0 overflow-hidden rounded-lg/);
    assert.match(image, /block h-full w-full object-cover object-center/);
  }
  assert.doesNotMatch(image, /object-contain/);
  assert.match(image, /step\.imagePath \?/);
  assert.match(image, /if \(!editable && !step\.imagePath\) return null/);
});

test("all step image views delegate framing to the shared StepImage component", async () => {
  const [image, travelerList, travelerToday, planner] = await Promise.all([
    read("src/components/dashboard/step/StepImage.tsx"),
    read("src/pages/traveler/TripDetailPage.tsx"),
    read("src/pages/traveler/Dashboard.tsx"),
    read("src/components/dashboard/step/TripStepCard.tsx"),
  ]);
  assert.match(image, /return <StepImage step=\{step\} variant="thumbnail"/);
  for (const view of [travelerList, travelerToday]) assert.match(view, /StepImageThumbnail/);
  assert.match(planner, /<StepImage step=\{step\} variant="planner-thumbnail"/);
  assert.match(travelerList, /selectedStep\.imagePath && <StepImage step=\{selectedStep\}/);
});