feat(mon-pix): add metrics event for Module's navbar

when open sidebar

mon-pix/app/components/module/navbar.gjs

@@ -26,6 +26,7 @@ export default class ModulixNavbar extends Component {
   @action
   openSidebar() {
     this.sidebarOpened = true;
+    this.args.onSidebarOpen();
   }
 
   @action

mon-pix/app/components/module/passage.gjs

@@ -196,6 +196,16 @@ export default class ModulePassage extends Component {
     });
   }
 
+  @action
+  async onSidebarOpen() {
+    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 Étape ${this.currentPassageStep} sur ${this.displayableGrains.length} de la barre de navigation`,
+    });
+  }
+
   @action
   async goToGrain(grainId) {
     const element = document.getElementById(`grain_${grainId}`);
@@ -217,6 +227,7 @@ export default class ModulePassage extends Component {
       @module={{@module}}
       @grainsToDisplay={{this.grainsToDisplay}}
       @goToGrain={{this.goToGrain}}
+      @onSidebarOpen={{this.onSidebarOpen}}
     />
 
     <main class="module-passage">

mon-pix/tests/integration/components/module/navbar_test.gjs

@@ -91,11 +91,18 @@ module('Integration | Component | Module | Navbar', function (hooks) {
     test('should display sidebar', async function (assert) {
       // given
       const module = createModule(this.owner);
+      const openSidebarStub = sinon.stub();
 
       //  when
       const screen = await render(
         <template>
-          <ModulixNavbar @currentStep={{1}} @totalSteps={{3}} @module={{module}} @grainsToDisplay={{module.grains}} />
+          <ModulixNavbar
+            @currentStep={{1}}
+            @totalSteps={{3}}
+            @module={{module}}
+            @grainsToDisplay={{module.grains}}
+            @onSidebarOpen={{openSidebarStub}}
+          />
         </template>,
       );
       const sidebarOpenButton = screen.getByRole('button', { name: 'Afficher les étapes du module' });
@@ -111,6 +118,7 @@ module('Integration | Component | Module | Navbar', function (hooks) {
       // given
       const module = createModule(this.owner);
       const threeFirstGrains = module.grains.slice(0, -1);
+      const openSidebarStub = sinon.stub();
 
       //  when
       const screen = await render(
@@ -120,6 +128,7 @@ module('Integration | Component | Module | Navbar', function (hooks) {
             @totalSteps={{4}}
             @module={{module}}
             @grainsToDisplay={{threeFirstGrains}}
+            @onSidebarOpen={{openSidebarStub}}
           />
         </template>,
       );
@@ -150,6 +159,7 @@ module('Integration | Component | Module | Navbar', function (hooks) {
         const module = createModule(this.owner);
         const threeFirstGrains = module.grains.slice(0, -1);
         const goToGrainSpy = sinon.spy();
+        const openSidebarStub = sinon.stub();
 
         //  when
         await render(
@@ -160,6 +170,7 @@ module('Integration | Component | Module | Navbar', function (hooks) {
               @module={{module}}
               @grainsToDisplay={{threeFirstGrains}}
               @goToGrain={{goToGrainSpy}}
+              @onSidebarOpen={{openSidebarStub}}
             />
           </template>,
         );
@@ -178,6 +189,7 @@ module('Integration | Component | Module | Navbar', function (hooks) {
         const module = createModule(this.owner);
         const threeFirstGrains = module.grains.slice(0, -1);
         const goToGrainMock = sinon.mock();
+        const openSidebarStub = sinon.stub();
 
         //  when
         const screen = await render(
@@ -188,6 +200,7 @@ module('Integration | Component | Module | Navbar', function (hooks) {
               @module={{module}}
               @grainsToDisplay={{threeFirstGrains}}
               @goToGrain={{goToGrainMock}}
+              @onSidebarOpen={{openSidebarStub}}
             />
           </template>,
         );

mon-pix/tests/integration/components/module/passage_test.gjs

@@ -1050,6 +1050,47 @@ module('Integration | Component | Module | Passage', function (hooks) {
     });
   });
 
+  module('when user opens the sidebar', function () {
+    test('should push metrics event', async function (assert) {
+      // given
+      const store = this.owner.lookup('service:store');
+      const element = { type: 'text', isAnswerable: false, content: 'Ceci est un grain dans un test d‘intégration' };
+      const grain1 = store.createRecord('grain', {
+        title: 'Grain title',
+        type: 'discovery',
+        id: '123-abc',
+        components: [{ type: 'element', element }],
+      });
+      const grain2 = store.createRecord('grain', {
+        title: 'Grain title',
+        type: 'activity',
+        id: '234-abc',
+        components: [{ type: 'element', element }],
+      });
+      const module = store.createRecord('module', {
+        title: 'Didacticiel',
+        grains: [grain1, grain2],
+        transitionTexts: [],
+      });
+      const passage = store.createRecord('passage');
+      const metrics = this.owner.lookup('service:metrics');
+      metrics.add = sinon.stub();
+
+      //  when
+      await render(<template><ModulePassage @module={{module}} @passage={{passage}} /></template>);
+      await clickByName('Afficher les étapes du module');
+
+      // 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 le bouton Étape 1 sur 2 de la barre de navigation`,
+      });
+      assert.ok(true);
+    });
+  });
+
   module('when user clicks on grain’s type in sidebar', function () {
     test('should focus and scroll on matching grain element', async function (assert) {
       // given