[FEATURE] Enregistrer l'auto-évaluation de l'utilisateur dans Matomo (PIX-14313)

pix-service-auto-merge · web-flow · commit 5c1782c74437 · 2024-10-23T11:55:20.000+02:00
#10354
diff --git a/mon-pix/app/components/module/element.gjs b/mon-pix/app/components/module/element.gjs
@@ -32,7 +32,7 @@ export default class ModulixElement extends Component {
     {{else if (eq @element.type "separator")}}
       <SeparatorElement />
     {{else if (eq @element.type "flashcards")}}
-      <FlashcardsElement @flashcards={{@element}} />
+      <FlashcardsElement @flashcards={{@element}} @onSelfAssessment={{@onSelfAssessment}} />
     {{else if (eq @element.type "qcu")}}
       <QcuElement
         @element={{@element}}
diff --git a/mon-pix/app/components/module/element/flashcards/flashcards.gjs b/mon-pix/app/components/module/element/flashcards/flashcards.gjs
@@ -1,3 +1,4 @@
+import { fn } from '@ember/helper';
 import { on } from '@ember/modifier';
 import { action } from '@ember/object';
 import Component from '@glimmer/component';
@@ -55,12 +56,21 @@ export default class ModulixFlashcards extends Component {
     this.displayedSideName = this.displayedSideName === 'recto' ? 'verso' : 'recto';
   }
 
-  @action
   goToNextCard() {
     this.currentCardIndex++;
     this.displayedSideName = 'recto';
   }
 
+  @action
+  onSelfAssessment(userAssessment) {
+    const selfAssessmentData = {
+      userAssessment,
+      cardId: this.currentCard.id,
+    };
+    this.args.onSelfAssessment(selfAssessmentData);
+    this.goToNextCard();
+  }
+
   <template>
     <div class="element-flashcards">
 
@@ -96,21 +106,21 @@ export default class ModulixFlashcards extends Component {
               <button
                 class="element-flashcards__footer__answer__button element-flashcards__footer__answer__button--no"
                 type="button"
-                {{on "click" this.goToNextCard}}
+                {{on "click" (fn this.onSelfAssessment "no")}}
               >
                 {{t "pages.modulix.buttons.flashcards.answers.notAtAll"}}
               </button>
               <button
                 class="element-flashcards__footer__answer__button element-flashcards__footer__answer__button--almost"
                 type="button"
-                {{on "click" this.goToNextCard}}
+                {{on "click" (fn this.onSelfAssessment "almost")}}
               >
                 {{t "pages.modulix.buttons.flashcards.answers.almost"}}
               </button>
               <button
                 class="element-flashcards__footer__answer__button element-flashcards__footer__answer__button--yes"
                 type="button"
-                {{on "click" this.goToNextCard}}
+                {{on "click" (fn this.onSelfAssessment "yes")}}
               >
                 {{t "pages.modulix.buttons.flashcards.answers.yes"}}
               </button>
diff --git a/mon-pix/app/components/module/grain.gjs b/mon-pix/app/components/module/grain.gjs
@@ -187,6 +187,7 @@ export default class ModuleGrain extends Component {
                   @onVideoTranscriptionOpen={{@onVideoTranscriptionOpen}}
                   @onElementAnswer={{@onElementAnswer}}
                   @onElementRetry={{@onElementRetry}}
+                  @onSelfAssessment={{@onSelfAssessment}}
                   @onVideoPlay={{@onVideoPlay}}
                   @getLastCorrectionForElement={{this.getLastCorrectionForElement}}
                   @onFileDownload={{@onFileDownload}}
diff --git a/mon-pix/app/components/module/passage.gjs b/mon-pix/app/components/module/passage.gjs
@@ -131,6 +131,16 @@ export default class ModulePassage extends Component {
     });
   }
 
+  @action
+  async onSelfAssessment({ userAssessment, cardId }) {
+    this.metrics.add({
+      event: 'custom-event',
+      'pix-event-category': 'Modulix',
+      'pix-event-action': `Passage du module : ${this.args.module.id}`,
+      'pix-event-name': `Click sur le bouton '${userAssessment}' de la flashcard : ${cardId}`,
+    });
+  }
+
   @action
   async onElementRetry(answerData) {
     this.metrics.add({
@@ -204,6 +214,7 @@ export default class ModulePassage extends Component {
             @onImageAlternativeTextOpen={{this.onImageAlternativeTextOpen}}
             @onVideoTranscriptionOpen={{this.onVideoTranscriptionOpen}}
             @onElementAnswer={{this.onElementAnswer}}
+            @onSelfAssessment={{this.onSelfAssessment}}
             @onStepperNextStep={{this.onStepperNextStep}}
             @canMoveToNextGrain={{this.grainCanMoveToNextGrain index}}
             @onGrainContinue={{this.onGrainContinue}}
diff --git a/mon-pix/tests/integration/components/module/flashcards_test.gjs b/mon-pix/tests/integration/components/module/flashcards_test.gjs
@@ -3,6 +3,7 @@ import { t } from 'ember-intl/test-support';
 import ModulixFlashcards from 'mon-pix/components/module/element/flashcards/flashcards';
 // eslint-disable-next-line no-restricted-imports
 import { module, test } from 'qunit';
+import sinon from 'sinon';
 
 import setupIntlRenderingTest from '../../../helpers/setup-intl-rendering';
 
@@ -173,8 +174,8 @@ module('Integration | Component | Module | Flashcards', function (hooks) {
       assert.ok(screen.getByText(t('pages.modulix.buttons.flashcards.answers.notAtAll')));
     });
 
-    module('then user gives an answer', function () {
-      test('should display the next card', async function (assert) {
+    module('when the user self-assesses their response', function () {
+      test('should display the next card and send self-assessment', async function (assert) {
         // given
         const firstCard = {
           id: 'e1de6394-ff88-4de3-8834-a40057a50ff4',
@@ -214,15 +215,22 @@ module('Integration | Component | Module | Flashcards', function (hooks) {
           cards: [firstCard, secondCard],
         };
 
+        const onSelfAssessmentStub = sinon.stub();
+
         // when
-        const screen = await render(<template><ModulixFlashcards @flashcards={{flashcards}} /></template>);
+        const screen = await render(
+          <template>
+            <ModulixFlashcards @flashcards={{flashcards}} @onSelfAssessment={{onSelfAssessmentStub}} />
+          </template>,
+        );
         await clickByName(t('pages.modulix.buttons.flashcards.start'));
         await clickByName(t('pages.modulix.buttons.flashcards.seeAnswer'));
         await clickByName(t('pages.modulix.buttons.flashcards.answers.notAtAll'));
 
         // then
         assert.ok(screen.getByText('Qui a écrit le Dormeur du Val ?'));
         assert.ok(screen.getByText(t('pages.modulix.flashcards.position', { currentCardPosition: 2, totalCards: 2 })));
+        assert.true(onSelfAssessmentStub.calledOnce);
       });
     });
   });
diff --git a/mon-pix/tests/integration/components/module/passage_test.gjs b/mon-pix/tests/integration/components/module/passage_test.gjs
@@ -49,7 +49,7 @@ module('Integration | Component | Module | Passage', function (hooks) {
     assert.dom(screen.queryByRole('button', { name: 'Continuer' })).doesNotExist();
   });
 
-  module('When a grain contains non existing elements', function () {
+  module('when a grain contains non existing elements', function () {
     test('should not display the grain if it contains only non existing elements', async function (assert) {
       // given
       const store = this.owner.lookup('service:store');
@@ -160,7 +160,7 @@ module('Integration | Component | Module | Passage', function (hooks) {
     assert.dom(screen.queryByRole('button', { name: 'Continuer' })).exists({ count: 1 });
   });
 
-  module('when user click on skip button', function () {
+  module('when user clicks on skip button', function () {
     test('should display next grain', async function (assert) {
       // given
       const store = this.owner.lookup('service:store');
@@ -223,7 +223,7 @@ module('Integration | Component | Module | Passage', function (hooks) {
     });
   });
 
-  module('when user click on continue button', function (hooks) {
+  module('when user clicks on continue button', function (hooks) {
     let continueButtonName;
     hooks.beforeEach(function () {
       continueButtonName = t('pages.modulix.buttons.grain.continue');
@@ -321,7 +321,7 @@ module('Integration | Component | Module | Passage', function (hooks) {
     });
   });
 
-  module('when user click on an answerable element verify button', function () {
+  module('when user clicks on an answerable element verify button', function () {
     test('should save the element answer', async function (assert) {
       // given
       const metrics = this.owner.lookup('service:metrics');
@@ -401,7 +401,7 @@ module('Integration | Component | Module | Passage', function (hooks) {
     });
   });
 
-  module('when user click on an answerable element retry button', function () {
+  module('when user clicks on an answerable element retry button', function () {
     test('should push metrics event', async function (assert) {
       // given
       const metrics = this.owner.lookup('service:metrics');
@@ -432,6 +432,78 @@ module('Integration | Component | Module | Passage', function (hooks) {
     });
   });
 
+  module('when user clicks on a flashcards element self-assessment button', function () {
+    test('should push metrics event', async function (assert) {
+      // given
+      const metrics = this.owner.lookup('service:metrics');
+      metrics.add = sinon.stub();
+
+      const store = this.owner.lookup('service:store');
+      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 flashcardsElement = {
+        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 grain1 = store.createRecord('grain', { components: [{ type: 'element', element: flashcardsElement }] });
+
+      const module = store.createRecord('module', { id: 'module-id', title: 'Module title', grains: [grain1] });
+      const passage = store.createRecord('passage');
+
+      const createRecordMock = sinon.mock();
+      createRecordMock.returns({ save: function () {} });
+      store.createRecord = createRecordMock;
+
+      await render(<template><ModulePassage @module={{module}} @passage={{passage}} /></template>);
+
+      // when
+      await clickByName(t('pages.modulix.buttons.flashcards.start'));
+      await clickByName(t('pages.modulix.buttons.flashcards.seeAnswer'));
+      await clickByName(t('pages.modulix.buttons.flashcards.answers.notAtAll'));
+
+      // then
+      sinon.assert.calledOnceWithExactly(metrics.add, {
+        event: 'custom-event',
+        'pix-event-category': 'Modulix',
+        'pix-event-action': `Passage du module : ${module.id}`,
+        'pix-event-name': `Click sur le bouton 'no' de la flashcard : ${firstCard.id}`,
+      });
+      assert.ok(true);
+    });
+  });
+
   module('when user opens an image alternative text modal', function () {
     test('should push metrics event', async function (assert) {
       // given
@@ -504,7 +576,7 @@ module('Integration | Component | Module | Passage', function (hooks) {
     });
   });
 
-  module('when user opens an video transcription modal', function () {
+  module('when user opens a video transcription modal', function () {
     test('should push metrics event', async function (assert) {
       // given
       const metrics = this.owner.lookup('service:metrics');
@@ -578,7 +650,7 @@ module('Integration | Component | Module | Passage', function (hooks) {
     });
   });
 
-  module('when user click on next step button', function () {
+  module('when user clicks on next step button', function () {
     test('should push event', async function (assert) {
       // given
       const store = this.owner.lookup('service:store');
@@ -903,7 +975,7 @@ module('Integration | Component | Module | Passage', function (hooks) {
     });
   });
 
-  module('When click on terminate button', function () {
+  module('when user clicks on terminate button', function () {
     test('should push an event', async function (assert) {
       // given
       class PassageAdapterStub extends ApplicationAdapter {
