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

package/app/utils/utils.test.js

@@ -0,0 +1,182 @@
+/*
+ * 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
+ */
+import * as utils from '@salesforce/retail-react-app/app/utils/utils'
+import EventEmitter from 'events'
+import {flatten, shallowEquals} from '@salesforce/retail-react-app/app/utils/utils'
+
+afterEach(() => {
+    jest.clearAllMocks()
+})
+
+jest.mock('./site-utils', () => {
+    const origin = jest.requireActual('./site-utils')
+    return {
+        ...origin,
+        getSites: jest.fn()
+    }
+})
+
+describe('requestIdleCallback should be a working shim', () => {
+    test('without a working implementation built in', async () => {
+        const result = new Promise((resolve) => utils.requestIdleCallback(resolve))
+        await expect(result).resolves.toBeUndefined()
+    })
+
+    test('with a working implementation built in', async () => {
+        window.requestIdleCallback = (fn) => setTimeout(() => fn(), 1)
+        const result = new Promise((resolve) => utils.requestIdleCallback(resolve))
+        await expect(result).resolves.toBeUndefined()
+    })
+})
+
+describe('WatchOnlineStatus', () => {
+    test('responds to offline/online events', () => {
+        const emitter = new EventEmitter()
+        const win = {
+            addEventListener: emitter.addListener.bind(emitter),
+            removeEventListener: emitter.removeListener.bind(emitter)
+        }
+        const collected = []
+        const callback = (isOnline) => collected.push(isOnline)
+        const unsubscribe = utils.watchOnlineStatus(callback, win)
+        emitter.emit('online')
+        emitter.emit('offline')
+        emitter.emit('online')
+        expect(collected).toEqual([true, false, true])
+        unsubscribe()
+        expect(emitter.listenerCount('online')).toBe(0)
+        expect(emitter.listenerCount('offline')).toBe(0)
+    })
+})
+
+describe('escapeRegexChars', () => {
+    test('escapes special characters', () => {
+        const escapedString = utils.escapeRegexChars('{}()*+?.,\\^$|#')
+        expect(escapedString).toBe('\\{\\}\\(\\)\\*\\+\\?\\.\\,\\\\\\^\\$\\|\\#')
+    })
+})
+
+describe('boldString & Capitalize test', () => {
+    test('boldString returns provided part of string bolded html', () => {
+        const boldedString = utils.boldString('boldedString', 'bolded')
+        expect(boldedString).toBe('<b>bolded</b>String')
+    })
+
+    test('boldString handles special regex characters', () => {
+        const boldedString = utils.boldString('some (*special!) chars', '(*special!)')
+        expect(boldedString).toBe('some <b>(*special!)</b> chars')
+    })
+
+    test('capitalize capitalizes a string', () => {
+        const stringToCapitlize = utils.capitalize('capitalize string test')
+        expect(stringToCapitlize).toBe('Capitalize String Test')
+    })
+})
+
+describe('session storage tests', () => {
+    test('sets,gets and removes item in session storage', () => {
+        utils.setSessionJSONItem('test', ['text'])
+        let testing = utils.getSessionJSONItem('test')
+        expect(testing).toHaveLength(1)
+        utils.clearSessionJSONItem('test')
+        testing = utils.getSessionJSONItem('test')
+        expect(testing).toBeUndefined()
+    })
+})
+
+describe('flatten', () => {
+    test('return a an array', () => {
+        const result = flatten({
+            id: 1,
+            item: 1,
+            children: [{id: 2, item: 2, children: [{id: 3, item: 3}]}]
+        })
+
+        expect(JSON.stringify(result)).toBe(
+            '{"1":{"id":1,"item":1,"children":[{"id":2,"item":2,"children":[{"id":3,"item":3}]}]},"2":{"id":2,"item":2,"children":[{"id":3,"item":3}]},"3":{"id":3,"item":3}}'
+        )
+    })
+})
+
+describe('shallow', function () {
+    test('should return false', () => {
+        const a = {a: '123'}
+        const b = {a: '123', b: '456'}
+        const result = shallowEquals(a, b)
+        expect(result).toBeFalsy()
+    })
+})
+
+describe('keysToCamel', () => {
+    test('converts object keys to camelcase', () => {
+        const input = {
+            numba_one: true,
+            'numba-two': false,
+            number3: 'un-changed',
+            c_Custom: 'un_changed',
+            _custom: 'unchanged'
+        }
+
+        const result = utils.keysToCamel(input)
+
+        expect(result).toEqual({
+            numbaOne: true,
+            numbaTwo: false,
+            number3: 'un-changed',
+            c_Custom: 'un_changed',
+            _custom: 'unchanged'
+        })
+    })
+
+    test('converts arrays of objects to camelcase', () => {
+        const input = [
+            {
+                numba_one: true,
+                number3: 'un-changed',
+                c_Custom: 'un_changed',
+                _custom: 'unchanged'
+            },
+            {
+                'numba-two': false
+            }
+        ]
+
+        const result = utils.keysToCamel(input)
+
+        expect(result).toEqual([
+            {
+                numbaOne: true,
+                number3: 'un-changed',
+                c_Custom: 'un_changed',
+                _custom: 'unchanged'
+            },
+            {
+                numbaTwo: false
+            }
+        ])
+    })
+
+    test('converts nested keys to camelcase', () => {
+        const input = {
+            numba_one: {
+                sub1: 'unchanged',
+                sub2: {sub_sub_2: 'changed'},
+                sub3: [{sub_sub_3: 'changed', sub3Sub4: 'unchanged'}]
+            }
+        }
+
+        const result = utils.keysToCamel(input)
+
+        expect(result).toEqual({
+            numbaOne: {
+                sub1: 'unchanged',
+                sub2: {subSub_2: 'changed'},
+                sub3: [{subSub_3: 'changed', sub3Sub4: 'unchanged'}]
+            }
+        })
+    })
+})

