index.test.tsx

import * as React from 'react'
import * as renderer from 'react-test-renderer'
import App, { TConfig, TAction } from 'overmind'
import createConnect, { TConnect } from './'

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

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

    type Config = TConfig<{
      state: {
        foo: typeof config.state.foo
      }
      actions: {
        doThis: typeof doThis
      }
    }>

    const app = new App(config)

    type Action<Input = void, Output = any> = TAction<Input, Output, Config>

    const connect = createConnect(app)

    const Component: React.SFC<TConnect<typeof app>> = ({ app }) => {
      app.actions.doThis()
      return <h1>{app.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 = (action) =>
      action.run(() => {
        didCallAction = true
      })
    const config = {
      state: {
        foo: 'bar',
      },
      actions: {
        doThis,
      },
    }

    type Config = TConfig<{
      state: {
        foo: typeof config.state.foo
      }
      actions: {
        doThis: typeof doThis
      }
    }>

    const app = new App(config)

    type Action<Input = void, Output = any> = TAction<Input, Output, Config>

    const connect = createConnect(app)

    class Component extends React.Component<TConnect<typeof app>> {
      componentDidMount() {
        app.actions.doThis()
      }
      render() {
        const { app } = this.props

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

    expect(didCallAction).toBe(true)
    expect(tree).toMatchSnapshot()
  })
  test('should connect reactions to components', () => {
    expect.assertions(2)
    let reactionCount = 0
    const doThis: Action = (action) =>
      action.mutate((state) => (state.foo = 'bar2'))

    const config = {
      state: {
        foo: 'bar',
      },
      actions: {
        doThis,
      },
    }
    type Config = TConfig<{
      state: {
        foo: typeof config.state.foo
      }
      actions: {
        doThis: typeof doThis
      }
    }>

    const app = new App(config)

    type Action<Input = void, Output = any> = TAction<Input, Output, Config>

    const connect = createConnect(app)

    class Component extends React.Component<TConnect<typeof app>> {
      componentDidMount() {
        this.props.app.reaction(
          'my-reaction',
          (state) => state.foo,
          () => {
            reactionCount++
          }
        )
      }
      render() {
        const { app } = this.props
        return <h1>{app.state.foo}</h1>
      }
    }
    const ConnectedComponent = connect(Component)
    const instance = renderer.create(<ConnectedComponent />)
    app.actions.doThis()
    expect(reactionCount).toBe(1)
    instance.unmount()
    app.actions.doThis()
    expect(reactionCount).toBe(1)
  })
})