@khanacademy/perseus 1.3.2 → 1.3.4

package/src/widgets/__tests__/group_test.jsx

@@ -169,10 +169,10 @@ describe("group widget", () => {
 
         // Assert
         expect(userInput).toMatchInlineSnapshot(`
-            Array [
-              Array [
-                Object {
-                  "choicesSelected": Array [
+            [
+              [
+                {
+                  "choicesSelected": [
                     false,
                     false,
                     false,
@@ -181,11 +181,11 @@ describe("group widget", () => {
                   ],
                 },
               ],
-              Array [
-                Object {
+              [
+                {
                   "currentValue": "99",
                 },
-                Object {
+                {
                   "currentValue": "",
                 },
                 null,
@@ -204,32 +204,32 @@ describe("group widget", () => {
 
         // Assert
         expect(state).toMatchInlineSnapshot(`
-            Object {
-              "group 1": Object {
-                "radio 1": Object {
-                  "choices": Array [
-                    Object {
+            {
+              "group 1": {
+                "radio 1": {
+                  "choices": [
+                    {
                       "content": "$45$",
                       "correct": false,
                       "originalIndex": 0,
                     },
-                    Object {
+                    {
                       "content": "$42$",
                       "correct": false,
                       "originalIndex": 1,
                     },
-                    Object {
+                    {
                       "clue": "Here's a clue, this isn't the correct answer!",
                       "content": "$30$",
                       "correct": false,
                       "originalIndex": 2,
                     },
-                    Object {
+                    {
                       "content": "$18$",
                       "correct": false,
                       "originalIndex": 3,
                     },
-                    Object {
+                    {
                       "content": "$15$",
                       "correct": true,
                       "originalIndex": 4,
@@ -240,7 +240,7 @@ describe("group widget", () => {
                   "hasNoneOfTheAbove": false,
                   "multipleSelect": false,
                   "numCorrect": 1,
-                  "selectedChoices": Array [
+                  "selectedChoices": [
                     false,
                     false,
                     false,
@@ -249,26 +249,26 @@ describe("group widget", () => {
                   ],
                 },
               },
-              "group 2": Object {
-                "image 1": Object {
+              "group 2": {
+                "image 1": {
                   "alt": "A number line labeled 200 to 300 with tick marks at every 5 units. The tick marks at 200, 210, 220, 230, 240, 250, 260, 270, 280, 290, and 300 are labeled. A red circle labeled A is between 220 tick mark and 230 tick mark.",
-                  "backgroundImage": Object {
+                  "backgroundImage": {
                     "height": 80,
                     "url": "web+graphie://ka-perseus-graphie.s3.amazonaws.com/3351ccf19e60c28a1d08664f5c16defa76ed0348",
                     "width": 380,
                   },
-                  "box": Array [
+                  "box": [
                     380,
                     80,
                   ],
                   "caption": "",
-                  "labels": Array [],
-                  "range": Array [
-                    Array [
+                  "labels": [],
+                  "range": [
+                    [
                       0,
                       10,
                     ],
-                    Array [
+                    [
                       0,
                       10,
                     ],
@@ -276,8 +276,8 @@ describe("group widget", () => {
                   "static": false,
                   "title": "",
                 },
-                "numeric-input 1": Object {
-                  "answerForms": Array [],
+                "numeric-input 1": {
+                  "answerForms": [],
                   "coefficient": false,
                   "currentValue": "99",
                   "labelText": "value rounded to the nearest ten",
@@ -286,8 +286,8 @@ describe("group widget", () => {
                   "size": "normal",
                   "static": false,
                 },
-                "numeric-input 2": Object {
-                  "answerForms": Array [],
+                "numeric-input 2": {
+                  "answerForms": [],
                   "coefficient": false,
                   "labelText": "value rounded to the nearest hundred",
                   "multipleNumberInput": false,
@@ -296,29 +296,29 @@ describe("group widget", () => {
                   "static": false,
                 },
               },
-              "radio 1": Object {
-                "choices": Array [
-                  Object {
+              "radio 1": {
+                "choices": [
+                  {
                     "content": "",
                     "correct": false,
                     "originalIndex": 0,
                   },
-                  Object {
+                  {
                     "content": "",
                     "correct": false,
                     "originalIndex": 1,
                   },
-                  Object {
+                  {
                     "content": "",
                     "correct": false,
                     "originalIndex": 2,
                   },
-                  Object {
+                  {
                     "content": "",
                     "correct": false,
                     "originalIndex": 3,
                   },
-                  Object {
+                  {
                     "content": "",
                     "correct": true,
                     "originalIndex": 4,
@@ -329,7 +329,7 @@ describe("group widget", () => {
                 "hasNoneOfTheAbove": false,
                 "multipleSelect": false,
                 "numCorrect": 1,
-                "selectedChoices": Array [
+                "selectedChoices": [
                   false,
                   false,
                   false,
@@ -377,11 +377,11 @@ describe("group widget", () => {
 
         // Assert
         expect(guessAndScore).toMatchInlineSnapshot(`
-            Array [
-              Array [
-                Array [
-                  Object {
-                    "choicesSelected": Array [
+            [
+              [
+                [
+                  {
+                    "choicesSelected": [
                       false,
                       false,
                       false,
@@ -394,17 +394,17 @@ describe("group widget", () => {
                     "numCorrect": 1,
                   },
                 ],
-                Array [
-                  Object {
+                [
+                  {
                     "currentValue": "230",
                   },
-                  Object {
+                  {
                     "currentValue": "200",
                   },
                   null,
                 ],
               ],
-              Object {
+              {
                 "earned": 3,
                 "message": null,
                 "total": 3,
@@ -423,12 +423,12 @@ describe("group widget", () => {
 
         // Assert
         expect(paths).toMatchInlineSnapshot(`
-            Array [
-              Array [
+            [
+              [
                 "group 2",
                 "numeric-input 1",
               ],
-              Array [
+              [
                 "group 2",
                 "numeric-input 2",
               ],

package/src/widgets/__tests__/numeric-input_test.jsx

@@ -218,7 +218,7 @@ describe("static function validate", () => {
         const score = NumericInput.validate(useInput, rubric);
 
         expect(score).toMatchInlineSnapshot(`
-            Object {
+            {
               "earned": 1,
               "message": null,
               "total": 1,
@@ -252,7 +252,7 @@ describe("static function validate", () => {
         const score = NumericInput.validate(useInput, rubric);
 
         expect(score).toMatchInlineSnapshot(`
-            Object {
+            {
               "message": "We could not understand your answer. Please check your answer for extra text or symbols.",
               "type": "invalid",
             }
@@ -284,7 +284,7 @@ describe("static function validate", () => {
         const score = NumericInput.validate(useInput, rubric);
 
         expect(score).toMatchInlineSnapshot(`
-            Object {
+            {
               "earned": 1,
               "message": null,
               "total": 1,
@@ -318,7 +318,7 @@ describe("static function validate", () => {
         const score = NumericInput.validate(useInput, rubric);
 
         expect(score).toMatchInlineSnapshot(`
-            Object {
+            {
               "earned": 0,
               "message": null,
               "total": 1,
@@ -352,7 +352,7 @@ describe("static function validate", () => {
         const score = NumericInput.validate(useInput, rubric);
 
         expect(score).toMatchInlineSnapshot(`
-            Object {
+            {
               "earned": 1,
               "message": null,
               "total": 1,

package/src/widgets/__tests__/passage_test.jsx

@@ -116,7 +116,7 @@ describe("passage widget", () => {
 
         // Assert
         expect(score).toMatchInlineSnapshot(`
-            Object {
+            {
               "earned": 0,
               "message": null,
               "total": 0,

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

@@ -132,7 +132,7 @@ describe("base-radio", () => {
             expect(screen.getAllByRole("listitem")).toHaveLength(4);
         });
 
-        it("should toggle choice when inner element clicked", () => {
+        it("should not toggle choice when inner element clicked", () => {
             // Arrange
             let updatedValues = null;
             const onChangeHandler = (newValues) => {
@@ -155,6 +155,33 @@ describe("base-radio", () => {
                 screen.getByRole("radio", {name: "(Choice C) Option Gamma"}),
             );
 
+            // Assert
+            expect(updatedValues).toBeNull();
+        });
+
+        it("should toggle choice when choice icon clicked", () => {
+            // Arrange
+            let updatedValues = null;
+            const onChangeHandler = (newValues) => {
+                updatedValues = newValues;
+            };
+
+            renderBaseRadio({
+                editMode: 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.getAllByTestId("choice-icon__library-choice-icon")[2],
+            );
+
             // Assert
             expect(updatedValues).toMatchObject({
                 checked: [false, false, true, false],

package/src/widgets/categorizer.jsx

@@ -257,7 +257,7 @@ export class Categorizer extends React.Component<Props, State> {
 const pageMargin = 16;
 
 // Stylesheets aren't directly testable
-/* istanbul ignore next */
+/* c8 ignore next */
 const styles = StyleSheet.create({
     mobileTable: {
         [mediaQueries.smOrSmaller]: {

package/src/widgets/expression.jsx

@@ -122,7 +122,7 @@ export class Expression extends React.Component<Props, ExpressionState> {
             // incorrectly. For example if the answer is using a symbol defined
             // in the function variables list for the expression.
             if (!expression.parsed) {
-                /* istanbul ignore next */
+                /* c8 ignore next */
                 Log.error(
                     "Unable to parse solution answer for expression",
                     PerseusErrors.InvalidInput,
@@ -365,12 +365,12 @@ export class Expression extends React.Component<Props, ExpressionState> {
     };
 
     _handleFocus: () => void = () => {
-        /* istanbul ignore next */
+        /* c8 ignore next */
         this.props.onFocus([]);
     };
 
     _handleBlur: () => void = () => {
-        /* istanbul ignore next */
+        /* c8 ignore next */
         this.props.onBlur([]);
     };
 
@@ -407,7 +407,7 @@ export class Expression extends React.Component<Props, ExpressionState> {
     getInputPaths: () => $ReadOnlyArray<$ReadOnlyArray<any>> = () => {
         // The widget itself is an input, so we return a single empty list to
         // indicate this.
-        /* istanbul ignore next */
+        /* c8 ignore next */
         return [[]];
     };
 
@@ -415,7 +415,7 @@ export class Expression extends React.Component<Props, ExpressionState> {
     getGrammarTypeForPath: (inputPath: string) => string = (
         inputPath: string,
     ) => {
-        /* istanbul ignore next */
+        /* c8 ignore next */
         return "expression";
     };
 
@@ -600,7 +600,7 @@ const keypadConfigurationForProps = (
 };
 
 const propUpgrades = {
-    /* istanbul ignore next */
+    /* c8 ignore next */
     "1": (v0props: $FlowFixMe): PerseusExpressionWidgetOptions => ({
         times: v0props.times,
         buttonSets: v0props.buttonSets,

package/src/widgets/input-number.jsx

@@ -170,7 +170,7 @@ class InputNumber extends React.Component<Props> {
         let answerBlurb = null;
 
         // SAT is deprecated and not testable
-        /* istanbul ignore if */
+        /* c8 ignore if */
         if (this.props.apiOptions.satStyling && rubric) {
             const score = this.simpleValidate(rubric);
             correct = score.type === "points" && score.earned === score.total;
@@ -215,7 +215,7 @@ class InputNumber extends React.Component<Props> {
         );
 
         // SAT is deprecated, answer blurb is an SAT feature
-        /* istanbul ignore if */
+        /* c8 ignore if */
         if (answerBlurb) {
             return (
                 <span className="perseus-input-with-answer-blurb">
@@ -272,14 +272,14 @@ class InputNumber extends React.Component<Props> {
     getInputPaths: () => $ReadOnlyArray<Path> = () => {
         // The widget itself is an input, so we return a single empty list to
         // indicate this.
-        /* istanbul ignore next */
+        /* c8 ignore next */
         return [[]];
     };
 
     // Note: We believe that this isn't used anywhere but are leaving it during
     // the initial refactor
     getGrammarTypeForPath: (Path) => string = (path) => {
-        /* istanbul ignore next */
+        /* c8 ignore next */
         return "number";
     };
 

package/src/widgets/numeric-input.jsx

@@ -267,7 +267,7 @@ export class NumericInput extends React.Component<Props, State> {
         let answerBlurb;
 
         /* Ignore this block because SAT is deprecated */
-        /* istanbul ignore next */
+        /* c8 ignore next */
         if (this.props.apiOptions.satStyling && rubric) {
             const score = this.simpleValidate(rubric);
             correct = score.type === "points" && score.earned === score.total;
@@ -361,12 +361,12 @@ export class NumericInput extends React.Component<Props, State> {
     getInputPaths: () => $ReadOnlyArray<$ReadOnlyArray<string>> = () => {
         // The widget itself is an input, so we return a single empty list to
         // indicate this.
-        /* istanbul ignore next */
+        /* c8 ignore next */
         return [[]];
     };
 
     getGrammarTypeForPath: (FocusPath) => string = (inputPath) => {
-        /* istanbul ignore next */
+        /* c8 ignore next */
         return "number";
     };
 
@@ -375,7 +375,7 @@ export class NumericInput extends React.Component<Props, State> {
         newValue,
         cb,
     ) => {
-        /* istanbul ignore next */
+        /* c8 ignore next */
         this.props.onChange(
             {
                 currentValue: newValue,
@@ -475,7 +475,7 @@ export class NumericInput extends React.Component<Props, State> {
         );
 
         /* This only gets used with SAT Content */
-        /* istanbul ignore next if */
+        /* c8 ignore next if */
         if (answerBlurb) {
             return (
                 <span className="perseus-input-with-answer-blurb">

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

@@ -256,7 +256,7 @@ function BaseRadio(props: Props): React.Node {
                 </div>
             )}
             <ul className={className} style={{listStyle: "none"}}>
-                {choices.map(function (choice, i) {
+                {choices.map((choice, i) => {
                     let Element = Choice;
                     const ref = React.createRef();
                     choiceRefs.current[i] = ref;
@@ -277,6 +277,11 @@ function BaseRadio(props: Props): React.Node {
                             (reviewMode || choice.showRationale),
                         pos: i,
                         onChange: (newValues) => {
+                            // editMode selection is handled in clickHandler
+                            if (editMode) {
+                                return;
+                            }
+
                             updateChoice(i, newValues);
                         },
                         ref,
@@ -379,7 +384,7 @@ function BaseRadio(props: Props): React.Node {
                                 // radio icon, then we want to trigger the
                                 // check by flipping the choice of the icon.
                                 if (elem.getAttribute("data-is-radio-icon")) {
-                                    this.updateChoice(i, {
+                                    updateChoice(i, {
                                         checked: !choice.checked,
                                         crossedOut: choice.crossedOut,
                                     });
@@ -408,7 +413,7 @@ function BaseRadio(props: Props): React.Node {
                             <Element {...elementProps} />
                         </li>
                     );
-                }, this)}
+                })}
             </ul>
         </fieldset>
     );

package/src/widgets/radio/choice-icon/library-choice-icon.jsx

@@ -149,8 +149,8 @@ function LibraryChoiceIcon(props: LibraryChoiceIconProps): React.Node {
                             (checked || previouslyAnswered) &&
                             styles.circleIncorrectAnswered,
                     )}
-                    // used in BaseRadio to check if we actually clicked on the
-                    // radio icon
+                    // used in BaseRadio editMode to check
+                    // if we actually clicked on the radio icon
                     data-is-radio-icon={true}
                 >
                     <div className={css(styles.innerWrapper)}>

package/src/widgets/radio/choice.jsx

@@ -228,7 +228,7 @@ function Choice(props: ChoicePropsWithForwardRef): React.Node {
                         apiOptions.staticRender ||
                         apiOptions.readOnly
                     }
-                    style={{flex: 1}}
+                    style={{flex: 1, color: Color.offBlack}}
                     ref={(forwardedRef: any)}
                     aria-hidden="true"
                 >

package/src/widgets/radio/widget.jsx

@@ -157,7 +157,7 @@ class Radio extends React.Component<Props> {
             };
             // Support legacy choiceState implementation
         }
-        /* istanbul ignore if - props.values is deprecated */
+        /* c8 ignore if - props.values is deprecated */
         const {values} = props;
         if (values) {
             let noneOfTheAboveIndex = null;
@@ -414,7 +414,7 @@ class Radio extends React.Component<Props> {
             choiceStates = this.props.choiceStates;
         } else if (this.props.values) {
             // Support legacy choiceStates implementation
-            /* istanbul ignore next - props.values is deprecated */
+            /* c8 ignore next - props.values is deprecated */
             choiceStates = this.props.values.map((val) => ({
                 selected: val,
                 crossedOut: false,