Skip to content

Commit

Permalink
[FEATURE] Enregistrer le click sur le bouton suivant dans un Stepper …
Browse files Browse the repository at this point in the history 
…sur Matomo (PIX-12857)

 #9379
  • Loading branch information
@pix-service-auto-merge
pix-service-auto-merge authored Jun 26, 2024
2 parents 327d951 + e5593b6 commit 1352bd8
Show file tree
Hide file tree
Showing 7 changed files with 135 additions and 50 deletions.
1 change: 1 addition & 0 deletions mon-pix/app/components/module/grain.hbs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,7 @@
@passage={{@passage}}
@getLastCorrectionForElement={{this.getLastCorrectionForElement}}
@stepperIsFinished={{this.stepperIsFinished}}
@continueToNextStep={{@continueToNextStep}}
/>
</div>
{{/if}}
Expand Down
1 change: 1 addition & 0 deletions mon-pix/app/components/module/passage.hbs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@
@passage={{@passage}}
@transition={{this.grainTransition grain.id}}
@submitAnswer={{this.submitAnswer}}
@continueToNextStep={{this.continueToNextStep}}
@canMoveToNextGrain={{this.grainCanMoveToNextGrain index}}
@continueAction={{this.continueToNextGrain}}
@skipAction={{this.skipToNextGrain}}
Expand Down
28 changes: 20 additions & 8 deletions mon-pix/app/components/module/passage.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,35 +24,47 @@ export default class ModulePassage extends Component {
return this.grainsToDisplay.length < this.displayableGrains.length;
}

get lastIndex() {
get currentGrainIndex() {
return this.grainsToDisplay.length - 1;
}

@action
skipToNextGrain() {
const lastGrain = this.displayableGrains[this.lastIndex];
const currentGrain = this.displayableGrains[this.currentGrainIndex];

this.addNextGrainToDisplay();

this.metrics.add({
event: 'custom-event',
'pix-event-category': 'Modulix',
'pix-event-action': `Passage du module : ${this.args.module.id}`,
'pix-event-name': `Click sur le bouton passer du grain : ${lastGrain.id}`,
'pix-event-name': `Click sur le bouton passer du grain : ${currentGrain.id}`,
});
}

@action
continueToNextGrain() {
const lastGrain = this.displayableGrains[this.lastIndex];
const currentGrain = this.displayableGrains[this.currentGrainIndex];

this.addNextGrainToDisplay();

this.metrics.add({
event: 'custom-event',
'pix-event-category': 'Modulix',
'pix-event-action': `Passage du module : ${this.args.module.id}`,
'pix-event-name': `Click sur le bouton continuer du grain : ${lastGrain.id}`,
'pix-event-name': `Click sur le bouton continuer du grain : ${currentGrain.id}`,
});
}

@action
continueToNextStep(currentStepPosition) {
const currentGrain = this.displayableGrains[this.currentGrainIndex];

this.metrics.add({
event: 'custom-event',
'pix-event-category': 'Modulix',
'pix-event-action': `Passage du module : ${this.args.module.id}`,
'pix-event-name': `Click sur le bouton suivant de l'étape ${currentStepPosition} du stepper dans le grain : ${currentGrain.id}`,
});
}

Expand All @@ -61,18 +73,18 @@ export default class ModulePassage extends Component {
return;
}

const nextGrain = this.displayableGrains[this.lastIndex + 1];
const nextGrain = this.displayableGrains[this.currentGrainIndex + 1];
this.grainsToDisplay = [...this.grainsToDisplay, nextGrain];
}

@action
grainCanMoveToNextGrain(index) {
return this.lastIndex === index && this.hasNextGrain;
return this.currentGrainIndex === index && this.hasNextGrain;
}

@action
grainShouldDisplayTerminateButton(index) {
return this.lastIndex === index && !this.hasNextGrain;
return this.currentGrainIndex === index && !this.hasNextGrain;
}

