97 lines
2.9 KiB
TypeScript
97 lines
2.9 KiB
TypeScript
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("mounts children when present transitions false→true", async () => {
|
|
const [present, setPresent] = createSignal(false);
|
|
const { queryByTestId } = render(() => (
|
|
<Presence present={present()}>
|
|
<div data-testid="content">hello</div>
|
|
</Presence>
|
|
));
|
|
expect(queryByTestId("content")).toBeNull();
|
|
setPresent(true);
|
|
await Promise.resolve();
|
|
expect(queryByTestId("content")).toBeTruthy();
|
|
});
|
|
|
|
it("unmounts children when present transitions true→false", async () => {
|
|
const [present, setPresent] = createSignal(true);
|
|
const { queryByTestId } = render(() => (
|
|
<Presence present={present()}>
|
|
<div data-testid="content">hello</div>
|
|
</Presence>
|
|
));
|
|
expect(queryByTestId("content")).toBeTruthy();
|
|
setPresent(false);
|
|
await Promise.resolve();
|
|
expect(queryByTestId("content")).toBeNull();
|
|
});
|
|
|
|
it("keeps children mounted with forceMount when present is false", () => {
|
|
const { getByTestId } = render(() => (
|
|
<Presence present={false} forceMount>
|
|
<div data-testid="content">hello</div>
|
|
</Presence>
|
|
));
|
|
expect(getByTestId("content")).toBeTruthy();
|
|
});
|
|
|
|
it("exposes opening signal via children-as-function", async () => {
|
|
const [present, setPresent] = createSignal(false);
|
|
let capturedOpening = false;
|
|
|
|
render(() => (
|
|
<Presence present={present()}>
|
|
{({ opening }) => {
|
|
if (opening()) capturedOpening = true;
|
|
return <div data-testid="content">hello</div>;
|
|
}}
|
|
</Presence>
|
|
));
|
|
|
|
setPresent(true);
|
|
// opening is true for one microtask after transitioning in
|
|
await Promise.resolve();
|
|
expect(capturedOpening).toBe(true);
|
|
});
|
|
|
|
it("exposes closing signal via children-as-function", async () => {
|
|
const [present, setPresent] = createSignal(true);
|
|
let capturedClosing = false;
|
|
|
|
render(() => (
|
|
<Presence present={present()} forceMount>
|
|
{({ closing }) => {
|
|
if (closing()) capturedClosing = true;
|
|
return <div data-testid="content">hello</div>;
|
|
}}
|
|
</Presence>
|
|
));
|
|
|
|
setPresent(false);
|
|
await Promise.resolve();
|
|
expect(capturedClosing).toBe(true);
|
|
});
|
|
});
|