improvement(useKey): Adding tests and docs

Author: microcipcip

src/functions/useKey/stories/useKey.md

@@ -5,16 +5,34 @@ Vue function that executes a handler when a keyboard key is pressed.
 ## Reference
 
 ```typescript
-// function useKey()
+type UseKeyFilter = string | ((event: KeyboardEvent) => boolean)
+```
+
+```typescript
+function useKey(
+  filter: UseKeyFilter,
+  callback?: any,
+  runOnMount?: boolean
+): {
+  isPressed: Ref<boolean>
+  isTracking: Ref<boolean>
+  start: () => void
+  stop: () => void
+}
 ```
 
 ### Parameters
 
-- `value: string` lorem ipsa
+- `filter: UseKeyFilter` the filter string or function to use for triggering the key event
+- `callback: Function` the function called when the given key is pressed
+- `runOnMount: boolean` whether to track the given key on mount, `true` by default.
 
 ### Returns
 
-- `value: Ref<string>` lorem ipsa
+- `isPressed: Ref<boolean>` whether the key is currently pressed or not
+- `isTracking: Ref<boolean>` whether this function events are running or not
+- `start: Function` the function used for start tracking the key event
+- `stop: Function` the function used for stop tracking the key event
 
 ## Usage
 

src/functions/useKey/stories/useKey.story.ts

@@ -17,7 +17,12 @@ const basicDemo = () => ({
         demo-name="UseKeyDemo.vue"
       >
         <template v-slot:title></template>
-        <template v-slot:intro></template>
+        <template v-slot:intro>
+          <p>
+            Press an arrow key (←, →, ↑, ↓) to move the ninja cat around
+            the screen.
+          </p>
+        </template>
       </story-title>
       <demo />
     </div>`

src/functions/useKey/useKey.spec.ts

@@ -1,12 +1,62 @@
-// import { mount } from '@src/helpers/test'
-// import { useKey } from '@src/vue-use-kit'
+import {
+  mount,
+  checkOnMountAndUnmountEvents,
+  checkOnStartEvents,
+  checkOnStopEvents,
+  checkElementExistenceOnMount
+} from '@src/helpers/test'
+import { useKey } from '@src/vue-use-kit'
 
 afterEach(() => {
   jest.clearAllMocks()
 })
 
+const testComponent = (filter = 'a', callback = () => ``, onMount = true) => ({
+  template: `
+    <div>
+      <div id="isTracking" v-if="isTracking"></div>
+      <div id="isPressed" v-if="isPressed"></div>
+      <button id="start" @click="start"></button>
+      <button id="stop" @click="stop"></button>
+    </div>
+  `,
+  setup() {
+    const { isPressed, isTracking, start, stop } = useKey(
+      filter,
+      callback,
+      onMount
+    )
+    return { isPressed, isTracking, start, stop }
+  }
+})
+
 describe('useKey', () => {
-  it('should do something', () => {
-    // Add test here
+  const noop = () => ``
+  const events = ['keyup', 'keydown']
+
+  it('should add events on mounted and remove them on unmounted', async () => {
+    await checkOnMountAndUnmountEvents(document, events, testComponent)
+  })
+
+  it('should add events again when start is called', async () => {
+    await checkOnStartEvents(document, events, testComponent)
+  })
+
+  it('should remove events when stop is called', async () => {
+    await checkOnStopEvents(document, events, testComponent)
+  })
+
+  it('should show #isTracking when runOnMount is true', async () => {
+    await checkElementExistenceOnMount(true, testComponent('a', noop, true))
+  })
+
+  it('should not show #isTracking when runOnMount is false', async () => {
+    await checkElementExistenceOnMount(false, testComponent('a', noop, false))
+  })
+
+  it('should not show #isPressed when no key has been pressed', async () => {
+    const wrapper = mount(testComponent())
+    await wrapper.vm.$nextTick()
+    expect(wrapper.find('#isPressed').exists()).toBe(false)
   })
 })