feat(mon-pix): allow to retry flashcards

Co-authored-by: Diane Cordier <[email protected]> Co-authored-by: Eric Lim <[email protected]>
1024pix · Oct 24, 2024 · 600efd0 · 600efd0
1 parent 33f831a
commit 600efd0
Show file tree

Hide file tree

Showing 2 changed files with 50 additions and 2 deletions.
diff --git a/mon-pix/app/components/module/element/flashcards/flashcards.gjs b/mon-pix/app/components/module/element/flashcards/flashcards.gjs
@@ -46,6 +46,11 @@ export default class ModulixFlashcards extends Component {
     return this.currentStep === 'intro';
   }
 
+  @action
+  retry() {
+    this.currentStep = 'intro';
+  }
+
   @action
   start() {
     this.currentStep = 'cards';
@@ -58,8 +63,12 @@ export default class ModulixFlashcards extends Component {
 
   @action
   goToNextCard() {
-    this.currentCardIndex++;
-    this.displayedSideName = 'recto';
+    if (this.currentCardIndex < this.numberOfCards - 1) {
+      this.currentCardIndex++;
+      this.displayedSideName = 'recto';
+    } else {
+      this.currentStep = 'outro';
+    }
   }
 
   <template>

diff --git a/mon-pix/tests/integration/components/module/flashcards_test.gjs b/mon-pix/tests/integration/components/module/flashcards_test.gjs
@@ -268,4 +268,43 @@ module('Integration | Component | Module | Flashcards', function (hooks) {
       });
     });
   });
+
+  module('when user clicks on the "Retry" button', function () {
+    test('should display intro card', 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 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],
+      };
+
+      // when
+      const screen = await render(<template><ModulixFlashcards @flashcards={{flashcards}} /></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 this.pauseTest();
+      await clickByName(t(I18N_KEYS.outroRetryButton));
+
+      // then
+      assert.dom(screen.getByRole('button', { name: t(I18N_KEYS.introStartButton) })).exists();
+    });
+  });
 });