Tests
Effectuez le rendu hors écran, appuyez sur des touches et vérifiez la frame sous forme de texte.
Dans ce chapitre
- Votre premier test
- Simuler des appuis sur les touches
- Exécuter les tests
- Snapshots
@textjs/app/testing effectue le rendu de votre application hors écran, simule des appuis sur les touches et renvoie la frame en texte brut. Les tests s’exécutent sans navigateur ni DevTools.
Votre premier test
Ajouté : import { afterEach, beforeEach, expect, mock, spyOn, test } from "bun:test";Ajouté : import { cleanup, render } from "@textjs/app/testing";Ajouté : import { DEPLOYMENTS } from "../../lib/deployments";Ajouté : import DeploymentsPage from "./page";Ajouté : Ajouté : beforeEach(() => {Ajouté : spyOn(globalThis, "fetch").mockResolvedValue(Response.json(DEPLOYMENTS));Ajouté : });Ajouté : Ajouté : afterEach(() => {Ajouté : mock.restore();Ajouté : return cleanup();Ajouté : });Ajouté : Ajouté : test("lists every deployment", async () => {Ajouté : const app = await render(<DeploymentsPage />, { cols: 80, rows: 12 });Ajouté : await app.waitForText("feat: stream cells downward");Ajouté : expect(app.lines()).toHaveLength(12);Ajouté : });La page récupère /api/deployments, qui n’a pas de serveur sous bun test, donc beforeEach remplace fetch par un simulacre renvoyant les mêmes données. render utilise par défaut une grille de 80×24. lastFrame() renvoie la frame entière sous forme de texte, lines() la renvoie ligne par ligne, et cell(x, y) vous donne le caractère et les couleurs d’une seule cellule.
Simuler des appuis sur les touches
press accepte les mêmes chaînes de touches que useKeymap. Chaque appel s’exécute dans act() et traite toutes les frames résultantes, pour que l’assertion suivante voie la mise à jour.
Ajouté : test("↓ moves the highlight", async () => {Ajouté : const app = await render(<DeploymentsPage />);Ajouté : await app.waitForText("feat: stream cells downward");Ajouté : await app.press("down");Ajouté : const row = app.lines().find((line) => line.includes("›"));Ajouté : expect(row).toContain("perf: merge spans across rows");Ajouté : });Ajouté : Ajouté : test("4 sorts by build time", async () => {Ajouté : const app = await render(<DeploymentsPage />);Ajouté : await app.waitForText("Build");Ajouté : await app.press("4"); // sort by the 4th columnAjouté : expect(app.locate("12s")?.y).toBeLessThan(app.locate("52s")?.y ?? 0);Ajouté : });Le tableau affiche › devant la ligne en surbrillance, ce qui permet au test ↓ de trouver cette ligne et de vérifier son commit. Les chiffres trient selon une colonne, et la quatrième colonne est Build.
Exécuter les tests
bun testCela fonctionne avec tout outil d’exécution prenant en charge les tests async : Bun, Vitest ou Jest. Dans la console, appuyez sur Enter pour exécuter la suite et sur f pour faire échouer un test et voir à quoi ressemble un échec.
Snapshots
toAnsi() renvoie la frame au format ANSI truecolor, ce qui produit des snapshots détectant aussi les régressions de couleur :
expect(app.toAnsi()).toMatchSnapshot();Essayer
Voici Acme Deploys en fin de chapitre, en cours d’exécution dans DevTools. Cliquez sur le pavé, puis utilisez les touches ci-dessous.
Ouvrir la console
L’application s’affiche dans DevTools.Activez d’abord « Afficher les fonctionnalités pour les développeurs web » dans Safari Réglages → Avancés. Puis cliquez ici et appuyez sur Enter.
Ouvrir sur ordinateur
Cette application s’affiche dans la console DevTools, qui nécessite un navigateur sur ordinateur.
Quiz
2 questionsRépondez à toutes les questions pour terminer le chapitre.