test(runtime-dom): add test coverage for v-on runtime guards, fix "exact" guard (#298)

packages/runtime-dom/__tests__/directives/vOn.spec.ts

@@ -1,5 +1,5 @@
 import { patchEvent } from '../../src/modules/events'
-import { vOnModifiersGuard } from '@vue/runtime-dom'
+import { vOnModifiersGuard, vOnKeysGuard } from '@vue/runtime-dom'
 
 function triggerEvent(
   target: Element,
@@ -17,41 +17,93 @@ function triggerEvent(
 }
 
 describe('runtime-dom: v-on directive', () => {
-  test('it should support stop and prevent', async () => {
+  test('it should support "stop" and "prevent"', () => {
     const parent = document.createElement('div')
     const child = document.createElement('input')
     parent.appendChild(child)
-    const childNextValue = {
-      handler: vOnModifiersGuard(jest.fn(), ['prevent', 'stop']),
-      options: {}
-    }
+    const childNextValue = vOnModifiersGuard(jest.fn(), ['prevent', 'stop'])
     patchEvent(child, 'click', null, childNextValue, null)
-    const parentHandler = jest.fn()
-    const parentNextValue = { handler: parentHandler, options: {} }
+    const parentNextValue = jest.fn()
     patchEvent(parent, 'click', null, parentNextValue, null)
     expect(triggerEvent(child, 'click').defaultPrevented).toBe(true)
-    expect(parentHandler).not.toBeCalled()
+    expect(parentNextValue).not.toBeCalled()
+  })
+
+  test('it should support "self"', () => {
+    const parent = document.createElement('div')
+    const child = document.createElement('input')
+    parent.appendChild(child)
+    const fn = jest.fn()
+    const handler = vOnModifiersGuard(fn, ['self'])
+    patchEvent(parent, 'click', null, handler, null)
+    triggerEvent(child, 'click')
+    expect(fn).not.toBeCalled()
   })
 
   test('it should support key modifiers and system modifiers', () => {
     const el = document.createElement('div')
     const fn = jest.fn()
-    const nextValue = {
-      handler: vOnModifiersGuard(fn, ['ctrl', 'esc']),
-      options: {}
-    }
-    patchEvent(el, 'click', null, nextValue, null)
-    triggerEvent(el, 'click', e => {
+    // <div @keyup.ctrl.esc="test"/>
+    const nextValue = vOnKeysGuard(vOnModifiersGuard(fn, ['ctrl']), ['esc'])
+    patchEvent(el, 'keyup', null, nextValue, null)
+    triggerEvent(el, 'keyup', e => (e.key = 'a'))
+    expect(fn).not.toBeCalled()
+    triggerEvent(el, 'keyup', e => {
       e.ctrlKey = false
       e.key = 'esc'
     })
     expect(fn).not.toBeCalled()
-    triggerEvent(el, 'click', e => {
+    triggerEvent(el, 'keyup', e => {
       e.ctrlKey = true
       e.key = 'Escape'
     })
     expect(fn).toBeCalled()
   })
 
-  test('it should support "exact" modifier', () => {})
+  test('it should support "exact" modifier', () => {
+    const el = document.createElement('div')
+    // Case 1: <div @keyup.exact="test"/>
+    const fn1 = jest.fn()
+    const next1 = vOnModifiersGuard(fn1, ['exact'])
+    patchEvent(el, 'keyup', null, next1, null)
+    triggerEvent(el, 'keyup')
+    expect(fn1.mock.calls.length).toBe(1)
+    triggerEvent(el, 'keyup', e => (e.ctrlKey = true))
+    expect(fn1.mock.calls.length).toBe(1)
+    // Case 2: <div @keyup.ctrl.a.exact="test"/>
+    const fn2 = jest.fn()
+    const next2 = vOnKeysGuard(vOnModifiersGuard(fn2, ['ctrl', 'exact']), ['a'])
+    patchEvent(el, 'keyup', null, next2, null)
+    triggerEvent(el, 'keyup', e => (e.key = 'a'))
+    expect(fn2).not.toBeCalled()
+    triggerEvent(el, 'keyup', e => {
+      e.key = 'a'
+      e.ctrlKey = true
+    })
+    expect(fn2.mock.calls.length).toBe(1)
+    triggerEvent(el, 'keyup', e => {
+      // should not trigger if has other system modifiers
+      e.key = 'a'
+      e.ctrlKey = true
+      e.altKey = true
+    })
+    expect(fn2.mock.calls.length).toBe(1)
+  })
+
+  it('should support mouse modifiers', () => {
+    const buttons = ['left', 'middle', 'right'] as const
+    const buttonCodes = { left: 0, middle: 1, right: 2 }
+    buttons.forEach(button => {
+      const el = document.createElement('div')
+      const fn = jest.fn()
+      const handler = vOnModifiersGuard(fn, [button])
+      patchEvent(el, 'mousedown', null, handler, null)
+      buttons.filter(b => b !== button).forEach(button => {
+        triggerEvent(el, 'mousedown', e => (e.button = buttonCodes[button]))
+      })
+      expect(fn).not.toBeCalled()
+      triggerEvent(el, 'mousedown', e => (e.button = buttonCodes[button]))
+      expect(fn).toBeCalled()
+    })
+  })
 })