PettyUI/packages/core/tests/utilities/presence.test.tsx

import { render } from "@solidjs/testing-library";
import { createSignal } from "solid-js";
import { describe, expect, it } from "vitest";
import { Presence } from "../../src/utilities/presence/presence";

describe("Presence", () => {
  it("renders children when present is true", () => {
    const { getByTestId } = render(() => (
      <Presence present={true}>
        <div data-testid="content">hello</div>
      </Presence>
    ));
    expect(getByTestId("content")).toBeTruthy();
  });

  it("does not render children when present is false", () => {
    const { queryByTestId } = render(() => (
      <Presence present={false}>
        <div data-testid="content">hello</div>
      </Presence>
    ));
    expect(queryByTestId("content")).toBeNull();
  });

  it("adds data-opening attribute when transitioning in", async () => {
    const [present, setPresent] = createSignal(false);
    const { queryByTestId } = render(() => (
      <Presence present={present()}>
        <div data-testid="content">hello</div>
      </Presence>
    ));
    setPresent(true);
    await Promise.resolve();
    const el = queryByTestId("content");
    expect(el).toBeTruthy();
  });

  it("keeps children mounted with forceMount", () => {
    const { getByTestId } = render(() => (
      <Presence present={false} forceMount>
        <div data-testid="content">hello</div>
      </Presence>
    ));
    expect(getByTestId("content")).toBeTruthy();
  });
});