84 lines
3.1 KiB
TypeScript
84 lines
3.1 KiB
TypeScript
// @vitest-environment jsdom
|
|
|
|
import { act, createElement } from "react";
|
|
import { createRoot } from "react-dom/client";
|
|
import { afterEach, beforeEach, describe, expect, test } from "vitest";
|
|
|
|
import { AssistantDotMatrix, assistantDotMatrixStates } from "./assistant-dot-matrix";
|
|
|
|
describe("AssistantDotMatrix", () => {
|
|
let host: HTMLDivElement;
|
|
let root: ReturnType<typeof createRoot>;
|
|
|
|
beforeEach(() => {
|
|
host = document.createElement("div");
|
|
document.body.append(host);
|
|
root = createRoot(host);
|
|
});
|
|
|
|
afterEach(async () => {
|
|
await act(async () => root.unmount());
|
|
host.remove();
|
|
});
|
|
|
|
test("renders an accessible deterministic 5 by 5 loading matrix", async () => {
|
|
await act(async () => root.render(createElement(AssistantDotMatrix, { label: "Loading response" })));
|
|
|
|
const matrix = host.querySelector<HTMLElement>("[data-slot='assistant-dot-matrix']");
|
|
expect(matrix?.dataset.state).toBe("loading");
|
|
expect(matrix?.tagName).toBe("OUTPUT");
|
|
expect(matrix?.textContent).toBe("Loading response");
|
|
expect(matrix?.querySelector("svg")?.getAttribute("aria-hidden")).toBe("true");
|
|
expect(matrix?.querySelectorAll("[data-slot='assistant-dot-matrix-dot']")).toHaveLength(25);
|
|
});
|
|
|
|
test("switches from the thinking wave to the streaming wave without changing its structure", async () => {
|
|
await act(async () => root.render(createElement(AssistantDotMatrix, { state: "thinking", label: "Thinking" })));
|
|
const matrix = host.querySelector<HTMLElement>("[data-slot='assistant-dot-matrix']");
|
|
const firstDot = matrix?.querySelector<SVGCircleElement>("[data-slot='assistant-dot-matrix-dot']");
|
|
expect(matrix?.dataset.state).toBe("thinking");
|
|
expect(firstDot?.style.animationDuration).toBe("1.2s");
|
|
|
|
await act(async () =>
|
|
root.render(createElement(AssistantDotMatrix, { state: "streaming", label: "Writing response" })),
|
|
);
|
|
const updatedMatrix = host.querySelector<HTMLElement>("[data-slot='assistant-dot-matrix']");
|
|
const updatedFirstDot = updatedMatrix?.querySelector<SVGCircleElement>("[data-slot='assistant-dot-matrix-dot']");
|
|
expect(updatedMatrix).toBe(matrix);
|
|
expect(updatedMatrix?.dataset.state).toBe("streaming");
|
|
expect(updatedMatrix?.textContent).toBe("Writing response");
|
|
expect(updatedFirstDot?.style.animationDuration).toBe("0.9s");
|
|
expect(updatedMatrix?.querySelectorAll("[data-slot='assistant-dot-matrix-dot']")).toHaveLength(25);
|
|
});
|
|
|
|
test("supports every documented assistant-ui matrix state", async () => {
|
|
expect(assistantDotMatrixStates).toEqual([
|
|
"idle",
|
|
"loading",
|
|
"thinking",
|
|
"streaming",
|
|
"searching",
|
|
"syncing",
|
|
"connecting",
|
|
"waiting",
|
|
"uploading",
|
|
"downloading",
|
|
"listening",
|
|
"speaking",
|
|
"recording",
|
|
"success",
|
|
"error",
|
|
"warning",
|
|
"info",
|
|
"paused",
|
|
"stopped",
|
|
"offline",
|
|
]);
|
|
|
|
for (const state of assistantDotMatrixStates) {
|
|
await act(async () => root.render(createElement(AssistantDotMatrix, { state })));
|
|
expect(host.querySelector("[data-slot='assistant-dot-matrix']")?.getAttribute("data-state")).toBe(state);
|
|
}
|
|
});
|
|
});
|