[Color Sync] Add more regression stories for the Definition widget

.changeset/chatty-feet-teach.md

@@ -0,0 +1,5 @@
+---
+"@khanacademy/perseus": patch
+---
+
+[Color Sync] Add more regression stories for the Definition widget

packages/perseus/src/__docs__/hints-renderer-initial-state-regression.stories.tsx

@@ -13,6 +13,8 @@ import {
     generateTestPerseusRenderer,
     generateImageWidget,
     generateImageOptions,
+    generateDefinitionOptions,
+    generateDefinitionWidget,
 } from "@khanacademy/perseus-core";
 import {View} from "@khanacademy/wonder-blocks-core";
 import React from "react";
@@ -188,3 +190,27 @@ export const ExplanationWidgetInHint: Story = {
         hints: [{...ipsumExample, replace: false}],
     },
 };
+
+export const DefinitionWidgetInHint: Story = {
+    decorators: [bibliotronExerciseDecorator],
+    args: {
+        dependencies: storybookDependenciesV2,
+        hints: [
+            {
+                ...generateTestPerseusRenderer({
+                    content:
+                        "During World War II, in August of 1943, the [[☃ definition 1]] launched a massive bombing campaign on Milan and its outskirts.",
+                    widgets: {
+                        "definition 1": generateDefinitionWidget({
+                            options: generateDefinitionOptions({
+                                definition:
+                                    "The Allies, led by the United Kingdom, the United States, and the Soviet Union, were the group of countries who opposed the Axis powers (Germany, Japan, and Italy) during World War II.",
+                                togglePrompt: "Allies",
+                            }),
+                        }),
+                    },
+                }),
+            },
+        ],
+    },
+};

packages/perseus/src/__docs__/hints-renderer-interactions-regression.stories.tsx

@@ -1,3 +1,8 @@
+import {
+    generateDefinitionOptions,
+    generateDefinitionWidget,
+    generateTestPerseusRenderer,
+} from "@khanacademy/perseus-core";
 import {View} from "@khanacademy/wonder-blocks-core";
 import React from "react";
 
@@ -55,3 +60,33 @@ export const ExplanationWidgetInHint: Story = {
         await userEvent.click(explanationTrigger);
     },
 };
+
+export const DefinitionWidgetInHint: Story = {
+    decorators: [bibliotronExerciseDecorator],
+    args: {
+        dependencies: storybookDependenciesV2,
+        hints: [
+            {
+                ...generateTestPerseusRenderer({
+                    content:
+                        "During World War II, in August of 1943, the [[☃ definition 1]] launched a massive bombing campaign on Milan and its outskirts.",
+                    widgets: {
+                        "definition 1": generateDefinitionWidget({
+                            options: generateDefinitionOptions({
+                                definition:
+                                    "The Allies, led by the United Kingdom, the United States, and the Soviet Union, were the group of countries who opposed the Axis powers (Germany, Japan, and Italy) during World War II.",
+                                togglePrompt: "Allies",
+                            }),
+                        }),
+                    },
+                }),
+            },
+        ],
+    },
+    play: async ({canvas, userEvent}) => {
+        const definitionTrigger = canvas.getByRole("button", {
+            name: "Definition of: Allies",
+        });
+        await userEvent.click(definitionTrigger);
+    },
+};

packages/perseus/src/widgets/__docs__/nested-widgets-initial-state-regression.stories.tsx

@@ -1,9 +1,18 @@
+import {
+    type GradedGroupWidget,
+    type PerseusExplanationWidgetOptions,
+} from "@khanacademy/perseus-core";
+
 import {themeModes} from "../../../../../.storybook/modes";
+import {explanationRendererDecorator} from "../explanation/__docs__/explanation-renderer-decorator";
 
 import {articleRendererDecorator} from "./nested-widgets-renderer-decorator";
-import {gradedGroupWithRadioAndExplanation} from "./nested-widgets.testdata";
+import {
+    explanationWithDefinitionOptions,
+    gradedGroupWithRadioAndDefinition,
+    gradedGroupWithRadioAndExplanation,
+} from "./nested-widgets.testdata";
 
-import type {GradedGroupWidget} from "@khanacademy/perseus-core";
 import type {Meta, StoryObj} from "@storybook/react-vite";
 
 const meta: Meta = {
@@ -33,3 +42,17 @@ export const GradedGroupWithRadioAndExplanation: GradedGroupStory = {
         question: gradedGroupWithRadioAndExplanation,
     },
 };