package/babel.config.js

@@ -0,0 +1,7 @@
+/*
+ * 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
+ */
+module.exports = require('@salesforce/pwa-kit-dev/configs/babel/babel-config')

package/cache-hash-config.json

@@ -0,0 +1,8 @@
+{
+    "files": [
+        "app/static/**/*"
+    ],
+    "baseDir": "app",
+    "hashLength": 8,
+    "destinationFolder": "app"
+}

package/config/default.js

@@ -0,0 +1,64 @@
+/*
+ * 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
+ */
+// eslint-disable-next-line @typescript-eslint/no-var-requires
+const sites = require('./sites.js')
+
+module.exports = {
+    app: {
+        url: {
+            site: 'path',
+            locale: 'path',
+            showDefaults: true
+        },
+        defaultSite: 'RefArchGlobal',
+        siteAliases: {
+            RefArch: 'us',
+            RefArchGlobal: 'global'
+        },
+        sites,
+        commerceAPI: {
+            proxyPath: `/mobify/proxy/api`,
+            parameters: {
+                clientId: 'c9c45bfd-0ed3-4aa2-9971-40f88962b836',
+                organizationId: 'f_ecom_zzrf_001',
+                shortCode: '8o7m175y',
+                siteId: 'RefArchGlobal'
+            }
+        },
+        einsteinAPI: {
+            host: 'https://api.cquotient.com',
+            einsteinId: '1ea06c6e-c936-4324-bcf0-fada93f83bb1',
+            // This differs from the siteId in commerceAPIConfig for testing purposes
+            siteId: 'aaij-MobileFirst',
+            isProduction: false
+        }
+    },
+    externals: [],
+    pageNotFoundURL: '/page-not-found',
+    ssrEnabled: true,
+    ssrOnly: ['ssr.js', 'ssr.js.map', 'node_modules/**/*.*'],
+    ssrShared: [
+        'static/ico/favicon.ico',
+        'static/robots.txt',
+        '**/*.js',
+        '**/*.js.map',
+        '**/*.json'
+    ],
+    ssrParameters: {
+        ssrFunctionNodeVersion: '16.x',
+        proxyConfigs: [
+            {
+                host: 'kv7kzm78.api.commercecloud.salesforce.com',
+                path: 'api'
+            },
+            {
+                host: 'zzrf-001.dx.commercecloud.salesforce.com',
+                path: 'ocapi'
+            }
+        ]
+    }
+}

package/config/mocks/default.js

