Added tests, moved logic to utils folder, fixed prop injection bug, a…

…nd refactored code

packages/perseus-editor/src/__stories__/editor-page.stories.tsx

@@ -4,12 +4,50 @@ import {registerAllWidgetsAndEditorsForTesting} from "../util/register-all-widge
 
 import EditorPageWithStorybookPreview from "./editor-page-with-storybook-preview";
 
+import type {InputNumberWidget, PerseusRenderer} from "@khanacademy/perseus";
+
 registerAllWidgetsAndEditorsForTesting(); // SIDE_EFFECTY!!!! :cry:
 
 export default {
     title: "PerseusEditor/EditorPage",
 };
 
+const question1: PerseusRenderer = {
+    content:
+        "Denis baked a peach pie and cut it into $3$ equal-sized pieces.  Denis's dad eats $1$ section of the pie.  \n\n**What fraction of the pie did Denis's dad eat?**  \n![](https://ka-perseus-graphie.s3.amazonaws.com/74a2b7583a2c26ebfb3ad714e29867541253fc97.png)    \n[[\u2603 input-number 1]]  \n\n\n\n",
+    images: {
+        "https://ka-perseus-graphie.s3.amazonaws.com/74a2b7583a2c26ebfb3ad714e29867541253fc97.png":
+            {
+                width: 200,
+                height: 200,
+            },
+    },
+    widgets: {
+        "input-number 1": {
+            version: {
+                major: 0,
+                minor: 0,
+            },
+            type: "input-number",
+            graded: true,
+            alignment: "default",
+            options: {
+                maxError: 0.1,
+                inexact: false,
+                value: 0.5,
+                simplify: "optional",
+                answerType: "rational",
+                size: "normal",
+            },
+        } as InputNumberWidget,
+    },
+};
+
 export const Demo = (): React.ReactElement => {
     return <EditorPageWithStorybookPreview />;
 };
+
+// Used to test that Input Numbers are being automatically converted to Numeric Inputs
+export const InputNumberDemo = (): React.ReactElement => {
+    return <EditorPageWithStorybookPreview question={question1} />;
+};

packages/perseus-editor/src/editor-page.tsx

@@ -6,6 +6,7 @@ import JsonEditor from "./components/json-editor";
 import ViewportResizer from "./components/viewport-resizer";
 import CombinedHintsEditor from "./hint-editor";
 import ItemEditor from "./item-editor";
+import {convertDeprecatedWidgets} from "./util/modernize-widgets-utils";
 
 import type {
     APIOptions,
@@ -16,6 +17,7 @@ import type {
     ImageUploader,
     Version,
     PerseusItem,
+    PerseusRenderer,
 } from "@khanacademy/perseus";
 import type {KEScore} from "@khanacademy/perseus-core";
 
@@ -58,6 +60,7 @@ type Props = {
 
 type State = {
     json: PerseusItem;
+    question: PerseusRenderer;
     gradeMessage: string;
     wasAnswered: boolean;
     highlightLint: boolean;
@@ -84,15 +87,21 @@ class EditorPage extends React.Component<Props, State> {
     constructor(props: Props) {
         super(props);
 
+        // Convert any widgets that need to be converted to newer widget types
+        let convertedQuestionJson: PerseusRenderer = props.question;
+        if (props.question) {
+            convertedQuestionJson = convertDeprecatedWidgets(props.question);
+        }
+
+        const json = {
+            ..._.pick(this.props, "answerArea", "hints", "itemDataVersion"),
+            question: convertedQuestionJson,
+        };
+
         this.state = {
             // @ts-expect-error - TS2322 - Type 'Pick<Readonly<Props> & Readonly<{ children?: ReactNode; }>, "hints" | "question" | "answerArea" | "itemDataVersion">' is not assignable to type 'PerseusJson'.
-            json: _.pick(
-                this.props,
-                "question",
-                "answerArea",
-                "hints",
-                "itemDataVersion",
-            ),
+            json: json,
+            question: json.question,
             gradeMessage: "",
             wasAnswered: false,
             highlightLint: true,
@@ -296,7 +305,7 @@ class EditorPage extends React.Component<Props, State> {
                     <ItemEditor
                         ref={this.itemEditor}
                         itemId={this.props.itemId}
-                        question={this.props.question}
+                        question={convertDeprecatedWidgets(this.props.question)}
                         answerArea={this.props.answerArea}
                         imageUploader={this.props.imageUploader}
                         onChange={this.handleChange}

packages/perseus-editor/src/util/modernize-widgets-utils.test.ts

@@ -0,0 +1,53 @@
+import {convertDeprecatedWidgets} from "./modernize-widgets-utils";
+import {
+    inputNumberNested,
+    inputNumberNestedWithNumeric,
+    inputNumberSimple,
+    numericInputNested,
+    numericInputNestedWithNumeric,
+    numericInputSimple,
+} from "./modernize-widgets-utils.testdata";
+
+describe("convertDeprecatedWidgets", () => {
+    it("should be able to convert a simple input number widget into numeric input", () => {
+        // Arrange
+        const input = inputNumberSimple;
+        const expected = numericInputSimple;
+
+        // Act
+        const result = convertDeprecatedWidgets(input);
+
+        // Assert
+        expect(result.content).toEqual(expected.content);
+        expect(result.widgets).toEqual(expected.widgets);
+    });
+
+    it("should be able to convert a nested input number widget", () => {
+        // This test has the inputNumber widget nested within a gradedGroup widget
+
+        // Arrange
+        const input = inputNumberNested;
+        const expected = numericInputNested;
+
+        // Act
+        const result = convertDeprecatedWidgets(input);
+
+        // Assert
+        expect(result).toEqual(expected);
+    });
+
+    it("should be able to continue id numbering even with nested widgets", () => {
+        // This test has 2 pre-existing numericInput widgets, with one of them being nested
+        // within a graded group. As a result, the inputNumber widget should become "numeric-input 3".
+
+        // Arrange
+        const input = inputNumberNestedWithNumeric;
+        const expected = numericInputNestedWithNumeric;
+
+        // Act
+        const result = convertDeprecatedWidgets(input);
+
+        // Assert
+        expect(result).toEqual(expected);
+    });
+});