feat(mon-pix): allow to navigate using sidebar menu

in module
1024pix · Dec 2, 2024 · 506a42c · 506a42c
1 parent ace048e
commit 506a42c
Show file tree

Hide file tree

Showing 5 changed files with 94 additions and 16 deletions.
diff --git a/mon-pix/app/components/module/_navbar.scss b/mon-pix/app/components/module/_navbar.scss
@@ -37,4 +37,8 @@
     color: var(--pix-primary-700);
     background-color: var(--pix-neutral-20);
   }
+
+  &:active {
+    background-color: var(--pix-neutral-100);
+  }
 }
diff --git a/mon-pix/app/components/module/navbar.gjs b/mon-pix/app/components/module/navbar.gjs
@@ -44,10 +44,6 @@ export default class ModulixNavbar extends Component {
     return this.grainsWithIdAndTranslatedType.length - 1;
   }
 
-  isActive(index) {
-    return index + 1 === this.grainsWithIdAndTranslatedType.length;
-  }
-
   @action
   onMenuItemClick(grainId) {
     this.closeSidebar();

diff --git a/mon-pix/app/components/module/passage.gjs b/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">

diff --git a/mon-pix/tests/integration/components/module/navbar_test.gjs b/mon-pix/tests/integration/components/module/navbar_test.gjs
@@ -6,7 +6,7 @@ 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);
@@ -127,16 +127,21 @@ 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 () {
@@ -167,6 +172,33 @@ module('Integration | Component | Module | Navbar', function (hooks) {
         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();
+      });
     });
   });
 });

diff --git a/mon-pix/tests/integration/components/module/passage_test.gjs b/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);
+    });
+  });
 });