@@ -0,0 +1,131 @@
+/*
+ * 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
+ */
+/**
+ * This is a mock config to be used for unit tests
+ *
+ * By default, a generated project is a single-site and single-locale app
+ * However, it can be extended to multi-site with multi-locale easily.
+ * To ensure that feature work correctly, we test our code with multi-site config in mind, so we created this mock config.
+ * A single-site, single-locale config is a special case of multi-site case.
+ */
+module.exports = {
+    app: {
+        url: {
+            locale: 'path',
+            site: 'path',
+            showDefaults: true
+        },
+        siteAliases: {
+            'site-1': 'uk',
+            'site-2': 'us'
+        },
+        defaultSite: 'site-1',
+        sites: [
+            {
+                id: 'site-1',
+                l10n: {
+                    defaultLocale: 'en-GB',
+                    defaultCurrency: 'GBP',
+                    supportedLocales: [
+                        {
+                            id: 'en-GB',
+                            preferredCurrency: 'GBP'
+                        },
+                        {
+                            id: 'fr-FR',
+                            alias: 'fr',
+                            preferredCurrency: 'EUR'
+                        },
+                        {
+                            id: 'it-IT',
+                            preferredCurrency: 'EUR'
+                        }
+                    ]
+                }
+            },
+            {
+                id: 'site-2',
+                l10n: {
+                    defaultLocale: 'en-US',
+                    defaultCurrency: 'USD',
+                    supportedLocales: [
+                        {
+                            id: 'en-US',
+                            preferredCurrency: 'USD'
+                        },
+                        {
+                            id: 'en-CA',
+                            preferredCurrency: 'USD'
+                        }
+                    ]
+                }
+            }
+        ],
+        commerceAPI: {
+            proxyPath: `/mobify/proxy/api`,
+            parameters: {
+                clientId: 'c9c45bfd-0ed3-4aa2-9971-40f88962b836',
+                organizationId: 'f_ecom_zzrf_001',
+                shortCode: '11111111',
+                siteId: 'site-1'
+            }
+        },
+        einsteinAPI: {
+            host: 'http://localhost:7777',
+            einsteinId: '11111111',
+            // This differs from the siteId in commerceAPIConfig for testing purposes
+            siteId: 'EinsteinTestSite',
+            // Flag Einstein activities as coming from a production environment.
+            // By setting this to true, the Einstein activities generated by the environment will appear
+            // in production environment reports
+            // This is temporary and is meant as a placeholder until there is a mechanism for reading
+            // the is_production property from an MRT target
+            isProduction: false
+        }
+    },
+    // This list contains server-side only libraries that you don't want to be compiled by webpack
+    externals: [],
+    // Page not found url for your app
+    pageNotFoundURL: '/page-not-found',
+    // Enables or disables building the files necessary for server-side rendering.
+    ssrEnabled: true,
+    // This list determines which files are available exclusively to the server-side rendering system
+    // and are not available through the /mobify/bundle/ path.
+    ssrOnly: ['ssr.js', 'ssr.js.map', 'node_modules/**/*.*'],
+    // This list determines which files are available to the server-side rendering system
+    // and available through the /mobify/bundle/ path.
+    ssrShared: [
+        'static/ico/favicon.ico',
+        'static/robots.txt',
+        '**/*.js',
+        '**/*.js.map',
+        '**/*.json'
+    ],
+    // Additional parameters that configure Express app behavior.
+    ssrParameters: {
+        ssrFunctionNodeVersion: '16.x',
+        proxyConfigs: [
+            {
+                host: 'localhost:8888',
+                path: 'api'
+            },
+            {
+                host: 'localhost:9999',
+                path: 'ocapi'
+            }
+        ]
+    },
+    mockFetchOCAPISessions: (url) => {
+        if (url.includes('/sessions')) {
+            return {
+                ok: true,
+                status: 200
+            }
+        }
+        throw new Error(`Unhandled request: ${url}`)
+    }
+}

package/config/sites.js

