Pengujian
Render di luar layar, tekan tombol, dan buat asersi pada frame sebagai teks.
Dalam bab ini
- Pengujian pertama Anda
- Menekan tombol
- Menjalankan pengujian
- Snapshot
@textjs/app/testing me-render aplikasi Anda di luar layar, menekan tombol, dan mengembalikan frame sebagai teks biasa. Pengujian berjalan tanpa browser atau DevTools.
Pengujian pertama Anda
Ditambahkan: import { afterEach, beforeEach, expect, mock, spyOn, test } from "bun:test";Ditambahkan: import { cleanup, render } from "@textjs/app/testing";Ditambahkan: import { DEPLOYMENTS } from "../../lib/deployments";Ditambahkan: import DeploymentsPage from "./page";Ditambahkan: Ditambahkan: beforeEach(() => {Ditambahkan: spyOn(globalThis, "fetch").mockResolvedValue(Response.json(DEPLOYMENTS));Ditambahkan: });Ditambahkan: Ditambahkan: afterEach(() => {Ditambahkan: mock.restore();Ditambahkan: return cleanup();Ditambahkan: });Ditambahkan: Ditambahkan: test("lists every deployment", async () => {Ditambahkan: const app = await render(<DeploymentsPage />, { cols: 80, rows: 12 });Ditambahkan: await app.waitForText("feat: stream cells downward");Ditambahkan: expect(app.lines()).toHaveLength(12);Ditambahkan: });Halaman mengambil data dari /api/deployments, yang tidak memiliki server saat bun test berjalan, sehingga beforeEach mengganti fetch dengan stub berisi data yang sama. render menggunakan grid 80×24 secara default. lastFrame() mengembalikan seluruh frame sebagai teks, lines() mengembalikannya baris demi baris, dan cell(x, y) memberikan karakter dan warna satu sel.
Menekan tombol
press menerima string tombol yang sama dengan useKeymap. Setiap pemanggilan berjalan di dalam act() dan menuntaskan pemrosesan frame yang dihasilkan, sehingga asersi berikutnya melihat pembaruan tersebut.
Ditambahkan: test("↓ moves the highlight", async () => {Ditambahkan: const app = await render(<DeploymentsPage />);Ditambahkan: await app.waitForText("feat: stream cells downward");Ditambahkan: await app.press("down");Ditambahkan: const row = app.lines().find((line) => line.includes("›"));Ditambahkan: expect(row).toContain("perf: merge spans across rows");Ditambahkan: });Ditambahkan: Ditambahkan: test("4 sorts by build time", async () => {Ditambahkan: const app = await render(<DeploymentsPage />);Ditambahkan: await app.waitForText("Build");Ditambahkan: await app.press("4"); // sort by the 4th columnDitambahkan: expect(app.locate("12s")?.y).toBeLessThan(app.locate("52s")?.y ?? 0);Ditambahkan: });Tabel menggambar › di depan baris yang disorot, sehingga pengujian ↓ menemukan baris tersebut dan memeriksa commit-nya. Tombol angka mengurutkan berdasarkan kolom, dan kolom keempat adalah Build.
Menjalankan pengujian
bun testPengujian ini berjalan dengan runner apa pun yang mendukung pengujian async: Bun, Vitest, atau Jest. Di konsol, tekan Enter untuk menjalankan rangkaian pengujian dan f untuk membuat satu pengujian gagal dan melihat bentuk kegagalannya.
Snapshot
toAnsi() mengembalikan frame sebagai ANSI truecolor, sehingga snapshot juga mendeteksi regresi warna:
expect(app.toAnsi()).toMatchSnapshot();Coba
Ini Acme Deploys di akhir bab, berjalan di DevTools. Klik pad, lalu gunakan tombol di bawah.
Buka konsol
Aplikasi ini di-render di DevTools.Aktifkan dahulu “Tampilkan fitur untuk pengembang web” di Setelan Safari → Lanjutan. Lalu klik di sini dan tekan Enter.
Buka di desktop
Aplikasi ini di-render di konsol DevTools, yang memerlukan browser desktop.
Kuis
2 pertanyaanJawab semua pertanyaan untuk menyelesaikan bab.