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

package/app/utils/url.test.js

@@ -0,0 +1,421 @@
+/*
+ * 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 {
+    buildUrlSet,
+    categoryUrlBuilder,
+    productUrlBuilder,
+    searchUrlBuilder,
+    getPathWithLocale,
+    rebuildPathWithParams,
+    removeQueryParamsFromPath,
+    absoluteUrl,
+    createUrlTemplate,
+    removeSiteLocaleFromPath
+} from '@salesforce/retail-react-app/app/utils/url'
+import {getUrlConfig} from '@salesforce/retail-react-app/app/utils/site-utils'
+import mockConfig from '@salesforce/retail-react-app/config/mocks/default'
+
+afterEach(() => {
+    jest.clearAllMocks()
+})
+
+jest.mock('@salesforce/pwa-kit-react-sdk/utils/url', () => {
+    const original = jest.requireActual('@salesforce/pwa-kit-react-sdk/utils/url')
+    return {
+        ...original,
+        getAppOrigin: jest.fn(() => 'https://www.example.com')
+    }
+})
+jest.mock('./utils', () => {
+    const original = jest.requireActual('./utils')
+    return {
+        ...original,
+        getConfig: jest.fn(() => mockConfig)
+    }
+})
+
+jest.mock('./site-utils', () => {
+    const original = jest.requireActual('./site-utils')
+    return {
+        ...original,
+        getUrlConfig: jest.fn()
+    }
+})
+
+describe('buildUrlSet returns the expected set of urls', () => {
+    test('when no values are passed in', () => {
+        const set = buildUrlSet()
+
+        expect(set).toEqual([])
+    })
+
+    test('when the values array is not empty', () => {
+        const set = buildUrlSet('/mens/clothing', 'offset', [0, 5, 10])
+
+        expect(set).toEqual([
+            '/mens/clothing?offset=0',
+            '/mens/clothing?offset=5',
+            '/mens/clothing?offset=10'
+        ])
+    })
+
+    test('when the values array is empty', () => {
+        const set = buildUrlSet('/mens/clothing', 'offset', [])
+
+        expect(set).toEqual([])
+    })
+
+    test('when extra parameters are provided', () => {
+        const set = buildUrlSet('/mens/clothing', 'offset', [0, 5, 10], {sort: 'high-to-low'})
+
+        expect(set).toEqual([
+            '/mens/clothing?offset=0&sort=high-to-low',
+            '/mens/clothing?offset=5&sort=high-to-low',
+            '/mens/clothing?offset=10&sort=high-to-low'
+        ])
+    })
+
+    test('when url has existing params', () => {
+        const set = buildUrlSet('/mens/clothing?sort=high-to-low', 'offset', [0, 5, 10])
+
+        expect(set).toEqual([
+            '/mens/clothing?sort=high-to-low&offset=0',
+            '/mens/clothing?sort=high-to-low&offset=5',
+            '/mens/clothing?sort=high-to-low&offset=10'
+        ])
+    })
+
+    test('when valueless params are present', () => {
+        const set = buildUrlSet('/mens/clothing?server_only', 'offset', [0, 5, 10])
+
+        expect(set).toEqual([
+            '/mens/clothing?server_only&offset=0',
+            '/mens/clothing?server_only&offset=5',
+            '/mens/clothing?server_only&offset=10'
+        ])
+    })
+})
+
+describe('url builder test', () => {
+    // Save the original `window.location` object to not affect other test
+    const originalLocation = window.location
+
+    beforeEach(() => {
+        delete window.location
+        window.location = {...originalLocation, assign: jest.fn()}
+    })
+    afterEach(() => {
+        // Restore `window.location` to the `jsdom` `Location` object
+        window.location = originalLocation
+    })
+    test('searchUrlBuilder returns expect', () => {
+        const url = searchUrlBuilder('term')
+
+        expect(url).toBe('/search?q=term')
+    })
+
+    test('searchUrlBuilder returns expect with & symbol', () => {
+        const url = searchUrlBuilder('term&term')
+
+        expect(url).toBe('/search?q=term%26term')
+    })
+
+    test('productUrlBuilder returns expect', () => {
+        const url = productUrlBuilder({id: 'productId'})
+
+        expect(url).toBe('/product/productId')
+    })
+
+    test('categoryUrlBuilder returns expect', () => {
+        const url = categoryUrlBuilder({id: 'men'})
+        expect(url).toBe(`/category/men`)
+    })
+})
+
+describe('getPathWithLocale', () => {
+    getUrlConfig.mockImplementation(() => mockConfig.app.url)
+
+    test('getPathWithLocale returns expected for PLP', () => {
+        const location = new URL('http://localhost:3000/uk/it-IT/category/newarrivals-womens')
+        const buildUrl = createUrlTemplate(mockConfig.app, 'uk', 'it-IT')
+
+        const relativeUrl = getPathWithLocale('fr-FR', buildUrl, {location})
+        expect(relativeUrl).toBe(`/uk/fr/category/newarrivals-womens`)
+    })
+
+    test('getPathWithLocale uses default site for siteRef when it is no defined in the url', () => {
+        const location = new URL('http://localhost:3000/category/newarrivals-womens')
+        const buildUrl = createUrlTemplate(mockConfig.app, 'uk', 'it-IT')
+
+        const relativeUrl = getPathWithLocale('fr-FR', buildUrl, {location})
+        expect(relativeUrl).toBe(`/uk/fr/category/newarrivals-womens`)
+    })
+
+    test('getPathWithLocale returns expected for PLP without refine param', () => {
+        const location = new URL(
+            'http://localhost:3000/uk/it-IT/category/newarrivals-womens?limit=25&refine=c_refinementColor%3DBianco&sort=best-matches&offset=25'
+        )
+        const buildUrl = createUrlTemplate(mockConfig.app, 'uk', 'it-IT')
+
+        const relativeUrl = getPathWithLocale('fr-FR', buildUrl, {
+            disallowParams: ['refine'],
+            location
+        })
+        expect(relativeUrl).toBe(
+            `/uk/fr/category/newarrivals-womens?limit=25&sort=best-matches&offset=25`
+        )
+    })
+
+    test('getPathWithLocale returns expected for Homepage', () => {
+        const location = new URL('http://localhost:3000/uk/it-IT/')
+        const buildUrl = createUrlTemplate(mockConfig.app, 'uk', 'it-IT')
+
+        const relativeUrl = getPathWithLocale('fr-FR', buildUrl, {location})
+        expect(relativeUrl).toBe(`/uk/fr/`)
+    })
+
+    test('getPathWithLocale returns / when both site and locale are default', () => {
+        const location = new URL('http://localhost:3000/')
+        const buildUrl = createUrlTemplate(mockConfig.app, 'uk', 'en-GB')
+
+        const relativeUrl = getPathWithLocale('en-GB', buildUrl, {location})
+        expect(relativeUrl).toBe(`/`)
+    })
+})
+
+describe('createUrlTemplate tests', () => {
+    const defaultSite = mockConfig.app.sites[0]
+    const defaultAlias = mockConfig.app.siteAliases[defaultSite.id]
+    const defaultSiteMock = {...defaultSite, alias: defaultAlias}
+
+    const nonDefaultSite = mockConfig.app.sites[1]
+    const nonDefaultAlias = mockConfig.app.siteAliases[nonDefaultSite.id]
+    const nonDefaultSiteMock = {...nonDefaultSite, alias: nonDefaultAlias}
+
+    const configValues = ['path', 'query_param', 'none']
+
+    let cases = []
+    for (let i = 0; i < configValues.length; i++) {
+        for (let j = 0; j < configValues.length; j++) {
+            for (let showDefaultsValues = 0; showDefaultsValues < 2; showDefaultsValues++) {
+                if (showDefaultsValues === 0) {
+                    cases.push({
+                        urlConfig: {
+                            locale: configValues[i],
+                            site: configValues[j],
+                            showDefaults: true
+                        },
+                        site: defaultSiteMock,
+                        locale: {id: 'en-GB'}
+                    })
+                } else {
+                    for (let isDefaultSite = 0; isDefaultSite < 2; isDefaultSite++) {
+                        for (let isDefaultLocale = 0; isDefaultLocale < 2; isDefaultLocale++) {
+                            if (isDefaultSite === 0) {
+                                cases.push({
+                                    urlConfig: {
+                                        locale: configValues[i],
+                                        site: configValues[j],
+                                        showDefaults: false
+                                    },
+                                    site: defaultSiteMock,
+                                    locale:
+                                        isDefaultLocale === 0
+                                            ? {id: 'en-GB'}
+                                            : {id: 'fr-FR', alias: 'fr'}
+                                })
+                            } else {
+                                cases.push({
+                                    urlConfig: {
+                                        locale: configValues[i],
+                                        site: configValues[j],
+                                        showDefaults: false
+                                    },
+                                    site: nonDefaultSiteMock,
+                                    locale:
+                                        isDefaultLocale === 0
+                                            ? {id: 'en-US'}
+                                            : {id: 'fr-FR', alias: 'fr'}
+                                })
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+
+    const paths = ['/testpath', '/']
+    const expectedResults = (path) => {
+        return path !== '/'
+            ? [
+                  `/uk/en-GB${path}`,
+                  `${path}`,
+                  `/fr${path}`,
+                  `/us${path}`,
+                  `/us/fr${path}`,
+                  `/en-GB${path}?site=uk`,
+                  `${path}`,
+                  `/fr${path}`,
+                  `${path}?site=us`,
+                  `/fr${path}?site=us`,
+                  `/en-GB${path}`,
+                  `${path}`,
+                  `/fr${path}`,
+                  `${path}`,
+                  `/fr${path}`,
+                  `/uk${path}?locale=en-GB`,
+                  `${path}`,
+                  `${path}?locale=fr`,
+                  `/us${path}`,
+                  `/us${path}?locale=fr`,
+                  `${path}?site=uk&locale=en-GB`,
+                  `${path}`,
+                  `${path}?locale=fr`,
+                  `${path}?site=us`,
+                  `${path}?site=us&locale=fr`,
+                  `${path}?locale=en-GB`,
+                  `${path}`,
+                  `${path}?locale=fr`,
+                  `${path}`,
+                  `${path}?locale=fr`,
+                  `/uk${path}`,
+                  `${path}`,
+                  `${path}`,
+                  `/us${path}`,
+                  `/us${path}`,
+                  `${path}?site=uk`,
+                  `${path}`,
+                  `${path}`,
+                  `${path}?site=us`,
+                  `${path}?site=us`,
+                  `${path}`,
+                  `${path}`,
+                  `${path}`,
+                  `${path}`,
+                  `${path}`
+              ]
+            : [
+                  `${path}`,
+                  `${path}`,
+                  `/fr${path}`,
+                  `/us${path}`,
+                  `/us/fr${path}`,
+                  `${path}`,
+                  `${path}`,
+                  `/fr${path}`,
+                  `${path}?site=us`,
+                  `/fr${path}?site=us`,
+                  `${path}`,
+                  `${path}`,
+                  `/fr${path}`,
+                  `${path}`,
+                  `/fr${path}`,
+                  `${path}`,
+                  `${path}`,
+                  `${path}?locale=fr`,
+                  `/us${path}`,
+                  `/us${path}?locale=fr`,
+                  `${path}`,
+                  `${path}`,
+                  `${path}?locale=fr`,
+                  `${path}?site=us`,
+                  `${path}?site=us&locale=fr`,
+                  `${path}`,
+                  `${path}`,
+                  `${path}?locale=fr`,
+                  `${path}`,
+                  `${path}?locale=fr`,
+                  `${path}`,
+                  `${path}`,
+                  `${path}`,
+                  `/us${path}`,
+                  `/us${path}`,
+                  `${path}`,
+                  `${path}`,
+                  `${path}`,
+                  `${path}?site=us`,
+                  `${path}?site=us`,
+                  `${path}`,
+                  `${path}`,
+                  `${path}`,
+                  `${path}`,
+                  `${path}`
+              ]
+    }
+    paths.forEach((path) => {
+        cases.forEach(({urlConfig, site, locale}, index) => {
+            test(`URL template path:${path}, site:${site.alias}, locale.id:${locale.id}${
+                locale?.alias ? `, locale.alias:${locale.alias}` : ''
+            } and urlConfig:${JSON.stringify(urlConfig)}`, () => {
+                const buildUrl = createUrlTemplate(
+                    {url: urlConfig},
+                    site.id,
+                    locale?.alias || locale?.id
+                )
+                const resultUrl = buildUrl(
+                    path,
+                    mockConfig.app.siteAliases[site.id],
+                    locale?.alias || locale?.id
+                )
+
+                expect(resultUrl).toEqual(expectedResults(path)[index])
+            })
+        })
+    })
+})
+
+describe('rebuildPathWithParams test', () => {
+    test('returns updated url', () => {
+        const url = '/en/product/25501032M?color=black&size=M'
+        const updatedUrl = rebuildPathWithParams(url, {pid: undefined})
+        expect(updatedUrl).toBe('/en/product/25501032M?color=black&size=M')
+    })
+})
+
+describe('removeQueryParamsFromPath test', () => {
+    test('returns updated url', () => {
+        const url = '/en/product/25501032M?color=black&size=M&something=123'
+        const updatedUrl = removeQueryParamsFromPath(url, ['color', 'size'])
+        expect(updatedUrl).toBe('/en/product/25501032M?something=123')
+    })
+})
+
+describe('absoluteUrl', function () {
+    test('return expected when path is a relative url', () => {
+        const url = absoluteUrl('/uk/en/women/dresses')
+        expect(url).toBe('https://www.example.com/uk/en/women/dresses')
+    })
+
+    test('return expected when path is an absolute url', () => {
+        const url = absoluteUrl('https://www.example.com/uk/en/women/dresses')
+        expect(url).toBe('https://www.example.com/uk/en/women/dresses')
+    })
+})
+
+describe('removeSiteLocaleFromPath', function () {
+    test('return path without site alias and locale', () => {
+        const pathName = removeSiteLocaleFromPath('/uk/en-GB/account/wishlist')
+        expect(pathName).toBe('/account/wishlist')
+    })
+
+    test('return path without site alias if they appear multiple times', () => {
+        const pathName = removeSiteLocaleFromPath('/uk/en-GB/uk/en-GB/account/wishlist')
+        expect(pathName).toBe('/account/wishlist')
+    })
+
+    test('return expected path name when no locale or site alias appear', () => {
+        const pathName = removeSiteLocaleFromPath('/account/wishlist')
+        expect(pathName).toBe('/account/wishlist')
+    })
+
+    test('return empty string when no path name is passed', () => {
+        const pathName = removeSiteLocaleFromPath()
+        expect(pathName).toBe('')
+    })
+})

package/app/utils/utils.js

@@ -0,0 +1,201 @@
+/*
+ * 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
+ */
+
+/**
+ * Call requestIdleCallback in supported browsers.
+ *
+ * https://developers.google.com/web/updates/2015/08/using-requestidlecallback
+ * http://caniuse.com/#feat=requestidlecallback
+ */
+export const requestIdleCallback = (fn) => {
+    if ('requestIdleCallback' in window) {
+        return window.requestIdleCallback(fn)
+    } else {
+        return setTimeout(() => fn(), 1)
+    }
+}
+
+export const watchOnlineStatus = (callback, win = window) => {
+    const off = () => callback(false)
+    const on = () => callback(true)
+    win.addEventListener('offline', off)
+    win.addEventListener('online', on)
+    const unsubscribe = () => {
+        win.removeEventListener('offline', off)
+        win.removeEventListener('online', on)
+    }
+    return unsubscribe
+}
+
+/**
+ * Performs a shallow comparison on two objects
+ * @param {Object} a
+ * @param {Object} b
+ * @returns {boolean}
+ */
+export const shallowEquals = (a, b) => {
+    for (let key in a) {
+        if (!(key in b) || a[key] !== b[key]) {
+            return false
+        }
+    }
+    for (let key in b) {
+        if (!(key in a) || a[key] !== b[key]) {
+            return false
+        }
+    }
+    return true
+}
+
+/**
+ * No operation function. You can use this
+ * empty function when you wish to pass
+ * around a function that will do nothing.
+ * Usually used as default for event handlers.
+ */
+export const noop = () => {}
+
+/**
+ * Flattens a tree data structure into an array.
+ * @param {*} node
+ * @returns
+ */
+export const flatten = (node, key = 'children') => {
+    const children = (node[key] || []).reduce((a, b) => {
+        return Array.isArray(b[key]) && !!b[key].length
+            ? {...a, ...flatten(b, key)}
+            : {...a, [b.id]: b}
+    }, {})
+
+    return {
+        [node.id]: node,
+        ...children
+    }
+}
+
+/**
+ * Check the current execution environment
+ * is client side or server side
+ * @returns Boolean
+ */
+export const isServer = typeof window === 'undefined'
+
+/**
+ * retrieves an item from session storage
+ * @param {string} key
+ * @returns JSON | undefined
+ */
+export const getSessionJSONItem = (key) => {
+    if (isServer) {
+        return undefined
+    }
+    const item = window.sessionStorage.getItem(key)
+    if (item) {
+        return JSON.parse(item)
+    } else {
+        return undefined
+    }
+}
+/**
+ * sets an item in session storage
+ * @param {string} key
+ * @param {string} value
+ */
+export const setSessionJSONItem = (key, value) => {
+    window.sessionStorage.setItem(key, JSON.stringify(value))
+}
+
+/**
+ * clears an item in session storage
+ * @param {string} key
+ */
+export const clearSessionJSONItem = (key) => {
+    window.sessionStorage.removeItem(key)
+}
+
+/**
+ * escapes special regex characters
+ * @param {string} str
+ * @returns escaped string
+ */
+export const escapeRegexChars = (str) => str.replace(/[-[\]{}()*+?.,\\^$|#\s]/g, '\\$&')
+
+/**
+ * bolds a substring of a string by adding <b> tags
+ * @param {string} str
+ * @param {string} substr
+ * @returns stringified HTML Node
+ */
+export const boldString = (str, substr) => {
+    return str.replace(RegExp(escapeRegexChars(substr.trim()), 'gi'), '<b>$&</b>')
+}
+
+/**
+ * Capitalizes the words in a string
+ * @param {string} text
+ * @returns capitalized text
+ */
+export const capitalize = (text) => {
+    return text
+        .toLowerCase()
+        .split(' ')
+        .map((s) => s.charAt(0).toUpperCase() + s.substring(1))
+        .join(' ')
+}
+
+const safeToCamel = (str) => {
+    if (str.startsWith('_') || str.startsWith('c_')) {
+        return str
+    }
+    return str.replace(/([-_][a-z])/gi, ($1) => {
+        return $1[1].toUpperCase()
+    })
+}
+
+const isPlainObject = (obj) => {
+    return obj === Object(obj) && !Array.isArray(obj) && typeof obj !== 'function'
+}
+
+export const keysToCamel = (obj) => {
+    if (isPlainObject(obj)) {
+        const n = {}
+
+        Object.keys(obj).forEach((k) => {
+            n[safeToCamel(k)] = keysToCamel(obj[k])
+        })
+
+        return n
+    } else if (Array.isArray(obj)) {
+        return obj.map(keysToCamel)
+    }
+
+    return obj
+}
+
+/**
+ * Merge two arrays (arr1 and arr2) into one array
+ * and merge the matched items (objects with the same id)
+ * into one object. There is an assumption where arr2 is
+ * always a subset of arr1.
+ *
+ * @param arr1 - array of objects
+ * @param arr2
+ * @return {Array}
+ */
+export const mergeMatchedItems = (arr1 = [], arr2 = []) => {
+    const merged = arr1.map((item) => {
+        const match = arr2.find((item2) => item2.id === item.id)
+        return match ? {...item, ...match} : item
+    })
+    return merged
+}
+
+/**
+ * This util func determines if the app is finished hydration
+ * @return {boolean}
+ */
+export const isHydrated = () => typeof window !== 'undefined' && !window.__HYDRATING__