@khanacademy/math-input 0.4.1 → 0.5.2

package/src/components/__tests__/gesture-state-machine_test.js

@@ -0,0 +1,437 @@
+import GestureStateMachine from "../gesture-state-machine.js";
+
+const swipeThresholdPx = 5;
+const longPressWaitTimeMs = 5;
+const holdIntervalMs = 5;
+
+// Generates a set of handlers, to be passed to a GestureStateMachine instance,
+// that track any callbacks, along with their arguments, by pushing to the
+// provided buffer on call.
+const eventTrackers = (buffer) => {
+    const handlers = {};
+    const callbackNames = [
+        "onBlur",
+        "onFocus",
+        "onTrigger",
+        "onTouchEnd",
+        "onLongPress",
+        "onSwipeChange",
+        "onSwipeEnd",
+    ];
+    callbackNames.forEach((callbackName) => {
+        handlers[callbackName] = function () {
+            buffer.push([callbackName, ...arguments]);
+        };
+    });
+    return handlers;
+};
+
+// Arbitrary node IDs (representative of arbitrary keys) to be used in testing.
+const NodeIds = {
+    first: "first",
+    second: "second",
+    third: "third",
+    swipeDisabled: "swipeDisabled",
+    multiPressable: "multiPressable",
+};
+
+describe("GestureStateMachine", () => {
+    let eventBuffer;
+    let stateMachine;
+
+    beforeEach(() => {
+        eventBuffer = [];
+        stateMachine = new GestureStateMachine(
+            eventTrackers(eventBuffer),
+            {
+                swipeThresholdPx,
+                longPressWaitTimeMs,
+                holdIntervalMs,
+            },
+            [NodeIds.swipeDisabled],
+            [NodeIds.multiPressable],
+        );
+    });
+
+    const assertEvents = (expectedEvents) => {
+        expect(eventBuffer).toStrictEqual(expectedEvents);
+    };
+
+    it("should trigger a tap on a simple button", () => {
+        const touchId = 1;
+
+        // Trigger a touch start, followed immediately by a touch end.
+        stateMachine.onTouchStart(() => NodeIds.first, touchId, 0);
+        stateMachine.onTouchEnd(() => NodeIds.first, touchId, 0);
+
+        // Assert that we saw a focus and a touch end, in that order.
+        const expectedEvents = [
+            ["onFocus", NodeIds.first],
+            ["onTouchEnd", NodeIds.first],
+        ];
+        assertEvents(expectedEvents);
+    });
+
+    it("should shift focus to a new button on move", () => {
+        const touchId = 1;
+
+        // Trigger a touch start on one node before moving over another node and
+        // releasing.
+        stateMachine.onTouchStart(() => NodeIds.first, touchId, 0);
+        stateMachine.onTouchMove(() => NodeIds.second, touchId, 0);
+        stateMachine.onTouchEnd(() => NodeIds.second, touchId, 0);
+
+        // Assert that we saw a focus on both nodes.
+        const expectedEvents = [
+            ["onFocus", NodeIds.first],
+            ["onFocus", NodeIds.second],
+            ["onTouchEnd", NodeIds.second],
+        ];
+        assertEvents(expectedEvents);
+    });
+
+    it("should trigger a long press on hold", () => {
+        const touchId = 1;
+
+        /// Trigger a touch start.
+        stateMachine.onTouchStart(() => NodeIds.first, touchId, 0);
+
+        // Assert that we see a focus event immediately.
+        const initialExpectedEvents = [["onFocus", NodeIds.first]];
+        assertEvents(initialExpectedEvents);
+
+        jest.advanceTimersByTime(longPressWaitTimeMs);
+
+        const expectedEventsAfterLongPress = [
+            ...initialExpectedEvents,
+            ["onLongPress", NodeIds.first],
+        ];
+        assertEvents(expectedEventsAfterLongPress);
+
+        // Finish up the interaction.
+        stateMachine.onTouchEnd(() => NodeIds.first, touchId, 0);
+
+        // Assert that we still see a touch-end.
+        const expectedEventsAfterRelease = [
+            ...expectedEventsAfterLongPress,
+            ["onTouchEnd", NodeIds.first],
+        ];
+        assertEvents(expectedEventsAfterRelease);
+    });
+
+    it("should trigger multiple presses on hold", () => {
+        const touchId = 1;
+
+        // Trigger a touch start on the multi-pressable node.
+        stateMachine.onTouchStart(() => NodeIds.multiPressable, touchId, 0);
+
+        // Assert that we see an immediate focus and trigger.
+        const initialExpectedEvents = [
+            ["onFocus", NodeIds.multiPressable],
+            ["onTrigger", NodeIds.multiPressable],
+        ];
+        assertEvents(initialExpectedEvents);
+
+        jest.advanceTimersByTime(holdIntervalMs);
+
+        // Assert that we see an additional trigger after the delay.
+        const expectedEventsAfterHold = [
+            ...initialExpectedEvents,
+            ["onTrigger", NodeIds.multiPressable],
+        ];
+        assertEvents(expectedEventsAfterHold);
+
+        // Now release, and verify that we see a blur, but no touch-end.
+        stateMachine.onTouchEnd(() => NodeIds.multiPressable, touchId, 0);
+        const expectedEventsAfterRelease = [
+            ...expectedEventsAfterHold,
+            ["onBlur"],
+        ];
+        assertEvents(expectedEventsAfterRelease);
+    });
+
+    it("should be robust to multiple touch starts", () => {
+        const touchId = 1;
+
+        // Trigger a touch start on the multi-pressable node twice, because
+        // the webview was acting up.
+        stateMachine.onTouchStart(() => NodeIds.multiPressable, touchId, 0);
+        stateMachine.onTouchStart(() => NodeIds.multiPressable, touchId, 0);
+
+        // Assert that we see only one set of focus and triggers.
+        const initialExpectedEvents = [
+            ["onFocus", NodeIds.multiPressable],
+            ["onTrigger", NodeIds.multiPressable],
+        ];
+        assertEvents(initialExpectedEvents);
+
+        jest.advanceTimersByTime(holdIntervalMs);
+
+        // Assert that we see an additional trigger after the delay.
+        const expectedEventsAfterHold = [
+            ...initialExpectedEvents,
+            ["onTrigger", NodeIds.multiPressable],
+        ];
+        assertEvents(expectedEventsAfterHold);
+
+        // Now release, and verify that we see a blur, but no touch-end.
+        stateMachine.onTouchEnd(() => NodeIds.multiPressable, touchId, 0);
+        const expectedEventsAfterRelease = [
+            ...expectedEventsAfterHold,
+            ["onBlur"],
+        ];
+        assertEvents(expectedEventsAfterRelease);
+
+        jest.advanceTimersByTime(holdIntervalMs);
+        // Ensure the touch end cleaned it up, and that we didn't
+        // create multiple listeners.
+        assertEvents(expectedEventsAfterRelease);
+    });
+
+    /* Swiping. */
+
+    it("should transition to a swipe", () => {
+        const touchId = 1;
+
+        // Trigger a touch start, followed by a move past the swipe threshold.
+        const startX = 0;
+        const swipeDistancePx = swipeThresholdPx + 1;
+        stateMachine.onTouchStart(() => NodeIds.first, touchId, startX);
+        stateMachine.onTouchMove(
+            () => NodeIds.first,
+            touchId,
+            startX + swipeDistancePx,
+            true,
+        );
+        stateMachine.onTouchEnd(
+            () => NodeIds.first,
+            touchId,
+            startX + swipeDistancePx,
+        );
+
+        // Assert that the node is focused and then blurred before transitioning
+        // to a swipe.
+        const expectedEvents = [
+            ["onFocus", NodeIds.first],
+            ["onBlur"],
+            ["onSwipeChange", swipeDistancePx],
+            ["onSwipeEnd", swipeDistancePx],
+        ];
+        assertEvents(expectedEvents);
+    });
+
+    it("should not transition to a swipe when swiping is diabled", () => {
+        const touchId = 1;
+
+        // Trigger a touch start, followed by a move past the swipe threshold.
+        const startX = 0;
+        const swipeDistancePx = swipeThresholdPx + 1;
+        stateMachine.onTouchStart(() => NodeIds.first, touchId, startX);
+        stateMachine.onTouchMove(
+            () => NodeIds.first,
+            touchId,
+            startX + swipeDistancePx,
+            false,
+        );
+
+        // Assert that the node is focused but never blurred.
+        const expectedEvents = [["onFocus", NodeIds.first]];
+        assertEvents(expectedEvents);
+    });
+
+    it("should not transition to a swipe on drag from a locked key", () => {
+        const touchId = 1;
+
+        // Trigger a touch start, followed by a move past the swipe threshold.
+        const startX = 0;
+        const swipeDistancePx = swipeThresholdPx + 1;
+        stateMachine.onTouchStart(() => NodeIds.swipeDisabled, touchId, startX);
+        stateMachine.onTouchMove(
+            () => NodeIds.swipeDisabled,
+            touchId,
+            startX + swipeDistancePx,
+            true,
+        );
+
+        // Assert that the node is focused but never blurred.
+        const expectedEvents = [["onFocus", NodeIds.swipeDisabled]];
+        assertEvents(expectedEvents);
+    });
+
+    /* Multi-touch. */
+
+    it("should respect simultaneous taps by two fingers", () => {
+        const firstTouchId = 1;
+        const secondTouchId = 2;
+
+        // Tap down on the first node, then on the second node; then release
+        // on the second, and then the first.
+        stateMachine.onTouchStart(() => NodeIds.first, firstTouchId, 0);
+        stateMachine.onTouchStart(() => NodeIds.second, secondTouchId, 0);
+        stateMachine.onTouchEnd(() => NodeIds.second, secondTouchId, 0);
+        stateMachine.onTouchEnd(() => NodeIds.first, firstTouchId, 0);
+
+        // Assert that we saw a focus and a touch end, in that order.
+        const expectedEvents = [
+            ["onFocus", NodeIds.first],
+            ["onFocus", NodeIds.second],
+            ["onTouchEnd", NodeIds.second],
+            ["onTouchEnd", NodeIds.first],
+        ];
+        assertEvents(expectedEvents);
+    });
+
+    it("should ignore any additional touches when swiping", () => {
+        const firstTouchId = 1;
+        const secondTouchId = 2;
+        const thirdTouchId = 3;
+
+        // Tap down on the first node, then on the second node. Then use the
+        const startX = 0;
+        stateMachine.onTouchStart(() => NodeIds.first, firstTouchId, startX);
+        stateMachine.onTouchStart(() => NodeIds.second, secondTouchId, startX);
+
+        // Now, swipe with the second finger.
+        const swipeDistancePx = swipeThresholdPx + 1;
+        stateMachine.onTouchMove(
+            () => NodeIds.second,
+            secondTouchId,
+            startX + swipeDistancePx,
+            true,
+        );
+
+        const expectedEventsAfterSwipeStart = [
+            ["onFocus", NodeIds.first],
+            ["onFocus", NodeIds.second],
+            ["onBlur"],
+            ["onSwipeChange", startX + swipeDistancePx],
+        ];
+        assertEvents(expectedEventsAfterSwipeStart);
+
+        // Send some touch events via the non-swiping but active touch,
+        // simulating moving the finger over another node, and even moving it
+        // enough to swipe, before releasing.
+        stateMachine.onTouchMove(() => NodeIds.first, firstTouchId, 0);
+        stateMachine.onTouchMove(() => NodeIds.third, firstTouchId, 0);
+        stateMachine.onTouchMove(
+            () => NodeIds.third,
+            firstTouchId,
+            startX + swipeDistancePx,
+            true,
+        );
+        stateMachine.onTouchEnd(() => NodeIds.third, firstTouchId, 0);
+
+        // Assert that we see no new events.
+        assertEvents(expectedEventsAfterSwipeStart);
+
+        // Start a new touch event, over any node.
+        stateMachine.onTouchStart(() => NodeIds.first, thirdTouchId, 0);
+
+        // Assert that we still see no new events.
+        assertEvents(expectedEventsAfterSwipeStart);
+
+        // Finally, release with the second finger, which is mid-swipe.
+        stateMachine.onTouchEnd(
+            () => NodeIds.second,
+            secondTouchId,
+            startX + swipeDistancePx,
+        );
+        const expectedEventsAfterSwipeEnd = [
+            ...expectedEventsAfterSwipeStart,
+            ["onSwipeEnd", startX + swipeDistancePx],
+        ];
+        assertEvents(expectedEventsAfterSwipeEnd);
+    });
+
+    it("should track swipe displacement on a per-finger basis", () => {
+        const firstTouchId = 1;
+        const firstTouchStartX = 15;
+        const secondTouchId = 2;
+        const secondTouchStartX = firstTouchStartX + 2 * swipeThresholdPx;
+
+        // Kick off two separate touch gestures at positions separated by more
+        // than the swipe displacement.
+        stateMachine.onTouchStart(
+            () => NodeIds.first,
+            firstTouchId,
+            firstTouchStartX,
+        );
+        stateMachine.onTouchStart(
+            () => NodeIds.second,
+            secondTouchId,
+            secondTouchStartX,
+        );
+
+        // Move less than the swipe threshold with both fingers.
+        stateMachine.onTouchMove(
+            () => NodeIds.first,
+            firstTouchId,
+            firstTouchStartX + swipeThresholdPx - 1,
+            true,
+        );
+        stateMachine.onTouchMove(
+            () => NodeIds.second,
+            secondTouchId,
+            secondTouchStartX + swipeThresholdPx - 1,
+            true,
+        );
+
+        // Assert that we haven't started swiping--all we've done is focused the
+        // various nodes.
+        const initialExpectedEvents = [
+            ["onFocus", NodeIds.first],
+            ["onFocus", NodeIds.second],
+        ];
+        assertEvents(initialExpectedEvents);
+
+        // Swipe past the threshold with one finger.
+        const swipeDistancePx = swipeThresholdPx + 1;
+        stateMachine.onTouchMove(
+            () => NodeIds.first,
+            firstTouchId,
+            firstTouchStartX + swipeDistancePx,
+            true,
+        );
+        const expectedEventsAfterSwipeStart = [
+            ...initialExpectedEvents,
+            ["onBlur"],
+            ["onSwipeChange", swipeDistancePx],
+        ];
+        assertEvents(expectedEventsAfterSwipeStart);
+    });
+
+    it("should be robust to extraneous fingers", () => {
+        const firstTouchId = 1;
+        const firstTouchStartX = 15;
+        const secondTouchId = 2;
+        const secondTouchStartX = firstTouchStartX + 2 * swipeThresholdPx;
+
+        // The first finger initiates a gesture, but the second finger starts
+        // elsewhere on the screen and doesn't register a start...
+        stateMachine.onTouchStart(
+            () => NodeIds.first,
+            firstTouchId,
+            firstTouchStartX,
+        );
+
+        // Move the first finger, but less than the swipe threshold, and then
+        // start showing move events from the second finger (as it slides into
+        // the components we care about on screen)
+        stateMachine.onTouchMove(
+            () => NodeIds.first,
+            firstTouchId,
+            firstTouchStartX + swipeThresholdPx - 1,
+            true,
+        );
+        stateMachine.onTouchMove(
+            () => NodeIds.second,
+            secondTouchId,
+            secondTouchStartX,
+            true,
+        );
+
+        // Assert we've started focusing but haven't blown up.
+        const initialExpectedEvents = [["onFocus", NodeIds.first]];
+        assertEvents(initialExpectedEvents);
+    });
+});

