chore(DIA-942): write tests for auth2 infrastructure (#11211)

* added tests for authcontext

* added tests for authscreen and useauthnavigation

src/app/Scenes/Onboarding/Auth2/AuthContext.tsx

@@ -15,25 +15,31 @@ export interface AuthScreen {
   params?: Record<string, any>
 }
 
-interface AuthContextModel {
+export interface AuthContextModel {
+  // state
   currentScreen: AuthScreen | undefined
-  goBack: Action<AuthContextModel>
   isModalExpanded: boolean
   isMounted: boolean
   previousScreens: Array<AuthScreen | undefined>
+
+  // actions
+  goBack: Action<AuthContextModel>
   setCurrentScreen: Action<AuthContextModel, AuthScreen>
   setModalExpanded: Action<AuthContextModel, boolean>
   setParams: Action<AuthContextModel, Record<string, any>>
 }
 
-export const AuthContext = createContextStore<AuthContextModel>({
+export const defaultState: AuthContextModel = {
+  // state
   currentScreen: { name: "LoginWelcomeStep" },
-  goBack: action((state) => {
-    state.currentScreen = state.previousScreens.pop()
-  }),
   isModalExpanded: false,
   isMounted: false,
   previousScreens: [],
+
+  // actions
+  goBack: action((state) => {
+    state.currentScreen = state.previousScreens.pop()
+  }),
   setCurrentScreen: action((state, currentScreen) => {
     state.previousScreens.push(state.currentScreen)
     state.currentScreen = currentScreen
@@ -47,4 +53,9 @@ export const AuthContext = createContextStore<AuthContextModel>({
       state.currentScreen.params = { ...(state.currentScreen.params ?? {}), ...params }
     }
   }),
-})
+}
+
+export const AuthContext = createContextStore<AuthContextModel>((initialState) => ({
+  ...defaultState,
+  ...initialState,
+}))

src/app/Scenes/Onboarding/Auth2/__tests__/AuthContext.tests.tsx

@@ -0,0 +1,90 @@
+import { act, renderHook } from "@testing-library/react-native"
+import {
+  AuthContext,
+  AuthContextModel,
+  defaultState,
+} from "app/Scenes/Onboarding/Auth2/AuthContext"
+
+describe("AuthContext", () => {
+  const setup = (initialState: Partial<AuthContextModel>) => {
+    const view = renderHook(
+      () => ({
+        state: AuthContext.useStoreState((state) => state),
+        actions: AuthContext.useStoreActions((action) => action),
+      }),
+      {
+        wrapper: ({ children }: any) => (
+          <AuthContext.Provider runtimeModel={{ ...defaultState, ...initialState }}>
+            {children}
+          </AuthContext.Provider>
+        ),
+      }
+    )
+
+    return {
+      getState: () => view.result.current.state,
+      actions: view.result.current.actions,
+    }
+  }
+
+  it("sets up intial context and action helpers", () => {
+    const { getState, actions } = setup({})
+
+    expect(Object.keys(getState())).toEqual([
+      "currentScreen",
+      "isModalExpanded",
+      "isMounted",
+      "previousScreens",
+    ])
+
+    expect(Object.keys(actions)).toEqual([
+      "goBack",
+      "setCurrentScreen",
+      "setModalExpanded",
+      "setParams",
+    ])
+  })
+
+  describe("actions", () => {
+    it("goBack", () => {
+      const { getState, actions } = setup({
+        currentScreen: { name: "SignUpNameStep" },
+        previousScreens: [{ name: "LoginWelcomeStep" }, { name: "SignUpPasswordStep" }],
+      })
+
+      act(() => actions.goBack())
+
+      expect(getState().currentScreen).toEqual({ name: "SignUpPasswordStep" })
+    })
+
+    it("setCurrentScreen", () => {
+      const { getState, actions } = setup({ currentScreen: { name: "LoginWelcomeStep" } })
+
+      act(() => actions.setCurrentScreen({ name: "LoginPasswordStep" }))
+
+      expect(getState().currentScreen).toEqual({ name: "LoginPasswordStep" })
+    })
+
+    it("setModalExpanded", () => {
+      const { getState, actions } = setup({})
+
+      act(() => actions.setModalExpanded(true))
+
+      expect(getState().isModalExpanded).toBe(true)
+      expect(getState().isMounted).toBe(true)
+
+      act(() => actions.setModalExpanded(false))
+
+      expect(getState().isModalExpanded).toBe(false)
+      expect(getState().isMounted).toBe(true)
+    })
+
+    it("setParams", () => {
+      const { getState, actions } = setup({})
+
+      act(() => actions.setParams({ email: "[email protected]" }))
+
+      expect(getState().currentScreen?.params).toEqual({ email: "[email protected]" })
+    })
+  })
+})

src/app/Scenes/Onboarding/Auth2/components/AuthScreen.tsx

@@ -3,7 +3,6 @@ import { AuthContext, AuthScreen as AuthScreenItem } from "app/Scenes/Onboarding
 
 interface AuthScreenProps {
   name: AuthScreenItem["name"]
-  isVisible?: boolean
 }
 
 export const AuthScreen: React.FC<AuthScreenProps> = ({ children, name }) => {
@@ -12,7 +11,7 @@ export const AuthScreen: React.FC<AuthScreenProps> = ({ children, name }) => {
 
   return (
     <>
-      <Flex display={isVisible ? "flex" : "none"} zIndex={isVisible ? 1 : 0}>
+      <Flex display={isVisible ? "flex" : "none"} zIndex={isVisible ? 1 : 0} testID="auth-screen">
         {children}
       </Flex>
     </>

src/app/Scenes/Onboarding/Auth2/components/__tests__/AuthScreen.tests.tsx

@@ -0,0 +1,25 @@
+import { screen } from "@testing-library/react-native"
+import { AuthContext } from "app/Scenes/Onboarding/Auth2/AuthContext"
+import { AuthScreen } from "app/Scenes/Onboarding/Auth2/components/AuthScreen"
+import { renderWithWrappers } from "app/utils/tests/renderWithWrappers"
+
+describe("AuthScreen", () => {
+  it("is visible when it is the current screen", () => {
+    jest
+      .spyOn(AuthContext, "useStoreState")
+      .mockReturnValue({ currentScreen: { name: "LoginWelcomeStep" } })
+    renderWithWrappers(<AuthScreen name="LoginWelcomeStep" />)
+
+    expect(screen.getByTestId("auth-screen")).toBeVisible()
+    expect(screen.getByTestId("auth-screen").props.zIndex).toEqual(1)
+  })
+
+  it("is not visible when it is not the current screen", () => {
+    jest
+      .spyOn(AuthContext, "useStoreState")
+      .mockReturnValue({ currentScreen: { name: "SignUpPasswordStep" } })
+    renderWithWrappers(<AuthScreen name="LoginWelcomeStep" />)
+
+    expect(screen.queryByTestId("auth-screen")).toBeNull()
+  })
+})

src/app/Scenes/Onboarding/Auth2/hooks/__tests__/useAuthNavigation.tests.tsx

@@ -0,0 +1,55 @@
+import {
+  useAuthNavigation,
+  useAuthScreen,
+} from "app/Scenes/Onboarding/Auth2/hooks/useAuthNavigation"
+
+jest.mock("app/Scenes/Onboarding/Auth2/hooks/useAuthNavigation")
+
+describe("useAuthNavigation", () => {
+  const mockUseAuthNavigation = useAuthNavigation as jest.Mock
+  const mockUseAuthScreen = useAuthScreen as jest.Mock
+
+  beforeEach(() => {
+    jest.clearAllMocks()
+    mockUseAuthNavigation.mockReturnValue({
+      goBack: jest.fn(),
+      navigate: jest.fn(),
+      setParams: jest.fn(),
+    })
+    mockUseAuthScreen.mockReturnValue({
+      name: "SignUpPasswordStep",
+      params: { email: "[email protected]" },
+    })
+  })
+
+  describe("useAuthNavigation", () => {
+    it("returns a function to navigate to the previous screen", () => {
+      const { goBack } = useAuthNavigation()
+      goBack()
+      expect(mockUseAuthNavigation().goBack).toHaveBeenCalled()
+    })
+
+    it("returns a function to navigate to a given screen", () => {
+      const { navigate } = useAuthNavigation()
+      navigate({ name: "SignUpNameStep", params: { email: "[email protected]", password: "qux" } }) //pragma: allowlist secret
+      expect(mockUseAuthNavigation().navigate).toHaveBeenCalledWith({
+        name: "SignUpNameStep",
+        params: { email: "[email protected]", password: "qux" }, // pragma: allowlist secret
+      })
+    })
+
+    it("returns a function to set params on the current screen ", () => {
+      const { setParams } = useAuthNavigation()
+      setParams({ email: "[email protected]" })
+      expect(mockUseAuthNavigation().setParams).toHaveBeenCalledWith({ email: "[email protected]" })
+    })
+  })
+
+  describe("useAuthScreen", () => {
+    it("returns the current screen name and params", () => {
+      const { name, params } = useAuthScreen()
+      expect(name).toBe("SignUpPasswordStep")
+      expect(params).toEqual({ email: "[email protected]" })
+    })
+  })
+})