with-debounce-handler: invoke actual function from component props

deepsweet · Jul 27, 2018 · 9d31b54 · 9d31b54
1 parent c78586c
commit 9d31b54
Show file tree

Hide file tree

Showing 3 changed files with 51 additions and 57 deletions.
diff --git a/packages/debounce-handler/src/index.js b/packages/debounce-handler/src/index.js
@@ -7,21 +7,25 @@ const debounceHandler = (handlerName, delay, leadingCall) => (Target) => {
     constructor (props, context) {
       super(props, context)
 
-      const debounced = debounce(props[handlerName], delay, leadingCall)
+      this.debouncedPropInvoke = debounce(
+        (...args) => this.props[handlerName](...args),
+        delay,
+        leadingCall
+      )
 
-      this[handlerName] = (e, ...rest) => {
+      this.handler = (e, ...rest) => {
         if (e && typeof e.persist === 'function') {
           e.persist()
         }
 
-        return debounced(e, ...rest)
+        return this.debouncedPropInvoke(e, ...rest)
       }
     }
 
     render () {
       return createElement(Target, {
         ...this.props,
-        [handlerName]: this[handlerName]
+        [handlerName]: this.handler
       })
     }
   }

diff --git a/packages/debounce-handler/test/__snapshots__/index.js.snap b/packages/debounce-handler/test/__snapshots__/index.js.snap
@@ -19,19 +19,19 @@ exports[`debounceHandler display name should wrap display name in non-production
 exports[`debounceHandler should call \`e.persist()\` if it has been passed 1`] = `
 Array [
   Array [
-    [MockFunction] {
-      "calls": Array [
-        Array [],
-      ],
-      "results": Array [
-        Object {
-          "isThrow": false,
-          "value": undefined,
-        },
-      ],
+    Object {
+      "persist": [MockFunction] {
+        "calls": Array [
+          Array [],
+        ],
+        "results": Array [
+          Object {
+            "isThrow": false,
+            "value": undefined,
+          },
+        ],
+      },
     },
-    undefined,
-    undefined,
   ],
 ]
 `;
@@ -42,20 +42,20 @@ Array [
 ]
 `;
 
+exports[`debounceHandler should call actual handler during lifecycle 1`] = `Array []`;
+
+exports[`debounceHandler should call actual handler during lifecycle 2`] = `
+Array [
+  Array [
+    undefined,
+  ],
+]
+`;
+
 exports[`debounceHandler should pass \`delay\` option to \`just-debounce-it\` 1`] = `
 Array [
   Array [
-    [MockFunction] {
-      "calls": Array [
-        Array [],
-      ],
-      "results": Array [
-        Object {
-          "isThrow": false,
-          "value": undefined,
-        },
-      ],
-    },
+    [Function],
     75,
     undefined,
   ],
@@ -65,17 +65,7 @@ Array [
 exports[`debounceHandler should pass \`leadingCall\` option to \`just-debounce-it\` 1`] = `
 Array [
   Array [
-    [MockFunction] {
-      "calls": Array [
-        Array [],
-      ],
-      "results": Array [
-        Object {
-          "isThrow": false,
-          "value": undefined,
-        },
-      ],
-    },
+    [Function],
     75,
     true,
   ],
@@ -85,18 +75,6 @@ Array [
 exports[`debounceHandler should pass handler arguments through 1`] = `
 Array [
   Array [
-    [MockFunction] {
-      "calls": Array [
-        Array [],
-      ],
-      "results": Array [
-        Object {
-          "isThrow": false,
-          "value": undefined,
-        },
-      ],
-    },
-    undefined,
     undefined,
   ],
 ]

diff --git a/packages/debounce-handler/test/index.js b/packages/debounce-handler/test/index.js
@@ -8,7 +8,7 @@ describe('debounceHandler', () => {
   let debounceHandler = null
 
   beforeEach(() => {
-    mockJustDebounce = jest.fn(() => () => {})
+    mockJustDebounce = jest.fn(cb => cb)
 
     jest.mock('just-debounce-it', () => mockJustDebounce)
     jest.resetModules()
@@ -29,9 +29,24 @@ describe('debounceHandler', () => {
     const testHandler = wrapper.find(Target).prop('testHandler')
 
     testHandler()
-    mockTestHandler()
 
-    expect(mockJustDebounce.mock.calls).toMatchSnapshot()
+    expect(mockTestHandler.mock.calls).toMatchSnapshot()
+  })
+
+  it('should call actual handler during lifecycle', () => {
+    const EnhancedTarget = debounceHandler('testHandler')(Target)
+    const mockTestHandlerInitial = jest.fn()
+    const mockTestHandlerUpdated = jest.fn()
+    const wrapper = mount(
+      <EnhancedTarget testHandler={mockTestHandlerInitial} />
+    )
+    wrapper.setProps({testHandler: mockTestHandlerUpdated})
+    const testHandler = wrapper.find(Target).prop('testHandler')
+
+    testHandler()
+
+    expect(mockTestHandlerInitial.mock.calls).toMatchSnapshot()
+    expect(mockTestHandlerUpdated.mock.calls).toMatchSnapshot()
   })
 
   it('should call `e.persist()` if it has been passed', () => {
@@ -44,9 +59,8 @@ describe('debounceHandler', () => {
     const testHandler = wrapper.find(Target).prop('testHandler')
 
     testHandler({ persist: mockPersist })
-    mockTestHandler()
 
-    expect(mockJustDebounce.mock.calls).toMatchSnapshot()
+    expect(mockTestHandler.mock.calls).toMatchSnapshot()
     expect(mockPersist.mock.calls).toMatchSnapshot()
   })
 
@@ -59,7 +73,6 @@ describe('debounceHandler', () => {
     const testHandler = wrapper.find(Target).prop('testHandler')
 
     testHandler()
-    mockTestHandler()
 
     expect(mockJustDebounce.mock.calls).toMatchSnapshot()
   })
@@ -73,7 +86,6 @@ describe('debounceHandler', () => {
     const testHandler = wrapper.find(Target).prop('testHandler')
 
     testHandler()
-    mockTestHandler()
 
     expect(mockJustDebounce.mock.calls).toMatchSnapshot()
   })