support anonymous binding better; update test cases;

ndelvalle · May 2, 2019 · e20566f · e20566f
1 parent cb62ea3
commit e20566f
Show file tree

Hide file tree

Showing 2 changed files with 39 additions and 4 deletions.
diff --git a/lib/v-click-outside.js b/lib/v-click-outside.js
@@ -71,19 +71,23 @@ function bind(el, { value }) {
   const instance = createInstance({ el, events, handler, middleware })
 
   instance.eventHandlers.forEach(({ event, handler }) =>
-    setTimeout(document.addEventListener, 0, event, handler),
+    setTimeout(() => document.addEventListener(event, handler), 0),
   )
   directive.instances.push(instance)
 }
 
-function update(el, { value }) {
+function update(el, { value, oldValue }) {
   const { events, handler, middleware, isActive } = processDirectiveArguments(value)
 
   if (!isActive) {
     removeInstance(el)
     return
   }
 
+  if (JSON.stringify(value) === JSON.stringify(oldValue)) {
+    return
+  }
+
   let instance = directive.instances.find((instance) => instance.el === el)
 
   if (instance) {
@@ -100,7 +104,7 @@ function update(el, { value }) {
   }
 
   instance.eventHandlers.forEach(({ event, handler }) =>
-    setTimeout(document.addEventListener, 0, event, handler),
+    setTimeout(() => document.addEventListener(event, handler), 0),
   )
 }
 

diff --git a/test/v-click-outside.test.js b/test/v-click-outside.test.js
@@ -1,4 +1,4 @@
-/* global jest describe it expect beforeEach */
+/* global jest describe it expect beforeEach beforeAll */
 
 import { merge } from 'lodash'
 import clickOutside from '../lib/index'
@@ -84,17 +84,23 @@ describe('v-click-outside -> directive', () => {
   })
 
   describe('unbind', () => {
+    beforeAll(() => {
+      jest.useFakeTimers()
+    })
     it('can remove whatever bind adds', () => {
       const [el1, binding1] = createHookArguments()
       directive.bind(el1, binding1)
+      jest.runOnlyPendingTimers()
       expect(directive.instances.length).toEqual(1)
 
       const [el2, binding2] = createHookArguments()
       directive.bind(el2, binding2)
+      jest.runOnlyPendingTimers()
       expect(directive.instances.length).toEqual(2)
 
       const [el3, binding3] = createHookArguments()
       directive.bind(el3, binding3)
+      jest.runOnlyPendingTimers()
       expect(directive.instances.length).toEqual(3)
 
       directive.instances
@@ -130,9 +136,21 @@ describe('v-click-outside -> directive', () => {
         expect(directive.instances.length).toEqual(1)
         expect(document.addEventListener).toHaveBeenCalledTimes(1)
 
+        binding.oldValue = binding.value
         directive.update(el, binding)
         jest.runOnlyPendingTimers()
 
+        expect(directive.instances.length).toEqual(1)
+        expect(document.addEventListener).toHaveBeenCalledTimes(1)
+        expect(document.removeEventListener).toHaveBeenCalledTimes(0)
+
+        const [, newBinding] = createHookArguments(undefined, {
+          value: { events: ['click'] },
+          oldValue: binding.oldValue,
+        })
+        directive.update(el, newBinding)
+        jest.runOnlyPendingTimers()
+
         expect(directive.instances.length).toEqual(1)
         expect(document.addEventListener).toHaveBeenCalledTimes(2)
         expect(document.removeEventListener).toHaveBeenCalledTimes(binding.value.events.length)
@@ -164,14 +182,27 @@ describe('v-click-outside -> directive', () => {
 
         expect(directive.instances.length).toEqual(0)
         expect(document.addEventListener).toHaveBeenCalledTimes(0)
+        expect(document.removeEventListener).toHaveBeenCalledTimes(0)
 
+        binding.oldValue = Object.assign({}, binding.value)
         binding.value.isActive = true
         directive.update(el, binding)
         jest.runOnlyPendingTimers()
 
         expect(directive.instances.length).toEqual(1)
         expect(document.addEventListener).toHaveBeenCalledTimes(1)
         expect(document.removeEventListener).toHaveBeenCalledTimes(0)
+
+        const [, newBinding] = createHookArguments(undefined, {
+          value: { events: ['click'] },
+          oldValue: binding.value,
+        })
+        directive.update(el, newBinding)
+        jest.runOnlyPendingTimers()
+
+        expect(directive.instances.length).toEqual(1)
+        expect(document.addEventListener).toHaveBeenCalledTimes(2)
+        expect(document.removeEventListener).toHaveBeenCalledTimes(binding.value.events.length)
       })
 
       it('updates is active binding value from false to false', () => {