Skip to content

Commit 275955b

Browse files
yannbertrandnlepage
yannbertrand
and
nlepage
committed
feat(mon-pix): display custom elements
Co-authored-by: Nicolas Lepage <nicolas.lepage@pix.fr>
1 parent bcb77fa commit 275955b

File tree

9 files changed

+182
-1
lines changed

9 files changed

+182
-1
lines changed

‎high-level-tests/e2e/cypress/integration/pix-app/modulix-a11y.feature

+3
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,9 @@ Fonctionnalité: Accessibilité de Modulix
2121
Quand je vais au grain suivant
2222
Quand je vais au grain suivant
2323
Quand je vais au grain suivant
24+
Quand je vais au grain suivant
25+
Quand je vais au grain suivant
26+
Quand je vais au grain suivant
2427
Alors la page devrait être accessible
2528
Quand je clique sur "Terminer"
2629
Et que j'attends 500 ms

‎mon-pix/app/app.js

+1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import './deprecation-workflow';
2+
import '@1024pix/epreuves-components';
23

34
import Application from '@ember/application';
45
import { init as initSentry } from '@sentry/ember';

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

+3
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
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';
@@ -30,6 +31,8 @@ export default class ModulixElement extends Component {
3031
<DownloadElement @download={{@element}} @onDownload={{@onFileDownload}} />
3132
{{else if (eq @element.type "embed")}}
3233
<EmbedElement @embed={{@element}} @onAnswer={{@onElementAnswer}} />
34+
{{else if (eq @element.type "custom")}}
35+
<CustomElement @component={{@element}} @onAnswer={{@onElementAnswer}} />
3336
{{else if (eq @element.type "expand")}}
3437
<ExpandElement @expand={{@element}} @onExpandToggle={{@onExpandToggle}} />
3538
{{else if (eq @element.type "separator")}}

‎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/grain/grain.gjs

+1
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@ 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',

‎mon-pix/package-lock.json

+26
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎mon-pix/package.json

+2
Original file line numberDiff line numberDiff line change
@@ -46,6 +46,7 @@
4646
"@1024pix/ember-api-actions": "^1.1.0",
4747
"@1024pix/ember-matomo-tag-manager": "^2.4.3",
4848
"@1024pix/ember-testing-library": "^3.0.6",
49+
"@1024pix/epreuves-components": "^0.1.0",
4950
"@1024pix/eslint-plugin": "^2.1.1",
5051
"@1024pix/pix-ui": "^55.6.1",
5152
"@1024pix/stylelint-config": "^5.1.28",
@@ -84,6 +85,7 @@
8485
"ember-cookies": "^1.0.0",
8586
"ember-data": "^5.3.8",
8687
"ember-dayjs": "^0.12.0",
88+
"ember-element-helper": "^0.8.6",
8789
"ember-eslint-parser": "^0.5.0",
8890
"ember-exam": "^9.0.0",
8991
"ember-fetch": "^8.1.2",

‎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)