Merge pull request #12444 from TylerAPfledderer/feat/sb-interaction-testing

wackerow · web-flow · commit f49d9dabaac8 · 2024-05-27T08:17:08.000-06:00
feat: setup Storybook Interaction Testing
diff --git a/.storybook/i18next.ts b/.storybook/i18next.ts
@@ -13,6 +13,7 @@ export const baseLocales = {
 const ns = [
   "common",
   "glossary",
+  "learn-quizzes",
   "page-about",
   "page-index",
   "page-learn",
@@ -49,6 +50,7 @@ const resources: Resource = ns.reduce((acc, n) => {
 
   return acc
 }, {})
+console.log("🚀 ~ constresources:Resource=ns.reduce ~ resources:", resources)
 
 i18n.use(initReactI18next).init({
   debug: true,
@@ -57,6 +59,7 @@ i18n.use(initReactI18next).init({
   react: { useSuspense: false },
   supportedLngs,
   resources,
+  defaultNS: "common",
 })
 
 export default i18n
diff --git a/.storybook/manager.ts b/.storybook/manager.ts
@@ -10,5 +10,5 @@ addons.setConfig({
 // In order to override the default favicon, and inject a data hash link to the png
 const link = document.createElement("link")
 link.setAttribute("rel", "shortcut icon")
-link.setAttribute("href", favicon)
+link.setAttribute("href", favicon.src)
 document.head.appendChild(link)
diff --git a/.storybook/preview.ts b/.storybook/preview.ts
@@ -1,11 +1,15 @@
 import type { Preview } from "@storybook/react"
+import isChromatic from "chromatic/isChromatic"
 
 import theme from "../src/@chakra-ui/theme"
 
 import { ChakraDecorator } from "./ChakraDecorator"
 import i18n, { baseLocales } from "./i18next"
 
 import "../src/styles/global.css"
+import { MotionGlobalConfig } from "framer-motion"
+
+MotionGlobalConfig.skipAnimations = isChromatic()
 
 const chakraBreakpointArray = Object.entries(theme.breakpoints) as [
   string,
@@ -43,6 +47,9 @@ const preview: Preview = {
     backgrounds: {
       disable: true,
     },
+    chromatic: {
+      prefersReducedMotion: "reduce",
+    },
     options: {
       storySort: {
         order: ["Atoms", "Molecules", "Organisms", "Templates", "Pages"],
diff --git a/.storybook/theme.ts b/.storybook/theme.ts
@@ -1,8 +1,5 @@
 import { create } from "@storybook/theming"
 
-// @ts-ignore
-import brandImage from "./preview-logo.svg"
-
 export default create({
   base: "dark",
 
@@ -11,7 +8,7 @@ export default create({
   appBorderRadius: 4,
 
   brandTitle: "Ethereum.org",
-  brandImage,
+  brandImage: "./preview-logo.svg",
   brandUrl: "https://www.ethereum.org",
 
   barSelectedColor: "#ff7324",
diff --git a/package.json b/package.json
@@ -67,7 +67,7 @@
     "@storybook/addon-links": "7.6.6",
     "@storybook/nextjs": "7.6.6",
     "@storybook/react": "7.6.6",
-    "@storybook/testing-library": "0.2.2",
+    "@storybook/test": "8.0.0",
     "@svgr/webpack": "^8.1.0",
     "@types/decompress": "^4.2.7",
     "@types/hast": "^3.0.0",
diff --git a/src/components/FeedbackWidget/FeedbackWidget.stories.tsx b/src/components/FeedbackWidget/FeedbackWidget.stories.tsx
@@ -1,10 +1,11 @@
 import * as React from "react"
 import { Box, Stack } from "@chakra-ui/react"
 import { Meta, StoryObj } from "@storybook/react"
+import { expect, fireEvent, waitFor, within } from "@storybook/test"
 
-import FeedbackWidgetComponent from "./"
+import FeedbackWidget from "./"
 
-type FeedbackWidgetType = typeof FeedbackWidgetComponent
+type FeedbackWidgetType = typeof FeedbackWidget
 
 const meta = {
   title: "FeedbackWidget",
@@ -23,6 +24,27 @@ const meta = {
 
 export default meta
 
-export const FeedbackWidget: StoryObj<FeedbackWidgetType> = {
-  render: () => <FeedbackWidgetComponent />,
+type Story = StoryObj<typeof meta>
+
+export const WidgetButton: Story = {
+  render: () => <FeedbackWidget />,
+}
+
+export const WidgetModal: Story = {
+  render: () => <FeedbackWidget />,
+  play: async ({ canvasElement }) => {
+    // Add delay for snapshot capture of the modal
+    const canvas = within(canvasElement)
+    const canvasParent = within(canvasElement.parentElement!)
+
+    const feedbackButton = canvas.getByTestId("feedback-widget-button")
+
+    fireEvent.click(feedbackButton)
+
+    await waitFor(async () => {
+      await expect(
+        canvasParent.getByTestId("feedback-widget-modal")
+      ).toBeVisible()
+    })
+  },
 }
diff --git a/src/components/FeedbackWidget/FixedDot.tsx b/src/components/FeedbackWidget/FixedDot.tsx
@@ -12,6 +12,7 @@ const FixedDot = ({ bottomOffset, isExpanded, ...props }: FixedDotProps) => {
   const size = "12"
   return (
     <Button
+      data-testid="feedback-widget-button"
       h={size}
       w={{ base: size, lg: isExpanded ? "15rem" : size }}
       borderRadius="full"
diff --git a/src/components/FeedbackWidget/index.tsx b/src/components/FeedbackWidget/index.tsx
@@ -53,6 +53,7 @@ const FeedbackWidget = () => {
             boxShadow="tableItemBox"
             me={24}
             bottom={{ base: `${bottomOffset + 5}rem`, lg: 20 }}
+            data-testid="feedback-widget-modal"
           >
             <Box
               w="min(300px, calc(100% - 1rem))"
diff --git a/src/components/Quiz/QuizWidget/QuizButtonGroup.tsx b/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>
diff --git a/src/components/Quiz/QuizWidget/QuizContent.tsx b/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}
diff --git a/src/components/Quiz/QuizWidget/QuizRadioGroup.tsx b/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} />
     </>
   )
 }
diff --git a/src/components/Quiz/QuizWidget/QuizWidget.stories.tsx b/src/components/Quiz/QuizWidget/QuizWidget.stories.tsx
@@ -0,0 +1,144 @@
+import { getI18n, useTranslation } from "react-i18next"
+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,
+  argTypes: {
+    quizKey: {
+      table: {
+        disable: true,
+      },
+    },
+  },
+} satisfies Meta<QuizWidgetType>
+
+export default meta
+
+export const QuizWidgetAllCorrect: StoryObj<typeof meta> = {
+  args: {
+    quizKey: "layer-2",
+  },
+  render: (args) => <StandaloneQuizWidget {...args} />,
+
+  play: async ({ canvasElement, step, args }) => {
+    const { t } = getI18n()
+
+    const translatedQuizKey = t(args.quizKey, { ns: "common" })
+    const translatedPassedQuiz = t("passed", { ns: "learn-quizzes" })
+
+    const canvas = within(canvasElement)
+
+    const quizWidget = canvas.getByTestId("quiz-widget")
+    await expect(quizWidget).toBeInTheDocument()
+
+    await waitFor(() =>
+      expect(canvas.getByTestId("answer-status-null")).toHaveTextContent(
+        translatedQuizKey
+      )
+    )
+
+    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(translatedPassedQuiz)
+    })
+  },
+}
+
+export const QuizWidgetAllIncorrect: 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()
+
+    await waitFor(() =>
+      expect(canvas.getByTestId("check-answer-button")).toBeDisabled()
+    )
+
+    await step("Answer some questions incorrectly", 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-incorrect")
+        ).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 failed results page", async () => {
+      await expect(canvasElement).toHaveTextContent("Your results")
+    })
+  },
+}
diff --git a/src/components/Quiz/QuizWidget/index.tsx b/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"
diff --git a/src/components/Tooltip/Tooltip.stories.tsx b/src/components/Tooltip/Tooltip.stories.tsx
diff --git a/src/components/Tooltip/index.tsx b/src/components/Tooltip/index.tsx
diff --git a/tsconfig.json b/tsconfig.json
diff --git a/yarn.lock b/yarn.lock

Original file line number	Diff line number	Diff line change
`@@ -53,6 +53,7 @@ const FeedbackWidget = () => {`
`53`	`53`	`boxShadow="tableItemBox"`
`54`	`54`	`me={24}`
`55`	`55`	bottom={{ base: `${bottomOffset + 5}rem`, lg: 20 }}
	`56`	`+ data-testid="feedback-widget-modal"`
`56`	`57`	`>`
`57`	`58`	`<Box`
`58`	`59`	`w="min(300px, calc(100% - 1rem))"`