Skip to content

Commit

Permalink
feat(api): display intro cards before cards
Browse files Browse the repository at this point in the history 
in modulix Flashcards element
  • Loading branch information
@clemlatz @dianeCdrPix
clemlatz authored and dianeCdrPix committed Oct 8, 2024
1 parent 68523fb commit cd8c3a0
Show file tree
Hide file tree
Showing 5 changed files with 117 additions and 32 deletions.
67 changes: 46 additions & 21 deletions mon-pix/app/components/module/element/flashcards.gjs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,12 +5,20 @@ import { tracked } from '@glimmer/tracking';
import { t } from 'ember-intl';
import { eq } from 'ember-truth-helpers';
import ModulixFlashcardsCard from 'mon-pix/components/module/element/flashcards-card';
import ModulixFlashcardsIntroCard from 'mon-pix/components/module/element/flashcards-intro-card';

export default class ModulixFlashcards extends Component {
@tracked
/**
* Displayed side of the card on the screen
* @type {'recto'|'verso'}
* @type {"intro"|"cards"|"outro"}
*/
currentStep = 'intro';

@tracked
/**
* Displayed side of the card on the screen
* @type {"recto"|"verso"}
*/
displayedSideName = 'recto';

Expand All @@ -33,6 +41,11 @@ export default class ModulixFlashcards extends Component {
return this.args.flashcards.cards.length;
}

@action
start() {
this.currentStep = 'cards';
}

@action
flipCard() {
this.displayedSideName = this.displayedSideName === 'recto' ? 'verso' : 'recto';
Expand All @@ -46,27 +59,39 @@ export default class ModulixFlashcards extends Component {

<template>
<div class="element-flashcards">
<ModulixFlashcardsCard
@card={{this.currentCard}}
@displayedSideName={{this.displayedSideName}}
@onCardFlip={{this.flipCard}}
/>

<div class="element-flashcards__footer">
{{#if (eq this.displayedSideName "recto")}}
<p class="element-flashcards-footer__direction">{{t "pages.modulix.flashcards.direction"}}</p>
<p class="element-flashcards-footer__position">{{t
"pages.modulix.flashcards.position"
currentCardPosition=this.currentCardNumber
totalCards=this.numberOfCards
}}</p>
{{/if}}
{{#if (eq this.displayedSideName "verso")}}
<button type="button" {{on "click" this.goToNextCard}}>{{t
"pages.modulix.buttons.flashcards.nextCard"
}}</button>
{{/if}}
</div>
{{#if (eq this.currentStep "intro")}}
<ModulixFlashcardsIntroCard
@title={{@flashcards.title}}
@introImage={{@flashcards.introImage}}
@onStart={{this.start}}
/>
{{/if}}

{{#if (eq this.currentStep "cards")}}
<ModulixFlashcardsCard
@card={{this.currentCard}}
@displayedSideName={{this.displayedSideName}}
@onCardFlip={{this.flipCard}}
/>

<div class="element-flashcards__footer">
{{#if (eq this.displayedSideName "recto")}}
<p class="element-flashcards-footer__direction">{{t "pages.modulix.flashcards.direction"}}</p>
<p class="element-flashcards-footer__position">{{t
"pages.modulix.flashcards.position"
currentCardPosition=this.currentCardNumber
totalCards=this.numberOfCards
}}</p>
{{/if}}
{{#if (eq this.displayedSideName "verso")}}
<button type="button" {{on "click" this.goToNextCard}}>{{t
"pages.modulix.buttons.flashcards.nextCard"
}}</button>
{{/if}}
</div>
{{/if}}

</div>
</template>
}
2 changes: 1 addition & 1 deletion mon-pix/tests/integration/components/module/element_test.gjs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -252,6 +252,6 @@ module('Integration | Component | Module | Element', function (hooks) {
);

// then
assert.dom(screen.getByRole('button', { name: 'Voir la réponse' })).exists();
assert.dom(screen.getByRole('button', { name: 'Commencer' })).exists();
});
});
76 changes: 68 additions & 8 deletions mon-pix/tests/integration/components/module/flashcards_test.gjs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ import setupIntlRenderingTest from '../../../helpers/setup-intl-rendering';
module('Integration | Component | Module | Flashcards', function (hooks) {
setupIntlRenderingTest(hooks);

test('should display the given card', async function (assert) {
test('should display the intro card by default', async function (assert) {
// given
const firstCard = {
id: 'e1de6394-ff88-4de3-8834-a40057a50ff4',
Expand Down Expand Up @@ -45,25 +45,84 @@ module('Integration | Component | Module | Flashcards', function (hooks) {
type: 'flashcards',
title: "Introduction à l'adresse e-mail",
instruction: '<p>...</p>',
introImage: { url: 'https://images.pix.fr/modulix/placeholder-details.svg' },
introImage: { url: 'https://images.pix.fr/modulix/flashcards-intro.png' },
cards: [firstCard, secondCard],
};

// when
const screen = await render(<template><ModulixFlashcards @flashcards={{flashcards}} /></template>);

// then
assert.ok(screen.getByText("A quoi sert l'arobase dans mon adresse email ?"));
assert.ok(screen.getByText("Introduction à l'adresse e-mail"));
assert.strictEqual(
screen.getByRole('presentation').getAttribute('src'),
'https://images.pix.fr/modulix/bien-ecrire-son-adresse-mail-explication-les-parties-dune-adresse-mail.svg',
'https://images.pix.fr/modulix/flashcards-intro.png',
);
assert.dom(screen.getByRole('button', { name: t('pages.modulix.buttons.flashcards.seeAnswer') })).exists();
assert.ok(screen.getByText(t('pages.modulix.flashcards.direction')));
assert.ok(screen.getByText(t('pages.modulix.flashcards.position', { currentCardPosition: 1, totalCards: 2 })));
assert.dom(screen.getByRole('button', { name: t('pages.modulix.buttons.flashcards.start') })).exists();
assert.dom(screen.queryByText(t('pages.modulix.flashcards.direction'))).doesNotExist();
assert
.dom(screen.queryByText(t('pages.modulix.flashcards.position', { currentCardPosition: 1, totalCards: 2 })))
.doesNotExist();
});

module('when we click on Next button', function () {
module('when user clicks on the "Start" button', function () {
test('should display the first card', async function (assert) {
// given
const firstCard = {
id: 'e1de6394-ff88-4de3-8834-a40057a50ff4',
recto: {
image: {
url: 'https://images.pix.fr/modulix/bien-ecrire-son-adresse-mail-explication-les-parties-dune-adresse-mail.svg',
},
text: "A quoi sert l'arobase dans mon adresse email ?",
},
verso: {
image: { url: 'https://images.pix.fr/modulix/didacticiel/ordi-spatial.svg' },
text: "Parce que c'est joli",
},
};
const secondCard = {
id: 'e1de6394-ff88-4de3-8834-a40057a50ff4',
recto: {
image: {
url: 'https://images.pix.fr/modulix/didacticiel/icon.svg',
},
text: 'Qui a écrit le Dormeur du Val ?',
},
verso: {
image: {
url: 'https://images.pix.fr/modulix/didacticiel/chaton.jpg',
},
text: '<p>Arthur Rimbaud</p>',
},
};

const flashcards = {
id: '71de6394-ff88-4de3-8834-a40057a50ff4',
type: 'flashcards',
title: "Introduction à l'adresse e-mail",
instruction: '<p>...</p>',
introImage: { url: 'https://images.pix.fr/modulix/placeholder-details.svg' },
cards: [firstCard, secondCard],
};

// when
const screen = await render(<template><ModulixFlashcards @flashcards={{flashcards}} /></template>);
await clickByName(t('pages.modulix.buttons.flashcards.start'));

// then
assert.ok(screen.getByText("A quoi sert l'arobase dans mon adresse email ?"));
assert.strictEqual(
screen.getByRole('presentation').getAttribute('src'),
'https://images.pix.fr/modulix/bien-ecrire-son-adresse-mail-explication-les-parties-dune-adresse-mail.svg',
);
assert.dom(screen.getByRole('button', { name: t('pages.modulix.buttons.flashcards.seeAnswer') })).exists();
assert.ok(screen.getByText(t('pages.modulix.flashcards.direction')));
assert.ok(screen.getByText(t('pages.modulix.flashcards.position', { currentCardPosition: 1, totalCards: 2 })));
});
});

module('when users clicks on the "Continue" then "Next" button', function () {
test('should display the next card', async function (assert) {
// given
const firstCard = {
Expand Down Expand Up @@ -106,6 +165,7 @@ module('Integration | Component | Module | Flashcards', function (hooks) {

// when
const screen = await render(<template><ModulixFlashcards @flashcards={{flashcards}} /></template>);
await clickByName(t('pages.modulix.buttons.flashcards.start'));
await clickByName(t('pages.modulix.buttons.flashcards.seeAnswer'));
await clickByName(t('pages.modulix.buttons.flashcards.nextCard'));

Expand Down
2 changes: 1 addition & 1 deletion mon-pix/tests/integration/components/module/grain_test.gjs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -299,7 +299,7 @@ module('Integration | Component | Module | Grain', function (hooks) {
<Module::Grain @grain={{this.grain}} />`);

// then
assert.dom(screen.getByRole('button', { name: 'Voir la réponse' })).exists();
assert.dom(screen.getByRole('button', { name: 'Commencer' })).exists();
});
});

Expand Down
2 changes: 1 addition & 1 deletion mon-pix/translations/fr.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1378,7 +1378,7 @@
}
},
"flashcards": {
"continuer": "Continuer",
"start": "Commencer",
"seeAnswer": "Voir la réponse",
"seeAgain": "Revoir la question",
"nextCard": "Suivant"
Expand Down

0 comments on commit cd8c3a0

Please sign in to comment.