[LEMS-2850] Answerless Dropdown (#2231)

## Summary:
Nothing interesting really. Dropdown didn't need the answers at all, so I just made sure it wouldn't have access and added tests to make sure it was interactive with/without answer data.

Issue: LEMS-2850

## Test plan:
Nothing should change. Dropdown should continue to be interactive and scorable.

Author: handeyeco

Reviewers: handeyeco, benchristel, Myranae, jeremywiebe

Required Reviewers:

Approved By: benchristel

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

Pull Request URL: #2231

.changeset/silly-pianos-buy.md

@@ -0,0 +1,6 @@
+---
+"@khanacademy/perseus": patch
+"@khanacademy/perseus-core": patch
+---
+
+Add tests for answerless Dropdown support

packages/perseus-core/src/index.ts

@@ -137,6 +137,7 @@ export {
 export {default as getLabelImagePublicWidgetOptions} from "./widgets/label-image/label-image-util";
 export {default as getSorterPublicWidgetOptions} from "./widgets/sorter/sorter-util";
 export {default as getDropdownPublicWidgetOptions} from "./widgets/dropdown/dropdown-util";
+export type {DropdownPublicWidgetOptions} from "./widgets/dropdown/dropdown-util";
 export {default as getNumericInputPublicWidgetOptions} from "./widgets/numeric-input/numeric-input-util";
 export {default as getNumberLinePublicWidgetOptions} from "./widgets/number-line/number-line-util";
 export {default as getRadioPublicWidgetOptions} from "./widgets/radio/radio-util";

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

@@ -4,7 +4,7 @@ import type {PerseusDropdownWidgetOptions} from "@khanacademy/perseus-core";
  * For details on the individual options, see the
  * PerseusDropdownWidgetOptions type
  */
-type DropdownPublicWidgetOptions = {
+export type DropdownPublicWidgetOptions = {
     choices: ReadonlyArray<{content: string}>;
     placeholder: PerseusDropdownWidgetOptions["placeholder"];
     static: PerseusDropdownWidgetOptions["static"];

packages/perseus/src/widgets/dropdown/dropdown.test.ts

@@ -1,8 +1,14 @@
+import {
+    splitPerseusItem,
+    type PerseusRenderer,
+} from "@khanacademy/perseus-core";
+import {scorePerseusItem} from "@khanacademy/perseus-score";
 import {screen} from "@testing-library/react";
 import {userEvent as userEventLib} from "@testing-library/user-event";
 
 import {testDependencies} from "../../../../../testing/test-dependencies";
 import * as Dependencies from "../../dependencies";
+import {registerAllWidgetsForTesting} from "../../util/register-all-widgets-for-testing";
 import {scorePerseusItemTesting} from "../../util/test-utils";
 import {renderQuestion} from "../__testutils__/renderQuestion";
 
@@ -127,4 +133,94 @@ describe("Dropdown widget", () => {
         // Assert
         expect(screen.getByLabelText("Select an answer")).toBeInTheDocument();
     });
+
+    describe("interactive: full vs answerless", () => {
+        beforeAll(() => {
+            registerAllWidgetsForTesting();
+        });
+
+        let userEvent: UserEvent;
+        beforeEach(() => {
+            userEvent = userEventLib.setup({
+                advanceTimers: jest.advanceTimersByTime,
+            });
+
+            jest.spyOn(Dependencies, "getDependencies").mockReturnValue(
+                testDependencies,
+            );
+        });
+
+        function getAnswerfulItem(): PerseusRenderer {
+            return {
+                content: "[[☃ dropdown 1]]",
+                images: {},
+                widgets: {
+                    "dropdown 1": {
+                        type: "dropdown",
+                        options: {
+                            static: false,
+                            placeholder: "Choose an answer",
+                            choices: [
+                                {
+                                    content: "Correct",
+                                    correct: true,
+                                },
+                                {
+                                    content: "Incorrect",
+                                    correct: false,
+                                },
+                            ],
+                        },
+                    },
+                },
+            };
+        }
+
+        function getAnswerlessItem(): PerseusRenderer {
+            return splitPerseusItem(getAnswerfulItem());
+        }
+
+        test.each(["answerless", "answerful"])(
+            "is interactive with widget options: %p",
+            async (e) => {
+                // Arrange
+                const useAnswerless = e === "answerless";
+                const renderItem = useAnswerless
+                    ? getAnswerlessItem()
+                    : getAnswerfulItem();
+
+                // assert that splitting worked as expected
+                if (useAnswerless) {
+                    expect(
+                        renderItem.widgets["dropdown 1"].options.choices[0]
+                            .correct,
+                    ).toBeUndefined();
+                    expect(
+                        renderItem.widgets["dropdown 1"].options.choices[1]
+                            .correct,
+                    ).toBeUndefined();
+                }
+
+                // Act
+                const {renderer} = renderQuestion(renderItem);
+
+                await userEvent.click(
+                    screen.getByRole("combobox", {name: "Select an answer"}),
+                );
+                await userEvent.click(
+                    screen.getByRole("option", {name: "Correct"}),
+                );
+
+                const userInput = renderer.getUserInputMap();
+                const score = scorePerseusItem(
+                    getAnswerfulItem(),
+                    userInput,
+                    "en",
+                );
+
+                // Assert
+                expect(score).toHaveBeenAnsweredCorrectly();
+            },
+        );
+    });
 });

packages/perseus/src/widgets/dropdown/dropdown.tsx

@@ -11,13 +11,13 @@ import {getPromptJSON as _getPromptJSON} from "../../widget-ai-utils/dropdown/dr
 
 import type {Widget, WidgetExports, WidgetProps} from "../../types";
 import type {DropdownPromptJSON} from "../../widget-ai-utils/dropdown/dropdown-ai-utils";
-import type {PerseusDropdownWidgetOptions} from "@khanacademy/perseus-core";
 import type {
-    PerseusDropdownRubric,
-    PerseusDropdownUserInput,
-} from "@khanacademy/perseus-score";
+    DropdownPublicWidgetOptions,
+    PerseusDropdownWidgetOptions,
+} from "@khanacademy/perseus-core";
+import type {PerseusDropdownUserInput} from "@khanacademy/perseus-score";
 
-type Props = WidgetProps<RenderProps, PerseusDropdownRubric> & {
+type Props = WidgetProps<RenderProps> & {
     selected: number;
 };
 
@@ -151,21 +151,19 @@ type RenderProps = {
     choices: ReadonlyArray<string>;
 };
 
-const optionsTransform: (arg1: PerseusDropdownWidgetOptions) => RenderProps = (
-    widgetOptions,
-) => {
+function transform(widgetOptions: DropdownPublicWidgetOptions): RenderProps {
     return {
         placeholder: widgetOptions.placeholder,
         visibleLabel: widgetOptions.visibleLabel,
         ariaLabel: widgetOptions.ariaLabel,
         choices: widgetOptions.choices.map((choice) => choice.content),
     };
-};
+}
 
 export default {
     name: "dropdown",
     displayName: "Drop down",
     accessible: true,
     widget: Dropdown,
-    transform: optionsTransform,
+    transform,
 } satisfies WidgetExports<typeof Dropdown>;