Add tests demonstrating equivalents to Redux-Saga Effects

Author: markerikson

packages/action-listener-middleware/src/tests/effectScenarios.test.ts

@@ -0,0 +1,382 @@
+import {
+  configureStore,
+  createAction,
+  createSlice,
+  isAnyOf,
+} from '@reduxjs/toolkit'
+
+import type { AnyAction, PayloadAction, Action } from '@reduxjs/toolkit'
+
+import {
+  createActionListenerMiddleware,
+  createListenerEntry,
+  addListenerAction,
+  removeListenerAction,
+} from '../index'
+
+import type {
+  When,
+  ActionListenerMiddlewareAPI,
+  TypedAddListenerAction,
+  TypedAddListener,
+  Unsubscribe,
+} from '../index'
+import { JobCancellationException } from '../job'
+import { Outcome } from '../outcome'
+
+describe('Saga-style Effects Scenarios', () => {
+  interface CounterState {
+    value: number
+  }
+
+  const counterSlice = createSlice({
+    name: 'counter',
+    initialState: { value: 0 } as CounterState,
+    reducers: {
+      increment(state) {
+        state.value += 1
+      },
+      decrement(state) {
+        state.value -= 1
+      },
+      // Use the PayloadAction type to declare the contents of `action.payload`
+      incrementByAmount: (state, action: PayloadAction<number>) => {
+        state.value += action.payload
+      },
+    },
+  })
+  const { increment, decrement, incrementByAmount } = counterSlice.actions
+
+  let { reducer } = counterSlice
+  let middleware: ReturnType<typeof createActionListenerMiddleware>
+
+  let store = configureStore({
+    reducer,
+    middleware: (gDM) => gDM().prepend(createActionListenerMiddleware()),
+  })
+  // let middleware: ActionListenerMiddleware<CounterState> //: ReturnType<typeof createActionListenerMiddleware>
+
+  const testAction1 = createAction<string>('testAction1')
+  type TestAction1 = ReturnType<typeof testAction1>
+  const testAction2 = createAction<string>('testAction2')
+  type TestAction2 = ReturnType<typeof testAction2>
+  const testAction3 = createAction<string>('testAction3')
+  type TestAction3 = ReturnType<typeof testAction3>
+
+  type RootState = ReturnType<typeof store.getState>
+
+  let addListener: TypedAddListener<RootState>
+
+  function delay(ms: number) {
+    return new Promise((resolve) => setTimeout(resolve, ms))
+  }
+
+  beforeAll(() => {
+    const noop = () => {}
+    jest.spyOn(console, 'error').mockImplementation(noop)
+  })
+
+  beforeEach(() => {
+    middleware = createActionListenerMiddleware()
+    addListener = middleware.addListener as TypedAddListener<RootState>
+    store = configureStore({
+      reducer,
+      middleware: (gDM) => gDM().prepend(middleware),
+    })
+  })
+
+  test('throttle', async () => {
+    // Ignore incoming actions for a given period of time while processing a task.
+    // Ref: https://redux-saga.js.org/docs/api#throttlems-pattern-saga-args
+
+    let listenerCalls = 0
+    let workPerformed = 0
+
+    addListener({
+      actionCreator: increment,
+      listener: (action, listenerApi) => {
+        listenerCalls++
+
+        // Stop listening until further notice
+        listenerApi.unsubscribe()
+
+        // Queue to start listening again after a delay
+        setTimeout(listenerApi.subscribe, 15)
+        workPerformed++
+      },
+    })
+
+    // Dispatch 3 actions. First triggers listener, next two ignored.
+    store.dispatch(increment())
+    store.dispatch(increment())
+    store.dispatch(increment())
+
+    // Wait for resubscription
+    await delay(25)
+
+    // Dispatch 2 more actions, first triggers, second ignored
+    store.dispatch(increment())
+    store.dispatch(increment())
+
+    // Wait for work
+    await delay(5)
+
+    // Both listener calls completed
+    expect(listenerCalls).toBe(2)
+    expect(workPerformed).toBe(2)
+  })
+
+  test('debounce / takeLatest', async () => {
+    // Repeated calls cancel previous ones, no work performed
+    // until the specified delay elapses without another call
+    // NOTE: This is also basically identical to `takeLatest`.
+    // Ref: https://redux-saga.js.org/docs/api#debouncems-pattern-saga-args
+    // Ref: https://redux-saga.js.org/docs/api#takelatestpattern-saga-args
+
+    let listenerCalls = 0
+    let workPerformed = 0
+
+    addListener({
+      actionCreator: increment,
+      listener: async (action, listenerApi) => {
+        listenerCalls++
+
+        // Cancel any in-progress instances of this listener
+        listenerApi.cancelPrevious()
+
+        // Delay before starting actual work
+        await listenerApi.job.delay(15)
+
+        workPerformed++
+      },
+    })
+
+    // First action, listener 1 starts, nothing to cancel
+    store.dispatch(increment())
+    // Second action, listener 2 starts, cancels 1
+    store.dispatch(increment())
+    // Third action, listener 3 starts, cancels 2
+    store.dispatch(increment())
+
+    // 3 listeners started, third is still paused
+    expect(listenerCalls).toBe(3)
+    expect(workPerformed).toBe(0)
+
+    await delay(25)
+
+    // All 3 started
+    expect(listenerCalls).toBe(3)
+    // First two canceled, `delay()` threw JobCanceled and skipped work.
+    // Third actually completed.
+    expect(workPerformed).toBe(1)
+  })
+
+  test('takeEvery', async () => {
+    // Runs the listener on every action match
+    // Ref: https://redux-saga.js.org/docs/api#takeeverypattern-saga-args
+
+    // NOTE: This is already the default behavior - nothing special here!
+
+    let listenerCalls = 0
+    addListener({
+      actionCreator: increment,
+      listener: (action, listenerApi) => {
+        listenerCalls++
+      },
+    })
+
+    store.dispatch(increment())
+    expect(listenerCalls).toBe(1)
+
+    store.dispatch(increment())
+    expect(listenerCalls).toBe(2)
+  })
+
+  test('takeLeading', async () => {
+    // Starts listener on first action, ignores others until task completes
+    // Ref: https://redux-saga.js.org/docs/api#takeleadingpattern-saga-args
+
+    let listenerCalls = 0
+    let workPerformed = 0
+
+    addListener({
+      actionCreator: increment,
+      listener: async (action, listenerApi) => {
+        listenerCalls++
+
+        // Stop listening for this action
+        listenerApi.unsubscribe()
+
+        // Pretend we're doing expensive work
+        await listenerApi.job.delay(15)
+
+        workPerformed++
+
+        // Re-enable the listener
+        listenerApi.subscribe()
+      },
+    })
+
+    // First action starts the listener, which unsubscribes
+    store.dispatch(increment())
+    // Second action is ignored
+    store.dispatch(increment())
+
+    // One instance in progress, but not complete
+    expect(listenerCalls).toBe(1)
+    expect(workPerformed).toBe(0)
+
+    await delay(5)
+
+    // In-progress listener not done yet
+    store.dispatch(increment())
+
+    // No changes in status
+    expect(listenerCalls).toBe(1)
+    expect(workPerformed).toBe(0)
+
+    await delay(20)
+
+    // Work finished, should have resubscribed
+    expect(workPerformed).toBe(1)
+
+    // Listener is re-subscribed, will trigger again
+    store.dispatch(increment())
+
+    expect(listenerCalls).toBe(2)
+    expect(workPerformed).toBe(1)
+
+    await delay(20)
+
+    expect(workPerformed).toBe(2)
+  })
+
+  test('fork + join', async () => {
+    // fork starts a child job, join waits for the child to complete and return a value
+    // Ref: https://redux-saga.js.org/docs/api#forkfn-args
+    // Ref: https://redux-saga.js.org/docs/api#jointask
+
+    let childResult = 0
+
+    addListener({
+      actionCreator: increment,
+      listener: async (action, listenerApi) => {
+        // Spawn a child job and start it immediately
+        const childJobPromise = listenerApi.job.launchAndRun(
+          async (jobHandle) => {
+            // Artificially wait a bit inside the child
+            await jobHandle.delay(5)
+            // Complete the child by returning an Outcome-wrapped value
+            return Outcome.ok(42)
+          }
+        )
+
+        const result = await childJobPromise
+        // Unwrap the child result in the listener
+        if (result.isOk()) {
+          childResult = result.value
+        }
+      },
+    })
+
+    store.dispatch(increment())
+
+    await delay(10)
+    expect(childResult).toBe(42)
+  })
+
+  test('fork + cancel', async () => {
+    // fork starts a child job, cancel will raise an exception if the
+    // child is paused in the middle of an effect
+    // Ref: https://redux-saga.js.org/docs/api#forkfn-args
+
+    let childResult = 0
+    let listenerCompleted = false
+
+    addListener({
+      actionCreator: increment,
+      listener: async (action, listenerApi) => {
+        // Spawn a child job and start it immediately
+        const childJob = listenerApi.job.launch(async (jobHandle) => {
+          // Artificially wait a bit inside the child
+          await jobHandle.delay(15)
+          // Complete the child by returning an Outcome-wrapped value
+          childResult = 42
+
+          return Outcome.ok(0)
+        })
+
+        childJob.run()
+        await listenerApi.job.delay(5)
+        childJob.cancel()
+        listenerCompleted = true
+      },
+    })
+
+    // Starts listener, which starts child
+    store.dispatch(increment())
+
+    // Wait for child to have maybe completed
+    await delay(20)
+
+    // Listener finished, but the child was canceled and threw an exception, so it never finished
+    expect(listenerCompleted).toBe(true)
+    expect(childResult).toBe(0)
+  })
+
+  test('canceled', async () => {
+    // canceled allows checking if the current task was canceled
+    // Ref: https://redux-saga.js.org/docs/api#cancelled
+
+    let canceledAndCaught = false
+    let canceledCheck = false
+
+    addListener({
+      matcher: isAnyOf(increment, decrement, incrementByAmount),
+      listener: async (action, listenerApi) => {
+        if (increment.match(action)) {
+          // Have this branch wait around to be canceled by the other
+          try {
+            await listenerApi.job.delay(10)
+          } catch (err) {
+            // Can check cancelation based on the exception and its reason
+            if (err instanceof JobCancellationException) {
+              canceledAndCaught = true
+            }
+          }
+        } else if (incrementByAmount.match(action)) {
+          // do a non-cancelation-aware wait
+          await delay(15)
+          // Or can check based on `job.isCancelled`
+          if (listenerApi.job.isCancelled) {
+            canceledCheck = true
+          }
+        } else if (decrement.match(action)) {
+          listenerApi.cancelPrevious()
+        }
+      },
+    })
+
+    // Start first branch
+    store.dispatch(increment())
+    // Cancel first listener
+    store.dispatch(decrement())
+
+    // Have to wait for the delay to resolve
+    // TODO Can we make ``Job.delay()` be a race?
+    await delay(15)
+
+    expect(canceledAndCaught).toBe(true)
+
+    // Start second branch
+    store.dispatch(incrementByAmount(42))
+    // Cancel second listener, although it won't know about that until later
+    store.dispatch(decrement())
+
+    expect(canceledCheck).toBe(false)
+
+    await delay(20)
+
+    expect(canceledCheck).toBe(true)
+  })
+})

packages/action-listener-middleware/src/tests/listenerMiddleware.test.ts

@@ -22,7 +22,6 @@ import type {
   Unsubscribe,
 } from '../index'
 import { JobCancellationException } from '../job'
-import { createNonNullChain } from 'typescript'
 
 const middlewareApi = {
   getState: expect.any(Function),