[n/a] Fix breaking keyboard shortcut tests

Reworked the keyboard shortcut handler so we keep a single keydown listener and fetch the latest Zustand state on-demand via getState(), eliminating the gap where the listener was briefly removed during re-renders and causing the intermittent fullscreen toggle failure.

Author: joshuapease

CHANGELOG.md

@@ -1,6 +1,7 @@
 # Change Log
 
 ## 0.3.0
+- Fix flakey e2e test - `keyboard-shortcuts.spec.ts` ([#53](https://github.com/vigetlabs/parts-kit/pull/53))
 - [#50](https://github.com/vigetlabs/parts-kit/issues/50) - Don't escape forward slashes. Switch deep links to use a `path` parameter instead of `part`. Add routing e2e coverage. ([#51](https://github.com/vigetlabs/parts-kit/pull/51))
 - [#43](https://github.com/vigetlabs/parts-kit/issues/43) - Add a direct link button to the UtilityBar and fix anchor hover styles. ([#46](https://github.com/vigetlabs/parts-kit/pull/46))
 - [#40](https://github.com/vigetlabs/parts-kit/issues/40) - Fix keyboard shortcuts firing when focused within inputs. ([#45](https://github.com/vigetlabs/parts-kit/pull/45))

src/components/KeyboardShortcuts.tsx

@@ -1,4 +1,4 @@
-import { useEffect } from 'preact/hooks'
+import { useCallback, useEffect } from 'preact/hooks'
 import {
   useThemeStore,
   useUtilityBarStore,
@@ -54,76 +54,71 @@ function preventDefault(e: SimpleKeyboardEvent) {
 }
 
 export default function () {
-  const utilityStore = useUtilityBarStore()
-  const themeStore = useThemeStore()
+  const keydownHandler = useCallback((e: SimpleKeyboardEvent) => {
+    const utilityStore = useUtilityBarStore.getState()
+    const themeStore = useThemeStore.getState()
 
-  usePostMessageReceiver({
-    onMessage(e) {
-      if (!isKeyboardEventMessage(e.data)) {
-        return
-      }
-
-      keydownHandler(e.data.payload)
-    },
-  })
-
-  // handles different keyboard shortcuts
-  const keydownHandler = (e: SimpleKeyboardEvent) => {
     if (!canHandleKeyboard()) {
       return
     }
 
-    // Make sure all of your case statements are lowercase too
     switch (e.key.toLowerCase()) {
-      // toggle fullscreen [F]
-      case 'f':
+      case 'f': {
         preventDefault(e)
-        return utilityStore.setIsNavBarVisible(!utilityStore.isNavBarVisible)
+        utilityStore.setIsNavBarVisible(!utilityStore.isNavBarVisible)
+        return
+      }
 
-      // exit fullscreen [Esc]
-      case 'escape':
+      case 'escape': {
         preventDefault(e)
-        return utilityStore.setIsNavBarVisible(true)
+        utilityStore.setIsNavBarVisible(true)
+        return
+      }
 
-      // toggle viewport menu [Shift + V]
-      case 'v':
+      case 'v': {
         if (e.shiftKey) {
           preventDefault(e)
           utilityStore.setIsViewportOpen(!utilityStore.isViewportOpen)
         }
         return
+      }
 
-      // toggle theme [Shift + T]
-      case 't':
+      case 't': {
         if (e.shiftKey) {
           preventDefault(e)
           themeStore.toggleMode()
         }
         return
+      }
 
-      // toggle settings [Shift + S]
-      case 's':
+      case 's': {
         if (e.shiftKey) {
           preventDefault(e)
           utilityStore.setIsSettingsOpen(!utilityStore.isSettingsOpen)
         }
         return
+      }
 
       default:
         return
     }
-  }
+  }, [])
+
+  usePostMessageReceiver({
+    onMessage(e) {
+      if (!isKeyboardEventMessage(e.data)) {
+        return
+      }
+
+      keydownHandler(e.data.payload)
+    },
+  })
 
-  // be sure to track changes to your states here, or they won't update when re-used
   useEffect(() => {
-    document.addEventListener('keydown', keydownHandler)
+    const handleKeydown = (event: KeyboardEvent) => keydownHandler(event)
+    document.addEventListener('keydown', handleKeydown)
     return () => {
-      document.removeEventListener('keydown', keydownHandler)
+      document.removeEventListener('keydown', handleKeydown)
     }
-  }, [
-    utilityStore.isNavBarVisible,
-    utilityStore.isViewportOpen,
-    utilityStore.isSettingsOpen,
-    themeStore.mode,
-  ])
+  }, [keydownHandler])
 }