fix: fix ui and vscode tests

This commit is contained in:
Catriel Müller
2026-03-17 18:26:48 -03:00
parent 1d711fcefc
commit b6f98376f3
2 changed files with 25 additions and 17 deletions
@@ -1,6 +1,6 @@
/** @jsxImportSource solid-js */
import type { Meta, StoryObj } from "storybook-solidjs-vite"
import { BasicTool, GenericTool } from "@opencode-ai/ui/basic-tool"
import { ToolCall, GenericTool } from "@opencode-ai/ui/basic-tool"
const meta: Meta = {
title: "Components/BasicTool",
@@ -12,37 +12,43 @@ type Story = StoryObj
export const Default: Story = {
render: () => (
<BasicTool icon="code" trigger={{ title: "Read file", subtitle: "src/index.ts" }}>
<ToolCall variant="panel" icon="code" trigger={{ title: "Read file", subtitle: "src/index.ts" }}>
<pre style={{ padding: "8px", margin: 0, "font-size": "12px" }}>{`export const hello = () => "world"`}</pre>
</BasicTool>
</ToolCall>
),
}
export const WithArgs: Story = {
render: () => (
<BasicTool icon="console" trigger={{ title: "Run command", args: ["npm", "install", "--save-dev"] }}>
<ToolCall variant="panel" icon="console" trigger={{ title: "Run command", args: ["npm", "install", "--save-dev"] }}>
<pre style={{ padding: "8px", margin: 0, "font-size": "12px" }}>{"added 42 packages in 3s"}</pre>
</BasicTool>
</ToolCall>
),
}
export const DefaultOpen: Story = {
render: () => (
<BasicTool icon="magnifying-glass" trigger={{ title: "Search", subtitle: "*.ts" }} defaultOpen>
<ToolCall variant="panel" icon="magnifying-glass" trigger={{ title: "Search", subtitle: "*.ts" }} defaultOpen>
<div style={{ padding: "8px", "font-size": "12px" }}>Found 12 matches across 5 files.</div>
</BasicTool>
</ToolCall>
),
}
export const NoChildren: Story = {
render: () => <BasicTool icon="mcp" trigger={{ title: "Tool call", subtitle: "No output" }} hideDetails />,
render: () => <ToolCall variant="row" icon="mcp" trigger={{ title: "Tool call", subtitle: "No output" }} />,
}
export const Locked: Story = {
render: () => (
<BasicTool icon="folder" trigger={{ title: "Writing file", subtitle: "output.txt" }} defaultOpen locked>
<ToolCall
variant="panel"
icon="folder"
trigger={{ title: "Writing file", subtitle: "output.txt" }}
defaultOpen
locked
>
<pre style={{ padding: "8px", margin: 0, "font-size": "12px" }}>{"Hello, world!"}</pre>
</BasicTool>
</ToolCall>
),
}
@@ -53,13 +59,13 @@ export const Generic: Story = {
export const AllVariants: Story = {
render: () => (
<div style={{ display: "flex", "flex-direction": "column", gap: "8px", width: "400px" }}>
<BasicTool icon="code" trigger={{ title: "Read file", subtitle: "src/index.ts" }}>
<ToolCall variant="panel" icon="code" trigger={{ title: "Read file", subtitle: "src/index.ts" }}>
<pre style={{ padding: "8px", margin: 0, "font-size": "12px" }}>content here</pre>
</BasicTool>
<BasicTool icon="console" trigger={{ title: "Run command", args: ["bun", "test"] }} defaultOpen>
</ToolCall>
<ToolCall variant="panel" icon="console" trigger={{ title: "Run command", args: ["bun", "test"] }} defaultOpen>
<pre style={{ padding: "8px", margin: 0, "font-size": "12px" }}>All tests passed!</pre>
</BasicTool>
<BasicTool icon="mcp" trigger={{ title: "MCP tool call" }} hideDetails />
</ToolCall>
<ToolCall variant="row" icon="mcp" trigger={{ title: "MCP tool call" }} />
<GenericTool tool="generic_tool" />
</div>
),
@@ -50,7 +50,8 @@ describe("ToolRegistry tool name contract (runtime)", () => {
const names = JSON.stringify(TOOL_NAMES_WE_DEPEND_ON)
const result = check(`
const hist = { state: null, length: 1, replaceState(s) { hist.state = s }, pushState(s) { hist.state = s }, go() {} }
globalThis.window = globalThis.window || { history: hist, location: { pathname: "/", search: "", hash: "", href: "/", origin: "" }, scrollTo() {}, addEventListener() {}, removeEventListener() {}, confirm() { return false } }
const mql = { matches: false, media: "", onchange: null, addListener() {}, removeListener() {}, addEventListener() {}, removeEventListener() {}, dispatchEvent() { return true } }
globalThis.window = globalThis.window || { history: hist, location: { pathname: "/", search: "", hash: "", href: "/", origin: "" }, scrollTo() {}, addEventListener() {}, removeEventListener() {}, confirm() { return false }, matchMedia() { return mql } }
const { ToolRegistry } = await import("./src/components/message-part.tsx")
const names = ${names}
const missing = names.filter(n => typeof ToolRegistry.render(n) !== "function")
@@ -71,7 +72,8 @@ describe("getToolInfo() export contract (runtime)", () => {
// outside a SolidJS rendering context. We verify it exists as a function.
const result = check(`
const hist = { state: null, length: 1, replaceState(s) { hist.state = s }, pushState(s) { hist.state = s }, go() {} }
globalThis.window = globalThis.window || { history: hist, location: { pathname: "/", search: "", hash: "", href: "/", origin: "" }, scrollTo() {}, addEventListener() {}, removeEventListener() {}, confirm() { return false } }
const mql = { matches: false, media: "", onchange: null, addListener() {}, removeListener() {}, addEventListener() {}, removeEventListener() {}, dispatchEvent() { return true } }
globalThis.window = globalThis.window || { history: hist, location: { pathname: "/", search: "", hash: "", href: "/", origin: "" }, scrollTo() {}, addEventListener() {}, removeEventListener() {}, confirm() { return false }, matchMedia() { return mql } }
const { getToolInfo } = await import("./src/components/message-part.tsx")
if (typeof getToolInfo !== "function") {
console.error("getToolInfo is " + typeof getToolInfo)