File size: 3,220 Bytes
c2b7eb3
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
import * as React from 'react'
import { createDynamicMiddleware } from '../react'
import { configureStore } from '../../configureStore'
import { makeProbeableMiddleware, probeMiddleware } from './index.test'
import { render } from '@testing-library/react'
import type { Dispatch } from 'redux'
import type { ReactReduxContextValue } from 'react-redux'
import { Provider } from 'react-redux'

const staticMiddleware = makeProbeableMiddleware(1)

describe('createReactDynamicMiddleware', () => {
  describe('createDispatchWithMiddlewareHook', () => {
    it('injects middleware upon creation', () => {
      const dynamicInstance = createDynamicMiddleware()
      const store = configureStore({
        reducer: () => 0,
        middleware: (gDM) =>
          gDM().prepend(dynamicInstance.middleware).concat(staticMiddleware),
      })
      // normal, pre-inject
      expect(store.dispatch(probeMiddleware(2))).toEqual(probeMiddleware(2))
      // static
      expect(store.dispatch(probeMiddleware(1))).toBe(1)

      const useDispatch = dynamicInstance.createDispatchWithMiddlewareHook(
        makeProbeableMiddleware(2),
      )

      // injected
      expect(store.dispatch(probeMiddleware(2))).toBe(2)
    })

    it('returns dispatch', () => {
      const dynamicInstance = createDynamicMiddleware()
      const store = configureStore({
        reducer: () => 0,
        middleware: (gDM) =>
          gDM().prepend(dynamicInstance.middleware).concat(staticMiddleware),
      })

      const useDispatch = dynamicInstance.createDispatchWithMiddlewareHook(
        makeProbeableMiddleware(2),
      )

      let dispatch: Dispatch | undefined
      function Component() {
        dispatch = useDispatch()

        return null
      }
      render(<Component />, {
        wrapper: ({ children }) => (
          <Provider store={store}>{children}</Provider>
        ),
      })
      expect(dispatch).toBe(store.dispatch)
    })
  })
  describe('createDispatchWithMiddlewareHookFactory', () => {
    it('returns the correct store dispatch', () => {
      const dynamicInstance = createDynamicMiddleware()
      const store = configureStore({
        reducer: () => 0,
        middleware: (gDM) =>
          gDM().prepend(dynamicInstance.middleware).concat(staticMiddleware),
      })
      const store2 = configureStore({
        reducer: () => '',
        middleware: (gDM) =>
          gDM().prepend(dynamicInstance.middleware).concat(staticMiddleware),
      })

      const context = React.createContext<ReactReduxContextValue | null>(null)

      const createDispatchWithMiddlewareHook =
        dynamicInstance.createDispatchWithMiddlewareHookFactory(context)

      const useDispatch = createDispatchWithMiddlewareHook(
        makeProbeableMiddleware(2),
      )

      let dispatch: Dispatch | undefined
      function Component() {
        dispatch = useDispatch()

        return null
      }
      render(<Component />, {
        wrapper: ({ children }) => (
          <Provider store={store}>
            <Provider context={context} store={store2}>
              {children}
            </Provider>
          </Provider>
        ),
      })
      expect(dispatch).toBe(store2.dispatch)
    })
  })
})