Provide component testing utils

cypress/fixtures/userLogin.json

@@ -0,0 +1,5 @@
+{
+  "token": "327a2d17-ce9b-45a7-b0ff-a556536d27fb",
+  "user_sid": "78131ad5-f041-4d5d-821c-47b2d8c6d015",
+  "force_change": false
+}

src/components/access-control.cy.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import { H1 } from "jambonz-ui";
 
-import { StateProvider } from "src/store";
+import { TestProvider } from "src/test";
 import { AccessControl } from "./access-control";
 
 import type { ACLProps } from "./access-control";
@@ -9,13 +9,13 @@ import type { ACLProps } from "./access-control";
 /** Wrapper to pass different ACLs */
 const AccessControlTestWrapper = (props: Partial<ACLProps>) => {
   return (
-    <StateProvider>
+    <TestProvider>
       <AccessControl acl={props.acl!}>
         <div className="acl-div">
           <H1>ACL: {props.acl}</H1>
         </div>
       </AccessControl>
-    </StateProvider>
+    </TestProvider>
   );
 };
 

src/components/require-auth.cy.tsx

@@ -0,0 +1,38 @@
+import React from "react";
+import { H1 } from "jambonz-ui";
+
+import { TestProvider } from "src/test";
+import { RequireAuth } from "./require-auth";
+
+import type { AuthStateContext } from "src/router/auth";
+
+/** Wrapper to pass different auth contexts */
+const RequireAuthTestWrapper = (props: Partial<AuthStateContext>) => {
+  return (
+    <TestProvider {...(props as AuthStateContext)}>
+      <RequireAuth>
+        <div className="acl-div">
+          <H1>Protected Route</H1>
+        </div>
+      </RequireAuth>
+    </TestProvider>
+  );
+};
+
+describe("<RequireAuth>", () => {
+  it("mounts", () => {
+    cy.mount(<RequireAuthTestWrapper />);
+  });
+
+  it("is not authorized", () => {
+    cy.mount(<RequireAuthTestWrapper />);
+
+    cy.get(".acl-div").should("not.exist");
+  });
+
+  it("is authorized", () => {
+    cy.mount(<RequireAuthTestWrapper authorized />);
+
+    cy.get(".acl-div").should("exist");
+  });
+});

src/router/auth.tsx

@@ -25,7 +25,7 @@ interface SignIn {
   (username: string, password: string): Promise<UserLogin>;
 }
 
-interface AuthStateContext {
+export interface AuthStateContext {
   token: string;
   signin: SignIn;
   signout: () => void;

src/test/index.tsx

@@ -0,0 +1,43 @@
+import React from "react";
+import { BrowserRouter, Route, Routes } from "react-router-dom";
+
+import { 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 userLogin from "../../cypress/fixtures/userLogin.json";
+
+interface TestProviderProps extends Partial<AuthStateContext> {
+  children: React.ReactNode;
+}
+
+export const signinError = () => Promise.reject(MSG_SOMETHING_WRONG);
+export const signinSuccess = () => Promise.resolve(userLogin);
+export const signout = () => undefined;
+export const authProps: AuthStateContext = {
+  token: "",
+  signin: signinSuccess,
+  signout,
+  authorized: false,
+};
+
+export const TestProvider = ({ children, ...restProps }: TestProviderProps) => {
+  return (
+    <StateProvider>
+      <AuthContext.Provider
+        value={{
+          ...authProps,
+          ...restProps,
+        }}
+      >
+        <BrowserRouter>
+          <Routes>
+            <Route path="*" element={children} />
+          </Routes>
+        </BrowserRouter>
+      </AuthContext.Provider>
+    </StateProvider>
+  );
+};