feat(QuizWidget.stories): add play for all correct answers in a quiz

Author: TylerAPfledderer

.storybook/i18next.ts

@@ -12,6 +12,7 @@ export const baseLocales = {
 const ns = [
   "common",
   "glossary",
+  "learn-quizzes",
   "page-about",
   "page-index",
   "page-learn",
@@ -48,6 +49,7 @@ const resources: Resource = ns.reduce((acc, n) => {
 
   return acc
 }, {})
+console.log("🚀 ~ constresources:Resource=ns.reduce ~ resources:", resources)
 
 i18n.use(initReactI18next).init({
   debug: true,

src/components/Quiz/QuizWidget/QuizButtonGroup.tsx

@@ -166,7 +166,12 @@ export const QuizButtonGroup = () => {
               <Translation id="learn-quizzes:try-again" />
             </Button>
           )}
-          <Button onClick={handleContinue}>
+          <Button
+            onClick={handleContinue}
+            data-testid={
+              finishedQuiz ? "see-results-button" : "next-question-button"
+            }
+          >
             <Translation
               id={
                 finishedQuiz
@@ -183,6 +188,7 @@ export const QuizButtonGroup = () => {
       <Button
         onClick={handleSubmitAnswer}
         isDisabled={!currentQuestionAnswerChoice}
+        data-testid="check-answer-button"
       >
         <Translation id="learn-quizzes:submit-answer" />
       </Button>

src/components/Quiz/QuizWidget/QuizContent.tsx

@@ -23,7 +23,12 @@ export const QuizContent = ({ children }: QuizContentProps) => {
 
   return (
     <VStack spacing="4">
-      <Text fontWeight="bold" textAlign="center" color={getTitleTextColor()}>
+      <Text
+        fontWeight="bold"
+        textAlign="center"
+        data-testid={`answer-status-${answerStatus}`}
+        color={getTitleTextColor()}
+      >
         {getTitleContent()}
       </Text>
       {children}

src/components/Quiz/QuizWidget/QuizRadioGroup.tsx

@@ -43,7 +43,12 @@ export const QuizRadioGroup = () => {
     onChange: handleSelection,
   })
 
-  const { answers, correctAnswerId, prompt } = questions[currentQuestionIndex]
+  const {
+    answers,
+    correctAnswerId,
+    prompt,
+    id: questionId,
+  } = questions[currentQuestionIndex]
 
   // Memoized values
   const explanation = useMemo<TranslationKey>(() => {
@@ -73,7 +78,7 @@ export const QuizRadioGroup = () => {
         {t(prompt)}
       </Text>
 
-      <Stack spacing="4">
+      <Stack spacing="4" data-testid="question-group" id={questionId}>
         {answers.map(({ id, label }, idx) => {
           const display =
             !answerStatus || id === selectedAnswer ? "inline-flex" : "none"
@@ -140,6 +145,8 @@ const CustomRadio = ({
     color: isAnswerVisible ? getAnswerColor() : undefined,
   }
 
+  const radioInputProps = getInputProps({ id: INPUT_ID })
+
   return (
     <>
       <chakra.label
@@ -149,6 +156,8 @@ const CustomRadio = ({
         w="full"
       >
         <HStack
+          data-testid="quiz-question-answer"
+          id={radioInputProps.value}
           {...getRadioProps()}
           // Override: `aria-hidden` is marked true in `getRadioProps`
           aria-hidden="false"
@@ -181,7 +190,7 @@ const CustomRadio = ({
           <span>{label}</span>
         </HStack>
       </chakra.label>
-      <input {...getInputProps({ id: INPUT_ID })} />
+      <input {...radioInputProps} />
     </>
   )
 }

src/components/Quiz/QuizWidget/QuizWidget.stories.tsx

@@ -0,0 +1,85 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import { expect, userEvent, waitFor, within } from "@storybook/test"
+
+import questionBank from "@/data/quizzes/questionBank"
+
+import { StandaloneQuizWidget } from "./"
+
+const layer2QuestionBank = Object.entries(questionBank).reduce<
+  { id: string; correctAnswer: string }[]
+>((arr, curr) => {
+  if (!curr[0].startsWith("g")) return [...arr]
+
+  return [
+    ...arr,
+    {
+      id: curr[0],
+      correctAnswer: curr[1].correctAnswerId,
+    },
+  ]
+}, [])
+
+type QuizWidgetType = typeof StandaloneQuizWidget
+
+const meta = {
+  title: "QuizWidget",
+  component: StandaloneQuizWidget,
+} satisfies Meta<QuizWidgetType>
+
+export default meta
+
+export const QuizWidgetAllCorrect: StoryObj<typeof meta> = {
+  args: {
+    quizKey: "layer-2",
+  },
+  render: (args) => <StandaloneQuizWidget {...args} />,
+
+  play: async ({ canvasElement, step }) => {
+    const canvas = within(canvasElement)
+
+    const quizWidget = canvas.getByTestId("quiz-widget")
+    await expect(quizWidget).toBeInTheDocument()
+
+    // TODO: would like to add this check to confirm translation is working
+    // currently broken here, despite it working fine in prod
+    // await waitFor(() =>
+    //   expect(canvas.getByTestId("answer-status-null")).toHaveTextContent(
+    //     "Layer 2"
+    //   )
+    // )
+
+    await waitFor(() =>
+      expect(canvas.getByTestId("check-answer-button")).toBeDisabled()
+    )
+
+    await step("Answer all questions correctly", async () => {
+      for (let i = 0; i < layer2QuestionBank.length; i++) {
+        const questionGroupId = canvas.getByTestId("question-group").id
+        const questionAnswers = canvas.getAllByTestId("quiz-question-answer")
+        const currentQuestionBank = layer2QuestionBank.find(
+          ({ id }) => id === questionGroupId
+        )!
+        await userEvent.click(
+          questionAnswers.find(
+            (answer) => answer.id === currentQuestionBank.correctAnswer
+          )!
+        )
+
+        await userEvent.click(canvas.getByTestId("check-answer-button"))
+        await expect(
+          canvas.getByTestId("answer-status-correct")
+        ).toBeInTheDocument()
+
+        if (i === layer2QuestionBank.length - 1) {
+          await userEvent.click(canvas.getByTestId("see-results-button"))
+        } else {
+          await userEvent.click(canvas.getByTestId("next-question-button"))
+        }
+      }
+    })
+
+    await step("Check for successful results page", async () => {
+      await expect(canvasElement).toHaveTextContent("You passed the quiz!")
+    })
+  },
+}

src/components/Quiz/QuizWidget/index.tsx

@@ -114,7 +114,7 @@ const QuizWidget = ({
   }
 
   return (
-    <VStack spacing="12" width="full" maxW="600px">
+    <VStack data-testid="quiz-widget" spacing="12" width="full" maxW="600px">
       <Stack
         w="full"
         gap="8"

yarn.lock

@@ -4136,7 +4136,7 @@
     fs-extra "^11.1.0"
     read-pkg-up "^7.0.1"
 
-"@storybook/test@^8.0.0":
+"@storybook/[email protected]":
   version "8.0.0"
   resolved "https://registry.yarnpkg.com/@storybook/test/-/test-8.0.0.tgz#645ea453174d89299cc933c1152f8014999ab3b0"
   integrity sha512-am0Pj1wqgsOUpW4RCfZtVGMIF8ddwMCbortOezEKcFuwAaNPE+p62alG+vOVIR0D19fs0XouWJj8rGo3OhzJRA==