Rough in tests for new hooks and react components

packages/react/package.json

@@ -26,6 +26,7 @@
   "devDependencies": {
     "@gadget-client/super-auth": "^1.13139.0",
     "@gadgetinc/api-client-core": "workspace:*",
+    "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",
     "@types/deep-equal": "^1.0.1",
     "@types/jest": "^29.5.2",

packages/react/spec/components/SignedIn.spec.tsx

@@ -1,5 +1,26 @@
+import { render } from "@testing-library/react";
+import React from "react";
+import { SignedIn } from "../../src/components/SignedIn";
+import { TestWrapperWithAuth } from "../testWrapper";
+import '@testing-library/jest-dom'
+
 describe("SignedIn", () => {
-  test("renders without crashing", () => {
-    expect(true).toBe(false);
+  test("renders children when signed in", () => {
+    // TODO: mock useSession hook
+    const { getByText} = render((
+      <h1>
+        Hello<SignedIn>, Jane!</SignedIn>
+      </h1>
+    ), { wrapper: TestWrapperWithAuth });
+    expect(getByText('Hello, Jane!')).toBeInTheDocument()
+  });
+
+  test("renders nothing when signed out", () => {
+    const { getByText} = render((
+      <h1>
+        Hello<SignedIn>, Jane!</SignedIn>
+      </h1>
+    ), { wrapper: TestWrapperWithAuth });
+    expect(getByText(', Jane!')).not.toBeInTheDocument()
   });
 });

packages/react/spec/components/SignedInOrRedirect.spec.tsx

@@ -1,5 +1,42 @@
-describe("SignedInOrRedirect", () => {
-  test("renders without crashing", () => {
-    expect(true).toBe(false);
+import { render } from "@testing-library/react";
+import React from "react";
+import { SignedInOrRedirect } from "../../src/components/SignedInOrRedirect";
+import { TestWrapperWithAuth } from "../testWrapper";
+import '@testing-library/jest-dom'
+
+describe("SignedInOrRedirectOrRedirect", () => {
+  test("redirects when signed out", () => {
+    render((
+      <SignedInOrRedirect>
+        Hello, Jane!
+      </SignedInOrRedirect>
+    ), { wrapper: TestWrapperWithAuth });
+
+    const mockAssign = jest.fn();
+    Object.defineProperty(window, 'location', {
+      value: {
+        assign: mockAssign,
+      }
+    });
+
+    expect(mockAssign).toHaveBeenCalledWith('/auth/signin');
+  });
+
+  test("renders when signed in", () => {
+    const { getByText} = render((
+      <h1>
+        Hello<SignedInOrRedirect>, Jane!</SignedInOrRedirect>
+      </h1>
+    ), { wrapper: TestWrapperWithAuth });
+
+    const mockAssign = jest.fn();
+    Object.defineProperty(window, 'location', {
+      value: {
+        assign: mockAssign,
+      }
+    });
+
+    expect(mockAssign).not.toBeCalled();
+    expect(getByText(', Jane!')).not.toBeInTheDocument();
   });
 });

packages/react/spec/components/SignedOut.spec.tsx

@@ -1,5 +1,26 @@
+import { render } from "@testing-library/react";
+import React from "react";
+import { SignedOut } from "../../src/components/SignedOut";
+import { TestWrapperWithAuth } from "../testWrapper";
+import '@testing-library/jest-dom'
+
 describe("SignedOut", () => {
-  test("renders without crashing", () => {
-    expect(true).toBe(false);
+  test("renders children when signed out", () => {
+    const { getByText} = render((
+      <h1>
+        Hello<SignedOut>, Jane!</SignedOut>
+      </h1>
+    ), { wrapper: TestWrapperWithAuth });
+    expect(getByText('Hello, Jane!')).toBeInTheDocument()
+  });
+
+  test("renders nothing when signed in", () => {
+    // TODO: mock useSession hook
+    const { getByText} = render((
+      <h1>
+        Hello<SignedOut>, Jane!</SignedOut>
+      </h1>
+    ), { wrapper: TestWrapperWithAuth });
+    expect(getByText(', Jane!')).not.toBeInTheDocument()
   });
 });

packages/react/spec/testWrapper.tsx

@@ -164,10 +164,10 @@ export const TestWrapperWithAuth = (props: { children: ReactNode }) => {
   // mimic a barebones api client with auth that will allow us to make mocked requests
   jest.spyOn(GadgetConnection.prototype, "currentClient", "get").mockReturnValue(mockUrqlClient);
   return (
-    <Provider api={superAuthApi}>
-      {/* <Suspense fallback={<div>Loading...</div>}> */}
+    <Provider api={superAuthApi as unknown as AnyClient}>
+      <Suspense fallback={<div>Loading...</div>}>
         {props.children}
-      {/* </Suspense> */}
+      </Suspense>
     </Provider>
   );
 };

packages/react/src/auth/useSession.ts

@@ -36,10 +36,4 @@ export const useSession = (): GadgetSession | undefined => {
   return session;
 }
 
-export const isSessionSignedOut = (session: GadgetSession) => {
-  return session?.userId == undefined;
-}
-
-export const isSessionSignedIn = (session: GadgetSession) => {
-  return !isSessionSignedOut(session);
-}
+export default useSession;

packages/react/src/auth/utils.ts

@@ -0,0 +1,9 @@
+import type { GadgetSession } from "./useSession";
+
+export const isSessionSignedOut = (session: GadgetSession) => {
+  return session?.userId == undefined;
+}
+
+export const isSessionSignedIn = (session: GadgetSession) => {
+  return !isSessionSignedOut(session);
+}

packages/react/src/components/SignedIn.tsx

@@ -1,5 +1,6 @@
 import type { ReactNode } from "react";
-import { isSessionSignedIn, useSession } from "../../src/auth/useSession";
+import { useSession } from "../../src/auth/useSession";
+import { isSessionSignedIn } from "../../src/auth/utils";
 
 export const SignedIn = (props: { children: ReactNode}) => {
   const session = useSession();

packages/react/src/components/SignedInOrRedirect.tsx

@@ -1,7 +1,8 @@
 import type { ReactNode} from "react";
 import { useContext, useEffect } from "react";
-import { GadgetClientContext } from "src/GadgetProvider";
-import { useSession, isSessionSignedIn } from "../../src/auth/useSession";
+import { GadgetClientContext } from "../../src/GadgetProvider";
+import { useSession } from "../../src/auth/useSession";
+import { isSessionSignedIn } from "../../src/auth/utils";
 
 export const SignedInOrRedirect = (props: { children: ReactNode }) => {
   const session = useSession();
@@ -10,8 +11,7 @@ export const SignedInOrRedirect = (props: { children: ReactNode }) => {
 
   useEffect(() => {
     if (context?.signInPath && !isSignedIn) {
-      // TODO: change to provider value
-      window.location.href = context.signInPath;
+      window.location.assign(context.signInPath);
     }
   }, [isSignedIn, context?.signInPath]);
 

packages/react/src/components/SignedOut.tsx

@@ -1,7 +1,8 @@
 import type { ReactNode } from "react";
-import { isSessionSignedOut, useSession } from "../../src/auth/useSession";
+import { useSession } from "../../src/auth/useSession";
+import { isSessionSignedOut } from "../../src/auth/utils";
 
-export const SignedOUt = (props: { children: ReactNode}) => {
+export const SignedOut = (props: { children: ReactNode}) => {
   const session = useSession();
   if (!session || isSessionSignedOut(session)) {
     return props.children;