diff --git a/src/components/Quiz/QuizQuestion/QuizQuestion.spec.tsx b/src/components/Quiz/QuizQuestion/QuizQuestion.spec.tsx
index 311ec78e7b1f38a7711fd3a7df48b1bd8650c568..c2b25bde8fbdf246856f7f925deb83c96ecd31d3 100644
--- a/src/components/Quiz/QuizQuestion/QuizQuestion.spec.tsx
+++ b/src/components/Quiz/QuizQuestion/QuizQuestion.spec.tsx
@@ -39,6 +39,24 @@ describe('QuizQuestion component', () => {
).toBeFalsy()
})
+ it('should be rendered correctly with loader', async () => {
+ const updateUserChallengeData = {
+ ...userChallengeData[0],
+ }
+ updateUserChallengeData.quiz.questions.forEach(
+ answer => (answer.result = UserQuestionState.CORRECT)
+ )
+ const { container } = render(
+ <Provider store={store}>
+ <QuizQuestion userChallenge={updateUserChallengeData} />
+ </Provider>
+ )
+ await waitFor(() => null, { container })
+ expect(
+ container.getElementsByClassName('question-loading')[0]
+ ).toBeInTheDocument()
+ })
+
it('should be rendered correctly with customQuestion', async () => {
const updateUserChallengeData = {
...userChallengeData[0],
diff --git a/src/components/Quiz/QuizQuestion/QuizQuestion.tsx b/src/components/Quiz/QuizQuestion/QuizQuestion.tsx
index 4838694dc56013f3fbaba7af56b402b2bae8cfc9..5e8b2fbca51afca221d5c8c725271152719b64da 100644
--- a/src/components/Quiz/QuizQuestion/QuizQuestion.tsx
+++ b/src/components/Quiz/QuizQuestion/QuizQuestion.tsx
@@ -1,12 +1,13 @@
+import Loader from 'components/Loader/Loader'
import { useClient } from 'cozy-client'
import { QuestionEntity, UserChallenge } from 'models'
import React, { useEffect, useState } from 'react'
import { useNavigate } from 'react-router-dom'
import QuizService from 'services/quiz.service'
import { useAppSelector } from 'store/hooks'
+import './quizQuestion.scss'
import QuizQuestionContent from './QuizQuestionContent'
import QuizQuestionContentCustom from './QuizQuestionContentCustom'
-import './quizQuestion.scss'
const QuizQuestion = ({ userChallenge }: { userChallenge: UserChallenge }) => {
const client = useClient()
@@ -18,7 +19,6 @@ const QuizQuestion = ({ userChallenge }: { userChallenge: UserChallenge }) => {
)
const [customQuestion, setCustomQuestion] = useState<QuestionEntity>()
const [isCustomQuest, setIsCustomQuest] = useState(!questionsIsLocked)
- const [customQuestionLoading, setCustomQuestionLoading] = useState(false)
const goBack = () => {
navigate('/challenges')
@@ -34,11 +34,9 @@ const QuizQuestion = ({ userChallenge }: { userChallenge: UserChallenge }) => {
)
if (subscribed) {
setCustomQuestion(customQuestion)
- setCustomQuestionLoading(false)
}
}
if (isCustomQuest) {
- setCustomQuestionLoading(true)
loadCustomQuestion()
}
return () => {
@@ -48,13 +46,20 @@ const QuizQuestion = ({ userChallenge }: { userChallenge: UserChallenge }) => {
return (
<>
- {isCustomQuest && customQuestion ? (
- <QuizQuestionContentCustom
- userChallenge={userChallenge}
- goBack={goBack}
- customQuestion={customQuestion}
- isLoading={customQuestionLoading}
- />
+ {isCustomQuest ? (
+ <>
+ {!customQuestion ? (
+ <div className="question-loading">
+ <Loader />
+ </div>
+ ) : (
+ <QuizQuestionContentCustom
+ userChallenge={userChallenge}
+ goBack={goBack}
+ customQuestion={customQuestion}
+ />
+ )}
+ </>
) : (
<QuizQuestionContent
userChallenge={userChallenge}
diff --git a/src/components/Quiz/QuizQuestion/QuizQuestionContentCustom.spec.tsx b/src/components/Quiz/QuizQuestion/QuizQuestionContentCustom.spec.tsx
index abffb7e8550613050266384a18279b1cc5a83b72..9271ef602efce1995073d6e7612b0bebf283979a 100644
--- a/src/components/Quiz/QuizQuestion/QuizQuestionContentCustom.spec.tsx
+++ b/src/components/Quiz/QuizQuestion/QuizQuestionContentCustom.spec.tsx
@@ -39,7 +39,6 @@ describe('QuizCustomQuestionContent component', () => {
userChallenge={userChallengeData[0]}
customQuestion={questionEntity}
goBack={mockHistoryPush('/challenges')}
- isLoading={false}
/>
</Provider>
)
@@ -50,21 +49,6 @@ describe('QuizCustomQuestionContent component', () => {
expect(screen.getByText(questionEntity.questionLabel)).toBeInTheDocument()
expect(screen.getAllByRole('radio').length).toBe(3)
})
- it('should be rendered correctly with loader', () => {
- const { container } = render(
- <Provider store={store}>
- <QuizQuestionContentCustom
- userChallenge={userChallengeData[0]}
- customQuestion={questionEntity}
- goBack={mockHistoryPush('/challenges')}
- isLoading={true}
- />
- </Provider>
- )
- expect(
- container.getElementsByClassName('question-loading')[0]
- ).toBeInTheDocument()
- })
it('should display QuizExplanationModal when click on Button', async () => {
mockUpdateUserChallenge.mockResolvedValue(userChallengeData[0])
render(
@@ -73,7 +57,6 @@ describe('QuizCustomQuestionContent component', () => {
userChallenge={userChallengeData[0]}
customQuestion={questionEntity}
goBack={mockHistoryPush('/challenges')}
- isLoading={false}
/>
</Provider>
)
diff --git a/src/components/Quiz/QuizQuestion/QuizQuestionContentCustom.tsx b/src/components/Quiz/QuizQuestion/QuizQuestionContentCustom.tsx
index 8e08ef5adf4be828e82f3b7c35296e20dbc76f91..e9fab89f39c7bc1c65796a7320df9c6f450dcc28 100644
--- a/src/components/Quiz/QuizQuestion/QuizQuestionContentCustom.tsx
+++ b/src/components/Quiz/QuizQuestion/QuizQuestionContentCustom.tsx
@@ -1,7 +1,6 @@
import Button from '@material-ui/core/Button'
import CloseIcon from 'assets/icons/ico/close.svg'
import StyledIconButton from 'components/CommonKit/IconButton/StyledIconButton'
-import Loader from 'components/Loader/Loader'
import QuizExplanationModal from 'components/Quiz/QuizExplanationModal/QuizExplanationModal'
import { useClient } from 'cozy-client'
import { useI18n } from 'cozy-ui/transpiled/react/I18n'
@@ -18,14 +17,12 @@ interface QuizQuestionContentCustomProps {
userChallenge: UserChallenge
goBack: () => void
customQuestion: QuestionEntity
- isLoading: boolean
}
const QuizQuestionContentCustom = ({
userChallenge,
goBack,
customQuestion,
- isLoading,
}: QuizQuestionContentCustomProps) => {
const { t } = useI18n()
const client = useClient()
@@ -85,31 +82,21 @@ const QuizQuestionContentCustom = ({
{t('quiz.consumption_question')}
</p>
- {isLoading ? (
- <div className="question-loading">
- <Loader />
+ <p className="question text-18-bold">{customQuestion.questionLabel}</p>
+ {customQuestion.answers.map((answer, index) => (
+ <div className="answer" key={index}>
+ <input
+ type="radio"
+ id={`answer${index}`}
+ value={answer.answerLabel}
+ onChange={handleChange}
+ checked={userChoice === answer.answerLabel}
+ />
+ <label htmlFor={`answer${index}`} className="text-16-bold">
+ {answer.answerLabel}
+ </label>
</div>
- ) : (
- <>
- <p className="question text-18-bold">
- {customQuestion.questionLabel}
- </p>
- {customQuestion.answers.map((answer, index) => (
- <div className="answer" key={index}>
- <input
- type="radio"
- id={`answer${index}`}
- value={answer.answerLabel}
- onChange={handleChange}
- checked={userChoice === answer.answerLabel}
- />
- <label htmlFor={`answer${index}`} className="text-16-bold">
- {answer.answerLabel}
- </label>
- </div>
- ))}
- </>
- )}
+ ))}
</div>
<Button
aria-label={t('quiz.accessibility.button_validate')}
diff --git a/src/enums/userQuiz.enum.ts b/src/enums/userQuiz.enum.ts
index d681613d5c3f5d7fb7557b3f73fd8a8a115bdbbb..f2c9e9d519e7d6c92e50256ecd2b9dff8ea97fc7 100644
--- a/src/enums/userQuiz.enum.ts
+++ b/src/enums/userQuiz.enum.ts
@@ -12,5 +12,5 @@ export enum CustomQuestionType {
export enum UserQuestionState {
UNLOCKED = 0,
CORRECT = 1,
- UNCORRECT = 2,
+ INCORRECT = 2,
}
diff --git a/src/services/quiz.service.spec.ts b/src/services/quiz.service.spec.ts
index 9ede8bf0ac866c2a9fdc72d336f8be1ba4fda057..36d9fae2b69d555b6a8feb60841ffc3f8f5958e6 100644
--- a/src/services/quiz.service.spec.ts
+++ b/src/services/quiz.service.spec.ts
@@ -191,7 +191,7 @@ describe('Quiz service', () => {
const result = await quizService.updateUserQuiz(userQuiz, false, 2)
const mockUpdatedQuestion: UserQuestion = {
...userQuiz.questions[2],
- result: UserQuestionState.UNCORRECT,
+ result: UserQuestionState.INCORRECT,
}
userQuiz.questions[2] = mockUpdatedQuestion
diff --git a/src/services/quiz.service.ts b/src/services/quiz.service.ts
index 0a83636cd1e2708a4128634f29acf05b4f6012c4..a97ecff9ad170507442e896b0bf1d70756869dc6 100644
--- a/src/services/quiz.service.ts
+++ b/src/services/quiz.service.ts
@@ -221,7 +221,7 @@ export default class QuizService {
): Promise<UserQuiz> {
const result = questionResult
? UserQuestionState.CORRECT
- : UserQuestionState.UNCORRECT
+ : UserQuestionState.INCORRECT
const updatedQuestions = userQuiz.questions.map((question, index) => {
if (index === questionIndex) {