Mohamed Boudra
5d76cc8840
The new-workspace composer is a one-shot "create" submit, not a chat send, so a return-key glyph reads more accurately there than an arrow. Add a submitIcon prop on Composer/MessageInput (defaulting to "arrow") and opt NewWorkspace into "return".
926 lines
27 KiB
TypeScript
926 lines
27 KiB
TypeScript
import React, { useState } from "react";
|
|
import { act } from "react";
|
|
import { createRoot, type Root } from "react-dom/client";
|
|
import { JSDOM } from "jsdom";
|
|
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
|
|
import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
|
|
import type { AttachmentMetadata, ComposerAttachment } from "@/attachments/types";
|
|
import type { GitHubSearchItem } from "@server/shared/messages";
|
|
import { Composer } from "./composer";
|
|
import { splitComposerAttachmentsForSubmit } from "./composer-attachments";
|
|
|
|
const {
|
|
theme,
|
|
imageMetadata,
|
|
issueItem,
|
|
prItem,
|
|
mockClient,
|
|
pickImagesMock,
|
|
persistAttachmentFromBlobMock,
|
|
deleteAttachmentsMock,
|
|
encodeImagesMock,
|
|
openExternalUrlMock,
|
|
mockSessionState,
|
|
setAgentStreamTailMock,
|
|
setAgentStreamHeadMock,
|
|
setQueuedMessagesMock,
|
|
} = vi.hoisted(() => {
|
|
const theme = {
|
|
spacing: { 1: 4, 2: 8, 3: 12, 4: 16, 6: 24, 8: 32 },
|
|
iconSize: { sm: 14, md: 18, lg: 22 },
|
|
borderWidth: { 1: 1 },
|
|
borderRadius: { full: 999, md: 6, lg: 8, "2xl": 16 },
|
|
fontSize: { xs: 11, sm: 13, base: 15, lg: 18 },
|
|
fontWeight: { normal: "400", medium: "500" },
|
|
shadow: { md: {} },
|
|
colors: {
|
|
surface0: "#000",
|
|
surface1: "#111",
|
|
surface2: "#222",
|
|
surface3: "#333",
|
|
surface4: "#888",
|
|
foreground: "#fff",
|
|
foregroundMuted: "#aaa",
|
|
popoverForeground: "#fff",
|
|
border: "#555",
|
|
borderAccent: "#444",
|
|
accent: "#0a84ff",
|
|
accentForeground: "#fff",
|
|
destructive: "#ff453a",
|
|
palette: {
|
|
green: { 500: "#30d158", 600: "#24b14c", 800: "#126024" },
|
|
red: { 500: "#ff453a", 600: "#d92d20" },
|
|
zinc: { 600: "#52525b" },
|
|
},
|
|
},
|
|
};
|
|
|
|
const imageMetadata: AttachmentMetadata = {
|
|
id: "img-1",
|
|
mimeType: "image/png",
|
|
storageType: "web-indexeddb",
|
|
storageKey: "img-1",
|
|
fileName: "img-1.png",
|
|
byteSize: 42,
|
|
createdAt: 1,
|
|
};
|
|
|
|
const issueItem: GitHubSearchItem = {
|
|
kind: "issue",
|
|
number: 101,
|
|
title: "Fix composer attachments",
|
|
url: "https://github.com/acme/paseo/issues/101",
|
|
state: "open",
|
|
body: "Issue body",
|
|
labels: ["composer"],
|
|
baseRefName: null,
|
|
headRefName: null,
|
|
};
|
|
|
|
const prItem: GitHubSearchItem = {
|
|
kind: "pr",
|
|
number: 202,
|
|
title: "Refactor composer attachments",
|
|
url: "https://github.com/acme/paseo/pull/202",
|
|
state: "open",
|
|
body: "PR body",
|
|
labels: ["composer"],
|
|
baseRefName: "main",
|
|
headRefName: "composer-attachments",
|
|
};
|
|
|
|
const mockClient = {
|
|
isConnected: true,
|
|
searchGitHub: vi.fn(async () => ({ items: [issueItem, prItem] })),
|
|
sendAgentMessage: vi.fn(async () => {}),
|
|
cancelAgent: vi.fn(async () => {}),
|
|
};
|
|
|
|
const setQueuedMessagesMock = vi.fn();
|
|
const mockSessionState: {
|
|
sessions: Record<
|
|
string,
|
|
{
|
|
agents: Map<string, { status: string; lastUsage: null }>;
|
|
queuedMessages: Map<string, unknown[]>;
|
|
agentStreamHead: Map<string, unknown[]>;
|
|
agentStreamTail: Map<string, unknown[]>;
|
|
}
|
|
>;
|
|
setQueuedMessages: ReturnType<typeof vi.fn>;
|
|
setAgentStreamTail?: ReturnType<typeof vi.fn>;
|
|
setAgentStreamHead?: ReturnType<typeof vi.fn>;
|
|
} = {
|
|
sessions: {
|
|
server: {
|
|
agents: new Map([["agent", { status: "idle", lastUsage: null }]]),
|
|
queuedMessages: new Map(),
|
|
agentStreamHead: new Map(),
|
|
agentStreamTail: new Map(),
|
|
},
|
|
},
|
|
setQueuedMessages: setQueuedMessagesMock,
|
|
};
|
|
const setAgentStreamTailMock = vi.fn(
|
|
(serverId: string, updater: (prev: Map<string, unknown[]>) => Map<string, unknown[]>) => {
|
|
const session = mockSessionState.sessions[serverId];
|
|
session.agentStreamTail = updater(session.agentStreamTail);
|
|
},
|
|
);
|
|
const setAgentStreamHeadMock = vi.fn(
|
|
(serverId: string, updater: (prev: Map<string, unknown[]>) => Map<string, unknown[]>) => {
|
|
const session = mockSessionState.sessions[serverId];
|
|
session.agentStreamHead = updater(session.agentStreamHead);
|
|
},
|
|
);
|
|
mockSessionState.setAgentStreamTail = setAgentStreamTailMock;
|
|
mockSessionState.setAgentStreamHead = setAgentStreamHeadMock;
|
|
|
|
return {
|
|
theme,
|
|
imageMetadata,
|
|
issueItem,
|
|
prItem,
|
|
mockClient,
|
|
pickImagesMock: vi.fn(),
|
|
persistAttachmentFromBlobMock: vi.fn(async () => imageMetadata),
|
|
deleteAttachmentsMock: vi.fn(async () => {}),
|
|
encodeImagesMock: vi.fn(async (images: AttachmentMetadata[]) => images),
|
|
openExternalUrlMock: vi.fn(async () => {}),
|
|
mockSessionState,
|
|
setAgentStreamTailMock,
|
|
setAgentStreamHeadMock,
|
|
setQueuedMessagesMock,
|
|
};
|
|
});
|
|
|
|
vi.mock("react-native-unistyles", () => ({
|
|
StyleSheet: {
|
|
create: (factory: unknown) => (typeof factory === "function" ? factory(theme) : factory),
|
|
},
|
|
useUnistyles: () => ({ theme }),
|
|
}));
|
|
|
|
vi.mock("@/constants/platform", () => ({
|
|
isWeb: true,
|
|
isNative: false,
|
|
}));
|
|
|
|
vi.mock("@/constants/layout", () => ({
|
|
FOOTER_HEIGHT: 72,
|
|
MAX_CONTENT_WIDTH: 900,
|
|
useIsCompactFormFactor: () => false,
|
|
}));
|
|
|
|
vi.mock("lucide-react-native", () => {
|
|
const createIcon = (name: string) => (props: Record<string, unknown>) =>
|
|
React.createElement("span", { ...props, "data-icon": name });
|
|
return {
|
|
ArrowUp: createIcon("ArrowUp"),
|
|
CornerDownLeft: createIcon("CornerDownLeft"),
|
|
Square: createIcon("Square"),
|
|
Pencil: createIcon("Pencil"),
|
|
AudioLines: createIcon("AudioLines"),
|
|
CircleDot: createIcon("CircleDot"),
|
|
GitPullRequest: createIcon("GitPullRequest"),
|
|
X: createIcon("X"),
|
|
Mic: createIcon("Mic"),
|
|
MicOff: createIcon("MicOff"),
|
|
Plus: createIcon("Plus"),
|
|
Paperclip: createIcon("Paperclip"),
|
|
Github: createIcon("Github"),
|
|
};
|
|
});
|
|
|
|
vi.mock("react-native-reanimated", () => ({
|
|
default: {
|
|
View: "div",
|
|
},
|
|
Keyframe: class Keyframe {
|
|
duration() {
|
|
return this;
|
|
}
|
|
withCallback() {
|
|
return this;
|
|
}
|
|
},
|
|
runOnJS: (fn: (...args: unknown[]) => unknown) => fn,
|
|
useSharedValue: (value: unknown) => ({ value }),
|
|
useAnimatedStyle: (factory: () => unknown) => factory(),
|
|
withTiming: (value: unknown) => value,
|
|
}));
|
|
|
|
vi.mock("react-native-safe-area-context", () => ({
|
|
useSafeAreaInsets: () => ({ top: 0, right: 0, bottom: 0, left: 0 }),
|
|
}));
|
|
|
|
vi.mock("@/runtime/host-runtime", () => ({
|
|
useHostRuntimeClient: () => mockClient,
|
|
useHostRuntimeIsConnected: () => true,
|
|
useHostRuntimeAgentDirectoryStatus: () => "ready",
|
|
}));
|
|
|
|
vi.mock("@/stores/session-store", () => {
|
|
const useSessionStore = (selector: (state: typeof mockSessionState) => unknown) =>
|
|
selector(mockSessionState);
|
|
useSessionStore.getState = () => mockSessionState;
|
|
return { useSessionStore };
|
|
});
|
|
|
|
vi.mock("@/hooks/use-image-attachment-picker", () => ({
|
|
useImageAttachmentPicker: () => ({ pickImages: pickImagesMock }),
|
|
}));
|
|
|
|
vi.mock("@/attachments/service", () => ({
|
|
persistAttachmentFromBlob: persistAttachmentFromBlobMock,
|
|
persistAttachmentFromFileUri: vi.fn(async () => imageMetadata),
|
|
deleteAttachments: deleteAttachmentsMock,
|
|
}));
|
|
|
|
vi.mock("@/attachments/use-attachment-preview-url", () => ({
|
|
useAttachmentPreviewUrl: () => "blob:preview",
|
|
}));
|
|
|
|
vi.mock("expo-image", () => ({
|
|
Image: (props: Record<string, unknown>) => {
|
|
const source = props.source as { uri?: string } | string | undefined;
|
|
const uri = typeof source === "string" ? source : source?.uri;
|
|
return React.createElement("div", {
|
|
"data-testid": props.testID,
|
|
"data-source": uri,
|
|
role: "img",
|
|
});
|
|
},
|
|
}));
|
|
|
|
vi.mock("react-native", async () => {
|
|
const actual = await vi.importActual<Record<string, unknown>>("react-native");
|
|
const Modal = ({
|
|
visible = true,
|
|
children,
|
|
}: {
|
|
visible?: boolean;
|
|
children?: React.ReactNode;
|
|
}) =>
|
|
visible ? React.createElement("div", { "data-testid": "lightbox-modal" }, children) : null;
|
|
return { ...actual, Modal };
|
|
});
|
|
|
|
vi.mock("@/utils/encode-images", () => ({
|
|
encodeImages: encodeImagesMock,
|
|
}));
|
|
|
|
vi.mock("@/utils/open-external-url", () => ({
|
|
openExternalUrl: openExternalUrlMock,
|
|
}));
|
|
|
|
vi.mock("@/hooks/use-settings", () => ({
|
|
useAppSettings: () => ({ settings: { sendBehavior: "interrupt" } }),
|
|
}));
|
|
|
|
vi.mock("@/hooks/use-agent-autocomplete", () => ({
|
|
useAgentAutocomplete: () => ({
|
|
isVisible: false,
|
|
options: [],
|
|
selectedIndex: -1,
|
|
isLoading: false,
|
|
errorMessage: null,
|
|
loadingText: "",
|
|
emptyText: "",
|
|
onSelectOption: vi.fn(),
|
|
onKeyPress: () => false,
|
|
}),
|
|
}));
|
|
|
|
vi.mock("@/hooks/use-shortcut-keys", () => ({
|
|
useShortcutKeys: () => null,
|
|
}));
|
|
|
|
vi.mock("@/hooks/use-keyboard-action-handler", () => ({
|
|
useKeyboardActionHandler: () => {},
|
|
}));
|
|
|
|
vi.mock("@/hooks/use-keyboard-shift-style", () => ({
|
|
useKeyboardShiftStyle: () => ({ style: {} }),
|
|
}));
|
|
|
|
vi.mock("@/contexts/voice-context", () => ({
|
|
useVoiceOptional: () => null,
|
|
}));
|
|
|
|
vi.mock("@/contexts/toast-context", () => ({
|
|
useToast: () => ({ error: vi.fn() }),
|
|
}));
|
|
|
|
vi.mock("@/utils/scroll-jank-investigation", () => ({
|
|
markScrollInvestigationRender: vi.fn(),
|
|
markScrollInvestigationEvent: vi.fn(),
|
|
}));
|
|
|
|
vi.mock("@/components/agent-status-bar", () => ({
|
|
AgentStatusBar: () => null,
|
|
DraftAgentStatusBar: () => null,
|
|
}));
|
|
|
|
vi.mock("@/components/context-window-meter", () => ({
|
|
ContextWindowMeter: () => null,
|
|
}));
|
|
|
|
vi.mock("@/components/composer.status-controls", () => ({
|
|
resolveStatusControlMode: () => "agent",
|
|
}));
|
|
|
|
vi.mock("@/components/ui/autocomplete", () => ({
|
|
Autocomplete: () => null,
|
|
}));
|
|
|
|
vi.mock("@/components/use-web-scrollbar", () => ({
|
|
useWebElementScrollbar: () => null,
|
|
}));
|
|
|
|
vi.mock("@/hooks/use-web-scrollbar-style", () => ({
|
|
useWebScrollbarStyle: () => undefined,
|
|
}));
|
|
|
|
vi.mock("@/hooks/use-dictation", () => ({
|
|
useDictation: () => ({
|
|
isRecording: false,
|
|
isProcessing: false,
|
|
partialTranscript: "",
|
|
volume: 0,
|
|
duration: 0,
|
|
error: null,
|
|
status: "idle",
|
|
startDictation: vi.fn(),
|
|
cancelDictation: vi.fn(),
|
|
confirmDictation: vi.fn(),
|
|
retryFailedDictation: vi.fn(),
|
|
discardFailedDictation: vi.fn(),
|
|
}),
|
|
}));
|
|
|
|
vi.mock("@/utils/server-info-capabilities", () => ({
|
|
resolveVoiceUnavailableMessage: () => null,
|
|
}));
|
|
|
|
vi.mock("@/components/ui/shortcut", () => ({
|
|
Shortcut: () => null,
|
|
}));
|
|
|
|
vi.mock("@/components/ui/tooltip", () => ({
|
|
Tooltip: ({ children }: { children: React.ReactNode }) => <>{children}</>,
|
|
TooltipTrigger: ({
|
|
asChild,
|
|
children,
|
|
onPress,
|
|
accessibilityLabel,
|
|
disabled,
|
|
}: {
|
|
asChild?: boolean;
|
|
children: React.ReactNode | ((state: { hovered: boolean }) => React.ReactNode);
|
|
onPress?: () => void;
|
|
accessibilityLabel?: string;
|
|
disabled?: boolean;
|
|
}) =>
|
|
asChild ? (
|
|
<>{children}</>
|
|
) : (
|
|
<button type="button" aria-label={accessibilityLabel} disabled={disabled} onClick={onPress}>
|
|
{typeof children === "function" ? children({ hovered: false }) : children}
|
|
</button>
|
|
),
|
|
TooltipContent: ({ children }: { children: React.ReactNode }) => <>{children}</>,
|
|
}));
|
|
|
|
vi.mock("@/components/ui/dropdown-menu", () => {
|
|
const DropdownContext = React.createContext<{
|
|
open: boolean;
|
|
setOpen: (open: boolean) => void;
|
|
} | null>(null);
|
|
|
|
return {
|
|
DropdownMenu: ({ children }: { children: React.ReactNode }) => {
|
|
const [open, setOpen] = React.useState(false);
|
|
return (
|
|
<DropdownContext.Provider value={{ open, setOpen }}>{children}</DropdownContext.Provider>
|
|
);
|
|
},
|
|
DropdownMenuTrigger: ({
|
|
children,
|
|
testID,
|
|
accessibilityLabel,
|
|
disabled,
|
|
}: {
|
|
children:
|
|
| React.ReactNode
|
|
| ((state: { hovered: boolean; pressed: boolean; open: boolean }) => React.ReactNode);
|
|
testID?: string;
|
|
accessibilityLabel?: string;
|
|
disabled?: boolean;
|
|
}) => {
|
|
const menu = React.useContext(DropdownContext);
|
|
return (
|
|
<button
|
|
type="button"
|
|
data-testid={testID}
|
|
aria-label={accessibilityLabel}
|
|
disabled={disabled}
|
|
onClick={() => menu?.setOpen(true)}
|
|
>
|
|
{typeof children === "function"
|
|
? children({ hovered: false, pressed: false, open: menu?.open ?? false })
|
|
: children}
|
|
</button>
|
|
);
|
|
},
|
|
DropdownMenuContent: ({ children, testID }: { children: React.ReactNode; testID?: string }) => {
|
|
const menu = React.useContext(DropdownContext);
|
|
return menu?.open ? <div data-testid={testID}>{children}</div> : null;
|
|
},
|
|
DropdownMenuItem: ({
|
|
children,
|
|
onSelect,
|
|
testID,
|
|
disabled,
|
|
}: {
|
|
children: React.ReactNode;
|
|
onSelect?: () => void;
|
|
testID?: string;
|
|
disabled?: boolean;
|
|
}) => (
|
|
<button type="button" data-testid={testID} disabled={disabled} onClick={onSelect}>
|
|
{children}
|
|
</button>
|
|
),
|
|
};
|
|
});
|
|
|
|
vi.mock("@/components/ui/combobox", () => ({
|
|
Combobox: ({
|
|
open,
|
|
options,
|
|
renderOption,
|
|
anchorRef,
|
|
}: {
|
|
open?: boolean;
|
|
options: Array<{ id: string; label: string; description?: string }>;
|
|
renderOption?: (input: {
|
|
option: { id: string; label: string; description?: string };
|
|
selected: boolean;
|
|
active: boolean;
|
|
onPress: () => void;
|
|
}) => React.ReactElement;
|
|
anchorRef: React.RefObject<unknown>;
|
|
}) =>
|
|
open ? (
|
|
<div
|
|
data-testid="composer-github-combobox"
|
|
data-anchor={anchorRef.current ? "attached" : "missing"}
|
|
>
|
|
{options.map((option) =>
|
|
renderOption ? (
|
|
renderOption({ option, selected: false, active: false, onPress: vi.fn() })
|
|
) : (
|
|
<button type="button" key={option.id}>
|
|
{option.label}
|
|
</button>
|
|
),
|
|
)}
|
|
</div>
|
|
) : null,
|
|
ComboboxItem: ({
|
|
label,
|
|
selected,
|
|
onPress,
|
|
testID,
|
|
}: {
|
|
label: string;
|
|
selected?: boolean;
|
|
onPress: () => void;
|
|
testID?: string;
|
|
}) => (
|
|
<button
|
|
type="button"
|
|
data-testid={testID}
|
|
data-selected={selected ? "true" : "false"}
|
|
onClick={onPress}
|
|
>
|
|
{label}
|
|
</button>
|
|
),
|
|
}));
|
|
|
|
vi.mock("./dictation-controls", () => ({
|
|
DictationOverlay: () => null,
|
|
}));
|
|
|
|
vi.mock("./realtime-voice-overlay", () => ({
|
|
RealtimeVoiceOverlay: () => null,
|
|
}));
|
|
|
|
let root: Root | null = null;
|
|
let container: HTMLElement | null = null;
|
|
let queryClient: QueryClient | null = null;
|
|
let latestAttachments: ComposerAttachment[] = [];
|
|
|
|
beforeEach(() => {
|
|
const dom = new JSDOM("<!doctype html><html><body></body></html>");
|
|
vi.stubGlobal("React", React);
|
|
vi.stubGlobal("IS_REACT_ACT_ENVIRONMENT", true);
|
|
vi.stubGlobal("window", dom.window);
|
|
vi.stubGlobal("document", dom.window.document);
|
|
vi.stubGlobal("HTMLElement", dom.window.HTMLElement);
|
|
vi.stubGlobal("Node", dom.window.Node);
|
|
vi.stubGlobal("navigator", dom.window.navigator);
|
|
vi.stubGlobal("Blob", dom.window.Blob);
|
|
|
|
container = document.createElement("div");
|
|
document.body.appendChild(container);
|
|
root = createRoot(container);
|
|
queryClient = new QueryClient({ defaultOptions: { queries: { retry: false } } });
|
|
latestAttachments = [];
|
|
mockClient.searchGitHub.mockClear();
|
|
mockClient.sendAgentMessage.mockClear();
|
|
mockClient.cancelAgent.mockClear();
|
|
pickImagesMock.mockReset();
|
|
persistAttachmentFromBlobMock.mockClear();
|
|
deleteAttachmentsMock.mockClear();
|
|
encodeImagesMock.mockClear();
|
|
openExternalUrlMock.mockClear();
|
|
setAgentStreamTailMock.mockClear();
|
|
setAgentStreamHeadMock.mockClear();
|
|
setQueuedMessagesMock.mockClear();
|
|
mockSessionState.sessions.server.agentStreamHead = new Map();
|
|
mockSessionState.sessions.server.agentStreamTail = new Map();
|
|
mockSessionState.sessions.server.queuedMessages = new Map();
|
|
});
|
|
|
|
afterEach(() => {
|
|
if (root) {
|
|
act(() => {
|
|
root?.unmount();
|
|
});
|
|
}
|
|
queryClient?.clear();
|
|
root = null;
|
|
container = null;
|
|
queryClient = null;
|
|
vi.unstubAllGlobals();
|
|
});
|
|
|
|
function imageAttachment(id: string): AttachmentMetadata {
|
|
return {
|
|
...imageMetadata,
|
|
id,
|
|
storageKey: id,
|
|
fileName: `${id}.png`,
|
|
};
|
|
}
|
|
|
|
function ComposerHarness({
|
|
initialText = "",
|
|
initialAttachments = [],
|
|
isSubmitLoading = false,
|
|
submitBehavior,
|
|
}: {
|
|
initialText?: string;
|
|
initialAttachments?: ComposerAttachment[];
|
|
isSubmitLoading?: boolean;
|
|
submitBehavior?: "clear" | "preserve-and-lock";
|
|
}) {
|
|
const [text, setText] = useState(initialText);
|
|
const [attachments, setAttachments] = useState(initialAttachments);
|
|
latestAttachments = attachments;
|
|
|
|
return (
|
|
<QueryClientProvider client={queryClient!}>
|
|
<Composer
|
|
agentId="agent"
|
|
serverId="server"
|
|
isPaneFocused
|
|
value={text}
|
|
onChangeText={setText}
|
|
attachments={attachments}
|
|
onChangeAttachments={(updater) => {
|
|
setAttachments((current) => {
|
|
const next = typeof updater === "function" ? updater(current) : updater;
|
|
latestAttachments = next;
|
|
return next;
|
|
});
|
|
}}
|
|
isSubmitLoading={isSubmitLoading}
|
|
submitBehavior={submitBehavior}
|
|
cwd="/repo"
|
|
clearDraft={vi.fn()}
|
|
/>
|
|
</QueryClientProvider>
|
|
);
|
|
}
|
|
|
|
function renderComposer(
|
|
input: {
|
|
initialText?: string;
|
|
initialAttachments?: ComposerAttachment[];
|
|
isSubmitLoading?: boolean;
|
|
submitBehavior?: "clear" | "preserve-and-lock";
|
|
} = {},
|
|
) {
|
|
act(() => {
|
|
root?.render(<ComposerHarness {...input} />);
|
|
});
|
|
}
|
|
|
|
function click(element: Element) {
|
|
act(() => {
|
|
element.dispatchEvent(new window.MouseEvent("click", { bubbles: true }));
|
|
});
|
|
}
|
|
|
|
async function flushAsyncWork() {
|
|
await act(async () => {
|
|
await Promise.resolve();
|
|
await Promise.resolve();
|
|
await new Promise((resolve) => setTimeout(resolve, 0));
|
|
});
|
|
}
|
|
|
|
async function findByTestId(testID: string): Promise<HTMLElement> {
|
|
for (let attempt = 0; attempt < 10; attempt += 1) {
|
|
await flushAsyncWork();
|
|
const element = queryByTestId(testID);
|
|
if (element) {
|
|
return element;
|
|
}
|
|
}
|
|
throw new Error(`Missing element with testID ${testID}`);
|
|
}
|
|
|
|
function queryByTestId(testID: string): HTMLElement | null {
|
|
return document.querySelector(`[data-testid="${testID}"]`);
|
|
}
|
|
|
|
function queryAllAttachmentMenuItems(): NodeListOf<HTMLElement> {
|
|
return document.querySelectorAll('[data-testid^="message-input-attachment-menu-item-"]');
|
|
}
|
|
|
|
describe("Composer attachments", () => {
|
|
it("opens a Plus menu with image and GitHub attachment actions", () => {
|
|
renderComposer();
|
|
|
|
click(queryByTestId("message-input-attach-button")!);
|
|
|
|
expect(queryAllAttachmentMenuItems()).toHaveLength(2);
|
|
expect(queryByTestId("message-input-attachment-menu-item-image")?.textContent).toBe(
|
|
"Add image",
|
|
);
|
|
expect(queryByTestId("message-input-attachment-menu-item-github")?.textContent).toBe(
|
|
"Add issue or PR",
|
|
);
|
|
});
|
|
|
|
it("adds a picked image as a unified composer attachment and renders a pill", async () => {
|
|
pickImagesMock.mockResolvedValue([
|
|
{
|
|
source: { kind: "blob", blob: new Blob(["image"]) },
|
|
mimeType: "image/png",
|
|
fileName: "img-1.png",
|
|
},
|
|
]);
|
|
renderComposer();
|
|
|
|
click(queryByTestId("message-input-attach-button")!);
|
|
click(queryByTestId("message-input-attachment-menu-item-image")!);
|
|
await flushAsyncWork();
|
|
|
|
expect(persistAttachmentFromBlobMock).toHaveBeenCalledWith({
|
|
blob: expect.any(Blob),
|
|
mimeType: "image/png",
|
|
fileName: "img-1.png",
|
|
});
|
|
expect(latestAttachments).toEqual([{ kind: "image", metadata: imageMetadata }]);
|
|
expect(queryByTestId("composer-image-attachment-pill")).not.toBeNull();
|
|
});
|
|
|
|
it("opens the GitHub combobox from the Plus menu anchored at the Plus button", async () => {
|
|
renderComposer();
|
|
|
|
click(queryByTestId("message-input-attach-button")!);
|
|
click(queryByTestId("message-input-attachment-menu-item-github")!);
|
|
|
|
const combobox = await findByTestId("composer-github-combobox");
|
|
expect(combobox.dataset.anchor).toBe("attached");
|
|
});
|
|
|
|
it("closes the GitHub combobox after selecting an item", async () => {
|
|
renderComposer();
|
|
|
|
click(queryByTestId("message-input-attach-button")!);
|
|
click(queryByTestId("message-input-attachment-menu-item-github")!);
|
|
const issueOption = await findByTestId("composer-github-option-issue:101");
|
|
|
|
click(issueOption);
|
|
|
|
expect(latestAttachments).toEqual([{ kind: "github_issue", item: issueItem }]);
|
|
expect(queryByTestId("composer-github-combobox")).toBeNull();
|
|
});
|
|
|
|
it("toggles GitHub search items into and out of unified composer attachments", async () => {
|
|
renderComposer();
|
|
|
|
click(queryByTestId("message-input-attach-button")!);
|
|
click(queryByTestId("message-input-attachment-menu-item-github")!);
|
|
const issueOption = await findByTestId("composer-github-option-issue:101");
|
|
|
|
click(issueOption);
|
|
expect(latestAttachments).toEqual([{ kind: "github_issue", item: issueItem }]);
|
|
expect(queryByTestId("composer-github-attachment-pill")).not.toBeNull();
|
|
expect(queryByTestId("composer-github-combobox")).toBeNull();
|
|
|
|
click(queryByTestId("message-input-attach-button")!);
|
|
click(queryByTestId("message-input-attachment-menu-item-github")!);
|
|
const selectedIssueOption = await findByTestId("composer-github-option-issue:101");
|
|
click(selectedIssueOption);
|
|
expect(latestAttachments).toEqual([]);
|
|
expect(queryByTestId("composer-github-combobox")).toBeNull();
|
|
});
|
|
|
|
it("submits mixed composer attachments as the expected wire images and attachments", async () => {
|
|
const image = imageAttachment("img-2");
|
|
renderComposer({
|
|
initialText: "send attachments",
|
|
initialAttachments: [
|
|
{ kind: "image", metadata: image },
|
|
{ kind: "github_pr", item: prItem },
|
|
],
|
|
});
|
|
|
|
click(document.querySelector('[aria-label="Send message"]')!);
|
|
await flushAsyncWork();
|
|
|
|
expect(mockClient.sendAgentMessage).toHaveBeenCalledWith(
|
|
"agent",
|
|
"send attachments",
|
|
expect.objectContaining({
|
|
images: [image],
|
|
attachments: [
|
|
{
|
|
type: "github_pr",
|
|
mimeType: "application/github-pr",
|
|
number: 202,
|
|
title: "Refactor composer attachments",
|
|
url: "https://github.com/acme/paseo/pull/202",
|
|
body: "PR body",
|
|
baseRefName: "main",
|
|
headRefName: "composer-attachments",
|
|
},
|
|
],
|
|
}),
|
|
);
|
|
});
|
|
|
|
it("submits empty wire arrays when there are no composer attachments", async () => {
|
|
renderComposer({ initialText: "plain message" });
|
|
|
|
click(document.querySelector('[aria-label="Send message"]')!);
|
|
await flushAsyncWork();
|
|
|
|
expect(mockClient.sendAgentMessage).toHaveBeenCalledWith(
|
|
"agent",
|
|
"plain message",
|
|
expect.objectContaining({
|
|
images: [],
|
|
attachments: [],
|
|
}),
|
|
);
|
|
});
|
|
|
|
it("removes the image attachment when its pill X button is pressed", () => {
|
|
const image = imageAttachment("img-remove");
|
|
renderComposer({ initialAttachments: [{ kind: "image", metadata: image }] });
|
|
|
|
const removeButton = document.querySelector('[aria-label="Remove image attachment"]');
|
|
expect(removeButton).not.toBeNull();
|
|
click(removeButton!);
|
|
|
|
expect(latestAttachments).toEqual([]);
|
|
expect(deleteAttachmentsMock).toHaveBeenCalledWith([image]);
|
|
});
|
|
|
|
it("removes a GitHub attachment when its pill X button is pressed", () => {
|
|
renderComposer({ initialAttachments: [{ kind: "github_issue", item: issueItem }] });
|
|
|
|
const removeButton = document.querySelector(`[aria-label="Remove issue #${issueItem.number}"]`);
|
|
expect(removeButton).not.toBeNull();
|
|
click(removeButton!);
|
|
|
|
expect(latestAttachments).toEqual([]);
|
|
});
|
|
|
|
it("opens the GitHub issue URL when the pill body is pressed", () => {
|
|
renderComposer({ initialAttachments: [{ kind: "github_issue", item: issueItem }] });
|
|
|
|
click(queryByTestId("composer-github-attachment-pill")!);
|
|
|
|
expect(openExternalUrlMock).toHaveBeenCalledWith(issueItem.url);
|
|
expect(latestAttachments).toEqual([{ kind: "github_issue", item: issueItem }]);
|
|
});
|
|
|
|
it("opens the GitHub PR URL when the pill body is pressed", () => {
|
|
renderComposer({ initialAttachments: [{ kind: "github_pr", item: prItem }] });
|
|
|
|
click(queryByTestId("composer-github-attachment-pill")!);
|
|
|
|
expect(openExternalUrlMock).toHaveBeenCalledWith(prItem.url);
|
|
expect(latestAttachments).toEqual([{ kind: "github_pr", item: prItem }]);
|
|
});
|
|
|
|
it("opens the image lightbox when the image pill body is pressed", () => {
|
|
const image = imageAttachment("img-body");
|
|
renderComposer({ initialAttachments: [{ kind: "image", metadata: image }] });
|
|
|
|
expect(queryByTestId("attachment-lightbox-image")).toBeNull();
|
|
|
|
click(queryByTestId("composer-image-attachment-pill")!);
|
|
|
|
expect(queryByTestId("attachment-lightbox-image")).not.toBeNull();
|
|
expect(openExternalUrlMock).not.toHaveBeenCalled();
|
|
expect(latestAttachments).toEqual([{ kind: "image", metadata: image }]);
|
|
});
|
|
|
|
it("locks the preserved draft while submit loading", () => {
|
|
renderComposer({
|
|
initialText: "keep this prompt",
|
|
initialAttachments: [{ kind: "github_pr", item: prItem }],
|
|
isSubmitLoading: true,
|
|
submitBehavior: "preserve-and-lock",
|
|
});
|
|
|
|
const textInput = document.querySelector('[aria-label="Message agent..."]');
|
|
const attachButton = queryByTestId("message-input-attach-button");
|
|
const pill = queryByTestId("composer-github-attachment-pill");
|
|
const removeButton = document.querySelector(`[aria-label="Remove PR #${prItem.number}"]`);
|
|
|
|
expect(textInput).toHaveProperty("readOnly", true);
|
|
expect(textInput).toHaveProperty("value", "keep this prompt");
|
|
expect(attachButton).toHaveProperty("disabled", true);
|
|
expect(pill).not.toBeNull();
|
|
expect(removeButton).not.toBeNull();
|
|
|
|
click(pill!);
|
|
click(removeButton!);
|
|
|
|
expect(openExternalUrlMock).not.toHaveBeenCalled();
|
|
expect(latestAttachments).toEqual([{ kind: "github_pr", item: prItem }]);
|
|
});
|
|
|
|
it("closes the image lightbox when its close button is pressed", () => {
|
|
const image = imageAttachment("img-close");
|
|
renderComposer({ initialAttachments: [{ kind: "image", metadata: image }] });
|
|
|
|
click(queryByTestId("composer-image-attachment-pill")!);
|
|
expect(queryByTestId("attachment-lightbox-image")).not.toBeNull();
|
|
|
|
const closeButton = document.querySelector(
|
|
'[aria-label="Close image"][data-testid="attachment-lightbox-close"]',
|
|
);
|
|
expect(closeButton).not.toBeNull();
|
|
click(closeButton!);
|
|
|
|
expect(queryByTestId("attachment-lightbox-image")).toBeNull();
|
|
});
|
|
|
|
it("splits mixed composer attachments only at the submit wire boundary", () => {
|
|
const image = imageAttachment("img-3");
|
|
|
|
expect(
|
|
splitComposerAttachmentsForSubmit([
|
|
{ kind: "image", metadata: image },
|
|
{ kind: "github_issue", item: issueItem },
|
|
{ kind: "github_pr", item: prItem },
|
|
]),
|
|
).toEqual({
|
|
images: [image],
|
|
attachments: [
|
|
{
|
|
type: "github_issue",
|
|
mimeType: "application/github-issue",
|
|
number: 101,
|
|
title: "Fix composer attachments",
|
|
url: "https://github.com/acme/paseo/issues/101",
|
|
body: "Issue body",
|
|
},
|
|
{
|
|
type: "github_pr",
|
|
mimeType: "application/github-pr",
|
|
number: 202,
|
|
title: "Refactor composer attachments",
|
|
url: "https://github.com/acme/paseo/pull/202",
|
|
body: "PR body",
|
|
baseRefName: "main",
|
|
headRefName: "composer-attachments",
|
|
},
|
|
],
|
|
});
|
|
});
|
|
});
|