Mock Widget for cleaning up Tests (#2072)

## Summary:
This work was done as part of the Numeric Input project. 

This PR introduces a new Mock Widget to be used for any tests that doesn't require testing the capabilities of a specific widget. I have updated as many tests and/or testdatas as I could find, except for a few key situations:

- The test requires that we test a specific widget, such as extract-perseus-data. (Although I would like to recommend that we break up and move these tests into the individual widget tests as all we need to do is import a single function.) 
- The testdata is being used for storybook

I have also updated as many occurrences of any remaining uses of `input-number `in our tests to `numeric-input`, in order to help smooth the path forward for the eventual return to the Input Number Conversion project.   

I have opted not to include the widget in our extra-widgets / general registration for now as it would require that I also create an editor for it, but a caveat of this approach means that this widget is not accessible for Webapp tests. I would be happy to hear any thoughts regarding this approach, as I wasn't sure if I should be globally registering this widget. 

Issue: LEMS-2615

## Test plan:
- ensure all tests pass

Author: SonicScrewdriver

Reviewers: SonicScrewdriver, jeremywiebe, mark-fitzgerald

Required Reviewers:

Approved By: jeremywiebe, mark-fitzgerald

Checks: ✅ Publish npm snapshot (ubuntu-latest, 20.x), ✅ Check builds for changes in size (ubuntu-latest, 20.x), ✅ Lint, Typecheck, Format, and Test (ubuntu-latest, 20.x), ✅ Cypress (ubuntu-latest, 20.x), ✅ Check for .changeset entries for all changed files (ubuntu-latest, 20.x), ✅ Publish Storybook to Chromatic (ubuntu-latest, 20.x)

Pull Request URL: #2072

.changeset/lucky-poets-deny.md

@@ -0,0 +1,8 @@
+---
+"@khanacademy/perseus": patch
+"@khanacademy/perseus-core": patch
+"@khanacademy/perseus-editor": patch
+"@khanacademy/pure-markdown": patch
+---
+
+The creation of a new Mock Widget for tests.

packages/perseus-core/src/data-schema.ts

@@ -100,6 +100,7 @@ export interface PerseusWidgetTypes {
     matcher: MatcherWidget;
     matrix: MatrixWidget;
     measurer: MeasurerWidget;
+    "mock-widget": MockWidget;
     "molecule-renderer": MoleculeRendererWidget;
     "number-line": NumberLineWidget;
     "numeric-input": NumericInputWidget;
@@ -303,6 +304,8 @@ export type MatrixWidget = WidgetOptions<'matrix', PerseusMatrixWidgetOptions>;
 // prettier-ignore
 export type MeasurerWidget = WidgetOptions<'measurer', PerseusMeasurerWidgetOptions>;
 // prettier-ignore
+export type MockWidget = WidgetOptions<'mock-widget', MockWidgetOptions>;
+// prettier-ignore
 export type NumberLineWidget = WidgetOptions<'number-line', PerseusNumberLineWidgetOptions>;
 // prettier-ignore
 export type NumericInputWidget = WidgetOptions<'numeric-input', PerseusNumericInputWidgetOptions>;
@@ -355,6 +358,7 @@ export type PerseusWidget =
     | MatcherWidget
     | MatrixWidget
     | MeasurerWidget
+    | MockWidget
     | MoleculeRendererWidget
     | NumberLineWidget
     | NumericInputWidget
@@ -1671,6 +1675,11 @@ export type PerseusVideoWidgetOptions = {
     static?: boolean;
 };
 
+export type MockWidgetOptions = {
+    static?: boolean;
+    value: string;
+};
+
 export type PerseusInputNumberWidgetOptions = {
     answerType?:
         | "number"

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

@@ -5,7 +5,7 @@ import * as React from "react";
 
 import {Editor} from "..";
 import SideBySide from "../../../../testing/side-by-side";
-import {question1} from "../__testdata__/input-number.testdata";
+import {question1} from "../__testdata__/numeric-input.testdata";
 import {registerAllWidgetsAndEditorsForTesting} from "../util/register-all-widgets-and-editors-for-testing";
 
 import {apiOptionsWithDefaults} from "./flags-for-api-options";

packages/perseus-editor/src/__testdata__/numeric-input.testdata.ts

@@ -0,0 +1,34 @@
+import type {PerseusRenderer} from "@khanacademy/perseus-core";
+
+export const question1: PerseusRenderer = {
+    content:
+        "A sequence is defined recursively as follows:\n\n\n$\\qquad\\displaystyle{{a}_{n}}=-\\frac{1}{a_{n-1}-1} \n~~~~~~\\text{ with}\\qquad\\displaystyle{{a}_{0}}=\\frac{1}{2}\\,$\n\n\nFind the term $a_3$ in the sequence.\n\n[[\u2603 numeric-input 1]]",
+    images: {},
+    widgets: {
+        "numeric-input 1": {
+            graded: true,
+            version: {
+                major: 0,
+                minor: 0,
+            },
+            static: false,
+            type: "numeric-input",
+            options: {
+                coefficient: false,
+                static: false,
+                answers: [
+                    {
+                        status: "correct",
+                        maxError: null,
+                        strict: false,
+                        value: 0.5,
+                        simplify: "required",
+                        message: "",
+                    },
+                ],
+                labelText: "What's the answer?",
+                size: "normal",
+            },
+        },
+    },
+};

packages/perseus-editor/src/__tests__/traversal.test.ts

@@ -35,21 +35,15 @@ const missingOptions = {
 const clonedMissingOptions = JSON.parse(JSON.stringify(missingOptions));
 
 const sampleOptions = {
-    content: "[[☃ input-number 1]]",
+    content: "[[☃ mock-widget 1]]",
     images: {},
     widgets: {
-        "input-number 1": {
-            type: "input-number",
+        "mock-widget 1": {
+            type: "mock-widget",
             graded: true,
             static: false,
             options: {
                 value: "0",
-                simplify: "required",
-                size: "normal",
-                inexact: false,
-                maxError: 0.1,
-                answerType: "number",
-                rightAlign: false,
             },
             version: {
                 major: 0,
@@ -258,7 +252,7 @@ describe("Traversal", () => {
             readContent = content;
         });
 
-        expect(readContent).toBe("[[☃ input-number 1]]");
+        expect(readContent).toBe("[[☃ mock-widget 1]]");
         assertNonMutative();
     });
 
@@ -280,7 +274,7 @@ describe("Traversal", () => {
             widgetMap[widgetInfo.type] = (widgetMap[widgetInfo.type] || 0) + 1;
         });
         expect(widgetMap).toEqual({
-            "input-number": 1,
+            "mock-widget": 1,
         });
         assertNonMutative();
     });
@@ -294,9 +288,9 @@ describe("Traversal", () => {
         expect(newOptions).toEqual(
             _.extend({}, sampleOptions, {
                 widgets: {
-                    "input-number 1": _.extend(
+                    "mock-widget 1": _.extend(
                         {},
-                        sampleOptions.widgets["input-number 1"],
+                        sampleOptions.widgets["mock-widget 1"],
                         {graded: false},
                     ),
                 },
@@ -311,9 +305,7 @@ describe("Traversal", () => {
                 content: `${options.content}\n\nnew content!`,
             });
         });
-        expect(newOptions.content).toBe(
-            "[[☃ input-number 1]]\n\nnew content!",
-        );
+        expect(newOptions.content).toBe("[[☃ mock-widget 1]]\n\nnew content!");
         expect(newOptions.widgets).toEqual(sampleOptions.widgets);
         assertNonMutative();
     });

packages/perseus-editor/src/editor.tsx

@@ -27,7 +27,7 @@ import TexErrorView from "./tex-error-view";
 import type {ChangeHandler, ImageUploader} from "@khanacademy/perseus";
 import type {PerseusWidget, PerseusWidgetsMap} from "@khanacademy/perseus-core";
 
-// like [[snowman input-number 1]]
+// like [[snowman numeric-input 1]]
 const widgetPlaceholder = "[[\u2603 {id}]]";
 const widgetRegExp = "(\\[\\[\u2603 {id}\\]\\])";
 const rWidgetSplit = new RegExp(

packages/perseus/src/__stories__/server-item-renderer.stories.tsx

@@ -4,11 +4,11 @@ import {useState} from "react";
 import {ServerItemRendererWithDebugUI} from "../../../../testing/server-item-renderer-with-debug-ui";
 import {storybookDependenciesV2} from "../../../../testing/test-dependencies";
 import {
-    itemWithInput,
+    itemWithNumericInput,
     itemWithLintingError,
     labelImageItem,
     itemWithImages,
-    itemWithMultipleInputNumbers,
+    itemWithMultipleNumericInputs,
     itemWithRadioAndExpressionWidgets,
 } from "../__testdata__/server-item-renderer.testdata";
 import {ServerItemRenderer} from "../server-item-renderer";
@@ -23,8 +23,8 @@ export default {
     title: "Perseus/Renderers/Server Item Renderer",
 } as Story;
 
-export const InputNumberItem = (args: StoryArgs): React.ReactElement => {
-    return <ServerItemRendererWithDebugUI item={itemWithInput} />;
+export const NumericInputItem = (args: StoryArgs): React.ReactElement => {
+    return <ServerItemRendererWithDebugUI item={itemWithNumericInput} />;
 };
 
 export const LabelImageItem = (args: StoryArgs): React.ReactElement => {
@@ -51,12 +51,12 @@ export const WithLintingError = (args: StoryArgs): React.ReactElement => {
     );
 };
 
-export const InputNumberWithInteractionCallback = (
+export const NumericInputWithInteractionCallback = (
     args: StoryArgs,
 ): React.ReactElement => {
     return (
         <ServerItemRendererWithDebugUI
-            item={itemWithMultipleInputNumbers}
+            item={itemWithMultipleNumericInputs}
             apiOptions={{
                 interactionCallback: (data) => {
                     // We are logging the interaction callback data to the console

packages/perseus/src/__testdata__/renderer.testdata.ts

@@ -2,7 +2,7 @@ import type {RenderProps} from "../widgets/radio";
 import type {
     DropdownWidget,
     ImageWidget,
-    InputNumberWidget,
+    MockWidget,
     PerseusRenderer,
 } from "@khanacademy/perseus-core";
 
@@ -49,21 +49,16 @@ export const imageWidget: ImageWidget = {
     version: {major: 0, minor: 0},
 };
 
-export const inputNumberWidget: InputNumberWidget = {
+export const mockWidget: MockWidget = {
     version: {
         major: 0,
         minor: 0,
     },
-    type: "input-number",
+    type: "mock-widget",
     graded: true,
     alignment: "default",
     options: {
-        maxError: 0.1,
-        inexact: false,
-        value: 0.3333333333333333,
-        simplify: "optional",
-        answerType: "rational",
-        size: "normal",
+        value: "0.3333333333333333",
     },
 };
 
@@ -76,15 +71,15 @@ export const question1: PerseusRenderer = {
 
 export const question2: 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",
+        "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 mock-widget 1]]  \n\n\n\n",
     images: {
         "https://ka-perseus-graphie.s3.amazonaws.com/74a2b7583a2c26ebfb3ad714e29867541253fc97.png":
             {
                 width: 200,
                 height: 200,
             },
     },
-    widgets: {"input-number 1": inputNumberWidget},
+    widgets: {"mock-widget 1": mockWidget},
 };
 
 export const definitionItem: PerseusRenderer = {