@khanacademy/perseus 1.1.1 → 1.1.2

package/src/widgets/__tests__/radio/base-radio_test.jsx

@@ -54,7 +54,6 @@ describe("base-radio", () => {
     it("renders a none of the above choice", () => {
         // Arrange / Act
         renderBaseRadio({
-            editMode: true,
             choices: [
                 generateChoice({content: "Option 1", correct: false}),
                 generateChoice({content: "Option B", correct: false}),
@@ -82,6 +81,40 @@ describe("base-radio", () => {
         expect(screen.getAllByText("None of the above")).toHaveLength(2);
     });
 
+    it("registers as checked when none of the above choice is clicked", () => {
+        // Arrange
+        let updatedValues = null;
+        const onChangeHandler = (newValues) => {
+            updatedValues = newValues;
+        };
+
+        renderBaseRadio({
+            choices: [
+                generateChoice({content: "Option 1", correct: false}),
+                generateChoice({content: "Option B", correct: false}),
+                generateChoice({content: "Option Gamma", correct: false}),
+                generateChoice({content: "Option Delta", correct: false}),
+                generateChoice({
+                    isNoneOfTheAbove: true,
+                    correct: true,
+                }),
+            ],
+            onChange: onChangeHandler,
+        });
+
+        const noneOption = screen.getByRole("radio", {
+            name: "(Choice E) None of the above",
+        });
+
+        // Act
+        userEvent.click(noneOption);
+
+        // Assert
+        expect(updatedValues).toMatchObject({
+            checked: [false, false, false, false, true],
+        });
+    });
+
     describe("edit mode", () => {
         it("should render <li>'s for each choice", () => {
             // Arrange / Act
@@ -130,7 +163,7 @@ describe("base-radio", () => {
     });
 
     describe("selecting and deselecting options", () => {
-        it("deselects multi-select choices", () => {
+        it("deselects multi-select choice", () => {
             // Arrange
             let updatedValues = null;
             const onChangeHandler = (newValues) => {
@@ -177,7 +210,7 @@ describe("base-radio", () => {
         });
 
         // Equivalent to "should toggle choice when inner element clicked" but with editMode set to false
-        it("selects single select choices", () => {
+        it("selects single select choice", () => {
             // Arrange
             let updatedValues = null;
             const onChangeHandler = (newValues) => {
@@ -190,18 +223,22 @@ describe("base-radio", () => {
                     generateChoice({
                         content: "Option 1",
                         correct: false,
+                        checked: false,
                     }),
                     generateChoice({
                         content: "Option B",
                         correct: false,
+                        checked: false,
                     }),
                     generateChoice({
                         content: "Option Gamma",
                         correct: true,
+                        checked: false,
                     }),
                     generateChoice({
                         content: "Option Delta",
                         correct: false,
+                        checked: false,
                     }),
                 ],
                 onChange: onChangeHandler,
@@ -218,7 +255,7 @@ describe("base-radio", () => {
             });
         });
 
-        it("deselects single select selected choice", () => {
+        it("deselects single select choice", () => {
             // Arrange
             let updatedValues = null;
             const onChangeHandler = (newValues) => {
@@ -231,32 +268,79 @@ describe("base-radio", () => {
                     generateChoice({
                         content: "Option 1",
                         correct: false,
-                        checked: true,
+                        checked: false,
                     }),
                     generateChoice({
                         content: "Option B",
                         correct: false,
+                        checked: false,
                     }),
                     generateChoice({
                         content: "Option Gamma",
                         correct: true,
+                        checked: true,
                     }),
                     generateChoice({
                         content: "Option Delta",
                         correct: false,
+                        checked: false,
                     }),
                 ],
                 onChange: onChangeHandler,
             });
 
             // Act
-            userEvent.click(screen.getAllByRole("radio")[0]);
+            const radioButton = screen.getByRole("radio", {
+                name: "(Choice C, Checked) Option Gamma",
+            });
+            userEvent.click(radioButton);
 
             // Assert
             expect(updatedValues).toMatchObject({
                 checked: [false, false, false, false],
             });
         });
+
+        it("selects multi-select choice", () => {
+            // Arrange
+            let updatedValues = null;
+            const onChangeHandler = (newValues) => {
+                updatedValues = newValues;
+            };
+
+            renderBaseRadio({
+                multipleSelect: true,
+                choices: [
+                    generateChoice({
+                        content: "Option 1",
+                        correct: false,
+                    }),
+                    generateChoice({
+                        content: "Option B",
+                        correct: false,
+                    }),
+                    generateChoice({
+                        content: "Option Gamma",
+                        correct: true,
+                    }),
+                    generateChoice({
+                        content: "Option Delta",
+                        correct: false,
+                    }),
+                ],
+                onChange: onChangeHandler,
+            });
+
+            // Act
+            userEvent.click(
+                screen.getByRole("checkbox", {name: "(Choice C) Option Gamma"}),
+            );
+
+            // Assert
+            expect(updatedValues).toMatchObject({
+                checked: [false, false, true, false],
+            });
+        });
     });
 
     describe("instruction text", () => {

package/src/widgets/__tests__/radio/choice-icon_test.jsx

@@ -64,4 +64,78 @@ describe("choice icon", () => {
             },
         );
     });
+
+    it("shows a checkmark for correct answers when product is set to library", () => {
+        // Arrange & Act
+        renderChoiceIcon({
+            product: "library",
+            correct: true,
+            reviewMode: true,
+            checked: true,
+            showCorrectness: true,
+        });
+
+        const choiceWrapper = screen.getByTestId(
+            `choice-icon__library-choice-icon`,
+        );
+        const choiceAttrib = choiceWrapper.getAttribute("class");
+
+        // Assert
+        expect(choiceAttrib).toContain("circleCorrect");
+    });
+
+    it("shows a dash for incorrect answers when product is set to library", () => {
+        // Arrange & Act
+        renderChoiceIcon({
+            product: "library",
+            correct: false,
+            reviewMode: true,
+            checked: true,
+            showCorrectness: true,
+        });
+
+        const choiceWrapper = screen.getByTestId(
+            `choice-icon__library-choice-icon`,
+        );
+        const choiceAttrib = choiceWrapper.getAttribute("class");
+
+        // Assert
+        expect(choiceAttrib).toContain("circleIncorrect");
+    });
+
+    it("displays green border for correct answers when product is set to sat", () => {
+        // Arrange & Act
+        renderChoiceIcon({
+            product: "sat",
+            correct: true,
+            reviewMode: true,
+            checked: true,
+        });
+
+        const choiceWrapper = screen.getByTestId(
+            `choice-icon__sat-choice-icon`,
+        );
+        const choiceStyle = choiceWrapper.getAttribute("style");
+
+        // Assert
+        expect(choiceStyle).toContain("border-color: #009900");
+    });
+
+    it("displays red border for incorrect answers when product is set to sat", () => {
+        // Arrange & Act
+        renderChoiceIcon({
+            product: "sat",
+            correct: false,
+            reviewMode: true,
+            checked: true,
+        });
+
+        const choiceWrapper = screen.getByTestId(
+            `choice-icon__sat-choice-icon`,
+        );
+        const choiceStyle = choiceWrapper.getAttribute("style");
+
+        // Assert
+        expect(choiceStyle).toContain("border-color: #990000");
+    });
 });

package/src/widgets/__tests__/radio/choice_test.jsx

@@ -109,20 +109,23 @@ describe("all choice options", () => {
 
 // Tests 1 of 2 element types used to select a choice
 describe("choice button", () => {
-    it("selects the choice by clicking the button", () => {
-        // Arrange / Act
-        const onChangeSpy = jest.fn();
-        renderChoice({onChange: onChangeSpy});
-
-        const button = screen.getByRole("button", {hidden: true});
-        userEvent.click(button);
-
-        // Assert
-        expect(onChangeSpy).toHaveBeenCalledWith({
-            checked: true,
-            crossedOut: false,
-        });
-    });
+    it.each([[true], [false]])(
+        "selects the choice by clicking the option when multiple select is: %s",
+        (multipleSelect: boolean) => {
+            // Arrange / Act
+            const onChangeSpy = jest.fn();
+            renderChoice({onChange: onChangeSpy, multipleSelect});
+
+            const button = screen.getByRole("button", {hidden: true});
+            userEvent.click(button);
+
+            // Assert
+            expect(onChangeSpy).toHaveBeenCalledWith({
+                checked: true,
+                crossedOut: false,
+            });
+        },
+    );
 
     it("has correct aria-disabled when disabled", () => {
         // Arrange / Act
@@ -183,22 +186,28 @@ describe("choice button", () => {
 
 // Tests 2 of 2 element types used to select a choice
 describe("choice input (screen reader only)", () => {
-    it("selects the choice by clicking the input", () => {
-        // Arrange / Act
-        const onChangeSpy = jest.fn();
-        renderChoice({onChange: onChangeSpy});
-
-        const input = screen.getByRole("radio", {
-            name: "(Choice A) This is a possible choice",
-        });
-        userEvent.click(input);
-
-        // Assert
-        expect(onChangeSpy).toHaveBeenCalledWith({
-            checked: true,
-            crossedOut: false,
-        });
-    });
+    it.each([[true], [false]])(
+        "selects the choice by clicking the option when multiple select is: %s",
+        (multipleSelect: boolean) => {
+            // Arrange / Act
+            const onChangeSpy = jest.fn();
+            renderChoice({onChange: onChangeSpy, multipleSelect});
+
+            const input = screen.getByRole(
+                multipleSelect ? "checkbox" : "radio",
+                {
+                    name: "(Choice A) This is a possible choice",
+                },
+            );
+            userEvent.click(input);
+
+            // Assert
+            expect(onChangeSpy).toHaveBeenCalledWith({
+                checked: true,
+                crossedOut: false,
+            });
+        },
+    );
 
     it("registers as unchecked with checked set to false", () => {
         // Arrange / Act