Skip to content

Commit dfc9d45

Browse files
yannbertrandyannbertrand
committed
feat(mon-pix): allow custom elements
1 parent 4025134 commit dfc9d45

File tree

7 files changed

+148
-55
lines changed

7 files changed

+148
-55
lines changed

‎mon-pix/app/components/module/component/element.gjs

+1-3
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
import { action } from '@ember/object';
22
import Component from '@glimmer/component';
33
import { eq } from 'ember-truth-helpers';
4+
import CustomElement from 'mon-pix/components/module/element/custom-element';
45
import DownloadElement from 'mon-pix/components/module/element/download';
56
import EmbedElement from 'mon-pix/components/module/element/embed';
67
import ExpandElement from 'mon-pix/components/module/element/expand';
78
import FlashcardsElement from 'mon-pix/components/module/element/flashcards/flashcards';
8-
import IframeElement from 'mon-pix/components/module/element/iframe';
99
import ImageElement from 'mon-pix/components/module/element/image';
1010
import QcmElement from 'mon-pix/components/module/element/qcm';
1111
import QcuElement from 'mon-pix/components/module/element/qcu';
@@ -31,8 +31,6 @@ export default class ModulixElement extends Component {
3131
<DownloadElement @download={{@element}} @onDownload={{@onFileDownload}} />
3232
{{else if (eq @element.type "embed")}}
3333
<EmbedElement @embed={{@element}} @onAnswer={{@onElementAnswer}} />
34-
{{else if (eq @element.type "iframe")}}
35-
<IframeElement @iframe={{@element}} />
3634
{{else if (eq @element.type "custom")}}
3735
<CustomElement @component={{@element}} @onAnswer={{@onElementAnswer}} />
3836
{{else if (eq @element.type "expand")}}

‎mon-pix/app/components/module/element/custom-element.gjs

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import { element } from 'ember-element-helper';
2+
3+
import ModuleElement from './module-element';
4+
5+
export default class ModulixCustomElement extends ModuleElement {
6+
<template>
7+
<div class="element-custom">
8+
{{#let (element @component.tagName) as |Tag|}}
9+
<Tag props={{@component.props}} />
10+
{{/let}}
11+
</div>
12+
</template>
13+
}

‎mon-pix/app/components/module/element/iframe.gjs

-26
This file was deleted.

‎mon-pix/app/components/module/element/web-component.gjs

-24
This file was deleted.

‎mon-pix/app/components/module/grain/grain.gjs

+1-1
Original file line numberDiff line numberDiff line change
@@ -17,11 +17,11 @@ export default class ModuleGrain extends Component {
1717
grain = this.args.grain;
1818

1919
static AVAILABLE_ELEMENT_TYPES = [
20+
'custom',
2021
'download',
2122
'embed',
2223
'expand',
2324
'flashcards',
24-
'iframe',
2525
'image',
2626
'qcu',
2727
'qcm',

‎mon-pix/tests/integration/components/module/element_test.gjs

+63
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,69 @@ import setupIntlRenderingTest from '../../../helpers/setup-intl-rendering';
99
module('Integration | Component | Module | Element', function (hooks) {
1010
setupIntlRenderingTest(hooks);
1111

12+
test('should display an element with an custom element', async function (assert) {
13+
// given
14+
const element = {
15+
id: '8d7687c8-4a02-4d7e-bf6c-693a6d481c78',
16+
type: 'custom',
17+
tagName: 'qcu-image',
18+
props: {
19+
name: "Liste d'applications",
20+
maxChoicesPerLine: 3,
21+
imageChoicesSize: 'icon',
22+
choices: [
23+
{
24+
name: 'Google',
25+
image: {
26+
width: 534,
27+
height: 544,
28+
loading: 'lazy',
29+
decoding: 'async',
30+
src: 'https://epreuves.pix.fr/_astro/Google.B1bcY5Go_1BynY8.svg',
31+
},
32+
},
33+
{
34+
name: 'LibreOffice Writer',
35+
image: {
36+
width: 205,
37+
height: 246,
38+
loading: 'lazy',
39+
decoding: 'async',
40+
src: 'https://epreuves.pix.fr/_astro/writer.3bR8N2DK_Z1iWuJ9.webp',
41+
},
42+
},
43+
{
44+
name: 'Explorateur',
45+
image: {
46+
width: 128,
47+
height: 128,
48+
loading: 'lazy',
49+
decoding: 'async',
50+
src: 'https://epreuves.pix.fr/_astro/windows-file-explorer.CnF8MYwI_23driA.webp',
51+
},
52+
},
53+
{
54+
name: 'Geogebra',
55+
image: {
56+
width: 640,
57+
height: 640,
58+
loading: 'lazy',
59+
decoding: 'async',
60+
src: 'https://epreuves.pix.fr/_astro/geogebra.CZH9VYqc_19v4nj.webp',
61+
},
62+
},
63+
],
64+
},
65+
};
66+
67+
// when
68+
await render(<template><ModulixElement @element={{element}} /></template>);
69+
70+
// then
71+
assert.strictEqual(findAll('.element-custom').length, 1);
72+
assert.strictEqual(findAll('qcu-image').length, 1);
73+
});
74+
1275
test('should display an element with a text element', async function (assert) {
1376
// given
1477
const element = {

‎mon-pix/tests/integration/components/module/grain_test.gjs

+70-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { clickByName, render } from '@1024pix/ember-testing-library';
22
// eslint-disable-next-line no-restricted-imports
3-
import { find } from '@ember/test-helpers';
3+
import { find, findAll } from '@ember/test-helpers';
44
import { hbs } from 'ember-cli-htmlbars';
55
import { t } from 'ember-intl/test-support';
66
import ModuleGrain from 'mon-pix/components/module/grain/grain';
@@ -169,6 +169,75 @@ module('Integration | Component | Module | Grain', function (hooks) {
169169
});
170170

171171
module('when component is an element', function () {
172+
module('when element is a custom element', function () {
173+
test('should display a "CustomElement" element', async function (assert) {
174+
// given
175+
const store = this.owner.lookup('service:store');
176+
const customElement = {
177+
type: 'custom',
178+
tagName: 'qcu-image',
179+
props: {
180+
name: "Liste d'applications",
181+
maxChoicesPerLine: 3,
182+
imageChoicesSize: 'icon',
183+
choices: [
184+
{
185+
name: 'Google',
186+
image: {
187+
width: 534,
188+
height: 544,
189+
loading: 'lazy',
190+
decoding: 'async',
191+
src: 'https://epreuves.pix.fr/_astro/Google.B1bcY5Go_1BynY8.svg',
192+
},
193+
},
194+
{
195+
name: 'LibreOffice Writer',
196+
image: {
197+
width: 205,
198+
height: 246,
199+
loading: 'lazy',
200+
decoding: 'async',
201+
src: 'https://epreuves.pix.fr/_astro/writer.3bR8N2DK_Z1iWuJ9.webp',
202+
},
203+
},
204+
{
205+
name: 'Explorateur',
206+
image: {
207+
width: 128,
208+
height: 128,
209+
loading: 'lazy',
210+
decoding: 'async',
211+
src: 'https://epreuves.pix.fr/_astro/windows-file-explorer.CnF8MYwI_23driA.webp',
212+
},
213+
},
214+
{
215+
name: 'Geogebra',
216+
image: {
217+
width: 640,
218+
height: 640,
219+
loading: 'lazy',
220+
decoding: 'async',
221+
src: 'https://epreuves.pix.fr/_astro/geogebra.CZH9VYqc_19v4nj.webp',
222+
},
223+
},
224+
],
225+
},
226+
};
227+
const grain = store.createRecord('grain', {
228+
title: 'Grain title',
229+
components: [{ type: 'element', element: customElement }],
230+
});
231+
232+
// when
233+
await render(<template><ModuleGrain @grain={{grain}} /></template>);
234+
235+
// then
236+
assert.strictEqual(findAll('.element-custom').length, 1);
237+
assert.strictEqual(findAll('qcu-image').length, 1);
238+
});
239+
});
240+
172241
module('when element is a text', function () {
173242
test('should display text element', async function (assert) {
174243
// given

0 commit comments

Comments
 (0)