[LEMS-2868] Answerless ServerItemRendererWithDebugUI

.changeset/rich-moons-hear.md

@@ -0,0 +1,5 @@
+---
+"@khanacademy/perseus": patch
+---
+
+Update ServerItemRendererWithDebugUI to optionally use answerless data for rendering

packages/perseus/src/widgets/expression/expression.stories.tsx

@@ -23,12 +23,14 @@ type WrappedKeypadContextProps = {
     item: PerseusItem;
     customKeypad: boolean;
     isMobile?: boolean;
+    answerless?: boolean;
 };
 
 const WrappedKeypadContext = ({
     item,
     customKeypad,
     isMobile = false,
+    answerless = false,
 }: WrappedKeypadContextProps) => {
     return (
         <TestKeypadContextWrapper>
@@ -37,6 +39,7 @@ const WrappedKeypadContext = ({
                     return (
                         <ServerItemRendererWithDebugUI
                             item={item}
+                            answerless={answerless}
                             keypadElement={keypadElement}
                             // Hardcoding the V2 Keypad to true as the Storybook Args
                             // were not working.
@@ -122,6 +125,16 @@ export const ExpressionItem3 = (args: StoryArgs): React.ReactElement => {
     );
 };
 
+export const AnswerlessExpression = (args: StoryArgs): React.ReactElement => {
+    return (
+        <WrappedKeypadContext
+            item={expressionItem3}
+            customKeypad={false}
+            answerless
+        />
+    );
+};
+
 export default {
     title: "Perseus/Widgets/Expression",
     argTypes: {customKeypad: {control: "boolean"}},

packages/perseus/src/widgets/expression/expression.testdata.ts

@@ -1,14 +1,14 @@
 import {
     ItemExtras,
     type PerseusExpressionWidgetOptions,
-    type Version,
     type PerseusItem,
     type PerseusAnswerArea,
+    expressionLogic,
 } from "@khanacademy/perseus-core";
 
 const createItemJson = (
     widgetOptions: PerseusExpressionWidgetOptions,
-    version: Version,
+    widgetVersion = expressionLogic.version,
 ): PerseusItem => {
     return {
         question: {
@@ -19,7 +19,7 @@ const createItemJson = (
                     type: "expression",
                     graded: true,
                     options: widgetOptions,
-                    version: version,
+                    version: widgetVersion,
                 },
             },
         },
@@ -36,62 +36,55 @@ const createItemJson = (
 };
 
 export const expressionItemWithAnswer = (answer: string): PerseusItem => {
-    return createItemJson(
-        {
-            answerForms: [
-                {
-                    considered: "correct",
-                    form: false,
-                    simplify: false,
-                    value: answer,
-                },
-            ],
-            times: false,
-            buttonSets: ["basic"],
-            functions: [],
-            buttonsVisible: "always",
-        },
-        {major: 1, minor: 0},
-    );
-};
-
-export const expressionItemWithLabels = createItemJson(
-    {
-        answerForms: [],
-        times: false,
-        buttonSets: ["basic"],
-        functions: [],
-        buttonsVisible: "always",
-        ariaLabel: "Test aria label",
-        visibleLabel: "Test visible label",
-    },
-    {major: 1, minor: 0},
-);
-
-export const expressionItem2: PerseusItem = createItemJson(
-    {
+    return createItemJson({
         answerForms: [
             {
                 considered: "correct",
                 form: false,
                 simplify: false,
-                value: "123-x",
-            },
-            {
-                considered: "correct",
-                form: false,
-                simplify: false,
-                value: "x-123",
+                value: answer,
             },
         ],
         times: false,
         buttonSets: ["basic"],
-        functions: ["f", "g", "h"],
+        functions: [],
         buttonsVisible: "always",
-        extraKeys: ["x"],
-    },
-    {major: 1, minor: 0},
-);
+        extraKeys: [],
+    });
+};
+
+export const expressionItemWithLabels = createItemJson({
+    answerForms: [],
+    times: false,
+    buttonSets: ["basic"],
+    functions: [],
+    buttonsVisible: "always",
+    ariaLabel: "Test aria label",
+    visibleLabel: "Test visible label",
+    extraKeys: [],
+});
+
+export const expressionItem2: PerseusItem = createItemJson({
+    answerForms: [
+        {
+            considered: "correct",
+            form: false,
+            simplify: false,
+            value: "123-x",
+        },
+        {
+            considered: "correct",
+            form: false,
+            simplify: false,
+            value: "x-123",
+        },
+    ],
+    times: false,
+    buttonSets: ["basic"],
+    functions: ["f", "g", "h"],
+    buttonsVisible: "always",
+    extraKeys: ["x"],
+});
 
 const expressionItem3Options: PerseusExpressionWidgetOptions = {
     answerForms: [
@@ -126,12 +119,9 @@ const expressionItem3Options: PerseusExpressionWidgetOptions = {
     buttonsVisible: "focused",
     visibleLabel: "number of cm",
     ariaLabel: "number of centimeters",
+    extraKeys: ["z", "a"],
 };
 
 export const expressionItem3: PerseusItem = createItemJson(
     expressionItem3Options,
-    {
-        major: 1,
-        minor: 0,
-    },
 );

testing/server-item-renderer-with-debug-ui.tsx

@@ -3,6 +3,12 @@ import {View} from "@khanacademy/wonder-blocks-core";
 import {Strut} from "@khanacademy/wonder-blocks-layout";
 import * as React from "react";
 
+import {
+    type PerseusItem,
+    type KEScore,
+    type PerseusRenderer,
+    splitPerseusItem,
+} from "@khanacademy/perseus-core";
 import {scorePerseusItem} from "@khanacademy/perseus-score";
 
 import * as Perseus from "../packages/perseus/src/index";
@@ -14,18 +20,19 @@ import {storybookDependenciesV2} from "./test-dependencies";
 
 import type {APIOptions} from "../packages/perseus/src/types";
 import type {KeypadAPI} from "@khanacademy/math-input";
-import type {PerseusItem, KEScore} from "@khanacademy/perseus-core";
 
 type Props = {
     item: PerseusItem;
     apiOptions?: APIOptions;
     keypadElement?: KeypadAPI | null | undefined;
+    answerless?: boolean;
 };
 
 export const ServerItemRendererWithDebugUI = ({
     item,
     apiOptions,
     keypadElement,
+    answerless = false,
 }: Props): React.ReactElement => {
     const ref = React.useRef<Perseus.ServerItemRendererComponent>(null);
     const [state, setState] = React.useState<KEScore | null | undefined>(null);
@@ -51,6 +58,15 @@ export const ServerItemRendererWithDebugUI = ({
         );
     };
 
+    const renderedQuestion: PerseusRenderer = answerless
+        ? splitPerseusItem(item.question)
+        : item.question;
+
+    const renderedItem: PerseusItem = {
+        ...item,
+        question: renderedQuestion,
+    };
+
     return (
         <SideBySide
             rendererTitle="Renderer"
@@ -60,7 +76,7 @@ export const ServerItemRendererWithDebugUI = ({
                         ref={ref}
                         problemNum={0}
                         apiOptions={options}
-                        item={item}
+                        item={renderedItem}
                         dependencies={storybookDependenciesV2}
                         keypadElement={keypadElement}
                     />
@@ -87,7 +103,7 @@ export const ServerItemRendererWithDebugUI = ({
                     <KEScoreUI score={state} />
                 </>
             }
-            jsonObject={item}
+            jsonObject={renderedItem}
         />
     );
 };