package/src/components/__tests__/node-manager_test.js

@@ -0,0 +1,89 @@
+import NodeManager from "../node-manager.js";
+
+describe("NodeManager", () => {
+    let nodeManager;
+
+    beforeEach(() => {
+        nodeManager = new NodeManager();
+    });
+
+    it("should register a single node with no children", () => {
+        const nodeId = "1";
+        nodeManager.registerDOMNode(nodeId, {}, []);
+
+        expect(nodeManager._nodesById[nodeId]).toBeTruthy();
+        expect(nodeManager._orderedIds.includes(nodeId)).toBeTruthy();
+    });
+
+    it("should register a single node with children", () => {
+        const nodeId = "1";
+        const childNodeIds = ["2", "3"];
+        nodeManager.registerDOMNode(nodeId, {}, childNodeIds);
+
+        expect(nodeManager._orderedIds.includes(nodeId)).toBeTruthy();
+        expect(nodeManager._nodesById[nodeId]).toBeTruthy();
+
+        for (const childId of childNodeIds) {
+            // The children should appear in the list of ordered IDs, but not
+            // in the list of registered nodes.
+            expect(!nodeManager._nodesById[childId]).toBeTruthy();
+            expect(nodeManager._orderedIds.includes(childId)).toBeTruthy();
+        }
+    });
+
+    it("should order children ahead of their parents", () => {
+        const nodeId = "1";
+        const childNodeIds = ["2", "3"];
+        nodeManager.registerDOMNode(nodeId, {}, childNodeIds);
+
+        const parentIndex = nodeManager._orderedIds.indexOf(nodeId);
+        for (const childId of childNodeIds) {
+            // The children should appear ahead of the parent in the ordered
+            // list.
+            const childIndex = nodeManager._orderedIds.indexOf(childId);
+            expect(childIndex < parentIndex).toBeTruthy();
+        }
+    });
+
+    it("should de-dupe the list of node IDs", () => {
+        const nodeId = "1";
+        const childNodeId = "2";
+
+        // Register both nodes.
+        nodeManager.registerDOMNode(nodeId, {}, [childNodeId]);
+        nodeManager.registerDOMNode(childNodeId, {}, []);
+
+        // Verify that both were added to the list of DOM nodes.
+        for (const id of [nodeId, childNodeId]) {
+            expect(nodeManager._nodesById[id]).toBeTruthy();
+        }
+
+        // Verify that the child is ahead of the parent, and only appears once.
+        expect(nodeManager._orderedIds).toStrictEqual([childNodeId, nodeId]);
+    });
+
+    it("should handle multiple sets of children", () => {
+        const firstNodeId = "1";
+        const firstNodeChildIds = ["2", "3"];
+        const secondNodeId = "4";
+        const secondNodeChildIds = ["5", "6"];
+        const nodeChildIdPairs = [
+            [firstNodeId, firstNodeChildIds],
+            [secondNodeId, secondNodeChildIds],
+        ];
+
+        for (const [nodeId, childNodeIds] of nodeChildIdPairs) {
+            nodeManager.registerDOMNode(nodeId, {}, childNodeIds);
+        }
+
+        for (const [nodeId, childNodeIds] of nodeChildIdPairs) {
+            const parentIndex = nodeManager._orderedIds.indexOf(nodeId);
+            for (const childId of childNodeIds) {
+                // The children should appear ahead of the parent in the
+                // ordered list.
+                const childIndex = nodeManager._orderedIds.indexOf(childId);
+                expect(childIndex < parentIndex).toBeTruthy();
+            }
+        }
+    });
+});

