import { readFileSync } from "node:fs";
import { describe, expect, it } from "vitest";

// A card skips its off-screen rendering (`cv-card` / `cv-poster`: content-visibility auto with a
// reserved height), but not inside a carousel. A rail stretches every card to its tallest, and an
// off-screen card's reserve WAS the tallest — Home's shelves measured 338px around 170–216px cards.
// The pair lives in two files and neither can be seen in jsdom, so it is held here.
const read = (file: string) => readFileSync(new URL(file, import.meta.url), "utf8");

describe("a carousel turns the cards' content-visibility off", () => {
  it("the carousel's track is the .media-rail", () => {
    expect(read("./Carousel.tsx")).toMatch(/["`]media-rail /);
  });

  it("index.css makes both card kinds visible inside it", () => {
    expect(read("../../index.css")).toMatch(
      /\.media-rail \.cv-card,\s*\.media-rail \.cv-poster\s*\{\s*content-visibility: visible;/,
    );
  });
});