Tuto 6 : tester un composant avec une sonde
Un vrai broker, une sonde abonnée aux émissions du composant, et aucun monkey-patch : on construit l'objet comme le fait la composition, avec d'autres deps. Pour un composant client, jsdom fournit un document réel.
Fondé sur : tests. Projets : tutos/projets/assiettes/tests et tutos/projets/assiettes_serveur/tests.
La sonde
Un objet standard minimal qui garde tout ce qu'il reçoit. Le test l'inscrit comme émetteur de ce que le composant reçoit et abonné de ce qu'il émet. Tout ce que la sonde injecte passe par le vrai broker, donc par la validation.
Un composant serveur, sans réseau
La sonde joue le canal : elle émet
clicketconnection_eventcomme le ferait le canal serveur, avec les clés d'enveloppe, et reçoitplates_count. Comme la livraison est synchrone vue de l'extérieur, on asserte juste aprèspublish.$ node tests/test_plates_memory.js ok un clic = une assiette ok diffusé à tous : pas de clé id ok à l'arrivée, le compte courant est envoyé ok … ciblé sur la session arrivante ERROR (broker): click v1 r0 from probe invalid — dropped: - who: field not declared in catalog (R1) ok click invalide : jeté par le broker, aucun plates_count test_plates_memory : tout passeLe composant d'auth, avec une session factice
La session n'est qu'un objet
{ data: {} }passé par l'enveloppe. Le test vérifie que la porte est posée auconnected, qu'elle refuse avant le login et accepte après, et qu'un autre canal est ignoré.Un composant client, avec jsdom
Motif identique. Deux différences :
jsdom(dépendance de dev, pas de build) fournitdocument, et les assertions portent sur ce que voit l'utilisateur, jamais sur la structure HTML fine.$ npm install -D jsdom && node tests/test_plates_stack.js ok un clic publie plates_count { count: 1 } ok la pile affiche « 1 assiette » ok trois clics = trois plates_count ok le dernier compte vaut 3 ok la pile affiche « 3 assiettes » ok un composant détruit ne publie plus ok destroy() a nettoyé le support test_plates_stack : tout passeProuver le catalogue
test_engine.jsrejoue chaque exemple (doit valider) et chaque contre-exemple (doit être rejeté). Écrivez-les : ils sont la preuve du contrat.
Un scénario = un monde : chaque scénario construit son broker, sa sonde, son support ; rien ne fuit de l'un à l'autre. Et les assertions portent sur ce que voit l'utilisateur : textes, comptes, jamais la structure HTML fine. On peut restyler render() sans casser les tests.