@@ -0,0 +1,78 @@
+/*
+ * 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
+ */
+// Provide the sites for your app. Each site includes site id, and its localization configuration.
+// You can also provide alias for your locale. They will be used in place of your locale id when generating paths across the app
+module.exports = [
+    {
+        id: 'RefArch',
+        l10n: {
+            supportedCurrencies: ['USD'],
+            defaultCurrency: 'USD',
+            defaultLocale: 'en-US',
+            supportedLocales: [
+                {
+                    id: 'en-US',
+                    preferredCurrency: 'USD'
+                },
+                {
+                    id: 'en-CA',
+                    preferredCurrency: 'USD'
+                }
+            ]
+        }
+    },
+    {
+        id: 'RefArchGlobal',
+        l10n: {
+            supportedCurrencies: ['GBP', 'EUR', 'CNY', 'JPY'],
+            defaultCurrency: 'GBP',
+            supportedLocales: [
+                {
+                    id: 'de-DE',
+                    preferredCurrency: 'EUR'
+                },
+                {
+                    id: 'en-GB',
+                    preferredCurrency: 'GBP'
+                },
+                {
+                    id: 'es-MX',
+                    preferredCurrency: 'MXN'
+                },
+                {
+                    id: 'fr-FR',
+                    preferredCurrency: 'EUR'
+                },
+                {
+                    id: 'it-IT',
+                    preferredCurrency: 'EUR'
+                },
+                {
+                    id: 'ja-JP',
+                    preferredCurrency: 'JPY'
+                },
+                {
+                    id: 'ko-KR',
+                    preferredCurrency: 'KRW'
+                },
+                {
+                    id: 'pt-BR',
+                    preferredCurrency: 'BRL'
+                },
+                {
+                    id: 'zh-CN',
+                    preferredCurrency: 'CNY'
+                },
+                {
+                    id: 'zh-TW',
+                    preferredCurrency: 'TWD'
+                }
+            ],
+            defaultLocale: 'en-GB'
+        }
+    }
+]

package/jest-setup.js

