index.test.tsx

import { Overmind, IAction, createOvermindMock } from 'overmind'
import * as React from 'react'
import * as renderer from 'react-test-renderer'
import { IConnect, createConnect, createHook, Provider } from './'

describe('React', () => {
  test('should connect state and actions to stateless components', () => {
    expect.assertions(2)
    let didCallAction = false
    const doThis: Action = () => (didCallAction = true)

    const config = {
      state: {
        foo: 'bar',
      },
      actions: {
        doThis,
      },
    }

    type IConfig = {
      state: {
        foo: typeof config.state.foo
      }
      actions: {
        doThis: typeof doThis
      }
    }

    const app = new Overmind(config)

    interface Action<Input = void> extends IAction<IConfig, Input> {}

    const connect = createConnect(app)

    const Component: React.SFC<IConnect<IConfig>> = ({ overmind }) => {
      overmind.actions.doThis()
      return <h1>{overmind.state.foo}</h1>
    }
    const ConnectedComponent = connect(Component)
    const tree = renderer.create(<ConnectedComponent />).toJSON()

    expect(didCallAction).toBe(true)
    expect(tree).toMatchSnapshot()
  })

  test('should connect actions and state to class components', () => {
    expect.assertions(2)
    let didCallAction = false
    const doThis: Action = () => (didCallAction = true)
    const config = {
      state: {
        foo: 'bar',
      },
      actions: {
        doThis,
      },
    }

    type IConfig = {
      state: {
        foo: typeof config.state.foo
      }
      actions: {
        doThis: typeof doThis
      }
    }

    const app = new Overmind(config)

    interface Action<Input = void> extends IAction<IConfig, Input> {}

    const connect = createConnect(app)

    class Component extends React.Component<IConnect<IConfig>> {
      componentDidMount() {
        this.props.overmind.actions.doThis()
      }
      render() {
        const { overmind } = this.props

        return <h1>{overmind.state.foo}</h1>
      }
    }
    const ConnectedComponent = connect(Component)
    const tree = renderer.create(<ConnectedComponent />).toJSON()

    expect(didCallAction).toBe(true)
    expect(tree).toMatchSnapshot()
  })

  test('should allow using component as normal, even when not connected', () => {
    expect.assertions(2)
    const config = {
      state: {
        foo: 'bar',
      },
    }

    const app = new Overmind(config)

    const connect = createConnect(app)

    class Component extends React.Component<IConnect<typeof config>> {
      render() {
        const { overmind } = this.props

        return <h1>{overmind ? overmind.state.foo : 'nada'}</h1>
      }
    }
    const ConnectedComponent = connect(Component)
    const tree = renderer.create(<ConnectedComponent />).toJSON()
    const tree2 = renderer.create(<Component overmind={null as any} />).toJSON()

    expect(tree).toMatchSnapshot()
    expect(tree2).toMatchSnapshot()
  })

  test('should preserve component name', () => {
    const app = new Overmind({})
    const connect = createConnect(app)

    class FooComponent extends React.Component<IConnect<{}>> {
      render() {
        return <h1>hop</h1>
      }
    }
    function BarComponent() {
      return <div />
    }

    const ConnectedFoo = connect(FooComponent)
    const ConnectedBar = connect(BarComponent)
    expect(ConnectedFoo.name).toBe('ConnectFooComponent')
    expect(ConnectedBar.name).toBe('ConnectBarComponent')
  })

  test('should allow using shouldComponentUpdate', () => {
    let renderCount = 0

    const doThis: Action = ({ state }) => {
      state.foo = 'bar2'
    }
    const config = {
      state: {
        foo: 'bar',
      },
      actions: {
        doThis,
      },
    }

    type IConfig = {
      state: {
        foo: typeof config.state.foo
      }
      actions: {
        doThis: typeof doThis
      }
    }

    const app = new Overmind(config)

    interface Action<Input = void> extends IAction<IConfig, Input> {}

    const connect = createConnect(app)

    class FooComponent extends React.Component<IConnect<typeof config>> {
      shouldComponentUpdate(nextProps) {
        return this.props.overmind !== nextProps.overmind
      }
      render() {
        renderCount++
        return <h1>{this.props.overmind.state.foo}</h1>
      }
    }

    const ConnectedFoo = connect(FooComponent)

    const tree = renderer.create(<ConnectedFoo />).toJSON()

    expect(renderCount).toBe(1)

    app.actions.doThis()

    expect(renderCount).toBe(2)
  })
  test('should allow using hooks', () => {
    let renderCount = 0

    const doThis: Action = ({ state }) => {
      state.foo = 'bar2'
    }
    const config = {
      state: {
        foo: 'bar',
      },
      actions: {
        doThis,
      },
    }

    type IConfig = {
      state: {
        foo: typeof config.state.foo
      }
      actions: {
        doThis: typeof doThis
      }
    }

    const app = new Overmind(config)

    interface Action<Input = void> extends IAction<IConfig, Input> {}

    const useOvermind = createHook<typeof app>()

    const FooComponent: React.FunctionComponent = () => {
      const { state } = useOvermind()
      renderCount++

      return <h1>{state.foo}</h1>
    }

    const tree = renderer
      .create(
        <Provider value={app}>
          <FooComponent />
        </Provider>
      )
      .toJSON()

    expect(renderCount).toBe(1)

    renderer.act(() => {
      app.actions.doThis()
    })

    expect(renderCount).toBe(2)
    expect(tree).toMatchSnapshot()
  })
  test('should allow using mocked Overmind', () => {
    let renderCount = 0

    const doThis: Action = ({ state }) => {
      state.foo = 'bar2'
    }
    const config = {
      state: {
        foo: 'bar',
      },
      actions: {
        doThis,
      },
    }

    type IConfig = {
      state: {
        foo: typeof config.state.foo
      }
      actions: {
        doThis: typeof doThis
      }
    }

    interface Action<Input = void> extends IAction<IConfig, Input> {}

    const useOvermind = createHook<typeof config>()

    const FooComponent: React.FunctionComponent = () => {
      const { state } = useOvermind()
      renderCount++

      return <h1>{state.foo}</h1>
    }

    const mock = createOvermindMock(config)
    const tree = renderer
      .create(
        <Provider value={mock}>
          <FooComponent />
        </Provider>
      )
      .toJSON()

    expect(renderCount).toBe(1)
    expect(tree).toMatchSnapshot()
  })
})