Table: Extract validation out of scoring (#1849)

## Summary:

This PR is a test run for extracting validation logic from scoring (using `table` as the test subject). I've used a pattern where the validator still returns a `PerseusScore`. This means that we can call the validator as the first step in scoring and return the score if it's `invalid`.  

Issue: LEMS-2606

## Test plan:

All tests should still pass.

Author: jeremywiebe

Reviewers: jeremywiebe, Myranae, handeyeco

Required Reviewers:

Approved By: handeyeco, Myranae

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

Pull Request URL: #1849

.changeset/curvy-glasses-poke.md

@@ -0,0 +1,5 @@
+---
+"@khanacademy/perseus": minor
+---
+
+Introduce validation function for `table` widget - useful for checking if the learner has filled in the table sufficiently to score it (fully client-side)

docs/architecture.md

@@ -110,7 +110,7 @@ For each widget in `.widgets` the `Renderer`:
 1. Runs each widget's options through any upgrade transforms (see
     `Widgets.upgradeWidgetInfoToLatestVersion()` and
     `WidgetExports.propUpgrades`). See [Prop Upgrades](#Prop_Upgrades) for more info
-1. Prepares upgraded opions for rendering by applying the widget's
+1. Prepares upgraded options for rendering by applying the widget's
     `transform()` or `staticTransform()` (if rendering with
     `static: true`). These functions map the widget options to the widget's
     render Props.

packages/perseus/src/util/answer-types.ts

@@ -11,7 +11,7 @@ import type {PerseusStrings} from "../strings";
 const MAXERROR_EPSILON = Math.pow(2, -42);
 
 type Guess = any;
-type Predicate = any;
+type Predicate = (guess: number, maxError: number) => boolean;
 
 // TOOD(kevinb): Figure out how this relates to KEScore in
 // perseus-all-package/types.js and see if there's a way to
@@ -26,7 +26,7 @@ export type Score = {
     ungraded?: boolean;
 };
 
-/*
+/**
  * Answer types
  *
  * Utility for creating answerable questions displayed in exercises
@@ -69,7 +69,6 @@ export type Score = {
  * TODO(alpert): Think of a less-absurd name for createValidatorFunctional.
  *
  */
-
 const KhanAnswerTypes = {
     /*
      * predicate answer type
@@ -625,11 +624,11 @@ const KhanAnswerTypes = {
         convertToPredicate: function (
             correctAnswer: string,
             options: any,
-        ): Predicate {
+        ): [predicate: Predicate, options: any] {
             const correctFloat = parseFloat(correctAnswer);
 
             return [
-                function (guess: Predicate, maxError: Predicate) {
+                function (guess, maxError) {
                     return Math.abs(guess - correctFloat) < maxError;
                 },
                 $.extend({}, options, {type: "predicate"}),
@@ -641,7 +640,6 @@ const KhanAnswerTypes = {
             strings: PerseusStrings,
         ): (arg1: Guess) => Score {
             return KhanAnswerTypes.predicate.createValidatorFunctional(
-                // @ts-expect-error - TS2556 - A spread argument must either have a tuple type or be passed to a rest parameter.
                 ...KhanAnswerTypes.number.convertToPredicate(
                     correctAnswer,
                     options,

packages/perseus/src/validation.types.ts

@@ -13,7 +13,6 @@ import type {
     PerseusOrdererWidgetOptions,
     PerseusPlotterWidgetOptions,
     PerseusRadioChoice,
-    PerseusTableWidgetOptions,
     PerseusGraphCorrectType,
 } from "./perseus-types";
 import type {InteractiveMarkerType} from "./widgets/label-image/types";
@@ -180,7 +179,10 @@ export type PerseusSorterUserInput = {
     changed: boolean;
 };
 
-export type PerseusTableRubric = PerseusTableWidgetOptions;
+export type PerseusTableRubric = {
+    // Translatable Text; A 2-dimensional array of text to populate the table with
+    answers: ReadonlyArray<ReadonlyArray<string>>;
+};
 
 export type PerseusTableUserInput = ReadonlyArray<ReadonlyArray<string>>;
 

packages/perseus/src/widgets/table/score-table.test.ts

@@ -16,9 +16,6 @@ describe("scoreTable", () => {
         ];
 
         const rubric: PerseusTableRubric = {
-            headers: ["Col 1", "Col 2"],
-            rows: 2,
-            columns: 2,
             answers: [
                 ["1", "2"],
                 ["3", "4"],
@@ -41,9 +38,6 @@ describe("scoreTable", () => {
         ];
 
         const rubric: PerseusTableRubric = {
-            headers: ["Col 1", "Col 2"],
-            rows: 2,
-            columns: 2,
             answers: [
                 ["1", "2"],
                 ["3", "4"],
@@ -65,9 +59,6 @@ describe("scoreTable", () => {
         ];
 
         const rubric: PerseusTableRubric = {
-            headers: ["Col 1", "Col 2"],
-            rows: 2,
-            columns: 2,
             answers: [
                 ["1", "2"],
                 ["3", "4"],
@@ -89,9 +80,6 @@ describe("scoreTable", () => {
         ];
 
         const rubric: PerseusTableRubric = {
-            headers: ["Col 1", "Col 2"],
-            rows: 2,
-            columns: 2,
             answers: [
                 ["1", "2"],
                 ["3", "4"],
@@ -113,9 +101,6 @@ describe("scoreTable", () => {
         ];
 
         const rubric: PerseusTableRubric = {
-            headers: ["Col 1", "Col 2"],
-            rows: 2,
-            columns: 2,
             answers: [
                 ["1", "2"],
                 ["3", "4"],

packages/perseus/src/widgets/table/score-table.ts

@@ -2,6 +2,9 @@ import _ from "underscore";
 
 import KhanAnswerTypes from "../../util/answer-types";
 
+import {filterNonEmpty} from "./utils";
+import validateTable from "./validate-table";
+
 import type {PerseusStrings} from "../../strings";
 import type {PerseusScore} from "../../types";
 import type {
@@ -10,29 +13,17 @@ import type {
 } from "../../validation.types";
 
 function scoreTable(
-    state: PerseusTableUserInput,
+    userInput: PerseusTableUserInput,
     rubric: PerseusTableRubric,
     strings: PerseusStrings,
 ): PerseusScore {
-    const filterNonEmpty = function (table: any) {
-        return _.filter(table, function (row) {
-            // Check if row has a cell that is nonempty
-            return _.some(row, _.identity);
-        });
-    };
-    const solution = filterNonEmpty(rubric.answers);
-    const supplied = filterNonEmpty(state);
-    const hasEmptyCell = _.some(supplied, function (row) {
-        return _.some(row, function (cell) {
-            return cell === "";
-        });
-    });
-    if (hasEmptyCell || !supplied.length) {
-        return {
-            type: "invalid",
-            message: null,
-        };
+    const validationResult = validateTable(userInput);
+    if (validationResult != null) {
+        return validationResult;
     }
+
+    const supplied = filterNonEmpty(userInput);
+    const solution = filterNonEmpty(rubric.answers);
     if (supplied.length !== solution.length) {
         return {
             type: "points",
@@ -41,12 +32,13 @@ function scoreTable(
             message: null,
         };
     }
+
     const createValidator = KhanAnswerTypes.number.createValidatorFunctional;
-    let message = null;
-    const allCorrect = _.every(solution, function (rowSolution) {
+    let message: string | null = null;
+    const allCorrect = solution.every(function (rowSolution) {
         for (let i = 0; i < supplied.length; i++) {
             const rowSupplied = supplied[i];
-            const correct = _.every(rowSupplied, function (cellSupplied, i) {
+            const correct = rowSupplied.every(function (cellSupplied, i) {
                 const cellSolution = rowSolution[i];
                 const validator = createValidator(
                     cellSolution,
@@ -57,7 +49,6 @@ function scoreTable(
                 );
                 const result = validator(cellSupplied);
                 if (result.message) {
-                    // @ts-expect-error - TS2322 - Type 'string' is not assignable to type 'null'.
                     message = result.message;
                 }
                 return result.correct;
@@ -73,7 +64,7 @@ function scoreTable(
         type: "points",
         earned: allCorrect ? 1 : 0,
         total: 1,
-        message: message,
+        message,
     };
 }
 

packages/perseus/src/widgets/table/utils.ts

@@ -0,0 +1,14 @@
+/**
+ * Filters the given table (modelled as a 2D array) to remove any rows that are
+ * completely empty.
+ *
+ * @returns A new table with only non-empty rows.
+ */
+export const filterNonEmpty = function (
+    table: ReadonlyArray<ReadonlyArray<string>>,
+) {
+    return table.filter(function (row) {
+        // Return only rows that are non-empty.
+        return row.some((cell) => cell);
+    });
+};

packages/perseus/src/widgets/table/validate-table.test.ts

@@ -0,0 +1,33 @@
+import validateTable from "./validate-table";
+
+import type {PerseusTableUserInput} from "../../validation.types";
+
+describe("tableValidator", () => {
+    it("is invalid if there is an empty cell", () => {
+        // Arrange
+        const userInput: PerseusTableUserInput = [
+            ["1", ""],
+            ["3", "4"],
+        ];
+
+        // Act
+        const result = validateTable(userInput);
+
+        // Assert
+        expect(result).toHaveInvalidInput();
+    });
+
+    it("is null if all cells are provided", () => {
+        // Arrange
+        const userInput: PerseusTableUserInput = [
+            ["1", "2"],
+            ["3", "4"],
+        ];
+
+        // Act
+        const result = validateTable(userInput);
+
+        // Assert
+        expect(result).toBeNull();
+    });
+});

packages/perseus/src/widgets/table/validate-table.ts

@@ -0,0 +1,27 @@
+import {filterNonEmpty} from "./utils";
+
+import type {PerseusScore} from "../../types";
+import type {PerseusTableUserInput} from "../../validation.types";
+
+function validateTable(
+    userInput: PerseusTableUserInput,
+): Extract<PerseusScore, {type: "invalid"}> | null {
+    const supplied = filterNonEmpty(userInput);
+
+    const hasEmptyCell = supplied.some(function (row) {
+        return row.some(function (cell) {
+            return cell === "";
+        });
+    });
+
+    if (hasEmptyCell || !supplied.length) {
+        return {
+            type: "invalid",
+            message: null,
+        };
+    }
+
+    return null;
+}
+
+export default validateTable;