Refactor authentication modal tests and cleanup unused constants

- Removed unused error message constants from use-auth-modal.js.
- Updated test-utils.js to include a function for clearing cookies after tests.
- Enhanced passwordless login tests to ensure proper modal behavior and state management.

Author: hajinsuha1

packages/template-retail-react-app/app/hooks/use-auth-modal.js

@@ -33,16 +33,13 @@ import OtpAuth from '@salesforce/retail-react-app/app/components/otp-auth'
 import {noop} from '@salesforce/retail-react-app/app/utils/utils'
 import {
     API_ERROR_MESSAGE,
-    FEATURE_UNAVAILABLE_ERROR_MESSAGE,
-    PASSWORDLESS_ERROR_MESSAGES,
     INVALID_TOKEN_ERROR,
     INVALID_TOKEN_ERROR_MESSAGE
 } from '@salesforce/retail-react-app/app/constants'
 import {
     getPasswordlessErrorMessage,
     getPasswordResetErrorMessage
 } from '@salesforce/retail-react-app/app/utils/auth-utils'
-import {API_ERROR_MESSAGE} from '@salesforce/retail-react-app/app/constants'
 import useNavigation from '@salesforce/retail-react-app/app/hooks/use-navigation'
 import {usePrevious} from '@salesforce/retail-react-app/app/hooks/use-previous'
 import {usePasswordReset} from '@salesforce/retail-react-app/app/hooks/use-password-reset'

packages/template-retail-react-app/app/hooks/use-auth-modal.test.js

@@ -11,7 +11,9 @@ import userEvent from '@testing-library/user-event'
 import {
     renderWithProviders,
     createPathWithDefaults,
-    guestToken
+    guestToken,
+    registerUserToken,
+    clearAllCookies
 } from '@salesforce/retail-react-app/app/utils/test-utils'
 import {AuthModal, useAuthModal} from '@salesforce/retail-react-app/app/hooks/use-auth-modal'
 import {BrowserRouter as Router, Route} from 'react-router-dom'
@@ -109,6 +111,7 @@ beforeEach(() => {
 })
 afterEach(() => {
     localStorage.clear()
+    clearAllCookies()
     jest.resetModules()
     jest.restoreAllMocks()
 })
@@ -199,6 +202,20 @@ describe('Passwordless enabled', () => {
         global.server.use(
             rest.post('*/oauth2/passwordless/login', (req, res, ctx) => {
                 return res(ctx.delay(0), ctx.status(200), ctx.json({}))
+            }),
+            rest.post('*/oauth2/passwordless/token', (req, res, ctx) => {
+                return res(
+                    ctx.delay(0),
+                    ctx.status(200),
+                    ctx.json({
+                        customer_id: 'registeredCustomerId',
+                        access_token: registerUserToken,
+                        refresh_token: 'testrefeshtoken',
+                        usid: 'testusid',
+                        enc_user_id: 'testEncUserId',
+                        id_token: 'testIdToken'
+                    })
+                )
             })
         )
     })
