feat(mon-pix): add expand element mapping

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

Hide file tree

Showing 4 changed files with 48 additions and 0 deletions.
diff --git a/mon-pix/app/components/module/element.gjs b/mon-pix/app/components/module/element.gjs
@@ -3,6 +3,7 @@ import Component from '@glimmer/component';
 import { eq } from 'ember-truth-helpers';
 import DownloadElement from 'mon-pix/components/module/element/download';
 import EmbedElement from 'mon-pix/components/module/element/embed';
+import ExpandElement from 'mon-pix/components/module/element/expand';
 import FlashcardsElement from 'mon-pix/components/module/element/flashcards/flashcards';
 import ImageElement from 'mon-pix/components/module/element/image';
 import QcmElement from 'mon-pix/components/module/element/qcm';
@@ -29,6 +30,8 @@ export default class ModulixElement extends Component {
       <DownloadElement @download={{@element}} @onDownload={{@onFileDownload}} />
     {{else if (eq @element.type "embed")}}
       <EmbedElement @embed={{@element}} @onAnswer={{@onElementAnswer}} />
+    {{else if (eq @element.type "expand")}}
+      <ExpandElement @expand={{@element}} />
     {{else if (eq @element.type "separator")}}
       <SeparatorElement />
     {{else if (eq @element.type "flashcards")}}

diff --git a/mon-pix/app/components/module/grain.gjs b/mon-pix/app/components/module/grain.gjs
@@ -19,6 +19,7 @@ export default class ModuleGrain extends Component {
   static AVAILABLE_ELEMENT_TYPES = [
     'download',
     'embed',
+    'expand',
     'flashcards',
     'image',
     'qcu',

diff --git a/mon-pix/tests/integration/components/module/element_test.gjs b/mon-pix/tests/integration/components/module/element_test.gjs
@@ -45,6 +45,24 @@ module('Integration | Component | Module | Element', function (hooks) {
     assert.dom(screen.getByRole('button', { name: "Afficher l'alternative textuelle" })).exists();
   });
 
+  test('should display an element with an expand element', async function (assert) {
+    // given
+    const title = 'Expand title';
+    const element = {
+      id: '8d7687c8-4a02-4d7e-bf6c-693a6d481c78',
+      type: 'expand',
+      title,
+      content: '<p>My content</p>',
+    };
+
+    // when
+    const screen = await render(<template><ModulixElement @element={{element}} /></template>);
+
+    // then
+    const detailsElement = screen.getByRole('group');
+    assert.dom(detailsElement).exists();
+  });
+
   test('should display an element with a video element', async function (assert) {
     // given
     const element = {

diff --git a/mon-pix/tests/integration/components/module/grain_test.gjs b/mon-pix/tests/integration/components/module/grain_test.gjs
@@ -349,6 +349,32 @@ module('Integration | Component | Module | Grain', function (hooks) {
       });
     });
 
+    module('when element is an expand', function () {
+      test('should display an "Expand" element', async function (assert) {
+        // given
+        const store = this.owner.lookup('service:store');
+        const title = 'An Expand title';
+        const expandElement = {
+          title,
+          content: '<p>My Content</p>',
+          type: 'expand',
+        };
+        const grain = store.createRecord('grain', {
+          title: 'Grain title',
+          components: [{ type: 'element', element: expandElement }],
+        });
+        this.set('grain', grain);
+
+        // when
+        const screen = await render(hbs`
+          <Module::Grain @grain={{this.grain}} />`);
+
+        // then
+        const details = screen.getByRole('group');
+        assert.dom(details).exists();
+      });
+    });
+
     module('when all elements are answered', function () {
       test('should not display skip button', async function (assert) {
         // given