Login layout container cypress test (#136)

src/containers/login/layout.cy.tsx

@@ -0,0 +1,24 @@
+import React from "react";
+
+import { Layout } from "./layout";
+import { LayoutProvider } from "src/test";
+
+const LayoutTestWrapper = () => {
+  return (
+    <LayoutProvider Layout={Layout} outlet={<div className="outlet-div" />} />
+  );
+};
+
+describe("<Layout/>", () => {
+  it("mounts", () => {
+    cy.mount(<LayoutTestWrapper />);
+  });
+
+  it("has required elements", () => {
+    cy.mount(<LayoutTestWrapper />);
+
+    cy.get("header").should("exist");
+    cy.get("footer").should("exist");
+    cy.get(".outlet-div").should("exist");
+  });
+});

src/containers/login/layout.tsx

@@ -4,6 +4,8 @@ import { MXS } from "jambonz-ui";
 
 import { Icons } from "src/components";
 
+import "./styles.scss";
+
 export const Layout = () => (
   <main className="login bg--dark">
     <header>

src/containers/login/login.tsx

@@ -11,8 +11,6 @@ import {
   ROUTE_CREATE_PASSWORD,
 } from "src/router/routes";
 
-import "./styles.scss";
-
 export const Login = () => {
   const { signin, authorized } = useAuth();
   const location = useLocation();

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>
+  );
+};