Destructure props more consistently. Streamline test.

Khan · Aug 22, 2024 · 388a690 · 388a690
1 parent 9fa4074
commit 388a690
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 12 deletions.
diff --git a/packages/perseus-editor/src/components/__tests__/locked-label-settings.test.tsx b/packages/perseus-editor/src/components/__tests__/locked-label-settings.test.tsx
@@ -135,8 +135,10 @@ describe("Locked Label Settings", () => {
             // Assert
             expect(onChangeProps).toHaveBeenCalledTimes(2);
             // Calls are not being accumulated because they're mocked.
-            expect(onChangeProps).toHaveBeenNthCalledWith(1, {coord: [1, 0]});
-            expect(onChangeProps).toHaveBeenNthCalledWith(2, {coord: [0, 2]});
+            expect(onChangeProps.mock.calls).toEqual([
+                [{coord: [1, 0]}],
+                [{coord: [0, 2]}],
+            ]);
         });
 
         test("calls 'onChangeProps' when text is changed", async () => {
@@ -157,17 +159,18 @@ describe("Locked Label Settings", () => {
             });
             await userEvent.type(textInput, "x^2");
 
-            // Assert
             // Assert
             expect(onChangeProps).toHaveBeenCalledTimes(3);
             // NOTE: Since the 'onChangeProps' function is being mocked,
             //   the equation doesn't get updated,
             //   and therefore the keystrokes don't accumulate.
             //   This is reflected in the calls to 'onChangeProps' being
             //   just 1 character at a time.
-            expect(onChangeProps).toHaveBeenNthCalledWith(1, {text: "x"});
-            expect(onChangeProps).toHaveBeenNthCalledWith(2, {text: "^"});
-            expect(onChangeProps).toHaveBeenNthCalledWith(3, {text: "2"});
+            expect(onChangeProps.mock.calls).toEqual([
+                [{text: "x"}],
+                [{text: "^"}],
+                [{text: "2"}],
+            ]);
         });
 
         test("calls 'onChangeProps' when color is changed", async () => {

diff --git a/packages/perseus-editor/src/components/graph-locked-figures/locked-label-settings.tsx b/packages/perseus-editor/src/components/graph-locked-figures/locked-label-settings.tsx
@@ -37,12 +37,23 @@ export type Props = LockedLabelType &
     };
 
 export default function LockedLabelSettings(props: Props) {
-    const {coord, color, size, text, onChangeProps} = props;
+    const {
+        type,
+        coord,
+        color,
+        size,
+        text,
+        expanded,
+        onChangeProps,
+        onMove,
+        onRemove,
+        onToggle,
+    } = props;
 
     return (
         <PerseusEditorAccordion
-            expanded={props.expanded}
-            onToggle={props.onToggle}
+            expanded={expanded}
+            onToggle={onToggle}
             header={
                 <View style={[styles.row, styles.accordionHeaderContainer]}>
                     <LabelLarge>
@@ -124,9 +135,9 @@ export default function LockedLabelSettings(props: Props) {
 
             {/* Actions */}
             <LockedFigureSettingsActions
-                figureType={props.type}
-                onMove={props.onMove}
-                onRemove={props.onRemove}
+                figureType={type}
+                onMove={onMove}
+                onRemove={onRemove}
             />
         </PerseusEditorAccordion>
     );