テスト
画面外で描画し、キーを押して、フレームをテキストとして検証します。
この章の内容
- 最初のテスト
- キー入力
- テストの実行
- スナップショット
@textjs/app/testing はアプリを画面外でレンダリングし、キーを押して、フレームをプレーンテキストで返します。テストはブラウザーやDevToolsなしで実行できます。
最初のテスト
追加：import { afterEach, beforeEach, expect, mock, spyOn, test } from "bun:test";追加：import { cleanup, render } from "@textjs/app/testing";追加：import { DEPLOYMENTS } from "../../lib/deployments";追加：import DeploymentsPage from "./page";追加：追加：beforeEach(() => {追加： spyOn(globalThis, "fetch").mockResolvedValue(Response.json(DEPLOYMENTS));追加：});追加：追加：afterEach(() => {追加： mock.restore();追加： return cleanup();追加：});追加：追加：test("lists every deployment", async () => {追加： const app = await render(<DeploymentsPage />, { cols: 80, rows: 12 });追加： await app.waitForText("feat: stream cells downward");追加： expect(app.lines()).toHaveLength(12);追加：});このページは /api/deployments からデータを取得しますが、bun test ではサーバーがないため、beforeEach で fetch をスタブ化し、同じデータを返します。render のデフォルトは80×24のグリッドです。lastFrame() はフレーム全体をテキストで返し、lines() は行ごとに返し、cell(x, y) は1つのセルの文字と色を返します。
キー入力
press は useKeymap と同じキー文字列を受け取ります。各呼び出しは act() 内で実行され、生成されたフレームをフラッシュするため、次のアサーションで更新が反映されます。
追加：test("↓ moves the highlight", async () => {追加： const app = await render(<DeploymentsPage />);追加： await app.waitForText("feat: stream cells downward");追加： await app.press("down");追加： const row = app.lines().find((line) => line.includes("›"));追加： expect(row).toContain("perf: merge spans across rows");追加：});追加：追加：test("4 sorts by build time", async () => {追加： const app = await render(<DeploymentsPage />);追加： await app.waitForText("Build");追加： await app.press("4"); // sort by the 4th column追加： expect(app.locate("12s")?.y).toBeLessThan(app.locate("52s")?.y ?? 0);追加：});テーブルはハイライトされた行の先頭に › を描画するため、↓のテストではその行を見つけてコミットを確認します。数字キーは列を基準に並べ替え、4番目の列はBuildです。
テストの実行
bun testBun、Vitest、Jestなど、async テストに対応するランナーで実行できます。コンソールで Enter を押すとテストスイートを実行し、f を押すとテストを失敗させて、失敗時の表示を確認できます。
スナップショット
toAnsi() はフレームをトゥルーカラーANSIで返すため、色のリグレッションも検出するスナップショットを作成できます。
expect(app.toAnsi()).toMatchSnapshot();試す
これは章の終わりに完成するAcme Deploysで、DevToolsで動作しています。パッドをクリックして、以下のキーを使います。
コンソールを開く
アプリはDevToolsに描画されます。まずSafariの「設定」→「詳細」で「Webデベロッパ用の機能を表示」をオンにします。 次にここをクリックして、Enterを押します。
デスクトップで開く
このアプリはDevToolsのコンソールに描画されるため、デスクトップブラウザーが必要です。
クイズ
2問すべての問題に回答すると章を完了できます。