From 0f8e9c7faf8cb2b0c7c12b60b23385cf4d3116bd Mon Sep 17 00:00:00 2001 From: Sushma Yadupathi Date: Wed, 25 Jun 2025 17:44:24 -0400 Subject: [PATCH 1/7] W-18818802 add shipment phone number to customer on registration --- .../app/pages/checkout/confirmation.jsx | 3 +- .../app/pages/checkout/confirmation.test.js | 137 ++++++++++++++++++ 2 files changed, 139 insertions(+), 1 deletion(-) diff --git a/packages/template-retail-react-app/app/pages/checkout/confirmation.jsx b/packages/template-retail-react-app/app/pages/checkout/confirmation.jsx index f84ae0284a..7e6d24688a 100644 --- a/packages/template-retail-react-app/app/pages/checkout/confirmation.jsx +++ b/packages/template-retail-react-app/app/pages/checkout/confirmation.jsx @@ -81,7 +81,8 @@ const CheckoutConfirmation = () => { firstName: data.firstName, lastName: data.lastName, email: data.email, - login: data.email + login: data.email, + phoneHome: order.shipments[0].shippingAddress.phone }, password: data.password } diff --git a/packages/template-retail-react-app/app/pages/checkout/confirmation.test.js b/packages/template-retail-react-app/app/pages/checkout/confirmation.test.js index bb0c35a0ef..2ee1fe0ff8 100644 --- a/packages/template-retail-react-app/app/pages/checkout/confirmation.test.js +++ b/packages/template-retail-react-app/app/pages/checkout/confirmation.test.js @@ -112,3 +112,140 @@ test('Create Account form - successful submission results in redirect to the Acc expect(window.location.pathname).toBe('/uk/en-GB/account') }) }) + +test('Create Account form - phone number from order shipping address is saved to customer profile', async () => { + let registrationRequestBody = null + + global.server.use( + rest.post('*/customers', (req, res, ctx) => { + registrationRequestBody = req.body + return res( + ctx.status(200), + ctx.json({ + customerId: 'new-customer-id', + email: mockOrder.customerInfo.email, + firstName: mockOrder.billingAddress.firstName, + lastName: mockOrder.billingAddress.lastName, + phoneHome: mockOrder.shipments[0].shippingAddress.phone + }) + ) + }), + rest.post('*/customers/*/addresses', (_, res, ctx) => { + return res(ctx.status(200)) + }) + ) + + const {user} = renderWithProviders(, { + wrapperProps: {isGuest: true} + }) + + const createAccountButton = await screen.findByRole('button', {name: /create account/i}) + const password = screen.getByLabelText('Password') + + // Fill out the form (firstName and lastName are hidden fields pre-filled from order data) + await user.type(password, 'P4ssword!') + await user.click(createAccountButton) + + // Wait for the registration request to complete + await waitFor(() => { + expect(registrationRequestBody).not.toBeNull() + }) + + // Verify that the phone number from the order's shipping address is included in the registration + expect(registrationRequestBody.customer.phoneHome).toBe( + mockOrder.shipments[0].shippingAddress.phone + ) + expect(registrationRequestBody.customer.phoneHome).toBe('(778) 888-8888') + + // Verify other expected customer data (firstName/lastName come from order's billingAddress) + expect(registrationRequestBody.customer.firstName).toBe(mockOrder.billingAddress.firstName) + expect(registrationRequestBody.customer.lastName).toBe(mockOrder.billingAddress.lastName) + expect(registrationRequestBody.customer.email).toBe(mockOrder.customerInfo.email) + expect(registrationRequestBody.customer.login).toBe(mockOrder.customerInfo.email) + expect(registrationRequestBody.password).toBe('P4ssword!') +}) + +test('Integration test - phone number from order is visible in customer account after registration', async () => { + let savedCustomerData = null + + global.server.use( + // Mock customer registration + rest.post('*/customers', (req, res, ctx) => { + savedCustomerData = { + customerId: 'new-customer-id-123', + email: mockOrder.customerInfo.email, + firstName: mockOrder.billingAddress.firstName, + lastName: mockOrder.billingAddress.lastName, + phoneHome: mockOrder.shipments[0].shippingAddress.phone, + login: mockOrder.customerInfo.email + } + return res(ctx.status(200), ctx.json(savedCustomerData)) + }), + // Mock address creation + rest.post('*/customers/*/addresses', (_, res, ctx) => { + return res(ctx.status(200)) + }), + // Mock customer profile fetch for account page + rest.get('*/customers/new-customer-id-123', (_, res, ctx) => { + return res( + ctx.status(200), + ctx.json({ + ...savedCustomerData, + addresses: [ + { + addressId: 'address-1', + firstName: mockOrder.billingAddress.firstName, + lastName: mockOrder.billingAddress.lastName, + address1: mockOrder.shipments[0].shippingAddress.address1, + city: mockOrder.shipments[0].shippingAddress.city, + phone: mockOrder.shipments[0].shippingAddress.phone, + postalCode: mockOrder.shipments[0].shippingAddress.postalCode, + stateCode: mockOrder.shipments[0].shippingAddress.stateCode, + countryCode: mockOrder.shipments[0].shippingAddress.countryCode + } + ] + }) + ) + }), + // Mock any other account page dependencies + rest.get('*/customers/*/orders', (_, res, ctx) => { + return res(ctx.status(200), ctx.json({data: [], total: 0})) + }), + rest.get('*/customers/*/product-lists', (_, res, ctx) => { + return res(ctx.status(200), ctx.json({data: []})) + }) + ) + + const {user} = renderWithProviders(, { + wrapperProps: {isGuest: true} + }) + + // Step 1: Fill out and submit the registration form + const createAccountButton = await screen.findByRole('button', {name: /create account/i}) + const password = screen.getByLabelText('Password') + + // Fill out the form (firstName and lastName are hidden fields pre-filled from order data) + await user.type(password, 'P4ssword!') + await user.click(createAccountButton) + + // Step 2: Wait for redirect to account page + await waitFor( + () => { + expect(window.location.pathname).toBe('/uk/en-GB/account') + }, + {timeout: 5000} + ) + + // Step 3: Verify that the customer data was saved correctly + expect(savedCustomerData).not.toBeNull() + expect(savedCustomerData.phoneHome).toBe('(778) 888-8888') + + // Note: This test verifies the API calls and data flow. + // A full end-to-end test would require rendering the Account page component + // and verifying the phone number is displayed in the UI, but that would require + // additional setup of the Account page component and its dependencies. + + // The key assertion is that the phone from the order's shipping address + // is correctly saved to the customer's phoneHome field during registration + expect(savedCustomerData.phoneHome).toBe(mockOrder.shipments[0].shippingAddress.phone) +}) From 4b02e59d0352b3f3fcbc7d5f072dad1c6c81665e Mon Sep 17 00:00:00 2001 From: Sushma Yadupathi Date: Mon, 30 Jun 2025 11:22:46 -0400 Subject: [PATCH 2/7] W-18818802 address code review comments --- .../app/pages/checkout/confirmation.jsx | 2 +- .../app/pages/checkout/confirmation.test.js | 14 +++++++------- 2 files changed, 8 insertions(+), 8 deletions(-) diff --git a/packages/template-retail-react-app/app/pages/checkout/confirmation.jsx b/packages/template-retail-react-app/app/pages/checkout/confirmation.jsx index 7e6d24688a..35831d5d7b 100644 --- a/packages/template-retail-react-app/app/pages/checkout/confirmation.jsx +++ b/packages/template-retail-react-app/app/pages/checkout/confirmation.jsx @@ -82,7 +82,7 @@ const CheckoutConfirmation = () => { lastName: data.lastName, email: data.email, login: data.email, - phoneHome: order.shipments[0].shippingAddress.phone + phoneHome: order.billingAddress.phone }, password: data.password } diff --git a/packages/template-retail-react-app/app/pages/checkout/confirmation.test.js b/packages/template-retail-react-app/app/pages/checkout/confirmation.test.js index 2ee1fe0ff8..8789b1ae9f 100644 --- a/packages/template-retail-react-app/app/pages/checkout/confirmation.test.js +++ b/packages/template-retail-react-app/app/pages/checkout/confirmation.test.js @@ -151,9 +151,9 @@ test('Create Account form - phone number from order shipping address is saved to expect(registrationRequestBody).not.toBeNull() }) - // Verify that the phone number from the order's shipping address is included in the registration + // Verify that the phone number from the order's billing address is included in the registration expect(registrationRequestBody.customer.phoneHome).toBe( - mockOrder.shipments[0].shippingAddress.phone + mockOrder.billingAddress.phone ) expect(registrationRequestBody.customer.phoneHome).toBe('(778) 888-8888') @@ -176,7 +176,7 @@ test('Integration test - phone number from order is visible in customer account email: mockOrder.customerInfo.email, firstName: mockOrder.billingAddress.firstName, lastName: mockOrder.billingAddress.lastName, - phoneHome: mockOrder.shipments[0].shippingAddress.phone, + phoneHome: mockOrder.billingAddress.phone, login: mockOrder.customerInfo.email } return res(ctx.status(200), ctx.json(savedCustomerData)) @@ -198,7 +198,7 @@ test('Integration test - phone number from order is visible in customer account lastName: mockOrder.billingAddress.lastName, address1: mockOrder.shipments[0].shippingAddress.address1, city: mockOrder.shipments[0].shippingAddress.city, - phone: mockOrder.shipments[0].shippingAddress.phone, + phone: mockOrder.billingAddress.phone, postalCode: mockOrder.shipments[0].shippingAddress.postalCode, stateCode: mockOrder.shipments[0].shippingAddress.stateCode, countryCode: mockOrder.shipments[0].shippingAddress.countryCode @@ -245,7 +245,7 @@ test('Integration test - phone number from order is visible in customer account // and verifying the phone number is displayed in the UI, but that would require // additional setup of the Account page component and its dependencies. - // The key assertion is that the phone from the order's shipping address - // is correctly saved to the customer's phoneHome field during registration - expect(savedCustomerData.phoneHome).toBe(mockOrder.shipments[0].shippingAddress.phone) + // The key assertion is that the phone from the order's billing address + // is correctly saved to the customer's phoneHome field during registration + expect(savedCustomerData.phoneHome).toBe(mockOrder.billingAddress.phone) }) From 7d6190bf19ba155d9c644d44eb18e4f780483f06 Mon Sep 17 00:00:00 2001 From: Sushma Yadupathi Date: Tue, 1 Jul 2025 15:14:22 -0400 Subject: [PATCH 3/7] fix lint errors --- .../app/pages/checkout/confirmation.test.js | 66 +++++++++---------- 1 file changed, 32 insertions(+), 34 deletions(-) diff --git a/packages/template-retail-react-app/app/pages/checkout/confirmation.test.js b/packages/template-retail-react-app/app/pages/checkout/confirmation.test.js index 8789b1ae9f..c0a0a999db 100644 --- a/packages/template-retail-react-app/app/pages/checkout/confirmation.test.js +++ b/packages/template-retail-react-app/app/pages/checkout/confirmation.test.js @@ -152,9 +152,7 @@ test('Create Account form - phone number from order shipping address is saved to }) // Verify that the phone number from the order's billing address is included in the registration - expect(registrationRequestBody.customer.phoneHome).toBe( - mockOrder.billingAddress.phone - ) + expect(registrationRequestBody.customer.phoneHome).toBe(mockOrder.billingAddress.phone) expect(registrationRequestBody.customer.phoneHome).toBe('(778) 888-8888') // Verify other expected customer data (firstName/lastName come from order's billingAddress) @@ -170,17 +168,17 @@ test('Integration test - phone number from order is visible in customer account global.server.use( // Mock customer registration - rest.post('*/customers', (req, res, ctx) => { - savedCustomerData = { - customerId: 'new-customer-id-123', - email: mockOrder.customerInfo.email, - firstName: mockOrder.billingAddress.firstName, - lastName: mockOrder.billingAddress.lastName, - phoneHome: mockOrder.billingAddress.phone, - login: mockOrder.customerInfo.email - } - return res(ctx.status(200), ctx.json(savedCustomerData)) - }), + rest.post('*/customers', (req, res, ctx) => { + savedCustomerData = { + customerId: 'new-customer-id-123', + email: mockOrder.customerInfo.email, + firstName: mockOrder.billingAddress.firstName, + lastName: mockOrder.billingAddress.lastName, + phoneHome: mockOrder.billingAddress.phone, + login: mockOrder.customerInfo.email + } + return res(ctx.status(200), ctx.json(savedCustomerData)) + }), // Mock address creation rest.post('*/customers/*/addresses', (_, res, ctx) => { return res(ctx.status(200)) @@ -192,17 +190,17 @@ test('Integration test - phone number from order is visible in customer account ctx.json({ ...savedCustomerData, addresses: [ - { - addressId: 'address-1', - firstName: mockOrder.billingAddress.firstName, - lastName: mockOrder.billingAddress.lastName, - address1: mockOrder.shipments[0].shippingAddress.address1, - city: mockOrder.shipments[0].shippingAddress.city, - phone: mockOrder.billingAddress.phone, - postalCode: mockOrder.shipments[0].shippingAddress.postalCode, - stateCode: mockOrder.shipments[0].shippingAddress.stateCode, - countryCode: mockOrder.shipments[0].shippingAddress.countryCode - } + { + addressId: 'address-1', + firstName: mockOrder.billingAddress.firstName, + lastName: mockOrder.billingAddress.lastName, + address1: mockOrder.shipments[0].shippingAddress.address1, + city: mockOrder.shipments[0].shippingAddress.city, + phone: mockOrder.billingAddress.phone, + postalCode: mockOrder.shipments[0].shippingAddress.postalCode, + stateCode: mockOrder.shipments[0].shippingAddress.stateCode, + countryCode: mockOrder.shipments[0].shippingAddress.countryCode + } ] }) ) @@ -220,13 +218,13 @@ test('Integration test - phone number from order is visible in customer account wrapperProps: {isGuest: true} }) - // Step 1: Fill out and submit the registration form - const createAccountButton = await screen.findByRole('button', {name: /create account/i}) - const password = screen.getByLabelText('Password') + // Step 1: Fill out and submit the registration form + const createAccountButton = await screen.findByRole('button', {name: /create account/i}) + const password = screen.getByLabelText('Password') - // Fill out the form (firstName and lastName are hidden fields pre-filled from order data) - await user.type(password, 'P4ssword!') - await user.click(createAccountButton) + // Fill out the form (firstName and lastName are hidden fields pre-filled from order data) + await user.type(password, 'P4ssword!') + await user.click(createAccountButton) // Step 2: Wait for redirect to account page await waitFor( @@ -245,7 +243,7 @@ test('Integration test - phone number from order is visible in customer account // and verifying the phone number is displayed in the UI, but that would require // additional setup of the Account page component and its dependencies. - // The key assertion is that the phone from the order's billing address - // is correctly saved to the customer's phoneHome field during registration - expect(savedCustomerData.phoneHome).toBe(mockOrder.billingAddress.phone) + // The key assertion is that the phone from the order's billing address + // is correctly saved to the customer's phoneHome field during registration + expect(savedCustomerData.phoneHome).toBe(mockOrder.billingAddress.phone) }) From 66e0cc915b46fee2a30049209e5808b604697b4f Mon Sep 17 00:00:00 2001 From: Sushma Yadupathi Date: Wed, 2 Jul 2025 19:33:09 -0400 Subject: [PATCH 4/7] updated change log --- packages/template-retail-react-app/CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/template-retail-react-app/CHANGELOG.md b/packages/template-retail-react-app/CHANGELOG.md index f34631a2ad..c99520cdeb 100644 --- a/packages/template-retail-react-app/CHANGELOG.md +++ b/packages/template-retail-react-app/CHANGELOG.md @@ -7,6 +7,7 @@ - Update latest translations for all languages [#2616](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/2616) - Load active data scripts on demand only [#2623](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/2623) - Provide base image for convenient perf optimizations [#2642](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/2642) +- Support saving billing phone number on user registration from order confirmation [#2653](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/2653) ## v6.1.0 (May 22, 2025) From 6a20ca42bb965fb15f00ef6f4b7afd4d989bd3c4 Mon Sep 17 00:00:00 2001 From: Sushma Yadupathi Date: Wed, 2 Jul 2025 19:53:10 -0400 Subject: [PATCH 5/7] address code review comment --- .../app/pages/checkout/confirmation.test.js | 246 +++++++++--------- 1 file changed, 124 insertions(+), 122 deletions(-) diff --git a/packages/template-retail-react-app/app/pages/checkout/confirmation.test.js b/packages/template-retail-react-app/app/pages/checkout/confirmation.test.js index c0a0a999db..677aa07564 100644 --- a/packages/template-retail-react-app/app/pages/checkout/confirmation.test.js +++ b/packages/template-retail-react-app/app/pages/checkout/confirmation.test.js @@ -113,137 +113,139 @@ test('Create Account form - successful submission results in redirect to the Acc }) }) -test('Create Account form - phone number from order shipping address is saved to customer profile', async () => { - let registrationRequestBody = null - - global.server.use( - rest.post('*/customers', (req, res, ctx) => { - registrationRequestBody = req.body - return res( - ctx.status(200), - ctx.json({ - customerId: 'new-customer-id', - email: mockOrder.customerInfo.email, - firstName: mockOrder.billingAddress.firstName, - lastName: mockOrder.billingAddress.lastName, - phoneHome: mockOrder.shipments[0].shippingAddress.phone - }) - ) - }), - rest.post('*/customers/*/addresses', (_, res, ctx) => { - return res(ctx.status(200)) +describe('Account form', () => { + test('saves phone number from billing address to customer', async () => { + let registrationRequestBody = null + + global.server.use( + rest.post('*/customers', (req, res, ctx) => { + registrationRequestBody = req.body + return res( + ctx.status(200), + ctx.json({ + customerId: 'new-customer-id', + email: mockOrder.customerInfo.email, + firstName: mockOrder.billingAddress.firstName, + lastName: mockOrder.billingAddress.lastName, + phoneHome: mockOrder.shipments[0].shippingAddress.phone + }) + ) + }), + rest.post('*/customers/*/addresses', (_, res, ctx) => { + return res(ctx.status(200)) + }) + ) + + const {user} = renderWithProviders(, { + wrapperProps: {isGuest: true} }) - ) - const {user} = renderWithProviders(, { - wrapperProps: {isGuest: true} - }) + const createAccountButton = await screen.findByRole('button', {name: /create account/i}) + const password = screen.getByLabelText('Password') - const createAccountButton = await screen.findByRole('button', {name: /create account/i}) - const password = screen.getByLabelText('Password') - - // Fill out the form (firstName and lastName are hidden fields pre-filled from order data) - await user.type(password, 'P4ssword!') - await user.click(createAccountButton) + // Fill out the form (firstName and lastName are hidden fields pre-filled from order data) + await user.type(password, 'P4ssword!') + await user.click(createAccountButton) - // Wait for the registration request to complete - await waitFor(() => { - expect(registrationRequestBody).not.toBeNull() - }) + // Wait for the registration request to complete + await waitFor(() => { + expect(registrationRequestBody).not.toBeNull() + }) - // Verify that the phone number from the order's billing address is included in the registration - expect(registrationRequestBody.customer.phoneHome).toBe(mockOrder.billingAddress.phone) - expect(registrationRequestBody.customer.phoneHome).toBe('(778) 888-8888') + // Verify that the phone number from the order's billing address is included in the registration + expect(registrationRequestBody.customer.phoneHome).toBe(mockOrder.billingAddress.phone) + expect(registrationRequestBody.customer.phoneHome).toBe('(778) 888-8888') - // Verify other expected customer data (firstName/lastName come from order's billingAddress) - expect(registrationRequestBody.customer.firstName).toBe(mockOrder.billingAddress.firstName) - expect(registrationRequestBody.customer.lastName).toBe(mockOrder.billingAddress.lastName) - expect(registrationRequestBody.customer.email).toBe(mockOrder.customerInfo.email) - expect(registrationRequestBody.customer.login).toBe(mockOrder.customerInfo.email) - expect(registrationRequestBody.password).toBe('P4ssword!') -}) + // Verify other expected customer data (firstName/lastName come from order's billingAddress) + expect(registrationRequestBody.customer.firstName).toBe(mockOrder.billingAddress.firstName) + expect(registrationRequestBody.customer.lastName).toBe(mockOrder.billingAddress.lastName) + expect(registrationRequestBody.customer.email).toBe(mockOrder.customerInfo.email) + expect(registrationRequestBody.customer.login).toBe(mockOrder.customerInfo.email) + expect(registrationRequestBody.password).toBe('P4ssword!') + }) -test('Integration test - phone number from order is visible in customer account after registration', async () => { - let savedCustomerData = null + test('Integration test - phone number from order is visible in customer account after registration', async () => { + let savedCustomerData = null - global.server.use( - // Mock customer registration - rest.post('*/customers', (req, res, ctx) => { - savedCustomerData = { - customerId: 'new-customer-id-123', - email: mockOrder.customerInfo.email, - firstName: mockOrder.billingAddress.firstName, - lastName: mockOrder.billingAddress.lastName, - phoneHome: mockOrder.billingAddress.phone, - login: mockOrder.customerInfo.email - } - return res(ctx.status(200), ctx.json(savedCustomerData)) - }), - // Mock address creation - rest.post('*/customers/*/addresses', (_, res, ctx) => { - return res(ctx.status(200)) - }), - // Mock customer profile fetch for account page - rest.get('*/customers/new-customer-id-123', (_, res, ctx) => { - return res( - ctx.status(200), - ctx.json({ - ...savedCustomerData, - addresses: [ - { - addressId: 'address-1', - firstName: mockOrder.billingAddress.firstName, - lastName: mockOrder.billingAddress.lastName, - address1: mockOrder.shipments[0].shippingAddress.address1, - city: mockOrder.shipments[0].shippingAddress.city, - phone: mockOrder.billingAddress.phone, - postalCode: mockOrder.shipments[0].shippingAddress.postalCode, - stateCode: mockOrder.shipments[0].shippingAddress.stateCode, - countryCode: mockOrder.shipments[0].shippingAddress.countryCode - } - ] - }) - ) - }), - // Mock any other account page dependencies - rest.get('*/customers/*/orders', (_, res, ctx) => { - return res(ctx.status(200), ctx.json({data: [], total: 0})) - }), - rest.get('*/customers/*/product-lists', (_, res, ctx) => { - return res(ctx.status(200), ctx.json({data: []})) + global.server.use( + // Mock customer registration + rest.post('*/customers', (req, res, ctx) => { + savedCustomerData = { + customerId: 'new-customer-id-123', + email: mockOrder.customerInfo.email, + firstName: mockOrder.billingAddress.firstName, + lastName: mockOrder.billingAddress.lastName, + phoneHome: mockOrder.billingAddress.phone, + login: mockOrder.customerInfo.email + } + return res(ctx.status(200), ctx.json(savedCustomerData)) + }), + // Mock address creation + rest.post('*/customers/*/addresses', (_, res, ctx) => { + return res(ctx.status(200)) + }), + // Mock customer profile fetch for account page + rest.get('*/customers/new-customer-id-123', (_, res, ctx) => { + return res( + ctx.status(200), + ctx.json({ + ...savedCustomerData, + addresses: [ + { + addressId: 'address-1', + firstName: mockOrder.billingAddress.firstName, + lastName: mockOrder.billingAddress.lastName, + address1: mockOrder.shipments[0].shippingAddress.address1, + city: mockOrder.shipments[0].shippingAddress.city, + phone: mockOrder.billingAddress.phone, + postalCode: mockOrder.shipments[0].shippingAddress.postalCode, + stateCode: mockOrder.shipments[0].shippingAddress.stateCode, + countryCode: mockOrder.shipments[0].shippingAddress.countryCode + } + ] + }) + ) + }), + // Mock any other account page dependencies + rest.get('*/customers/*/orders', (_, res, ctx) => { + return res(ctx.status(200), ctx.json({data: [], total: 0})) + }), + rest.get('*/customers/*/product-lists', (_, res, ctx) => { + return res(ctx.status(200), ctx.json({data: []})) + }) + ) + + const {user} = renderWithProviders(, { + wrapperProps: {isGuest: true} }) - ) - const {user} = renderWithProviders(, { - wrapperProps: {isGuest: true} + // Step 1: Fill out and submit the registration form + const createAccountButton = await screen.findByRole('button', {name: /create account/i}) + const password = screen.getByLabelText('Password') + + // Fill out the form (firstName and lastName are hidden fields pre-filled from order data) + await user.type(password, 'P4ssword!') + await user.click(createAccountButton) + + // Step 2: Wait for redirect to account page + await waitFor( + () => { + expect(window.location.pathname).toBe('/uk/en-GB/account') + }, + {timeout: 5000} + ) + + // Step 3: Verify that the customer data was saved correctly + expect(savedCustomerData).not.toBeNull() + expect(savedCustomerData.phoneHome).toBe('(778) 888-8888') + + // Note: This test verifies the API calls and data flow. + // A full end-to-end test would require rendering the Account page component + // and verifying the phone number is displayed in the UI, but that would require + // additional setup of the Account page component and its dependencies. + + // The key assertion is that the phone from the order's billing address + // is correctly saved to the customer's phoneHome field during registration + expect(savedCustomerData.phoneHome).toBe(mockOrder.billingAddress.phone) }) - - // Step 1: Fill out and submit the registration form - const createAccountButton = await screen.findByRole('button', {name: /create account/i}) - const password = screen.getByLabelText('Password') - - // Fill out the form (firstName and lastName are hidden fields pre-filled from order data) - await user.type(password, 'P4ssword!') - await user.click(createAccountButton) - - // Step 2: Wait for redirect to account page - await waitFor( - () => { - expect(window.location.pathname).toBe('/uk/en-GB/account') - }, - {timeout: 5000} - ) - - // Step 3: Verify that the customer data was saved correctly - expect(savedCustomerData).not.toBeNull() - expect(savedCustomerData.phoneHome).toBe('(778) 888-8888') - - // Note: This test verifies the API calls and data flow. - // A full end-to-end test would require rendering the Account page component - // and verifying the phone number is displayed in the UI, but that would require - // additional setup of the Account page component and its dependencies. - - // The key assertion is that the phone from the order's billing address - // is correctly saved to the customer's phoneHome field during registration - expect(savedCustomerData.phoneHome).toBe(mockOrder.billingAddress.phone) }) From 90fb7d9d80d6c1aeae6d85837bacb9dad2d7d44c Mon Sep 17 00:00:00 2001 From: Sushma Yadupathi Date: Thu, 3 Jul 2025 09:38:04 -0400 Subject: [PATCH 6/7] fix lint errors afrer conflict merge --- .../app/pages/checkout/confirmation.test.js | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/packages/template-retail-react-app/app/pages/checkout/confirmation.test.js b/packages/template-retail-react-app/app/pages/checkout/confirmation.test.js index da1d830dcb..b8331625dd 100644 --- a/packages/template-retail-react-app/app/pages/checkout/confirmation.test.js +++ b/packages/template-retail-react-app/app/pages/checkout/confirmation.test.js @@ -260,7 +260,7 @@ describe('Account form', () => { // The key assertion is that the phone from the order's billing address // is correctly saved to the customer's phoneHome field during registration expect(savedCustomerData.phoneHome).toBe(mockOrder.billingAddress.phone) - }) + }) test('Create Account form - successful submission results in redirect to the Account page even if shipping address is not saved', async () => { global.server.use( @@ -289,4 +289,5 @@ describe('Account form', () => { await waitFor(() => { expect(window.location.pathname).toBe('/uk/en-GB/account') }) - }) + }) +}) From 26122d97f75669472555d4b47ec4993c941b5c79 Mon Sep 17 00:00:00 2001 From: Sushma Yadupathi Date: Thu, 3 Jul 2025 10:07:38 -0400 Subject: [PATCH 7/7] minor change to test comment --- .../app/pages/checkout/confirmation.test.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/template-retail-react-app/app/pages/checkout/confirmation.test.js b/packages/template-retail-react-app/app/pages/checkout/confirmation.test.js index b8331625dd..1181af13a3 100644 --- a/packages/template-retail-react-app/app/pages/checkout/confirmation.test.js +++ b/packages/template-retail-react-app/app/pages/checkout/confirmation.test.js @@ -262,7 +262,7 @@ describe('Account form', () => { expect(savedCustomerData.phoneHome).toBe(mockOrder.billingAddress.phone) }) - test('Create Account form - successful submission results in redirect to the Account page even if shipping address is not saved', async () => { + test('successful submission redirects to the Account page even if shipping address is not saved', async () => { global.server.use( rest.post('*/customers', (_, res, ctx) => { return res(ctx.status(200), ctx.json(mockCustomer))