Answerless Plotter (#2423)

## Summary:
Makes some small adjustments to plotter to set it up for answerless rendering. Was rendering without answers already, so just some type cleanup in the widget itself. Added tests and an answerless Storybook story as well.

Issue: LEMS-2977

## Test plan:
- Confirm all checks pass
- Confirm widget still acts as expected
- No changes should be noted in the user experience

Author: Myranae

Reviewers: benchristel, handeyeco

Required Reviewers:

Approved By: benchristel

Checks: ✅ 8 checks were successful

Pull Request URL: #2423

Author: Myranae

.changeset/late-pillows-search.md

@@ -0,0 +1,6 @@
+---
+"@khanacademy/perseus": minor
+"@khanacademy/perseus-core": minor
+---
+
+Update Plotter widget to render with answerless data. Adds test and stories for answerless rendering.

packages/perseus-core/src/index.ts

@@ -156,6 +156,7 @@ export {default as getIFramePublicWidgetOptions} from "./widgets/iframe/iframe-u
 export {default as getMatrixPublicWidgetOptions} from "./widgets/matrix/matrix-util";
 export type {MatrixPublicWidgetOptions} from "./widgets/matrix/matrix-util";
 export {default as getPlotterPublicWidgetOptions} from "./widgets/plotter/plotter-util";
+export type {PlotterPublicWidgetOptions} from "./widgets/plotter/plotter-util";
 export {
     default as getMatcherPublicWidgetOptions,
     shuffleMatcher,

packages/perseus-core/src/widgets/plotter/plotter-util.ts

@@ -4,7 +4,10 @@ import type {PerseusPlotterWidgetOptions} from "../../data-schema";
  * For details on the individual options, see the
  * PerseusPlotterWidgetOptions type
  */
-type PlotterPublicWidgetOptions = Omit<PerseusPlotterWidgetOptions, "correct">;
+export type PlotterPublicWidgetOptions = Omit<
+    PerseusPlotterWidgetOptions,
+    "correct"
+>;
 
 /**
  * Given a PerseusPlotterWidgetOptions object, return a new object with only

packages/perseus/src/widgets/plotter/plotter.stories.tsx

@@ -19,3 +19,10 @@ export const Basic: Story = {
         item: generateTestPerseusItem({question: question1}),
     },
 };
+
+export const AnswerlessPlotter: Story = {
+    args: {
+        item: generateTestPerseusItem({question: question1}),
+        startAnswerless: true,
+    },
+};

packages/perseus/src/widgets/plotter/plotter.test.tsx

@@ -1,12 +1,17 @@
-import {screen, render, waitFor} from "@testing-library/react";
+import {scorePerseusItem} from "@khanacademy/perseus-score";
+import {act, render, screen, waitFor} from "@testing-library/react";
 import React from "react";
 
 import {testDependencies} from "../../../../../testing/test-dependencies";
 import * as Dependencies from "../../dependencies";
 import {ApiOptions} from "../../perseus-api";
+import {getAnswerfulItem, getAnswerlessItem} from "../../util/test-utils";
+import {renderQuestion} from "../__testutils__/renderQuestion";
 
 import {Plotter} from "./plotter";
 
+import type {PerseusPlotterWidgetOptions} from "@khanacademy/perseus-core";
+
 describe("plotter widget", () => {
     beforeEach(() => {
         jest.spyOn(Dependencies, "getDependencies").mockReturnValue(
@@ -59,4 +64,104 @@ describe("plotter widget", () => {
             ).not.toBeInTheDocument();
         });
     });
+
+    const plotterOptions: PerseusPlotterWidgetOptions = {
+        categories: ["$1^{\\text{st}} \\text{}$"],
+        picBoxHeight: 300,
+        picSize: 300,
+        picUrl: "",
+        plotDimensions: [380, 300],
+        correct: [15],
+        labelInterval: 1,
+        labels: ["School grade", "Number of absent students"],
+        maxY: 30,
+        scaleY: 5,
+        snapsPerLine: 1,
+        starting: [0],
+        type: "bar",
+    };
+
+    test("the answerless test data doesn't contain answers", () => {
+        // Arrange / Act / Assert
+        expect(
+            getAnswerlessItem("plotter", plotterOptions).question.widgets[
+                "plotter 1"
+            ].options.correct,
+        ).toBeUndefined();
+    });
+
+    describe.each([
+        ["answerless", getAnswerlessItem("plotter", plotterOptions)],
+        ["answerful", getAnswerfulItem("plotter", plotterOptions)],
+    ])("given %s options", (_, {question}) => {
+        it("renders correctly", async () => {
+            // Arrange / Act
+            renderQuestion(question);
+
+            // Assert
+            expect(await screen.findByText("School grade")).toBeInTheDocument();
+            expect(
+                await screen.findByText("Number of absent students"),
+            ).toBeInTheDocument();
+        });
+
+        it("can given an invalid score", () => {
+            // Arrange
+            const {renderer} = renderQuestion(question);
+
+            // Act
+            const userInput = renderer.getUserInputMap();
+            const score = scorePerseusItem(
+                getAnswerfulItem("plotter", plotterOptions).question,
+                userInput,
+                "en",
+            );
+
+            // Assert
+            expect(userInput).toEqual({"plotter 1": [0]});
+            expect(score).toHaveInvalidInput();
+        });
+
+        it("can be answered correctly", () => {
+            // Arrange
+            const {renderer} = renderQuestion(question);
+
+            // Act
+            const [plotter] = renderer.findWidgets("plotter 1");
+
+            act(() => plotter.setState({values: [15]}));
+            const userInput = renderer.getUserInputMap();
+
+            const score = scorePerseusItem(
+                getAnswerfulItem("plotter", plotterOptions).question,
+                userInput,
+                "en",
+            );
+
+            // Assert
+            expect(userInput).toEqual({"plotter 1": [15]});
+            expect(score).toHaveBeenAnsweredCorrectly();
+        });
+
+        it("can be scored incorrectly", () => {
+            // Arrange
+            const {renderer} = renderQuestion(question);
+
+            // Act
+            const [plotter] = renderer.findWidgets("plotter 1");
+
+            act(() => plotter.setState({values: [7]})); // mock user entering a value
+            const userInput = renderer.getUserInputMap();
+
+            const score = scorePerseusItem(
+                getAnswerfulItem("plotter", plotterOptions).question,
+                userInput,
+                "en",
+            );
+
+            // Assert
+            expect(userInput).toEqual({"plotter 1": [7]});
+            expect(score).toHaveBeenAnsweredIncorrectly();
+        });
+    });
 });

packages/perseus/src/widgets/plotter/plotter.tsx

@@ -18,8 +18,9 @@ import type {
     PerseusPlotterWidgetOptions,
     PerseusPlotterUserInput,
 } from "@khanacademy/perseus-core";
+import type {PlotterPublicWidgetOptions} from "@khanacademy/perseus-core/src/widgets/plotter/plotter-util";
 
-type RenderProps = PerseusPlotterWidgetOptions;
+type RenderProps = PlotterPublicWidgetOptions;
 
 type Props = WidgetProps<RenderProps> & {
     labelInterval: NonNullable<PerseusPlotterWidgetOptions["labelInterval"]>;