From 8d13e238b95d950e5518760ac2cefd52673ad80d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=A0imon=20Brandner?= Date: Mon, 14 Mar 2022 14:25:51 +0100 Subject: [PATCH] Keybinding code unification #6 (#8042) --- src/KeyBindingsDefaults.ts | 2 +- src/accessibility/KeyboardShortcutUtils.ts | 131 ++++++++++++++++++ src/accessibility/KeyboardShortcuts.ts | 113 +-------------- .../views/settings/KeyboardShortcut.tsx | 67 +++++++++ .../tabs/user/KeyboardUserSettingsTab.tsx | 68 +-------- ...-test.ts => KeyboardShortcutUtils-test.ts} | 5 +- .../views/settings/KeyboardShortcut-test.tsx | 72 ++++++++++ .../KeyboardShortcut-test.tsx.snap | 112 +++++++++++++++ .../user/KeyboardUserSettingsTab-test.tsx | 118 ++++++---------- .../KeyboardUserSettingsTab-test.tsx.snap | 125 +++-------------- 10 files changed, 462 insertions(+), 351 deletions(-) create mode 100644 src/accessibility/KeyboardShortcutUtils.ts create mode 100644 src/components/views/settings/KeyboardShortcut.tsx rename test/accessibility/{KeyboardShortcuts-test.ts => KeyboardShortcutUtils-test.ts} (93%) create mode 100644 test/components/views/settings/KeyboardShortcut-test.tsx create mode 100644 test/components/views/settings/__snapshots__/KeyboardShortcut-test.tsx.snap diff --git a/src/KeyBindingsDefaults.ts b/src/KeyBindingsDefaults.ts index 5870f6451e..9ac6d745c2 100644 --- a/src/KeyBindingsDefaults.ts +++ b/src/KeyBindingsDefaults.ts @@ -26,9 +26,9 @@ import { import { CATEGORIES, CategoryName, - getKeyboardShortcuts, KeyBindingAction, } from "./accessibility/KeyboardShortcuts"; +import { getKeyboardShortcuts } from "./accessibility/KeyboardShortcutUtils"; export const getBindingsByCategory = (category: CategoryName): KeyBinding[] => { return CATEGORIES[category].settingNames.reduce((bindings, name) => { diff --git a/src/accessibility/KeyboardShortcutUtils.ts b/src/accessibility/KeyboardShortcutUtils.ts new file mode 100644 index 0000000000..434116d430 --- /dev/null +++ b/src/accessibility/KeyboardShortcutUtils.ts @@ -0,0 +1,131 @@ +/* +Copyright 2022 Šimon Brandner + +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 { KeyCombo } from "../KeyBindingsManager"; +import { isMac, Key } from "../Keyboard"; +import { _t, _td } from "../languageHandler"; +import PlatformPeg from "../PlatformPeg"; +import SettingsStore from "../settings/SettingsStore"; +import { + DESKTOP_SHORTCUTS, + DIGITS, + IKeyboardShortcuts, + KeyBindingAction, + KEYBOARD_SHORTCUTS, + MAC_ONLY_SHORTCUTS, +} from "./KeyboardShortcuts"; + +/** + * This function gets the keyboard shortcuts that should be presented in the UI + * but they shouldn't be consumed by KeyBindingDefaults. That means that these + * have to be manually mirrored in KeyBindingDefaults. + */ +const getUIOnlyShortcuts = (): IKeyboardShortcuts => { + const ctrlEnterToSend = SettingsStore.getValue('MessageComposerInput.ctrlEnterToSend'); + + const keyboardShortcuts: IKeyboardShortcuts = { + [KeyBindingAction.SendMessage]: { + default: { + key: Key.ENTER, + ctrlOrCmdKey: ctrlEnterToSend, + }, + displayName: _td("Send message"), + }, + [KeyBindingAction.NewLine]: { + default: { + key: Key.ENTER, + shiftKey: !ctrlEnterToSend, + }, + displayName: _td("New line"), + }, + [KeyBindingAction.CompleteAutocomplete]: { + default: { + key: Key.ENTER, + }, + displayName: _td("Complete"), + }, + [KeyBindingAction.ForceCompleteAutocomplete]: { + default: { + key: Key.TAB, + }, + displayName: _td("Force complete"), + }, + [KeyBindingAction.SearchInRoom]: { + default: { + ctrlOrCmdKey: true, + key: Key.F, + }, + displayName: _td("Search (must be enabled)"), + }, + }; + + if (PlatformPeg.get().overrideBrowserShortcuts()) { + // XXX: This keyboard shortcut isn't manually added to + // KeyBindingDefaults as it can't be easily handled by the + // KeyBindingManager + keyboardShortcuts[KeyBindingAction.SwitchToSpaceByNumber] = { + default: { + ctrlOrCmdKey: true, + key: DIGITS, + }, + displayName: _td("Switch to space by number"), + }; + } + + return keyboardShortcuts; +}; + +/** + * This function gets keyboard shortcuts that can be consumed by the KeyBindingDefaults. + */ +export const getKeyboardShortcuts = (): IKeyboardShortcuts => { + const overrideBrowserShortcuts = PlatformPeg.get().overrideBrowserShortcuts(); + + return Object.keys(KEYBOARD_SHORTCUTS).filter((k: KeyBindingAction) => { + if (KEYBOARD_SHORTCUTS[k]?.controller?.settingDisabled) return false; + if (MAC_ONLY_SHORTCUTS.includes(k) && !isMac) return false; + if (DESKTOP_SHORTCUTS.includes(k) && !overrideBrowserShortcuts) return false; + + return true; + }).reduce((o, key) => { + o[key] = KEYBOARD_SHORTCUTS[key]; + return o; + }, {} as IKeyboardShortcuts); +}; + +/** + * Gets keyboard shortcuts that should be presented to the user in the UI. + */ +export const getKeyboardShortcutsForUI = (): IKeyboardShortcuts => { + const entries = [ + ...Object.entries(getUIOnlyShortcuts()), + ...Object.entries(getKeyboardShortcuts()), + ]; + + return entries.reduce((acc, [key, value]) => { + acc[key] = value; + return acc; + }, {} as IKeyboardShortcuts); +}; + +export const getKeyboardShortcutValue = (name: string): KeyCombo => { + return getKeyboardShortcutsForUI()[name]?.default; +}; + +export const getKeyboardShortcutDisplayName = (name: string): string | null => { + const keyboardShortcutDisplayName = getKeyboardShortcutsForUI()[name]?.displayName; + return keyboardShortcutDisplayName && _t(keyboardShortcutDisplayName); +}; diff --git a/src/accessibility/KeyboardShortcuts.ts b/src/accessibility/KeyboardShortcuts.ts index a2287a74be..8d13856f7e 100644 --- a/src/accessibility/KeyboardShortcuts.ts +++ b/src/accessibility/KeyboardShortcuts.ts @@ -18,9 +18,8 @@ limitations under the License. import { _td } from "../languageHandler"; import { isMac, Key } from "../Keyboard"; import { IBaseSetting } from "../settings/Settings"; -import SettingsStore from "../settings/SettingsStore"; import IncompatibleController from "../settings/controllers/IncompatibleController"; -import PlatformPeg from "../PlatformPeg"; +import { KeyCombo } from "../KeyBindingsManager"; export enum KeyBindingAction { /** Send a message */ @@ -151,18 +150,9 @@ export enum KeyBindingAction { ToggleHiddenEventVisibility = 'KeyBinding.toggleHiddenEventVisibility', } -export type KeyBindingConfig = { - key: string; - ctrlOrCmdKey?: boolean; - ctrlKey?: boolean; - altKey?: boolean; - shiftKey?: boolean; - metaKey?: boolean; -}; +type KeyboardShortcutSetting = IBaseSetting; -type KeyboardShortcutSetting = IBaseSetting; - -type IKeyboardShortcuts = { +export type IKeyboardShortcuts = { // TODO: We should figure out what to do with the keyboard shortcuts that are not handled by KeybindingManager [k in (KeyBindingAction)]?: KeyboardShortcutSetting; }; @@ -310,14 +300,14 @@ export const CATEGORIES: Record = { }, }; -const DESKTOP_SHORTCUTS = [ +export const DESKTOP_SHORTCUTS = [ KeyBindingAction.OpenUserSettings, KeyBindingAction.SwitchToSpaceByNumber, KeyBindingAction.PreviousVisitedRoomOrCommunity, KeyBindingAction.NextVisitedRoomOrCommunity, ]; -const MAC_ONLY_SHORTCUTS = [ +export const MAC_ONLY_SHORTCUTS = [ KeyBindingAction.OpenUserSettings, ]; @@ -710,99 +700,6 @@ export const KEYBOARD_SHORTCUTS: IKeyboardShortcuts = { }, }; -/** - * This function gets the keyboard shortcuts that should be presented in the UI - * but they shouldn't be consumed by KeyBindingDefaults. That means that these - * have to be manually mirrored in KeyBindingDefaults. - */ -const getUIOnlyShortcuts = (): IKeyboardShortcuts => { - const ctrlEnterToSend = SettingsStore.getValue('MessageComposerInput.ctrlEnterToSend'); - - const keyboardShortcuts: IKeyboardShortcuts = { - [KeyBindingAction.SendMessage]: { - default: { - key: Key.ENTER, - ctrlOrCmdKey: ctrlEnterToSend, - }, - displayName: _td("Send message"), - }, - [KeyBindingAction.NewLine]: { - default: { - key: Key.ENTER, - shiftKey: !ctrlEnterToSend, - }, - displayName: _td("New line"), - }, - [KeyBindingAction.CompleteAutocomplete]: { - default: { - key: Key.ENTER, - }, - displayName: _td("Complete"), - }, - [KeyBindingAction.ForceCompleteAutocomplete]: { - default: { - key: Key.TAB, - }, - displayName: _td("Force complete"), - }, - [KeyBindingAction.SearchInRoom]: { - default: { - ctrlOrCmdKey: true, - key: Key.F, - }, - displayName: _td("Search (must be enabled)"), - }, - }; - - if (PlatformPeg.get().overrideBrowserShortcuts()) { - // XXX: This keyboard shortcut isn't manually added to - // KeyBindingDefaults as it can't be easily handled by the - // KeyBindingManager - keyboardShortcuts[KeyBindingAction.SwitchToSpaceByNumber] = { - default: { - ctrlOrCmdKey: true, - key: DIGITS, - }, - displayName: _td("Switch to space by number"), - }; - } - - return keyboardShortcuts; -}; - -/** - * This function gets keyboard shortcuts that can be consumed by the KeyBindingDefaults. - */ -export const getKeyboardShortcuts = (): IKeyboardShortcuts => { - const overrideBrowserShortcuts = PlatformPeg.get().overrideBrowserShortcuts(); - - return Object.keys(KEYBOARD_SHORTCUTS).filter((k: KeyBindingAction) => { - if (KEYBOARD_SHORTCUTS[k]?.controller?.settingDisabled) return false; - if (MAC_ONLY_SHORTCUTS.includes(k) && !isMac) return false; - if (DESKTOP_SHORTCUTS.includes(k) && !overrideBrowserShortcuts) return false; - - return true; - }).reduce((o, key) => { - o[key] = KEYBOARD_SHORTCUTS[key]; - return o; - }, {} as IKeyboardShortcuts); -}; - -/** - * Gets keyboard shortcuts that should be presented to the user in the UI. - */ -export const getKeyboardShortcutsForUI = (): IKeyboardShortcuts => { - const entries = [ - ...Object.entries(getUIOnlyShortcuts()), - ...Object.entries(getKeyboardShortcuts()), - ]; - - return entries.reduce((acc, [key, value]) => { - acc[key] = value; - return acc; - }, {} as IKeyboardShortcuts); -}; - // For tests export function mock({ keyboardShortcuts, macOnlyShortcuts, desktopShortcuts }): void { Object.keys(KEYBOARD_SHORTCUTS).forEach((k) => delete KEYBOARD_SHORTCUTS[k]); diff --git a/src/components/views/settings/KeyboardShortcut.tsx b/src/components/views/settings/KeyboardShortcut.tsx new file mode 100644 index 0000000000..8863979a28 --- /dev/null +++ b/src/components/views/settings/KeyboardShortcut.tsx @@ -0,0 +1,67 @@ +/* +Copyright 2022 Šimon Brandner + +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 { ALTERNATE_KEY_NAME, KEY_ICON } from "../../../accessibility/KeyboardShortcuts"; +import { KeyCombo } from "../../../KeyBindingsManager"; +import { isMac, Key } from "../../../Keyboard"; +import { _t } from "../../../languageHandler"; + +interface IKeyboardKeyProps { + name: string; + last?: boolean; +} + +export const KeyboardKey: React.FC = ({ name, last }) => { + const icon = KEY_ICON[name]; + const alternateName = ALTERNATE_KEY_NAME[name]; + + return + { icon || (alternateName && _t(alternateName)) || name } + { !last && "+" } + ; +}; + +interface IKeyboardShortcutProps { + value: KeyCombo; +} + +export const KeyboardShortcut: React.FC = ({ value }) => { + if (!value) return null; + + const modifiersElement = []; + if (value.ctrlOrCmdKey) { + modifiersElement.push(); + } else if (value.ctrlKey) { + modifiersElement.push(); + } else if (value.metaKey) { + modifiersElement.push(); + } + if (value.altKey) { + modifiersElement.push(); + } + if (value.shiftKey) { + modifiersElement.push(); + } + + return
+ { modifiersElement } + +
; +}; + +export default KeyboardShortcut; diff --git a/src/components/views/settings/tabs/user/KeyboardUserSettingsTab.tsx b/src/components/views/settings/tabs/user/KeyboardUserSettingsTab.tsx index 95495118f8..e1d7db4c99 100644 --- a/src/components/views/settings/tabs/user/KeyboardUserSettingsTab.tsx +++ b/src/components/views/settings/tabs/user/KeyboardUserSettingsTab.tsx @@ -18,71 +18,16 @@ limitations under the License. import React from "react"; import { - getKeyboardShortcutsForUI, - ALTERNATE_KEY_NAME, - KEY_ICON, ICategory, CATEGORIES, CategoryName, - KeyBindingConfig, } from "../../../../../accessibility/KeyboardShortcuts"; import SdkConfig from "../../../../../SdkConfig"; -import { isMac, Key } from "../../../../../Keyboard"; import { _t } from "../../../../../languageHandler"; - -// TODO: This should return KeyCombo but it has ctrlOrCmd instead of ctrlOrCmdKey -const getKeyboardShortcutValue = (name: string): KeyBindingConfig => { - return getKeyboardShortcutsForUI()[name]?.default; -}; - -const getKeyboardShortcutDisplayName = (name: string): string | null => { - const keyboardShortcutDisplayName = getKeyboardShortcutsForUI()[name]?.displayName; - return keyboardShortcutDisplayName && _t(keyboardShortcutDisplayName); -}; - -interface IKeyboardKeyProps { - name: string; - last?: boolean; -} - -export const KeyboardKey: React.FC = ({ name, last }) => { - const icon = KEY_ICON[name]; - const alternateName = ALTERNATE_KEY_NAME[name]; - - return - { icon || (alternateName && _t(alternateName)) || name } - { !last && "+" } - ; -}; - -interface IKeyboardShortcutProps { - name: string; -} - -export const KeyboardShortcut: React.FC = ({ name }) => { - const value = getKeyboardShortcutValue(name); - if (!value) return null; - - const modifiersElement = []; - if (value.ctrlOrCmdKey) { - modifiersElement.push(); - } else if (value.ctrlKey) { - modifiersElement.push(); - } else if (value.metaKey) { - modifiersElement.push(); - } - if (value.altKey) { - modifiersElement.push(); - } - if (value.shiftKey) { - modifiersElement.push(); - } - - return
- { modifiersElement } - -
; -}; +import { + getKeyboardShortcutDisplayName, getKeyboardShortcutValue, +} from "../../../../../accessibility/KeyboardShortcutUtils"; +import { KeyboardShortcut } from "../../KeyboardShortcut"; interface IKeyboardShortcutRowProps { name: string; @@ -94,11 +39,12 @@ const visibleCategories = Object.entries(CATEGORIES).filter(([categoryName]) => const KeyboardShortcutRow: React.FC = ({ name }) => { const displayName = getKeyboardShortcutDisplayName(name); - if (!displayName) return null; + const value = getKeyboardShortcutValue(name); + if (!displayName || !value) return null; return
{ displayName } - +
; }; diff --git a/test/accessibility/KeyboardShortcuts-test.ts b/test/accessibility/KeyboardShortcutUtils-test.ts similarity index 93% rename from test/accessibility/KeyboardShortcuts-test.ts rename to test/accessibility/KeyboardShortcutUtils-test.ts index b4da655f6f..4622198582 100644 --- a/test/accessibility/KeyboardShortcuts-test.ts +++ b/test/accessibility/KeyboardShortcutUtils-test.ts @@ -15,14 +15,13 @@ limitations under the License. */ import { - getKeyboardShortcutsForUI, - getKeyboardShortcuts, KEYBOARD_SHORTCUTS, mock, } from "../../src/accessibility/KeyboardShortcuts"; +import { getKeyboardShortcuts, getKeyboardShortcutsForUI } from "../../src/accessibility/KeyboardShortcutUtils"; import PlatformPeg from "../../src/PlatformPeg"; -describe("KeyboardShortcuts", () => { +describe("KeyboardShortcutUtils", () => { it("doesn't change KEYBOARD_SHORTCUTS when getting shortcuts", async () => { mock({ keyboardShortcuts: { diff --git a/test/components/views/settings/KeyboardShortcut-test.tsx b/test/components/views/settings/KeyboardShortcut-test.tsx new file mode 100644 index 0000000000..a44ab47fee --- /dev/null +++ b/test/components/views/settings/KeyboardShortcut-test.tsx @@ -0,0 +1,72 @@ + +/* +Copyright 2022 Šimon Brandner + +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 => { + const Component = (await import(PATH_TO_COMPONENT))[component]; + return mount(); +}; + +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(); + }); +}); diff --git a/test/components/views/settings/__snapshots__/KeyboardShortcut-test.tsx.snap b/test/components/views/settings/__snapshots__/KeyboardShortcut-test.tsx.snap new file mode 100644 index 0000000000..d2e43755fd --- /dev/null +++ b/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`] = ` + + + + a + + + +`; + +exports[`KeyboardShortcut doesn't render same modifier twice 1`] = ` + +
+ + + + missing translation: en|Ctrl + + + + + + + + + a + + + +
+ +`; + +exports[`KeyboardShortcut doesn't render same modifier twice 2`] = ` + +
+ + + + missing translation: en|Ctrl + + + + + + + + + a + + + +
+ +`; + +exports[`KeyboardShortcut renders alternative key name 1`] = ` + + + + missing translation: en|Page Down + + + + + +`; + +exports[`KeyboardShortcut renders key icon 1`] = ` + + + + ↓ + + + + + +`; diff --git a/test/components/views/settings/tabs/user/KeyboardUserSettingsTab-test.tsx b/test/components/views/settings/tabs/user/KeyboardUserSettingsTab-test.tsx index 2a94da0eb4..3838ce2665 100644 --- a/test/components/views/settings/tabs/user/KeyboardUserSettingsTab-test.tsx +++ b/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 => { +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 => { const Component = (await import(PATH_TO_COMPONENT))[component]; - return mount(); + return mount(); }; 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(); diff --git a/test/components/views/settings/tabs/user/__snapshots__/KeyboardUserSettingsTab-test.tsx.snap b/test/components/views/settings/tabs/user/__snapshots__/KeyboardUserSettingsTab-test.tsx.snap index 99a97a72d0..f7b1fb4055 100644 --- a/test/components/views/settings/tabs/user/__snapshots__/KeyboardUserSettingsTab-test.tsx.snap +++ b/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`] = ` - - - - a - - - -`; - -exports[`KeyboardUserSettingsTab doesn't render same modifier twice 1`] = ` - -
- - - - missing translation: en|Ctrl - - - + - - - - - a - - - -
- -`; - -exports[`KeyboardUserSettingsTab doesn't render same modifier twice 2`] = ` - -
- - - - missing translation: en|Ctrl - - - + - - - - - a - - - -
- -`; - -exports[`KeyboardUserSettingsTab renders alternative key name 1`] = ` - - - - missing translation: en|Page Down - - - + - -`; - -exports[`KeyboardUserSettingsTab renders key icon 1`] = ` - - - - ↓ - - - + - -`; - exports[`KeyboardUserSettingsTab renders list of keyboard shortcuts 1`] = `
- missing translation: en|Cancel replying to a message + Cancel replying to a message
- missing translation: en|Toggle Bold + Toggle Bold
- missing translation: en|Select room from the room list + Select room from the room list