feat(mon-pix): add on-expand-click in stepper

Co-authored-by: Diane Cordier <[email protected]>
1024pix · Dec 23, 2024 · 4c6e4c6 · 4c6e4c6
1 parent 87e8518
commit 4c6e4c6
Show file tree

Hide file tree

Showing 4 changed files with 48 additions and 0 deletions.
diff --git a/mon-pix/app/components/module/grain.gjs b/mon-pix/app/components/module/grain.gjs
@@ -218,6 +218,7 @@ export default class ModuleGrain extends Component {
                   @onVideoTranscriptionOpen={{@onVideoTranscriptionOpen}}
                   @onVideoPlay={{@onVideoPlay}}
                   @onFileDownload={{@onFileDownload}}
+                  @onExpandToggle={{@onExpandToggle}}
                 />
               </div>
             {{/if}}

diff --git a/mon-pix/app/components/module/step.gjs b/mon-pix/app/components/module/step.gjs
@@ -47,6 +47,7 @@ export default class ModulixStep extends Component {
               @onVideoTranscriptionOpen={{@onVideoTranscriptionOpen}}
               @onVideoPlay={{@onVideoPlay}}
               @onFileDownload={{@onFileDownload}}
+              @onExpandToggle={{@onExpandToggle}}
             />
           </div>
         {{/each}}

diff --git a/mon-pix/app/components/module/stepper.gjs b/mon-pix/app/components/module/stepper.gjs
@@ -93,6 +93,7 @@ export default class ModulixStepper extends Component {
             @onVideoTranscriptionOpen={{@onVideoTranscriptionOpen}}
             @onVideoPlay={{@onVideoPlay}}
             @onFileDownload={{@onFileDownload}}
+            @onExpandToggle={{@onExpandToggle}}
           />
         {{/each}}
         {{#if this.shouldDisplayNextButton}}

diff --git a/mon-pix/tests/integration/components/module/passage_test.gjs b/mon-pix/tests/integration/components/module/passage_test.gjs
@@ -1212,5 +1212,50 @@ module('Integration | Component | Module | Passage', function (hooks) {
       });
       assert.ok(true);
     });
+
+    module('when expand is in a stepper', function () {
+      test('should push metrics event', async function (assert) {
+        // given
+        const store = this.owner.lookup('service:store');
+        const expandElement = {
+          id: 'f5e7ce21-b71d-4054-8886-a4e9a17016ff',
+          type: 'expand',
+          isAnswerable: false,
+          title: 'Mon Expand',
+          content: "<p>Ceci est le contenu d'un expand dans mon module</p>",
+        };
+
+        const step = { elements: [expandElement] };
+        const grain = store.createRecord('grain', {
+          title: 'Grain title',
+          type: 'discovery',
+          id: '123-abc',
+          components: [{ type: 'stepper', steps: [step] }],
+        });
+
+        const module = store.createRecord('module', {
+          title: 'Didacticiel',
+          grains: [grain],
+          transitionTexts: [],
+        });
+        const passage = store.createRecord('passage');
+        const metrics = this.owner.lookup('service:metrics');
+        metrics.add = sinon.stub();
+
+        //  when
+        const screen = await render(<template><ModulePassage @module={{module}} @passage={{passage}} /></template>);
+        const details = screen.getByRole('group');
+        await triggerEvent(details, 'toggle');
+
+        // then
+        sinon.assert.calledWithExactly(metrics.add, {
+          event: 'custom-event',
+          'pix-event-category': 'Modulix',
+          'pix-event-action': `Passage du module : ${module.id}`,
+          'pix-event-name': `Click sur l'Expand : ${expandElement.id}`,
+        });
+        assert.ok(true);
+      });
+    });
   });
 });