feat(mon-pix): increment self-assessment counters

Co-authored-by: Diane Cordier <[email protected]>
Co-authored-by: Eric Lim <[email protected]>

Author: 3 people

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'}}">

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