diff --git a/cypress/e2e/play/multipleChoices.cy.ts b/cypress/e2e/play/multipleChoices.cy.ts index 4f600977..6db8580d 100644 --- a/cypress/e2e/play/multipleChoices.cy.ts +++ b/cypress/e2e/play/multipleChoices.cy.ts @@ -33,6 +33,7 @@ const { data } = QUESTION_APP_SETTINGS.find( const id = data.questionId; const { choices } = data as MultipleChoicesAppSettingData; +const allChoicesIdx = choices.map((_c, idx) => idx); const multipleChoiceAppSettingsData = APP_SETTINGS[0].data as AppSettingData; @@ -90,6 +91,13 @@ const checkCorrection = (selection: number[], showCorrection = true) => { } }; +const checkAllChoicesAreNotSelected = () => + allChoicesIdx.forEach((idx) => + cy + .get(dataCyWrapper(buildMultipleChoicesButtonCy(idx, false))) + .should('be.visible') + ); + /** * Checks that the buttons inputs and submit buttons are disabled or not. * It is useful to check that: @@ -306,6 +314,18 @@ describe('Play Multiple Choices', () => { }); }); + it('Reset selection on retry', () => { + const selection = [0, 2]; + + clickSelection(selection); + + cy.get(dataCyWrapper(PLAY_VIEW_SUBMIT_BUTTON_CY)).click(); + cy.get(dataCyWrapper(PLAY_VIEW_RETRY_BUTTON_CY)).click(); + + // Checks that the user's selection is reset on retry. + checkAllChoicesAreNotSelected(); + }); + it('Correct app data', () => { // click on choices -> become selected const selection = choices.reduce( diff --git a/src/components/play/multipleChoices/PlayMultipleChoices.tsx b/src/components/play/multipleChoices/PlayMultipleChoices.tsx index 7ed4d327..36ba54ee 100644 --- a/src/components/play/multipleChoices/PlayMultipleChoices.tsx +++ b/src/components/play/multipleChoices/PlayMultipleChoices.tsx @@ -208,6 +208,12 @@ const PlayMultipleChoices = ({ // eslint-disable-next-line react-hooks/exhaustive-deps }, [choices, showCorrection, showCorrectness]); + // Reset the user's selection at each retry. + useEffect(() => { + setResponse([]); + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [numberOfRetry]); + const onResponseClick = (value: string) => { const choiceIdx = response.choices?.findIndex((choice) => choice === value);