@@ -216,11 +233,11 @@ describe('Passwordless enabled', () => {
     })
 
     test('Allows passwordless login', async () => {
-        jest.spyOn(window, 'location', 'get').mockReturnValue({
-            pathname: '/',
-            origin: 'https://example.com'
+        const {user} = renderWithProviders(<MockedComponent isPasswordlessEnabled={true} />, {
+            wrapperProps: {
+                bypassAuth: false
+            }
         })
-        const {user} = renderWithProviders(<MockedComponent isPasswordlessEnabled={true} />)
         const validEmail = 'test@salesforce.com'
 
         // open the modal
@@ -238,24 +255,19 @@ describe('Passwordless enabled', () => {
         const passwordlessLoginButton = screen.getByText(/Continue/i)
         await user.click(passwordlessLoginButton)
 
-        // check that OTP auth modal is open
-        await waitFor(
-            () => {
-                expect(
-                    screen.getByText(/To log in to your account, enter the code/i)
-                ).toBeInTheDocument()
-            },
-            {timeout: 5000}
-        )
-
-        // resend the email
-        await user.click(screen.getByText(/Resend Link/i))
+        // check that the auth modal is closed
+        expect(authModal.isOpen).toBe(false)
 
-        // check that check email modal is still open
+        // check that OTP auth modal is open
         await waitFor(() => {
-            expect(screen.getByText(/Check Your Email/i)).toBeInTheDocument()
+            expect(
+                screen.getByText(/To log in to your account, enter the code/i)
+            ).toBeInTheDocument()
         })
 
+        // resend the email
+        await user.click(screen.getByText(/Resend Code/i))
+
         // enter the code manually
         const code = '12345678'
         const otpInputs = screen.getAllByRole('textbox')
@@ -265,18 +277,16 @@ describe('Passwordless enabled', () => {
 
         await waitFor(() => {
             expect(
-                mockAuthHelperFunctions[AuthHelpers.LoginPasswordlessUser].mutateAsync
-            ).toHaveBeenCalledWith({
-                pwdlessLoginToken: code
-            })
+                screen.queryByText(/To log in to your account, enter the code/i)
+            ).not.toBeInTheDocument()
+        })
+
+        await waitFor(() => {
+            expect(screen.getByText(/You're now signed in./i)).toBeInTheDocument()
         })
     })
 
     test('allows passwordless login via Enter key', async () => {
-        jest.spyOn(window, 'location', 'get').mockReturnValue({
-            pathname: '/',
-            origin: 'https://example.com'
-        })
         const {user} = renderWithProviders(<MockedComponent isPasswordlessEnabled={true} />)
         const validEmail = 'test@salesforce.com'
 
@@ -294,15 +304,15 @@ describe('Passwordless enabled', () => {
         // simulate Enter key press in email field
         await user.keyboard('{Enter}')
 
-        // check that check OtpAuthModal is open
-        await waitFor(
-            () => {
-                expect(
-                    screen.getByText(/To log in to your account, enter the code/i)
-                ).toBeInTheDocument()
-            },
-            {timeout: 5000}
-        )
+        // check that the auth modal is closed
+        expect(authModal.isOpen).toBe(false)
+
+        // check that the OtpAuthModal is open
+        await waitFor(() => {
+            expect(
+                screen.getByText(/To log in to your account, enter the code/i)
+            ).toBeInTheDocument()
+        })
     })
 
     test('sends callbackURI when passwordless callback is configured', async () => {
@@ -319,11 +329,6 @@ describe('Passwordless enabled', () => {
             }
         })
 
-        jest.spyOn(window, 'location', 'get').mockReturnValue({
-            pathname: '/',
-            origin: 'https://example.com'
-        })
-
         const {user} = renderWithProviders(<MockedComponent isPasswordlessEnabled={true} />)
         const validEmail = 'test@salesforce.com'
 
@@ -337,8 +342,14 @@ describe('Passwordless enabled', () => {
         await user.type(screen.getByLabelText('Email'), validEmail)
         await user.click(screen.getByText(/Continue/i))
 
+        // check that the auth modal is closed
+        expect(authModal.isOpen).toBe(false)
+
+        // check that the OtpAuthModal is open
         await waitFor(() => {
-            expect(screen.getByText(/Check Your Email/i)).toBeInTheDocument()
+            expect(
+                screen.getByText(/To log in to your account, enter the code/i)
+            ).toBeInTheDocument()
         })
     })
 

packages/template-retail-react-app/app/pages/login/index.test.js

@@ -20,7 +20,6 @@ import ResetPassword from '@salesforce/retail-react-app/app/pages/reset-password
 import mockConfig from '@salesforce/retail-react-app/config/mocks/default'
 import {mockedRegisteredCustomer} from '@salesforce/retail-react-app/app/mocks/mock-data'
 import {getConfig} from '@salesforce/pwa-kit-runtime/utils/ssr-config'
-import {AuthHelpers} from '@salesforce/commerce-sdk-react'
 
 const mockMergedBasket = {
     basketId: 'a10ff320829cb0eef93ca5310a',
@@ -328,6 +327,21 @@ describe('Passwordless login tests', () => {
         global.server.use(
             rest.post('*/oauth2/passwordless/login', (req, res, ctx) => {
                 return res(ctx.delay(0), ctx.status(200), ctx.json({}))
+            }),
+            rest.post('*/oauth2/passwordless/token', (req, res, ctx) => {
+                return res(
+                    ctx.delay(0),
+                    ctx.status(200),
+                    ctx.json({
+                        customer_id: 'customerid_1',
+                        access_token:
+                            'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJhdXQiOiJHVUlEIiwic2NwIjoic2ZjYy5zaG9wcGVyLW15YWNjb3VudC5iYXNrZXRzIHNmY2Muc2hvcHBlci1teWFjY291bnQuYWRkcmVzc2VzIHNmY2Muc2hvcHBlci1wcm9kdWN0cyBzZmNjLnNob3BwZXItZGlzY292ZXJ5LXNlYXJjaCBzZmNjLnNob3BwZXItbXlhY2NvdW50LnJ3IHNmY2Muc2hvcHBlci1teWFjY291bnQucGF5bWVudGluc3RydW1lbnRzIHNmY2Muc2hvcHBlci1jdXN0b21lcnMubG9naW4gc2ZjYy5zaG9wcGVyLWV4cGVyaWVuY2Ugc2ZjYy5zaG9wcGVyLW15YWNjb3VudC5vcmRlcnMgc2ZjYy5zaG9wcGVyLWN1c3RvbWVycy5yZWdpc3RlciBzZmNjLnNob3BwZXItYmFza2V0cy1vcmRlcnMgc2ZjYy5zaG9wcGVyLW15YWNjb3VudC5hZGRyZXNzZXMucncgc2ZjYy5zaG9wcGVyLW15YWNjb3VudC5wcm9kdWN0bGlzdHMucncgc2ZjYy5zaG9wcGVyLXByb2R1Y3RsaXN0cyBzZmNjLnNob3BwZXItcHJvbW90aW9ucyBzZmNjLnNob3BwZXItYmFza2V0cy1vcmRlcnMucncgc2ZjYy5zaG9wcGVyLW15YWNjb3VudC5wYXltZW50aW5zdHJ1bWVudHMucncgc2ZjYy5zaG9wcGVyLWdpZnQtY2VydGlmaWNhdGVzIHNmY2Muc2hvcHBlci1wcm9kdWN0LXNlYXJjaCBzZmNjLnNob3BwZXItbXlhY2NvdW50LnByb2R1Y3RsaXN0cyBzZmNjLnNob3BwZXItY2F0ZWdvcmllcyBzZmNjLnNob3BwZXItbXlhY2NvdW50Iiwic3ViIjoiY2Mtc2xhczo6enpyZl8wMDE6OnNjaWQ6YzljNDViZmQtMGVkMy00YWEyLTk5NzEtNDBmODg5NjJiODM2Ojp1c2lkOjhlODgzOTczLTY4ZWItNDFmZS1hM2M1LTc1NjIzMjY1MmZmNSIsImN0eCI6InNsYXMiLCJpc3MiOiJzbGFzL3Byb2QvenpyZl8wMDEiLCJpc3QiOjEsImF1ZCI6ImNvbW1lcmNlY2xvdWQvcHJvZC96enJmXzAwMSIsIm5iZiI6MTY3ODgzNDI3MSwic3R5IjoiVXNlciIsImlzYiI6InVpZG86ZWNvbTo6dXBuOmtldjVAdGVzdC5jb206OnVpZG46a2V2aW4gaGU6OmdjaWQ6YWJtZXMybWJrM2xYa1JsSEZKd0dZWWt1eEo6OnJjaWQ6YWJVTXNhdnBEOVk2alcwMGRpMlNqeEdDTVU6OmNoaWQ6UmVmQXJjaEdsb2JhbCIsImV4cCI6MjY3ODgzNjEwMSwiaWF0IjoxNjc4ODM0MzAxLCJqdGkiOiJDMkM0ODU2MjAxODYwLTE4OTA2Nzg5MDM0ODA1ODMyNTcwNjY2NTQyIn0._tUrxeXdFYPj6ZoY-GILFRd3-aD1RGPkZX6TqHeS494',
+                        refresh_token: 'testrefeshtoken_1',
+                        usid: 'testusid_1',
+                        enc_user_id: 'testEncUserId_1',
+                        id_token: 'testIdToken_1'
+                    })
+                )
             })
         )
     })
@@ -338,7 +352,7 @@ describe('Passwordless login tests', () => {
                 siteAlias: 'uk',
                 locale: {id: 'en-GB'},
                 appConfig: mockConfig.app,
-                bypassAuth: true
+                bypassAuth: false
             }
         })
 
@@ -349,20 +363,13 @@ describe('Passwordless login tests', () => {
         // Click the submit button
         await user.click(screen.getByRole('button', {name: /Continue/i}))
 
-        // check that check email page is open
+        // check that OTP auth modal is open
         await waitFor(() => {
-            expect(screen.getByText(/Check Your Email/i)).toBeInTheDocument()
+            expect(
+                screen.getByText(/To log in to your account, enter the code/i)
+            ).toBeInTheDocument()
         })
 
-        // check that OTP auth modal is open
-        await waitFor(
-            () => {
-                expect(
-                    screen.getByText(/To log in to your account, enter the code/i)
-                ).toBeInTheDocument()
-            }
-        )
-
         // resend the email
         await user.click(screen.getByText(/Resend Code/i))
 
@@ -372,14 +379,11 @@ describe('Passwordless login tests', () => {
         for (let i = 0; i < 8; i++) {
             await user.type(otpInputs[i], code[i])
         }
-        
-        await waitFor(
-            () => {
-                expect(
-                    query.getByText(/To log in to your account, enter the code/i)
-                ).not.toBeInTheDocument()
-            }
-        )
+
+        await waitFor(() => {
+            expect(window.location.pathname).toBe('/uk/en-GB/account')
+            expect(screen.getByText(/My Profile/i)).toBeInTheDocument()
+        })
     })
 
     test.each([

packages/template-retail-react-app/app/utils/test-utils.js

@@ -40,6 +40,7 @@ import {
 } from '@salesforce/retail-react-app/app/constants'
 import jwt from 'jsonwebtoken'
 import userEvent from '@testing-library/user-event'
+import Cookies from 'js-cookie'
 // This JWT's payload is special
 // it includes 3 fields that commerce-sdk-react cares:
 // exp, isb and sub
@@ -287,3 +288,16 @@ export const withPageProvider = (Component, options) => {
 
     return WrappedComponent
 }
+
+/**
+ * Clears all cookies. Useful for test cleanup to ensure clean auth state.
+ * @returns {void}
+ */
+export const clearAllCookies = () => {
+    document.cookie.split(';').forEach((cookie) => {
+        const name = cookie.split('=')[0].trim()
+        if (name) {
+            Cookies.remove(name, {path: '/'})
+        }
+    })
+}