diff --git a/.size-snapshot.json b/.size-snapshot.json index ea3af11c..a947ab50 100644 --- a/.size-snapshot.json +++ b/.size-snapshot.json @@ -1,18 +1,18 @@ { "dist/react-powerplug.umd.js": { - "bundled": 23707, - "minified": 9407, - "gzipped": 2594 + "bundled": 23752, + "minified": 9415, + "gzipped": 2597 }, "dist/react-powerplug.cjs.js": { - "bundled": 20771, - "minified": 10819, - "gzipped": 2483 + "bundled": 20814, + "minified": 10827, + "gzipped": 2486 }, "dist/react-powerplug.esm.js": { - "bundled": 20109, - "minified": 10259, - "gzipped": 2344, + "bundled": 20152, + "minified": 10267, + "gzipped": 2349, "treeshaked": { "rollup": { "code": 365, diff --git a/src/utils/compose.js b/src/utils/compose.js index 8a8cc5f3..49d48325 100644 --- a/src/utils/compose.js +++ b/src/utils/compose.js @@ -4,6 +4,8 @@ import renderProps from './renderProps' const isElement = element => typeof element.type === 'function' const compose = (...elements) => { + const reversedElements = elements.reverse() + return composedProps => { // Stack children arguments recursively and pass // it down until the last component that render children @@ -29,7 +31,7 @@ const compose = (...elements) => { return elementFn(element, {}, renderFn) } - return stackProps(elements.length - 1, elements.reverse()) + return stackProps(elements.length - 1, reversedElements) } } diff --git a/tests/components/Compose.test.js b/tests/components/Compose.test.js index 3cb9b8a3..b8ed405f 100644 --- a/tests/components/Compose.test.js +++ b/tests/components/Compose.test.js @@ -1,25 +1,28 @@ import * as React from 'react' import TestRenderer from 'react-test-renderer' import { Compose, Counter, Toggle } from '../../src' +import { lastCallArgs } from './utils' test('', () => { - let lastCallProps = null - const renderFn = (...props) => { - lastCallProps = props - return null - } + const renderFn = jest.fn().mockReturnValue(null) TestRenderer.create( ) - expect(lastCallProps[0].count).toBe(0) - expect(lastCallProps[1].on).toBe(false) + expect(renderFn).toBeCalledTimes(1) + expect(renderFn).lastCalledWith( + expect.objectContaining({ count: 0 }), + expect.objectContaining({ on: false }) + ) - lastCallProps[0].inc() - lastCallProps[0].incBy(3) - lastCallProps[1].toggle() + lastCallArgs(renderFn)[0].inc() + lastCallArgs(renderFn)[0].incBy(3) + lastCallArgs(renderFn)[1].toggle() - expect(lastCallProps[0].count).toBe(4) - expect(lastCallProps[1].on).toBe(true) + expect(renderFn).toBeCalledTimes(4) + expect(renderFn).lastCalledWith( + expect.objectContaining({ count: 4 }), + expect.objectContaining({ on: true }) + ) }) diff --git a/tests/components/utils.js b/tests/components/utils.js index c1e18d2f..66b995ff 100644 --- a/tests/components/utils.js +++ b/tests/components/utils.js @@ -1,3 +1,4 @@ const last = arr => arr[Math.max(0, arr.length - 1)] export const lastCallArg = mockFn => last(mockFn.mock.calls)[0] +export const lastCallArgs = mockFn => last(mockFn.mock.calls) diff --git a/tests/utils/compose.test.js b/tests/utils/compose.test.js new file mode 100644 index 00000000..b52ed6e8 --- /dev/null +++ b/tests/utils/compose.test.js @@ -0,0 +1,36 @@ +import * as React from 'react' +import TestRenderer from 'react-test-renderer' +import { compose, Counter, Toggle } from '../../src' + +test('rerender composed component', () => { + const CounterToggle = compose(Counter, Toggle) + const renderFn = jest.fn().mockReturnValue(null) + let rerender = null + + TestRenderer.create( + + {({ on, toggle }) => { + rerender = toggle + + return ( + // hard rerender + + ) + }} + + ) + + expect(renderFn).toBeCalledTimes(1) + expect(renderFn).lastCalledWith( + expect.objectContaining({ count: 0 }), + expect.objectContaining({ on: false }) + ) + + rerender() + + expect(renderFn).toBeCalledTimes(2) + expect(renderFn).lastCalledWith( + expect.objectContaining({ count: 0 }), + expect.objectContaining({ on: false }) + ) +})