add store props

src/components/scoped-access.cy.tsx

@@ -9,6 +9,7 @@ import { Scope } from "src/store/types";
 
 /** Wrapper to pass different user scopes as enum values */
 const ScopedAccessTestWrapper = (props: Partial<ScopedAccessProps>) => {
+  console.log(props);
   return (
     <TestProvider>
       <ScopedAccess scope={props.scope!}>

src/store/index.tsx

@@ -21,7 +21,7 @@ import type {
   ACL,
 } from "./types";
 
-const initialState: State = {
+export const initialState: State = {
   featureFlags: {
     /** Placeholder since we may need feature-flags in the future... */
     development: import.meta.env.DEV,
@@ -33,7 +33,10 @@ const initialState: State = {
   serviceProviders: [],
 };
 
-const reducer: React.Reducer<State, Action<keyof State>> = (state, action) => {
+export const reducer: React.Reducer<State, Action<keyof State>> = (
+  state,
+  action
+) => {
   switch (action.type) {
     case "user":
     case "toast":
@@ -51,7 +54,7 @@ let toastTimeout: number;
 
 /** Async middlewares */
 /** Proxies dispatch to reducer */
-const middleware: MiddleWare = (dispatch) => {
+export const middleware: MiddleWare = (dispatch) => {
   /** This generic implementation enforces global dispatch type-safety */
   return <Type extends keyof State>(action: Action<Type>) => {
     switch (action.type) {

src/test/index.tsx

@@ -1,18 +1,31 @@
-import React from "react";
+import React, { useReducer } from "react";
 import { BrowserRouter, Route, Routes } from "react-router-dom";
 
-import { StateProvider } from "src/store";
+import {
+  initialState,
+  middleware,
+  reducer,
+  StateContext,
+  StateProvider,
+} from "src/store";
 import { AuthContext } from "src/router/auth";
 import { MSG_SOMETHING_WRONG } from "src/constants";
 
-import type { AuthStateContext } from "src/router/auth";
+import { AuthStateContext, parseJwt } from "src/router/auth";
 import type { UserLogin } from "src/api/types";
 
 import userLogin from "../../cypress/fixtures/userLogin.json";
+import {
+  Action,
+  AppStateContext,
+  GlobalDispatch,
+  State,
+} from "src/store/types";
 
-type TestProviderProps = Partial<AuthStateContext> & {
-  children?: React.ReactNode;
-};
+type TestProviderProps = Partial<AppStateContext> &
+  Partial<AuthStateContext> & {
+    children?: React.ReactNode;
+  };
 
 type LayoutProviderProps = TestProviderProps & {
   outlet: JSX.Element;
@@ -33,8 +46,15 @@ export const authProps: AuthStateContext = {
  * Use this when you simply need to wrap with state and auth
  */
 export const TestProvider = ({ children, ...restProps }: TestProviderProps) => {
+  const userJWT = parseJwt(userLogin.token);
+  const [state, dispatch]: [State, React.Dispatch<Action<keyof State>>] =
+    useReducer(reducer, { ...initialState, user: userJWT });
+
+  const globalDispatch: GlobalDispatch = middleware(dispatch);
+  const storeProps: AppStateContext = { state, dispatch: globalDispatch };
+
   return (
-    <StateProvider>
+    <StateContext.Provider value={storeProps}>
       <AuthContext.Provider
         value={{
           ...authProps,
@@ -47,7 +67,7 @@ export const TestProvider = ({ children, ...restProps }: TestProviderProps) => {
           </Routes>
         </BrowserRouter>
       </AuthContext.Provider>
-    </StateProvider>
+    </StateContext.Provider>
   );
 };