@khanacademy/math-input 4.3.0 → 5.0.0

package/src/components/key-handlers/handle-jump-out.ts

@@ -3,7 +3,7 @@ import {CursorContext} from "../input/cursor-contexts";
 import {
     isFraction,
     isParens,
-    contextForCursor,
+    getCursorContext,
     getCursor,
 } from "../input/mathquill-helpers";
 import {mathQuillInstance} from "../input/mathquill-instance";
@@ -26,7 +26,7 @@ const KeysForJumpContext = {
  */
 function handleJumpOut(mathField: MathFieldInterface, key: Key): void {
     const cursor = getCursor(mathField);
-    const context = contextForCursor(cursor);
+    const context = getCursorContext(mathField);
 
     // Validate that the current cursor context matches the key's intent.
     if (KeysForJumpContext[context] !== key) {
@@ -43,6 +43,7 @@ function handleJumpOut(mathField: MathFieldInterface, key: Key): void {
             // Insert at the end of the parentheses, and then navigate right
             // once more to get 'beyond' the parentheses.
             cursor.insRightOf(cursor.parent.parent);
+            mathField.keystroke("Right");
             break;
 
         case CursorContext.BEFORE_FRACTION:

package/src/components/keypad/__tests__/keypad-v2-mathquill.test.tsx

@@ -65,6 +65,7 @@ function V2KeypadWithMathquill(props: Props) {
                             multiplicationDot
                             preAlgebra
                             trigonometry
+                            sendEvent={async () => {}}
                         />
                     </div>
                 }
@@ -95,26 +96,26 @@ describe("Keypad v2 with MathQuill", () => {
         // Act
 
         // a^2
-        userEvent.click(screen.getByRole("button", {name: "Extras"}));
+        userEvent.click(screen.getByRole("tab", {name: "Extras"}));
         userEvent.click(screen.getByRole("button", {name: "a"}));
-        userEvent.click(screen.getByRole("button", {name: "Operators"}));
+        userEvent.click(screen.getByRole("tab", {name: "Operators"}));
         userEvent.click(screen.getByRole("button", {name: "Square"}));
 
         // +
-        userEvent.click(screen.getByRole("button", {name: "Numbers"}));
+        userEvent.click(screen.getByRole("tab", {name: "Numbers"}));
         userEvent.click(screen.getByRole("button", {name: "Plus"}));
 
         // b^2 =
-        userEvent.click(screen.getByRole("button", {name: "Extras"}));
+        userEvent.click(screen.getByRole("tab", {name: "Extras"}));
         userEvent.click(screen.getByRole("button", {name: "b"}));
-        userEvent.click(screen.getByRole("button", {name: "Operators"}));
+        userEvent.click(screen.getByRole("tab", {name: "Operators"}));
         userEvent.click(screen.getByRole("button", {name: "Square"}));
         userEvent.click(screen.getByRole("button", {name: "Equals sign"}));
 
         // c^2
-        userEvent.click(screen.getByRole("button", {name: "Extras"}));
+        userEvent.click(screen.getByRole("tab", {name: "Extras"}));
         userEvent.click(screen.getByRole("button", {name: "c"}));
-        userEvent.click(screen.getByRole("button", {name: "Operators"}));
+        userEvent.click(screen.getByRole("tab", {name: "Operators"}));
         userEvent.click(screen.getByRole("button", {name: "Square"}));
 
         // Assert
@@ -131,26 +132,26 @@ describe("Keypad v2 with MathQuill", () => {
         // Act
 
         // c = /Square root
-        userEvent.click(screen.getByRole("button", {name: "Extras"}));
+        userEvent.click(screen.getByRole("tab", {name: "Extras"}));
         userEvent.click(screen.getByRole("button", {name: "c"}));
-        userEvent.click(screen.getByRole("button", {name: "Operators"}));
+        userEvent.click(screen.getByRole("tab", {name: "Operators"}));
         userEvent.click(screen.getByRole("button", {name: "Equals sign"}));
         userEvent.click(screen.getByRole("button", {name: "Square root"}));
 
         // a^2
-        userEvent.click(screen.getByRole("button", {name: "Extras"}));
+        userEvent.click(screen.getByRole("tab", {name: "Extras"}));
         userEvent.click(screen.getByRole("button", {name: "a"}));
-        userEvent.click(screen.getByRole("button", {name: "Operators"}));
+        userEvent.click(screen.getByRole("tab", {name: "Operators"}));
         userEvent.click(screen.getByRole("button", {name: "Square"}));
 
         // +
-        userEvent.click(screen.getByRole("button", {name: "Numbers"}));
+        userEvent.click(screen.getByRole("tab", {name: "Numbers"}));
         userEvent.click(screen.getByRole("button", {name: "Plus"}));
 
         // b^2
-        userEvent.click(screen.getByRole("button", {name: "Extras"}));
+        userEvent.click(screen.getByRole("tab", {name: "Extras"}));
         userEvent.click(screen.getByRole("button", {name: "b"}));
-        userEvent.click(screen.getByRole("button", {name: "Operators"}));
+        userEvent.click(screen.getByRole("tab", {name: "Operators"}));
         userEvent.click(screen.getByRole("button", {name: "Square"}));
 
         // Assert
@@ -170,15 +171,15 @@ describe("Keypad v2 with MathQuill", () => {
 
         // Argument is empty because mathquill generates textarea w/o label
         userEvent.type(screen.getByRole("textbox"), "a");
-        userEvent.click(screen.getByRole("button", {name: "Operators"}));
+        userEvent.click(screen.getByRole("tab", {name: "Operators"}));
         userEvent.click(screen.getByRole("button", {name: "Square"}));
 
         userEvent.type(screen.getByRole("textbox"), "+");
 
         // b^2
-        userEvent.click(screen.getByRole("button", {name: "Extras"}));
+        userEvent.click(screen.getByRole("tab", {name: "Extras"}));
         userEvent.click(screen.getByRole("button", {name: "b"}));
-        userEvent.click(screen.getByRole("button", {name: "Operators"}));
+        userEvent.click(screen.getByRole("tab", {name: "Operators"}));
         userEvent.click(screen.getByRole("button", {name: "Square"}));
         userEvent.type(screen.getByRole("textbox"), "=c^2");
 
@@ -194,33 +195,35 @@ describe("Keypad v2 with MathQuill", () => {
         );
 
         // Act
-        // Write `a^2+b^2=c^2` using the keypad
-        const buttonPressesForFormula = [
-            "Extras",
-            "a",
-            "Operators",
-            "Square",
-            "Numbers",
-            "Plus",
-            "Extras",
-            "b",
-            "Operators",
-            "Square",
-            "Equals sign",
-            "Extras",
-            "c",
-            "Operators",
-            "Square",
-        ];
-        buttonPressesForFormula.forEach((button) => {
-            userEvent.click(screen.getByRole("button", {name: button}));
-        });
+
+        // a^2
+        userEvent.click(screen.getByRole("tab", {name: "Extras"}));
+        userEvent.click(screen.getByRole("button", {name: "a"}));
+        userEvent.click(screen.getByRole("tab", {name: "Operators"}));
+        userEvent.click(screen.getByRole("button", {name: "Square"}));
+
+        // +
+        userEvent.click(screen.getByRole("tab", {name: "Numbers"}));
+        userEvent.click(screen.getByRole("button", {name: "Plus"}));
+
+        // b^2
+        userEvent.click(screen.getByRole("tab", {name: "Extras"}));
+        userEvent.click(screen.getByRole("button", {name: "b"}));
+        userEvent.click(screen.getByRole("tab", {name: "Operators"}));
+        userEvent.click(screen.getByRole("button", {name: "Square"}));
+
+        // =c^2
+        userEvent.click(screen.getByRole("button", {name: "Equals sign"}));
+        userEvent.click(screen.getByRole("tab", {name: "Extras"}));
+        userEvent.click(screen.getByRole("button", {name: "c"}));
+        userEvent.click(screen.getByRole("tab", {name: "Operators"}));
+        userEvent.click(screen.getByRole("button", {name: "Square"}));
 
         // Assert
         // make sure the formula was typed correctly
         expect(mockMathInputCallback).toHaveBeenLastCalledWith("a^2+b^2=c^2");
 
-        userEvent.click(screen.getByRole("button", {name: "Numbers"}));
+        userEvent.click(screen.getByRole("tab", {name: "Numbers"}));
         // delete: need 14 backspaces in MathQuill to delete `a^2+b^2=c^2`
         for (let i = 0; i < 14; i++) {
             userEvent.click(screen.getByRole("button", {name: "Delete"}));

package/src/components/keypad/__tests__/keypad.test.tsx

@@ -0,0 +1,42 @@
+import {render, screen} from "@testing-library/react";
+import * as React from "react";
+
+import keyConfigs from "../../../data/key-configs";
+import {CursorContext} from "../../input/cursor-contexts";
+import Keypad from "../index";
+
+const contextToKeyAria = {
+    [CursorContext.IN_PARENS]: keyConfigs.JUMP_OUT_PARENTHESES.ariaLabel,
+    [CursorContext.IN_SUPER_SCRIPT]: keyConfigs.JUMP_OUT_EXPONENT.ariaLabel,
+    [CursorContext.IN_SUB_SCRIPT]: keyConfigs.JUMP_OUT_BASE.ariaLabel,
+    [CursorContext.IN_NUMERATOR]: keyConfigs.JUMP_OUT_NUMERATOR.ariaLabel,
+    [CursorContext.IN_DENOMINATOR]: keyConfigs.JUMP_OUT_DENOMINATOR.ariaLabel,
+    [CursorContext.BEFORE_FRACTION]: keyConfigs.JUMP_INTO_NUMERATOR.ariaLabel,
+};
+
+describe("keypad", () => {
+    describe("shows navigation buttons", () => {
+        Object.entries(contextToKeyAria).forEach(([context, ariaLabel]) => {
+            it(`shows button for ${context}`, () => {
+                // Arrange
+                // Act
+                render(
+                    <Keypad
+                        onClickKey={() => {}}
+                        cursorContext={context as CursorContext}
+                        sendEvent={async () => {
+                            /* TODO: verify correct analytics event sent */
+                        }}
+                    />,
+                );
+
+                // Assert
+                expect(
+                    screen.getByRole("button", {
+                        name: ariaLabel,
+                    }),
+                );
+            });
+        });
+    });
+});