+
+export const GradedGroupWithRadioAndDefinition: GradedGroupStory = {
+    decorators: [articleRendererDecorator],
+    parameters: {
+        question: gradedGroupWithRadioAndDefinition,
+    },
+};
+
+type ExplanationStory = StoryObj<PerseusExplanationWidgetOptions>;
+
+export const ExplanationWithDefinition: ExplanationStory = {
+    decorators: [articleRendererDecorator, explanationRendererDecorator],
+    args: explanationWithDefinitionOptions,
+};

packages/perseus/src/widgets/__docs__/nested-widgets-interactions-regression.stories.tsx

@@ -1,17 +1,21 @@
+import {
+    type GradedGroupWidget,
+    type PerseusExplanationWidgetOptions,
+} from "@khanacademy/perseus-core";
+
 import {themeModes} from "../../../../../.storybook/modes";
 import {explanationRendererDecorator} from "../explanation/__docs__/explanation-renderer-decorator";
 
 import {articleRendererDecorator} from "./nested-widgets-renderer-decorator";
 import {
+    definitionInContentAndExplanation,
+    explanationWithDefinitionOptions,
+    gradedGroupWithRadioAndDefinition,
     gradedGroupWithRadioAndExplanation,
     imageInContent,
     videoInContent,
 } from "./nested-widgets.testdata";
 
-import type {
-    GradedGroupWidget,
-    PerseusExplanationWidgetOptions,
-} from "@khanacademy/perseus-core";
 import type {Meta, StoryObj} from "@storybook/react-vite";
 
 const meta: Meta = {
@@ -47,6 +51,19 @@ export const GradedGroupExplanationClicked: GradedGroupStory = {
     },
 };
 
+export const GradedGroupDefinitionClicked: GradedGroupStory = {
+    decorators: [articleRendererDecorator],
+    parameters: {
+        question: gradedGroupWithRadioAndDefinition,
+    },
+    play: async ({canvas, userEvent}) => {
+        const definitionTrigger = canvas.getByRole("button", {
+            name: "Definition of: Jean-Luc Picard's",
+        });
+        await userEvent.click(definitionTrigger);
+    },
+};
+
 const videoExample = videoInContent.widgets["explanation 1"].options;
 
 export const VideoInContent: ExplanationStory = {
@@ -88,3 +105,42 @@ export const ImageInContent: ExplanationStory = {
         await userEvent.click(explanationTrigger);
     },
 };
+
+export const DefinitionInContentAndExplanation: StoryObj = {
+    decorators: [articleRendererDecorator],
+    parameters: {
+        question: definitionInContentAndExplanation,
+    },
+    play: async ({canvas, userEvent}) => {
+        // Reveal the explanation, then open the definition nested inside it.
+        const explanationTrigger = canvas.getByRole("button", {
+            name: "Show explanation",
+        });
+        await userEvent.click(explanationTrigger);
+        const explanationDefinitionTrigger = canvas.getByRole("button", {
+            name: "Definition of: Axis powers",
+        });
+        await userEvent.click(explanationDefinitionTrigger);
+
+        // Open the definition that lives in the main article text.
+        const contentDefinitionTrigger = canvas.getByRole("button", {
+            name: "Definition of: Allies",
+        });
+        await userEvent.click(contentDefinitionTrigger);
+    },
+};
+
+export const ExplanationWithDefinition: ExplanationStory = {
+    decorators: [articleRendererDecorator, explanationRendererDecorator],
+    args: explanationWithDefinitionOptions,
+    play: async ({canvas, userEvent}) => {
+        const explanationTrigger = canvas.getByRole("button", {
+            name: "Explain",
+        });
+        await userEvent.click(explanationTrigger);
+        const definitionTrigger = canvas.getByRole("button", {
+            name: "Definition of: Allies",
+        });
+        await userEvent.click(definitionTrigger);
+    },
+};

packages/perseus/src/widgets/__docs__/nested-widgets.testdata.ts

@@ -1,4 +1,6 @@
 import {
+    generateDefinitionOptions,
+    generateDefinitionWidget,
     generateExplanationOptions,
     generateExplanationWidget,
     generateGradedGroupOptions,
@@ -9,7 +11,11 @@ import {
     generateRadioWidget,
     generateTestPerseusRenderer,
     generateVideoWidget,
-    type PerseusRenderer,
+} from "@khanacademy/perseus-core";
+
+import type {
+    PerseusRenderer,
+    PerseusExplanationWidgetOptions,
 } from "@khanacademy/perseus-core";
 
 export const gradedGroupWithRadioAndExplanation: PerseusRenderer =
@@ -57,6 +63,50 @@ export const gradedGroupWithRadioAndExplanation: PerseusRenderer =
         },
     });
 
