Split out validation logic for input-number

.changeset/modern-dancers-decide.md

@@ -0,0 +1,5 @@
+---
+"@khanacademy/perseus": patch
+---
+
+Move validation logic out of the Input Number widget

packages/perseus/src/widgets/input-number/input-number-validator.test.ts

@@ -0,0 +1,136 @@
+import {mockStrings} from "../../strings";
+
+import inputNumberValidator from "./input-number-validator";
+
+import type {Rubric} from "./input-number.types";
+
+describe("inputNumberValidator", () => {
+    it("scores correct answer correctly", () => {
+        const rubric: Rubric = {
+            maxError: 0.1,
+            inexact: false,
+            value: 1,
+            simplify: "optional",
+            answerType: "percent",
+            size: "small",
+        };
+
+        const useInput = {
+            currentValue: "1",
+        } as const;
+
+        const score = inputNumberValidator(useInput, rubric, mockStrings);
+
+        expect(score).toEqual({
+            earned: 1,
+            message: null,
+            total: 1,
+            type: "points",
+        });
+    });
+
+    it("scores incorrect answer correctly", () => {
+        const rubric: Rubric = {
+            maxError: 0.1,
+            inexact: false,
+            value: 1,
+            simplify: "optional",
+            answerType: "percent",
+            size: "small",
+        };
+
+        const useInput = {
+            currentValue: "2",
+        } as const;
+
+        const score = inputNumberValidator(useInput, rubric, mockStrings);
+
+        expect(score).toEqual({
+            earned: 0,
+            message: null,
+            total: 1,
+            type: "points",
+        });
+    });
+
+    it("shows as invalid with a nonsense answer", () => {
+        const rubric: Rubric = {
+            maxError: 0.1,
+            inexact: false,
+            value: 1,
+            simplify: "optional",
+            answerType: "percent",
+            size: "small",
+        };
+
+        const useInput = {
+            currentValue: "sadasdfas",
+        } as const;
+
+        const score = inputNumberValidator(useInput, rubric, mockStrings);
+
+        expect(score).toEqual({
+            message:
+                "We could not understand your answer. Please check your answer for extra text or symbols.",
+            type: "invalid",
+        });
+    });
+
+    // Don't default to validating the answer as a pi answer
+    // if answerType isn't set on the answer.
+    // The answer value and
+    // the omission of answerType in the answer are
+    // important to the test.
+    // https://khanacademy.atlassian.net/browse/LC-691
+    it("doesn't default to validating pi", () => {
+        const rubric: Rubric = {
+            maxError: 0.1,
+            inexact: false,
+            value: 241.90263432641407,
+            simplify: "required",
+            size: "normal",
+        };
+
+        const userInput = {
+            // 77 * pi = 241.90263432641407
+            // within the 0.01 margin of error
+            // to trigger the pi validation flow
+            currentValue: "241.91",
+        } as const;
+
+        const score = inputNumberValidator(userInput, rubric, mockStrings);
+
+        expect(score.message).not.toBe(
+            "Your answer is close, but yyou may " +
+                "have approximated pi. Enter your " +
+                "answer as a multiple of pi, like " +
+                "<code>12\\ \\text{pi}</code> or " +
+                "<code>2/3\\ \\text{pi}</code>",
+        );
+        expect(score.message?.includes("pi")).toBeFalsy();
+    });
+
+    it("validates against pi if provided in answerType", () => {
+        const rubric: Rubric = {
+            maxError: 0.1,
+            inexact: false,
+            value: 241.90263432641407,
+            simplify: "required",
+            answerType: "pi",
+            size: "normal",
+        };
+
+        const userInput = {
+            currentValue: "77 pi",
+        } as const;
+
+        const score = inputNumberValidator(userInput, rubric, mockStrings);
+
+        expect(score).toEqual({
+            earned: 1,
+            message: null,
+            total: 1,
+            type: "points",
+        });
+    });
+});

packages/perseus/src/widgets/input-number/input-number-validator.ts

