Skip to content

Commit bcb77fa

Browse files
yannbertrandnlepage
yannbertrand
and
nlepage
committed
feat(api): allow custom elements in modules
Co-authored-by: Nicolas Lepage <nicolas.lepage@pix.fr>
1 parent da79cb1 commit bcb77fa

File tree

6 files changed

+327
-0
lines changed

6 files changed

+327
-0
lines changed

‎api/src/devcomp/domain/models/element/CustomElement.js

+20
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
import { assertNotNullOrUndefined } from '../../../../shared/domain/models/asserts.js';
2+
import { Element } from './Element.js';
3+
4+
class CustomElement extends Element {
5+
/**
6+
* @param{object} params
7+
* @param{string} params.id
8+
* @param{string} params.tagName
9+
* @param{string} params.props
10+
*/
11+
constructor({ id, tagName, props }) {
12+
super({ id, type: 'custom' });
13+
assertNotNullOrUndefined(tagName, 'The tagName is required for a CustomElement element');
14+
assertNotNullOrUndefined(props, 'The props are required for a CustomElement element');
15+
this.tagName = tagName;
16+
this.props = props;
17+
}
18+
}
19+
20+
export { CustomElement };

‎api/src/devcomp/infrastructure/datasources/learning-content/modules/bac-a-sable.json

