Test
Ekran dışında render edin, tuşlara basın ve kareyi metin olarak doğrulayın.
Bu bölümde
- İlk testiniz
- Tuşlara basma
- Çalıştırma
- Anlık görüntüler
@textjs/app/testing uygulamanızı ekran dışında render eder, tuşlara basar ve kareyi düz metin olarak döndürür. Testler tarayıcı veya DevTools olmadan çalışır.
İlk testiniz
Eklenen: import { afterEach, beforeEach, expect, mock, spyOn, test } from "bun:test";Eklenen: import { cleanup, render } from "@textjs/app/testing";Eklenen: import { DEPLOYMENTS } from "../../lib/deployments";Eklenen: import DeploymentsPage from "./page";Eklenen: Eklenen: beforeEach(() => {Eklenen: spyOn(globalThis, "fetch").mockResolvedValue(Response.json(DEPLOYMENTS));Eklenen: });Eklenen: Eklenen: afterEach(() => {Eklenen: mock.restore();Eklenen: return cleanup();Eklenen: });Eklenen: Eklenen: test("lists every deployment", async () => {Eklenen: const app = await render(<DeploymentsPage />, { cols: 80, rows: 12 });Eklenen: await app.waitForText("feat: stream cells downward");Eklenen: expect(app.lines()).toHaveLength(12);Eklenen: });Sayfa /api/deployments adresinden veri çeker; bun test altında bu adresi sunan bir sunucu olmadığından beforeEach, fetch işlevini aynı veriyi döndüren bir taklitle değiştirir. render varsayılan olarak 80×24 boyutunda bir ızgara kullanır. lastFrame() tüm kareyi metin olarak, lines() satır satır döndürür ve cell(x, y) tek bir hücrenin karakterini ve renklerini verir.
Tuşlara basma
press, useKeymap ile aynı tuş dizelerini alır. Her çağrı act() içinde çalışır ve oluşan kareleri işler, böylece sonraki doğrulama güncellemeyi görür.
Eklenen: test("↓ moves the highlight", async () => {Eklenen: const app = await render(<DeploymentsPage />);Eklenen: await app.waitForText("feat: stream cells downward");Eklenen: await app.press("down");Eklenen: const row = app.lines().find((line) => line.includes("›"));Eklenen: expect(row).toContain("perf: merge spans across rows");Eklenen: });Eklenen: Eklenen: test("4 sorts by build time", async () => {Eklenen: const app = await render(<DeploymentsPage />);Eklenen: await app.waitForText("Build");Eklenen: await app.press("4"); // sort by the 4th columnEklenen: expect(app.locate("12s")?.y).toBeLessThan(app.locate("52s")?.y ?? 0);Eklenen: });Tablo, vurgulanan satırın önüne › çizer; bu yüzden ↓ testi o satırı bulur ve commit’ini kontrol eder. Rakamlar bir sütuna göre sıralar ve dördüncü sütun Build sütunudur.
Çalıştırma
bun testasync testleri destekleyen her test çalıştırıcısıyla çalışır: Bun, Vitest veya Jest. Konsolda test paketini çalıştırmak için Enter tuşuna, bir testi bozup başarısızlığın nasıl göründüğünü görmek için f tuşuna basın.
Anlık görüntüler
toAnsi() kareyi truecolor ANSI olarak döndürür; böylece renklerdeki gerilemeleri de yakalayan anlık görüntüler oluşturulur:
expect(app.toAnsi()).toMatchSnapshot();Dene
Bu, Acme Deploys uygulamasının bölüm sonundaki hâli; DevTools’ta çalışıyor. Odak alanına tıklayın, ardından aşağıdaki tuşları kullanın.
Konsolu açın
Uygulama DevTools’ta render edilir.Önce Safari Ayarlar → İleri Düzey bölümünde “Web geliştiricileri için özellikleri göster” seçeneğini açın. Sonra buraya tıklayın ve Enter tuşuna basın.
Masaüstünde açın
Bu uygulama DevTools konsolunda render edilir; bunun için masaüstü tarayıcısı gerekir.
Test
2 soruBölümü tamamlamak için tüm soruları yanıtlayın.