Testowanie
Renderuj poza ekranem, naciskaj klawisze i sprawdzaj asercje na klatce jako tekście.
W tym rozdziale
- Pierwszy test
- Naciskanie klawiszy
- Uruchamianie
- Migawki
@textjs/app/testing renderuje twoją aplikację poza ekranem, naciska klawisze i zwraca klatkę jako zwykły tekst. Testy działają bez przeglądarki ani DevTools.
Pierwszy test
Dodano: import { afterEach, beforeEach, expect, mock, spyOn, test } from "bun:test";Dodano: import { cleanup, render } from "@textjs/app/testing";Dodano: import { DEPLOYMENTS } from "../../lib/deployments";Dodano: import DeploymentsPage from "./page";Dodano: Dodano: beforeEach(() => {Dodano: spyOn(globalThis, "fetch").mockResolvedValue(Response.json(DEPLOYMENTS));Dodano: });Dodano: Dodano: afterEach(() => {Dodano: mock.restore();Dodano: return cleanup();Dodano: });Dodano: Dodano: test("lists every deployment", async () => {Dodano: const app = await render(<DeploymentsPage />, { cols: 80, rows: 12 });Dodano: await app.waitForText("feat: stream cells downward");Dodano: expect(app.lines()).toHaveLength(12);Dodano: });Strona pobiera /api/deployments, dla którego podczas bun test nie działa serwer, więc beforeEach zastępuje fetch atrapą zwracającą te same dane. render domyślnie używa siatki 80×24. lastFrame() zwraca całą klatkę jako tekst, lines() zwraca ją wiersz po wierszu, a cell(x, y) udostępnia znak i kolory pojedynczej komórki.
Naciskanie klawiszy
press przyjmuje te same ciągi znaków określające klawisze co useKeymap. Każde wywołanie działa wewnątrz act() i renderuje wszystkie wynikowe klatki, więc następna asercja widzi aktualizację.
Dodano: test("↓ moves the highlight", async () => {Dodano: const app = await render(<DeploymentsPage />);Dodano: await app.waitForText("feat: stream cells downward");Dodano: await app.press("down");Dodano: const row = app.lines().find((line) => line.includes("›"));Dodano: expect(row).toContain("perf: merge spans across rows");Dodano: });Dodano: Dodano: test("4 sorts by build time", async () => {Dodano: const app = await render(<DeploymentsPage />);Dodano: await app.waitForText("Build");Dodano: await app.press("4"); // sort by the 4th columnDodano: expect(app.locate("12s")?.y).toBeLessThan(app.locate("52s")?.y ?? 0);Dodano: });Tabela rysuje › przed podświetlonym wierszem, więc test ↓ znajduje ten wiersz i sprawdza jego commit. Cyfry sortują według kolumny, a czwarta kolumna to Build.
Uruchamianie
bun testDziała z każdym narzędziem do uruchamiania testów, które obsługuje testy async: Bun, Vitest lub Jest. W konsoli naciśnij Enter, aby uruchomić zestaw testów, i f, aby zepsuć test i zobaczyć, jak wygląda niepowodzenie.
Migawki
toAnsi() zwraca klatkę w formacie ANSI z kolorami truecolor, co pozwala tworzyć migawki wykrywające także regresje kolorów:
expect(app.toAnsi()).toMatchSnapshot();Wypróbuj
To Acme Deploys na końcu rozdziału, uruchomiona w DevTools. Kliknij panel, a potem użyj poniższych klawiszy.
Otwórz konsolę
Aplikacja renderuje się w DevTools.Najpierw włącz „Pokazuj funkcje dla deweloperów witryn” w Safari: Ustawienia → Zaawansowane. Potem kliknij tutaj i naciśnij Enter.
Otwórz na komputerze
Ta aplikacja renderuje się w konsoli DevTools, która wymaga przeglądarki na komputerze.
Quiz
2 pytaniaOdpowiedz na wszystkie pytania, aby ukończyć rozdział.