Keybinding code unification #6 (#8042)

test/components/views/settings/KeyboardShortcut-test.tsx

@@ -0,0 +1,72 @@
+
+/*
+Copyright 2022 Šimon Brandner <simon.bra.ag@gmail.com>
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import React from "react";
+import { mount, ReactWrapper } from "enzyme";
+
+import { Key } from "../../../../src/Keyboard";
+import PlatformPeg from "../../../../src/PlatformPeg";
+
+const PATH_TO_COMPONENT = "../../../../src/components/views/settings/KeyboardShortcut.tsx";
+
+const renderKeyboardShortcut = async (component, props?): Promise<ReactWrapper> => {
+    const Component = (await import(PATH_TO_COMPONENT))[component];
+    return mount(<Component {...props} />);
+};
+
+describe("KeyboardShortcut", () => {
+    beforeEach(() => {
+        jest.resetModules();
+    });
+
+    it("renders key icon", async () => {
+        const body = await renderKeyboardShortcut("KeyboardKey", { name: Key.ARROW_DOWN });
+        expect(body).toMatchSnapshot();
+    });
+
+    it("renders alternative key name", async () => {
+        const body = await renderKeyboardShortcut("KeyboardKey", { name: Key.PAGE_DOWN });
+        expect(body).toMatchSnapshot();
+    });
+
+    it("doesn't render + if last", async () => {
+        const body = await renderKeyboardShortcut("KeyboardKey", { name: Key.A, last: true });
+        expect(body).toMatchSnapshot();
+    });
+
+    it("doesn't render same modifier twice", async () => {
+        PlatformPeg.get = () => ({ overrideBrowserShortcuts: () => false });
+        const body1 = await renderKeyboardShortcut("KeyboardShortcut", {
+            value: {
+                key: Key.A,
+                ctrlOrCmdKey: true,
+                metaKey: true,
+            },
+        });
+        expect(body1).toMatchSnapshot();
+
+        const body2 = await renderKeyboardShortcut("KeyboardShortcut", {
+            value: {
+                key: Key.A,
+                ctrlOrCmdKey: true,
+                ctrlKey: true,
+            },
+        });
+        expect(body2).toMatchSnapshot();
+        jest.resetModules();
+    });
+});

test/components/views/settings/__snapshots__/KeyboardShortcut-test.tsx.snap

@@ -0,0 +1,112 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`KeyboardShortcut doesn't render + if last 1`] = `
+<KeyboardKey
+  last={true}
+  name="a"
+>
+  <kbd>
+     
+    a
+     
+  </kbd>
+</KeyboardKey>
+`;
+
+exports[`KeyboardShortcut doesn't render same modifier twice 1`] = `
+<KeyboardShortcut
+  value={
+    Object {
+      "ctrlOrCmdKey": true,
+      "key": "a",
+      "metaKey": true,
+    }
+  }
+>
+  <div>
+    <KeyboardKey
+      key="ctrlOrCmdKey"
+      name="Control"
+    >
+      <kbd>
+         
+        missing translation: en|Ctrl
+         
+      </kbd>
+      +
+    </KeyboardKey>
+    <KeyboardKey
+      last={true}
+      name="a"
+    >
+      <kbd>
+         
+        a
+         
+      </kbd>
+    </KeyboardKey>
+  </div>
+</KeyboardShortcut>
+`;
+
+exports[`KeyboardShortcut doesn't render same modifier twice 2`] = `
+<KeyboardShortcut
+  value={
+    Object {
+      "ctrlKey": true,
+      "ctrlOrCmdKey": true,
+      "key": "a",
+    }
+  }
+>
+  <div>
+    <KeyboardKey
+      key="ctrlOrCmdKey"
+      name="Control"
+    >
+      <kbd>
+         
+        missing translation: en|Ctrl
+         
+      </kbd>
+      +
+    </KeyboardKey>
+    <KeyboardKey
+      last={true}
+      name="a"
+    >
+      <kbd>
+         
+        a
+         
+      </kbd>
+    </KeyboardKey>
+  </div>
+</KeyboardShortcut>
+`;
+
+exports[`KeyboardShortcut renders alternative key name 1`] = `
+<KeyboardKey
+  name="PageDown"
+>
+  <kbd>
+     
+    missing translation: en|Page Down
+     
+  </kbd>
+  +
+</KeyboardKey>
+`;
+
+exports[`KeyboardShortcut renders key icon 1`] = `
+<KeyboardKey
+  name="ArrowDown"
+>
+  <kbd>
+     
+    ↓
+     
+  </kbd>
+  +
+</KeyboardKey>
+`;

test/components/views/settings/tabs/user/KeyboardUserSettingsTab-test.tsx

@@ -21,6 +21,7 @@ import { mount, ReactWrapper } from "enzyme";
 import { Key } from "../../../../../../src/Keyboard";
 
 const PATH_TO_KEYBOARD_SHORTCUTS = "../../../../../../src/accessibility/KeyboardShortcuts";
+const PATH_TO_KEYBOARD_SHORTCUT_UTILS = "../../../../../../src/accessibility/KeyboardShortcutUtils";
 const PATH_TO_COMPONENT = "../../../../../../src/components/views/settings/tabs/user/KeyboardUserSettingsTab";
 
 const mockKeyboardShortcuts = (override) => {
@@ -33,9 +34,19 @@ const mockKeyboardShortcuts = (override) => {
     });
 };
 
-const renderKeyboardUserSettingsTab = async (component, props?): Promise<ReactWrapper> => {
+const mockKeyboardShortcutUtils = (override) => {
+    jest.doMock(PATH_TO_KEYBOARD_SHORTCUT_UTILS, () => {
+        const original = jest.requireActual(PATH_TO_KEYBOARD_SHORTCUT_UTILS);
+        return {
+            ...original,
+            ...override,
+        };
+    });
+};
+
+const renderKeyboardUserSettingsTab = async (component): Promise<ReactWrapper> => {
     const Component = (await import(PATH_TO_COMPONENT))[component];
-    return mount(<Component {...props} />);
+    return mount(<Component />);
 };
 
 describe("KeyboardUserSettingsTab", () => {
@@ -43,79 +54,8 @@ describe("KeyboardUserSettingsTab", () => {
         jest.resetModules();
     });
 
-    it("renders key icon", async () => {
-        const body = await renderKeyboardUserSettingsTab("KeyboardKey", { name: Key.ARROW_DOWN });
-        expect(body).toMatchSnapshot();
-    });
-
-    it("renders alternative key name", async () => {
-        const body = await renderKeyboardUserSettingsTab("KeyboardKey", { name: Key.PAGE_DOWN });
-        expect(body).toMatchSnapshot();
-    });
-
-    it("doesn't render + if last", async () => {
-        const body = await renderKeyboardUserSettingsTab("KeyboardKey", { name: Key.A, last: true });
-        expect(body).toMatchSnapshot();
-    });
-
-    it("doesn't render same modifier twice", async () => {
-        mockKeyboardShortcuts({
-            "getKeyboardShortcutsForUI": () => ({
-                "keybind1": {
-                    default: {
-                        key: Key.A,
-                        ctrlOrCmdKey: true,
-                        metaKey: true,
-                    },
-                    displayName: "Cancel replying to a message",
-                },
-            }),
-        });
-        const body1 = await renderKeyboardUserSettingsTab("KeyboardShortcut", { name: "keybind1" });
-        expect(body1).toMatchSnapshot();
-        jest.resetModules();
-
-        mockKeyboardShortcuts({
-            "getKeyboardShortcutsForUI": () => ({
-                "keybind1": {
-                    default: {
-                        key: Key.A,
-                        ctrlOrCmdKey: true,
-                        ctrlKey: true,
-                    },
-                    displayName: "Cancel replying to a message",
-                },
-            }),
-        });
-        const body2 = await renderKeyboardUserSettingsTab("KeyboardShortcut", { name: "keybind1" });
-        expect(body2).toMatchSnapshot();
-        jest.resetModules();
-    });
-
     it("renders list of keyboard shortcuts", async () => {
         mockKeyboardShortcuts({
-            "getKeyboardShortcutsForUI": () => ({
-                "keybind1": {
-                    default: {
-                        key: Key.A,
-                        ctrlKey: true,
-                    },
-                    displayName: "Cancel replying to a message",
-                },
-                "keybind2": {
-                    default: {
-                        key: Key.B,
-                        ctrlKey: true,
-                    },
-                    displayName: "Toggle Bold",
-                },
-                "keybind3": {
-                    default: {
-                        key: Key.ENTER,
-                    },
-                    displayName: "Select room from the room list",
-                },
-            }),
             "CATEGORIES": {
                 "Composer": {
                     settingNames: ["keybind1", "keybind2"],
@@ -127,6 +67,38 @@ describe("KeyboardUserSettingsTab", () => {
                 },
             },
         });
+        mockKeyboardShortcutUtils({
+            "getKeyboardShortcutValue": (name) => {
+                switch (name) {
+                    case "keybind1":
+                        return {
+                            key: Key.A,
+                            ctrlKey: true,
+                        };
+                    case "keybind2": {
+                        return {
+                            key: Key.B,
+                            ctrlKey: true };
+                    }
+                    case "keybind3": {
+                        return {
+                            key: Key.ENTER,
+                        };
+                    }
+                }
+            },
+            "getKeyboardShortcutDisplayName": (name) => {
+                switch (name) {
+                    case "keybind1":
+                        return "Cancel replying to a message";
+                    case "keybind2":
+                        return "Toggle Bold";
+
+                    case "keybind3":
+                        return "Select room from the room list";
+                }
+            },
+        });
 
         const body = await renderKeyboardUserSettingsTab("default");
         expect(body).toMatchSnapshot();

test/components/views/settings/tabs/user/__snapshots__/KeyboardUserSettingsTab-test.tsx.snap

@@ -1,104 +1,5 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`KeyboardUserSettingsTab doesn't render + if last 1`] = `
-<KeyboardKey
-  last={true}
-  name="a"
->
-  <kbd>
-     
-    a
-     
-  </kbd>
-</KeyboardKey>
-`;
-
-exports[`KeyboardUserSettingsTab doesn't render same modifier twice 1`] = `
-<KeyboardShortcut
-  name="keybind1"
->
-  <div>
-    <KeyboardKey
-      key="ctrlOrCmdKey"
-      name="Control"
-    >
-      <kbd>
-         
-        missing translation: en|Ctrl
-         
-      </kbd>
-      +
-    </KeyboardKey>
-    <KeyboardKey
-      last={true}
-      name="a"
-    >
-      <kbd>
-         
-        a
-         
-      </kbd>
-    </KeyboardKey>
-  </div>
-</KeyboardShortcut>
-`;
-
-exports[`KeyboardUserSettingsTab doesn't render same modifier twice 2`] = `
-<KeyboardShortcut
-  name="keybind1"
->
-  <div>
-    <KeyboardKey
-      key="ctrlOrCmdKey"
-      name="Control"
-    >
-      <kbd>
-         
-        missing translation: en|Ctrl
-         
-      </kbd>
-      +
-    </KeyboardKey>
-    <KeyboardKey
-      last={true}
-      name="a"
-    >
-      <kbd>
-         
-        a
-         
-      </kbd>
-    </KeyboardKey>
-  </div>
-</KeyboardShortcut>
-`;
-
-exports[`KeyboardUserSettingsTab renders alternative key name 1`] = `
-<KeyboardKey
-  name="PageDown"
->
-  <kbd>
-     
-    missing translation: en|Page Down
-     
-  </kbd>
-  +
-</KeyboardKey>
-`;
-
-exports[`KeyboardUserSettingsTab renders key icon 1`] = `
-<KeyboardKey
-  name="ArrowDown"
->
-  <kbd>
-     
-    ↓
-     
-  </kbd>
-  +
-</KeyboardKey>
-`;
-
 exports[`KeyboardUserSettingsTab renders list of keyboard shortcuts 1`] = `
 <KeyboardUserSettingsTab>
   <div
@@ -140,9 +41,14 @@ exports[`KeyboardUserSettingsTab renders list of keyboard shortcuts 1`] = `
             <div
               className="mx_KeyboardShortcut_shortcutRow"
             >
-              missing translation: en|Cancel replying to a message
+              Cancel replying to a message
               <KeyboardShortcut
-                name="keybind1"
+                value={
+                  Object {
+                    "ctrlKey": true,
+                    "key": "a",
+                  }
+                }
               >
                 <div>
                   <KeyboardKey
@@ -177,9 +83,14 @@ exports[`KeyboardUserSettingsTab renders list of keyboard shortcuts 1`] = `
             <div
               className="mx_KeyboardShortcut_shortcutRow"
             >
-              missing translation: en|Toggle Bold
+              Toggle Bold
               <KeyboardShortcut
-                name="keybind2"
+                value={
+                  Object {
+                    "ctrlKey": true,
+                    "key": "b",
+                  }
+                }
               >
                 <div>
                   <KeyboardKey
@@ -241,9 +152,13 @@ exports[`KeyboardUserSettingsTab renders list of keyboard shortcuts 1`] = `
             <div
               className="mx_KeyboardShortcut_shortcutRow"
             >
-              missing translation: en|Select room from the room list
+              Select room from the room list
               <KeyboardShortcut
-                name="keybind3"
+                value={
+                  Object {
+                    "key": "Enter",
+                  }
+                }
               >
                 <div>
                   <KeyboardKey