refactor: use vue-directive-normalizer and refactor nudge, with extra…

… test cases

packages/veui/jest.config.js

@@ -6,7 +6,7 @@ module.exports = {
     '^veui\\/(.*)': '<rootDir>/src/$1',
     '^veui-theme-one-icons\\/(.*)':
       '<rootDir>/../veui-theme-one-icons/icons/$1',
-    '^vue$': '<rootDir>/node_modules/vue/dist/vue.common.js'
+    '^vue$': '<rootDir>/node_modules/vue/dist/vue.common.prod.js'
   },
   setupFiles: ['./test/unit/env.js'],
   snapshotSerializers: ['jest-serializer-vue'],

packages/veui/src/directives/nudge.js

@@ -1,11 +1,20 @@
-import { find, get, noop, isFunction } from 'lodash'
+import { normalize } from 'vue-directive-normalizer'
 import config from '../managers/config'
-import { getNumberArg } from '../utils/helper'
 
 config.defaults({
   'nudge.step': 1
 })
 
+const OPTIONS_SCHEMA = {
+  value: 'update',
+  modifiers: {
+    axis: ['y', 'x']
+  },
+  defaults: () => ({
+    step: config.get('nudge.step')
+  })
+}
+
 function clear (el) {
   let nudgeData = el.__nudgeData__
   if (!nudgeData) {
@@ -16,40 +25,11 @@ function clear (el) {
   el.__nudgeData__ = null
 }
 
-function parseParams ({ value, modifiers }) {
-  // 解析 axis
-  let axis = find(['x', 'y'], item => modifiers[item])
-  if (!axis) {
-    axis = get(value, 'axis', 'y')
-  }
-
-  function parseFn (name) {
-    if (isFunction(value)) {
-      return value
-    }
-
-    let fn = get(value, name, noop)
-    return isFunction(fn) ? fn : noop
-  }
-
-  // 解析回调函数
-  let update = parseFn('update')
-
-  let step =
-    get(value, 'step') || getNumberArg(modifiers, config.get('nudge.step'))
-
-  return {
-    axis,
-    step,
-    update
-  }
-}
-
-function refresh (el, { modifiers, value, arg }) {
-  const params = parseParams({ arg, value, modifiers })
+function refresh (el, binding) {
+  const options = normalize(binding, OPTIONS_SCHEMA)
 
   if (el.__nudgeData__) {
-    el.__nudgeData__.setOptions(params)
+    el.__nudgeData__.setOptions(options)
     return
   }
 
@@ -98,7 +78,7 @@ function refresh (el, { modifiers, value, arg }) {
 
   el.addEventListener('keydown', nudgeData.keydownHandler)
   el.__nudgeData__ = nudgeData
-  el.__nudgeData__.setOptions(params)
+  el.__nudgeData__.setOptions(options)
 }
 
 export default {

packages/veui/test/unit/specs/directives/nudge.spec.js

@@ -0,0 +1,130 @@
+import { mount } from '@vue/test-utils'
+import nudge from '@/directives/nudge'
+import config from '@/managers/config'
+
+const DEFAULT_STEP = config.get('nudge.step')
+
+describe('directives/nudge', () => {
+  it(`should callback with step ${DEFAULT_STEP} upon keydown by default`, done => {
+    let updated = []
+    const wrapper = mount({
+      directives: { nudge },
+      template: `<div tabindex="0" v-nudge="handler">foo</div>`,
+      methods: {
+        handler (val) {
+          updated.push(val)
+
+          if (updated.length === 6) {
+            expect(updated).toEqual([1, -1, 0.1, -0.1, 10, -10])
+            done()
+          }
+        }
+      }
+    })
+    wrapper.find('div').trigger('keydown', {
+      key: 'ArrowUp'
+    })
+    wrapper.find('div').trigger('keydown', {
+      key: 'ArrowDown'
+    })
+    wrapper.find('div').trigger('keydown', {
+      key: 'ArrowUp',
+      altKey: true
+    })
+    wrapper.find('div').trigger('keydown', {
+      key: 'ArrowDown',
+      altKey: true
+    })
+    wrapper.find('div').trigger('keydown', {
+      key: 'ArrowUp',
+      shiftKey: true
+    })
+    wrapper.find('div').trigger('keydown', {
+      key: 'ArrowDown',
+      shiftKey: true
+    })
+  })
+
+  it(`should callback with specified step value upon keydown by default`, done => {
+    let updated = []
+    const wrapper = mount({
+      directives: { nudge },
+      template: `<div tabindex="0" v-nudge="{
+          update: handler,
+          step: 10
+        }">foo</div>`,
+      methods: {
+        handler (val) {
+          updated.push(val)
+
+          if (updated.length === 6) {
+            expect(updated).toEqual([10, -10, 1, -1, 100, -100])
+            done()
+          }
+        }
+      }
+    })
+    wrapper.find('div').trigger('keydown', {
+      key: 'ArrowUp'
+    })
+    wrapper.find('div').trigger('keydown', {
+      key: 'ArrowDown'
+    })
+    wrapper.find('div').trigger('keydown', {
+      key: 'ArrowUp',
+      altKey: true
+    })
+    wrapper.find('div').trigger('keydown', {
+      key: 'ArrowDown',
+      altKey: true
+    })
+    wrapper.find('div').trigger('keydown', {
+      key: 'ArrowUp',
+      shiftKey: true
+    })
+    wrapper.find('div').trigger('keydown', {
+      key: 'ArrowDown',
+      shiftKey: true
+    })
+  })
+
+  it(`should be able to specify axis`, done => {
+    let updated = []
+    const wrapper = mount({
+      directives: { nudge },
+      template: `<div tabindex="0" v-nudge.x="handler">foo</div>`,
+      methods: {
+        handler (val) {
+          updated.push(val)
+
+          if (updated.length === 6) {
+            expect(updated).toEqual([1, -1, 0.1, -0.1, 10, -10])
+            done()
+          }
+        }
+      }
+    })
+    wrapper.find('div').trigger('keydown', {
+      key: 'ArrowRight'
+    })
+    wrapper.find('div').trigger('keydown', {
+      key: 'ArrowLeft'
+    })
+    wrapper.find('div').trigger('keydown', {
+      key: 'ArrowRight',
+      altKey: true
+    })
+    wrapper.find('div').trigger('keydown', {
+      key: 'ArrowLeft',
+      altKey: true
+    })
+    wrapper.find('div').trigger('keydown', {
+      key: 'ArrowRight',
+      shiftKey: true
+    })
+    wrapper.find('div').trigger('keydown', {
+      key: 'ArrowLeft',
+      shiftKey: true
+    })
+  })
+})