package/src/components/__tests__/two-page-keypad_test.js

@@ -0,0 +1,42 @@
+import {mount} from "enzyme";
+import * as React from "react";
+
+import TwoPageKeypad from "../two-page-keypad.js";
+
+describe("<TwoPageKeyPage />", () => {
+    xit("defaults to selecting the right page", () => {
+        // Arrange
+        const wrapper = mount(
+            <TwoPageKeypad
+                paginationEnabled={true}
+                currentPage={1}
+                leftPage={<p>Left Page</p>}
+                rightPage={<p>Right Page</p>}
+            />,
+        );
+
+        // Assert
+        const secondItem = wrapper.find("TabbarItem").at(0);
+        expect(secondItem).toHaveProp("itemState", "active");
+    });
+
+    xit("selects the second item", () => {
+        // Arrange
+        const wrapper = mount(
+            <TwoPageKeypad
+                paginationEnabled={true}
+                currentPage={0}
+                leftPage={<p>Left Page</p>}
+                rightPage={<p>Right Page</p>}
+            />,
+        );
+
+        // Act
+        let secondItem = wrapper.find("TabbarItem").at(1);
+        secondItem.simulate("click");
+
+        // Assert
+        secondItem = wrapper.find("TabbarItem").at(1);
+        expect(secondItem).toHaveProp("itemState", "active");
+    });
+});