+181
Original file line numberDiff line numberDiff line change
@@ -38,6 +38,187 @@
3838
}
3939
],
4040
"grains": [
41+
{
42+
"id": "a39ce6eb-f3db-447f-808f-aa6a06b940c9",
43+
"type": "lesson",
44+
"title": "test iframe",
45+
"components": [
46+
{
47+
"type": "element",
48+
"element": {
49+
"id": "52af6cab-07df-4962-abc5-20cf95d5eb5a",
50+
"type": "text",
51+
"content": "<p>Voici une iframe :</p>"
52+
}
53+
},
54+
{
55+
"type": "element",
56+
"element": {
57+
"id": "f00133f5-0653-425b-a25f-3c9604820529",
58+
"type": "text",
59+
"content": "<iframe title=\"dnd\" src=\"https://1024pix.github.io/atelier-contenus/RPE/cartes2.html\" height=\"420\"></iframe>"
60+
}
61+
},
62+
{
63+
"type": "element",
64+
"element": {
65+
"id": "e32c01a8-7ae1-4c6d-9a16-6487c7c504d2",
66+
"type": "text",
67+
"content": "<p>Elles ne sont autorisées qu'en béta.</p>"
68+
}
69+
}
70+
]
71+
},
72+
{
73+
"id": "0d4ef09a-ebb8-4514-a037-8fb22e540d7d",
74+
"type": "lesson",
75+
"title": "test web component",
76+
"components": [
77+
{
78+
"type": "element",
79+
"element": {
80+
"id": "96e2457d-54d3-461a-97e4-69180a30bfb7",
81+
"type": "text",
82+
"content": "<p>Voici un web component, développé à la va-vite pour la démo :</p>"
83+
}
84+
},
85+
{
86+
"type": "element",
87+
"element": {
88+
"id": "cfec5a0e-2ed5-462f-8974-e5ca25faae39",
89+
"type": "custom",
90+
"tagName": "cartes-a-retourner",
91+
"props": {
92+
"cardsPerLine": 4,
93+
"cards": [
94+
{
95+
"frontImageUrl": "https://i.imgur.com/ynIpt6T.png",
96+
"backImageUrl": "https://i.imgur.com/prjj6bH.png"
97+
},
98+
{
99+
"frontImageUrl": "https://i.imgur.com/Gcy9yUl.png",
100+
"backImageUrl": "https://i.imgur.com/HVZcy58.png"
101+
},
102+
{
103+
"frontImageUrl": "https://i.imgur.com/k2istl3.png",
104+
"backImageUrl": "https://i.imgur.com/ww44Phm.png"
105+
},
106+
{
107+
"frontImageUrl": "https://i.imgur.com/6MLS2tU.png",
108+
"backImageUrl": "https://i.imgur.com/chQSy0B.png"
109+
}
110+
]
111+
}
112+
}
113+
},
114+
{
115+
"type": "element",
116+
"element": {
117+
"id": "5e77afeb-78a8-4733-a451-fbe5fa2f360c",
118+
"type": "text",
119+
"content": "<p>Comme vous pouvez le voir l'expérience utilisateur n'est pas du tout la même.</p><p><em>Notamment pour les utilisateurs de lecteur d'écran</em></p>"
120+
}
121+
},
122+
{
123+
"type": "element",
124+
"element": {
125+
"id": "298518dc-9ad0-4709-92c0-c0a1fb1a1a2a",
126+
"type": "text",
127+
"content": "<p>Un avantage est que la configuration peut être précisée directement dans le contenu du module et pas côté pix-epreuves</p>"
128+
}
129+
}
130+
]
131+
},
132+
{
133+
"id": "0d4ef09a-ebb8-4514-a037-8fb22e540d7c",
134+
"type": "discovery",
135+
"title": "Voici un grain qui contient un webcomponent",
136+
"components": [
137+
{
138+
"type": "element",
139+
"element": {
140+
"id": "5415e701-d81a-4f5e-b0e4-a0db67d83e18",
141+
"type": "text",
142+
"content": "<p>Voici un autre exemple de web component, le QCU Image :</p>"
143+
}
144+
},
145+
{
146+
"type": "element",
147+
"element": {
148+
"id": "cfec5a0e-2ed5-462f-8974-e5ca25faae38",
149+
"type": "custom",
150+
"tagName": "qcu-image",
151+
"props": {
152+
"name": "Liste d'applications",
153+
"maxChoicesPerLine": 3,
154+
"imageChoicesSize": "icon",
155+
"choices": [
156+
{
157+
"name": "Google",
158+
"image": {
159+
"width": 534,
160+
"height": 544,
161+
"loading": "lazy",
162+
"decoding": "async",
163+
"src": "https://epreuves.pix.fr/_astro/Google.B1bcY5Go_1BynY8.svg"
164+
}
165+
},
166+
{
167+
"name": "LibreOffice Writer",
168+
"image": {
169+
"width": 205,
170+
"height": 246,
171+
"loading": "lazy",
172+
"decoding": "async",
173+
"src": "https://epreuves.pix.fr/_astro/writer.3bR8N2DK_Z1iWuJ9.webp"
174+
}
175+
},
176+
{
177+
"name": "Explorateur",
178+
"image": {
179+
"width": 128,
180+
"height": 128,
181+
"loading": "lazy",
182+
"decoding": "async",
183+
"src": "https://epreuves.pix.fr/_astro/windows-file-explorer.CnF8MYwI_23driA.webp"
184+
}
185+
},
186+
{
187+
"name": "Geogebra",
188+
"image": {
189+
"width": 640,
190+
"height": 640,
191+
"loading": "lazy",
192+
"decoding": "async",
193+
"src": "https://epreuves.pix.fr/_astro/geogebra.CZH9VYqc_19v4nj.webp"
194+
}
195+
}
196+
]
197+
}
198+
}
199+
},
200+
{
201+
"type": "element",
202+
"element": {
203+
"id": "73e4676d-fcc9-4ef2-b6de-b33e71922c04",
204+
"type": "text",
205+
"content": "<p>Pour comparer du comparable voici la même chose en version embed :</p>"
206+
}
207+
},
208+
{
209+
"type": "element",
210+
"element": {
211+
"id": "9c8a0dc3-4e8e-4cf9-ab37-3280931cbab7",
212+
"type": "embed",
213+
"isCompletionRequired": false,
214+
"title": "QCU Image",
215+
"url": "https://epreuves.pix.fr/fr/qcu_image/1d_iconewriter.html",
216+
"instruction": "<p>Instruction</p>",
217+
"height": 600
218+
}
219+
}
220+
]
221+
},
41222
{
42223
"id": "f312c33d-e7c9-4a69-9ba0-913957b8f7dd",
43224
"type": "discovery",

‎api/src/devcomp/infrastructure/factories/module-factory.js

+11
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import { BlockText } from '../../domain/models/block/BlockText.js';
77
import { ComponentElement } from '../../domain/models/component/ComponentElement.js';
88
import { ComponentStepper } from '../../domain/models/component/ComponentStepper.js';
99
import { Step } from '../../domain/models/component/Step.js';
10+
import { CustomElement } from '../../domain/models/element/CustomElement.js';
1011
import { Download } from '../../domain/models/element/Download.js';
1112
import { Embed } from '../../domain/models/element/Embed.js';
1213
import { Expand } from '../../domain/models/element/Expand.js';
@@ -89,6 +90,8 @@ export class ModuleFactory {
8990

9091
static #buildElement(element) {
9192
switch (element.type) {
93+
case 'custom':
94+
return ModuleFactory.#buildCustom(element);
9295
case 'download':
9396
return ModuleFactory.#buildDownload(element);
9497
case 'embed':
@@ -120,6 +123,14 @@ export class ModuleFactory {
120123
}
121124
}
122125

126+
static #buildCustom(element) {
127+
return new CustomElement({
128+
id: element.id,
129+
tagName: element.tagName,
130+
props: element.props,
131+
});
132+
}
133+
123134
static #buildDownload(element) {
124135
return new Download({
125136
id: element.id,

‎api/tests/devcomp/unit/domain/models/element/CustomElement_test.js

+100
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,100 @@
1+
import { CustomElement } from '../../../../../../src/devcomp/domain/models/element/CustomElement.js';
2+
import { DomainError } from '../../../../../../src/shared/domain/errors.js';
3+
import { catchErrSync, expect } from '../../../../../test-helper.js';
4+
5+
describe('Unit | Devcomp | Domain | Models | Element | CustomElement', function () {
6+
describe('#constructor', function () {
7+
it('should create a valid CustomElement object', function () {
8+
// given
9+
const attributes = {
10+
id: '5ce0ddf1-8620-43b5-9e43-cd9b2ffaca17',
11+
tagName: 'qcu-image',
12+
props: {
13+
name: "Liste d'applications",
14+
maxChoicesPerLine: 3,
15+
imageChoicesSize: 'icon',
16+
choices: [
17+
{
18+
name: 'Google',
19+
image: {
20+
width: 534,
21+
height: 544,
22+
loading: 'lazy',
23+
decoding: 'async',
24+
src: 'https://epreuves.pix.fr/_astro/Google.B1bcY5Go_1BynY8.svg',
25+
},
26+
},
27+
{
28+
name: 'LibreOffice Writer',
29+
image: {
30+
width: 205,
31+
height: 246,
32+
loading: 'lazy',
33+
decoding: 'async',
34+
src: 'https://epreuves.pix.fr/_astro/writer.3bR8N2DK_Z1iWuJ9.webp',
35+
},
36+
},
37+
{
38+
name: 'Explorateur',
39+
image: {
40+
width: 128,
41+
height: 128,
42+
loading: 'lazy',
43+
decoding: 'async',
44+
src: 'https://epreuves.pix.fr/_astro/windows-file-explorer.CnF8MYwI_23driA.webp',
45+
},
46+
},
47+
{
48+
name: 'Geogebra',
49+
image: {
50+
width: 640,
51+
height: 640,
52+
loading: 'lazy',
53+
decoding: 'async',
54+
src: 'https://epreuves.pix.fr/_astro/geogebra.CZH9VYqc_19v4nj.webp',
55+
},
56+
},
57+
],
58+
},
59+
};
60+
61+
// when
62+
const result = new CustomElement(attributes);
63+
64+
// then
65+
expect(result.id).to.equal(attributes.id);
66+
expect(result.tagName).to.equal(attributes.tagName);
67+
expect(result.props).to.deep.equal(attributes.props);
68+
expect(result.type).to.equal('custom');
69+
});
70+
});
71+
72+
describe('A CustomElement without a tagName', function () {
73+
it('should throw an error', function () {
74+
const attributes = {
75+
id: '5ce0ddf1-8620-43b5-9e43-cd9b2ffaca17',
76+
};
77+
// when
78+
const error = catchErrSync(() => new CustomElement(attributes))();
79+
80+
// then
81+
expect(error).to.be.instanceOf(DomainError);
82+
expect(error.message).to.equal('The tagName is required for a CustomElement element');
83+
});
84+
});
85+
86+
describe('A CustomElement without props', function () {
87+
it('should throw an error', function () {
88+
const attributes = {
89+
id: '5ce0ddf1-8620-43b5-9e43-cd9b2ffaca17',
90+
tagName: 'qcu-image',
91+
};
92+
// when
93+
const error = catchErrSync(() => new CustomElement(attributes))();
94+
95+
// then
96+
expect(error).to.be.instanceOf(DomainError);
97+
expect(error.message).to.equal('The props are required for a CustomElement element');
98+
});
99+
});
100+
});

‎api/tests/devcomp/unit/infrastructure/datasources/learning-content/validation/element/custom-element-schema.js

+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
import Joi from 'joi';
2+
3+
import { uuidSchema } from '../utils.js';
4+
5+
const customElementSchema = Joi.object({
6+
id: uuidSchema,
7+
type: Joi.string().valid('custom').required(),
8+
tagName: Joi.string().required(),
9+
props: Joi.object().required(),
10+
}).required();
11+
12+
export { customElementSchema };

‎api/tests/devcomp/unit/infrastructure/datasources/learning-content/validation/module-schema.js

+3
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import Joi from 'joi';
22

3+
import { customElementSchema } from './element/custom-element-schema.js';
34
import { downloadElementSchema } from './element/download-schema.js';
45
import { embedElementSchema } from './element/embed-schema.js';
56
import { expandElementSchema } from './element/expand-schema.js';
@@ -29,6 +30,7 @@ const moduleDetailsSchema = Joi.object({
2930

3031
const elementSchema = Joi.alternatives().conditional('.type', {
3132
switch: [
33+
{ is: 'custom', then: customElementSchema },
3234
{ is: 'download', then: downloadElementSchema },
3335
{ is: 'embed', then: embedElementSchema },
3436
{ is: 'expand', then: expandElementSchema },
@@ -45,6 +47,7 @@ const elementSchema = Joi.alternatives().conditional('.type', {
4547

4648
const stepperElementSchema = Joi.alternatives().conditional('.type', {
4749
switch: [
50+
{ is: 'custom', then: customElementSchema },
4851
{ is: 'download', then: downloadElementSchema },
4952
{ is: 'expand', then: expandElementSchema },
5053
{ is: 'image', then: imageElementSchema },

0 commit comments

Comments
 (0)