[FEATURE] Afficher un élement Expand (PIX-15773)

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")}}

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>

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',

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 = {

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();
+  });
+});

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