@shopgate/pwa-unit-test 7.31.6-beta.1 → 7.31.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shopgate/pwa-unit-test",
-  "version": "7.31.6-beta.1",
+  "version": "7.31.6",
   "description": "The unit tests setup for Shopgate's ENGAGE.",
   "author": "Shopgate <support@shopgate.com>",
   "license": "Apache-2.0",

package/testUtils/createMockStore.d.ts

@@ -3,7 +3,7 @@
  *
  * This module is only meant to be imported from test files, since it uses the jest globals.
  */
-type Listener = () => void;
+import type { Store } from 'redux';
 /** An action which was dispatched to the store. */
 export interface MockAction {
     type: string;
@@ -11,13 +11,13 @@ export interface MockAction {
 }
 /** Reducer which is applied to the dispatched actions. */
 export type MockReducer<S> = (state: S, action: MockAction) => S;
-export interface MockStore<S> {
-    /** Returns the current state. */
-    getState: () => S;
+/**
+ * A store which satisfies the Store contract of redux, so that it can be passed to the Provider
+ * of react-redux without a cast, extended by the helpers which are useful within tests.
+ */
+export interface MockStore<S> extends Store<S, MockAction> {
     /** Records every dispatched action. Assert on it like on any other jest mock. */
-    dispatch: jest.Mock<MockAction, [MockAction]>;
-    /** Registers a listener which is invoked whenever the state changed. Returns an unsubscribe. */
-    subscribe: (listener: Listener) => () => void;
+    dispatch: jest.Mock<MockAction, [MockAction]> & Store<S, MockAction>['dispatch'];
     /** Replaces the state and notifies the subscribers, so connected components re-render. */
     setState: (next: S | ((current: S) => S)) => void;
     /** Returns the dispatched actions in the order they were dispatched. */
@@ -37,4 +37,3 @@ export interface MockStore<S> {
  * @returns The mocked store.
  */
 export declare const createMockStore: <S>(initialState: S, reducer?: MockReducer<S>) => MockStore<S>;
-export {};

package/testUtils/createMockStore.js

@@ -4,10 +4,22 @@
  * This module is only meant to be imported from test files, since it uses the jest globals.
  */
 
+/**
+ * Symbol.observable is not part of the language, so redux resolves it with a string fallback. The
+ * same fallback is needed here - without it the computed property key would be undefined, and the
+ * store wouldn't fulfill the contract it claims to.
+ */
+const $$observable = typeof Symbol === 'function' && Symbol.observable || '@@observable';
+
 /** An action which was dispatched to the store. */
 
 /** Reducer which is applied to the dispatched actions. */
 
+/**
+ * A store which satisfies the Store contract of redux, so that it can be passed to the Provider
+ * of react-redux without a cast, extended by the helpers which are useful within tests.
+ */
+
 /**
  * Creates a Redux store for component tests. It implements the contract that react-redux relies on
  * - getState, dispatch and subscribe - without pulling in the reducers of the application.
@@ -21,6 +33,7 @@
  */
 export const createMockStore = (initialState, reducer) => {
   let state = initialState;
+  let currentReducer = reducer;
   const listeners = new Set();
 
   /**
@@ -32,21 +45,59 @@ export const createMockStore = (initialState, reducer) => {
     });
   };
   const dispatch = jest.fn(action => {
-    if (reducer) {
-      state = reducer(state, action);
+    if (currentReducer) {
+      state = currentReducer(state, action);
       notify();
     }
     return action;
   });
-  return {
-    getState: () => state,
-    dispatch,
-    subscribe: listener => {
-      listeners.add(listener);
-      return () => {
-        listeners.delete(listener);
+  const subscribe = listener => {
+    listeners.add(listener);
+    return () => {
+      listeners.delete(listener);
+    };
+  };
+  const getState = () => state;
+
+  /**
+   * Part of the redux Store contract. Tests don't observe the store, so this only satisfies the
+   * interface.
+   * @returns The observable of the store.
+   */
+  const observable = () => ({
+    subscribe: observer => {
+      /**
+       * Forwards the current state to the observer.
+       */
+      const handleChange = () => {
+        if (observer.next) {
+          observer.next(getState());
+        }
+      };
+      handleChange();
+      return {
+        unsubscribe: subscribe(handleChange)
       };
     },
+    [$$observable]() {
+      return this;
+    }
+  });
+
+  /**
+   * redux declares Symbol.observable as a plain symbol, so TypeScript widens the computed key to
+   * a symbol index and can't verify that this exact member is implemented. The assertion is only
+   * needed for that key - the store is verified against the contract in the spec.
+   */
+  return {
+    getState,
+    dispatch: dispatch,
+    subscribe,
+    replaceReducer: nextReducer => {
+      currentReducer = nextReducer;
+      notify();
+    },
+    [$$observable]: observable,
     setState: next => {
       state = typeof next === 'function' ? next(state) : next;
       notify();