diff --git a/.changeset/big-hairs-speak.md b/.changeset/big-hairs-speak.md new file mode 100644 index 0000000000..49b52a54fd --- /dev/null +++ b/.changeset/big-hairs-speak.md @@ -0,0 +1,5 @@ +--- +"@khanacademy/perseus": patch +--- + +Refactor cs-program to use a getUserInputFunction diff --git a/packages/perseus/src/widgets/cs-program/cs-program.test.ts b/packages/perseus/src/widgets/cs-program/cs-program.test.ts index efd9bc18e1..89f9ab8699 100644 --- a/packages/perseus/src/widgets/cs-program/cs-program.test.ts +++ b/packages/perseus/src/widgets/cs-program/cs-program.test.ts @@ -4,6 +4,8 @@ import {renderQuestion} from "../__testutils__/renderQuestion"; import {question1} from "./cs-program.testdata"; +import type {PerseusCSProgramUserInput} from "../../validation.types"; + describe("cs-program widget", () => { beforeEach(() => { jest.spyOn(Dependencies, "getDependencies").mockReturnValue( @@ -37,5 +39,16 @@ describe("cs-program widget", () => { expect(container).toMatchSnapshot("first mobile render"); }); - // This widget doesn't have any direct behavior, it just renders an iframe + it("should show default user input before user interaction", () => { + const apiOptions = { + isMobile: false, + } as const; + + const {renderer} = renderQuestion(question1, apiOptions); + const userInput = + renderer.getUserInput()[0] as PerseusCSProgramUserInput; + + expect(userInput.status).toBe("incomplete"); + expect(userInput.message).toBe(null); + }); }); diff --git a/packages/perseus/src/widgets/cs-program/cs-program.tsx b/packages/perseus/src/widgets/cs-program/cs-program.tsx index 64e4215eb7..4b85e7f454 100644 --- a/packages/perseus/src/widgets/cs-program/cs-program.tsx +++ b/packages/perseus/src/widgets/cs-program/cs-program.tsx @@ -108,11 +108,15 @@ class CSProgram extends React.Component { return Changeable.change.apply(this, args); }; - simpleValidate(): PerseusScore { - return csProgramValidator({ + getUserInput(): PerseusCSProgramUserInput { + return { status: this.props.status, message: this.props.message, - }); + }; + } + + simpleValidate(): PerseusScore { + return csProgramValidator(this.getUserInput()); } render(): React.ReactNode {