import {
  cleanup,
  render,
  screen,
} from "@testing-library/react";
import assert from "node:assert";
import {
  afterEach,
  describe,
  test,
} from "node:test";
import { Picture } from "./index";

describe("Picture", () => {
  afterEach(() => {
    cleanup();
  });

  test("renders source elements and image child", () => {
    const { container } = render(
      <Picture
        sources={[
          {
            srcSet: "/small.jpg",
            media: "mobile",
          },
          {
            srcSet: "/large.jpg",
            media: "(min-width: 1281px)",
          },
        ]}
      >
        <img src={"/base.jpg"} alt={"Preview"} />
      </Picture>
    );

    const sources = container.querySelectorAll("source");
    assert.strictEqual(sources.length, 2);
    assert.strictEqual(sources[0]?.getAttribute("media"), "(max-width: 767px)");
    assert.notStrictEqual(screen.queryByRole("img", { name: "Preview" }), null);
  });
});