Cas pratique : corriger rapidement une régression HTML ou CSS avec Git
Les tests de régression d'interfaces sont souvent les plus difficiles à repérer car ils nécessitent l'intervention de l'œil humain et ne peuvent pas être automatisés par des tests unitaires aussi simplement que du code logique. Il faut donc refaire une passe de vérification sur les pages où la CSS et la structure HTML ont changé pour voir si tout est en ordre et cela, dans toutes les tailles d'affichage.
Autant vous dire qu'en fonction du budget, ce travail n'est pas fait à chaque fois que le code est acté (« commit ») dans Git et qu'il arrive qu'une « régression visuelle » soit repérée quelques temps après qu'elle se soit glissée dans le projet.
Plus sournois, si la vérification n'est pas faites à tous les coups, les regressions visuelles qui n'empèchent pas la navigation mettent souvent longtemps à être signalées car personne n'est « bloqué ».
Nous allons donc voir à travers un exemple comment réparer rapidement une régression HTML ou CSS avec l'utilisation du système de version Git et la plateforme GitHub.
Note : si vous avez la moindre question à propos de la procédure exposée ci-après, n'hésitez pas à laisser un commentaire. Si vous souhaitez revenir avec un peu plus de bagage à propos du fonctionnement de Git, n'hésitez pas à lire cet article pour enfin comprendre Git et GitHub !
Régression en Vue !
Pour notre cas d'étude nous allons travailler sur ce site réalisé avec Vue.js et NodeAtlas. En naviguant sur le site en environnement de test, il s'avère que tout va bien.
Cependant en mobile, on repère une régression visuelle :
À priori le menu mobile est affiché même s'il n'a pas été ouvert. Et même affiché, il est très mal habillé !
Après quelques tests d'agrandissement de fenêtre, il s'avère que tout va bien jusqu'à une taille de 950 pixels de largeur. En dessous cependant, le bogue visuel apparait.
Lancer l'application sur son poste
Pour ce projet, nous utilisons le système de version Git. Nous utilisons comme serveur de stockage distant GitHub. Cela nous permet de garder une trace de tous les changements effectués sur le projet tout au long de sa vie. Nous savons que ce menu était correctement affiché par le passé, mais actuellement ce n'est plus le cas. C'est pour cela que l'on parle de régression. Dans un premier temps nous allons cloner le projet sur un poste de développement pour faire tourner le site tel qu'il est actuellement sur le serveur de préproduction.
On ouvre donc un invité de commande et on lance la commande suivante (cela présuppose que nous ayons Git d'installé sur notre machine de développeur).
git clone https://github.com/Orchard-ID/CEMEA-PESL-Website fixbug-navigation-mobile
Cela crée un dossier local fixbug-navigation-mobile contenant le dépôt (« repository ») CEMEA-PESL-Website dans l'état qu'il est actuellement sur la branche par défaut. Ce clone est fait depuis le serveur distant (« remote ») origin. La majorité des projets ont pour branche par défaut master quand ils sont créés sur un serveur GitHub. Dans notre cas, notre branche par défaut est develop car nous avons changé cela sur GitHub.
Nous allons à présent nous déplacer dans ce dossier :
cd ../fixbug-navigation-mobile/
Et, en suivant les instructions du README.md, lancer le site en local et constater le bogue.
Trouver le bon acte de version
Il va falloir trouver entre quels changements du projet, à savoir entre quels actes de version (« commit ») la régression est apparue. Nous pouvons nous aider du descriptif des actes entrés lorsqu'un code est acté pour repérer les changements responsables de cette régression.
Nous allons lancer la commande git log pour jeter un œil à nos actes :
git log
commit fc44ce0450c4126b2f5180141d5f2077c98dbdba
Author: Bruno Lesieur <bruno.lesieur@gmail.com>
Date: Tue Oct 17 15:12:10 2017 +0200
Romain review
Signed-off-by: Bruno Lesieur <bruno.lesieur@gmail.com>
commit 7b9cedf906a79f0bd51c6241d081c708a0b1312e
Author: Bruno Lesieur <bruno.lesieur@gmail.com>
Date: Tue Oct 17 13:26:55 2017 +0200
Fix footer https://github.com/Orchard-ID/CEMEA-PESL-Website/issues/20
Signed-off-by: Bruno Lesieur <bruno.lesieur@gmail.com>
commit 4b3e58206dc104e9c3426053e92b0d7f716646cf
Author: Alban Allée <alban.kahl@gmail.com>
Date: Mon Oct 16 14:56:46 2017 +0200
SVG export completed
commit d61d40ee97e7c5d320132bac25541d2b48d06eff
Author: Bruno Lesieur <bruno.lesieur@gmail.com>
Date: Fri Oct 13 16:41:13 2017 +0200
Fix issue https://github.com/Orchard-ID/CEMEA-PESL-Website/issues/16
Signed-off-by: Bruno Lesieur <bruno.lesieur@gmail.com>
commit de7301193365d73e39456ee77f1e939f6349740a
Author: Bruno Lesieur <bruno.lesieur@gmail.com>
Date: Tue Oct 10 17:44:55 2017 +0200
Keyed v-for for dynamic list
Signed-off-by: Bruno Lesieur <bruno.lesieur@gmail.com>
commit c3fcd9e4f533e887319efdfe58955bc367e30af3
Author: Bruno Lesieur <bruno.lesieur@gmail.com>
Date: Mon Oct 9 18:22:55 2017 +0200
Vue convention about props
Signed-off-by: Bruno Lesieur <bruno.lesieur@gmail.com>
commit 43228d365debb05217f376261b9aa875bb6e2f5d
Author: Bruno Lesieur <bruno.lesieur@gmail.com>
Date: Mon Oct 9 16:16:43 2017 +0200
Convention de composant Vue.js
Signed-off-by: Bruno Lesieur <bruno.lesieur@gmail.com>
...
...
...
Tous les actes sont ainsi listés du plus récent au plus vieux. Je sais que la modification se trouve dans les derniers actes car, même si je ne revois pas tout le design à chaque code acté, je le revois régulièrement. Je sais donc qu'avant l'un de ces derniers actes de version, cette régression n'avait pas été constatée. Je vais donc fouiller ces logs à la recherche de modifications qui peuvent potentiellement avoir causé la régression.
Premier acte
Vérifions le premier acte de version qui s'intitule simplement « Romain review ».
git show fc44ce0450c4126b2f5180141d5f2077c98dbdba
diff --git a/assets/stylesheets/modules/cmpt-footer.styl b/assets/stylesheets/modules/cmpt-footer.styl
index 98bf25d..eac4f92 100644
--- a/assets/stylesheets/modules/cmpt-footer.styl
+++ b/assets/stylesheets/modules/cmpt-footer.styl
@@ -2,12 +2,12 @@
position relative
z-index 1
margin 0 auto
- max-width 1200px
+ max-width 950px
padding 0 0 32px
color $footerTextColor
p
- font-size 1.6rem
+ font-size 1.2rem
a
color $footerLinkColor
@@ -37,7 +37,7 @@
h3
margin-top 32px
- font-size 2rem
+ font-size 1.4rem
font-weight bold
&--contact
@@ -47,7 +47,7 @@
@media (min-width: 950px)
float left
- width 60%
+ width 50%
&::after
content ""
@@ -81,7 +81,7 @@
@media (min-width: 950px)
float right
- width 40%
+ width 50%
&--title
margin-bottom 32px
Le seul fichier modifié lors de cet acte de version se nomme cmpt-footer.styl. C'est bien du style (un fichier Stylus qui génère de la CSS depuis NodeAtlas), mais tout porte à croire que cela modifie le pied de page. Il y a donc peu de chance que cela soit responsable de cette régression qui semble plutôt intervenir en entête de page ou dans la navigation. Je décide donc de poursuivre.
Deuxième acte
Le deuxième acte de version fait mention d'un footer, or actuellement, l'erreur doit se trouver dans un fichier probablement nommé header ou navigation. Je passe mon chemin.
Note : cela ne veut pas dire que l'erreur n'aurait pas été ici. Le but de la manœuvre étant de résoudre le bogue le plus rapidement possible, s'il n'y a pas d'indice particulier pour un acte de version, il est plus judicieux de continuer.
Troisième acte
Le troisième acte de version n'est pas de moi. Par curiosité, je regarde avec la commande show.
git show 4b3e58206dc104e9c3426053e92b0d7f716646cf
diff --git a/assets/media/images/parallax/bag-blue.svg b/assets/media/images/parallax/bag-blue.svg
index 913e7f4..aefc64e 100644
--- a/assets/media/images/parallax/bag-blue.svg
+++ b/assets/media/images/parallax/bag-blue.svg
@@ -2,828 +2,18 @@
<!-- Generator: Adobe Illustrator 21.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 350 350" enable-background="new 0 0 350 350" xml:space="preserve">
-<g id="Bag">
- <g id="Red_1_">
- <path fill="none" stroke="#FF0068" stroke-width="10" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
- M158.1,167h33.9c2.6,0,4.7,2.1,4.7,4.7V217c0,2.6-2.1,4.7-4.7,4.7h-33.9c-2.6,0-4.7-2.1-4.7-4.7v-45.4
- C153.4,169.1,155.5,167,158.1,167z"/>
- <path fill="none" stroke="#FF0068" stroke-width="10" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
- M284.9,273.2H65.1c-5.3,0-9.6-4.3-9.6-9.6V125.2c0-5.3,4.3-9.6,9.6-9.6h219.7c5.3,0,9.6,4.3,9.6,9.6v138.4
- C294.5,268.9,290.2,273.2,284.9,273.2z"/>
- <path fill="none" stroke="#FF0068" stroke-width="10" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
- M143.1,76.8h63.8c5.9,0,10.6,4.8,10.6,10.6v28h-85.1v-28C132.5,81.6,137.2,76.8,143.1,76.8z"/>
-
- <line fill="none" stroke="#FF0068" stroke-width="10" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="153.4" y1="194.4" x2="55.5" y2="194.4"/>
...
...
...
Je vois que la sortie va être très grande. Je coupe donc l'affichage et je retourne à mon invité de commande. Je vais tenter une commande plus succinte avec l'option --stat. À partir de maintenant, je vais vérifier seulement quels fichiers ont bougés avant d'en regarder le détail.
git show 4b3e58206dc104e9c3426053e92b0d7f716646cf --stat
commit 4b3e58206dc104e9c3426053e92b0d7f716646cf
Author: Alban Allée <alban.kahl@gmail.com>
Date: Mon Oct 16 14:56:46 2017 +0200
SVG export completed
assets/media/images/parallax/bag-blue.svg | 836 +-----------------------
assets/media/images/parallax/bag-green.svg | 836 +-----------------------
assets/media/images/parallax/bag-red.svg | 836 +-----------------------
assets/media/images/parallax/bag-yellow.svg | 836 +-----------------------
assets/media/images/parallax/ball-blue.svg | 842 +------------------------
assets/media/images/parallax/ball-green.svg | 841 +-----------------------
assets/media/images/parallax/ball-red.svg | 841 +-----------------------
assets/media/images/parallax/ball-yellow.svg | 841 +-----------------------
assets/media/images/parallax/book-blue.svg | 832 +-----------------------
assets/media/images/parallax/book-green.svg | 832 +-----------------------
assets/media/images/parallax/book-red.svg | 832 +-----------------------
assets/media/images/parallax/book-yellow.svg | 832 +-----------------------
assets/media/images/parallax/brush-blue.svg | 828 +-----------------------
assets/media/images/parallax/brush-green.svg | 828 +-----------------------
assets/media/images/parallax/brush-red.svg | 828 +-----------------------
assets/media/images/parallax/brush-yellow.svg | 828 +-----------------------
assets/media/images/parallax/camera-blue.svg | 828 +-----------------------
assets/media/images/parallax/camera-green.svg | 828 +-----------------------
assets/media/images/parallax/camera-red.svg | 828 +-----------------------
assets/media/images/parallax/camera-yellow.svg | 828 +-----------------------
20 files changed, 213 insertions(+), 16448 deletions(-)
R.A.S. Rien qui touche à l'affichage du menu ici, juste des images.
Quatrième acte
Je continue avec le quatrième acte de version qui indique seulement « Fix issue ». Je regarde.
git show d61d40ee97e7c5d320132bac25541d2b48d06eff --stat
commit d61d40ee97e7c5d320132bac25541d2b48d06eff
Author: Bruno Lesieur <bruno.lesieur@gmail.com>
Date: Fri Oct 13 16:41:13 2017 +0200
Fix issue https://github.com/Orchard-ID/CEMEA-PESL-Website/issues/16
Signed-off-by: Bruno Lesieur <bruno.lesieur@gmail.com>
assets/stylesheets/modules/cmpt-navigation.styl | 19 ++++++++++++-------
1 file changed, 12 insertions(+), 7 deletions(-)
Je vois ici que le seul fichier modifié se nomme cmpt-navigation.styl. C'est très intéressant car
- il mentionne un fichier de style pouvant impacter une regression visuelle,
- cette régression pourrait intervenir au niveau de la navigation.
C'est un bon candidat. Jettons un œil aux modifications faites dans ce fichier :
git show d61d40ee97e7c5d320132bac25541d2b48d06eff
diff --git a/assets/stylesheets/modules/cmpt-navigation.styl b/assets/stylesheets/modules/cmpt-navigation.styl
index 144189f..933715f 100644
--- a/assets/stylesheets/modules/cmpt-navigation.styl
+++ b/assets/stylesheets/modules/cmpt-navigation.styl
@@ -50,10 +50,11 @@
@media (min-width: 950px)
display none
- &--menu
- .router-link-exact-active
- cursor default
- color #ff0068
+ &--menu--main li:nth-child(1) .router-link-exact-active
+ &--menu--main li + li .router-link-active
+ &--members-area .router-link-active
+ cursor default
+ color #ff0068
@media (max-width: 949px)
display none
@@ -99,6 +100,13 @@
background-color $highlightLinkColor
border 1px solid $highlightLinkColor
+
+ & ^[0]--menu--main li:nth-child(1) .router-link-exact-active
+ & ^[0]--menu--main li + li .router-link-active
+ & ^[0]--members-area .router-link-active
+ cursor default
+ color #ff0068
+
& ^[0]--menu
display block
@@ -106,9 +114,6 @@
color $linkColorReversed
&:hover
color $highlightLinkColorReversed
- &.router-link-exact-active
- cursor default
- color #ff0068
@media (max-width: 949px)
position absolute
En lisant les parties modifiées, elles semblent faire intervenir des Media Queries. **On constate même que les valeurs 949px et 950px apparaissent plusieurs fois ce qui correspond exactement à la limite à partir de laquelle notre régression visuelle apparait. Nous allons donc nous mettre sur une branche détachée (« detached ») qui va reproduire le dépôt du site tel qu'il était lors de cet acte de version.
git checkout d61d40ee97e7c5d320132bac25541d2b48d06eff
Note: checking out 'd61d40ee97e7c5d320132bac25541d2b48d06eff'.
You are in 'detached HEAD' state. You can look around, make experimental
changes and commit them, and you can discard any commits you make in this
state without impacting any branches by performing another checkout.
If you want to create a new branch to retain commits you create, you may
do so (now or later) by using -b with the checkout command again. Example:
git checkout -b <new-branch-name>
HEAD is now at d61d40e... Fix issue https://github.com/Orchard-ID/CEMEA-PESL-Website/issues/16
C'est l'occasion de vérifier si, à tout hasard, nous n'avons pas raté la régression dans des actes plus récents. Peut-être dans le deuxième acte de version que nous n'avons pas vérifié plus en avant ? On lance notre projet et on vérifie.
On constate que la régression est toujours présente, cela signifie qu'il est donc toujours possible que nous soyons sur l'acte bascule entre régression et non régression. Pour en avoir le cœur net, il ne nous reste plus qu'à nous déplacer sur l'acte de version précédent :
git checkout de7301193365d73e39456ee77f1e939f6349740a
Previous HEAD position was d61d40e... Fix issue https://github.com/Orchard-ID/CEMEA-PESL-Website/issues/16
HEAD is now at de73011... Keyed v-for for dynamic list
On relance une nouvelle fois l'application.
Bingo ! La régression vient bien du fichier en question. Nous allons donc pouvoir résoudre ce bogue sans plus attendre !
Corriger la régression
Nous allons à présent nous remettre sur la branche contenant la version de test car souvenez vous, nous somme actuellement sur une branche détachée. Pour le vérifier, il nous suffit de consulter la liste des branches sur notre machine locale pour ce dépôt :
git branch
* (HEAD detached at de73011)
develop
master
Nous voyons que nous somme sur une branche détachée grâce à la petite * en regard de la ligne. Nous allons donc nous remettre sur la branche develop :
git checkout develop
Previous HEAD position was de73011... Keyed v-for for dynamic list
Switched to branch 'develop'
À partir de là, nous allons créer une branche dédiée à la résolution de ce bogue. Nous allons donc faire une copie de la branche actuelle pour faire toutes nos modifications ! Une copie se fait grâce au raccourci d'option b dans la commande checkout. Nous pouvons ainsi créer le nom que cette branche va avoir.
git checkout -b fixbug-navigation-mobile
Vérifions
git branch
develop
* fixbug-navigation-mobile
master
C'est maintenant à moi de jouer. Je récupère de nouveau les différences entre ma version actuelle et la version ou le bogue n'était pas là :
git show d61d40ee97e7c5d320132bac25541d2b48d06eff
diff --git a/assets/stylesheets/modules/cmpt-navigation.styl b/assets/stylesheets/modules/cmpt-navigation.styl
index 144189f..933715f 100644
--- a/assets/stylesheets/modules/cmpt-navigation.styl
+++ b/assets/stylesheets/modules/cmpt-navigation.styl
@@ -50,10 +50,11 @@
@media (min-width: 950px)
display none
- &--menu
- .router-link-exact-active
- cursor default
- color #ff0068
+ &--menu--main li:nth-child(1) .router-link-exact-active
+ &--menu--main li + li .router-link-active
+ &--members-area .router-link-active
+ cursor default
+ color #ff0068
@media (max-width: 949px)
display none
@@ -99,6 +100,13 @@
background-color $highlightLinkColor
border 1px solid $highlightLinkColor
+
+ & ^[0]--menu--main li:nth-child(1) .router-link-exact-active
+ & ^[0]--menu--main li + li .router-link-active
+ & ^[0]--members-area .router-link-active
+ cursor default
+ color #ff0068
+
& ^[0]--menu
display block
@@ -106,9 +114,6 @@
color $linkColorReversed
&:hover
color $highlightLinkColorReversed
- &.router-link-exact-active
- cursor default
- color #ff0068
@media (max-width: 949px)
position absolute
Pour comprendre ce code, voici la signification des éléments en regard de ligne. Les - en début de ligne indiquent un code qui était présent sur l'acte d'avant et qui a disparu dans celui ci. Les + indiquent le code qui a été ajouté et qui n'existait pas sur l'acte d'avant.
Après avoir lancé l'application et avoir lu le code, on s'aperçoit après quelques minutes que les lignes :
@media (min-width: 950px)
display none
et
@media (max-width: 949px)
display none
sont très étranges. Au vu des Media Queries, un simple display none faisait l'affaire pour les deux groupes, or ont spécifie la même directive pour deux ensembles de taille. Quelque chose a dû « sauter » à ce niveau. En regardant le fichier précédent on voit que le second groupe devrait plutôt être (comme avant) :
&--menu
@media (max-width: 949px)
display none
avec l'ajout de &--menu. Vérifions !
Top ! L'erreur est donc réparée.
Acter et pousser sur le serveur
Nous allons enregistrer les changements que nous venons d'effectuer dans Git. Nous sommes actuellement sur la branche fixbug-navigation-mobile en local. Il va maintenant être question de faire savoir au système de version Git que nous devons prendre en compte cette branche dans le système de version.
Ajoutons donc notre travail à la branche fixbug-navigation-mobile distante. Qu'est-ce que j'ai modifié ? Pour le savoir j'utilise la commande status.
git status
On branch fixbug-navigation-mobile
Changes not staged for commit:
(use "git add <file>..." to update what will be committed)
(use "git checkout -- <file>..." to discard changes in working directory)
modified: cmpt-navigation.styl
no changes added to commit (use "git add" and/or "git commit -a")
À partir de là, je décide d'ajouter à mon index des fichiers à acter. Je vais ajouter le fichier cmpt-navigation.styl qui actuellement n'est pas référencé comme fichier à enregistrer dans mon prochain acte de version. J'utilise donc la commande add.
git add cmpt-navigation.styl
et je vérifie qu'il est bien ajouté :
git status
On branch fixbug-navigation-mobile
Changes to be committed:
(use "git reset HEAD <file>..." to unstage)
modified: cmpt-navigation.styl
Il ne me reste plus qu'à acter mon travail sous un nouveau acte de version avec la commande commit :
git commit
Une interface me demande d'entrer un détail pour cet acte. Je vais, par exemple entrer, « fix visual regression about menu always opened on mobile ». J'appuie sur Échap et j'entre les symboles :wq pour sauvegarder mon texte et quitter l'interface.
[fixbug-navigation-mobile 80d06d2] fix visual regression about menu always opened on mobile
1 file changed, 1 insertion(+)
Mon acte de version est donc dans le système de version de ma base locale. Je pousse alors ça sur le serveur GitHub, sur une branche fixbug-navigation-mobile distante.
git push origin fixbug-navigation-mobile
Counting objects: 6, done.
Delta compression using up to 4 threads.
Compressing objects: 100% (6/6), done.
Writing objects: 100% (6/6), 515 bytes | 0 bytes/s, done.
Total 6 (delta 5), reused 0 (delta 0)
remote: Resolving deltas: 100% (5/5), completed with 5 local objects.
To https://github.com/Orchard-ID/CEMEA-PESL-Website.git
* [new branch] fixbug-navigation-mobile -> fixbug-navigation-mobile
Il ne me reste plus qu'à revoir ce code avec un membre de mon équipe. Par exemple via une proposition de fusion sur GitHub pour voir si cela convient à tout le monde. Je vais ici me permettre de valider la proposition de fusion moi-même car ce petit changement n'a pas besoin de plus de paire d'yeux.
Proposition de fusion
Je vais à présent soumettre mon travail à mon équipe. J'aurais pu directement utiliser la commande merge pour reverser le travail de cette branche dans la develop mais nous utilisons Git afin de permettre aux autres de faire un retour sur les modifications pour s'assurer que tout est en ordre.
En retournant sur la page projet, GitHub s'est aperçu qu'une nouvelle branche est apparue. Il propose donc de faire une proposition de fusion (« pull request ») pour aligner son contenu avec celui de la version develop.
Une fois sur l'interface, le système nous dit qu'il est tout à fait possible de fusionner les branches develop et fix-navigation-mobile sans qu'il y ait de conflit à résoudre. Dans le cas contraire, une interface de résolution très pratique est proposée par GitHub.
Je mets le nom de ma proposition de fusion, je spécifie avec un tag que cela résous un bug et je m'assigne en tant que proposeur de cette proposition de fusion. Puisque je vais moi-même la valider sans demander plus d'avis au regard de la correction apportée, je ne demande pas de relecteurs de code (« reviewers »).
Dans des propositions de fusion plus dense, vous pouvez assigner des relecteurs et vous devez attendre leur approbation pour finaliser la fusion. Quand à eux, ils ont tous les outils nécessaires pour voir ce qui a changé et vous faire leurs retours ligne après ligne.
Dans notre cas, je vais simplement réduire la liste des actes en un seul (« squash ») et fusionner cet empilement avec la branche develop. Empiler ses actes avant de faire une fusion permet de ramener à un seul acte de modification dans la branche develop une multitude d'acte de modification dans la branche de comparaison. Dans notre cas, puisque notre résolution de bogue n'a donné lieu qu'à un seul acte, cela n'est pas utile. Cela l'est pour le cas où nous aurions fait plusieurs acte de version en fonction des allers-retours avec nos relecteurs.
Suite à la réussite de la fusion, GitHub me propose de supprimer la branche fix-navigation-mobile sur le serveur. Il ne me reste plus qu'à cliquer sur « Delete » pour effectuer cette action et laisser le serveur propre.
Effectivement, si l'on souhaite savoir quels sont les modifications que j'ai faites sur le fichier, il suffirait de consulter l'acte de version correspondant à ma fusion dans les logs. Pour savoir ce qui a été discuté lors de cette proposition de fusion, il me suffira d'aller consulter les archives.
Un peu de ménage
Je peux à présent supprimer mon dossier fix-navigation-mobile de ma machine car les modifications ont été faites, actées et sont tracées dans la branche develop sous un nouveau acte de version.
Je rebascule sur la branche principale.
git checkout develop
Switched to branch 'develop'
et je met à jour cette branche locale avec le dernier acte de version fait via la proposition de fusion sur le serveur :
git pull origin develop
From https://github.com/Orchard-ID/CEMEA-PESL-Website
* branch develop -> FETCH_HEAD
Updating fc44ce0..e69d944
Fast-forward
assets/stylesheets/modules/cmpt-navigation.styl | 1 +
1 file changed, 1 insertion(+)
Par curiosité je regarde ce qui a bougé.
git log
commit e69d9443bb9ec48b995b4708207876ef1f9c9e48
Author: Bruno Lesieur <bruno.lesieur@gmail.com>
Date: Thu Oct 26 11:42:33 2017 +0200
fix visual regression about menu always opened on mobile (#21)
...
...
...
Et je constate bien un nouvel acte en regard de la liste des actes de version.
Il est temps de supprimer le dossier de cette résolution de bogue. Si toutefois vous décidez de continuer à travailler dans ce dossier pour n'importe quelle raison, supprimez simplement la branche fixbug-navigation-mobile en locale pour faire un peu de ménage avec le raccourci d'option -D de la commande branch :
git branch -D fixbug-navigation-mobile
Deleted branch fixbug-navigation-mobile (was 80d06d2).
Conclusion
Ce cas d'étude est un peu long mais couvre toute la démarche de résolution d'un bogue. Il aurait été périlleux et long, à froid, de retourner dans le code pour trouver au doigt levé quel code provoquait le soucis alors qu'en utilisant l'outil de version ceci est un jeu d'enfant avec un peu d'entrainement. De plus, puisque c'est une régression, on sait déjà que la réponse se trouve dans notre code. Alors pourquoi perdre plus de temps ?!
Et pour ceux qui se demande comment on aurait fait si la régression était loin dans les actes, il est tout à fait possible d'en trouver la liste depuis GitHub et de prendre au hasard des actes de version et de jouer au jeu du plus ou moins en testant au fur et à mesure quels actes font tourner le projet avec et sans régression et resserrer l'étau à quelque chose de moins fourni.