// @vitest-environment jsdom

import { render } from "@testing-library/react";
import { describe, expect, it } from "vitest";

import { CollectionItemGroups } from "./collection-item-groups";

describe("CollectionItemGroups", () => {
  it("renders a line only before adjacent logical groups", () => {
    const { container } = render(
      <CollectionItemGroups>
        <div>Strength A</div>
        <div>Strength B</div>
      </CollectionItemGroups>,
    );
    const groups = container.querySelectorAll(
      '[data-slot="collection-item-group"]',
    );

    expect(groups).toHaveLength(2);
    expect(groups[0]?.className).not.toContain("border-t");
    expect(groups[1]?.className).toContain("border-t");
    expect(container.textContent).not.toMatch(/Item 1|Item 2/u);
  });

  it("renders no line for one logical group", () => {
    const { container } = render(
      <CollectionItemGroups>
        <div>Only group</div>
      </CollectionItemGroups>,
    );

    expect(
      container.querySelector('[data-slot="collection-item-group"]')
        ?.className,
    ).not.toContain("border-t");
  });
});