import { expect, it } from "vitest";
import { makeTag } from "./make-tag.jsx";

const ItemGroup = makeTag<{ Label?: string }>("ItemGroup");

it("renders with children", () => {
  expect(<ItemGroup>Content</ItemGroup>).toRenderTo(`
        <ItemGroup>Content</ItemGroup>
    `);
});

it("renders with attribute only", () => {
  expect(<ItemGroup Label="MyLabel">Content</ItemGroup>).toRenderTo(`
        <ItemGroup Label="MyLabel">Content</ItemGroup>
    `);
});

it("renders with attribute and children", () => {
  expect(<ItemGroup Label="MyLabel" />).toRenderTo(`
        <ItemGroup Label="MyLabel" />
    `);
});

it("renders nested", () => {
  expect(
    <ItemGroup Label="MyLabel">
      <ItemGroup Label="Nested1" />
      <ItemGroup Label="Nested2" />
    </ItemGroup>,
  ).toRenderTo(`
      <ItemGroup Label="MyLabel">
        <ItemGroup Label="Nested1" />
        <ItemGroup Label="Nested2" />
      </ItemGroup>
  `);
});

it("doesn't render attribute if passing undefined to it", () => {
  expect(<ItemGroup Label={undefined} />).toRenderTo(`
        <ItemGroup />
    `);
});