From 61fe4a168a3658b41e050c07b9742c3a7806a2ce Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Cl=C3=A9ment=20Latzarus?= <c@ltzr.io>
Date: Thu, 24 Oct 2024 16:21:18 +0200
Subject: [PATCH] feat(mon-pix): increment self-assessment counters

Co-authored-by: Diane Cordier <diane.cordier@pix.fr>
Co-authored-by: Eric Lim <eric.lim@pix.fr>
---
 .../module/element/flashcards/flashcards.gjs  | 17 +++++-
 .../components/module/flashcards_test.gjs     | 60 +++++++++++++++++++
 2 files changed, 76 insertions(+), 1 deletion(-)

diff --git a/mon-pix/app/components/module/element/flashcards/flashcards.gjs b/mon-pix/app/components/module/element/flashcards/flashcards.gjs
index 702f5f5a111..8175925ba45 100644
--- a/mon-pix/app/components/module/element/flashcards/flashcards.gjs
+++ b/mon-pix/app/components/module/element/flashcards/flashcards.gjs
@@ -9,6 +9,8 @@ import ModulixFlashcardsCard from 'mon-pix/components/module/element/flashcards/
 import ModulixFlashcardsIntroCard from 'mon-pix/components/module/element/flashcards/flashcards-intro-card';
 import ModulixFlashcardsOutroCard from 'mon-pix/components/module/element/flashcards/flashcards-outro-card';
 
+const INITIAL_COUNTERS_VALUE = { yes: 0, almost: 0, no: 0 };
+
 export default class ModulixFlashcards extends Component {
   @tracked
   /**
@@ -31,6 +33,13 @@ export default class ModulixFlashcards extends Component {
    */
   currentCardIndex = 0;
 
+  @tracked
+  /**
+   * Stores the number of times an answer has been chosen
+   * @type {object}
+   */
+  counters = { ...INITIAL_COUNTERS_VALUE };
+
   get currentCard() {
     return this.args.flashcards.cards[this.currentCardIndex];
   }
@@ -52,6 +61,7 @@ export default class ModulixFlashcards extends Component {
     this.currentStep = 'intro';
     this.currentCardIndex = 0;
     this.displayedSideName = 'recto';
+    this.counters = { ...INITIAL_COUNTERS_VALUE };
   }
 
   @action
@@ -64,6 +74,10 @@ export default class ModulixFlashcards extends Component {
     this.displayedSideName = this.displayedSideName === 'recto' ? 'verso' : 'recto';
   }
 
+  incrementCounterFor(userAssessment) {
+    this.counters[userAssessment]++;
+  }
+
   goToNextCard() {
     if (this.currentCardIndex < this.numberOfCards - 1) {
       this.currentCardIndex++;
@@ -80,6 +94,7 @@ export default class ModulixFlashcards extends Component {
       cardId: this.currentCard.id,
     };
     this.args.onSelfAssessment(selfAssessmentData);
+    this.incrementCounterFor(userAssessment);
     this.goToNextCard();
   }
 
@@ -103,7 +118,7 @@ export default class ModulixFlashcards extends Component {
       {{/if}}
 
       {{#if (eq this.currentStep "outro")}}
-        <ModulixFlashcardsOutroCard @title={{@flashcards.title}} @onRetry={{this.retry}} />
+        <ModulixFlashcardsOutroCard @title={{@flashcards.title}} @onRetry={{this.retry}} @counters={{this.counters}} />
       {{/if}}
 
       <div class="element-flashcards__footer {{if this.footerIsEmpty 'element-flashcards__footer--empty'}}">
diff --git a/mon-pix/tests/integration/components/module/flashcards_test.gjs b/mon-pix/tests/integration/components/module/flashcards_test.gjs
index ca33dbcd525..e3091835d71 100644
--- a/mon-pix/tests/integration/components/module/flashcards_test.gjs
+++ b/mon-pix/tests/integration/components/module/flashcards_test.gjs
@@ -283,6 +283,66 @@ module('Integration | Component | Module | Flashcards', function (hooks) {
     });
   });
 
+  module('when users reaches the end of the deck', function () {
+    test('should display the counters for each answer', async function (assert) {
+      // given
+      const firstCard = {
+        id: 'e1de6394-ff88-4de3-8834-a40057a50ff4',
+        recto: {
+          image: {
+            url: 'https://images.pix.fr/modulix/bien-ecrire-son-adresse-mail-explication-les-parties-dune-adresse-mail.svg',
+          },
+          text: "A quoi sert l'arobase dans mon adresse email ?",
+        },
+        verso: {
+          image: { url: 'https://images.pix.fr/modulix/didacticiel/ordi-spatial.svg' },
+          text: "Parce que c'est joli",
+        },
+      };
+      const secondCard = {
+        id: 'e1de6394-ff88-4de3-8834-a40057a50ff4',
+        recto: {
+          image: {
+            url: 'https://images.pix.fr/modulix/didacticiel/icon.svg',
+          },
+          text: 'Qui a écrit le Dormeur du Val ?',
+        },
+        verso: {
+          image: {
+            url: 'https://images.pix.fr/modulix/didacticiel/chaton.jpg',
+          },
+          text: '<p>Arthur Rimbaud</p>',
+        },
+      };
+
+      const flashcards = {
+        id: '71de6394-ff88-4de3-8834-a40057a50ff4',
+        type: 'flashcards',
+        title: "Introduction à l'adresse e-mail",
+        instruction: '<p>...</p>',
+        introImage: { url: 'https://images.pix.fr/modulix/placeholder-details.svg' },
+        cards: [firstCard, secondCard],
+      };
+
+      const onSelfAssessment = sinon.stub();
+
+      // when
+      const screen = await render(
+        <template><ModulixFlashcards @flashcards={{flashcards}} @onSelfAssessment={{onSelfAssessment}} /></template>,
+      );
+      await clickByName(t(I18N_KEYS.introStartButton));
+      await clickByName(t('pages.modulix.buttons.flashcards.seeAnswer'));
+      await clickByName(t('pages.modulix.buttons.flashcards.answers.yes'));
+      await clickByName(t('pages.modulix.buttons.flashcards.seeAnswer'));
+      await clickByName(t('pages.modulix.buttons.flashcards.answers.notAtAll'));
+
+      // then
+      assert.ok(screen.getByText('Oui ! : 1'));
+      assert.ok(screen.getByText('Presque : 0'));
+      assert.ok(screen.getByText('Pas du tout : 1'));
+    });
+  });
+
   module('when user clicks on the "Retry" button', function () {
     test('should display intro card', async function (assert) {
       // given