index.test.tsx

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

type Connect<State, Actions> = TConnect<State, Actions>

describe('React', () => {
  test('should connect state and actions to stateless components', () => {
    expect.assertions(2)
    let didCallAction = false
    const app = new App({
      state: {
        foo: 'bar',
      },
      actions: (action) => ({
        doThis: action().do(() => {
          didCallAction = true
        }),
      }),
    })

    const Component: React.SFC<
      Connect<typeof app.state, typeof app.actions>
    > = ({ app }) => {
      app.actions.doThis()
      return <h1>{app.state.foo}</h1>
    }
    const ConnectedComponent = app.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 app = new App({
      state: {
        foo: 'bar',
      },
      actions: (action) => ({
        doThis: action().do(() => {
          didCallAction = true
        }),
      }),
    })
    class Component extends React.Component<
      Connect<typeof app.state, typeof app.actions>
    > {
      render() {
        const { app } = this.props
        app.actions.doThis()
        return <h1>{app.state.foo}</h1>
      }
    }
    const ConnectedComponent = app.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 app = new App({
      state: {
        foo: 'bar',
      },
      actions: (action) => ({
        doThis: action().mutation((state) => (state.foo = 'bar2')),
      }),
    })
    class Component extends React.Component<
      Connect<typeof app.state, typeof app.actions>
    > {
      componentDidMount() {
        this.props.app.reaction(
          'my-reaction',
          (state) => state.foo,
          () => {
            reactionCount++
          }
        )
      }
      render() {
        const { app } = this.props
        return <h1>{app.state.foo}</h1>
      }
    }
    const ConnectedComponent = app.connect(Component)
    const instance = renderer.create(<ConnectedComponent />)
    app.actions.doThis()
    expect(reactionCount).toBe(1)
    instance.unmount()
    app.actions.doThis()
    expect(reactionCount).toBe(1)
  })
})