בדיקות
רינדור מחוץ למסך, לחיצה על מקשים ובדיקת הפריים כטקסט.
בפרק הזה
- הבדיקה הראשונה
- לחיצה על מקשים
- הרצת הבדיקות
- תצלומי מצב
@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);נוסף: });הטבלה מציירת › לפני השורה המודגשת, ולכן בדיקת ↓ מוצאת את השורה הזאת ובודקת את הקומיט שלה. הספרות ממיינות לפי עמודה, והעמודה הרביעית היא Build.
הרצת הבדיקות
bun testהכלי עובד עם כל מריץ בדיקות שתומך בבדיקות async: Bun, Vitest או Jest. במסוף, יש ללחוץ על Enter כדי להריץ את חבילת הבדיקות ועל f כדי להכשיל בדיקה ולראות איך נראה כישלון.
תצלומי מצב
toAnsi() מחזיר את הפריים כ-ANSI בצבע מלא, וכך יוצר תצלומי מצב שמזהים גם רגרסיות בצבעים:
expect(app.toAnsi()).toMatchSnapshot();התנסות
זו Acme Deploys בסוף הפרק, רצה ב-DevTools. יש ללחוץ על המשטח, ואז להשתמש במקשים שלמטה.
פתיחת המסוף
האפליקציה מרונדרת ב-DevTools.תחילה יש להפעיל את "הצגת תכונות למפתחי אתרים" בהגדרות Safari → מתקדם. אחר כך ללחוץ כאן וללחוץ על Enter.
פתיחה במחשב
האפליקציה הזו מרונדרת במסוף של DevTools, שדורש דפדפן במחשב.
בוחן
2 שאלותלהשלמת הפרק, יש לענות על כל השאלות.