npm - @khanacademy/math-input - Versions diffs - 8.1.1 → 8.1.3 - Mend

@khanacademy/math-input 8.1.1 → 8.1.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (45) hide show

package/CHANGELOG.md +14 -0
package/dist/components/input/mathquill-types.d.ts +1 -1
package/dist/components/input/mathquill-types.js.flow +4 -1
package/dist/components/keypad/mobile-keypad.d.ts +2 -2
package/dist/components/keypad/mobile-keypad.js.flow +1 -1
package/dist/components/keypad-legacy/compute-layout-parameters.d.ts +6 -17
package/dist/components/keypad-legacy/compute-layout-parameters.js.flow +13 -22
package/dist/components/keypad-legacy/keypad-container.d.ts +2 -1
package/dist/components/keypad-legacy/keypad-container.js.flow +7 -1
package/dist/components/keypad-legacy/store/actions.d.ts +5 -3
package/dist/components/keypad-legacy/store/actions.js.flow +8 -4
package/dist/components/keypad-legacy/store/types.d.ts +14 -14
package/dist/components/keypad-legacy/store/types.js.flow +14 -14
package/dist/components/prop-types.d.ts +12 -0
package/dist/components/prop-types.js.flow +17 -0
package/dist/es/index.css +1 -1
package/dist/es/index.js +133 -132
package/dist/es/index.js.map +1 -1
package/dist/fake-react-native-web/view.d.ts +1 -0
package/dist/fake-react-native-web/view.js.flow +1 -0
package/dist/index.css +1 -1
package/dist/index.d.ts +1 -0
package/dist/index.js +131 -134
package/dist/index.js.flow +1 -0
package/dist/index.js.map +1 -1
package/index.html +17 -16
package/less/echo.less +1 -1
package/less/overrides.less +1 -1
package/package.json +1 -1
package/src/components/input/math-input.tsx +1 -0
package/src/components/input/mathquill-types.ts +4 -1
package/src/components/keypad/keypad-button.tsx +5 -3
package/src/components/keypad/mobile-keypad.tsx +12 -2
package/src/components/keypad-legacy/compute-layout-parameters.ts +127 -78
package/src/components/keypad-legacy/keypad-button.tsx +2 -2
package/src/components/keypad-legacy/keypad-container.tsx +30 -4
package/src/components/keypad-legacy/store/actions.ts +12 -6
package/src/components/keypad-legacy/store/layout-reducer.test.ts +171 -0
package/src/components/keypad-legacy/store/layout-reducer.ts +46 -51
package/src/components/keypad-legacy/store/types.ts +16 -14
package/src/components/{prop-types.js → prop-types.ts} +1 -0
package/src/fake-react-native-web/view.tsx +2 -0
package/src/full-math-input.stories.tsx +2 -2
package/src/index.ts +1 -0
package/tsconfig-build.tsbuildinfo +1 -1

package/index.html CHANGED Viewed

@@ -1,20 +1,21 @@
 <!DOCTYPE html>
 <html lang="en">
+    <head>
+        <meta charset="UTF-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <title>Math Input</title>
+        <link
+            rel="stylesheet"
+            href="https://cdn.jsdelivr.net/npm/katex@0.11.1/dist/katex.min.css"
+        />
+        <style>
+            body {
+                margin: 0;
+            }
+        </style>
+    </head>
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-    <title>Math Input</title>
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.11.1/dist/katex.min.css">
-    <style>
-        body {
-            margin: 0;
-        }
-    </style>
-</head>
-<body>
-    <div id="root"></div>
-</body>
+    <body>
+        <div id="root"></div>
+    </body>
 </html>

package/less/echo.less CHANGED Viewed

@@ -29,7 +29,7 @@
          * displacement.
          */
         transition: transform 800ms cubic-bezier(0, 1, 0.25, 1),
-                    opacity 400ms cubic-bezier(1, 0, 0.9, 1) !important;
+            opacity 400ms cubic-bezier(1, 0, 0.9, 1) !important;
     }
 }

package/less/overrides.less CHANGED Viewed

@@ -96,7 +96,7 @@
     .mq-hasCursor:empty:not(.mq-root-block):after {
         // Place a 'c' inside for sizing the cursor (for the case explained
         // above); normally, MathQuill already does this for .mq-cursor.
-        content: 'c';
+        content: "c";
     }
     .mq-math-mode .mq-selection,