@@ -0,0 +1,100 @@
+import TexWrangler from "../../tex-wrangler";
+import KhanAnswerTypes from "../../util/answer-types";
+
+import type {Rubric} from "./input-number.types";
+import type {PerseusStrings} from "../../strings";
+import type {APIOptions, PerseusScore} from "@khanacademy/perseus";
+
+const ParseTex = TexWrangler.parseTex;
+
+export const answerTypes = {
+    number: {
+        name: "Numbers",
+        forms: "integer, decimal, proper, improper, mixed",
+    },
+    decimal: {
+        name: "Decimals",
+        forms: "decimal",
+    },
+    integer: {
+        name: "Integers",
+        forms: "integer",
+    },
+    rational: {
+        name: "Fractions and mixed numbers",
+        forms: "integer, proper, improper, mixed",
+    },
+    improper: {
+        name: "Improper numbers (no mixed)",
+        forms: "integer, proper, improper",
+    },
+    mixed: {
+        name: "Mixed numbers (no improper)",
+        forms: "integer, proper, mixed",
+    },
+    percent: {
+        name: "Numbers or percents",
+        forms: "integer, decimal, proper, improper, mixed, percent",
+    },
+    pi: {
+        name: "Numbers with pi",
+        forms: "pi",
+    },
+} as const;
+
+function inputNumberValidator(
+    state: {
+        currentValue: string;
+    },
+    rubric: Rubric,
+    strings: PerseusStrings,
+    onInputError: APIOptions["onInputError"] = () => {},
+): PerseusScore {
+    if (rubric.answerType == null) {
+        rubric.answerType = "number";
+    }
+
+    // note(matthewc): this will get immediately parsed again by
+    // `KhanAnswerTypes.number.convertToPredicate`, but a string is
+    // expected here
+    const stringValue = `${rubric.value}`;
+    const val = KhanAnswerTypes.number.createValidatorFunctional(
+        stringValue,
+        {
+            simplify: rubric.simplify,
+            inexact: rubric.inexact || undefined,
+            maxError: rubric.maxError,
+            forms: answerTypes[rubric.answerType].forms,
+        },
+        strings,
+    );
+
+    // We may have received TeX; try to parse it before grading.
+    // If `currentValue` is not TeX, this should be a no-op.
+    const currentValue = ParseTex(state.currentValue);
+
+    const result = val(currentValue);
+
+    // TODO(eater): Seems silly to translate result to this invalid/points
+    // thing and immediately translate it back in ItemRenderer.scoreInput()
+    if (result.empty) {
+        // TODO(FEI-3867): remove null-check once we have APIOptionsInternal
+        const apiResult = onInputError?.(
+            null, // reserved for some widget identifier
+            state.currentValue,
+            result.message,
+        );
+        return {
+            type: "invalid",
+            message: apiResult === false ? null : result.message,
+        };
+    }
+    return {
+        type: "points",
+        earned: result.correct ? 1 : 0,
+        total: 1,
+        message: result.message,
+    };
+}
+
+export default inputNumberValidator;

packages/perseus/src/widgets/input-number/input-number.test.ts

@@ -12,6 +12,7 @@ import {mockStrings} from "../../strings";
 import {renderQuestion} from "../__testutils__/renderQuestion";
 
 import InputNumber from "./input-number";
+import inputNumberValidator from "./input-number-validator";
 import {question3 as question} from "./input-number.testdata";
 
 import type {
@@ -41,7 +42,7 @@ describe("input-number", function () {
     });
 
     describe("full render", function () {
-        it("Shoud accept the right answer", async () => {
+        it("Should accept the right answer", async () => {
             // Arrange
             const {renderer} = renderQuestion(question);
 
@@ -197,7 +198,7 @@ describe("input-number", function () {
             "0.56",
         ],
     ])("answer type", (question, correct, incorrect) => {
-        it("Shoud accept the right answer", async () => {
+        it("Should accept the right answer", async () => {
             // Arrange
             const {renderer} = renderQuestion(question);
 
@@ -249,7 +250,7 @@ describe("invalid", function () {
     });
 
     it("should handle invalid answers with no error callback", function () {
-        const err = InputNumber.widget.validate(
+        const err = inputNumberValidator(
             {currentValue: "x+1"},
             options,
             mockStrings,