Login layout container cypress test (#136)

src/test/index.tsx

@@ -9,9 +9,14 @@ import type { AuthStateContext } from "src/router/auth";
 
 import userLogin from "../../cypress/fixtures/userLogin.json";
 
-interface TestProviderProps extends Partial<AuthStateContext> {
-  children: React.ReactNode;
-}
+type TestProviderProps = Partial<AuthStateContext> & {
+  children?: React.ReactNode;
+};
+
+type LayoutProviderProps = TestProviderProps & {
+  outlet: JSX.Element;
+  Layout: React.ElementType;
+};
 
 export const signinError = () => Promise.reject(MSG_SOMETHING_WRONG);
 export const signinSuccess = () => Promise.resolve(userLogin);
@@ -23,6 +28,9 @@ export const authProps: AuthStateContext = {
   authorized: false,
 };
 
+/**
+ * Use this when you simply need to wrap with state and auth
+ */
 export const TestProvider = ({ children, ...restProps }: TestProviderProps) => {
   return (
     <StateProvider>
@@ -41,3 +49,31 @@ export const TestProvider = ({ children, ...restProps }: TestProviderProps) => {
     </StateProvider>
   );
 };
+
+/**
+ * Use this when you also need to test the react-router-dom layouts
+ */
+export const LayoutProvider = ({
+  Layout,
+  outlet,
+  ...restProps
+}: LayoutProviderProps) => {
+  return (
+    <StateProvider>
+      <AuthContext.Provider
+        value={{
+          ...authProps,
+          ...restProps,
+        }}
+      >
+        <BrowserRouter>
+          <Routes>
+            <Route path="*" element={<Layout />}>
+              <Route path="*" element={outlet} />
+            </Route>
+          </Routes>
+        </BrowserRouter>
+      </AuthContext.Provider>
+    </StateProvider>
+  );
+};