fix: not possible to add hotkey

closes Not possible to add key on 20.2.1 #636
will-stone · May 1, 2023 · 8244358 · 8244358
1 parent b0b425f
commit 8244358
Show file tree

Hide file tree

Showing 8 changed files with 89 additions and 104 deletions.
diff --git a/__fixtures__/key-layout.ts b/__fixtures__/key-layout.ts
@@ -1,52 +1,52 @@
-export const keyLayout = {
-  Backquote: '`',
-  Backslash: '\\',
-  BracketLeft: '[',
-  BracketRight: ']',
-  Comma: ',',
-  Digit0: '0',
-  Digit1: '1',
-  Digit2: '2',
-  Digit3: '3',
-  Digit4: '4',
-  Digit5: '5',
-  Digit6: '6',
-  Digit7: '7',
-  Digit8: '8',
-  Digit9: '9',
-  Equal: '=',
-  IntlBackslash: '§',
-  IntlRo: '`',
-  IntlYen: '§',
-  KeyA: 'a',
-  KeyB: 'b',
-  KeyC: 'c',
-  KeyD: 'd',
-  KeyE: 'e',
-  KeyF: 'f',
-  KeyG: 'g',
-  KeyH: 'h',
-  KeyI: 'i',
-  KeyJ: 'j',
-  KeyK: 'k',
-  KeyL: 'l',
-  KeyM: 'm',
-  KeyN: 'n',
-  KeyO: 'o',
-  KeyP: 'p',
-  KeyQ: 'q',
-  KeyR: 'r',
-  KeyS: 's',
-  KeyT: 't',
-  KeyU: 'u',
-  KeyV: 'v',
-  KeyW: 'w',
-  KeyX: 'x',
-  KeyY: 'y',
-  KeyZ: 'z',
-  Minus: '-',
-  Period: '.',
-  Quote: "'",
-  Semicolon: ';',
-  Slash: '/',
-}
+export const keyLayout = [
+  ['Backquote', '`'],
+  ['Backslash', '\\'],
+  ['BracketLeft', '['],
+  ['BracketRight', ']'],
+  ['Comma', ','],
+  ['Digit0', '0'],
+  ['Digit1', '1'],
+  ['Digit2', '2'],
+  ['Digit3', '3'],
+  ['Digit4', '4'],
+  ['Digit5', '5'],
+  ['Digit6', '6'],
+  ['Digit7', '7'],
+  ['Digit8', '8'],
+  ['Digit9', '9'],
+  ['Equal', '='],
+  ['IntlBackslash', '§'],
+  ['IntlRo', '`'],
+  ['IntlYen', '§'],
+  ['KeyA', 'a'],
+  ['KeyB', 'b'],
+  ['KeyC', 'c'],
+  ['KeyD', 'd'],
+  ['KeyE', 'e'],
+  ['KeyF', 'f'],
+  ['KeyG', 'g'],
+  ['KeyH', 'h'],
+  ['KeyI', 'i'],
+  ['KeyJ', 'j'],
+  ['KeyK', 'k'],
+  ['KeyL', 'l'],
+  ['KeyM', 'm'],
+  ['KeyN', 'n'],
+  ['KeyO', 'o'],
+  ['KeyP', 'p'],
+  ['KeyQ', 'q'],
+  ['KeyR', 'r'],
+  ['KeyS', 's'],
+  ['KeyT', 't'],
+  ['KeyU', 'u'],
+  ['KeyV', 'v'],
+  ['KeyW', 'w'],
+  ['KeyX', 'x'],
+  ['KeyY', 'y'],
+  ['KeyZ', 'z'],
+  ['Minus', '-'],
+  ['Period', '.'],
+  ['Quote', "'"],
+  ['Semicolon', ';'],
+  ['Slash', '/'],
+]
diff --git a/src/renderers/picker/components/organisms/apps.test.tsx b/src/renderers/picker/components/organisms/apps.test.tsx
@@ -2,7 +2,6 @@ import '../../../shared/preload'
 
 import { fireEvent, render, screen } from '@testing-library/react'
 import electron from 'electron'