@action
Expand Down
7 changes: 5 additions & 2 deletions mon-pix/app/components/module/stepper.gjs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,15 +21,18 @@ export default class ModulixStepper extends Component {

@action
displayNextStep() {
const nextStep = this.displayableSteps[this.lastIndex + 1];
const currentStepPosition = this.currentStepIndex + 1;
const nextStep = this.displayableSteps[currentStepPosition];
this.stepsToDisplay = [...this.stepsToDisplay, nextStep];

if (!this.hasNextStep) {
this.args.stepperIsFinished();
}

this.args.continueToNextStep(currentStepPosition);
}

get lastIndex() {
get currentStepIndex() {
return this.stepsToDisplay.length - 1;
}

Expand Down
94 changes: 56 additions & 38 deletions mon-pix/tests/integration/components/module/grain_test.gjs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -768,7 +768,19 @@ module('Integration | Component | Module | Grain', function (hooks) {
});
});

module('when there is no more steps to display', function () {
module('when there is no more steps to display', function (hooks) {
let passage;
let retryElementStub;
let continueToNextStepStub;
let store;

hooks.beforeEach(function () {
store = this.owner.lookup('service:store');
passage = store.createRecord('passage');
retryElementStub = sinon.stub();
continueToNextStepStub = sinon.stub();
});

test('should display continue button', async function (assert) {
// given
const steps = [
Expand All @@ -794,7 +806,6 @@ module('Integration | Component | Module | Grain', function (hooks) {
},
];

const store = this.owner.lookup('service:store');
const grain = store.createRecord('grain', {
title: 'Grain title',
components: [
Expand All @@ -805,16 +816,14 @@ module('Integration | Component | Module | Grain', function (hooks) {
],
});

const passage = store.createRecord('passage');
const retryElementStub = sinon.stub();

this.set('grain', grain);
this.set('passage', passage);
this.set('retryElement', retryElementStub);
this.set('continueToNextStep', continueToNextStepStub);

// when
const screen = await render(hbs`
<Module::Grain @grain={{this.grain}} @passage={{this.passage}} @canMoveToNextGrain={{true}} @retryElement={{this.retryElement}} />`);
<Module::Grain @grain={{this.grain}} @passage={{this.passage}} @canMoveToNextGrain={{true}} @retryElement={{this.retryElement}} @continueToNextStep={{this.continueToNextStep}} />`);
await clickByName(this.intl.t('pages.modulix.buttons.stepper.next'));

// then
Expand Down Expand Up @@ -848,7 +857,6 @@ module('Integration | Component | Module | Grain', function (hooks) {
},
];

const store = this.owner.lookup('service:store');
const grain = store.createRecord('grain', {
title: 'Grain title',
components: [
Expand All @@ -859,16 +867,14 @@ module('Integration | Component | Module | Grain', function (hooks) {
],
});

const passage = store.createRecord('passage');
const retryElementStub = sinon.stub();

this.set('grain', grain);
this.set('passage', passage);
this.set('retryElement', retryElementStub);
this.set('continueToNextStep', continueToNextStepStub);

// when
const screen = await render(hbs`
<Module::Grain @grain={{this.grain}} @passage={{this.passage}} @canMoveToNextGrain={{true}} @retryElement={{this.retryElement}} />`);
<Module::Grain @grain={{this.grain}} @passage={{this.passage}} @canMoveToNextGrain={{true}} @retryElement={{this.retryElement}} @continueToNextStep={{this.continueToNextStep}} />`);
await clickByName(this.intl.t('pages.modulix.buttons.stepper.next'));

// then
Expand All @@ -880,7 +886,19 @@ module('Integration | Component | Module | Grain', function (hooks) {
});

module('when there are answerable elements in stepper', function () {
module('when user response is not verified', function () {
module('when user response is not verified', function (hooks) {
let passage;
let retryElementStub;
let continueToNextStepStub;
let store;

hooks.beforeEach(function () {
store = this.owner.lookup('service:store');
passage = store.createRecord('passage');
retryElementStub = sinon.stub();
continueToNextStepStub = sinon.stub();
});

module('when there are still steps to display', function () {
test('should display skip button', async function (assert) {
// given
Expand Down Expand Up @@ -908,7 +926,6 @@ module('Integration | Component | Module | Grain', function (hooks) {
},
];

const store = this.owner.lookup('service:store');
const grain = store.createRecord('grain', {
title: 'Grain title',
components: [
Expand All @@ -919,20 +936,19 @@ module('Integration | Component | Module | Grain', function (hooks) {
],
});

const passage = store.createRecord('passage');
const retryElementStub = sinon.stub();

this.set('grain', grain);
this.set('passage', passage);
this.set('retryElement', retryElementStub);
this.set('continueToNextStep', continueToNextStepStub);

// when
const screen = await render(hbs`
<Module::Grain @grain={{this.grain}} @passage={{this.passage}} @canMoveToNextGrain={{true}} @retryElement={{this.retryElement}} />`);
<Module::Grain @grain={{this.grain}} @passage={{this.passage}} @canMoveToNextGrain={{true}} @retryElement={{this.retryElement}} @continueToNextStep={{this.continueToNextStep}} />`);

// then
assert.dom(screen.getByRole('button', { name: this.intl.t('pages.modulix.buttons.grain.skip') })).exists();
});

test('should not display continue button', async function (assert) {
// given
const steps = [
Expand All @@ -959,7 +975,6 @@ module('Integration | Component | Module | Grain', function (hooks) {
},
];

const store = this.owner.lookup('service:store');
const grain = store.createRecord('grain', {
title: 'Grain title',
components: [
Expand All @@ -970,16 +985,14 @@ module('Integration | Component | Module | Grain', function (hooks) {
],
});

const passage = store.createRecord('passage');
const retryElementStub = sinon.stub();

this.set('grain', grain);
this.set('passage', passage);
this.set('retryElement', retryElementStub);
this.set('continueToNextStep', continueToNextStepStub);

// when
const screen = await render(hbs`
<Module::Grain @grain={{this.grain}} @passage={{this.passage}} @canMoveToNextGrain={{true}} @retryElement={{this.retryElement}} />`);
<Module::Grain @grain={{this.grain}} @passage={{this.passage}} @canMoveToNextGrain={{true}} @retryElement={{this.retryElement}} @continueToNextStep={{this.continueToNextStep}} />`);

// then
assert
Expand Down Expand Up @@ -1016,7 +1029,6 @@ module('Integration | Component | Module | Grain', function (hooks) {
},
];

const store = this.owner.lookup('service:store');
const grain = store.createRecord('grain', {
title: 'Grain title',
components: [
Expand All @@ -1027,16 +1039,14 @@ module('Integration | Component | Module | Grain', function (hooks) {
],
});

const passage = store.createRecord('passage');
const retryElementStub = sinon.stub();

this.set('grain', grain);
this.set('passage', passage);
this.set('retryElement', retryElementStub);
this.set('continueToNextStep', continueToNextStepStub);

// when
const screen = await render(hbs`
<Module::Grain @grain={{this.grain}} @passage={{this.passage}} @canMoveToNextGrain={{true}} @retryElement={{this.retryElement}} />`);
<Module::Grain @grain={{this.grain}} @passage={{this.passage}} @canMoveToNextGrain={{true}} @retryElement={{this.retryElement}} @continueToNextStep={{this.continueToNextStep}} />`);
await clickByName(this.intl.t('pages.modulix.buttons.stepper.next'));

// then
Expand Down Expand Up @@ -1071,7 +1081,6 @@ module('Integration | Component | Module | Grain', function (hooks) {
},
];

const store = this.owner.lookup('service:store');
const grain = store.createRecord('grain', {
title: 'Grain title',
components: [
Expand All @@ -1082,16 +1091,14 @@ module('Integration | Component | Module | Grain', function (hooks) {
],
});

const passage = store.createRecord('passage');
const retryElementStub = sinon.stub();

this.set('grain', grain);
this.set('passage', passage);
this.set('retryElement', retryElementStub);
this.set('continueToNextStep', continueToNextStepStub);

// when
const screen = await render(hbs`
<Module::Grain @grain={{this.grain}} @passage={{this.passage}} @canMoveToNextGrain={{true}} @retryElement={{this.retryElement}} />`);
<Module::Grain @grain={{this.grain}} @passage={{this.passage}} @canMoveToNextGrain={{true}} @retryElement={{this.retryElement}} @continueToNextStep={{this.continueToNextStep}} />`);
await clickByName(this.intl.t('pages.modulix.buttons.stepper.next'));

// then
Expand Down Expand Up @@ -1228,7 +1235,19 @@ module('Integration | Component | Module | Grain', function (hooks) {
.doesNotExist();
});
});
module('when there is no more steps to display', function () {

module('when there is no more steps to display', function (hooks) {
let passage;
let retryElementStub;
let continueToNextStepStub;
let store;

hooks.beforeEach(function () {
store = this.owner.lookup('service:store');
passage = store.createRecord('passage');
retryElementStub = sinon.stub();
continueToNextStepStub = sinon.stub();
});
module('when the last step contains an answerable element', function () {
test('should not display skip button', async function (assert) {
// given
Expand Down Expand Up @@ -1270,22 +1289,21 @@ module('Integration | Component | Module | Grain', function (hooks) {
],
});

const passage = store.createRecord('passage');
const correction = store.createRecord('correction-response', { status: 'ok', feedback: 'super' });
store.createRecord('element-answer', {
elementId: 'd0690f26-978c-41c3-9a21-da931857739c',
correction,
passage,
});
const retryElementStub = sinon.stub();

this.set('grain', grain);
this.set('passage', passage);
this.set('retryElement', retryElementStub);
this.set('continueToNextStep', continueToNextStepStub);

// when
const screen = await render(hbs`
<Module::Grain @grain={{this.grain}} @passage={{this.passage}} @canMoveToNextGrain={{true}} @retryElement={{this.retryElement}} />`);
<Module::Grain @grain={{this.grain}} @passage={{this.passage}} @canMoveToNextGrain={{true}} @retryElement={{this.retryElement}} @continueToNextStep={{this.continueToNextStep}} />`);

await clickByName(this.intl.t('pages.modulix.buttons.stepper.next'));

Expand Down Expand Up @@ -1335,7 +1353,6 @@ module('Integration | Component | Module | Grain', function (hooks) {
],
});

const passage = store.createRecord('passage');
const correction = store.createRecord('correction-response', { status: 'ok', feedback: 'super' });
store.createRecord('element-answer', {
elementId: 'd0690f26-978c-41c3-9a21-da931857739c',
Expand All @@ -1347,10 +1364,11 @@ module('Integration | Component | Module | Grain', function (hooks) {
this.set('grain', grain);
this.set('passage', passage);
this.set('retryElement', retryElementStub);
this.set('continueToNextStep', continueToNextStepStub);

// when
const screen = await render(hbs`
<Module::Grain @grain={{this.grain}} @passage={{this.passage}} @canMoveToNextGrain={{true}} @retryElement={{this.retryElement}} />`);
<Module::Grain @grain={{this.grain}} @passage={{this.passage}} @canMoveToNextGrain={{true}} @retryElement={{this.retryElement}} @continueToNextStep={{this.continueToNextStep}} />`);

await clickByName(this.intl.t('pages.modulix.buttons.stepper.next'));

Expand Down
Loading

0 comments on commit 1352bd8

Please sign in to comment.