feat(mon-pix): add counter in outro flashcard

Co-authored-by: Clément Latzarus <[email protected]> Co-authored-by: dianeCdrPix <[email protected]> Co-authored-by: Yann Bertrand <[email protected]>
1024pix · Oct 24, 2024 · 1466f57 · 1466f57
1 parent d125fb2
commit 1466f57
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 11 deletions.
diff --git a/mon-pix/app/components/module/element/flashcards/flashcards-outro-card.gjs b/mon-pix/app/components/module/element/flashcards/flashcards-outro-card.gjs
@@ -11,7 +11,12 @@ import { t } from 'ember-intl';
     </div>
 
     <div class="element-flashcards-outro-card__text">
-
+      <p>{{t "pages.modulix.flashcards.answerDirection"}}</p>
+      <ul>
+        <li> {{t "pages.modulix.flashcards.counter.yes" totalYes=this.args.counter.yes}} </li>
+        <li> {{t "pages.modulix.flashcards.counter.almost" totalAlmost=this.args.counter.almost}} </li>
+        <li> {{t "pages.modulix.flashcards.counter.no" totalNo=this.args.counter.no}} </li>
+      </ul>
     </div>
 
     <div class="element-flashcards-outro-card__footer">

diff --git a/mon-pix/tests/integration/components/module/flashcards-outro-card_test.gjs b/mon-pix/tests/integration/components/module/flashcards-outro-card_test.gjs
@@ -12,16 +12,21 @@ module('Integration | Component | Module | Flashcards Outro Card', function (hoo
 
   test('should display an outro card', async function (assert) {
     // given
+    const counter = { yes: 1, almost: 2, no: 1 };
     const title = 'Introduction à la poésie';
 
     // when
-    const screen = await render(<template>
-      <ModulixFlashcardsOutroCard @title={{title}} /></template>);
 
+    const screen = await render(
+      <template><ModulixFlashcardsOutroCard @counter={{counter}} @title={{title}} /></template>,
+    );
+
+    await this.pauseTest();
     // then
-    // TODO Remove this pause test
-    // await this.pauseTest();
     assert.ok(screen.getByText('Introduction à la poésie'));
+    assert.ok(screen.getByText(`Oui ! : ${counter.yes}`));
+    assert.ok(screen.getByText(`Presque : ${counter.almost}`));
+    assert.ok(screen.getByText(`Pas du tout : ${counter.no}`));
     assert.dom(screen.getByRole('button', { name: t('pages.modulix.buttons.flashcards.retry') })).exists();
   });
 
@@ -31,11 +36,7 @@ module('Integration | Component | Module | Flashcards Outro Card', function (hoo
       const title = 'Introduction à la poésie';
       const onRetryStub = sinon.stub();
 
-      await render(
-      <template>
-        <ModulixFlashcardsOutroCard  @title={{title}} @onRetry={{onRetryStub}} />
-      </template>,
-      );
+      await render(<template><ModulixFlashcardsOutroCard @title={{title}} @onRetry={{onRetryStub}} /></template>);
 
       // when
       await clickByName(t('pages.modulix.buttons.flashcards.retry'));

diff --git a/mon-pix/translations/fr.json b/mon-pix/translations/fr.json
@@ -1510,8 +1510,13 @@
       },
       "flashcards": {
         "answerDirection": "Vous aviez la réponse ?",
+        "counter": {
+          "almost": "Presque : {totalAlmost}",
+          "no": "Pas du tout : {totalNo}",
+          "yes": "Oui ! : {totalYes}"
+        },
         "direction": "Cherchez la réponse puis tournez la carte",
-        "position": "Carte {currentCardPosition}/{totalCards}"
+        "position": "Carte {currentCardPosition}/{totalCards}",
       },
       "grain": {
         "tag": {