[FEATURE] Permettre de naviguer dans le module en cliquant sur les étapes de la sidebar (PIX-15397)

 #10691

Author: pix-service-auto-merge

mon-pix/app/components/module/_navbar.scss

@@ -3,7 +3,7 @@
   top: 0;
   z-index: var(--modulix-z-index-above-all);
   height: var(--module-navbar-height);
-  padding: var(--pix-spacing-4x);
+  padding: var(--pix-spacing-3x);
   background: var(--pix-neutral-0);
   box-shadow: 0 4px 20px 0 rgb(0 0 0 / 6%);
 
@@ -16,26 +16,29 @@
   }
 }
 
-.module-sidebar-list-item {
-  &__link {
-    @extend %pix-body-l;
+.module-sidebar__list-item {
+  @extend %pix-body-l;
 
-    display: inline-block;
-    width: 100%;
-    padding: var(--pix-spacing-3x) var(--pix-spacing-8x);
-    color: var(--pix-neutral-800);
+  display: inline-block;
+  width: 100%;
+  padding: var(--pix-spacing-3x) var(--pix-spacing-8x);
+  color: var(--pix-neutral-800);
+  cursor: pointer;
 
-    &.current-grain {
-      --border-width: 5px;
+  &.current-grain {
+    --border-width: 5px;
 
-      padding-left: calc(var(--pix-spacing-8x) - var(--border-width));
-      color: var(--pix-primary-500);
-      border-left: var(--border-width) solid var(--pix-primary-500);
-    }
+    padding-left: calc(var(--pix-spacing-8x) - var(--border-width));
+    color: var(--pix-primary-500);
+    border-left: var(--border-width) solid var(--pix-primary-500);
+  }
+
+  &:hover {
+    color: var(--pix-primary-700);
+    background-color: var(--pix-neutral-20);
+  }
 
-    &:hover {
-      color: var(--pix-primary-700);
-      background-color: var(--pix-neutral-20);
-    }
+  &:active {
+    background-color: var(--pix-neutral-100);
   }
 }

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

@@ -162,8 +162,17 @@ export default class ModuleGrain extends Component {
     await this.args.onModuleTerminate({ grainId: this.args.grain.id });
   }
 
+  get elementId() {
+    return `grain_${this.args.grain.id}`;
+  }
+
   <template>
-    <article class="grain {{if @hasJustAppeared 'grain--active'}}" tabindex="-1" {{didInsert this.focusAndScroll}}>
+    <article
+      id={{this.elementId}}
+      class="grain {{if @hasJustAppeared 'grain--active'}}"
+      tabindex="-1"
+      {{didInsert this.focusAndScroll}}
+    >
       <h2 class="screen-reader-only">{{@grain.title}}</h2>
 
       {{#if @transition}}

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

@@ -1,6 +1,8 @@
 import PixButton from '@1024pix/pix-ui/components/pix-button';
 import PixProgressGauge from '@1024pix/pix-ui/components/pix-progress-gauge';
 import PixSidebar from '@1024pix/pix-ui/components/pix-sidebar';
+import { fn } from '@ember/helper';
+import { on } from '@ember/modifier';
 import { action } from '@ember/object';
 import { service } from '@ember/service';
 import Component from '@glimmer/component';
@@ -31,12 +33,21 @@ export default class ModulixNavbar extends Component {
     this.sidebarOpened = false;
   }
 
-  get grainTypeTexts() {
-    return this.args.grainsToDisplay.map((grain) => this.intl.t(`pages.modulix.grain.tag.${grain.type}`));
+  get grainsWithIdAndTranslatedType() {
+    return this.args.grainsToDisplay.map((grain) => ({
+      type: this.intl.t(`pages.modulix.grain.tag.${grain.type}`),
+      id: grain.id,
+    }));
   }
 
   get currentGrainIndex() {
-    return this.grainTypeTexts.length - 1;
+    return this.grainsWithIdAndTranslatedType.length - 1;
+  }
+
+  @action
+  onMenuItemClick(grainId) {
+    this.closeSidebar();
+    this.args.goToGrain(grainId);
   }
 
   <template>
@@ -61,12 +72,14 @@ export default class ModulixNavbar extends Component {
       <:content>
         <nav>
           <ul>
-            {{#each this.grainTypeTexts as |type index|}}
+            {{#each this.grainsWithIdAndTranslatedType as |grain index|}}
               <li
-                class="module-sidebar-list-item__link {{if (eq index this.currentGrainIndex) 'current-grain'}}"
+                class="module-sidebar__list-item {{if (eq index this.currentGrainIndex) 'current-grain'}}"
                 aria-current={{if (eq index this.currentGrainIndex) "step"}}
+                {{on "click" (fn this.onMenuItemClick grain.id)}}
+                role="link"
               >
-                {{type}}
+                {{grain.type}}
               </li>
             {{/each}}
           </ul>

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

@@ -196,13 +196,20 @@ export default class ModulePassage extends Component {
     });
   }
 
+  @action
+  async goToGrain(grainId) {
+    const element = document.getElementById(`grain_${grainId}`);
+    this.modulixAutoScroll.focusAndScroll(element);
+  }
+
   <template>
     {{pageTitle @module.title}}
     <ModuleNavbar
       @currentStep={{this.currentPassageStep}}
       @totalSteps={{this.displayableGrains.length}}
       @module={{@module}}
       @grainsToDisplay={{this.grainsToDisplay}}
+      @goToGrain={{this.goToGrain}}
     />
 
     <main class="module-passage">

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

@@ -15,7 +15,7 @@ module('Integration | Component | Module | Grain', function (hooks) {
   test('should display given grain', async function (assert) {
     // given
     const store = this.owner.lookup('service:store');
-    const grain = store.createRecord('grain', { title: 'Grain title' });
+    const grain = store.createRecord('grain', { id: '12345-abcdef', title: 'Grain title' });
     this.set('grain', grain);
 
     // when
@@ -24,6 +24,7 @@ module('Integration | Component | Module | Grain', function (hooks) {
 
     // then
     assert.ok(screen.getByRole('heading', { name: grain.title, level: 2 }));
+    assert.dom('.grain').hasAttribute('id', 'grain_12345-abcdef');
   });
 
   module('when grain has transition', function () {

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

@@ -1,11 +1,12 @@
-import { clickByName, render, within } from '@1024pix/ember-testing-library';
+import { clickByName, clickByText, render } from '@1024pix/ember-testing-library';
 import { click } from '@ember/test-helpers';
 import { t } from 'ember-intl/test-support';
 import ModulixNavbar from 'mon-pix/components/module/navbar';
 import { module, test } from 'qunit';
+import sinon from 'sinon';
 
 import setupIntlRenderingTest from '../../../helpers/setup-intl-rendering';
-import { waitForDialog } from '../../../helpers/wait-for';
+import { waitForDialog, waitForDialogClose } from '../../../helpers/wait-for';
 
 module('Integration | Component | Module | Navbar', function (hooks) {
   setupIntlRenderingTest(hooks);
@@ -126,26 +127,88 @@ module('Integration | Component | Module | Navbar', function (hooks) {
       await waitForDialog();
 
       // then
-      assert.ok(screen);
-      const list = screen.getByRole('list');
-      assert.dom(list).exists();
-      const items = within(list).getAllByRole('listitem');
-      assert.strictEqual(items.length, 3);
-      assert.strictEqual(items[0].textContent.trim(), t('pages.modulix.grain.tag.discovery'));
-      assert.strictEqual(items[1].textContent.trim(), t('pages.modulix.grain.tag.activity'));
-      assert.strictEqual(items[2].textContent.trim(), t('pages.modulix.grain.tag.lesson'));
-      assert.dom(items[2]).hasAria('current', 'step');
-      assert.dom(screen.queryByRole('listitem', { name: t('pages.modulix.grain.tag.summary') })).doesNotExist();
+      assert.strictEqual(
+        screen.getByRole('link', { name: 'Découverte' }).textContent.trim(),
+        t('pages.modulix.grain.tag.discovery'),
+      );
+      assert.strictEqual(
+        screen.getByRole('link', { name: 'Activité' }).textContent.trim(),
+        t('pages.modulix.grain.tag.activity'),
+      );
+      assert.strictEqual(
+        screen.getByRole('link', { name: 'Leçon' }).textContent.trim(),
+        t('pages.modulix.grain.tag.lesson'),
+      );
+      assert.dom(screen.getByRole('link', { name: 'Leçon' })).hasAria('current', 'step');
+
+      assert.dom(screen.queryByRole('link', { name: "Récap'" })).doesNotExist();
+    });
+
+    module('when user clicks on grain’s type', function () {
+      test('should call goToGrain action on matching grain element', async function (assert) {
+        // given
+        const module = createModule(this.owner);
+        const threeFirstGrains = module.grains.slice(0, -1);
+        const goToGrainSpy = sinon.spy();
+
+        //  when
+        await render(
+          <template>
+            <ModulixNavbar
+              @currentStep={{3}}
+              @totalSteps={{4}}
+              @module={{module}}
+              @grainsToDisplay={{threeFirstGrains}}
+              @goToGrain={{goToGrainSpy}}
+            />
+          </template>,
+        );
+        await clickByName('Afficher les étapes du module');
+        await waitForDialog();
+        await clickByText('Activité');
+
+        // then
+        sinon.assert.calledOnce(goToGrainSpy);
+        sinon.assert.calledWithExactly(goToGrainSpy, '234-abc');
+        assert.ok(true);
+      });
+
+      test('should close sidebar', async function (assert) {
+        // given
+        const module = createModule(this.owner);
+        const threeFirstGrains = module.grains.slice(0, -1);
+        const goToGrainMock = sinon.mock();
+
+        //  when
+        const screen = await render(
+          <template>
+            <ModulixNavbar
+              @currentStep={{3}}
+              @totalSteps={{4}}
+              @module={{module}}
+              @grainsToDisplay={{threeFirstGrains}}
+              @goToGrain={{goToGrainMock}}
+            />
+          </template>,
+        );
+        await clickByName('Afficher les étapes du module');
+        await waitForDialog();
+        await clickByText('Activité');
+        await waitForDialogClose();
+
+        // then
+        assert.dom(screen.queryByRole('dialog', { name: module.title })).doesNotExist();
+      });
     });
   });
 });
 
 function createModule(owner) {
   const store = owner.lookup('service:store');
-  const grain1 = store.createRecord('grain', { title: 'Grain title', type: 'discovery' });
-  const grain2 = store.createRecord('grain', { title: 'Grain title', type: 'activity' });
-  const grain3 = store.createRecord('grain', { title: 'Grain title', type: 'lesson' });
-  const grain4 = store.createRecord('grain', { title: 'Grain title', type: 'summary' });
+  const grain1 = store.createRecord('grain', { title: 'Grain title', type: 'discovery', id: '123-abc' });
+  const grain2 = store.createRecord('grain', { title: 'Grain title', type: 'activity', id: '234-abc' });
+  const grain3 = store.createRecord('grain', { title: 'Grain title', type: 'lesson', id: '345-abc' });
+  const grain4 = store.createRecord('grain', { title: 'Grain title', type: 'summary', id: '456-abc' });
   return store.createRecord('module', {
     title: 'Didacticiel',
     grains: [grain1, grain2, grain3, grain4],

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

@@ -1,13 +1,14 @@
 import { clickByName, render } from '@1024pix/ember-testing-library';
 // eslint-disable-next-line no-restricted-imports
-import { find, findAll } from '@ember/test-helpers';
+import { click, find, findAll } from '@ember/test-helpers';
 import { t } from 'ember-intl/test-support';
 import ApplicationAdapter from 'mon-pix/adapters/application';
 import ModulePassage from 'mon-pix/components/module/passage';
 import { module, test } from 'qunit';
 import sinon from 'sinon';
 
 import setupIntlRenderingTest from '../../../helpers/setup-intl-rendering';
+import { waitForDialog } from '../../../helpers/wait-for';
 
 module('Integration | Component | Module | Passage', function (hooks) {
   setupIntlRenderingTest(hooks);
@@ -1048,4 +1049,42 @@ module('Integration | Component | Module | Passage', function (hooks) {
       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
+      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 modulixAutoScroll = this.owner.lookup('service:modulix-auto-scroll');
+      modulixAutoScroll.focusAndScroll = sinon.mock();
+
+      //  when
+      const screen = await render(<template><ModulePassage @module={{module}} @passage={{passage}} /></template>);
+      await clickByName('Afficher les étapes du module');
+      await waitForDialog();
+      const item = screen.getByRole('link', { name: 'Découverte' });
+      await click(item);
+
+      //  then
+      assert.ok(modulixAutoScroll.focusAndScroll.calledOnce);
+    });
+  });
 });