docs: TDD avec des assertions Approval

9fa0fab4 · Marc · f514a274 · 9fa0fab4 · 9fa0fab4 · 9fa0fab4
Commit 9fa0fab4 authored 1 year ago by Marc
--- a/TODO.md
+++ b/TODO.md
@@ -6,6 +6,7 @@ Agile Tour Strasbourg
    - [ ] Créer un dépôt froggit
    - [X] Url : u.baldir.fr/at-2024-stras-talk-sources
    - [X] https://lab.frogg.it/baldir/approval-testing-plus-asciidoctor-equals-bdd-plus-love
+    - [X] Slides : https://at2024.baldir.fr
  - [ ] Installer Asciidoctor https://docs.asciidoctor.org/reveal.js-converter/latest/
  - [ ] Utiliser Kahoot?
 - [ ] Préparer un cadre StreamDeck?

--- a/public/images/agile_tour_2024.png
+++ b/public/images/agile_tour_2024.png
--- a/public/images/agile_tour_2024_redone.png
+++ b/public/images/agile_tour_2024_redone.png
--- a/public/images/approval_tdd_01_white_board.png
+++ b/public/images/approval_tdd_01_white_board.png
--- a/public/images/approval_tdd_02_blank_test_and_production_code.png
+++ b/public/images/approval_tdd_02_blank_test_and_production_code.png
--- a/public/images/approval_tdd_03_write_approval_test.png
+++ b/public/images/approval_tdd_03_write_approval_test.png
--- a/public/images/approval_tdd_04_write_approbation_file_red.png
+++ b/public/images/approval_tdd_04_write_approbation_file_red.png
--- a/public/images/approval_tdd_05_write_prod_code_green.png
+++ b/public/images/approval_tdd_05_write_prod_code_green.png
--- a/public/images/approval_tdd_06_received_deleted_green.png
+++ b/public/images/approval_tdd_06_received_deleted_green.png
--- a/public/images/approval_tdd_07_refactor.png
+++ b/public/images/approval_tdd_07_refactor.png
--- a/public/images/approval_tdd_08_new_feature_approved_red.png
+++ b/public/images/approval_tdd_08_new_feature_approved_red.png
--- a/public/images/approval_tdd_09_new_interaction_red.png
+++ b/public/images/approval_tdd_09_new_interaction_red.png
--- a/public/images/approval_tdd_10_production_code_green_delete_received.png
+++ b/public/images/approval_tdd_10_production_code_green_delete_received.png
--- a/public/images/approval_tdd_11_final_green.png
+++ b/public/images/approval_tdd_11_final_green.png
--- a/public/index.html
+++ b/public/index.html
@@ -413,9 +413,32 @@ ul.byline {
 ul.byline li + li {
  margin-top: 0.25em;
 }
-</style></head><body><div class="reveal"><div class="slides"><section class="title" data-state="title"><h1>test</h1><p class="byline">
+</style><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css"><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/v4-shims.min.css"></head><body><div class="reveal"><div class="slides"><section class="title" data-state="title"><h1>test</h1><p class="byline">
  <span class="author">Marc Bouvier • u.baldir.fr/me</span>
-  </p></section><section id="_plan_en_vrac"><h2>Plan en vrac</h2><div class="slide-content"><div class="ulist"><ul><li><p>Approval Testing</p><div class="ulist"><ul><li><p>diff</p></li><li><p>c&#8217;est une alternative pour les assertions</p></li></ul></div></li><li><p>Pour commencer</p><div class="ulist"><ul><li><p>Approval Kata</p></li></ul></div></li><li><p>Cas d&#8217;usage</p><div class="ulist"><ul><li><p>Legacy Code</p><div class="ulist"><ul><li><p>Produire beaucoup de résultats</p></li><li><p>Vérifier des</p></li><li><p><a href="https://blog.approvaltests.org/2008/10/approval-tests-pictures-worth-1000.html">Approval Tests pictures are worth 1000 words</a></p></li></ul></div></li></ul></div></li><li><p>Asciidoctor</p><div class="ulist"><ul><li><p>Les tableaux</p></li></ul></div></li><li><p>Ressources additionnelles</p><div class="ulist"><ul><li><p><a href="https://approvaltests.com">approvaltests.com</a></p></li><li><p><a href="https://approvaltests.com/faq/">Approvaltests FAQ</a></p></li><li><p><a href="https://www.youtube.com/watch?v=vMww6pV6P7s&amp;list=PL7GpAlmbnHyAOQfqrF9-HXFIG45LvPKy_">Emily Bache — Approval Testing playlist</a></p></li><li><p><a href="https://blog.approvaltests.org/2012/05/testing-circle.html">The Testing Circle</a></p></li></ul></div></li></ul></div></div></section>
+  </p></section><section id="_plan_en_vrac"><h2>Plan en vrac</h2><div class="slide-content"><div class="ulist"><ul><li><p>Approval Testing</p><div class="ulist"><ul><li><p>diff</p></li><li><p>c&#8217;est une alternative pour les assertions</p></li></ul></div></li><li><p>Pour commencer</p><div class="ulist"><ul><li><p>Approval Kata</p></li></ul></div></li><li><p>Cas d&#8217;usage</p><div class="ulist"><ul><li><p>Legacy Code</p><div class="ulist"><ul><li><p>Produire beaucoup de résultats</p></li><li><p>Vérifier des états complexes</p></li><li><p>Peut être utile pour faire des tests de caractérisation</p></li><li><p><a href="https://blog.approvaltests.org/2008/10/approval-tests-pictures-worth-1000.html">Approval Tests pictures are worth 1000 words</a></p></li></ul></div></li></ul></div></li><li><p>Asciidoctor</p><div class="ulist"><ul><li><p>Les tableaux</p></li></ul></div></li><li><p>Ressources additionnelles</p><div class="ulist"><ul><li><p><a href="https://approvaltests.com">approvaltests.com</a></p></li><li><p><a href="https://approvaltests.com/faq/">Approvaltests FAQ</a></p></li><li><p><a href="https://www.youtube.com/watch?v=vMww6pV6P7s&amp;list=PL7GpAlmbnHyAOQfqrF9-HXFIG45LvPKy_">Emily Bache — Approval Testing playlist</a></p></li><li><p><a href="https://blog.approvaltests.org/2012/05/testing-circle.html">The Testing Circle</a></p></li></ul></div></li></ul></div></div></section>
+<section id="_connect"><h2>Connect</h2></section>
+<section id="_marc_bouvier"><h2>Marc Bouvier</h2></section>
+<section id="_concept"><h2>Concept</h2><div class="slide-content"><div class="paragraph"><p>Un framework de test écrit par Llewellyn Falco</p></div>
+<div class="paragraph"><p>Basé sur l&#8217;idée du Golden master(REF).</p></div>
+<div class="paragraph"><p>Représenter dans un fichier test les sorties de l&#8217;exécution d&#8217;un programme.</p></div>
+<div class="paragraph"><p>Le résultat est approuvé par un humain.</p></div>
+<div class="paragraph"><p>C&#8217;est un type d&#8217;assertion.</p></div></div></section>
+<section id="_cas_dutilisation"><h2>Cas d&#8217;utilisation</h2></section>
+<section><section id="_test_driving"><h2>Test driving</h2></section><section id="_réfléchir_au_comportement_quon_attend"><div class="slide-content"><div class="imageblock"><img src="images/approval_tdd_01_white_board.png" alt="approval tdd 01 white board"></div></div></section><section id="_code_vide_et_test_vide"><div class="slide-content"><div class="imageblock"><img src="images/approval_tdd_02_blank_test_and_production_code.png" alt="approval tdd 02 blank test and production code"></div></div></section><section id="_ecrire_un_test_dapprobation"><div class="slide-content"><div class="imageblock"><img src="images/approval_tdd_03_write_approval_test.png" alt="approval tdd 03 write approval test"></div>
+<aside class="notes"><div class="paragraph"><p>Un test avec une assertion approval génère</p></div>
+<div class="ulist"><ul><li><p>un fichier .approval : c&#8217;est le résultat attendu (évidemment il est vide au début)</p></li><li><p>un fichier .received : c&#8217;est la sortie que produit le test</p></li></ul></div>
+<div class="paragraph"><p>Le fichier .approved est à versionner</p></div>
+<div class="paragraph"><p>On va en général créer une fonction de rendu qui représente l&#8217;état du système qu&#8217;on teste lisible par un humain</p></div></aside></div></section><section id="_foo"><div class="slide-content"><div class="imageblock"><img src="images/approval_tdd_04_write_approbation_file_red.png" alt="approval tdd 04 write approbation file red"></div></div></section><section id="_foo_2"><div class="slide-content"><div class="imageblock"><img src="images/approval_tdd_05_write_prod_code_green.png" alt="approval tdd 05 write prod code green"></div></div></section><section id="_foo_3"><div class="slide-content"><aside class="notes"><div class="paragraph"><p>Quand les fichiers .approved et .received sont identiques, le test passe
+Le fichier .received est supprimé</p></div></aside>
+<div class="imageblock"><img src="images/approval_tdd_06_received_deleted_green.png" alt="approval tdd 06 received deleted green"></div></div></section><section id="_foo_4"><div class="slide-content"><div class="imageblock"><img src="images/approval_tdd_07_refactor.png" alt="approval tdd 07 refactor"></div></div></section><section id="_foo_5"><div class="slide-content"><div class="imageblock"><img src="images/approval_tdd_08_new_feature_approved_red.png" alt="approval tdd 08 new feature approved red"></div></div></section><section id="_foo_6"><div class="slide-content"><div class="imageblock"><img src="images/approval_tdd_09_new_interaction_red.png" alt="approval tdd 09 new interaction red"></div></div></section><section id="_foo_7"><div class="slide-content"><div class="imageblock"><img src="images/approval_tdd_10_production_code_green_delete_received.png" alt="approval tdd 10 production code green delete received"></div></div></section><section id="_foo_8"><div class="slide-content"><div class="imageblock"><img src="images/approval_tdd_11_final_green.png" alt="approval tdd 11 final green"></div></div></section><section id="_foo_9"></section><section id="_foo_10"></section></section>
+<section><section id="_locking_code_for_refactoring_of_legacy_code"><h2>Locking Code for refactoring of Legacy Code</h2><div class="slide-content"><div class="paragraph"><p>Ajouter des tests autour de code pour rendre le refactoring possible</p></div><div class="paragraph"><p>💡 Idée d&#8217;image d&#8217;une troupe d&#8217;enfants qui posent plein de questions à un programme</p></div></div></section><section id="_caractérisation"><h2>Caractérisation</h2></section></section>
+<section id="_propriétés"><h2>Propriétés</h2><div class="slide-content"><div class="ulist"><ul><li><p>facilité de mise en place</p></li><li><p>très couvrant</p></li><li><p>très refactoring friendly (on crée une abstraction par le texte qui permet d&#8217;isoler les détails d&#8217;implémentation)</p></li></ul></div></div></section>
+<section><section id="_possibilités"><h2>Possibilités</h2></section><section id="_combinaisons"><h2>Combinaisons</h2><div class="slide-content"><div class="admonitionblock caution"><table><tr><td class="icon"><i class="fa fa-fire" title="Caution"></i></td><td class="content"><div class="paragraph"><p>Attention à l&#8217;explosion combinatoire!</p></div></td></tr></table></div></div></section><section id="_foo_11"><h2>foo</h2></section></section>
+<section id="_concrete"><h2>Concrete</h2><div class="slide-content"><div class="paragraph"><p>Kata</p></div></div></section>
+<section id="_conclude"><h2>Conclude</h2></section>
+<section id="_questions"><h2>Questions ?</h2></section>
+<section id="_fin"><h2>Fin</h2><div class="slide-content"><div class="ulist"><ul><li><p>Ressources</p></li><li><p>Image swcraft 1</p></li><li><p>Image swcraft 2</p></li><li><p>u.baldir.fr/me</p></li><li><p>u.baldir.fr/at-2024-stras-talk-sources/</p></li></ul></div></div></section>
+<section id="_asciidoc_quick_refs"><h2>Asciidoc quick refs</h2></section>
 <section><section id="_inclusion"><h2>Inclusion</h2><div class="slide-content"><div class="paragraph"><p>Exemple d&#8217;inclusion</p></div><div class="listingblock"><div class="content"><pre class="highlight"><code>fsddsf
 fds
 sfd
@@ -423,6 +446,7 @@ dsf
 dsf</code></pre></div></div></div></section><section id="_image"><h2>Image</h2><div class="slide-content"><div class="paragraph"><p>Exemple d&#8217;image</p></div>
 <div class="imageblock"><img src="images/exemple_image.png" alt="exemple image"></div></div></section><section id="_tableau"><h2>Tableau</h2><div class="slide-content"><table class="tableblock frame-all grid-all" style="width:100%"><colgroup><col style="width:50%"><col style="width:50%"></colgroup><thead><tr><th class="tableblock halign-left valign-top">Header Cell 1</th><th class="tableblock halign-left valign-top">Header Cell 2</th></tr><tbody><tr><td class="tableblock halign-left valign-top"><p class="tableblock">Row 1 Cell 1</p></td><td class="tableblock halign-left valign-top"><p class="tableblock">Row 1 Cell 2</p></td></tr><tr><td class="tableblock halign-left valign-top"><p class="tableblock">Row 2 Cell 1</p></td><td class="tableblock halign-left valign-top"><p class="tableblock">Row 2 Cell 2</p></td></tr></table></div></section></section>
+<section id="_footnotes"><h2>Footnotes</h2><div class="slide-content"><div class="paragraph"><p>Gilded Rose Kata <sup class="footnote">[<span class="footnote" title="View footnote.">1</span>]</sup></p></div></div><div class="footnotes"><div class="footnote">1. truc</div></div></section>
 <section><section id="_pulip"><h2>Pulip</h2></section><section id="_baz"><h2>Baz</h2></section></section>
 <section id="_pelep"><h2>Pelep</h2></section></div></div><script src="reveal.js/dist/reveal.js"></script><script>Array.prototype.slice.call(document.querySelectorAll('.slides section')).forEach(function(slide) {
  if (slide.getAttribute('data-background-color')) return;

--- a/public/presentation.adoc
+++ b/public/presentation.adoc
@@ -9,6 +9,8 @@
 :revealjs_totalTime: 1800
 :revealjs_hash: true
 :revealjs_history: true
+// permet l'affichage des admonitions
+:icons: font
 // :customcss: css/presentation.css
 // :source-highlighter: highlightjs
 // :docinfo: private
@@ -28,7 +30,8 @@
 * Cas d'usage
 ** Legacy Code
 *** Produire beaucoup de résultats
-*** Vérifier des
+*** Vérifier des états complexes
+*** Peut être utile pour faire des tests de caractérisation
 *** https://blog.approvaltests.org/2008/10/approval-tests-pictures-worth-1000.html[Approval Tests pictures are worth 1000 words]
 * Asciidoctor
 ** Les tableaux
@@ -38,6 +41,160 @@
 ** https://www.youtube.com/watch?v=vMww6pV6P7s&list=PL7GpAlmbnHyAOQfqrF9-HXFIG45LvPKy_[Emily Bache — Approval Testing playlist]
 ** https://blog.approvaltests.org/2012/05/testing-circle.html[The Testing Circle]
+== Connect
+== Marc Bouvier
+== Concept
+Un framework de test écrit par Llewellyn Falco
+Basé sur l'idée du Golden master(REF).
+Représenter dans un fichier test les sorties de l'exécution d'un programme.
+Le résultat est approuvé par un humain.
+C'est un type d'assertion.
+== Cas d'utilisation
+== Test driving
+[%notitle]
+=== Réfléchir au comportement qu'on attend
+image::approval_tdd_01_white_board.png[]
+[%notitle]
+=== Code vide et test vide
+image::approval_tdd_02_blank_test_and_production_code.png[]
+[%notitle]
+=== Ecrire un test d'approbation
+image::approval_tdd_03_write_approval_test.png[]
+[.notes]
+--
+Un test avec une assertion approval génère
+* un fichier .approval : c'est le résultat attendu (évidemment il est vide au début)
+* un fichier .received : c'est la sortie que produit le test
+Le fichier .approved est à versionner
+On va en général créer une fonction de rendu qui représente l'état du système qu'on teste lisible par un humain
+--
+[%notitle]
+=== Foo
+image::approval_tdd_04_write_approbation_file_red.png[]
+[%notitle]
+=== Foo
+image::approval_tdd_05_write_prod_code_green.png[]
+[%notitle]
+=== Foo
+[.notes]
+--
+Quand les fichiers .approved et .received sont identiques, le test passe
+Le fichier .received est supprimé
+--
+image::approval_tdd_06_received_deleted_green.png[]
+[%notitle]
+=== Foo
+image::approval_tdd_07_refactor.png[]
+[%notitle]
+=== Foo
+image::approval_tdd_08_new_feature_approved_red.png[]
+[%notitle]
+=== Foo
+image::approval_tdd_09_new_interaction_red.png[]
+[%notitle]
+=== Foo
+image::approval_tdd_10_production_code_green_delete_received.png[]
+[%notitle]
+=== Foo
+image::approval_tdd_11_final_green.png[]
+[%notitle]
+=== Foo
+[%notitle]
+=== Foo
+== Locking Code for refactoring of Legacy Code
+Ajouter des tests autour de code pour rendre le refactoring possible
+💡 Idée d'image d'une troupe d'enfants qui posent plein de questions à un programme
+=== Caractérisation
+== Propriétés
+- facilité de mise en place
+- très couvrant
+- très refactoring friendly (on crée une abstraction par le texte qui permet d'isoler les détails d'implémentation)
+== Possibilités
+=== Combinaisons
+[CAUTION]
+====
+Attention à l'explosion combinatoire!
+====
+=== foo
+== Concrete
+Kata
+== Conclude
+== Questions ?
+== Fin
+- Ressources
+- Image swcraft 1
+- Image swcraft 2
+- u.baldir.fr/me
+- u.baldir.fr/at-2024-stras-talk-sources/
+== Asciidoc quick refs
 == Inclusion
 Exemple d'inclusion
@@ -68,7 +225,9 @@ image::exemple_image.png[]
 |===
+== Footnotes
+Gilded Rose Kata footnote:gilded_rose_kata[truc]
 == Pulip