टेस्टिंग
ऑफ़स्क्रीन रेंडर करें, कुंजियां दबाएं और टेक्स्ट के रूप में फ़्रेम पर असर्शन लगाएं।
इस अध्याय में
- आपका पहला टेस्ट
- कुंजियां दबाना
- टेस्ट चलाना
- स्नैपशॉट
@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 सवालअध्याय पूरा करने के लिए हर सवाल का जवाब दें।