Testen
Rendere außerhalb des Bildschirms, drücke Tasten und prüfe den Frame als Text.
In diesem Kapitel
- Dein erster Test
- Tasten drücken
- Tests ausführen
- Snapshots
@textjs/app/testing rendert deine App außerhalb des sichtbaren Bereichs, drückt Tasten und gibt den Frame als Klartext zurück. Tests laufen ohne Browser oder DevTools.
Dein erster Test
Hinzugefügt: import { afterEach, beforeEach, expect, mock, spyOn, test } from "bun:test";Hinzugefügt: import { cleanup, render } from "@textjs/app/testing";Hinzugefügt: import { DEPLOYMENTS } from "../../lib/deployments";Hinzugefügt: import DeploymentsPage from "./page";Hinzugefügt: Hinzugefügt: beforeEach(() => {Hinzugefügt: spyOn(globalThis, "fetch").mockResolvedValue(Response.json(DEPLOYMENTS));Hinzugefügt: });Hinzugefügt: Hinzugefügt: afterEach(() => {Hinzugefügt: mock.restore();Hinzugefügt: return cleanup();Hinzugefügt: });Hinzugefügt: Hinzugefügt: test("lists every deployment", async () => {Hinzugefügt: const app = await render(<DeploymentsPage />, { cols: 80, rows: 12 });Hinzugefügt: await app.waitForText("feat: stream cells downward");Hinzugefügt: expect(app.lines()).toHaveLength(12);Hinzugefügt: });Die Seite ruft /api/deployments ab, wofür unter bun test kein Server läuft, daher ersetzt beforeEach den Aufruf von fetch durch dieselben Daten. render verwendet standardmäßig ein Raster mit 80×24 Zellen. lastFrame() gibt den gesamten Frame als Text zurück, lines() gibt ihn zeilenweise zurück und cell(x, y) liefert dir das Zeichen und die Farben einer einzelnen Zelle.
Tasten drücken
press akzeptiert dieselben Tastenbezeichnungen wie useKeymap. Jeder Aufruf läuft innerhalb von act() und verarbeitet die entstandenen Frames vollständig, sodass die nächste Assertion die Aktualisierung sieht.
Hinzugefügt: test("↓ moves the highlight", async () => {Hinzugefügt: const app = await render(<DeploymentsPage />);Hinzugefügt: await app.waitForText("feat: stream cells downward");Hinzugefügt: await app.press("down");Hinzugefügt: const row = app.lines().find((line) => line.includes("›"));Hinzugefügt: expect(row).toContain("perf: merge spans across rows");Hinzugefügt: });Hinzugefügt: Hinzugefügt: test("4 sorts by build time", async () => {Hinzugefügt: const app = await render(<DeploymentsPage />);Hinzugefügt: await app.waitForText("Build");Hinzugefügt: await app.press("4"); // sort by the 4th columnHinzugefügt: expect(app.locate("12s")?.y).toBeLessThan(app.locate("52s")?.y ?? 0);Hinzugefügt: });Die Tabelle zeichnet › vor die hervorgehobene Zeile, sodass der ↓-Test diese Zeile findet und ihren Commit prüft. Ziffern sortieren nach einer Spalte, und die vierte Spalte ist Build.
Tests ausführen
bun testDas funktioniert mit jedem Test-Runner, der async-Tests unterstützt: Bun, Vitest oder Jest. Drücke in der Konsole Enter, um die Testsuite auszuführen, und f, um einen Test fehlschlagen zu lassen und zu sehen, wie ein Fehler aussieht.
Snapshots
toAnsi() gibt den Frame als Truecolor-ANSI zurück und erstellt damit Snapshots, die auch Farbregressionen erkennen:
expect(app.toAnsi()).toMatchSnapshot();Ausprobieren
Das ist Acme Deploys am Ende des Kapitels, ausgeführt in DevTools. Klicke auf das Pad und nutze dann die Tasten unten.
Die Konsole öffnen
Die App rendert in DevTools.Aktiviere zuerst „Funktionen für Webentwickler anzeigen“ unter Safari Einstellungen → Erweitert. Klicke dann hier und drücke Enter.
Auf einem Desktop öffnen
Diese App rendert in der DevTools-Konsole, die einen Desktop-Browser benötigt.
Quiz
2 FragenBeantworte jede Frage, um das Kapitel abzuschließen.