آزمون
خارج از صفحه رندر کنید، کلیدها را فشار دهید و فریم را بهصورت متن در آزمون بررسی کنید.
در این فصل
- اولین تست شما
- فشردن کلیدها
- اجرا
- اسنپشاتها
@textjs/app/testing برنامهٔ شما را خارج از صفحه رندر میکند، کلیدها را فشار میدهد و فریم را بهصورت متن ساده برمیگرداند. تستها بدون مرورگر یا DevTools اجرا میشوند.
اولین تست شما
افزودهشده: import { afterEach, beforeEach, expect, mock, spyOn, test } from "bun:test";افزودهشده: import { cleanup, render } from "@textjs/app/testing";افزودهشده: import { DEPLOYMENTS } from "../../lib/deployments";افزودهشده: import DeploymentsPage from "./page";افزودهشده: افزودهشده: beforeEach(() => {افزودهشده: spyOn(globalThis, "fetch").mockResolvedValue(Response.json(DEPLOYMENTS));افزودهشده: });افزودهشده: افزودهشده: afterEach(() => {افزودهشده: mock.restore();افزودهشده: return cleanup();افزودهشده: });افزودهشده: افزودهشده: test("lists every deployment", async () => {افزودهشده: const app = await render(<DeploymentsPage />, { cols: 80, rows: 12 });افزودهشده: await app.waitForText("feat: stream cells downward");افزودهشده: expect(app.lines()).toHaveLength(12);افزودهشده: });صفحه دادهها را از /api/deployments میگیرد که هنگام اجرای دستور bun test سروری ندارد، بنابراین تابع beforeEach با همان دادهها یک جایگزین برای fetch میسازد. تابع render بهطور پیشفرض از شبکهای با ابعاد 80×24 استفاده میکند. تابع lastFrame() کل فریم را بهصورت متن برمیگرداند، تابع lines() آن را ردیفبهردیف برمیگرداند و تابع cell(x, y) نویسه و رنگهای یک سلول را در اختیار شما میگذارد.
فشردن کلیدها
تابع press همان رشتههای کلید را میپذیرد که هوک useKeymap میپذیرد. هر فراخوانی درون act() اجرا میشود و فریمهای حاصل را کامل پردازش میکند، بنابراین بررسی بعدی بهروزرسانی را میبیند.
افزودهشده: test("↓ moves the highlight", async () => {افزودهشده: const app = await render(<DeploymentsPage />);افزودهشده: await app.waitForText("feat: stream cells downward");افزودهشده: await app.press("down");افزودهشده: const row = app.lines().find((line) => line.includes("›"));افزودهشده: expect(row).toContain("perf: merge spans across rows");افزودهشده: });افزودهشده: افزودهشده: test("4 sorts by build time", async () => {افزودهشده: const app = await render(<DeploymentsPage />);افزودهشده: await app.waitForText("Build");افزودهشده: await app.press("4"); // sort by the 4th columnافزودهشده: expect(app.locate("12s")?.y).toBeLessThan(app.locate("52s")?.y ?? 0);افزودهشده: });جدول علامت › را جلوی ردیف برجستهشده رسم میکند، بنابراین تست ↓ آن ردیف را پیدا میکند و کامیت آن را بررسی میکند. رقمها بر اساس یک ستون مرتب میکنند و ستون چهارم ساخت است.
اجرا
bun testاین ابزار با هر اجراکنندهای که از تستهای async پشتیبانی کند کار میکند: Bun، Vitest یا Jest. در کنسول، کلید Enter را برای اجرای مجموعهٔ تستها و کلید f را برای خراب کردن یک تست و دیدن شکل شکست آن فشار دهید.
اسنپشاتها
تابع toAnsi() فریم را بهصورت ANSI با رنگ واقعی برمیگرداند و اسنپشاتهایی میسازد که پسرفتهای رنگ را هم شناسایی میکنند:
expect(app.toAnsi()).toMatchSnapshot();امتحان کنید
این Acme Deploys در پایان فصل است که در DevTools اجرا میشود. روی پد کلیک کنید، سپس از کلیدهای زیر استفاده کنید.
باز کردن کنسول
برنامه در DevTools رندر میشود.ابتدا گزینهٔ «نمایش قابلیتها برای توسعهدهندگان وب» را در تنظیمات Safari ← پیشرفته فعال کنید. سپس اینجا کلیک کنید و Enter را فشار دهید.
باز کردن در رایانه
این برنامه در کنسول DevTools رندر میشود که به مرورگر دسکتاپ نیاز دارد.
آزمون
2 پرسشبرای تکمیل فصل به همهٔ پرسشها پاسخ دهید.