Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[FEATURE] Afficher un simulateur dans Modulix (PIX-13092) #9488

Merged
merged 9 commits into from
Jul 22, 2024
26 changes: 26 additions & 0 deletions mon-pix/app/components/module/element/embed.gjs
Original file line number Diff line number Diff line change
@@ -5,10 +5,24 @@ import Component from '@glimmer/component';
import { tracked } from '@glimmer/tracking';
import { t } from 'ember-intl';

import didInsert from '../../../modifiers/modifier-did-insert';
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ah curieux de savoir l'histoire de ce modifier, on a une montée de version bloquée sur le même genre de sujet.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@yannbertrand c'est expliqué dans cette PR #9455 ;)


export default class ModulixEmbed extends Component {
@tracked
isSimulatorLaunched = false;
embedHeight = this.args.embed.height;
iframe;

@action
setIframeHtmlElement(htmlElement) {
this.iframe = htmlElement;
}

@action
resetEmbed() {
this.iframe.setAttribute('src', this.args.embed.url);
this.iframe.focus();
}

get heightStyle() {
return htmlSafe(`height: ${this.embedHeight}px`);
@@ -17,6 +31,7 @@ export default class ModulixEmbed extends Component {
@action
startSimulator() {
this.isSimulatorLaunched = true;
this.iframe.focus();
}

<template>
@@ -39,7 +54,18 @@ export default class ModulixEmbed extends Component {
src={{@embed.url}}
title={{@embed.title}}
style={{this.heightStyle}}
{{didInsert this.setIframeHtmlElement}}
></iframe>
{{#if this.isSimulatorLaunched}}
<div class="element-embed__reset">
<PixButton
@iconBefore="rotate-right"
@variant="tertiary"
@triggerAction={{this.resetEmbed}}
aria-label="{{t 'pages.modulix.buttons.embed.reset.ariaLabel'}}"
>{{t "pages.modulix.buttons.embed.reset.name"}}</PixButton>
</div>
{{/if}}
</div>
</template>
}
5 changes: 5 additions & 0 deletions mon-pix/app/styles/components/module/_embed.scss
Original file line number Diff line number Diff line change
@@ -24,4 +24,9 @@
height: 100%;
background-color: rgb(0 0 0 / 55%);
}

&__reset {
display: flex;
justify-content: flex-end;
}
}
49 changes: 48 additions & 1 deletion mon-pix/tests/integration/components/module/embed_test.gjs
Original file line number Diff line number Diff line change
@@ -28,10 +28,13 @@ module('Integration | Component | Module | Embed', function (hooks) {
assert
.dom(screen.getByRole('button', { name: this.intl.t('pages.modulix.buttons.embed.start.ariaLabel') }))
.exists();
assert
.dom(screen.queryByRole('button', { name: this.intl.t('pages.modulix.buttons.embed.reset.ariaLabel') }))
.doesNotExist();
});

module('when user clicks on start button', function () {
test('should hide start button', async function (assert) {
test('should hide start button and display reset button', async function (assert) {
// given
const embed = {
id: 'id',
@@ -48,6 +51,50 @@ module('Integration | Component | Module | Embed', function (hooks) {
const startButtonName = this.intl.t('pages.modulix.buttons.embed.start.ariaLabel');
await clickByName(startButtonName);
assert.dom(screen.queryByRole('button', { name: startButtonName })).doesNotExist();
assert
.dom(screen.getByRole('button', { name: this.intl.t('pages.modulix.buttons.embed.reset.ariaLabel') }))
.exists();
});

test('should focus on the iframe', async function (assert) {
// given
const embed = {
id: 'id',
title: 'title',
isCompletionRequired: false,
url: 'https://embed-pix.com',
height: 800,
};
const screen = await render(<template><ModulixEmbed @embed={{embed}} /></template>);

// when
await clickByName(this.intl.t('pages.modulix.buttons.embed.start.ariaLabel'));

// then
const iframe = screen.getByTitle(embed.title);
assert.strictEqual(document.activeElement, iframe);
});
});

module('when user clicks on reset button', function () {
test('should focus on the iframe', async function (assert) {
// given
const embed = {
id: 'id',
title: 'title',
isCompletionRequired: false,
url: 'https://embed-pix.com',
height: 800,
};
const screen = await render(<template><ModulixEmbed @embed={{embed}} /></template>);

// when
await clickByName(this.intl.t('pages.modulix.buttons.embed.start.ariaLabel'));
await clickByName(this.intl.t('pages.modulix.buttons.embed.reset.ariaLabel'));

// then
const iframe = screen.getByTitle(embed.title);
assert.strictEqual(document.activeElement, iframe);
});
});
});
60 changes: 60 additions & 0 deletions mon-pix/tests/unit/components/module/embed_test.gjs
Original file line number Diff line number Diff line change
@@ -0,0 +1,60 @@
import { setupTest } from 'ember-qunit';
import { module, test } from 'qunit';
import sinon from 'sinon';

import createGlimmerComponent from '../../../helpers/create-glimmer-component';

module('Unit | Component | Module | Embed', function (hooks) {
setupTest(hooks);

module('#setIframeHtmlElement', function () {
test('should set the iframe html element', async function (assert) {
// given
const embed = {
id: 'id',
title: 'title',
isCompletionRequired: false,
url: 'https://embed-pix.com',
height: 800,
};
const component = createGlimmerComponent('module/element/embed', {
embed,
});
const expectedComponentIFrame = Symbol('iframeHtmlElement');

// when
component.setIframeHtmlElement(expectedComponentIFrame);

// then
assert.deepEqual(component.iframe, expectedComponentIFrame);
});
});

module('#resetEmbed', function () {
test('should update the iframe src', async function (assert) {
// given
const embed = {
id: 'id',
title: 'title',
isCompletionRequired: false,
url: 'https://embed-pix.com',
height: 800,
};
const component = createGlimmerComponent('module/element/embed', {
embed,
});
component.iframe = {
setAttribute: sinon.stub(),
focus: sinon.stub(),
};

// when
component.resetEmbed();

// then
sinon.assert.calledWith(component.iframe.setAttribute, 'src', embed.url);
sinon.assert.called(component.iframe.focus);
assert.ok(true);
});
});
});
4 changes: 4 additions & 0 deletions mon-pix/translations/en.json
Original file line number Diff line number Diff line change
@@ -1312,6 +1312,10 @@
"transcription": "Show transcription"
},
"embed": {
"reset": {
"ariaLabel": "Reset the simulator",
"name": "Reset"
},
"start": {
"ariaLabel": "Start the simulator",
"name": "Start"
4 changes: 4 additions & 0 deletions mon-pix/translations/es.json
Original file line number Diff line number Diff line change
@@ -1312,6 +1312,10 @@
"transcription": "Ver transcripción"
},
"embed": {
"reset": {
"ariaLabel": "Reiniciar el simulador",
"name": "Reiniciar"
},
"start": {
"ariaLabel": "Iniciar el simulador",
"name": "Comenzar"
4 changes: 4 additions & 0 deletions mon-pix/translations/fr.json
Original file line number Diff line number Diff line change
@@ -1312,6 +1312,10 @@
"transcription": "Afficher la transcription"
},
"embed": {
"reset": {
"ariaLabel": "Réinitialiser le simulateur",
"name": "Réinitialiser"
},
"start": {
"ariaLabel": "Commencer le simulateur",
"name": "Commencer"
4 changes: 4 additions & 0 deletions mon-pix/translations/nl.json
Original file line number Diff line number Diff line change
@@ -1312,6 +1312,10 @@
"transcription": "Transcriptie weergeven"
},
"embed": {
"reset": {
"ariaLabel": "Reset de simulator",
"name": "Opnieuw instellen"
},
"start": {
"ariaLabel": "Start de simulator",
"name": "Beginnen"