package/src/components/app.js

@@ -0,0 +1,73 @@
+import {StyleSheet} from "aphrodite";
+import * as React from "react";
+
+import {View} from "../fake-react-native-web/index.js";
+import {Keypad, KeypadInput, KeypadTypes} from "../index.js";
+
+class App extends React.Component {
+    state = {
+        keypadElement: null,
+        value: "",
+        keypadType: KeypadTypes.EXPRESSION,
+    };
+
+    handleChange = (e) => {
+        this.state.keypadElement.configure({
+            keypadType: e.target.value,
+            extraKeys: ["x", "y", "PI", "THETA"],
+        });
+        this.setState({keypadType: e.target.value});
+    };
+
+    render() {
+        return (
+            <View>
+                <View style={styles.container}>
+                    <KeypadInput
+                        value={this.state.value}
+                        keypadElement={this.state.keypadElement}
+                        onChange={(value, cb) => this.setState({value}, cb)}
+                        onFocus={() => this.state.keypadElement.activate()}
+                        onBlur={() => this.state.keypadElement.dismiss()}
+                    />
+                    <View style={styles.selectContainer}>
+                        Keypad type:
+                        <select
+                            onChange={this.handleChange}
+                            value={this.state.keypadType}
+                        >
+                            <option value={KeypadTypes.FRACTION}>
+                                FRACTION
+                            </option>
+                            <option value={KeypadTypes.EXPRESSION}>
+                                EXPRESSION
+                            </option>
+                        </select>
+                    </View>
+                </View>
+                <Keypad
+                    onElementMounted={(node) => {
+                        if (node && !this.state.keypadElement) {
+                            this.setState({keypadElement: node});
+                        }
+                    }}
+                />
+            </View>
+        );
+    }
+}
+
+const styles = StyleSheet.create({
+    container: {
+        marginTop: 10,
+        marginLeft: 20,
+        marginRight: 20,
+        marginBottom: 40,
+    },
+    selectContainer: {
+        marginTop: 16,
+        flexDirection: "row",
+    },
+});
+
+export default App;

