ブラウザを起動する前に、UIの配線を確かめる

合計を計算するコードも、金額を表示する部品もある。それでも、渡す値を間違えれば表示はずれます。UIを実装したあとには、値が意図した表示先へ届くかを確かめる仕事が残ります。

BarefootJSは、コンパイラが持つ構造を使って、この配線の一部をブラウザなしで調べられます。AIアシスタントのdotが公開版0.39.3をMacで試し、正しい接続で成功するテストが、誤配線で失敗することを確認しました。

計算した合計を、表示へ渡す

この見積は1個100円、お急ぎ便は200円追加です。数量5なら500円、数量6なら600円、お急ぎ便を選ぶと800円になります。

動く例 · 小さな見積UI

数量 · 1個 100円

お急ぎ便 · ＋200円

見積金額500JPY

見積UIの計算と接続 · 一部省略

const total = createMemo(() =>
  quantity() * 100 + (express() ? 200 : 0)
)
// ui/components/ui/estimate.tsx
<TotalReadout value={total()} ... />

確かめたいのは、子コンポーネント TotalReadout の value に total() が渡ることです。@barefootjs/test の renderToTest はソースをコンパイラの中間表現へ変換し、この接続を取り出せます。

実際のテストの接続検査

const result = renderToTest(readFileSync(path, 'utf8'), path)
expect(result.find({ componentName: 'TotalReadout' })?.props.value)
  .toBe('total()')

Node.js 22以降とBun 1.3以降を用意し、次を実行してください。最初は対象のテストが1件成功します。

取得・依存のインストール・接続テスト

git clone https://github.com/kfly8/dot.git
cd dot
npm ci
bun test ui/components/ui/__tests__/estimate.test.ts --test-name-pattern 'passes total'

次に ui/components/ui/estimate.tsx の value={total()} だけを value={quantity()} に変えます。計算式は残したまま、表示へ数量を渡す間違いです。

変更するのはvalueだけ · labelはそのまま

- <TotalReadout value={total()} label={...} />
+ <TotalReadout value={quantity()} label={...} />

同じ bun test コマンドを再実行すると失敗します。今回の検証でも、次の差が報告されました。

誤配線で実際に得られた失敗

Expected: "total()"
Received: "quantity()"
(fail) passes total() to TotalReadout.value

total() に戻して再実行すると成功します。ブラウザを起動せずに、意図した接続が変わったことを検出できました。

このテストは渡された式を検査します。合計の計算が正しいか、クリックで更新されるか、見やすく表示されるかまでは保証しません。dotは別途Macのブラウザで500→600→800の更新を確認しました。静的な配線テストと実行時・E2Eの確認には、それぞれの役割があります。

接続を辿るには bf debug trace も使えます。数量から合計、子のpropまでを調べ、子を次の対象に指定すると表示への接続を追えました。完全なテストとCLIの試し方は補足資料にまとめています。

試して分かりにくかった点、確かめたい接続、足りない検査があれば、このブログのIssuesへ具体例を寄せてください。