Skip to content

Commit

Permalink
[FEATURE] Affichage du bloc personnalisé de fin de parcours pour les …
Browse files Browse the repository at this point in the history 
…campagnes isForAbsoluteNovice (PIX-10020)

 #7484
  • Loading branch information
@pix-service-auto-merge
pix-service-auto-merge authored Nov 23, 2023
2 parents 7caedc0 + 922fa7c commit 6ccdbb2
Show file tree
Hide file tree
Showing 4 changed files with 429 additions and 254 deletions.
181 changes: 91 additions & 90 deletions mon-pix/app/components/routes/campaigns/assessment/skill-review.hbs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -244,103 +244,104 @@
</div>
</PixBlock>
{{/if}}
{{#if this.showHeavyBlock}}
<PixBlock @shadow="heavy" class="skill-review__result-detail-container">

<PixBlock @shadow="heavy" class="skill-review__result-detail-container">

{{#if this.showCertifiableBadges}}
<div class="badge-certifiable-container">
{{#each this.certifiableBadgesOrderedByValidity as |badge|}}
<BadgeCardCertifiable
@title={{badge.title}}
@message={{badge.message}}
@imageUrl={{badge.imageUrl}}
@altMessage={{badge.altMessage}}
@isAcquired={{badge.isAcquired}}
@isValid={{badge.isValid}}
@isCertifiable={{badge.isCertifiable}}
@isAlwaysVisible={{badge.isAlwaysVisible}}
@acquisitionPercentage={{badge.acquisitionPercentage}}
/>
{{/each}}
</div>
{{/if}}
{{#if this.showCertifiableBadges}}
<div class="badge-certifiable-container">
{{#each this.certifiableBadgesOrderedByValidity as |badge|}}
<BadgeCardCertifiable
@title={{badge.title}}
@message={{badge.message}}
@imageUrl={{badge.imageUrl}}
@altMessage={{badge.altMessage}}
@isAcquired={{badge.isAcquired}}
@isValid={{badge.isValid}}
@isCertifiable={{badge.isCertifiable}}
@isAlwaysVisible={{badge.isAlwaysVisible}}
@acquisitionPercentage={{badge.acquisitionPercentage}}
/>
{{/each}}
</div>
{{/if}}

{{#if this.showNotCertifiableBadges}}
<h2 class="skill-review-result-detail__badge-subtitle">
{{t "pages.skill-review.badges-title"}}
</h2>
<div class="badge-container">
{{#each this.notCertifiableBadges as |badge|}}
<BadgeCard
@title={{badge.title}}
@message={{badge.message}}
@isAlwaysVisible={{badge.isAlwaysVisible}}
@acquisitionPercentage={{badge.acquisitionPercentage}}
@imageUrl={{badge.imageUrl}}
@altMessage={{badge.altMessage}}
@isAcquired={{badge.isAcquired}}
/>
{{/each}}
</div>
{{/if}}
{{#if this.showNotCertifiableBadges}}
<h2 class="skill-review-result-detail__badge-subtitle">
{{t "pages.skill-review.badges-title"}}
</h2>
<div class="badge-container">
{{#each this.notCertifiableBadges as |badge|}}
<BadgeCard
@title={{badge.title}}
@message={{badge.message}}
@isAlwaysVisible={{badge.isAlwaysVisible}}
@acquisitionPercentage={{badge.acquisitionPercentage}}
@imageUrl={{badge.imageUrl}}
@altMessage={{badge.altMessage}}
@isAcquired={{badge.isAcquired}}
/>
{{/each}}
</div>
{{/if}}

{{#if this.showImproveButton}}
<SkillReviewImprove @improve={{this.improve}} />
{{/if}}
{{#if this.showImproveButton}}
<SkillReviewImprove @improve={{this.improve}} />
{{/if}}

{{#unless @model.campaign.isForAbsoluteNovice}}
{{#if this.showStagesWithStars}}
<section class="skill-review-result-detail__content">
<h2 class="skill-review-competence-stages-result__title">
{{t "pages.skill-review.stage.title"}}
</h2>
{{#each-in this.competenceResultsGroupedByAreas as |area competenceResults|}}
<div class="skill-review-competence-stages-result__content">
<div class="skill-review-competence-stages-result__area">
<span
class="skill-review-competence-stages-result__border skill-review-competence__border--{{competenceResults.areaColor}}"
aria-hidden="true"
></span>
<h3 class="skill-review-competence-stages-result__subtitle">{{area}}</h3>
{{#unless @model.campaign.isForAbsoluteNovice}}
{{#if this.showStagesWithStars}}
<section class="skill-review-result-detail__content">
<h2 class="skill-review-competence-stages-result__title">
{{t "pages.skill-review.stage.title"}}
</h2>
{{#each-in this.competenceResultsGroupedByAreas as |area competenceResults|}}
<div class="skill-review-competence-stages-result__content">
<div class="skill-review-competence-stages-result__area">
<span
class="skill-review-competence-stages-result__border skill-review-competence__border--{{competenceResults.areaColor}}"
aria-hidden="true"
></span>
<h3 class="skill-review-competence-stages-result__subtitle">{{area}}</h3>
</div>
<Campaigns::Assessment::SkillReview::CompetenceStagesResult
@competenceResults={{competenceResults}}
@totalStage={{this.reachedStage.totalStage}}
/>
</div>
<Campaigns::Assessment::SkillReview::CompetenceStagesResult
@competenceResults={{competenceResults}}
@totalStage={{this.reachedStage.totalStage}}
/>
{{/each-in}}
</section>
{{else}}
<section class="skill-review-result-detail__content">
<div class="skill-review-result-detail__table-header">
<h2 class="skill-review-result-detail__subtitle">
{{t "pages.skill-review.details.title"}}
</h2>
{{#unless this.isFlashCampaign}}
<CircleChart @value={{this.masteryPercentage}}>
<span
aria-label="{{t 'pages.skill-review.details.result'}}"
class="skill-review-table-header__circle-chart-value"
>
{{t "pages.skill-review.details.percentage" rate=this.masteryRate}}
</span>
</CircleChart>
{{/unless}}
</div>
{{/each-in}}
</section>
{{else}}
<section class="skill-review-result-detail__content">
<div class="skill-review-result-detail__table-header">
<h2 class="skill-review-result-detail__subtitle">
{{t "pages.skill-review.details.title"}}
</h2>
{{#unless this.isFlashCampaign}}
<CircleChart @value={{this.masteryPercentage}}>
<span
aria-label="{{t 'pages.skill-review.details.result'}}"
class="skill-review-table-header__circle-chart-value"
>
{{t "pages.skill-review.details.percentage" rate=this.masteryRate}}
</span>
</CircleChart>
{{/unless}}
</div>
<Campaigns::Assessment::CampaignSkillReviewCompetenceResult
@competenceResults={{@model.campaignParticipationResult.competenceResults}}
/>
</section>
{{/if}}
<Campaigns::Assessment::CampaignSkillReviewCompetenceResult
@competenceResults={{@model.campaignParticipationResult.competenceResults}}
/>
</section>
{{/if}}

{{#unless this.isFlashCampaign}}
<div class="skill-review-result-detail__information">
<FaIcon @icon="circle-info" class="skill-review-information__info-icon" aria-hidden="true" />
<div class="skill-review-information__text">
{{t "pages.skill-review.information"}}
{{#unless this.isFlashCampaign}}
<div class="skill-review-result-detail__information">
<FaIcon @icon="circle-info" class="skill-review-information__info-icon" aria-hidden="true" />
<div class="skill-review-information__text">
{{t "pages.skill-review.information"}}
</div>
</div>
</div>
{{/unless}}
{{/unless}}
{{/unless}}
</PixBlock>
</PixBlock>
{{/if}}
</main>
14 changes: 13 additions & 1 deletion mon-pix/app/components/routes/campaigns/assessment/skill-review.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -98,7 +98,10 @@ export default class SkillReview extends Component {
}

get displayOrganizationCustomMessage() {
return Boolean((this.showOrganizationMessage || this.showOrganizationButton) && this.isShared);
const hasCustomBlock = this.showOrganizationMessage || this.showOrganizationButton;
const showCustomBlock = this.isShared || this.args.model.campaign.isForAbsoluteNovice;

return hasCustomBlock && showCustomBlock;
}

get showOrganizationMessage() {
Expand Down Expand Up @@ -171,6 +174,15 @@ export default class SkillReview extends Component {
return this.args.model.campaignParticipationResult.canImprove && !this.isShareButtonClicked;
}

get showHeavyBlock() {
return (
this.showCertifiableBadges ||
this.showNotCertifiableBadges ||
this.showImproveButton ||
!this.args.model.campaign.isForAbsoluteNovice
);
}

get competenceResultsGroupedByAreas() {
const competenceResults = this.args.model.campaignParticipationResult.get('competenceResults').toArray();
return competenceResults.reduce((acc, competenceResult) => {
Expand Down
160 changes: 160 additions & 0 deletions mon-pix/tests/integration/components/campaign/skill-review_test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -63,6 +63,156 @@ module('Integration | Component | Campaign | skill-review', function (hooks) {
assert.dom(screen.queryByRole('button', { name: 'Remettre à zéro et tout retenter' })).doesNotExist();
});

module('#displayOrganizationCustomMessage', function () {
test('display Organization Custom Message when participation is shared', async function (assert) {
const customResultPageText = 'Je suis Iron Man';
model.campaignParticipationResult.set('isShared', true);
model.campaign.set('customResultPageText', customResultPageText);

this.set('model', model);

// when
const screen = await render(hbs`<Routes::Campaigns::Assessment::SkillReview @model={{this.model}} />`);

assert.ok(screen.getByText(customResultPageText));
});

test('display Organization Custom Message when campaign isForAbsoluteNovice', async function (assert) {
const customResultPageText = "je s'appelle groot";
model.campaignParticipationResult.set('isShared', false);
model.campaign.set('customResultPageText', customResultPageText);
model.campaign.set('isForAbsoluteNovice', true);

this.set('model', model);

// when
const screen = await render(hbs`<Routes::Campaigns::Assessment::SkillReview @model={{this.model}} />`);

assert.ok(screen.getByText(customResultPageText));
});

test('display Organization Custom button when participation is shared', async function (assert) {
const customResultPageButtonText = 'Je suis Iron Man';
const customResultPageButtonUrl = 'http://jesuisunbouton.fr/';
model.campaignParticipationResult.set('isShared', true);
model.campaign.set('customResultPageButtonUrl', customResultPageButtonUrl);
model.campaign.set('customResultPageButtonText', customResultPageButtonText);

this.set('model', model);

// when
const screen = await render(hbs`<Routes::Campaigns::Assessment::SkillReview @model={{this.model}} />`);

assert
.dom(screen.getByRole('link', { name: customResultPageButtonText }))
.hasAttribute('href', customResultPageButtonUrl);
});

test('display Organization Custom button when campaign isForAbsoluteNovice', async function (assert) {
const customResultPageButtonText = 'je suis un bouton';
const customResultPageButtonUrl = 'http://jesuisunbouton.fr/';
model.campaignParticipationResult.set('isShared', false);
model.campaign.set('customResultPageButtonUrl', customResultPageButtonUrl);
model.campaign.set('customResultPageButtonText', customResultPageButtonText);
model.campaign.set('isForAbsoluteNovice', true);

this.set('model', model);

// when
const screen = await render(hbs`<Routes::Campaigns::Assessment::SkillReview @model={{this.model}} />`);

assert
.dom(screen.getByRole('link', { name: customResultPageButtonText }))
.hasAttribute('href', customResultPageButtonUrl);
});

test('display Organization Custom button and Text when campaign isForAbsoluteNovice', async function (assert) {
const customResultPageText = "je s'appelle groot";
const customResultPageButtonText = 'je suis un bouton';
const customResultPageButtonUrl = 'http://jesuisunbouton.fr/';
model.campaign.set('customResultPageText', customResultPageText);
model.campaign.set('customResultPageButtonUrl', customResultPageButtonUrl);
model.campaign.set('customResultPageButtonText', customResultPageButtonText);
model.campaignParticipationResult.set('isShared', false);
model.campaign.set('isForAbsoluteNovice', true);

this.set('model', model);

// when
const screen = await render(hbs`<Routes::Campaigns::Assessment::SkillReview @model={{this.model}} />`);

assert
.dom(screen.getByRole('link', { name: customResultPageButtonText }))
.hasAttribute('href', customResultPageButtonUrl);
assert.ok(screen.getByText(customResultPageText));
});

test('display Organization Custom button and Text when campaign participation isShared', async function (assert) {
const customResultPageText = "je s'appelle groot";
const customResultPageButtonText = 'je suis un bouton';
const customResultPageButtonUrl = 'http://jesuisunbouton.fr/';
model.campaign.set('customResultPageText', customResultPageText);
model.campaign.set('customResultPageButtonUrl', customResultPageButtonUrl);
model.campaign.set('customResultPageButtonText', customResultPageButtonText);
model.campaignParticipationResult.set('isShared', true);
model.campaign.set('isForAbsoluteNovice', false);

this.set('model', model);

// when
const screen = await render(hbs`<Routes::Campaigns::Assessment::SkillReview @model={{this.model}} />`);

assert
.dom(screen.getByRole('link', { name: customResultPageButtonText }))
.hasAttribute('href', customResultPageButtonUrl);
assert.ok(screen.getByText(customResultPageText));
});

test('not display Organization Custom Message when campaign isForAbsoluteForNovice and isShared are false', async function (assert) {
const customResultPageText = "je s'appelle groot";
model.campaignParticipationResult.set('isShared', false);
model.campaign.set('customResultPageText', customResultPageText);
model.campaign.set('isForAbsoluteNovice', false);

this.set('model', model);

// when
const screen = await render(hbs`<Routes::Campaigns::Assessment::SkillReview @model={{this.model}} />`);

assert.notOk(screen.queryByText(customResultPageText));
});

test('not display Organization Custom Message or Url when not set and campaign participation isShared', async function (assert) {
model.campaignParticipationResult.set('isShared', true);
model.campaign.set('isForAbsoluteNovice', false);
model.campaign.set('customResultPageText', null);
model.campaign.set('customResultPageButtonUrl', null);
model.campaign.set('customResultPageButtonText', null);

this.set('model', model);

// when
const screen = await render(hbs`<Routes::Campaigns::Assessment::SkillReview @model={{this.model}} />`);

assert.notOk(screen.queryByText(this.intl.t('pages.skill-review.organization-message')));
});

test('not display Organization Custom Message or Url when not set and campaign isForAbsoluteNovice', async function (assert) {
model.campaignParticipationResult.set('isShared', false);
model.campaign.set('isForAbsoluteNovice', true);
model.campaign.set('customResultPageText', null);
model.campaign.set('customResultPageButtonUrl', null);
model.campaign.set('customResultPageButtonText', null);

this.set('model', model);

// when
const screen = await render(hbs`<Routes::Campaigns::Assessment::SkillReview @model={{this.model}} />`);

assert.notOk(screen.queryByText(this.intl.t('pages.skill-review.organization-message')));
});
});

module('Reset button', function (hooks) {
hooks.beforeEach(function () {
model.campaignParticipationResult.set('canReset', true);
Expand Down Expand Up @@ -103,4 +253,14 @@ module('Integration | Component | Campaign | skill-review', function (hooks) {
assert.dom(screen.getByRole('button', { name: 'Annuler' })).exists();
});
});

test('it should not display skill review infos if isForabsoluteNovice is true', async function (assert) {
model.campaign.set('isForAbsoluteNovice', true);
this.set('model', model);

const screen = await render(hbs`<Routes::Campaigns::Assessment::SkillReview @model={{this.model}} />`);

assert.notOk(screen.queryByText(this.intl.t('pages.skill-review.stage.title')));
assert.notOk(screen.queryByText(this.intl.t('pages.skill-review.details.title')));
});
});
Loading

0 comments on commit 6ccdbb2

Please sign in to comment.