package/package.json CHANGED Viewed

@@ -3,7 +3,7 @@
     "description": "Khan Academy's new expression editor for the mobile web.",
     "author": "Khan Academy",
     "license": "MIT",
-    "version": "8.1.1",
+    "version": "8.1.3",
     "publishConfig": {
         "access": "public"
     },

package/src/components/input/math-input.tsx CHANGED Viewed

@@ -1,3 +1,4 @@
+/* eslint-disable @khanacademy/ts-no-error-suppressions */
 import Color from "@khanacademy/wonder-blocks-color";
 import * as i18n from "@khanacademy/wonder-blocks-i18n";
 import {entries} from "@khanacademy/wonder-stuff-core";

package/src/components/input/mathquill-types.ts CHANGED Viewed

@@ -167,7 +167,10 @@ export type MathFieldConfig = {
         edit?: (mathField: MathFieldInterface) => void;
         enter?: (mathField: MathFieldInterface) => void;
-        moveOutOf?: (mathField: MathFieldInterface) => void;
+        moveOutOf?: (
+            direction: MathQuillDirection,
+            mathField: MathFieldInterface,
+        ) => void;
         upOutOf?: (mathField: MathFieldInterface) => void;
         downOutOf?: (mathField: MathFieldInterface) => void;

package/src/components/keypad/keypad-button.tsx CHANGED Viewed

@@ -78,19 +78,21 @@ const styles = StyleSheet.create({
         boxSizing: "border-box",
         background: Color.white,
         borderRadius: 4,
-        border: `1px solid transparent`,
+        borderWidth: 2,
+        borderStyle: "solid",
+        borderColor: "transparent",
         flex: 1,
         minHeight: 42,
         minWidth: 42,
         padding: 1,
     },
     hovered: {
-        border: `2px solid ${Color.blue}`,
+        borderColor: Color.blue,
         padding: 1,
         boxShadow: "none",
     },
     focused: {
-        border: `2px solid ${Color.blue}`,
+        borderColor: Color.blue,
         padding: 0,
         boxShadow: "none",
     },

package/src/components/keypad/mobile-keypad.tsx CHANGED Viewed

@@ -3,9 +3,15 @@ import {StyleSheet} from "aphrodite";
 import * as React from "react";
 import ReactDOM from "react-dom";
-import Key from "../../data/keys";
 import {View} from "../../fake-react-native-web/index";
-import {Cursor, KeypadConfiguration, KeyHandler, KeypadAPI} from "../../types";
+import type Key from "../../data/keys";
+import type {
+    Cursor,
+    KeypadConfiguration,
+    KeyHandler,
+    KeypadAPI,
+} from "../../types";
 import Keypad from "./index";
@@ -91,11 +97,15 @@ class MobileKeypad extends React.Component<Props, State> implements KeypadAPI {
     }
     render(): React.ReactNode {
+        const {style} = this.props;
         const {active, cursor, keypadConfig} = this.state;
         const containerStyle = [
+            // internal styles
             styles.keypadContainer,
             active ? styles.activeKeypadContainer : null,
+            // styles passed as props
+            ...(Array.isArray(style) ? style : [style]),
         ];
         const isExpression = keypadConfig?.keypadType === "EXPRESSION";

package/src/components/keypad-legacy/compute-layout-parameters.ts CHANGED Viewed

@@ -19,7 +19,7 @@
  * might need to be.
  */
-import {DeviceType, DeviceOrientation, LayoutMode} from "../../enums";
+import {DeviceOrientation, LayoutMode} from "../../enums";
 import {
     pageIndicatorHeightPx,
     toolbarHeightPx,
@@ -27,6 +27,8 @@ import {
     innerBorderWidthPx,
 } from "../common-style";
+import {GridDimensions, WidthHeight} from "./store/types";
 const minButtonHeight = 48;
 const maxButtonSize = 64;
 const minSpaceAboveKeypad = 32;
@@ -54,88 +56,135 @@ const maxPortraitBrowserChrome =
 // difference when reserving space above the keypad.)
 const worstCaseAspectRatio = 320 / (480 - safariNavBarWhenShrunk);
+type ComputedLayoutProperty = {
+    buttonDimensions: WidthHeight;
+    layoutMode: LayoutMode;
+};
+function getButtonWidth(
+    gridDimensions: GridDimensions,
+    containerDimensions: WidthHeight,
+    navigationPadEnabled: boolean,
+    paginationEnabled: boolean,
+    isLandscape: boolean,
+): number {
+    const {numColumns, numPages} = gridDimensions;
+    // We can use the container width as the effective width.
+    let effectiveWidth = containerDimensions.width;
+    if (navigationPadEnabled) {
+        effectiveWidth -= navigationPadWidthPx;
+    }
+    let buttonWidthPx;
+    if (numPages > 1) {
+        const effectiveNumColumns = paginationEnabled
+            ? numColumns
+            : numColumns * numPages;
+        buttonWidthPx = effectiveWidth / effectiveNumColumns;
+    } else {
+        buttonWidthPx = isLandscape
+            ? maxButtonSize
+            : effectiveWidth / numColumns;
+    }
+    return buttonWidthPx;
+}
+function getButtonHeight(
+    gridDimensions: GridDimensions,
+    pageDimensions: WidthHeight,
+    containerDimensions: WidthHeight,
+    paginationEnabled: boolean,
+    toolbarEnabled: boolean,
+    isLandscape: boolean,
+) {
+    const {numMaxVisibleRows} = gridDimensions;
+    // In many cases, the browser chrome will already have been factored
+    // into `pageHeight`. But we have no way of knowing if that's
+    // the case or not. As such, we take a conservative approach and
+    // assume that the chrome is _never_ included in `pageHeight`.
+    const browserChromeHeight = isLandscape
+        ? maxLandscapeBrowserChrome
+        : maxPortraitBrowserChrome;
+    // Count up all the space that we need to reserve on the page.
+    // Namely, we need to account for:
+    //  1. Space between the keypad and the top of the page.
+    //  2. The presence of the exercise toolbar.
+    //  3. The presence of the view pager indicator.
+    //  4. Any browser chrome that may appear later.
+    const reservedSpace =
+        minSpaceAboveKeypad +
+        browserChromeHeight +
+        (toolbarEnabled ? toolbarHeightPx : 0) +
+        (paginationEnabled ? pageIndicatorHeightPx : 0);
+    // For the height, we take
+    // another conservative measure when in portrait by assuming that
+    // the device has the worst possible aspect ratio. In other words,
+    // we ignore the device height in portrait and assume the worst.
+    // This prevents the keypad from changing size when browser chrome
+    // appears and disappears.
+    const effectiveHeight = isLandscape
+        ? pageDimensions.height
+        : containerDimensions.width / worstCaseAspectRatio;
+    // In computing the
+    // height, accommodate for the maximum number of rows that will ever be
+    // visible (since the toggling of popovers can increase the number of
+    // visible rows).
+    const maxKeypadHeight = effectiveHeight - reservedSpace;
+    const buttonHeightPx = Math.max(
+        Math.min(maxKeypadHeight / numMaxVisibleRows, maxButtonSize),
+        minButtonHeight,
+    );
+    return buttonHeightPx;
+}
 export const computeLayoutParameters = (
-    {numColumns, numMaxVisibleRows, numPages},
-    {pageWidthPx, pageHeightPx},
-    {deviceOrientation, deviceType},
-    {navigationPadEnabled, paginationEnabled, toolbarEnabled},
-) => {
+    gridDimensions: GridDimensions,
+    pageDimensions: WidthHeight,
+    containerDimensions: WidthHeight,
+    deviceOrientation: DeviceOrientation,
+    navigationPadEnabled: boolean,
+    paginationEnabled: boolean,
+    toolbarEnabled: boolean,
+): ComputedLayoutProperty => {
+    const {numColumns, numPages} = gridDimensions;
     // First, compute some values that will be used in multiple computations.
     const effectiveNumColumns = paginationEnabled
         ? numColumns
         : numColumns * numPages;
     // Then, compute the button dimensions based on the provided parameters.
-    let buttonDimensions;
-    if (deviceType === DeviceType.PHONE) {
-        const isLandscape = deviceOrientation === DeviceOrientation.LANDSCAPE;
-        // In many cases, the browser chrome will already have been factored
-        // into `pageHeightPx`. But we have no way of knowing if that's
-        // the case or not. As such, we take a conservative approach and
-        // assume that the chrome is _never_ included in `pageHeightPx`.
-        const browserChromeHeight = isLandscape
-            ? maxLandscapeBrowserChrome
-            : maxPortraitBrowserChrome;
-        // Count up all the space that we need to reserve on the page.
-        // Namely, we need to account for:
-        //  1. Space between the keypad and the top of the page.
-        //  2. The presence of the exercise toolbar.
-        //  3. The presence of the view pager indicator.
-        //  4. Any browser chrome that may appear later.
-        const reservedSpace =
-            minSpaceAboveKeypad +
-            browserChromeHeight +
-            (toolbarEnabled ? toolbarHeightPx : 0) +
-            (paginationEnabled ? pageIndicatorHeightPx : 0);
-        // Next, compute the effective width and height. We can use the page
-        // width as the effective width. For the height, though, we take
-        // another conservative measure when in portrait by assuming that
-        // the device has the worst possible aspect ratio. In other words,
-        // we ignore the device height in portrait and assume the worst.
-        // This prevents the keypad from changing size when browser chrome
-        // appears and disappears.
-        const effectiveWidth = pageWidthPx;
-        const effectiveHeight = isLandscape
-            ? pageHeightPx
-            : pageWidthPx / worstCaseAspectRatio;
-        const maxKeypadHeight = effectiveHeight - reservedSpace;
-        // Finally, compute the button height and width. In computing the
-        // height, accommodate for the maximum number of rows that will ever be
-        // visible (since the toggling of popovers can increase the number of
-        // visible rows).
-        const buttonHeightPx = Math.max(
-            Math.min(maxKeypadHeight / numMaxVisibleRows, maxButtonSize),
-            minButtonHeight,
-        );
-        let buttonWidthPx;
-        if (numPages > 1) {
-            const effectiveNumColumns = paginationEnabled
-                ? numColumns
-                : numColumns * numPages;
-            buttonWidthPx = effectiveWidth / effectiveNumColumns;
-        } else {
-            buttonWidthPx = isLandscape
-                ? maxButtonSize
-                : effectiveWidth / numColumns;
-        }
-        buttonDimensions = {
-            widthPx: buttonWidthPx,
-            heightPx: buttonHeightPx,
-        };
-    } else if (deviceType === DeviceType.TABLET) {
-        buttonDimensions = {
-            widthPx: maxButtonSize,
-            heightPx: maxButtonSize,
-        };
-    } else {
-        throw new Error("Invalid device type: " + deviceType);
-    }
+    const isLandscape = deviceOrientation === DeviceOrientation.LANDSCAPE;
+    const buttonWidth = getButtonWidth(
+        gridDimensions,
+        containerDimensions,
+        navigationPadEnabled,
+        paginationEnabled,
+        isLandscape,
+    );
+    const buttonHeight = getButtonHeight(
+        gridDimensions,
+        pageDimensions,
+        containerDimensions,
+        paginationEnabled,
+        toolbarEnabled,
+        isLandscape,
+    );
+    const buttonDimensions = {
+        width: buttonWidth,
+        height: buttonHeight,
+    };
     // Finally, determine whether the keypad should be rendered in the
     // fullscreen layout by determining its resultant width.
@@ -143,13 +192,13 @@ export const computeLayoutParameters = (
         (navigationPadEnabled ? 1 : 0) +
         (!paginationEnabled ? numPages - 1 : 0);
     const keypadWidth =
-        effectiveNumColumns * buttonDimensions.widthPx +
+        effectiveNumColumns * buttonDimensions.width +
         (navigationPadEnabled ? navigationPadWidthPx : 0) +
         numSeparators * innerBorderWidthPx;
     return {
         buttonDimensions,
         layoutMode:
-            keypadWidth >= pageWidthPx
+            keypadWidth >= containerDimensions.width
                 ? LayoutMode.FULLSCREEN
                 : LayoutMode.COMPACT,
     };

package/src/components/keypad-legacy/keypad-button.tsx CHANGED Viewed

@@ -356,8 +356,8 @@ const styleForButtonDimensions = (heightPx, widthPx) => {
 const mapStateToProps = (state: State): ReduxProps => {
     return {
-        heightPx: state.layout.buttonDimensions.heightPx,
-        widthPx: state.layout.buttonDimensions.widthPx,
+        heightPx: state.layout.buttonDimensions.height,
+        widthPx: state.layout.buttonDimensions.width,
     };
 };

package/src/components/keypad-legacy/keypad-container.tsx CHANGED Viewed

@@ -34,7 +34,12 @@ interface ReduxProps {
 interface Props extends ReduxProps {
     onDismiss?: () => void;
     onElementMounted: (element: any) => void;
-    onPageSizeChange?: (width: number, height: number) => void;
+    onPageSizeChange?: (
+        pageWidth: number,
+        pageHeight: number,
+        containerWidth: number,
+        containerHeight: number,
+    ) => void;
     style?: StyleType;
 }
@@ -45,6 +50,7 @@ type State = {
 // eslint-disable-next-line react/no-unsafe
 class KeypadContainer extends React.Component<Props, State> {
+    _containerRef = React.createRef<HTMLDivElement>();
     _resizeTimeout: number | null | undefined;
     hasMounted: boolean | undefined;
@@ -113,7 +119,14 @@ class KeypadContainer extends React.Component<Props, State> {
         this.setState({
             viewportWidth: window.innerWidth,
         });
-        this.props.onPageSizeChange?.(window.innerWidth, window.innerHeight);
+        const containerWidth = this._containerRef.current?.clientWidth || 0;
+        const containerHeight = this._containerRef.current?.clientHeight || 0;
+        this.props.onPageSizeChange?.(
+            window.innerWidth,
+            window.innerHeight,
+            containerWidth,
+            containerHeight,
+        );
     };
     renderKeypad = () => {
@@ -198,6 +211,7 @@ class KeypadContainer extends React.Component<Props, State> {
                 style={keypadContainerStyle}
                 dynamicStyle={dynamicStyle}
                 extraClassName="keypad-container"
+                forwardRef={this._containerRef}
             >
                 <View
                     style={keypadStyle}
@@ -305,8 +319,20 @@ const mapStateToProps = (state: ReduxState): ReduxProps => {
 const mapDispatchToProps = (dispatch) => {
     return {
-        onPageSizeChange: (pageWidthPx, pageHeightPx) => {
-            dispatch(setPageSize(pageWidthPx, pageHeightPx));
+        onPageSizeChange: (
+            pageWidth: number,
+            pageHeight: number,
+            containerWidth: number,
+            containerHeight: number,
+        ) => {
+            dispatch(
+                setPageSize(
+                    pageWidth,
+                    pageHeight,
+                    containerWidth,
+                    containerHeight,
+                ),
+            );
         },
     };
 };

package/src/components/keypad-legacy/store/actions.ts CHANGED Viewed

@@ -51,18 +51,24 @@ export const configureKeypad = (
 type SetPageSizeAction = {
     type: "SetPageSize";
-    pageWidthPx: number;
-    pageHeightPx: number;
+    pageWidth: number;
+    pageHeight: number;
+    containerWidth: number;
+    containerHeight: number;
 };
 export const setPageSize = (
-    pageWidthPx: number,
-    pageHeightPx: number,
+    pageWidth: number,
+    pageHeight: number,
+    containerWidth: number,
+    containerHeight: number,
 ): SetPageSizeAction => {
     return {
         type: "SetPageSize",
-        pageWidthPx,
-        pageHeightPx,
+        pageWidth,
+        pageHeight,
+        containerWidth,
+        containerHeight,
     };
 };

package/src/components/keypad-legacy/store/layout-reducer.test.ts ADDED Viewed

@@ -0,0 +1,171 @@
+import {KeypadType} from "../../../enums";
+import {configureKeypad, setPageSize} from "./actions";
+import layoutReducer from "./layout-reducer";
+function initState() {
+    // This is just simulating the Redux action that initializes state
+    // @ts-expect-error TS2345
+    let state = layoutReducer(undefined, {type: "@redux-init"});
+    state = layoutReducer(
+        state,
+        configureKeypad({keypadType: KeypadType.EXPRESSION}),
+    );
+    return state;
+}
+describe("layout reducer", () => {
+    it("enables pagination on small screens portrait (iPhone)", () => {
+        // Arrange
+        let state = initState();
+        // Act
+        state = layoutReducer(state, setPageSize(375, 812, 375, 812));
+        // Assert
+        expect(state.paginationEnabled).toBe(true);
+    });
+    it("does not enable navigation pad on small screens portrait (iPhone)", () => {
+        // Arrange
+        let state = initState();
+        // Act
+        state = layoutReducer(state, setPageSize(375, 812, 375, 812));
+        // Assert
+        expect(state.navigationPadEnabled).toBe(false);
+    });
+    it("does not enable pagination on medium screens portrait (iPad Mini)", () => {
+        // Arrange
+        let state = initState();
+        // Act
+        state = layoutReducer(state, setPageSize(768, 1024, 768, 1024));
+        // Assert
+        expect(state.paginationEnabled).toBe(false);
+    });
+    it("does not enable navigation pad on medium screens portrait (iPad Mini)", () => {
+        // Arrange
+        let state = initState();
+        // Act
+        state = layoutReducer(state, setPageSize(768, 1024, 768, 1024));
+        // Assert
+        expect(state.navigationPadEnabled).toBe(false);
+    });
+    it("does not enable pagination on large screens portrait (iPad)", () => {
+        // Arrange
+        let state = initState();
+        // Act
+        state = layoutReducer(state, setPageSize(810, 1080, 810, 1080));
+        // Assert
+        expect(state.paginationEnabled).toBe(false);
+    });
+    it("does enable navigation pad on large screens portrait (iPad)", () => {
+        // Arrange
+        let state = initState();
+        // Act
+        state = layoutReducer(state, setPageSize(810, 1080, 810, 1080));
+        // Assert
+        expect(state.navigationPadEnabled).toBe(true);
+    });
+    it("does not enable pagination on small screens landscape (iPhone)", () => {
+        // Arrange
+        let state = initState();
+        // Act
+        state = layoutReducer(state, setPageSize(812, 375, 812, 375));
+        // Assert
+        expect(state.paginationEnabled).toBe(false);
+    });
+    it("does enable navigation pad on small screens landscape (iPhone)", () => {
+        // Arrange
+        let state = initState();
+        // Act
+        state = layoutReducer(state, setPageSize(812, 375, 812, 375));
+        // Assert
+        expect(state.navigationPadEnabled).toBe(true);
+    });
+    it("does not enable pagination on medium screens landscape (iPad Mini)", () => {
+        // Arrange
+        let state = initState();
+        // Act
+        state = layoutReducer(state, setPageSize(1024, 768, 1024, 768));
+        // Assert
+        expect(state.paginationEnabled).toBe(false);
+    });
+    it("does enable navigation pad on medium screens landscape (iPad Mini)", () => {
+        // Arrange
+        let state = initState();
+        // Act
+        state = layoutReducer(state, setPageSize(1024, 768, 1024, 768));
+        // Assert
+        expect(state.navigationPadEnabled).toBe(true);
+    });
+    it("does not enable pagination on large screens landscape (iPad)", () => {
+        // Arrange
+        let state = initState();
+        // Act
+        state = layoutReducer(state, setPageSize(1080, 810, 1080, 810));
+        // Assert
+        expect(state.paginationEnabled).toBe(false);
+    });
+    it("does enable navigation pad on large screens landscape (iPad)", () => {
+        // Arrange
+        let state = initState();
+        // Act
+        state = layoutReducer(state, setPageSize(1080, 810, 1080, 810));
+        // Assert
+        expect(state.navigationPadEnabled).toBe(true);
+    });
+    it("does enable pagination in small containers on big screens", () => {
+        // Arrange
+        let state = initState();
+        // Act
+        state = layoutReducer(state, setPageSize(2000, 2000, 300, 300));
+        // Assert
+        expect(state.paginationEnabled).toBe(true);
+    });
+    it("does not enable navigation in small containers on big screens", () => {
+        // Arrange
+        let state = initState();
+        // Act
+        state = layoutReducer(state, setPageSize(2000, 2000, 300, 300));
+        // Assert
+        expect(state.navigationPadEnabled).toBe(false);
+    });
+});