-import cloneDeep from 'lodash/cloneDeep'
 
 import { keyLayout } from '../../../../../__fixtures__/key-layout'
 import {
@@ -14,25 +13,20 @@ import { Channel } from '../../../../shared/state/channels'
 import { defaultData } from '../../../../shared/state/reducer.data'
 import { addChannelToAction } from '../../../../shared/utils/add-channel-to-action'
 import { reorderedApp } from '../../../prefs/state/actions'
-import { customWindow } from '../../../shared/custom.window'
 import { clickedApp, pressedKey } from '../../state/actions'
 import Wrapper from '../_bootstrap'
 
-const originalNavigator = cloneDeep(customWindow.navigator)
-
 beforeAll(() => {
-  customWindow.navigator = {
-    ...customWindow.navigator,
-    keyboard: {
+  global.window ??= Object.create(window)
+
+  Object.defineProperty(window.navigator, 'keyboard', {
+    value: {
       getLayoutMap: jest
         .fn()
         .mockResolvedValue({ entries: jest.fn().mockReturnValue(keyLayout) }),
     },
-  }
-})
-
-afterAll(() => {
-  customWindow.navigator = originalNavigator
+    writable: true,
+  })
 })
 
 test('kitchen sink', () => {

diff --git a/src/renderers/picker/components/organisms/url-bar.test.tsx b/src/renderers/picker/components/organisms/url-bar.test.tsx
@@ -1,30 +1,24 @@
 import '../../../shared/preload'
 
-import { act, render, screen } from '@testing-library/react'
+import { render, screen } from '@testing-library/react'
 import electron from 'electron'
-import cloneDeep from 'lodash/cloneDeep'
 
 import { keyLayout } from '../../../../../__fixtures__/key-layout'
 import { openedUrl } from '../../../../main/state/actions'
 import { Channel } from '../../../../shared/state/channels'
-import { customWindow } from '../../../shared/custom.window'
 import Wrapper from '../_bootstrap'
 
-const originalNavigator = cloneDeep(customWindow.navigator)
-
 beforeAll(() => {
-  customWindow.navigator = {
-    ...customWindow.navigator,
-    keyboard: {
+  global.window ??= Object.create(window)
+
+  Object.defineProperty(window.navigator, 'keyboard', {
+    value: {
       getLayoutMap: jest
         .fn()
         .mockResolvedValue({ entries: jest.fn().mockReturnValue(keyLayout) }),
     },
-  }
-})
-
-afterAll(() => {
-  customWindow.navigator = originalNavigator
+    writable: true,
+  })
 })
 
 test('url bar', () => {
@@ -35,9 +29,7 @@ test('url bar', () => {
   const port = ':8000'
   const rest = '/foo?bar=moo'
   const url = `${protocol}${host}${port}${rest}`
-  act(() => {
-    win.webContents.send(Channel.MAIN, openedUrl(url))
-  })
+  win.webContents.send(Channel.MAIN, openedUrl(url))
   expect(screen.queryByText(protocol)).not.toBeInTheDocument()
   expect(screen.getByText(host + port)).toBeVisible()
   expect(screen.queryByText(rest)).not.toBeInTheDocument()

diff --git a/src/renderers/picker/state/store.ts b/src/renderers/picker/state/store.ts
@@ -2,7 +2,6 @@ import type { AnyAction } from '@reduxjs/toolkit'
 
 import { Channel } from '../../../shared/state/channels'
 import createStore from '../../../shared/state/create-store'
-import { customWindow } from '../../shared/custom.window'
 import { busMiddleware } from '../../shared/state/middleware.bus'
 import { pickerMiddleware } from './middleware'
 
@@ -13,7 +12,7 @@ const store = createStore(Channel.PICKER, middleware)
 /**
  * Listen for all actions from main
  */
-customWindow.electron.receive(Channel.MAIN, (action: AnyAction) => {
+window.electron.receive(Channel.MAIN, (action: AnyAction) => {
   store.dispatch(action)
 })
 

diff --git a/src/renderers/prefs/state/store.ts b/src/renderers/prefs/state/store.ts
@@ -2,7 +2,6 @@ import type { AnyAction } from '@reduxjs/toolkit'
 
 import { Channel } from '../../../shared/state/channels'
 import createStore from '../../../shared/state/create-store'
-import { customWindow } from '../../shared/custom.window'
 import { busMiddleware } from '../../shared/state/middleware.bus'
 import { prefsMiddleware } from './middleware'
 
@@ -13,7 +12,7 @@ const store = createStore(Channel.PREFS, middleware)
 /**
  * Listen for all actions
  */
-customWindow.electron.receive(Channel.MAIN, (action: AnyAction) => {
+window.electron.receive(Channel.MAIN, (action: AnyAction) => {
   store.dispatch(action)
 })
 

diff --git a/src/renderers/shared/custom.window.ts b/src/renderers/shared/custom.window.ts
@@ -2,21 +2,20 @@ import type { AnyAction } from 'redux'
 
 import type { Channel } from '../../shared/state/channels'
 
-interface CustomNavigator extends Navigator {
-  keyboard: {
-    getLayoutMap: () => Promise<{ entries: () => Iterable<string> }>
+declare global {
+  interface Window {
+    electron: {
+      send: (channel: Channel, action: AnyAction) => void
+      receive: (
+        mainChannel: Channel.MAIN,
+        callback: (action: AnyAction) => void,
+      ) => void
+    }
   }
-}
 
-interface CustomWindow extends Window {
-  electron: {
-    send: (channel: Channel, action: AnyAction) => void
-    receive: (
-      mainChannel: Channel.MAIN,
-      callback: (action: AnyAction) => void,
-    ) => void
+  interface Navigator {
+    keyboard: {
+      getLayoutMap: () => Promise<{ entries: () => Iterable<string> }>
+    }
   }
-  navigator: CustomNavigator
 }
-
-export const customWindow = Object.create(window) as unknown as CustomWindow
diff --git a/src/renderers/shared/state/middleware.bus.ts b/src/renderers/shared/state/middleware.bus.ts
@@ -1,6 +1,5 @@
 import type { Channel } from '../../../shared/state/channels'
 import type { Middleware } from '../../../shared/state/model'
-import { customWindow } from '../custom.window'
 
 /**
  * Pass actions between main and renderers
@@ -18,7 +17,7 @@ export const busMiddleware =
 
     // Only send actions from this channel to prevent an infinite loop.
     if (action.meta?.channel === channel) {
-      customWindow.electron.send(channel, action)
+      window.electron.send(channel, action)
     }
 
     return result

diff --git a/src/renderers/shared/utils/get-key-layout-map.ts b/src/renderers/shared/utils/get-key-layout-map.ts
@@ -1,13 +1,11 @@
 import type { Dispatch } from '@reduxjs/toolkit'
 
 import type { FSA } from '../../../shared/state/model'
-import { customWindow } from '../custom.window'
 import { gotKeyLayoutMap } from '../state/actions'
 
 const getLayoutObject = async (): Promise<Record<string, string>> => {
   try {
-    const keyboardLayoutMap =
-      await customWindow.navigator.keyboard.getLayoutMap()
+    const keyboardLayoutMap = await window.navigator.keyboard.getLayoutMap()
 
     const keyValueObject: Record<string, string> = {}
 
@@ -16,7 +14,12 @@ const getLayoutObject = async (): Promise<Record<string, string>> => {
     }
 
     return keyValueObject
-  } catch {
+  } catch (error: unknown) {
+    if (error instanceof Error) {
+      // eslint-disable-next-line no-console
+      console.error(error)
+    }
+
     return {}
   }
 }