From 89fa4cbe6df54d297e0ca3e534967e7ccaefbb70 Mon Sep 17 00:00:00 2001
From: Eric Lim <eric.lim@zenika.com>
Date: Thu, 19 Dec 2024 16:56:22 +0100
Subject: [PATCH] feat(mon-pix): add expand element mapping

Co-authored-by: Diane Cordier <diane.cordier@pix.fr>
---
 mon-pix/app/components/module/element.gjs     |  3 +++
 mon-pix/app/components/module/grain.gjs       |  1 +
 .../components/module/element_test.gjs        | 18 +++++++++++++
 .../components/module/grain_test.gjs          | 26 +++++++++++++++++++
 4 files changed, 48 insertions(+)

diff --git a/mon-pix/app/components/module/element.gjs b/mon-pix/app/components/module/element.gjs
index d61ccf4c826..5251e4cbc37 100644
--- 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
index 95a595b7ba1..b5fd83148a8 100644
--- 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
index 18849ead867..b367ee0deff 100644
--- 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
+    assert.dom(screen.getByRole('group')).exists();
+    assert.dom(screen.getByText(title)).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
index 49499900c2d..b007618d136 100644
--- 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
+        assert.dom(screen.getByRole('group')).exists();
+        assert.dom(screen.getByText(title)).exists();
+      });
+    });
+
     module('when all elements are answered', function () {
       test('should not display skip button', async function (assert) {
         // given