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

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

  test("renders requested amount of children", () => {
    render(
      <Loop length={3}>
        <span data-testid={"loop-item"}>Item</span>
      </Loop>
    );

    assert.strictEqual(screen.getAllByTestId("loop-item").length, 3);
  });

  test("applies per-item custom props", () => {
    render(
      <Loop
        length={2}
        items={[
          { title: "first" },
          { title: "second" },
        ]}
      >
        <span data-testid={"loop-title"}>Title</span>
      </Loop>
    );

    const nodes = screen.getAllByTestId("loop-title");
    assert.strictEqual(nodes[0]?.getAttribute("title"), "first");
    assert.strictEqual(nodes[1]?.getAttribute("title"), "second");
  });

  test("renders empty fragment when children are not provided", () => {
    const { container } = render(<Loop length={3} />);
    assert.strictEqual(container.textContent, "");
  });
});