diff --git a/packages/react/spec/auth/useIsSignedIn.spec.ts b/packages/react/spec/auth/useIsSignedIn.spec.ts index 20a7ee9c4..3b4cebb7f 100644 --- a/packages/react/spec/auth/useIsSignedIn.spec.ts +++ b/packages/react/spec/auth/useIsSignedIn.spec.ts @@ -1,28 +1,14 @@ import { renderHook } from "@testing-library/react"; import { superAuthApi } from "../../spec/apis"; import { useIsSignedIn } from "../../src/auth/useIsSignedIn"; -import { TestWrapper, mockUrqlClient } from "../testWrapper"; +import { TestWrapper } from "../testWrapper"; +import { expectMockSignedInUser, expectMockSignedOutUser } from "../../spec/utils"; describe("useIsSignedIn", () => { test("returns true if the user is signed in", async () => { const { result, rerender } = renderHook(() => useIsSignedIn(), { wrapper: TestWrapper(superAuthApi) }); - expect(mockUrqlClient.executeQuery).toBeCalledTimes(1); - mockUrqlClient.executeQuery.pushResponse("currentSession", { - data: { - currentSession: { - id: "123", - userId: "321", - user: { - id: "321", - firstName: "Jane", - lastName: "Doe", - }, - }, - }, - stale: false, - hasNext: false, - }); + expectMockSignedInUser(); rerender(); expect(result.current).toBe(true); @@ -31,18 +17,7 @@ describe("useIsSignedIn", () => { test("returns false if the user is signed out", async () => { const { result, rerender } = renderHook(() => useIsSignedIn(), { wrapper: TestWrapper(superAuthApi) }); - expect(mockUrqlClient.executeQuery).toBeCalledTimes(1); - mockUrqlClient.executeQuery.pushResponse("currentSession", { - data: { - currentSession: { - id: "123", - userId: null, - user: null, - }, - }, - stale: false, - hasNext: false, - }); + expectMockSignedOutUser(); rerender(); expect(result.current).toBe(false); diff --git a/packages/react/spec/auth/useSession.spec.ts b/packages/react/spec/auth/useSession.spec.ts index 5f3db1ea2..bab0182f4 100644 --- a/packages/react/spec/auth/useSession.spec.ts +++ b/packages/react/spec/auth/useSession.spec.ts @@ -1,28 +1,14 @@ import { renderHook } from "@testing-library/react"; import { superAuthApi } from "../../spec/apis"; import { useSession } from "../../src/auth/useSession"; -import { TestWrapper, mockUrqlClient } from "../testWrapper"; +import { TestWrapper } from "../testWrapper"; +import { expectMockSignedInUser, expectMockSignedOutUser } from "../../spec/utils"; describe("useSession", () => { test("it returns the current session when the user is logged in", async () => { const { result, rerender } = renderHook(() => useSession(), { wrapper: TestWrapper(superAuthApi) }); - expect(mockUrqlClient.executeQuery).toBeCalledTimes(1); - mockUrqlClient.executeQuery.pushResponse("currentSession", { - data: { - currentSession: { - id: "123", - userId: "321", - user: { - id: "321", - firstName: "Jane", - lastName: "Doe", - }, - }, - }, - stale: false, - hasNext: false, - }); + expectMockSignedInUser(); rerender(); @@ -36,18 +22,7 @@ describe("useSession", () => { test("it returns the current session when the user is logged out", async () => { const { result } = renderHook(() => useSession(), { wrapper: TestWrapper(superAuthApi) }); - expect(mockUrqlClient.executeQuery).toBeCalledTimes(1); - mockUrqlClient.executeQuery.pushResponse("currentSession", { - data: { - currentSession: { - id: "123", - userId: null, - user: null, - }, - }, - stale: false, - hasNext: false, - }); + expectMockSignedOutUser(); expect(result.current).toBeDefined(); expect(result.current!.id).toEqual("123"); diff --git a/packages/react/spec/auth/useUser.spec.ts b/packages/react/spec/auth/useUser.spec.ts index 85fc2c684..7cbe82eb8 100644 --- a/packages/react/spec/auth/useUser.spec.ts +++ b/packages/react/spec/auth/useUser.spec.ts @@ -1,28 +1,14 @@ import { renderHook } from "@testing-library/react"; import { superAuthApi } from "../../spec/apis"; import { useUser } from "../../src/auth/useUser"; -import { TestWrapper, mockUrqlClient } from "../testWrapper"; +import { TestWrapper } from "../testWrapper"; +import { expectMockSignedInUser, expectMockSignedOutUser } from "../../spec/utils"; describe("useUser", () => { test("it returns the current user when the user is logged in", async () => { const { result, rerender } = renderHook(() => useUser(), { wrapper: TestWrapper(superAuthApi) }); - expect(mockUrqlClient.executeQuery).toBeCalledTimes(1); - mockUrqlClient.executeQuery.pushResponse("currentSession", { - data: { - currentSession: { - id: "123", - userId: "321", - user: { - id: "321", - firstName: "Jane", - lastName: "Doe", - }, - }, - }, - stale: false, - hasNext: false, - }); + expectMockSignedInUser(); rerender(); expect(result.current!.id).toEqual("321"); @@ -33,18 +19,7 @@ describe("useUser", () => { test("it returns null when the user is logged out", async () => { const { result, rerender } = renderHook(() => useUser(), { wrapper: TestWrapper(superAuthApi) }); - expect(mockUrqlClient.executeQuery).toBeCalledTimes(1); - mockUrqlClient.executeQuery.pushResponse("currentSession", { - data: { - currentSession: { - id: "123", - userId: null, - user: null, - }, - }, - stale: false, - hasNext: false, - }); + expectMockSignedOutUser(); rerender(); expect(result.current).toBe(null); diff --git a/packages/react/spec/components/SignedIn.spec.tsx b/packages/react/spec/components/SignedIn.spec.tsx index 47ccfacee..de8601405 100644 --- a/packages/react/spec/components/SignedIn.spec.tsx +++ b/packages/react/spec/components/SignedIn.spec.tsx @@ -2,8 +2,9 @@ import "@testing-library/jest-dom"; import { render } from "@testing-library/react"; import React from "react"; import { superAuthApi } from "../../spec/apis"; +import { expectMockSignedInUser, expectMockSignedOutUser } from "../../spec/utils"; import { SignedIn } from "../../src/components/SignedIn"; -import { TestWrapper, mockUrqlClient } from "../testWrapper"; +import { TestWrapper } from "../testWrapper"; describe("SignedIn", () => { test("renders children when signed in", () => { @@ -15,22 +16,7 @@ describe("SignedIn", () => { const { container, rerender } = render(component, { wrapper: TestWrapper(superAuthApi) }); - expect(mockUrqlClient.executeQuery).toBeCalledTimes(1); - mockUrqlClient.executeQuery.pushResponse("currentSession", { - data: { - currentSession: { - id: "123", - userId: "321", - user: { - id: "321", - firstName: "Jane", - lastName: "Doe", - }, - }, - }, - stale: false, - hasNext: false, - }); + expectMockSignedInUser(); rerender(component); @@ -47,18 +33,7 @@ describe("SignedIn", () => { const { container, rerender } = render(component, { wrapper: TestWrapper(superAuthApi) }); - expect(mockUrqlClient.executeQuery).toBeCalledTimes(1); - mockUrqlClient.executeQuery.pushResponse("currentSession", { - data: { - currentSession: { - id: "123", - userId: null, - user: null, - }, - }, - stale: false, - hasNext: false, - }); + expectMockSignedOutUser(); rerender(component); expect(container.outerHTML).toMatchInlineSnapshot(`"

Hello

"`); }); diff --git a/packages/react/spec/components/SignedInOrRedirect.spec.tsx b/packages/react/spec/components/SignedInOrRedirect.spec.tsx index cd46a5ff5..a0e065044 100644 --- a/packages/react/spec/components/SignedInOrRedirect.spec.tsx +++ b/packages/react/spec/components/SignedInOrRedirect.spec.tsx @@ -2,7 +2,8 @@ import "@testing-library/jest-dom"; import { render } from "@testing-library/react"; import React from "react"; import { superAuthApi } from "../../spec/apis"; -import { TestWrapper, mockUrqlClient } from "../../spec/testWrapper"; +import { TestWrapper } from "../../spec/testWrapper"; +import { expectMockSignedInUser, expectMockSignedOutUser } from "../../spec/utils"; import { SignedInOrRedirect } from "../../src/components/SignedInOrRedirect"; describe("SignedInOrRedirectOrRedirect", () => { @@ -10,7 +11,9 @@ describe("SignedInOrRedirectOrRedirect", () => { const mockAssign = jest.fn(); beforeAll(() => { + // @ts-expect-error mock delete window.location; + // @ts-expect-error mock window.location = { assign: mockAssign }; }); @@ -30,19 +33,7 @@ describe("SignedInOrRedirectOrRedirect", () => { ); const { rerender } = render(component, { wrapper: TestWrapper(superAuthApi) }); - - expect(mockUrqlClient.executeQuery).toBeCalledTimes(1); - mockUrqlClient.executeQuery.pushResponse("currentSession", { - data: { - currentSession: { - id: "123", - userId: null, - user: null, - }, - }, - stale: false, - hasNext: false, - }); + expectMockSignedOutUser(); rerender(component); expect(mockAssign).toHaveBeenCalledTimes(1); @@ -58,22 +49,7 @@ describe("SignedInOrRedirectOrRedirect", () => { const { container, rerender } = render(component, { wrapper: TestWrapper(superAuthApi) }); - expect(mockUrqlClient.executeQuery).toBeCalledTimes(1); - mockUrqlClient.executeQuery.pushResponse("currentSession", { - data: { - currentSession: { - id: "123", - userId: "321", - user: { - id: "321", - firstName: "Jane", - lastName: "Doe", - }, - }, - }, - stale: false, - hasNext: false, - }); + expectMockSignedInUser(); rerender(component); diff --git a/packages/react/spec/components/SignedOut.spec.tsx b/packages/react/spec/components/SignedOut.spec.tsx index 48275673d..1981a7508 100644 --- a/packages/react/spec/components/SignedOut.spec.tsx +++ b/packages/react/spec/components/SignedOut.spec.tsx @@ -2,7 +2,8 @@ import "@testing-library/jest-dom"; import { render } from "@testing-library/react"; import React from "react"; import { superAuthApi } from "../../spec/apis"; -import { TestWrapper, mockUrqlClient } from "../../spec/testWrapper"; +import { TestWrapper } from "../../spec/testWrapper"; +import { expectMockSignedInUser, expectMockSignedOutUser } from "../../spec/utils"; import { SignedOut } from "../../src/components/SignedOut"; describe("SignedOut", () => { @@ -15,18 +16,7 @@ describe("SignedOut", () => { const { container, rerender } = render(component, { wrapper: TestWrapper(superAuthApi) }); - expect(mockUrqlClient.executeQuery).toBeCalledTimes(1); - mockUrqlClient.executeQuery.pushResponse("currentSession", { - data: { - currentSession: { - id: "123", - userId: null, - user: null, - }, - }, - stale: false, - hasNext: false, - }); + expectMockSignedOutUser(); rerender(component); expect(container.outerHTML).toMatchInlineSnapshot(`"

Hello, Jane!

"`); @@ -41,22 +31,7 @@ describe("SignedOut", () => { const { container, rerender } = render(component, { wrapper: TestWrapper(superAuthApi) }); - expect(mockUrqlClient.executeQuery).toBeCalledTimes(1); - mockUrqlClient.executeQuery.pushResponse("currentSession", { - data: { - currentSession: { - id: "123", - userId: "321", - user: { - id: "321", - firstName: "Jane", - lastName: "Doe", - }, - }, - }, - stale: false, - hasNext: false, - }); + expectMockSignedInUser(); rerender(component); expect(container.outerHTML).toMatchInlineSnapshot(`"

Hello

"`); diff --git a/packages/react/spec/testWrapper.tsx b/packages/react/spec/testWrapper.tsx index b5d976c94..bc38e6dbc 100644 --- a/packages/react/spec/testWrapper.tsx +++ b/packages/react/spec/testWrapper.tsx @@ -150,14 +150,13 @@ export const createMockUrqlCient = (assertions?: { }; export const TestWrapper = (api: AnyClient) => (props: { children: ReactNode }) => { - // any individual test will only use one of those, but mock them all out for simplicity - jest.spyOn(relatedProductsApi.connection, "currentClient", "get").mockReturnValue(mockUrqlClient); - jest.spyOn(bulkExampleApi.connection, "currentClient", "get").mockReturnValue(mockUrqlClient); - jest.spyOn(superAuthApi.connection, "currentClient", "get").mockReturnValue(mockUrqlClient); + jest.spyOn(api.connection, "currentClient", "get").mockReturnValue(mockUrqlClient); return ( - Loading...}>{props.children} + Loading...}> + {props.children} + ); }; diff --git a/packages/react/spec/utils.ts b/packages/react/spec/utils.ts new file mode 100644 index 000000000..ff9f09bfb --- /dev/null +++ b/packages/react/spec/utils.ts @@ -0,0 +1,35 @@ +import { mockUrqlClient } from "./testWrapper"; + +export const expectMockSignedInUser = () => { + expect(mockUrqlClient.executeQuery).toBeCalledTimes(1); + mockUrqlClient.executeQuery.pushResponse("currentSession", { + data: { + currentSession: { + id: "123", + userId: "321", + user: { + id: "321", + firstName: "Jane", + lastName: "Doe", + }, + }, + }, + stale: false, + hasNext: false, + }); +}; + +export const expectMockSignedOutUser = () => { + expect(mockUrqlClient.executeQuery).toBeCalledTimes(1); + mockUrqlClient.executeQuery.pushResponse("currentSession", { + data: { + currentSession: { + id: "123", + userId: null, + user: null, + }, + }, + stale: false, + hasNext: false, + }); +}; diff --git a/packages/react/src/auth/useSession.ts b/packages/react/src/auth/useSession.ts index a77e28612..a5e6a518b 100644 --- a/packages/react/src/auth/useSession.ts +++ b/packages/react/src/auth/useSession.ts @@ -35,4 +35,3 @@ export const useSession = (): GadgetSession | undefined => { const [{ data: session }] = useGetSessionAndUser(); return session; }; - diff --git a/packages/react/src/components/SignedIn.tsx b/packages/react/src/components/SignedIn.tsx index 760c215be..e0fcb3b2d 100644 --- a/packages/react/src/components/SignedIn.tsx +++ b/packages/react/src/components/SignedIn.tsx @@ -1,11 +1,12 @@ import type { ReactNode } from "react"; import { useSession } from "../../src/auth/useSession"; import { isSessionSignedIn } from "../../src/auth/utils"; +import React from "react"; export const SignedIn = (props: { children: ReactNode }) => { const session = useSession(); if (session && isSessionSignedIn(session)) { - return props.children; + return <>{props.children}; } else { return null; } diff --git a/packages/react/src/components/SignedInOrRedirect.tsx b/packages/react/src/components/SignedInOrRedirect.tsx index 79346c7c1..95958cd08 100644 --- a/packages/react/src/components/SignedInOrRedirect.tsx +++ b/packages/react/src/components/SignedInOrRedirect.tsx @@ -3,6 +3,7 @@ import { useContext, useEffect, useState } from "react"; import { GadgetClientContext } from "../../src/GadgetProvider"; import { useSession } from "../../src/auth/useSession"; import { isSessionSignedIn } from "../../src/auth/utils"; +import React from "react"; export const SignedInOrRedirect = (props: { children: ReactNode }) => { const [redirected, setRedirected] = useState(false); @@ -18,7 +19,7 @@ export const SignedInOrRedirect = (props: { children: ReactNode }) => { }, [redirected, isSignedIn, context?.signInPath]); if (isSignedIn) { - return props.children; + return <>{props.children}; } else { return null; } diff --git a/packages/react/src/components/SignedOut.tsx b/packages/react/src/components/SignedOut.tsx index 281511a90..c66bdec88 100644 --- a/packages/react/src/components/SignedOut.tsx +++ b/packages/react/src/components/SignedOut.tsx @@ -1,11 +1,12 @@ import type { ReactNode } from "react"; import { useSession } from "../../src/auth/useSession"; import { isSessionSignedOut } from "../../src/auth/utils"; +import React from "react"; export const SignedOut = (props: { children: ReactNode }) => { const session = useSession(); if (!session || isSessionSignedOut(session)) { - return props.children; + return <>{props.children}; } else { return null; }