Generator creates a project with a singe-locale (#325)

* Single locale en-US and single site RefArch

* Build en-US translations

* Set pwa-kit config url locale to none

* Update create-mobify-app script wip

* debug create-mobify-app script

* Use deepmerge to add single locale data

* Revert test changes in the pwa

* Set locale to none in PWAKit Config data & Fix tests

* Fix PWA Kit config json file path

* Fix test wip

* More fixing test wip

* Fix locale type in order test URLs

* Fix locale type in account tests URLs

* Fix more locale type in more URLs

* lint

* Refactor adding tests utils getPathname

* lint

* Update test use-auth-modal create an account test condition

* Update index.test.js

* Extract pwa-kit.config.json to assets folder

* Extract l10n config to assets folder

* Update locale.test.js

* Update CHANGELOG.md

packages/pwa-kit-create-app/CHANGELOG.md

@@ -1,6 +1,6 @@
 ## v1.4.0-dev (Jan 06, 2022)
 -   Generate `test-project` with the correct Einstein's site id [#285](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/285)
-
+-   Generator creates a project configured to use a single-locale [#325](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/325)
 ## v1.3.0 (Jan 06, 2022)
 
 ## v1.1.0 (Sep 27, 2021)

packages/pwa-kit-create-app/assets/pwa/l10n.config.js

@@ -0,0 +1,24 @@
+/*
+ * Copyright (c) 2021, salesforce.com, inc.
+ * All rights reserved.
+ * SPDX-License-Identifier: BSD-3-Clause
+ * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/BSD-3-Clause
+ */
+
+const pkgLocalizationConfig = {
+    l10n: {
+        supportedCurrencies: ['USD'],
+        defaultCurrency: 'USD',
+        supportedLocales: [
+            {
+                id: 'en-US',
+                preferredCurrency: 'USD'
+            }
+        ],
+        defaultLocale: 'en-US'
+    }
+}
+
+module.exports = {
+    pkgLocalizationConfig
+}

packages/pwa-kit-create-app/assets/pwa/pwa-kit.config.json

@@ -0,0 +1,5 @@
+{
+    "url": {
+        "locale": "none"
+    }
+}

packages/pwa-kit-create-app/scripts/create-mobify-app.js

@@ -117,9 +117,11 @@ const runGenerator = (answers, {outputDir}) => {
 
     extractTemplate('pwa', outputDir)
 
+    const {pkgLocalizationConfig} = require(`../assets/pwa/l10n.config`)
     const pkgJsonPath = p.resolve(outputDir, 'package.json')
     const pkgJSON = readJson(pkgJsonPath)
-    const finalPkgData = merge(pkgJSON, answers['scaffold-pwa'])
+    const pkgDataWithAnswers = merge(pkgJSON, answers['scaffold-pwa'])
+    const finalPkgData = merge(pkgDataWithAnswers, pkgLocalizationConfig)
 
     npmInstallables.forEach((pkgName) => {
         const keys = ['dependencies', 'devDependencies']
@@ -150,6 +152,20 @@ const runGenerator = (answers, {outputDir}) => {
         ]
     })
 
+    const PWAKitConfigJsonTemplatePath = p.resolve(
+        p.join(
+            process.cwd(),
+            'packages',
+            'pwa-kit-create-app',
+            'assets',
+            'pwa',
+            'pwa-kit.config.json'
+        )
+    )
+    const PWAKitConfigJsonTemplate = readJson(PWAKitConfigJsonTemplatePath)
+    const PWAKitConfigJsonPath = p.resolve(outputDir, 'pwa-kit.config.json')
+    writeJson(PWAKitConfigJsonPath, PWAKitConfigJsonTemplate)
+
     const APIConfigTemplate = require(`../assets/pwa/api.config`).template
     const commerceApi = {
         proxyPath: answers['scaffold-pwa'].mobify.ssrParameters.proxyConfigs[0].path,
@@ -299,7 +315,7 @@ const testProjectAnswers = () => {
         projectId: 'scaffold-pwa',
         instanceUrl: 'https://zzrf-001.sandbox.us01.dx.commercecloud.salesforce.com',
         clientId: 'c9c45bfd-0ed3-4aa2-9971-40f88962b836',
-        siteId: 'RefArchGlobal',
+        siteId: 'RefArch',
         organizationId: 'f_ecom_zzrf_001',
         shortCode: 'kv7kzm78',
         einsteinId: '1ea06c6e-c936-4324-bcf0-fada93f83bb1',

packages/pwa/app/components/drawer-menu/index.test.js

@@ -38,12 +38,10 @@ test('Renders DrawerMenu with root', () => {
 
     const drawer = document.querySelector('.chakra-portal')
     const accordion = document.querySelector('.chakra-accordion')
-    const localeSelector = document.querySelector('.sf-locale-selector')
     const socialIcons = document.querySelector('.sf-social-icons')
 
     expect(drawer).toBeInTheDocument()
     expect(accordion).toBeInTheDocument()
-    expect(localeSelector).toBeInTheDocument()
     expect(socialIcons).toBeInTheDocument()
 })
 

packages/pwa/app/components/header/index.test.js

@@ -9,7 +9,7 @@ import PropTypes from 'prop-types'
 
 import {fireEvent, screen, waitFor} from '@testing-library/react'
 import Header from './index'
-import {renderWithProviders} from '../../utils/test-utils'
+import {renderWithProviders, getPathname} from '../../utils/test-utils'
 import useCustomer from '../../commerce-api/hooks/useCustomer'
 import {setupServer} from 'msw/node'
 import {rest} from 'msw'
@@ -47,11 +47,11 @@ const MockedComponent = ({history}) => {
     const onAccountClick = () => {
         // Link to account page for registered customer, open auth modal otherwise
         if (customer.isRegistered) {
-            history.push('/en-GB/account')
+            history.push(getPathname('/account'))
         }
     }
     const onWishlistClick = () => {
-        history.push('/en-GB/account/wishlist')
+        history.push(getPathname('/account/wishlist'))
     }
 
     return (
@@ -112,7 +112,7 @@ beforeEach(() => {
 
     // Since we're testing some navigation logic, we are using a simple Router
     // around our component. We need to initialize the default route/path here.
-    window.history.pushState({}, 'Account', '/en-GB/account')
+    window.history.pushState({}, 'Account', getPathname('/account'))
 })
 afterEach(() => {
     localStorage.clear()
@@ -232,12 +232,12 @@ test('route to account page when an authenticated users click on account icon',
     const accountIcon = document.querySelector('svg[aria-label="My account"]')
     fireEvent.click(accountIcon)
     await waitFor(() => {
-        expect(history.push).toHaveBeenCalledWith('/en-GB/account')
+        expect(history.push).toHaveBeenCalledWith(getPathname('/account'))
     })
 
     fireEvent.keyDown(accountIcon, {key: 'Enter', code: 'Enter'})
     await waitFor(() => {
-        expect(history.push).toHaveBeenCalledWith('/en-GB/account')
+        expect(history.push).toHaveBeenCalledWith(getPathname('/account'))
     })
 })
 
@@ -283,7 +283,7 @@ test('route to wishlist page when an authenticated users click on wishlist icon'
     const wishlistIcon = document.querySelector('button[aria-label="Wishlist"]')
     fireEvent.click(wishlistIcon)
     await waitFor(() => {
-        expect(history.push).toHaveBeenCalledWith('/en-GB/account/wishlist')
+        expect(history.push).toHaveBeenCalledWith(getPathname('/account/wishlist'))
     })
 })
 

packages/pwa/app/components/image-gallery/index.test.js

@@ -11,7 +11,7 @@ import {screen, fireEvent, waitFor} from '@testing-library/react'
 import ImageGallery from './index'
 import {Skeleton as ImageGallerySkeleton} from './index'
 import {createMemoryHistory} from 'history'
-import {renderWithProviders} from '../../utils/test-utils'
+import {renderWithProviders, getPathname} from '../../utils/test-utils'
 
 const MockComponent = ({imageGroups = [], selectedVariationAttributes = {}}) => {
     return !imageGroups.length ? (
@@ -30,7 +30,7 @@ MockComponent.propTypes = {
 describe('Image Gallery Component', () => {
     test('renders component with all images', () => {
         const history = createMemoryHistory()
-        history.push('/en-GB/image-gallery')
+        history.push(getPathname('/image-gallery'))
 
         renderWithProviders(<MockComponent imageGroups={data} selectedVariationAttributes={{}} />)
         expect(screen.getAllByAltText(/Ruffle Front V-Neck Cardigan/).length).toEqual(3)
@@ -43,7 +43,7 @@ describe('Image Gallery Component', () => {
 
     test('can select thumbnail image with enter keyboard', async () => {
         const history = createMemoryHistory()
-        history.push('/en-GB/image-gallery')
+        history.push(getPathname('/image-gallery'))
 
         renderWithProviders(
             <MockComponent imageGroups={data} selectedVariationAttributes={{}} history={history} />

packages/pwa/app/components/link/index.test.js

@@ -5,8 +5,9 @@
  * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/BSD-3-Clause
  */
 import React from 'react'
-import {renderWithProviders} from '../../utils/test-utils'
+import {renderWithProviders, getPathname} from '../../utils/test-utils'
 import Link from './index'
+import {DEFAULT_LOCALE} from '../../constants'
 
 import {getUrlConfig} from '../../utils/utils'
 jest.mock('../../utils/utils', () => {
@@ -21,23 +22,23 @@ test('renders a link with locale prepended', () => {
         locale: 'path'
     }))
     const {getByText} = renderWithProviders(<Link href="/mypage">My Page</Link>)
-    expect(getByText(/My Page/i)).toHaveAttribute('href', '/en-GB/mypage')
+    expect(getByText(/My Page/i)).toHaveAttribute('href', getPathname('/mypage'))
 })
 
 test('renders a link with locale as query param', () => {
     getUrlConfig.mockImplementation(() => ({
         locale: 'query_param'
     }))
     const {getByText} = renderWithProviders(<Link href="/mypage">My Page</Link>)
-    expect(getByText(/My Page/i)).toHaveAttribute('href', '/mypage?locale=en-GB')
+    expect(getByText(/My Page/i)).toHaveAttribute('href', `/mypage?locale=${DEFAULT_LOCALE}`)
 })
 
 test('accepts `to` prop as well', () => {
     getUrlConfig.mockImplementation(() => ({
         locale: 'path'
     }))
     const {getByText} = renderWithProviders(<Link to="/mypage">My Page</Link>)
-    expect(getByText(/My Page/i)).toHaveAttribute('href', '/en-GB/mypage')
+    expect(getByText(/My Page/i)).toHaveAttribute('href', getPathname('/mypage'))
 })
 
 test('does not modify root url', () => {

packages/pwa/app/components/search/index.test.js

@@ -5,7 +5,7 @@
  * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/BSD-3-Clause
  */
 import React from 'react'
-import {renderWithProviders} from '../../utils/test-utils'
+import {renderWithProviders, getPathname} from '../../utils/test-utils'
 import user from '@testing-library/user-event'
 import {screen, waitFor} from '@testing-library/react'
 import SearchInput from './index'
@@ -56,7 +56,7 @@ test('changes url when enter is pressed', async () => {
     renderWithProviders(<SearchInput />)
     const searchInput = document.querySelector('input[type="search"]')
     await user.type(searchInput, 'Dresses{enter}')
-    await waitFor(() => expect(window.location.pathname).toEqual('/en-GB/search'))
+    await waitFor(() => expect(window.location.pathname).toEqual(getPathname('/search')))
     await waitFor(() => expect(window.location.search).toEqual('?q=Dresses'))
 })
 

packages/pwa/app/hooks/use-auth-modal.test.js

@@ -7,7 +7,7 @@
 import React from 'react'
 import {screen, within, waitFor} from '@testing-library/react'
 import user from '@testing-library/user-event'
-import {renderWithProviders} from '../utils/test-utils'
+import {renderWithProviders, getPathname} from '../utils/test-utils'
 import {AuthModal, useAuthModal} from './use-auth-modal'
 import {BrowserRouter as Router, Route} from 'react-router-dom'
 import Account from '../pages/account'
@@ -125,7 +125,7 @@ const MockedComponent = () => {
         <Router>
             <button onClick={authModal.onOpen}>Open Modal</button>
             <AuthModal {...authModal} />
-            <Route path="/en-GB/account">
+            <Route path={getPathname('/account')}>
                 <Account match={match} />
             </Route>
         </Router>
@@ -245,6 +245,5 @@ test('Allows customer to create an account', async () => {
     user.click(withinForm.getByText(/create account/i))
 
     // wait for redirecting to account page
-    expect(await screen.findByText(/customer@test.com/i, {}, {timeout: 30000})).toBeInTheDocument()
-    expect(await screen.queryAllByText(/Log out/i, {}, {timeout: 30000}).length).toEqual(2)
+    expect(await screen.findByText(/welcome tester/i, {}, {timeout: 30000})).toBeInTheDocument()
 })

packages/pwa/app/pages/account/index.test.js

@@ -10,7 +10,7 @@ import {screen, waitFor, within} from '@testing-library/react'
 import user from '@testing-library/user-event'
 import {rest} from 'msw'
 import {setupServer} from 'msw/node'
-import {renderWithProviders} from '../../utils/test-utils'
+import {renderWithProviders, getPathname} from '../../utils/test-utils'
 import {
     mockedGuestCustomer,
     mockedRegisteredCustomer,
@@ -20,7 +20,6 @@ import {
 } from '../../commerce-api/mock-data'
 import useCustomer from '../../commerce-api/hooks/useCustomer'
 import Account from './index'
-import {getUrlConfig} from '../../utils/utils'
 
 jest.mock('../../commerce-api/utils', () => {
     const originalModule = jest.requireActual('../../commerce-api/utils')
@@ -30,14 +29,6 @@ jest.mock('../../commerce-api/utils', () => {
     }
 })
 
-jest.mock('../../utils/utils', () => {
-    const original = jest.requireActual('../../utils/utils')
-    return {
-        ...original,
-        getUrlConfig: jest.fn()
-    }
-})
-
 const MockedComponent = () => {
     const customer = useCustomer()
 
@@ -49,7 +40,7 @@ const MockedComponent = () => {
 
     return (
         <Switch>
-            <Route path="/en-GB/account" render={(props) => <Account {...props} />} />
+            <Route path={getPathname('/account')} render={(props) => <Account {...props} />} />
         </Switch>
     )
 }
@@ -98,13 +89,10 @@ const server = setupServer(
 beforeEach(() => {
     jest.resetModules()
     server.listen({onUnhandledRequest: 'error'})
-    getUrlConfig.mockImplementation(() => ({
-        locale: 'path'
-    }))
 
     // Since we're testing some navigation logic, we are using a simple Router
     // around our component. We need to initialize the default route/path here.
-    window.history.pushState({}, 'Account', '/en-GB/account')
+    window.history.pushState({}, 'Account', getPathname('/account'))
 })
 afterEach(() => {
     localStorage.clear()
@@ -119,7 +107,7 @@ test('Redirects to login page if the customer is not logged in', async () => {
         })
     )
     renderWithProviders(<MockedComponent />)
-    await waitFor(() => expect(window.location.pathname).toEqual('/en-GB/login'))
+    await waitFor(() => expect(window.location.pathname).toEqual(getPathname('/login')))
 })
 
 test('Provides navigation for subpages', async () => {
@@ -128,11 +116,11 @@ test('Provides navigation for subpages', async () => {
 
     const nav = within(screen.getByTestId('account-detail-nav'))
     user.click(nav.getByText('Addresses'))
-    await waitFor(() => expect(window.location.pathname).toEqual('/en-GB/account/addresses'))
+    await waitFor(() => expect(window.location.pathname).toEqual(getPathname('/account/addresses')))
     user.click(nav.getByText('Order History'))
-    await waitFor(() => expect(window.location.pathname).toEqual('/en-GB/account/orders'))
+    await waitFor(() => expect(window.location.pathname).toEqual(getPathname('/account/orders')))
     user.click(nav.getByText('Payment Methods'))
-    await waitFor(() => expect(window.location.pathname).toEqual('/en-GB/account/payments'))
+    await waitFor(() => expect(window.location.pathname).toEqual(getPathname('/account/payments')))
 })
 
 test('Renders account detail page by default for logged-in customer', async () => {
@@ -149,7 +137,7 @@ test('Allows customer to sign out', async () => {
     expect(await screen.findByTestId('account-detail-page')).toBeInTheDocument()
     user.click(screen.getAllByText(/Log Out/)[0])
     await waitFor(() => {
-        expect(window.location.pathname).toEqual('/en-GB/login')
+        expect(window.location.pathname).toEqual(getPathname('/login'))
     })
 })
 

packages/pwa/app/pages/account/orders.test.js

@@ -10,23 +10,14 @@ import {screen} from '@testing-library/react'
 import user from '@testing-library/user-event'
 import {rest} from 'msw'
 import {setupServer} from 'msw/node'
-import {renderWithProviders} from '../../utils/test-utils'
+import {renderWithProviders, getPathname} from '../../utils/test-utils'
 import {
     mockedRegisteredCustomer,
     mockOrderHistory,
     mockOrderProducts
 } from '../../commerce-api/mock-data'
 import useCustomer from '../../commerce-api/hooks/useCustomer'
 import Orders from './orders'
-import {getUrlConfig} from '../../utils/utils'
-
-jest.mock('../../utils/utils', () => {
-    const original = jest.requireActual('../../utils/utils')
-    return {
-        ...original,
-        getUrlConfig: jest.fn()
-    }
-})
 
 jest.mock('../../commerce-api/utils', () => {
     const originalModule = jest.requireActual('../../commerce-api/utils')
@@ -51,7 +42,7 @@ const MockedComponent = () => {
 
     return (
         <Switch>
-            <Route path="/en-GB/account/orders">
+            <Route path={getPathname('/account/orders')}>
                 <Orders />
             </Route>
         </Switch>
@@ -105,12 +96,10 @@ const server = setupServer(
 // Set up and clean up
 beforeEach(() => {
     jest.resetModules()
-    getUrlConfig.mockImplementation(() => ({
-        locale: 'path'
-    }))
+
     server.listen({onUnhandledRequest: 'error'})
 
-    window.history.pushState({}, 'Account', '/en-GB/account/orders')
+    window.history.pushState({}, 'Account', getPathname('/account/orders'))
 })
 afterEach(() => {
     localStorage.clear()