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.

  1. 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.

  2. Un composant serveur, sans réseau

    La sonde joue le canal : elle émet click et connection_event comme le ferait le canal serveur, avec les clés d'enveloppe, et reçoit plates_count. Comme la livraison est synchrone vue de l'extérieur, on asserte juste après publish.

    $ 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 passe
  3. Le 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 au connected, qu'elle refuse avant le login et accepte après, et qu'un autre canal est ignoré.

  4. Un composant client, avec jsdom

    Motif identique. Deux différences : jsdom (dépendance de dev, pas de build) fournit document, 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 passe
  5. Prouver le catalogue

    test_engine.js rejoue chaque exemple (doit valider) et chaque contre-exemple (doit être rejeté). Écrivez-les : ils sont la preuve du contrat.

Deux règles pour que les tests vieillissent bien

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.