test: use key pressed tests

packages/core/src/helpers/useEventListener/useEventListener.ts

@@ -1,6 +1,6 @@
 import { isRef, MaybeRefOrGetter, onBeforeUnmount, toValue, watch } from 'vue';
-import { Arrayable, Maybe } from '../types';
-import { isCallable, normalizeArrayable } from '../utils/common';
+import { Arrayable, Maybe } from '../../types';
+import { isCallable, normalizeArrayable } from '../../utils/common';
 
 interface ListenerOptions {
   disabled?: MaybeRefOrGetter<boolean>;
@@ -26,7 +26,6 @@ export function useEventListener<TEvent extends Event>(
     }
 
     const events = normalizeArrayable(event);
-
     events.forEach(evt => {
       el.addEventListener(evt, listener as EventListener);
     });
@@ -43,6 +42,7 @@ export function useEventListener<TEvent extends Event>(
         setup(target);
       }
     },
+    { immediate: true },
   );
 
   onBeforeUnmount(() => {
@@ -57,8 +57,17 @@ export function useEventListener<TEvent extends Event>(
   if (isCallable(opts?.disabled) || isRef(opts?.disabled)) {
     watch(opts.disabled, value => {
       const target = toValue(targetRef);
-      if (!value && target) {
+      if (!target) {
+        return;
+      }
+
+      if (!value) {
         setup(target);
+        return;
+      }
+
+      if (value) {
+        cleanup(target);
       }
     });
   }

packages/core/src/helpers/useKeyPressed/useKeyPressed.spec.ts

@@ -0,0 +1,69 @@
+import { renderSetup } from '@test-utils/index';
+import { useKeyPressed } from './useKeyPressed';
+import { fireEvent } from '@testing-library/vue';
+import { nextTick, ref } from 'vue';
+
+describe('ref is true as long as the key is held', () => {
+  test('accepts single key string', async () => {
+    const { isPressed } = await renderSetup(() => {
+      return { isPressed: useKeyPressed('ShiftLeft') };
+    });
+
+    expect(isPressed.value).toBe(false);
+    await fireEvent.keyDown(window, { code: 'ShiftLeft' });
+    expect(isPressed.value).toBe(true);
+    await fireEvent.keyUp(window, { code: 'ShiftLeft' });
+    expect(isPressed.value).toBe(false);
+  });
+
+  test('accepts multiple key strings', async () => {
+    const { isPressed } = await renderSetup(() => {
+      return { isPressed: useKeyPressed(['KeyK', 'KeyL']) };
+    });
+
+    expect(isPressed.value).toBe(false);
+    await fireEvent.keyDown(window, { code: 'KeyK' });
+    expect(isPressed.value).toBe(true);
+    await fireEvent.keyUp(window, { code: 'KeyK' });
+    expect(isPressed.value).toBe(false);
+
+    await fireEvent.keyDown(window, { code: 'KeyL' });
+    expect(isPressed.value).toBe(true);
+    await fireEvent.keyUp(window, { code: 'KeyL' });
+    expect(isPressed.value).toBe(false);
+  });
+
+  test('accepts a predicate', async () => {
+    const { isPressed } = await renderSetup(() => {
+      return { isPressed: useKeyPressed(e => e.code === 'KeyK') };
+    });
+
+    expect(isPressed.value).toBe(false);
+    await fireEvent.keyDown(window, { code: 'KeyK' });
+    expect(isPressed.value).toBe(true);
+    await fireEvent.keyUp(window, { code: 'KeyK' });
+    expect(isPressed.value).toBe(false);
+  });
+});
+
+test('can be disabled', async () => {
+  const isDisabled = ref(true);
+  const { isPressed } = await renderSetup(() => {
+    return { isPressed: useKeyPressed('KeyK', isDisabled) };
+  });
+
+  expect(isPressed.value).toBe(false);
+  await fireEvent.keyDown(window, { code: 'KeyK' });
+  expect(isPressed.value).toBe(false);
+  await fireEvent.keyUp(window, { code: 'KeyK' });
+  expect(isPressed.value).toBe(false);
+
+  isDisabled.value = false;
+  await nextTick();
+
+  expect(isPressed.value).toBe(false);
+  await fireEvent.keyDown(window, { code: 'KeyK' });
+  expect(isPressed.value).toBe(true);
+  await fireEvent.keyUp(window, { code: 'KeyK' });
+  expect(isPressed.value).toBe(false);
+});

packages/core/src/helpers/useKeyPressed/useKeyPressed.ts

@@ -1,7 +1,7 @@
-import { useEventListener } from './useEventListener';
 import { MaybeRefOrGetter, shallowRef } from 'vue';
-import { Arrayable } from '../types';
-import { isCallable, normalizeArrayable } from '../utils/common';
+import { useEventListener } from '../useEventListener';
+import { Arrayable } from '../../types';
+import { isCallable, normalizeArrayable } from '../../utils/common';
 
 export function useKeyPressed(
   codes: Arrayable<string> | ((evt: KeyboardEvent) => boolean),
@@ -15,6 +15,8 @@ export function useKeyPressed(
     }
   }
 
+  // We don't care if the multiple keys can be pressed to trigger it initially
+  // because it's a rare case and it's not worth the complexity, user can split it into multiple hooks
   function onKeyup(e: KeyboardEvent) {
     if (predicate(e)) {
       isPressed.value = false;

packages/core/src/helpers/usePopoverController/usePopoverController.ts

@@ -1,6 +1,6 @@
 import { Ref, shallowRef, watch } from 'vue';
-import { useEventListener } from './useEventListener';
-import { Maybe } from '../types';
+import { useEventListener } from '../useEventListener';
+import { Maybe } from '../../types';
 
 export function usePopoverController(popoverEl: Ref<Maybe<HTMLElement>>) {
   const isOpen = shallowRef(false);

vitest.config.ts

@@ -10,6 +10,7 @@ export default defineConfig({
     exclude: ['docs/*', ...configDefaults.exclude],
     coverage: {
       reporter: ['html', 'json'],
+      include: [...(configDefaults.coverage.include || [])],
       exclude: [
         '**/*/devtools.ts',
         'packages/**/dist/**',