feat(frontend): add quiz component tests

Author: sifferhans

frontend/app/components/challenges/QuizChallenge.vue

@@ -177,23 +177,27 @@ onMounted(() => {
 })
 
 // Watch for needsToStartQuiz transitions (handles both initial mount and post-enrollment refresh)
-watch(needsToStartQuiz, async (needs) => {
-  if (!needs || !props.challenge.quiz.userActiveSession?.id) return
-  isLoading.value = true
-  const result = await startQuizSession({
-    sessionId: props.challenge.quiz.userActiveSession.id,
-  })
-  if (result.data?.startQuizSession) {
-    startedSubmission.value = result.data.startQuizSession
-  }
-  isLoading.value = false
-  emit('start')
-  track(AnalyticsEvent.QuizStarted, {
-    quiz_id: props.challenge.quiz.id,
-    quiz_name: props.challenge.name,
-    challenge_id: props.challenge.id,
-  })
-}, { immediate: true })
+watch(
+  needsToStartQuiz,
+  async (needs) => {
+    if (!needs || !props.challenge.quiz.userActiveSession?.id) return
+    isLoading.value = true
+    const result = await startQuizSession({
+      sessionId: props.challenge.quiz.userActiveSession.id,
+    })
+    if (result.data?.startQuizSession) {
+      startedSubmission.value = result.data.startQuizSession
+    }
+    isLoading.value = false
+    emit('start')
+    track(AnalyticsEvent.QuizStarted, {
+      quiz_id: props.challenge.quiz.id,
+      quiz_name: props.challenge.name,
+      challenge_id: props.challenge.id,
+    })
+  },
+  { immediate: true },
+)
 
 const activeSubmission = computed(() => {
   // Determine the target submission ID
@@ -453,6 +457,22 @@ const activeRef = computed(() =>
 const actionState = computed(() => activeRef.value?.actionState)
 const handlers = computed(() => activeRef.value?.handlers)
 
+// When correct answers are hidden (e.g. the quiz is used as a survey), locking
+// an answer reveals nothing, so the separate "continue" tap is just friction.
+// Submit and advance in one step. Reveal-enabled quizzes keep the two-step flow
+// so users can see the correct/wrong result before continuing.
+async function onLockAnswer() {
+  await handlers.value?.submit()
+  // Only auto-advance if the answer actually locked — submit() no-ops on empty
+  // input (e.g. blank free text), and we must not skip an unanswered question.
+  if (
+    props.challenge.quiz.revealCorrectAnswers === false &&
+    actionState.value?.isAnswerLocked
+  ) {
+    handlers.value?.continue()
+  }
+}
+
 const footerState = computed(() => {
   const state = actionState.value
   if (!state) return null
@@ -472,6 +492,14 @@ const continueButtonText = computed(() => {
   return t('quiz.nextQuestion')
 })
 
+// When results are hidden the lock button just advances, so label it as such
+// rather than "Lock answer".
+const lockButtonText = computed(() =>
+  props.challenge.quiz.revealCorrectAnswers === false
+    ? continueButtonText.value
+    : t('quiz.lockAnswer'),
+)
+
 // Determine button text for next action in review mode
 const nextButtonText = computed(() => {
   if (actionState.value?.isLastQuestion) {
@@ -839,9 +867,9 @@ const progressResults = computed(() => {
           size="large"
           :disabled="footerState.button.disabled"
           :loading="actionState?.isSubmitting"
-          @click="handlers?.submit"
+          @click="onLockAnswer"
         >
-          {{ $t('quiz.lockAnswer') }}
+          {{ lockButtonText }}
         </DesignButton>
 
         <DesignButton

frontend/app/components/challenges/quiz/QuizResult.vue

@@ -94,9 +94,6 @@ onMounted(() => {
         <h1 class="text-heading text-text-default">
           {{ $t('quiz.result.thanksForAnswers') }}
         </h1>
-        <p class="text-body text-text-secondary">
-          {{ $t('quiz.result.resultsRevealedLater') }}
-        </p>
       </div>
 
       <div class="flex flex-col gap-small">
@@ -130,7 +127,7 @@ onMounted(() => {
 
         <h1 class="text-heading text-text-default tabular-nums">
           {{ resultText }}
-          <br >
+          <br />
           {{ pointsText }}
         </h1>
       </div>

frontend/app/components/challenges/quiz/questions/QuizNumberQuestion.vue

@@ -46,7 +46,8 @@ const submittedResult = ref<{ isCorrect: boolean | null } | null>(
 )
 
 async function handleLockAnswer() {
-  if (!currentValue.value || isSubmitting.value) return
+  // 0 is a valid answer (minValue can be 0), so guard on nullish, not falsy.
+  if (currentValue.value == null || isSubmitting.value) return
 
   isSubmitting.value = true
 

frontend/test/component/QuizAlternative.test.ts

@@ -0,0 +1,87 @@
+// @vitest-environment nuxt
+import { describe, it, expect } from 'vitest'
+import { mountSuspended } from '@nuxt/test-utils/runtime'
+import QuizAlternative from '~/components/challenges/quiz/QuizAlternative.vue'
+
+type Props = InstanceType<typeof QuizAlternative>['$props']
+
+// The test env renders the English (fallback) locale.
+const T = {
+  yourAnswer: 'Your answer',
+  wrongAnswer: 'Incorrect answer',
+  correctAnswer: 'Correct answer',
+}
+
+function mountAlt(props: Partial<Props> = {}) {
+  return mountSuspended(QuizAlternative, {
+    props: { text: 'Option A', ...props } as Props,
+  })
+}
+
+const hasIcon = (w: Awaited<ReturnType<typeof mountAlt>>, name: string) =>
+  w.findComponent({ name }).exists()
+
+describe('QuizAlternative', () => {
+  it('renders the answer text', async () => {
+    const wrapper = await mountAlt({ text: 'The capital is Oslo' })
+    expect(wrapper.text()).toContain('The capital is Oslo')
+  })
+
+  it('applies the disabled attribute', async () => {
+    const wrapper = await mountAlt({ disabled: true })
+    expect(wrapper.find('button').attributes('disabled')).toBeDefined()
+  })
+
+  it('shows no status badge before confirmation', async () => {
+    const wrapper = await mountAlt({
+      highlighted: true,
+      selected: true,
+      confirmed: false,
+    })
+    expect(hasIcon(wrapper, 'IconCheck')).toBe(false)
+    expect(hasIcon(wrapper, 'IconClose')).toBe(false)
+    expect(hasIcon(wrapper, 'IconLock')).toBe(false)
+  })
+
+  it('marks a correct answer with a positive badge', async () => {
+    const wrapper = await mountAlt({ confirmed: true, correct: true })
+    expect(hasIcon(wrapper, 'IconCheck')).toBe(true)
+    expect(wrapper.text()).toContain(T.correctAnswer)
+    expect(wrapper.find('.bg-accent-positive').exists()).toBe(true)
+  })
+
+  it('marks your own wrong answer as "your answer"', async () => {
+    const wrapper = await mountAlt({
+      confirmed: true,
+      wrong: true,
+      selected: true,
+    })
+    expect(hasIcon(wrapper, 'IconClose')).toBe(true)
+    expect(wrapper.text()).toContain(T.yourAnswer)
+    expect(wrapper.find('.bg-accent-negative').exists()).toBe(true)
+  })
+
+  it('marks a non-selected wrong answer as "wrong answer"', async () => {
+    const wrapper = await mountAlt({
+      confirmed: true,
+      wrong: true,
+      selected: false,
+    })
+    expect(hasIcon(wrapper, 'IconClose')).toBe(true)
+    expect(wrapper.text()).toContain(T.wrongAnswer)
+  })
+
+  it('marks your selected answer as locked when correctness is hidden', async () => {
+    const wrapper = await mountAlt({
+      confirmed: true,
+      selected: true,
+      correct: false,
+      wrong: false,
+    })
+    // Lock icon + "your answer", using the neutral accent (not positive/negative).
+    expect(hasIcon(wrapper, 'IconLock')).toBe(true)
+    expect(wrapper.text()).toContain(T.yourAnswer)
+    expect(wrapper.find('.bg-accent-positive').exists()).toBe(false)
+    expect(wrapper.find('.bg-accent-negative').exists()).toBe(false)
+  })
+})

frontend/test/component/QuizBettingModule.test.ts

@@ -0,0 +1,117 @@
+// @vitest-environment nuxt
+import { describe, it, expect } from 'vitest'
+import { mountSuspended } from '@nuxt/test-utils/runtime'
+import QuizBettingModule from '~/components/challenges/quiz/QuizBettingModule.vue'
+import DesignSlider from '~/components/design/DesignSlider.vue'
+
+type Props = InstanceType<typeof QuizBettingModule>['$props']
+
+function mountBet(props: Partial<Props> = {}) {
+  return mountSuspended(QuizBettingModule, {
+    props: { availablePoints: 100, ...props } as Props,
+  })
+}
+
+type Wrapper = Awaited<ReturnType<typeof mountBet>>
+const slider = (w: Wrapper) => w.findComponent(DesignSlider)
+
+describe('QuizBettingModule', () => {
+  describe('betting mode', () => {
+    it('shows the bet and remaining points', async () => {
+      const wrapper = await mountBet({ availablePoints: 100, modelValue: 30 })
+      expect(wrapper.text()).toContain('30') // your bet
+      expect(wrapper.text()).toContain('70') // remaining
+    })
+
+    it('defaults the slider bounds to 0..availablePoints', async () => {
+      const wrapper = await mountBet({ availablePoints: 100 })
+      expect(slider(wrapper).props('min')).toBe(0)
+      expect(slider(wrapper).props('max')).toBe(100)
+    })
+
+    it('applies percentage limits to the slider bounds', async () => {
+      const wrapper = await mountBet({
+        availablePoints: 100,
+        minPercentage: 10,
+        maxPercentage: 50,
+      })
+      expect(slider(wrapper).props('min')).toBe(10)
+      expect(slider(wrapper).props('max')).toBe(50)
+    })
+
+    it('takes the stricter of percentage and absolute limits', async () => {
+      const wrapper = await mountBet({
+        availablePoints: 100,
+        minPercentage: 10, // -> 10
+        minAbsolute: 20, // stricter min wins
+        maxPercentage: 50, // -> 50
+        maxAbsolute: 30, // stricter max wins
+      })
+      expect(slider(wrapper).props('min')).toBe(20)
+      expect(slider(wrapper).props('max')).toBe(30)
+    })
+
+    it('shows the registered-bet message instead of the slider when locked', async () => {
+      const wrapper = await mountBet({ mode: 'locked' })
+      expect(wrapper.text()).toContain('The bet has been registered')
+      expect(slider(wrapper).exists()).toBe(false)
+    })
+
+    it('shows the registered-bet message when disabled', async () => {
+      const wrapper = await mountBet({ disabled: true })
+      expect(wrapper.text()).toContain('The bet has been registered')
+      expect(slider(wrapper).exists()).toBe(false)
+    })
+  })
+
+  describe('results mode', () => {
+    it('shows a win with a positive points value and multiplier', async () => {
+      const wrapper = await mountBet({
+        mode: 'results',
+        betAmount: 10,
+        pointsEarned: 20, // resultAmount 30 -> x3
+        correctCount: 2,
+        totalCount: 3,
+      })
+      expect(wrapper.text()).toContain('+20')
+      expect(wrapper.text()).toContain('Points earned')
+      expect(wrapper.text()).toContain('x 3')
+    })
+
+    it('renders a fractional multiplier to two decimals', async () => {
+      const wrapper = await mountBet({
+        mode: 'results',
+        betAmount: 10,
+        pointsEarned: 5, // resultAmount 15 -> x1.5
+        correctCount: 1,
+        totalCount: 3,
+      })
+      expect(wrapper.text()).toContain('x 1.5')
+    })
+
+    it('shows a loss with the negative points value', async () => {
+      const wrapper = await mountBet({
+        mode: 'results',
+        betAmount: 10,
+        pointsEarned: -5,
+        correctCount: 0,
+        totalCount: 3,
+      })
+      expect(wrapper.text()).toContain('Points lost')
+      expect(wrapper.text()).toContain('-5')
+    })
+
+    it('hides the multiplier when there are no correct answers', async () => {
+      const wrapper = await mountBet({
+        mode: 'results',
+        betAmount: 10,
+        pointsEarned: -10,
+        correctCount: 0,
+        totalCount: 3,
+      })
+      // correctCount 0 -> "none" label, no multiplier row
+      expect(wrapper.text()).toContain("You didn't have any correct ones.")
+      expect(wrapper.text()).not.toContain('x ')
+    })
+  })
+})