@@ -0,0 +1,191 @@
+/*
+ * 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
+ */
+/* eslint-env jest */
+/* eslint-disable @typescript-eslint/no-var-requires */
+const path = require('path')
+const mockConfig = require(path.join(__dirname, 'config/mocks/default.js'))
+require('raf/polyfill') // fix requestAnimationFrame issue with polyfill
+require('@testing-library/jest-dom/extend-expect')
+const {configure: configureTestingLibrary} = require('@testing-library/react')
+const {Crypto} = require('@peculiar/webcrypto')
+const {setupServer} = require('msw/node')
+const {rest} = require('msw')
+const {
+    mockCategory,
+    mockedRegisteredCustomer,
+    exampleTokenReponse,
+    mockCustomerBaskets
+} = require('./app/mocks/mock-data')
+
+configureTestingLibrary({
+    // Increase to: 6 x default timeout of 1 second
+    ...(process.env.CI ? {asyncUtilTimeout: 6000} : {})
+})
+
+/**
+ * Set up an API mocking server for testing purposes.
+ * This mock server includes the basic oauth flow endpoints.
+ */
+export const setupMockServer = () => {
+    return setupServer(
+        rest.post('*/oauth2/authorize', (req, res, ctx) => res(ctx.delay(0), ctx.status(200))),
+        rest.get('*/oauth2/authorize', (req, res, ctx) => res(ctx.delay(0), ctx.status(200))),
+        rest.post('*/oauth2/login', (req, res, ctx) =>
+            res(ctx.delay(0), ctx.status(200), ctx.json(mockedRegisteredCustomer))
+        ),
+        rest.get('*/oauth2/logout', (req, res, ctx) =>
+            res(ctx.delay(0), ctx.status(200), ctx.json(exampleTokenReponse))
+        ),
+        rest.get('*/customers/:customerId', (req, res, ctx) =>
+            res(ctx.delay(0), ctx.status(200), ctx.json(mockedRegisteredCustomer))
+        ),
+        rest.get('*/customers/:customerId/baskets', (req, res, ctx) =>
+            res(ctx.delay(0), ctx.status(200), ctx.json(mockCustomerBaskets))
+        ),
+        rest.post('*/sessions', (req, res, ctx) => res(ctx.delay(0), ctx.status(200))),
+        rest.post('*/oauth2/token', (req, res, ctx) =>
+            res(
+                ctx.delay(0),
+                ctx.json({
+                    customer_id: 'customerid',
+                    // Is this token for guest or registered user?
+                    access_token:
+                        'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiZXhwIjoyNjczOTExMjYxLCJpYXQiOjI2NzM5MDk0NjF9.BDAp9G8nmArdBqAbsE5GUWZ3fiv2LwQKClEFDCGIyy8',
+                    refresh_token: 'testrefeshtoken',
+                    usid: 'testusid',
+                    enc_user_id: 'testEncUserId',
+                    id_token: 'testIdToken'
+                })
+            )
+        ),
+        rest.get('*/categories/:categoryId', (req, res, ctx) =>
+            res(ctx.delay(0), ctx.status(200), ctx.json(mockCategory))
+        ),
+        rest.post('*/baskets/actions/merge', (req, res, ctx) => res(ctx.delay(0), ctx.status(200))),
+        rest.post('*/v3/activities/EinsteinTestSite/*', (req, res, ctx) => {
+            return res(ctx.delay(0), ctx.status(200), ctx.json({}))
+        }),
+        rest.post('*/activities/EinsteinTestSite/*', (req, res, ctx) => {
+            return res(ctx.delay(0), ctx.status(200), ctx.json({}))
+        }),
+        rest.post('*/v3/personalization/recs/EinsteinTestSite/*', (req, res, ctx) => {
+            return res(ctx.delay(0), ctx.status(200), ctx.json({}))
+        })
+    )
+}
+
+beforeAll(() => {
+    global.server = setupMockServer()
+    global.server.listen({
+        onUnhandledRequest(req) {
+            console.error('Found an unhandled %s request to %s', req.method, req.url.href)
+        }
+    })
+})
+afterEach(() => {
+    global.server.resetHandlers()
+})
+afterAll(() => {
+    global.server.close()
+})
+
+// Mock the application configuration to be used in all tests.
+jest.mock('@salesforce/pwa-kit-runtime/utils/ssr-config', () => {
+    return {
+        getConfig: () => mockConfig
+    }
+})
+
+// TextEncoder is a web API, need to import it
+// from nodejs util in testing environment.
+global.TextEncoder = require('util').TextEncoder
+global.TextDecoder = require('util').TextDecoder
+
+// This file consists of global mocks for jsdom.
+class StorageMock {
+    constructor() {
+        this.store = {}
+    }
+    clear() {
+        this.store = {}
+    }
+    getItem(key) {
+        return this.store[key] || null
+    }
+    setItem(key, value) {
+        this.store[key] = value?.toString()
+    }
+    removeItem(key) {
+        delete this.store[key]
+    }
+}
+
+Object.defineProperty(window, 'crypto', {
+    value: new Crypto()
+})
+
+Object.defineProperty(window, 'localStorage', {
+    value: new StorageMock()
+})
+
+Object.defineProperty(window, 'sessionStorage', {
+    value: new StorageMock()
+})
+
+Object.defineProperty(window, 'scrollTo', {
+    value: () => null
+})
+
+if (typeof window.matchMedia !== 'function') {
+    Object.defineProperty(window, 'matchMedia', {
+        enumerable: true,
+        configurable: true,
+        writable: true,
+        value: jest.fn().mockImplementation((query) => ({
+            matches: false,
+            media: query,
+            onchange: null,
+            addListener: jest.fn(), // Deprecated
+            removeListener: jest.fn(), // Deprecated
+            addEventListener: jest.fn(),
+            removeEventListener: jest.fn(),
+            dispatchEvent: jest.fn()
+        }))
+    })
+}
+
+const prepareHandlers = (handlerConfig = []) => {
+    return handlerConfig.map((config) => {
+        return rest[config.method?.toLowerCase() || 'get'](config.path, (req, res, ctx) => {
+            return res(
+                ctx.delay(0),
+                ctx.status(config.status || 200),
+                config.res && ctx.json(config.res(req, res, ctx))
+            )
+        })
+    })
+}
+
+/**
+ * This util function allows developer to prepend handlers to the mock server by passing a config array of objects
+ *
+ * @param handlerConfig
+ * @example
+ * const handlers = [
+ *  {
+ *      path: "*\/products/"
+ *      method: 'post',
+ *      res: (req, res, ctx) => {
+ *          return mockData
+ *      }
+ *  }
+ * ]
+ */
+export const prependHandlersToServer = (handlerConfig) => {
+    const handlers = prepareHandlers(handlerConfig)
+    global.server.use(...handlers)
+}