package/src/components/common-style.js

@@ -0,0 +1,47 @@
+// @flow
+/**
+ * Common parameters used to style components.
+ */
+import Color from "@khanacademy/wonder-blocks-color";
+
+export const wonderBlocksBlue = Color.blue;
+export const offBlack = Color.offBlack;
+export const offBlack32 = Color.offBlack32;
+export const offBlack16 = Color.offBlack16;
+export const offBlack8 = Color.offBlack8;
+
+export const iconSizeHeightPx = 48;
+export const iconSizeWidthPx = 48;
+export const compactKeypadBorderRadiusPx = 4;
+export const cursorHandleRadiusPx = 11;
+
+// The amount to multiply the radius by to get the distance from the
+// center to the tip of the cursor handle.  The cursor is a circle with
+// one quadrant replace with a square.  The hypotenuse of the square is
+// 1.045 times the radius of the circle.
+export const cursorHandleDistanceMultiplier = 1.045;
+
+// Keypad button colors
+export const valueGrey = "#FFF";
+export const operatorGrey = "#FAFAFA";
+export const controlGrey = "#F6F7F7";
+export const emptyGrey = "#F0F1F2";
+
+// Constants defining any borders between elements in the keypad.
+export const innerBorderColor = offBlack16;
+export const innerBorderStyle = "solid";
+export const innerBorderWidthPx = 1;
+
+// The width at which a device is classified as a "tablet" for the purposes
+// of the keypad layout.
+export const tabletCutoffPx = 600;
+
+// The dimensions that define various components in the tree, which may be
+// needed outside of those components in order to determine various layout
+// parameters.
+export const pageIndicatorHeightPx = 16;
+export const navigationPadWidthPx = 192;
+// HACK(charlie): This should be injected by webapp somehow.
+// TODO(charlie): Add a link to the webapp location as soon as the footer
+// has settled down.
+export const toolbarHeightPx = 60;