Test
Renderizza fuori schermo, premi i tasti e verifica il frame come testo.
In questo capitolo
- Il tuo primo test
- Premere i tasti
- Eseguire i test
- Snapshot
@textjs/app/testing esegue il rendering della tua app fuori schermo, preme i tasti e restituisce il frame come testo semplice. I test vengono eseguiti senza browser o DevTools.
Il tuo primo test
Aggiunto: import { afterEach, beforeEach, expect, mock, spyOn, test } from "bun:test";Aggiunto: import { cleanup, render } from "@textjs/app/testing";Aggiunto: import { DEPLOYMENTS } from "../../lib/deployments";Aggiunto: import DeploymentsPage from "./page";Aggiunto: Aggiunto: beforeEach(() => {Aggiunto: spyOn(globalThis, "fetch").mockResolvedValue(Response.json(DEPLOYMENTS));Aggiunto: });Aggiunto: Aggiunto: afterEach(() => {Aggiunto: mock.restore();Aggiunto: return cleanup();Aggiunto: });Aggiunto: Aggiunto: test("lists every deployment", async () => {Aggiunto: const app = await render(<DeploymentsPage />, { cols: 80, rows: 12 });Aggiunto: await app.waitForText("feat: stream cells downward");Aggiunto: expect(app.lines()).toHaveLength(12);Aggiunto: });La pagina richiede /api/deployments, che non ha un server durante l’esecuzione di bun test, quindi beforeEach sostituisce fetch con uno stub che restituisce gli stessi dati. render usa per impostazione predefinita una griglia di 80×24. lastFrame() restituisce l’intero frame come testo, lines() lo restituisce riga per riga e cell(x, y) restituisce il carattere e i colori di una singola cella.
Premere i tasti
press accetta le stesse stringhe dei tasti di useKeymap. Ogni chiamata viene eseguita all’interno di act() ed elabora i frame risultanti, così l’asserzione successiva vede l’aggiornamento.
Aggiunto: test("↓ moves the highlight", async () => {Aggiunto: const app = await render(<DeploymentsPage />);Aggiunto: await app.waitForText("feat: stream cells downward");Aggiunto: await app.press("down");Aggiunto: const row = app.lines().find((line) => line.includes("›"));Aggiunto: expect(row).toContain("perf: merge spans across rows");Aggiunto: });Aggiunto: Aggiunto: test("4 sorts by build time", async () => {Aggiunto: const app = await render(<DeploymentsPage />);Aggiunto: await app.waitForText("Build");Aggiunto: await app.press("4"); // sort by the 4th columnAggiunto: expect(app.locate("12s")?.y).toBeLessThan(app.locate("52s")?.y ?? 0);Aggiunto: });La tabella disegna › davanti alla riga evidenziata, quindi il test ↓ trova quella riga e ne verifica il commit. Le cifre ordinano per colonna e la quarta colonna è Build.
Eseguire i test
bun testFunziona con qualsiasi runner che supporti i test async: Bun, Vitest o Jest. Nella console, premi Enter per eseguire la suite e f per far fallire un test e vedere come appare un errore.
Snapshot
toAnsi() restituisce il frame in formato ANSI truecolor, creando snapshot che rilevano anche le regressioni dei colori:
expect(app.toAnsi()).toMatchSnapshot();Provala
Questa è Acme Deploys alla fine del capitolo, in esecuzione in DevTools. Fai clic sul pannello del focus, poi usa i tasti qui sotto.
Apri la console
L’app viene renderizzata in DevTools.Prima attiva «Mostra funzionalità per sviluppatori web» in Safari Impostazioni → Avanzate. Poi fai clic qui e premi Enter.
Aprire su desktop
Questa app viene renderizzata nella console DevTools, che richiede un browser desktop.
Quiz
2 domandeRispondi a tutte le domande per completare il capitolo.