Enhance passkey login tests by refining error handling and improving test clarity; mock configurations for passkey enabled/disabled scenarios, and ensure proper UI rendering during authentication processes.

hajinsuha1 · hajinsuha1 · commit 54d60437ecdb · 2026-02-18T11:19:14.000-05:00
diff --git a/packages/template-retail-react-app/app/hooks/use-auth-modal.test.js b/packages/template-retail-react-app/app/hooks/use-auth-modal.test.js
@@ -624,6 +624,7 @@ describe('Passkey login', () => {
         // Clear all mocks
         jest.clearAllMocks()
 
+        // Override getConfig to return config with passkey enabled
         getConfig.mockReturnValue({
             ...mockConfig,
             app: {
@@ -649,6 +650,12 @@ describe('Passkey login', () => {
             get: mockCredentialsGet
         }
 
+        // Mock parseRequestOptionsFromJSON to return mock options
+        mockPublicKeyCredential.parseRequestOptionsFromJSON.mockReturnValue({
+            challenge: 'mock-challenge',
+            allowCredentials: []
+        })
+
         // Setup MSW handlers for WebAuthn API endpoints
         global.server.use(
             rest.post('*/oauth2/webauthn/authenticate/start', (req, res, ctx) => {
@@ -688,13 +695,6 @@ describe('Passkey login', () => {
     })
 
     test('Triggers passkey login when modal opens with passkey enabled', async () => {
-        const mockPublicKeyOptions = {
-            challenge: 'mock-challenge',
-            allowCredentials: []
-        }
-
-        mockPublicKeyCredential.parseRequestOptionsFromJSON.mockReturnValue(mockPublicKeyOptions)
-
         // Mock credential that will be returned from navigator.credentials.get
         const mockCredential = {
             id: 'mock-credential-id',
@@ -745,14 +745,7 @@ describe('Passkey login', () => {
         )
     })
 
-    test('Falls back to other login methods when passkey login is cancelled', async () => {
-        const mockPublicKeyOptions = {
-            challenge: 'mock-challenge',
-            allowCredentials: []
-        }
-
-        mockPublicKeyCredential.parseRequestOptionsFromJSON.mockReturnValue(mockPublicKeyOptions)
-
+    test('User can login with other method when passkey login is cancelled', async () => {
         // Simulate user cancelling passkey selection (NotAllowedError)
         const notAllowedError = new Error('User cancelled')
         notAllowedError.name = 'NotAllowedError'
@@ -768,7 +761,7 @@ describe('Passkey login', () => {
         const trigger = screen.getByText(/open modal/i)
         await user.click(trigger)
 
-        // Should not show error for cancelled passkey
+        // Login form should be shown
         await waitFor(() => {
             expect(mockCredentialsGet).toHaveBeenCalled()
             expect(screen.getByText(/welcome back/i)).toBeInTheDocument()
@@ -779,13 +772,6 @@ describe('Passkey login', () => {
     })
 
     test('Shows error when passkey authentication fails with error from the browser', async () => {
-        const mockPublicKeyOptions = {
-            challenge: 'mock-challenge',
-            allowCredentials: []
-        }
-
-        mockPublicKeyCredential.parseRequestOptionsFromJSON.mockReturnValue(mockPublicKeyOptions)
-
         // Simulate error in loginWithPasskey hook
         mockCredentialsGet.mockRejectedValue(new Error('Authentication failed'))
 
@@ -870,13 +856,6 @@ describe('Passkey login', () => {
     })
 
     test('Successfully logs in with passkey', async () => {
-        const mockPublicKeyOptions = {
-            challenge: 'mock-challenge',
-            allowCredentials: []
-        }
-
-        mockPublicKeyCredential.parseRequestOptionsFromJSON.mockReturnValue(mockPublicKeyOptions)
-
         const mockCredential = {
             id: 'mock-credential-id',
             rawId: new ArrayBuffer(32),
diff --git a/packages/template-retail-react-app/app/pages/login/index.jsx b/packages/template-retail-react-app/app/pages/login/index.jsx
@@ -211,12 +211,10 @@ const Login = ({initialView = LOGIN_VIEW}) => {
     }, [isRegistered, redirectPath])
 
     useEffect(() => {
-        try {
-            loginWithPasskey()
-        } catch (error) {
+        loginWithPasskey().catch((error) => {
             const message = formatMessage(getPasskeyErrorMessage(error))
             form.setError('global', {type: 'manual', message})
-        }
+        })
     }, [])
 
     /**************** Einstein ****************/
diff --git a/packages/template-retail-react-app/app/pages/login/index.test.js b/packages/template-retail-react-app/app/pages/login/index.test.js
@@ -283,11 +283,26 @@ describe('Error while logging in', function () {
 describe('Passkey login', () => {
     let mockCredentialsGet
     let mockPublicKeyCredential
+    let mockAppConfig
 
     beforeEach(() => {
         // Clear all mocks
         jest.clearAllMocks()
 
+        // Override getConfig to return config with passkey enabled
+        mockAppConfig = {
+            ...mockConfig.app,
+            login: {
+                ...mockConfig.app.login,
+                passkey: {enabled: true}
+            }
+        }
+
+        getConfig.mockReturnValue({
+            ...mockConfig,
+            app: mockAppConfig
+        })
+
         // Mock WebAuthn API - default to never resolving (simulating no user action)
         mockCredentialsGet = jest.fn().mockImplementation(() => new Promise(() => {}))
         mockPublicKeyCredential = {
@@ -302,6 +317,12 @@ describe('Passkey login', () => {
             get: mockCredentialsGet
         }
 
+        // Mock parseRequestOptionsFromJSON to return mock options
+        mockPublicKeyCredential.parseRequestOptionsFromJSON.mockReturnValue({
+            challenge: 'mock-challenge',
+            allowCredentials: []
+        })
+
         // Clear localStorage
         localStorage.clear()
 
@@ -345,21 +366,6 @@ describe('Passkey login', () => {
     })
 
     test('Sets up conditional mediation on page load when passkey enabled', async () => {
-        const mockAppConfig = {
-            ...mockConfig.app,
-            login: {
-                ...mockConfig.app.login,
-                passkey: {enabled: true}
-            }
-        }
-
-        const mockPublicKeyOptions = {
-            challenge: 'mock-challenge',
-            allowCredentials: []
-        }
-
-        mockPublicKeyCredential.parseRequestOptionsFromJSON.mockReturnValue(mockPublicKeyOptions)
-
         // Mock that conditional mediation starts but user doesn't select
         mockCredentialsGet.mockImplementation(
             () =>
@@ -395,23 +401,42 @@ describe('Passkey login', () => {
         )
     })
 
-    test('Successfully logs in with passkey in passwordless mode on login page', async () => {
+    test('Does not trigger passkey when passkey is disabled', async () => {
         const mockAppConfig = {
             ...mockConfig.app,
             login: {
                 ...mockConfig.app.login,
-                passwordless: {enabled: true},
-                passkey: {enabled: true}
+                passkey: {enabled: false}
             }
         }
 
-        const mockPublicKeyOptions = {
-            challenge: 'mock-challenge',
-            allowCredentials: []
-        }
+        // Override getConfig to return config with passkey disabled
+        getConfig.mockReturnValue({
+            ...mockConfig,
+            app: mockAppConfig
+        })
 
-        mockPublicKeyCredential.parseRequestOptionsFromJSON.mockReturnValue(mockPublicKeyOptions)
+        renderWithProviders(<MockedComponent />, {
+            wrapperProps: {
+                siteAlias: 'uk',
+                locale: {id: 'en-GB'},
+                appConfig: mockAppConfig,
+                bypassAuth: false
+            }
+        })
+
+        await waitFor(() => {
+            expect(screen.getByTestId('login-page')).toBeInTheDocument()
+        })
+
+        // Give it a moment for any async effects to run
+        await new Promise((resolve) => setTimeout(resolve, 100))
 
+        // Should not call credentials API when passkey is disabled
+        expect(mockCredentialsGet).not.toHaveBeenCalled()
+    })
+
+    test('Successfully logs in with passkey', async () => {
         const mockCredential = {
             id: 'mock-credential-id',
             rawId: new ArrayBuffer(32),
@@ -438,7 +463,7 @@ describe('Passkey login', () => {
 
         mockCredentialsGet.mockResolvedValue(mockCredential)
 
-        // Mock successful auth after passkey
+        // Mock customer as registered after passkey login
         global.server.use(
             rest.post('*/oauth2/token', (req, res, ctx) =>
                 res(
@@ -456,7 +481,7 @@ describe('Passkey login', () => {
             )
         )
 
-        const {user} = renderWithProviders(<MockedComponent />, {
+        renderWithProviders(<MockedComponent />, {
             wrapperProps: {
                 siteAlias: 'uk',
                 locale: {id: 'en-GB'},
@@ -465,41 +490,26 @@ describe('Passkey login', () => {
             }
         })
 
-        // Enter email (don't enter password for passwordless)
-        await user.type(screen.getByLabelText('Email'), 'test@salesforce.com')
-        await user.click(screen.getByRole('button', {name: /sign in/i}))
-
-        // Should trigger passkey authentication with credentials.get
+        // Wait for passkey flow to be triggered when modal opens
         await waitFor(
             () => {
                 expect(mockCredentialsGet).toHaveBeenCalled()
             },
             {timeout: 5000}
         )
 
-        // After successful passkey login, should redirect to account page
-        await waitFor(
-            () => {
-                expect(window.location.pathname).toBe('/uk/en-GB/account')
-            },
-            {timeout: 5000}
-        )
+        // login successfully and navigate to account page
+        await waitFor(() => {
+            expect(window.location.pathname).toBe('/uk/en-GB/account')
+            expect(screen.getByText(/My Profile/i)).toBeInTheDocument()
+        })
     })
 
-    test('Does not trigger passkey when passkey is disabled', async () => {
-        const mockAppConfig = {
-            ...mockConfig.app,
-            login: {
-                ...mockConfig.app.login,
-                passkey: {enabled: false}
-            }
-        }
-
-        // Override getConfig to return config with passkey disabled
-        getConfig.mockReturnValue({
-            ...mockConfig,
-            app: mockAppConfig
-        })
+    test('User can select other login method when passkey login is cancelled', async () => {
+        // User cancels passkey selection
+        const notAllowedError = new Error('User cancelled')
+        notAllowedError.name = 'NotAllowedError'
+        mockCredentialsGet.mockRejectedValue(notAllowedError)
 
         renderWithProviders(<MockedComponent />, {
             wrapperProps: {
@@ -510,38 +520,50 @@ describe('Passkey login', () => {
             }
         })
 
+        // Login form should be shown
         await waitFor(() => {
+            expect(mockCredentialsGet).toHaveBeenCalled()
+            expect(screen.getByText(/welcome back/i)).toBeInTheDocument()
+            expect(screen.getByLabelText('Email')).toBeInTheDocument()
+            expect(screen.getByLabelText('Password')).toBeInTheDocument()
+            expect(screen.getByRole('button', {name: /sign in/i})).toBeInTheDocument()
             expect(screen.getByTestId('login-page')).toBeInTheDocument()
         })
-
-        // Give it a moment for any async effects to run
-        await new Promise((resolve) => setTimeout(resolve, 100))
-
-        // Should not call credentials API when passkey is disabled
-        expect(mockCredentialsGet).not.toHaveBeenCalled()
     })
 
-    test('Handles passkey login cancellation gracefully', async () => {
-        const mockAppConfig = {
-            ...mockConfig.app,
-            login: {
-                ...mockConfig.app.login,
-                passwordless: {enabled: true},
-                passkey: {enabled: true}
+    test('Shows error when passkey authentication fails with error from the browser', async () => {
+        // Simulate error in navigator.credentials.get hook
+        mockCredentialsGet.mockRejectedValue(new Error('Authentication failed'))
+
+        renderWithProviders(<MockedComponent />, {
+            wrapperProps: {
+                siteAlias: 'uk',
+                locale: {id: 'en-GB'},
+                appConfig: mockAppConfig,
+                bypassAuth: false
             }
-        }
+        })
 
-        mockPublicKeyCredential.parseRequestOptionsFromJSON.mockReturnValue({
-            challenge: 'mock-challenge',
-            allowCredentials: []
+        // Should show error - passkey error should be caught and handled
+        await waitFor(() => {
+            expect(mockCredentialsGet).toHaveBeenCalled()
+            expect(screen.getByText(/Something went wrong. Try again!/i)).toBeInTheDocument()
         })
+    })
 
-        // User cancels passkey selection
-        const notAllowedError = new Error('User cancelled')
-        notAllowedError.name = 'NotAllowedError'
-        mockCredentialsGet.mockRejectedValue(notAllowedError)
+    test('Shows error when passkey authentication fails with error from the WebAuthn API', async () => {
+        // Simulate error in WebAuthn API
+        global.server.use(
+            rest.post('*/oauth2/webauthn/authenticate/start', (req, res, ctx) => {
+                return res(
+                    ctx.delay(0),
+                    ctx.status(401),
+                    ctx.json({message: 'Authentication failed'})
+                )
+            })
+        )
 
-        const {user} = renderWithProviders(<MockedComponent />, {
+        renderWithProviders(<MockedComponent />, {
             wrapperProps: {
                 siteAlias: 'uk',
                 locale: {id: 'en-GB'},
@@ -550,31 +572,15 @@ describe('Passkey login', () => {
             }
         })
 
-        // Enter email without password for passwordless
-        await user.type(screen.getByLabelText('Email'), 'test@salesforce.com')
-        await user.click(screen.getByRole('button', {name: /sign in/i}))
-
-        // Should not show error for cancelled passkey
-        // Page should remain on login page
+        // Should show error - 401 error from WebAuthn API should be caught and converted to user-friendly message
         await waitFor(() => {
-            expect(screen.getByTestId('login-page')).toBeInTheDocument()
+            expect(
+                screen.getByText(/This feature is not currently available./i)
+            ).toBeInTheDocument()
         })
     })
 
     test('Shows passkey registration prompt after successful login when passkey enabled and not registered', async () => {
-        const mockAppConfig = {
-            ...mockConfig.app,
-            login: {
-                ...mockConfig.app.login,
-                passkey: {enabled: true}
-            }
-        }
-
-        mockPublicKeyCredential.parseRequestOptionsFromJSON.mockReturnValue({
-            challenge: 'mock-challenge',
-            allowCredentials: []
-        })
-
         const {user} = renderWithProviders(<MockedComponent />, {
             wrapperProps: {
                 siteAlias: 'uk',
