From ee62fcbc54436746796aacab92292df21ddb60f1 Mon Sep 17 00:00:00 2001
From: dianeCdrPix <diane.cordier@pix.fr>
Date: Thu, 19 Dec 2024 15:22:23 +0100
Subject: [PATCH 1/2] feat(mon-pix): add module expand element

Co-authored-by: Diane Cordier <diane.cordier@pix.fr>
---
 .../app/components/module/element/expand.gjs  |  8 ++++++
 .../components/module/expand_test.gjs         | 27 +++++++++++++++++++
 2 files changed, 35 insertions(+)
 create mode 100644 mon-pix/app/components/module/element/expand.gjs
 create mode 100644 mon-pix/tests/integration/components/module/expand_test.gjs

diff --git a/mon-pix/app/components/module/element/expand.gjs b/mon-pix/app/components/module/element/expand.gjs
new file mode 100644
index 00000000000..718563e4213
--- /dev/null
+++ b/mon-pix/app/components/module/element/expand.gjs
@@ -0,0 +1,8 @@
+import { htmlUnsafe } from '../../../helpers/html-unsafe';
+
+<template>
+  <details>
+    <summary>{{@expand.title}}</summary>
+    {{htmlUnsafe @expand.content}}
+  </details>
+</template>
diff --git a/mon-pix/tests/integration/components/module/expand_test.gjs b/mon-pix/tests/integration/components/module/expand_test.gjs
new file mode 100644
index 00000000000..0b85ee92838
--- /dev/null
+++ b/mon-pix/tests/integration/components/module/expand_test.gjs
@@ -0,0 +1,27 @@
+import { render } from '@1024pix/ember-testing-library';
+import ModulixExpandElement from 'mon-pix/components/module/element/expand';
+import { module, test } from 'qunit';
+
+import setupIntlRenderingTest from '../../../helpers/setup-intl-rendering';
+
+module('Integration | Component | Module | Expand', function (hooks) {
+  setupIntlRenderingTest(hooks);
+
+  test('should display the title of an expand', async function (assert) {
+    // given
+    const content = 'My content';
+    const expandElement = {
+      title: 'Expand title',
+      content: `<p>${content}</p>`,
+    };
+
+    //  when
+    const screen = await render(<template><ModulixExpandElement @expand={{expandElement}} /></template>);
+
+    // then
+    const detailsElement = screen.getByRole('group');
+    assert.dom(detailsElement).exists();
+    assert.dom(screen.getByText(expandElement.title)).exists();
+    assert.dom(screen.getByText(content)).exists();
+  });
+});

From d64ce080fccaeeccc4541ac71f6eb1cfe2261794 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 2/2] 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..208348fd1f7 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
+    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
index 49499900c2d..742a72052fd 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
+        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