Categorizer: Extract validation out of scoring

.changeset/green-ghosts-burn.md

@@ -0,0 +1,5 @@
+---
+"@khanacademy/perseus": minor
+---
+
+Split out validation function for the `categorizer` widget. This can be used to check if the user selected an answer for every row, confirming the question is ready to be scored.

packages/perseus/src/validation.types.ts

@@ -24,11 +24,19 @@ export type PerseusCategorizerRubric = {
     // The correct answers where index relates to the items and value relates
     // to the category.  e.g. [0, 1, 0, 1, 2]
     values: ReadonlyArray<number>;
+    // Translatable text; a list of items to categorize. e.g. ["banana", "yellow", "apple", "purple", "shirt"]
+    items: ReadonlyArray<string>;
 };
 
 export type PerseusCategorizerUserInput = {
     values: PerseusCategorizerRubric["values"];
 };
+
+export type PerseusCategorizerValidationData = {
+    // Translatable text; a list of items to categorize. e.g. ["banana", "yellow", "apple", "purple", "shirt"]
+    items: ReadonlyArray<string>;
+};
+
 // TODO(LEMS-2440): Can possibly be removed during 2440?
 // This is not used for grading at all. The only place it is used is to define
 // Props type in cs-program.tsx, but RenderProps already contains WidgetOptions

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

@@ -8,6 +8,7 @@ describe("scoreCategorizer", () => {
     it("gives points when the answer is correct", () => {
         const rubric: PerseusCategorizerRubric = {
             values: [1, 3],
+            items: ["apples", "oranges"],
         };
 
         const userInput = {
@@ -21,6 +22,7 @@ describe("scoreCategorizer", () => {
     it("does not give points when incorrectly answered", () => {
         const rubric: PerseusCategorizerRubric = {
             values: [1, 3],
+            items: ["apples", "oranges"],
         };
 
         const userInput = {
@@ -30,19 +32,4 @@ describe("scoreCategorizer", () => {
 
         expect(score).toHaveBeenAnsweredIncorrectly();
     });
-
-    it("tells the learner its not complete if not selected", () => {
-        const rubric: PerseusCategorizerRubric = {
-            values: [1, 3],
-        };
-
-        const userInput = {
-            values: [2],
-        } as const;
-        const score = scoreCategorizer(userInput, rubric, mockStrings);
-
-        expect(score).toHaveInvalidInput(
-            "Make sure you select something for every row.",
-        );
-    });
 });

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

@@ -1,3 +1,5 @@
+import validateCategorizer from "./validate-categorizer";
+
 import type {PerseusStrings} from "../../strings";
 import type {PerseusScore} from "../../types";
 import type {
@@ -10,22 +12,17 @@ function scoreCategorizer(
     rubric: PerseusCategorizerRubric,
     strings: PerseusStrings,
 ): PerseusScore {
-    let completed = true;
+    const validationError = validateCategorizer(userInput, rubric, strings);
+    if (validationError) {
+        return validationError;
+    }
+
     let allCorrect = true;
     rubric.values.forEach((value, i) => {
-        if (userInput.values[i] == null) {
-            completed = false;
-        }
         if (userInput.values[i] !== value) {
             allCorrect = false;
         }
     });
-    if (!completed) {
-        return {
-            type: "invalid",
-            message: strings.invalidSelection,
-        };
-    }
     return {
         type: "points",
         earned: allCorrect ? 1 : 0,

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

@@ -0,0 +1,37 @@
+import {mockStrings} from "../../strings";
+
+import validateCategorizer from "./validate-categorizer";
+
+import type {PerseusCategorizerRubric} from "../../validation.types";
+
+describe("validateCategorizer", () => {
+    it("tells the learner its not complete if not selected", () => {
+        const rubric: PerseusCategorizerRubric = {
+            values: [1, 3],
+            items: ["apples", "oranges"],
+        };
+
+        const userInput = {
+            values: [2],
+        } as const;
+        const score = validateCategorizer(userInput, rubric, mockStrings);
+
+        expect(score).toHaveInvalidInput(
+            "Make sure you select something for every row.",
+        );
+    });
+
+    it("returns null if the userInput is valid", () => {
+        const rubric: PerseusCategorizerRubric = {
+            values: [1, 3],
+            items: ["apples", "oranges"],
+        };
+
+        const userInput = {
+            values: [2, 4],
+        } as const;
+        const score = validateCategorizer(userInput, rubric, mockStrings);
+
+        expect(score).toBeNull();
+    });
+});

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

@@ -0,0 +1,26 @@
+import type {PerseusStrings} from "../../strings";
+import type {PerseusScore} from "../../types";
+import type {
+    PerseusCategorizerUserInput,
+    PerseusCategorizerValidationData,
+} from "../../validation.types";
+
+function validateCategorizer(
+    userInput: PerseusCategorizerUserInput,
+    validationData: PerseusCategorizerValidationData,
+    strings: PerseusStrings,
+): Extract<PerseusScore, {type: "invalid"}> | null {
+    const incomplete = validationData.items.some(
+        (_, i) => userInput.values[i] == null,
+    );
+
+    if (incomplete) {
+        return {
+            type: "invalid",
+            message: strings.invalidSelection,
+        };
+    }
+    return null;
+}
+
+export default validateCategorizer;