@salesforce/retail-react-app 1.0.0-preview.0 → 1.0.0-preview.2

package/app/pages/checkout/index.test.js

@@ -11,8 +11,7 @@ import {screen, waitFor, within} from '@testing-library/react'
 import {rest} from 'msw'
 import {
     renderWithProviders,
-    createPathWithDefaults,
-    registerUserToken
+    createPathWithDefaults
 } from '@salesforce/retail-react-app/app/utils/test-utils'
 import {
     scapiBasketWithItem,
@@ -21,7 +20,6 @@ import {
     mockedCustomerProductLists
 } from '@salesforce/retail-react-app/app/mocks/mock-data'
 import mockConfig from '@salesforce/retail-react-app/config/mocks/default'
-import userEvent from '@testing-library/user-event'
 
 jest.setTimeout(30000)
 
@@ -72,6 +70,111 @@ beforeEach(() => {
             return res(ctx.delay(0), ctx.json(mockShippingMethods))
         })
     )
+
+    let currentBasket = JSON.parse(JSON.stringify(scapiBasketWithItem))
+    // Set up additional requests for intercepting/mocking for just this test.
+    global.server.use(
+        // mock adding guest email to basket
+        rest.put('*/baskets/:basketId/customer', (req, res, ctx) => {
+            currentBasket.customerInfo.email = 'customer@test.com'
+            return res(ctx.json(currentBasket))
+        }),
+
+        // mock fetch product lists
+        rest.get('*/customers/:customerId/product-lists', (req, res, ctx) => {
+            return res(ctx.json(mockedCustomerProductLists))
+        }),
+
+        // mock add shipping and billing address to basket
+        rest.put('*/shipping-address', (req, res, ctx) => {
+            const shippingBillingAddress = {
+                address1: req.body.address1,
+                city: 'Tampa',
+                countryCode: 'US',
+                firstName: 'Test',
+                fullName: 'Test McTester',
+                id: '047b18d4aaaf4138f693a4b931',
+                lastName: 'McTester',
+                phone: '(727) 555-1234',
+                postalCode: '33712',
+                stateCode: 'FL'
+            }
+            currentBasket.shipments[0].shippingAddress = shippingBillingAddress
+            currentBasket.billingAddress = shippingBillingAddress
+            return res(ctx.json(currentBasket))
+        }),
+
+        // mock add billing address to basket
+        rest.put('*/billing-address', (req, res, ctx) => {
+            const shippingBillingAddress = {
+                address1: '123 Main St',
+                city: 'Tampa',
+                countryCode: 'US',
+                firstName: 'Test',
+                fullName: 'Test McTester',
+                id: '047b18d4aaaf4138f693a4b931',
+                lastName: 'McTester',
+                phone: '(727) 555-1234',
+                postalCode: '33712',
+                stateCode: 'FL',
+                _type: 'orderAddress'
+            }
+            currentBasket.shipments[0].shippingAddress = shippingBillingAddress
+            currentBasket.billingAddress = shippingBillingAddress
+            return res(ctx.json(currentBasket))
+        }),
+
+        // mock add shipping method
+        rest.put('*/shipments/me/shipping-method', (req, res, ctx) => {
+            currentBasket.shipments[0].shippingMethod = defaultShippingMethod
+            return res(ctx.json(currentBasket))
+        }),
+
+        // mock add payment instrument
+        rest.post('*/baskets/:basketId/payment-instruments', (req, res, ctx) => {
+            currentBasket.paymentInstruments = [
+                {
+                    amount: 0,
+                    paymentCard: {
+                        cardType: 'Master Card',
+                        creditCardExpired: false,
+                        expirationMonth: 1,
+                        expirationYear: 2030,
+                        holder: 'Test McTester',
+                        maskedNumber: '************5454',
+                        numberLastDigits: '5454',
+                        validFromMonth: 1,
+                        validFromYear: 2020
+                    },
+                    paymentInstrumentId: 'testcard1',
+                    paymentMethodId: 'CREDIT_CARD'
+                }
+            ]
+            return res(ctx.json(currentBasket))
+        }),
+
+        // mock update address
+        rest.patch('*/addresses/savedaddress1', (req, res, ctx) => {
+            return res(ctx.json(mockedRegisteredCustomer.addresses[0]))
+        }),
+
+        // mock place order
+        rest.post('*/orders', (req, res, ctx) => {
+            currentBasket = {
+                ...scapiOrderResponse,
+                customerInfo: {...scapiOrderResponse.customerInfo, email: 'customer@test.com'}
+            }
+            return res(ctx.json(currentBasket))
+        }),
+
+        rest.get('*/baskets', (req, res, ctx) => {
+            const baskets = {
+                baskets: [currentBasket],
+                total: 1
+            }
+            return res(ctx.json(baskets))
+        })
+    )
 })
 afterEach(() => {
     jest.resetModules()
@@ -291,11 +394,23 @@ test('Can proceed through checkout steps as guest', async () => {
 })
 
 test('Can proceed through checkout as registered customer', async () => {
-    const user = userEvent.setup()
-    await logInDuringCheckout()
+    // Set the initial browser router path and render our component tree.
+    window.history.pushState({}, 'Checkout', createPathWithDefaults('/checkout'))
+    const {user} = renderWithProviders(<WrappedCheckout history={history} />, {
+        wrapperProps: {
+            // Not bypassing auth as usual, so we can test the guest-to-registered flow
+            bypassAuth: true,
+            isGuest: false,
+            siteAlias: 'uk',
+            locale: {id: 'en-GB'},
+            appConfig: mockConfig.app
+        }
+    })
 
     // Email should be displayed in previous step summary
-    expect(screen.getByText('customer@test.com')).toBeInTheDocument()
+    await waitFor(() => {
+        expect(screen.getByText('customer@test.com')).toBeInTheDocument()
+    })
 
     // Select a saved address and continue
     await user.click(screen.getByDisplayValue('savedaddress1'))
@@ -362,12 +477,26 @@ test('Can proceed through checkout as registered customer', async () => {
 
     // Should now be on our mocked confirmation route/page
     expect(await screen.findByText(/success/i)).toBeInTheDocument()
+    document.cookie = ''
 })
 
 test('Can edit address during checkout as a registered customer', async () => {
-    const user = userEvent.setup()
+    // Set the initial browser router path and render our component tree.
+    window.history.pushState({}, 'Checkout', createPathWithDefaults('/checkout'))
+    const {user} = renderWithProviders(<WrappedCheckout history={history} />, {
+        wrapperProps: {
+            // Not bypassing auth as usual, so we can test the guest-to-registered flow
+            bypassAuth: true,
+            isGuest: false,
+            siteAlias: 'uk',
+            locale: {id: 'en-GB'},
+            appConfig: mockConfig.app
+        }
+    })
 
-    await logInDuringCheckout()
+    await waitFor(() => {
+        expect(screen.getByTestId('sf-checkout-shipping-address-0')).toBeInTheDocument()
+    })
 
     const firstAddress = screen.getByTestId('sf-checkout-shipping-address-0')
     await user.click(within(firstAddress).getByText(/edit/i))
@@ -393,8 +522,18 @@ test('Can edit address during checkout as a registered customer', async () => {
 })
 
 test('Can add address during checkout as a registered customer', async () => {
-    const user = userEvent.setup()
-    await logInDuringCheckout()
+    // Set the initial browser router path and render our component tree.
+    window.history.pushState({}, 'Checkout', createPathWithDefaults('/checkout'))
+    const {user} = renderWithProviders(<WrappedCheckout history={history} />, {
+        wrapperProps: {
+            // Not bypassing auth as usual, so we can test the guest-to-registered flow
+            bypassAuth: true,
+            isGuest: false,
+            siteAlias: 'uk',
+            locale: {id: 'en-GB'},
+            appConfig: mockConfig.app
+        }
+    })
 
     global.server.use(
         rest.post('*/customers/:customerId/addresses', (req, res, ctx) => {
@@ -402,6 +541,9 @@ test('Can add address during checkout as a registered customer', async () => {
         })
     )
 
+    await waitFor(() => {
+        expect(screen.getByText(/add new address/i)).toBeInTheDocument()
+    })
     // Add address
     await user.click(screen.getByText(/add new address/i))
 
@@ -422,161 +564,3 @@ test('Can add address during checkout as a registered customer', async () => {
         expect(screen.getByTestId('sf-toggle-card-step-2-content')).not.toBeEmptyDOMElement()
     })
 })
-
-const logInDuringCheckout = async () => {
-    // Keep a *deep* of the initial mocked basket. Our mocked fetch responses will continuously
-    // update this object, which essentially mimics a saved basket on the backend.
-    let currentBasket = JSON.parse(JSON.stringify(scapiBasketWithItem))
-
-    // Set up additional requests for intercepting/mocking for just this test.
-    global.server.use(
-        // mock adding guest email to basket
-        rest.put('*/baskets/:basketId/customer', (req, res, ctx) => {
-            currentBasket.customerInfo.email = 'customer@test.com'
-            return res(ctx.json(currentBasket))
-        }),
-
-        // mock fetch product lists
-        rest.get('*/customers/:customerId/product-lists', (req, res, ctx) => {
-            return res(ctx.json(mockedCustomerProductLists))
-        }),
-
-        // mock add shipping and billing address to basket
-        rest.put('*/shipping-address', (req, res, ctx) => {
-            const shippingBillingAddress = {
-                address1: req.body.address1,
-                city: 'Tampa',
-                countryCode: 'US',
-                firstName: 'Test',
-                fullName: 'Test McTester',
-                id: '047b18d4aaaf4138f693a4b931',
-                lastName: 'McTester',
-                phone: '(727) 555-1234',
-                postalCode: '33712',
-                stateCode: 'FL'
-            }
-            currentBasket.shipments[0].shippingAddress = shippingBillingAddress
-            currentBasket.billingAddress = shippingBillingAddress
-            return res(ctx.json(currentBasket))
-        }),
-
-        // mock add billing address to basket
-        rest.put('*/billing-address', (req, res, ctx) => {
-            const shippingBillingAddress = {
-                address1: '123 Main St',
-                city: 'Tampa',
-                countryCode: 'US',
-                firstName: 'Test',
-                fullName: 'Test McTester',
-                id: '047b18d4aaaf4138f693a4b931',
-                lastName: 'McTester',
-                phone: '(727) 555-1234',
-                postalCode: '33712',
-                stateCode: 'FL',
-                _type: 'orderAddress'
-            }
-            currentBasket.shipments[0].shippingAddress = shippingBillingAddress
-            currentBasket.billingAddress = shippingBillingAddress
-            return res(ctx.json(currentBasket))
-        }),
-
-        // mock add shipping method
-        rest.put('*/shipments/me/shipping-method', (req, res, ctx) => {
-            currentBasket.shipments[0].shippingMethod = defaultShippingMethod
-            return res(ctx.json(currentBasket))
-        }),
-
-        // mock add payment instrument
-        rest.post('*/baskets/:basketId/payment-instruments', (req, res, ctx) => {
-            currentBasket.paymentInstruments = [
-                {
-                    amount: 0,
-                    paymentCard: {
-                        cardType: 'Master Card',
-                        creditCardExpired: false,
-                        expirationMonth: 1,
-                        expirationYear: 2030,
-                        holder: 'Test McTester',
-                        maskedNumber: '************5454',
-                        numberLastDigits: '5454',
-                        validFromMonth: 1,
-                        validFromYear: 2020
-                    },
-                    paymentInstrumentId: 'testcard1',
-                    paymentMethodId: 'CREDIT_CARD'
-                }
-            ]
-            return res(ctx.json(currentBasket))
-        }),
-
-        // mock update address
-        rest.patch('*/addresses/savedaddress1', (req, res, ctx) => {
-            return res(ctx.json(mockedRegisteredCustomer.addresses[0]))
-        }),
-
-        // mock place order
-        rest.post('*/orders', (req, res, ctx) => {
-            currentBasket = {
-                ...scapiOrderResponse,
-                customerInfo: {...scapiOrderResponse.customerInfo, email: 'customer@test.com'}
-            }
-            return res(ctx.json(currentBasket))
-        }),
-
-        rest.get('*/baskets', (req, res, ctx) => {
-            const baskets = {
-                baskets: [currentBasket],
-                total: 1
-            }
-            return res(ctx.json(baskets))
-        })
-    )
-
-    // Set the initial browser router path and render our component tree.
-    window.history.pushState({}, 'Checkout', createPathWithDefaults('/checkout'))
-    const {user} = renderWithProviders(<WrappedCheckout history={history} />, {
-        wrapperProps: {
-            // Not bypassing auth as usual, so we can test the guest-to-registered flow
-            bypassAuth: false,
-            siteAlias: 'uk',
-            locale: {id: 'en-GB'},
-            appConfig: mockConfig.app
-        }
-    })
-
-    // Switch to login
-    const haveAccountButton = await screen.findByText(/already have an account/i)
-    await user.click(haveAccountButton)
-
-    // Wait for checkout to load and display first step
-    const loginBtn = await screen.findByText(/log in/i)
-
-    // Planning to log in
-    global.server.use(
-        rest.post('*/oauth2/token', (req, res, ctx) => {
-            return res(
-                ctx.delay(0),
-                ctx.json({
-                    customer_id: 'customerid_1',
-                    access_token: registerUserToken,
-                    refresh_token: 'testrefeshtoken_1',
-                    usid: 'testusid_1',
-                    enc_user_id: 'testEncUserId_1',
-                    id_token: 'testIdToken_1'
-                })
-            )
-        })
-    )
-
-    // Provide customer email and submit
-    const emailInput = screen.getByLabelText('Email')
-    const pwInput = screen.getByLabelText('Password')
-    await user.type(emailInput, 'customer@test.com')
-    await user.type(pwInput, 'Password!1')
-    await user.click(loginBtn)
-
-    // Wait for next step to render
-    await waitFor(() =>
-        expect(screen.getByTestId('sf-toggle-card-step-1-content')).not.toBeEmptyDOMElement()
-    )
-}

package/app/routes.jsx

@@ -25,16 +25,24 @@ const fallback = <Skeleton height="75vh" width="100%" />
 // Pages
 const Home = loadable(() => import('./pages/home'), {fallback})
 const Login = loadable(() => import('./pages/login'), {fallback})
-const Registration = loadable(() => import('./pages/registration'), {fallback})
+const Registration = loadable(() => import('./pages/registration'), {
+    fallback
+})
 const ResetPassword = loadable(() => import('./pages/reset-password'), {fallback})
 const Account = loadable(() => import('./pages/account'), {fallback})
 const Cart = loadable(() => import('./pages/cart'), {fallback})
-const Checkout = loadable(() => import('./pages/checkout'), {fallback})
+const Checkout = loadable(() => import('./pages/checkout'), {
+    fallback
+})
 const CheckoutConfirmation = loadable(() => import('./pages/checkout/confirmation'), {fallback})
 const LoginRedirect = loadable(() => import('./pages/login-redirect'), {fallback})
 const ProductDetail = loadable(() => import('./pages/product-detail'), {fallback})
-const ProductList = loadable(() => import('./pages/product-list'), {fallback})
-const Wishlist = loadable(() => import('./pages/account/wishlist'), {fallback})
+const ProductList = loadable(() => import('./pages/product-list'), {
+    fallback
+})
+const Wishlist = loadable(() => import('./pages/account/wishlist'), {
+    fallback
+})
 const PageNotFound = loadable(() => import('./pages/page-not-found'))
 
 export const routes = [

package/jest-setup.js

@@ -21,6 +21,9 @@ const {
     mockCustomerBaskets
 } = require('./app/mocks/mock-data')
 
+// set jsdom in https context to allow read/write secure cookies
+global.jsdom.reconfigure({url: 'https://www.domain.com'})
+
 configureTestingLibrary({
     // Increase to: 6 x default timeout of 1 second
     ...(process.env.CI ? {asyncUtilTimeout: 6000} : {})

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@salesforce/retail-react-app",
-  "version": "1.0.0-preview.0",
+  "version": "1.0.0-preview.2",
   "license": "See license in LICENSE",
   "author": "cc-pwa-kit@salesforce.com",
   "ccExtensibility": {
@@ -44,11 +44,11 @@
     "@lhci/cli": "^0.11.0",
     "@loadable/component": "^5.15.3",
     "@peculiar/webcrypto": "^1.4.2",
-    "@salesforce/commerce-sdk-react": "1.0.0-preview.0",
-    "@salesforce/pwa-kit-dev": "3.0.0-preview.0",
-    "@salesforce/pwa-kit-react-sdk": "3.0.0-preview.0",
-    "@salesforce/pwa-kit-runtime": "3.0.0-preview.0",
-    "@tanstack/react-query": "^4.0.10",
+    "@salesforce/commerce-sdk-react": "1.0.0-preview.2",
+    "@salesforce/pwa-kit-dev": "3.0.0-preview.2",
+    "@salesforce/pwa-kit-react-sdk": "3.0.0-preview.2",
+    "@salesforce/pwa-kit-runtime": "3.0.0-preview.2",
+    "@tanstack/react-query": "^4.28.0",
     "@tanstack/react-query-devtools": "^4.29.1",
     "@testing-library/dom": "^9.0.1",
     "@testing-library/jest-dom": "^5.16.5",
@@ -101,5 +101,5 @@
   "overrides": {
     "nwsapi": "2.2.2"
   },
-  "gitHead": "a9f820893b7714244a0af509a5aefecc1344153c"
+  "gitHead": "a2476c090ce48fd09e9116437aedc6cc45ae60bd"
 }