test: header

client/src/features/auth/context.ts

@@ -6,6 +6,7 @@ type LoadingState = {
   signIn?: never
   signOut?: never
   token?: never
+  userName?: never
 }
 
 type SignedInState = {
@@ -14,6 +15,7 @@ type SignedInState = {
   signIn?: never
   signOut: () => void
   token: string
+  userName?: string
 }
 
 type SignedOutState = {
@@ -22,6 +24,7 @@ type SignedOutState = {
   signIn: () => void
   signOut?: never
   token?: never
+  userName?: never
 }
 
 export type AuthContextInterface = LoadingState | SignedInState | SignedOutState
@@ -37,29 +40,31 @@ const signedOutState = (signIn: () => void): AuthContextInterface => ({
   signIn,
 })
 
-const signedInState = (token: string, signOut: () => void): AuthContextInterface => ({
+const signedInState = (token: string, userName: string | undefined, signOut: () => void): AuthContextInterface => ({
   isLoading: false,
   isAuthenticated: true,
   signOut,
   token,
+  userName,
 })
 
 export const AuthContext = createContext<AuthContextInterface>(loadingState)
 
 type GetAuthStateParams = {
   isLoading: boolean
   token?: string
+  userName?: string
   signOut: () => void
   signIn: () => void
 }
 
-export const getAuthState = ({ isLoading, token, signIn, signOut }: GetAuthStateParams) => {
+export const getAuthState = ({ isLoading, token, userName, signIn, signOut }: GetAuthStateParams) => {
   if (isLoading) {
     return loadingState
   }
 
   if (token) {
-    return signedInState(token, signOut)
+    return signedInState(token, userName, signOut)
   }
 
   return signedOutState(signIn)

client/src/features/auth/organisms/sign-in-button.tsx

@@ -1,14 +1,11 @@
 import React from 'react'
-import { useAuth0 } from '@auth0/auth0-react'
 import { Button, Spinner } from '@chakra-ui/react'
 import { AiOutlineLogout } from 'react-icons/ai'
 import { DefaultUserIcon } from '../../room/atoms/default-user-icon'
+import { useAuth } from '..'
 
 export const SignInButton = () => {
-  const { user, isAuthenticated, isLoading, loginWithRedirect, logout } = useAuth0()
-
-  const signIn = () => loginWithRedirect()
-  const signOut = () => logout({ returnTo: window.location.origin })
+  const { isAuthenticated, isLoading, signIn, signOut, userName } = useAuth()
 
   if (isLoading) {
     return (
@@ -28,7 +25,7 @@ export const SignInButton = () => {
 
   return (
     <Button leftIcon={<AiOutlineLogout />} variant='drawer' onClick={signOut}>
-      Sign Out {user?.name}
+      Sign Out {userName}
     </Button>
   )
 }

client/src/features/auth/provider.tsx

@@ -8,7 +8,7 @@ import debug from 'debug'
 const log = debug('auth')
 
 export const AuthProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
-  const { isLoading: isAuth0Loading, loginWithRedirect, logout } = useAuth0()
+  const { isLoading: isAuth0Loading, loginWithRedirect, logout, user } = useAuth0()
   const { accessToken, isLoading: isTokenLoading } = useAccessToken()
   const [isLoading, setIsLoading] = useState(true)
 
@@ -28,7 +28,7 @@ export const AuthProvider: React.FC<{ children: React.ReactNode }> = ({ children
     log('signOut called')
     setIsLoading(true)
     clearBearerToken()
-    logout()
+    logout({ returnTo: window.location.origin })
   }
 
   const signIn = () => {
@@ -40,6 +40,7 @@ export const AuthProvider: React.FC<{ children: React.ReactNode }> = ({ children
   const state = getAuthState({
     isLoading,
     token: accessToken,
+    userName: user?.name,
     signIn,
     signOut,
   })

client/src/mocks/handlers.ts

@@ -14,6 +14,12 @@ export const handlers = [
     const response = loadResponse(`./messages/get/${roomId}.json`)
     return res(ctx.json(response))
   }),
+
+  rest.get('users/:userId', (req, res, ctx) => {
+    const userId = req.params['userId']
+    const response = loadResponse(`./users/get/${userId}.json`)
+    return res(ctx.json(response))
+  }),
 ]
 
 const loadResponse = (relativePath: string): JSON => {

client/src/mocks/users/me.json

@@ -0,0 +1,17 @@
+{
+  "user": {
+    "id": "user:google-oauth2|123",
+    "name": "Test User",
+    "picture": "https://ui-avatars.com/api/?name=Joe+Bloggs",
+    "email": "[email protected]"
+  },
+  "rooms": [
+    {
+      "id": "room:100",
+      "name": "Test Room",
+      "ownerId": "user:google-oauth2|123",
+      "contentPolicy": "private",
+      "joinPolicy": "invite"
+    }
+  ]
+}

client/src/mocks/users/system.json

@@ -0,0 +1 @@
+{ "id": "system", "name": "System", "email": "[email protected]" }

client/src/shared/navigation/organisms/header.spec.tsx

@@ -0,0 +1,65 @@
+import React from 'react'
+import { render } from '../../../test/fixtures'
+import { waitFor, screen } from '@testing-library/react'
+import { AuthContext } from '../../../features/auth/context'
+import { Header } from './header'
+import userEvent from '@testing-library/user-event'
+
+describe('Header', () => {
+  const signIn = vitest.fn()
+  const signOut = vitest.fn()
+
+  describe('when signed out', () => {
+    it('has a sign in button', async () => {
+      render(
+        <AuthContext.Provider value={{ isAuthenticated: false, isLoading: false, signIn }}>
+          <Header />
+        </AuthContext.Provider>,
+        {
+          path: '/',
+          initialEntry: '/',
+        },
+      )
+
+      const openMenu = screen.getByRole('button', { name: 'Open Menu' })
+
+      await waitFor(() => {
+        expect(openMenu).toBeVisible()
+      })
+
+      userEvent.click(openMenu)
+
+      await waitFor(() => {
+        expect(screen.getByRole('button', { name: 'Sign In' })).toBeVisible()
+      })
+    })
+  })
+
+  describe('when signed in', () => {
+    it('has a sign out button', async () => {
+      render(
+        <AuthContext.Provider
+          value={{ isAuthenticated: true, isLoading: false, signOut, token: 'a1b2c3', userName: 'Test User' }}
+        >
+          <Header />
+        </AuthContext.Provider>,
+        {
+          path: '/',
+          initialEntry: '/',
+        },
+      )
+
+      const openMenu = screen.getByRole('button', { name: 'Open Menu' })
+
+      await waitFor(() => {
+        expect(openMenu).toBeVisible()
+      })
+
+      userEvent.click(openMenu)
+
+      await waitFor(() => {
+        expect(screen.getByRole('button', { name: 'Sign Out Test User' })).toBeVisible()
+      })
+    })
+  })
+})