Test onChange callback (#97)

Author: TrySound

.size-snapshot.json

@@ -1,18 +1,18 @@
 {
   "dist/react-powerplug.umd.js": {
-    "bundled": 24183,
-    "minified": 9975,
-    "gzipped": 2574
+    "bundled": 24334,
+    "minified": 10031,
+    "gzipped": 2590
   },
   "dist/react-powerplug.cjs.js": {
-    "bundled": 21066,
-    "minified": 10851,
-    "gzipped": 2438
+    "bundled": 21207,
+    "minified": 10907,
+    "gzipped": 2453
   },
   "dist/react-powerplug.esm.js": {
-    "bundled": 20420,
-    "minified": 10302,
-    "gzipped": 2310,
+    "bundled": 20561,
+    "minified": 10358,
+    "gzipped": 2328,
     "treeshaked": {
       "rollup": 1489,
       "webpack": 1939

src/components/FocusManager.js

@@ -3,7 +3,10 @@ import State from './State'
 import renderProps from '../utils/renderProps'
 
 const FocusManager = ({ onChange, ...props }) => (
-  <State initial={{ isFocused: false, timeoutId: null }} onChange={onChange}>
+  <State
+    initial={{ isFocused: false, timeoutId: null }}
+    onChange={({ isFocused }) => onChange && onChange({ isFocused })}
+  >
     {({ state, setState }) =>
       renderProps(props, {
         isFocused: state.isFocused,

tests/components/Counter.test.js

@@ -5,8 +5,8 @@ import { last } from './utils'
 
 test('<Counter />', () => {
   const renderFn = jest.fn().mockReturnValue(null)
-  TestRenderer.create(<Counter render={renderFn} />)
   const lastCalled = () => last(renderFn.mock.calls)[0]
+  TestRenderer.create(<Counter render={renderFn} />)
 
   expect(renderFn).toHaveBeenCalledTimes(1)
   expect(lastCalled().count).toBe(0)
@@ -23,3 +23,16 @@ test('<Counter />', () => {
   lastCalled().decBy(3)
   expect(lastCalled().count).toBe(2)
 })
+
+test('<Counter onChange />', () => {
+  const renderFn = jest.fn().mockReturnValue(null)
+  const onChangeFn = jest.fn()
+  const lastCalled = () => last(renderFn.mock.calls)[0]
+  TestRenderer.create(<Counter onChange={onChangeFn} render={renderFn} />)
+
+  expect(onChangeFn).toHaveBeenCalledTimes(0)
+
+  lastCalled().inc()
+  expect(onChangeFn).toHaveBeenCalledTimes(1)
+  expect(onChangeFn).lastCalledWith({ count: 1 })
+})

tests/components/FocusManager.test.js

@@ -81,14 +81,16 @@ test('keep focus when click on menu', async () => {
 test('restore focus after calling blur on inner component', async () => {
   const page = await bootstrap()
   const renderFn = jest.fn()
+  const onChangeFn = jest.fn()
   await page.exposeFunction('renderFn', renderFn)
+  await page.exposeFunction('onChangeFn', onChangeFn)
 
   await page.evaluate(() => {
     const React = window.React
     const FocusManager = window.ReactPowerPlug.FocusManager
 
     const App = () => (
-      <FocusManager>
+      <FocusManager onChange={window.onChangeFn}>
         {({ isFocused, blur, bind }) => {
           window.renderFn({ isFocused })
           const stopPropagation = e => e.stopPropagation()
@@ -115,8 +117,11 @@ test('restore focus after calling blur on inner component', async () => {
   expect(renderFn).lastCalledWith({ isFocused: false })
   await page.click('#outer')
   expect(renderFn).lastCalledWith({ isFocused: true })
+  expect(onChangeFn).lastCalledWith({ isFocused: true })
   await page.click('#inner')
   expect(renderFn).lastCalledWith({ isFocused: false })
+  expect(onChangeFn).lastCalledWith({ isFocused: false })
   await page.click('#outer')
   expect(renderFn).lastCalledWith({ isFocused: true })
+  expect(onChangeFn).lastCalledWith({ isFocused: true })
 })

tests/components/List.test.js

@@ -5,8 +5,8 @@ import { last } from './utils'
 
 test('<List />', () => {
   const renderFn = jest.fn().mockReturnValue(null)
-  TestRenderer.create(<List initial={[1]} render={renderFn} />)
   const lastCalled = () => last(renderFn.mock.calls)[0]
+  TestRenderer.create(<List initial={[1]} render={renderFn} />)
 
   expect(renderFn).toHaveBeenCalledTimes(1)
   expect(lastCalled().list).toEqual([1])
@@ -39,3 +39,16 @@ test('<List />', () => {
   lastCalled().push(1, 2, 3)
   expect(lastCalled().list).toEqual([1, 2, 3])
 })
+
+test('<List onChange />', () => {
+  const renderFn = jest.fn().mockReturnValue(null)
+  const onChangeFn = jest.fn()
+  const lastCalled = () => last(renderFn.mock.calls)[0]
+  TestRenderer.create(<List onChange={onChangeFn} render={renderFn} />)
+
+  expect(onChangeFn).toHaveBeenCalledTimes(0)
+
+  lastCalled().set([1])
+  expect(onChangeFn).toHaveBeenCalledTimes(1)
+  expect(onChangeFn).lastCalledWith({ list: [1] })
+})

tests/components/Map.test.js

@@ -5,8 +5,8 @@ import { last } from './utils'
 
 test('<Map />', () => {
   const renderFn = jest.fn().mockReturnValue(null)
-  TestRenderer.create(<Map initial={{ a: 0 }} render={renderFn} />)
   const lastCalled = () => last(renderFn.mock.calls)[0]
+  TestRenderer.create(<Map initial={{ a: 0 }} render={renderFn} />)
 
   expect(renderFn).toHaveBeenCalledTimes(1)
 
@@ -18,3 +18,16 @@ test('<Map />', () => {
   lastCalled().over('a', d => d + 10)
   expect(lastCalled().get('a')).toBe(11)
 })
+
+test('<Map onChange />', () => {
+  const renderFn = jest.fn().mockReturnValue(null)
+  const onChangeFn = jest.fn()
+  const lastCalled = () => last(renderFn.mock.calls)[0]
+  TestRenderer.create(<Map onChange={onChangeFn} render={renderFn} />)
+
+  expect(onChangeFn).toHaveBeenCalledTimes(0)
+
+  lastCalled().set('a', 1)
+  expect(onChangeFn).toHaveBeenCalledTimes(1)
+  expect(onChangeFn).lastCalledWith({ a: 1 })
+})

tests/components/Set.test.js

@@ -5,8 +5,8 @@ import { last } from './utils'
 
 test('<Set />', () => {
   const renderFn = jest.fn().mockReturnValue(null)
-  TestRenderer.create(<Set initial={[1, 2, 3, 1, 3]} render={renderFn} />)
   const lastCalled = () => last(renderFn.mock.calls)[0]
+  TestRenderer.create(<Set initial={[1, 2, 3, 1, 3]} render={renderFn} />)
 
   expect(renderFn).toHaveBeenCalledTimes(1)
 
@@ -29,3 +29,16 @@ test('<Set />', () => {
   expect(lastCalled().has(4)).toBe(false)
   expect(lastCalled().values).toEqual([])
 })
+
+test('<Set onChange />', () => {
+  const renderFn = jest.fn().mockReturnValue(null)
+  const onChangeFn = jest.fn()
+  const lastCalled = () => last(renderFn.mock.calls)[0]
+  TestRenderer.create(<Set onChange={onChangeFn} render={renderFn} />)
+
+  expect(onChangeFn).toHaveBeenCalledTimes(0)
+
+  lastCalled().add(1)
+  expect(onChangeFn).toHaveBeenCalledTimes(1)
+  expect(onChangeFn).lastCalledWith({ values: [1] })
+})

tests/components/State.test.js

@@ -4,13 +4,8 @@ import { State } from '../../src'
 import { last } from './utils'
 
 test('<State />', () => {
-  const onChangeFn = jest.fn()
   const renderFn = jest.fn().mockReturnValue(null)
-  TestRenderer.create(
-    <State initial={{ myValue: 1 }} onChange={onChangeFn}>
-      {renderFn}
-    </State>
-  )
+  TestRenderer.create(<State initial={{ myValue: 1 }} render={renderFn} />)
 
   // Initial values
   expect(renderFn).lastCalledWith({
@@ -25,5 +20,19 @@ test('<State />', () => {
     state: { myValue: 2 },
     setState: expect.any(Function),
   })
+})
+
+test('<State onChange />', () => {
+  const onChangeFn = jest.fn()
+  const renderFn = jest.fn().mockReturnValue(null)
+  const lastCalled = () => last(renderFn.mock.calls)[0]
+  TestRenderer.create(
+    <State initial={{ myValue: 1 }} onChange={onChangeFn} render={renderFn} />
+  )
+
+  expect(onChangeFn).toHaveBeenCalledTimes(0)
+
+  lastCalled().setState({ myValue: 2 })
+  expect(onChangeFn).toHaveBeenCalledTimes(1)
   expect(onChangeFn).toBeCalledWith({ myValue: 2 })
 })

tests/components/Toggle.test.js

@@ -5,8 +5,8 @@ import { last } from './utils'
 
 test('<Toggle />', () => {
   const renderFn = jest.fn().mockReturnValue(null)
-  TestRenderer.create(<Toggle render={renderFn} />)
   const lastCalled = () => last(renderFn.mock.calls)[0]
+  TestRenderer.create(<Toggle render={renderFn} />)
 
   expect(renderFn).toHaveBeenCalledTimes(1)
   expect(lastCalled().on).toBe(false)
@@ -20,3 +20,18 @@ test('<Toggle />', () => {
   lastCalled().set(on => !on)
   expect(lastCalled().on).toBe(true)
 })
+
+test('<Toggle onChange />', () => {
+  const renderFn = jest.fn().mockReturnValue(null)
+  const onChangeFn = jest.fn()
+  const lastCalled = () => last(renderFn.mock.calls)[0]
+  TestRenderer.create(
+    <Toggle initial={false} onChange={onChangeFn} render={renderFn} />
+  )
+
+  expect(onChangeFn).toHaveBeenCalledTimes(0)
+
+  lastCalled().set(true)
+  expect(onChangeFn).toHaveBeenCalledTimes(1)
+  expect(onChangeFn).lastCalledWith({ on: true })
+})

tests/components/Value.test.js

@@ -5,8 +5,8 @@ import { last } from './utils'
 
 test('<Value />', () => {
   const renderFn = jest.fn().mockReturnValue(null)
-  TestRenderer.create(<Value initial={{ a: 1 }} render={renderFn} />)
   const lastCalled = () => last(renderFn.mock.calls)[0]
+  TestRenderer.create(<Value initial={{ a: 1 }} render={renderFn} />)
 
   expect(renderFn).toHaveBeenCalledTimes(1)
 
@@ -21,3 +21,18 @@ test('<Value />', () => {
   lastCalled().set(0)
   expect(lastCalled().value).toEqual(0)
 })
+
+test('<Value onChange />', () => {
+  const renderFn = jest.fn().mockReturnValue(null)
+  const onChangeFn = jest.fn()
+  const lastCalled = () => last(renderFn.mock.calls)[0]
+  TestRenderer.create(
+    <Value initial={0} onChange={onChangeFn} render={renderFn} />
+  )
+
+  expect(onChangeFn).toHaveBeenCalledTimes(0)
+
+  lastCalled().set(1)
+  expect(onChangeFn).toHaveBeenCalledTimes(1)
+  expect(onChangeFn).lastCalledWith({ value: 1 })
+})