PettyUI/packages/core/tests/components/hover-card/hover-card.test.tsx

import { fireEvent, render, screen } from "@solidjs/testing-library";
import { describe, expect, it } from "vitest";
import { HoverCard } from "../../../src/components/hover-card/index";

describe("HoverCard", () => {
  it("content not rendered when closed", () => {
    render(() => (
      <HoverCard>
        <HoverCard.Trigger>Hover</HoverCard.Trigger>
        <HoverCard.Content data-testid="content">Details</HoverCard.Content>
      </HoverCard>
    ));
    expect(screen.queryByTestId("content")).toBeNull();
  });
  it("opens with defaultOpen", () => {
    render(() => (
      <HoverCard defaultOpen>
        <HoverCard.Trigger>Hover</HoverCard.Trigger>
        <HoverCard.Content data-testid="content">Details</HoverCard.Content>
      </HoverCard>
    ));
    expect(screen.getByTestId("content")).toBeTruthy();
  });
  it("closes on Escape", () => {
    render(() => (
      <HoverCard defaultOpen>
        <HoverCard.Trigger>Hover</HoverCard.Trigger>
        <HoverCard.Content data-testid="content">Details</HoverCard.Content>
      </HoverCard>
    ));
    fireEvent.keyDown(document, { key: "Escape" });
    expect(screen.queryByTestId("content")).toBeNull();
  });
  it("content has data-state", () => {
    render(() => (
      <HoverCard defaultOpen>
        <HoverCard.Trigger>Hover</HoverCard.Trigger>
        <HoverCard.Content data-testid="content">Details</HoverCard.Content>
      </HoverCard>
    ));
    expect(screen.getByTestId("content").getAttribute("data-state")).toBe("open");
  });
  it("controlled mode", () => {
    render(() => (
      <HoverCard open={true} onOpenChange={() => {}}>
        <HoverCard.Trigger>Hover</HoverCard.Trigger>
        <HoverCard.Content data-testid="content">Details</HoverCard.Content>
      </HoverCard>
    ));
    expect(screen.getByTestId("content")).toBeTruthy();
  });
  it("content is positioned", () => {
    render(() => (
      <HoverCard defaultOpen>
        <HoverCard.Trigger>Hover</HoverCard.Trigger>
        <HoverCard.Content data-testid="content">Details</HoverCard.Content>
      </HoverCard>
    ));
    expect(screen.getByTestId("content").style.position).toBeTruthy();
  });
});