+export const gradedGroupWithRadioAndDefinition: PerseusRenderer =
+    generateTestPerseusRenderer({
+        content: "[[☃ graded-group 1]]",
+        widgets: {
+            "graded-group 1": generateGradedGroupWidget({
+                options: generateGradedGroupOptions({
+                    title: "Jean-Luc Picard's first command",
+                    content:
+                        "What ship was [[☃ definition 1]] first command?\n\n[[☃ radio 1]]",
+                    widgets: {
+                        "radio 1": generateRadioWidget({
+                            options: {
+                                choices: [
+                                    generateRadioChoice(
+                                        "USS Voyager (NCC-74656)",
+                                    ),
+                                    generateRadioChoice(
+                                        "USS Enterprise (NCC-1701-D)",
+                                    ),
+                                    generateRadioChoice(
+                                        "USS Enterprise (NX-01)",
+                                    ),
+                                    generateRadioChoice(
+                                        "USS Stargazer (NCC-2893)",
+                                        {
+                                            correct: true,
+                                        },
+                                    ),
+                                ],
+                            },
+                        }),
+                        "definition 1": generateDefinitionWidget({
+                            options: generateDefinitionOptions({
+                                definition:
+                                    "Jean-Luc Picard is the esteemed captain of the USS Enterprise.",
+                                togglePrompt: "Jean-Luc Picard's",
+                            }),
+                        }),
+                    },
+                }),
+            }),
+        },
+    });
+
 export const videoInContent: PerseusRenderer = generateTestPerseusRenderer({
     content: `Warp energy efficiency has improved significantly!
                 A simple remodulization of the warp field was all that was needed.
@@ -104,3 +154,50 @@ export const imageInContent: PerseusRenderer = generateTestPerseusRenderer({
         }),
     },
 });
+
+export const definitionInContentAndExplanation: PerseusRenderer =
+    generateTestPerseusRenderer({
+        content:
+            "During World War II, the [[☃ definition 1]] opposed the Axis powers.\n\n[[☃ explanation 1]]",
+        widgets: {
+            "definition 1": generateDefinitionWidget({
+                options: generateDefinitionOptions({
+                    definition:
+                        "The Allies, led by the United Kingdom, the United States, and the Soviet Union, were the group of countries who opposed the Axis powers (Germany, Japan, and Italy) during World War II.",
+                    togglePrompt: "Allies",
+                }),
+            }),
+            "explanation 1": generateExplanationWidget({
+                options: generateExplanationOptions({
+                    showPrompt: "Show explanation",
+                    hidePrompt: "Hide explanation",
+                    explanation:
+                        "The [[☃ definition 2]] were defeated in 1945.",
+                    widgets: {
+                        "definition 2": generateDefinitionWidget({
+                            options: generateDefinitionOptions({
+                                definition:
+                                    "The Axis powers were Germany, Japan, and Italy, the group of countries who opposed the Allies during World War II.",
+                                togglePrompt: "Axis powers",
+                            }),
+                        }),
+                    },
+                }),
+            }),
+        },
+    });
+
+export const explanationWithDefinitionOptions: PerseusExplanationWidgetOptions =
+    generateExplanationOptions({
+        explanation:
+            "During World War II, in August of 1943, the [[☃ definition 1]] launched a massive bombing campaign on Milan and its outskirts.",
+        widgets: {
+            "definition 1": generateDefinitionWidget({
+                options: generateDefinitionOptions({
+                    definition:
+                        "The Allies, led by the United Kingdom, the United States, and the Soviet Union, were the group of countries who opposed the Axis powers (Germany, Japan, and Italy) during World War II.",
+                    togglePrompt: "Allies",
+                }),
+            }),
+        },
+    });

packages/perseus/src/widgets/definition/__docs__/definition-initial-state-regression.stories.tsx

@@ -18,7 +18,7 @@ type Story = StoryObj<typeof ServerItemRendererWithDebugUI>;
 export default {
     title: "Widgets/Definition/Visual Regression Tests/Initial State",
     component: ServerItemRendererWithDebugUI,
-    tags: ["!dev", "!manifest"],
+    tags: ["!autodocs", "!manifest"],
     parameters: {
         docs: {
             description: {