mirror of
https://github.com/anomalyco/opencode.git
synced 2026-05-23 04:26:05 +00:00
test(tui): focus inline tool wrap snapshot
This commit is contained in:
Kit Langton
parent
540525e98e
commit
1499daf15f
2 changed files with 6 additions and 156 deletions
|
|
@ -1,58 +1,11 @@
|
|||
// Bun Snapshot v1, https://bun.sh/docs/test/snapshots
|
||||
|
||||
exports[`TUI inline tool wrapping snapshots consecutive grep, glob, and read rows at a narrow width 1`] = `
|
||||
"CURRENT: measured height adds top margin after wrapped rows
|
||||
|
||||
* Grep "OPENCODE.*DB|database|sqlite|drizzle|dev.*db|data.
|
||||
*dir|xdg|APPDATA" in packages/opencode/src (151 matches)
|
||||
|
||||
* Glob "**/*db*" in packages/opencode (6 matches)
|
||||
-> Read packages/opencode/src/storage/db.ts [offset=1, limit=130]
|
||||
-> Read packages/opencode/src/index.ts [offset=1, limit=100]
|
||||
|
||||
* Grep "export const OPENCODE_DB|OPENCODE_DB|OPENCODE_DEV|Global\\.
|
||||
Path\\.data|data =" in packages/opencode/src (115 matches)
|
||||
|
||||
|
||||
STABLE WRAP: no height-coupled margin
|
||||
* Grep "OPENCODE.*DB|database|sqlite|drizzle|dev.*db|data.
|
||||
*dir|xdg|APPDATA" in packages/opencode/src (151 matches)
|
||||
* Glob "**/*db*" in packages/opencode (6 matches)
|
||||
-> Read packages/opencode/src/storage/db.ts [offset=1, limit=130]
|
||||
-> Read packages/opencode/src/index.ts [offset=1, limit=100]
|
||||
* Grep "export const OPENCODE_DB|OPENCODE_DB|OPENCODE_DEV|Global\\.
|
||||
Path\\.data|data =" in packages/opencode/src (115 matches)
|
||||
|
||||
|
||||
HANGING INDENT: wrap aligns with tool text
|
||||
* Grep "OPENCODE.*DB|database|sqlite|drizzle|dev.*db|data.
|
||||
" * Grep "OPENCODE.*DB|database|sqlite|drizzle|dev.*db|data.
|
||||
*dir|xdg|APPDATA" in packages/opencode/src (151 matches)
|
||||
* Glob "**/*db*" in packages/opencode (6 matches)
|
||||
-> Read packages/opencode/src/storage/db.ts [offset=1, limit=130]
|
||||
-> Read packages/opencode/src/index.ts [offset=1, limit=100]
|
||||
* Grep "export const OPENCODE_DB|OPENCODE_DB|OPENCODE_DEV|Global\\.
|
||||
Path\\.data|data =" in packages/opencode/src (115 matches)
|
||||
|
||||
|
||||
DETAIL ROWS: split identity from metadata
|
||||
* Grep "OPENCODE.*DB|database|sqlite|drizzle|dev.*db|data.
|
||||
*dir|xdg|APPDATA"
|
||||
packages/opencode/src - 151 matches
|
||||
* Glob "**/*db*"
|
||||
packages/opencode - 6 matches
|
||||
-> Read packages/opencode/src/storage/db.ts
|
||||
offset=1, limit=130
|
||||
-> Read packages/opencode/src/index.ts
|
||||
offset=1, limit=100
|
||||
* Grep "export const OPENCODE_DB|OPENCODE_DB|OPENCODE_DEV|Global\\.
|
||||
Path\\.data|data ="
|
||||
packages/opencode/src - 115 matches
|
||||
|
||||
|
||||
COMPACT: truncate middle, never wrap
|
||||
* Grep "OPENCODE.*DB|d...dir|xdg|APPDATA" - packages/openc...c - 151
|
||||
* Glob "**/*db*" - packages/opencode - 6 matches
|
||||
-> Read packages/openco...rc/storage/db.ts - offset=1, limit=130
|
||||
-> Read packages/opencode/src/index.ts - offset=1, limit=100
|
||||
* Grep "export const O...th\\.data|data =" - packages/openc...c - 115"
|
||||
Path\\.data|data =" in packages/opencode/src (115 matches)"
|
||||
`;
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
import { afterEach, describe, expect, test } from "bun:test"
|
||||
import { createSignal, For } from "solid-js"
|
||||
import { For } from "solid-js"
|
||||
import { testRender } from "@opentui/solid"
|
||||
|
||||
let testSetup: Awaited<ReturnType<typeof testRender>> | undefined
|
||||
|
|
@ -11,85 +11,30 @@ afterEach(() => {
|
|||
|
||||
const tools = [
|
||||
{
|
||||
kind: "grep",
|
||||
icon: "*",
|
||||
label:
|
||||
'Grep "OPENCODE.*DB|database|sqlite|drizzle|dev.*db|data.*dir|xdg|APPDATA" in packages/opencode/src (151 matches)',
|
||||
target: '"OPENCODE.*DB|database|sqlite|drizzle|dev.*db|data.*dir|xdg|APPDATA"',
|
||||
meta: "packages/opencode/src - 151 matches",
|
||||
},
|
||||
{
|
||||
kind: "glob",
|
||||
icon: "*",
|
||||
label: 'Glob "**/*db*" in packages/opencode (6 matches)',
|
||||
target: '"**/*db*"',
|
||||
meta: "packages/opencode - 6 matches",
|
||||
},
|
||||
{
|
||||
kind: "read",
|
||||
icon: "->",
|
||||
label: "Read packages/opencode/src/storage/db.ts [offset=1, limit=130]",
|
||||
target: "packages/opencode/src/storage/db.ts",
|
||||
meta: "offset=1, limit=130",
|
||||
},
|
||||
{
|
||||
kind: "read",
|
||||
icon: "->",
|
||||
label: "Read packages/opencode/src/index.ts [offset=1, limit=100]",
|
||||
target: "packages/opencode/src/index.ts",
|
||||
meta: "offset=1, limit=100",
|
||||
},
|
||||
{
|
||||
kind: "grep",
|
||||
icon: "*",
|
||||
label:
|
||||
'Grep "export const OPENCODE_DB|OPENCODE_DB|OPENCODE_DEV|Global\\.Path\\.data|data =" in packages/opencode/src (115 matches)',
|
||||
target: '"export const OPENCODE_DB|OPENCODE_DB|OPENCODE_DEV|Global\\.Path\\.data|data ="',
|
||||
meta: "packages/opencode/src - 115 matches",
|
||||
},
|
||||
] as const
|
||||
|
||||
function CurrentInlineRow(props: { item: (typeof tools)[number]; index: number }) {
|
||||
const [margin, setMargin] = createSignal(0)
|
||||
|
||||
return (
|
||||
<box
|
||||
id={`current-${props.index}`}
|
||||
marginTop={margin()}
|
||||
paddingLeft={3}
|
||||
renderBefore={function () {
|
||||
const parent = this.parent
|
||||
if (!parent) return
|
||||
if (this.height > 1) {
|
||||
setMargin(1)
|
||||
return
|
||||
}
|
||||
const previous = parent.getChildren()[parent.getChildren().indexOf(this) - 1]
|
||||
if (!previous) {
|
||||
setMargin(0)
|
||||
return
|
||||
}
|
||||
if (previous.height > 1 || previous.id.startsWith("text-")) setMargin(1)
|
||||
}}
|
||||
>
|
||||
<text paddingLeft={3}>
|
||||
{props.item.icon} {props.item.label}
|
||||
</text>
|
||||
</box>
|
||||
)
|
||||
}
|
||||
|
||||
function StableInlineRow(props: { item: (typeof tools)[number] }) {
|
||||
return (
|
||||
<box paddingLeft={3}>
|
||||
<text paddingLeft={3}>
|
||||
{props.item.icon} {props.item.label}
|
||||
</text>
|
||||
</box>
|
||||
)
|
||||
}
|
||||
|
||||
function HangingIndentRow(props: { item: (typeof tools)[number] }) {
|
||||
function InlineToolRow(props: { item: (typeof tools)[number] }) {
|
||||
return (
|
||||
<box paddingLeft={3} flexDirection="row">
|
||||
<text width={props.item.icon.length + 1}>{props.item.icon}</text>
|
||||
|
|
@ -98,50 +43,11 @@ function HangingIndentRow(props: { item: (typeof tools)[number] }) {
|
|||
)
|
||||
}
|
||||
|
||||
function DetailRow(props: { item: (typeof tools)[number] }) {
|
||||
return (
|
||||
<box paddingLeft={3}>
|
||||
<text paddingLeft={3}>
|
||||
{props.item.icon} {titlecase(props.item.kind)} {props.item.target}
|
||||
</text>
|
||||
<text paddingLeft={6}>{props.item.meta}</text>
|
||||
</box>
|
||||
)
|
||||
}
|
||||
|
||||
function CompactRow(props: { item: (typeof tools)[number] }) {
|
||||
return (
|
||||
<box paddingLeft={3}>
|
||||
<text paddingLeft={3} wrapMode="none">
|
||||
{props.item.icon} {titlecase(props.item.kind)} {truncateMiddle(props.item.target, 34)} -{" "}
|
||||
{truncateMiddle(props.item.meta, 32)}
|
||||
</text>
|
||||
</box>
|
||||
)
|
||||
}
|
||||
|
||||
function Fixture() {
|
||||
return (
|
||||
<box flexDirection="column" width={72}>
|
||||
<text>CURRENT: measured height adds top margin after wrapped rows</text>
|
||||
<box flexDirection="column">
|
||||
<For each={tools}>{(item, index) => <CurrentInlineRow item={item} index={index()} />}</For>
|
||||
</box>
|
||||
<text marginTop={2}>STABLE WRAP: no height-coupled margin</text>
|
||||
<box flexDirection="column">
|
||||
<For each={tools}>{(item) => <StableInlineRow item={item} />}</For>
|
||||
</box>
|
||||
<text marginTop={2}>HANGING INDENT: wrap aligns with tool text</text>
|
||||
<box flexDirection="column">
|
||||
<For each={tools}>{(item) => <HangingIndentRow item={item} />}</For>
|
||||
</box>
|
||||
<text marginTop={2}>DETAIL ROWS: split identity from metadata</text>
|
||||
<box flexDirection="column">
|
||||
<For each={tools}>{(item) => <DetailRow item={item} />}</For>
|
||||
</box>
|
||||
<text marginTop={2}>COMPACT: truncate middle, never wrap</text>
|
||||
<box flexDirection="column">
|
||||
<For each={tools}>{(item) => <CompactRow item={item} />}</For>
|
||||
<For each={tools}>{(item) => <InlineToolRow item={item} />}</For>
|
||||
</box>
|
||||
</box>
|
||||
)
|
||||
|
|
@ -149,7 +55,7 @@ function Fixture() {
|
|||
|
||||
describe("TUI inline tool wrapping", () => {
|
||||
test("snapshots consecutive grep, glob, and read rows at a narrow width", async () => {
|
||||
testSetup = await testRender(() => <Fixture />, { width: 72, height: 60 })
|
||||
testSetup = await testRender(() => <Fixture />, { width: 72, height: 12 })
|
||||
await testSetup.renderOnce()
|
||||
await testSetup.renderOnce()
|
||||
|
||||
|
|
@ -163,12 +69,3 @@ describe("TUI inline tool wrapping", () => {
|
|||
).toMatchSnapshot()
|
||||
})
|
||||
})
|
||||
|
||||
function titlecase(value: string) {
|
||||
return value.slice(0, 1).toUpperCase() + value.slice(1)
|
||||
}
|
||||
|
||||
function truncateMiddle(value: string, max: number) {
|
||||
if (value.length <= max) return value
|
||||
return value.slice(0, Math.floor((max - 3) / 2)) + "..." + value.slice(value.length - Math.ceil((max - 3) / 2))
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue