428 lines
13 KiB
TypeScript
428 lines
13 KiB
TypeScript
import { afterEach, beforeEach, describe, expect, mock, test } from "bun:test";
|
|
import { readFileSync } from "node:fs";
|
|
import * as React from "react";
|
|
import { renderToStaticMarkup } from "react-dom/server";
|
|
|
|
const readToolbarSource = () => readFileSync("src/components/ai-toolbar.tsx", "utf8");
|
|
|
|
type AIToolbarProps = {
|
|
adminAiEnabled: boolean;
|
|
aiEnabled: boolean;
|
|
isAuthenticated: boolean;
|
|
isPending: boolean;
|
|
aiPrompt: string;
|
|
setAiPrompt: (prompt: string) => void;
|
|
aiLoading: boolean;
|
|
imagePreviews: string[];
|
|
onImagesSelect: (files: File[]) => void;
|
|
onImageRemove: (index: number) => void;
|
|
onAiCreate: () => void;
|
|
onAiTemplateSelect: (prompt: string) => void;
|
|
onAiSummarize: () => void;
|
|
onSummaryDismiss: () => void;
|
|
summary: string | null;
|
|
summaryUpdated: string | null;
|
|
events: Array<{ id?: string }>;
|
|
};
|
|
|
|
const createToolbarProps = (
|
|
overrides: Partial<AIToolbarProps> = {},
|
|
): AIToolbarProps => ({
|
|
adminAiEnabled: true,
|
|
aiEnabled: true,
|
|
isAuthenticated: true,
|
|
isPending: false,
|
|
aiPrompt: "",
|
|
setAiPrompt: () => {},
|
|
aiLoading: false,
|
|
imagePreviews: [],
|
|
onImagesSelect: () => {},
|
|
onImageRemove: () => {},
|
|
onAiCreate: () => {},
|
|
onAiTemplateSelect: () => {},
|
|
onAiSummarize: () => {},
|
|
onSummaryDismiss: () => {},
|
|
summary: null,
|
|
summaryUpdated: null,
|
|
events: [],
|
|
...overrides,
|
|
});
|
|
|
|
const actualReact = React;
|
|
const documentAddEventListener = mock();
|
|
const documentRemoveEventListener = mock();
|
|
let lastEffectCleanup: (() => void) | undefined;
|
|
const registeredDocumentListeners = new Map<
|
|
string,
|
|
Array<{ listener: EventListener; options?: AddEventListenerOptions }>
|
|
>();
|
|
|
|
const getDocumentListener = (
|
|
type: string,
|
|
predicate: (entry: {
|
|
listener: EventListener;
|
|
options?: AddEventListenerOptions;
|
|
}) => boolean = () => true,
|
|
) => {
|
|
const entry = registeredDocumentListeners.get(type)?.find(predicate);
|
|
expect(entry).toBeDefined();
|
|
return entry!.listener;
|
|
};
|
|
|
|
const createClipboardData = (files: File[]): DataTransfer =>
|
|
({
|
|
files,
|
|
items: files.map((file) => ({
|
|
kind: "file",
|
|
type: file.type,
|
|
getAsFile: () => file,
|
|
})),
|
|
} as unknown as DataTransfer);
|
|
|
|
beforeEach(() => {
|
|
documentAddEventListener.mockClear();
|
|
documentRemoveEventListener.mockClear();
|
|
lastEffectCleanup = undefined;
|
|
registeredDocumentListeners.clear();
|
|
globalThis.document = {
|
|
addEventListener: documentAddEventListener,
|
|
removeEventListener: documentRemoveEventListener,
|
|
} as Document;
|
|
documentAddEventListener.mockImplementation(
|
|
(
|
|
type: string,
|
|
listener: EventListener,
|
|
options?: AddEventListenerOptions,
|
|
) => {
|
|
const listeners = registeredDocumentListeners.get(type) ?? [];
|
|
listeners.push({ listener, options });
|
|
registeredDocumentListeners.set(type, listeners);
|
|
},
|
|
);
|
|
mock.module("react", () => ({
|
|
...actualReact,
|
|
useEffect: (effect: () => void | (() => void)) => {
|
|
const cleanup = effect();
|
|
lastEffectCleanup = typeof cleanup === "function" ? cleanup : undefined;
|
|
},
|
|
useRef: <T,>(initialValue: T) => ({ current: initialValue }),
|
|
useState: <T,>(initialValue: T) => [initialValue, mock()],
|
|
}));
|
|
mock.module("@/hooks/use-mobile", () => ({
|
|
useIsMobile: () => false,
|
|
}));
|
|
});
|
|
|
|
afterEach(() => {
|
|
delete (globalThis as { document?: Document }).document;
|
|
delete (globalThis as { navigator?: Navigator }).navigator;
|
|
lastEffectCleanup = undefined;
|
|
mock.restore();
|
|
});
|
|
|
|
const renderToolbar = async (overrides: Partial<AIToolbarProps> = {}) => {
|
|
const { AIToolbar } = await import("@/components/ai-toolbar");
|
|
|
|
AIToolbar(createToolbarProps(overrides));
|
|
};
|
|
|
|
const renderToolbarMarkup = async (
|
|
overrides: Partial<AIToolbarProps> = {},
|
|
) => {
|
|
const { AIToolbar } = await import("@/components/ai-toolbar");
|
|
|
|
return renderToStaticMarkup(
|
|
actualReact.createElement(AIToolbar, createToolbarProps(overrides)),
|
|
);
|
|
};
|
|
|
|
const renderToolbarBoundary = async (
|
|
overrides: Partial<AIToolbarProps> = {},
|
|
) => {
|
|
let capturedTextareaProps: React.ComponentProps<"textarea"> | undefined;
|
|
|
|
mock.module("@/components/ui/textarea", () => ({
|
|
Textarea: (props: React.ComponentProps<"textarea">) => {
|
|
capturedTextareaProps = props;
|
|
return actualReact.createElement("textarea", props);
|
|
},
|
|
}));
|
|
|
|
const { AIToolbar } = await import("@/components/ai-toolbar");
|
|
|
|
renderToStaticMarkup(
|
|
actualReact.createElement(AIToolbar, createToolbarProps(overrides)),
|
|
);
|
|
|
|
expect(capturedTextareaProps).toBeDefined();
|
|
|
|
return capturedTextareaProps!;
|
|
};
|
|
|
|
describe("AI toolbar layout contracts", () => {
|
|
test("desktop composer uses a 70/30 split driven by the isMobile branch", () => {
|
|
const source = readToolbarSource();
|
|
|
|
expect(source).toContain("isMobile");
|
|
expect(source).toContain('? "grid gap-3"');
|
|
expect(source).toContain(
|
|
': "grid gap-3 grid-cols-[minmax(0,0.7fr)_minmax(0,0.3fr)]"',
|
|
);
|
|
expect(source).not.toContain(
|
|
': "grid gap-3 grid-cols-[minmax(0,1fr)_minmax(0,1fr)]"',
|
|
);
|
|
});
|
|
|
|
test("example prompts render as a two-column masonry-style cluster below the textarea", () => {
|
|
const source = readToolbarSource();
|
|
|
|
expect(source).toContain("Try:");
|
|
expect(source).toContain('className="columns-2 gap-2"');
|
|
expect(source).toContain('className="mb-2 break-inside-avoid"');
|
|
expect(source).toContain(
|
|
'className="h-auto w-full justify-start text-left whitespace-normal rounded-2xl px-3 py-2 text-[11px] leading-relaxed"',
|
|
);
|
|
});
|
|
|
|
test("attachments render as a separate surfaced panel with count badge, picker, and empty state", async () => {
|
|
const markup = await renderToolbarMarkup();
|
|
|
|
expect(markup).toContain("Attachments");
|
|
expect(markup).toContain("0 files");
|
|
expect(markup).toContain("Attach images");
|
|
expect(markup).toContain(
|
|
"Drop or paste images here to pair them with the prompt.",
|
|
);
|
|
});
|
|
|
|
test("attachment previews stack one per row instead of rendering a horizontal strip or multi-column gallery", () => {
|
|
const source = readToolbarSource();
|
|
const previewGridClassNames = [...source.matchAll(
|
|
/className="([^"]*\bmt-3\b[^"]*\bgrid\b[^"]*\bgap-2\b[^"]*)"/g,
|
|
)].map(([, className]) => className);
|
|
const multiColumnPreviewPattern =
|
|
/(?:^|\s)(?:[a-z]+:)*(?:grid-cols-(?:\[[^\]]+\]|\S+)|grid-flow-col|auto-cols-(?:\[[^\]]+\]|\S+)|columns-(?:\[[^\]]+\]|\S+)|overflow-x-auto|flex-row)/;
|
|
|
|
expect(source).toContain('className="mt-3 grid gap-2"');
|
|
expect(previewGridClassNames).toHaveLength(1);
|
|
expect(previewGridClassNames[0]).not.toMatch(multiColumnPreviewPattern);
|
|
});
|
|
});
|
|
|
|
describe("AI toolbar state rendering", () => {
|
|
test("unauthenticated users see the sign-in-required callout", async () => {
|
|
const markup = await renderToolbarMarkup({ isAuthenticated: false });
|
|
|
|
expect(markup).toContain("Sign in required to generate event drafts with AI");
|
|
expect(markup).toContain(
|
|
"Sign in to turn natural language or flyers into event drafts",
|
|
);
|
|
});
|
|
|
|
test("admin-disabled state explains that AI is disabled by the administrator", async () => {
|
|
const markup = await renderToolbarMarkup({
|
|
adminAiEnabled: false,
|
|
isAuthenticated: true,
|
|
});
|
|
|
|
expect(markup).toContain("AI integrations are unavailable");
|
|
expect(markup).toContain(
|
|
"AI integrations are currently disabled by the administrator.",
|
|
);
|
|
});
|
|
|
|
test("browser-disabled state explains that AI was turned off from settings", async () => {
|
|
const markup = await renderToolbarMarkup({
|
|
adminAiEnabled: true,
|
|
aiEnabled: false,
|
|
isAuthenticated: true,
|
|
});
|
|
|
|
expect(markup).toContain("AI integrations are unavailable");
|
|
expect(markup).toContain(
|
|
"AI has been turned off in this browser from Settings.",
|
|
);
|
|
});
|
|
|
|
test("summary panel renders the summary body, updated timestamp, and dismiss affordance", async () => {
|
|
const markup = await renderToolbarMarkup({
|
|
summary: "Three events need attention.",
|
|
summaryUpdated: "Updated just now",
|
|
});
|
|
|
|
expect(markup).toContain("AI Summary");
|
|
expect(markup).toContain("Three events need attention.");
|
|
expect(markup).toContain("Updated just now");
|
|
expect(markup).toContain("Dismiss AI summary");
|
|
});
|
|
});
|
|
|
|
describe("AI toolbar paste capture", () => {
|
|
test("textarea paste path forwards clipboard images to onImagesSelect through the component boundary", async () => {
|
|
const onImagesSelect = mock();
|
|
const image = new File(["image-bytes"], "clipboard.png", {
|
|
type: "image/png",
|
|
});
|
|
|
|
const textareaProps = await renderToolbarBoundary({ onImagesSelect });
|
|
const preventDefault = mock();
|
|
|
|
textareaProps.onPaste?.({
|
|
clipboardData: createClipboardData([image]),
|
|
preventDefault,
|
|
} as unknown as React.ClipboardEvent<HTMLTextAreaElement>);
|
|
|
|
expect(preventDefault).toHaveBeenCalledTimes(1);
|
|
expect(onImagesSelect).toHaveBeenCalledTimes(1);
|
|
expect(onImagesSelect).toHaveBeenCalledWith([image]);
|
|
});
|
|
|
|
test("textarea-targeted paste bypasses the document listeners so the focused textarea owns the paste", async () => {
|
|
const onImagesSelect = mock();
|
|
const image = new File(["image-bytes"], "clipboard.png", {
|
|
type: "image/png",
|
|
});
|
|
|
|
const textareaProps = await renderToolbarBoundary({ onImagesSelect });
|
|
const handleCapturePaste = getDocumentListener(
|
|
"paste",
|
|
(entry) => entry.options?.capture === true,
|
|
);
|
|
const handleDocumentPaste = getDocumentListener(
|
|
"paste",
|
|
(entry) => !entry.options?.capture,
|
|
);
|
|
const preventDefault = mock();
|
|
const textareaTarget = {
|
|
tagName: "TEXTAREA",
|
|
isContentEditable: false,
|
|
} as HTMLTextAreaElement;
|
|
const pasteEvent = {
|
|
target: textareaTarget,
|
|
currentTarget: textareaTarget,
|
|
clipboardData: createClipboardData([image]),
|
|
preventDefault,
|
|
};
|
|
|
|
handleCapturePaste(pasteEvent as unknown as Event);
|
|
expect(preventDefault).not.toHaveBeenCalled();
|
|
expect(onImagesSelect).not.toHaveBeenCalled();
|
|
|
|
textareaProps.onPaste?.(
|
|
pasteEvent as unknown as React.ClipboardEvent<HTMLTextAreaElement>,
|
|
);
|
|
expect(preventDefault).toHaveBeenCalledTimes(1);
|
|
expect(onImagesSelect).toHaveBeenCalledTimes(1);
|
|
expect(onImagesSelect).toHaveBeenCalledWith([image]);
|
|
|
|
handleDocumentPaste(pasteEvent as unknown as Event);
|
|
expect(preventDefault).toHaveBeenCalledTimes(1);
|
|
expect(onImagesSelect).toHaveBeenCalledTimes(1);
|
|
});
|
|
|
|
test("document paste forwards clipboard images only for non-editable targets", async () => {
|
|
const onImagesSelect = mock();
|
|
const image = new File(["image-bytes"], "clipboard.png", {
|
|
type: "image/png",
|
|
});
|
|
|
|
await renderToolbar({ onImagesSelect });
|
|
|
|
const handleDocumentPaste = getDocumentListener(
|
|
"paste",
|
|
(entry) => !entry.options?.capture,
|
|
);
|
|
const preventDefault = mock();
|
|
|
|
handleDocumentPaste({
|
|
target: { tagName: "DIV", isContentEditable: false },
|
|
clipboardData: createClipboardData([image]),
|
|
preventDefault,
|
|
} as unknown as Event);
|
|
|
|
expect(preventDefault).toHaveBeenCalledTimes(1);
|
|
expect(onImagesSelect).toHaveBeenCalledTimes(1);
|
|
expect(onImagesSelect).toHaveBeenCalledWith([image]);
|
|
});
|
|
|
|
test("Ctrl/Cmd+V fallback forwards clipboard images for non-editable targets", async () => {
|
|
const onImagesSelect = mock();
|
|
const clipboardRead = mock(async () => [
|
|
{
|
|
types: ["image/png"],
|
|
getType: async () => new Blob(["image-bytes"], { type: "image/png" }),
|
|
},
|
|
]);
|
|
|
|
(globalThis as { navigator?: Navigator }).navigator = {
|
|
clipboard: { read: clipboardRead },
|
|
} as Navigator;
|
|
|
|
await renderToolbar({ onImagesSelect });
|
|
|
|
const handleDocumentKeydown = getDocumentListener("keydown");
|
|
|
|
await handleDocumentKeydown({
|
|
key: "v",
|
|
ctrlKey: true,
|
|
metaKey: false,
|
|
shiftKey: false,
|
|
altKey: false,
|
|
target: { tagName: "DIV", isContentEditable: false },
|
|
} as unknown as Event);
|
|
|
|
expect(clipboardRead).toHaveBeenCalledTimes(1);
|
|
expect(onImagesSelect).toHaveBeenCalledTimes(1);
|
|
expect(onImagesSelect.mock.calls[0]?.[0]).toHaveLength(1);
|
|
expect(onImagesSelect.mock.calls[0]?.[0][0]).toBeInstanceOf(File);
|
|
expect(onImagesSelect.mock.calls[0]?.[0][0]?.type).toBe("image/png");
|
|
});
|
|
|
|
test("global paste listeners only arm when AI paste capture is usable, and disarm on cleanup", async () => {
|
|
await renderToolbar();
|
|
|
|
expect(documentAddEventListener).toHaveBeenCalledTimes(3);
|
|
expect(documentAddEventListener).toHaveBeenCalledWith(
|
|
"paste",
|
|
expect.any(Function),
|
|
);
|
|
expect(documentAddEventListener).toHaveBeenCalledWith(
|
|
"paste",
|
|
expect.any(Function),
|
|
{ capture: true },
|
|
);
|
|
expect(documentAddEventListener).toHaveBeenCalledWith(
|
|
"keydown",
|
|
expect.any(Function),
|
|
);
|
|
|
|
lastEffectCleanup?.();
|
|
|
|
expect(documentRemoveEventListener).toHaveBeenCalledTimes(3);
|
|
expect(documentRemoveEventListener).toHaveBeenCalledWith(
|
|
"paste",
|
|
expect.any(Function),
|
|
);
|
|
expect(documentRemoveEventListener).toHaveBeenCalledWith(
|
|
"paste",
|
|
expect.any(Function),
|
|
{ capture: true },
|
|
);
|
|
expect(documentRemoveEventListener).toHaveBeenCalledWith(
|
|
"keydown",
|
|
expect.any(Function),
|
|
);
|
|
});
|
|
|
|
test("global paste listeners stay disarmed when AI cannot be used", async () => {
|
|
await renderToolbar({ isAuthenticated: false });
|
|
await renderToolbar({ isPending: true });
|
|
await renderToolbar({ adminAiEnabled: false });
|
|
await renderToolbar({ aiEnabled: false });
|
|
await renderToolbar({ aiLoading: true });
|
|
|
|
expect(documentAddEventListener).not.toHaveBeenCalled();
|
|
expect(documentRemoveEventListener).not.toHaveBeenCalled();
|
|
});
|
|
});
|