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

package/app/hooks/use-einstein.test.js

@@ -0,0 +1,224 @@
+/*
+ * 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 {EinsteinAPI} from '@salesforce/retail-react-app/app/hooks/use-einstein'
+import {
+    mockAddToCartProduct,
+    mockProduct,
+    mockCategory,
+    mockSearchResults,
+    mockBasket,
+    mockRecommenderDetails
+} from '@salesforce/retail-react-app/app/hooks/einstein-mock-data'
+import fetchMock from 'jest-fetch-mock'
+
+const einsteinApi = new EinsteinAPI({
+    host: `http://localhost/test-path`,
+    einsteinId: 'test-id',
+    siteId: 'test-site-id',
+    cookieId: 'test-usid'
+})
+
+const fetchOriginal = global.fetch
+
+beforeAll(() => {
+    global.fetch = fetchMock
+    global.fetch.mockResponse(JSON.stringify({}))
+})
+
+afterAll(() => {
+    global.fetch = fetchOriginal
+})
+
+describe('EinsteinAPI', () => {
+    test('viewProduct sends expected api request', async () => {
+        await einsteinApi.sendViewProduct(mockProduct)
+
+        expect(fetch).toHaveBeenCalledWith(
+            'http://localhost/test-path/v3/activities/test-site-id/viewProduct',
+            {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                    'x-cq-client-id': 'test-id'
+                },
+                body: '{"product":{"id":"56736828M","sku":"56736828M","altId":"","altIdType":""},"cookieId":"test-usid","realm":"test","instanceType":"sbx"}'
+            }
+        )
+    })
+
+    test('viewSearch sends expected api request', async () => {
+        const searchTerm = 'tie'
+        await einsteinApi.sendViewSearch(searchTerm, mockSearchResults)
+        expect(fetch).toHaveBeenCalledWith(
+            'http://localhost/test-path/v3/activities/test-site-id/viewSearch',
+            {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                    'x-cq-client-id': 'test-id'
+                },
+                body: '{"searchText":"tie","products":[{"id":"25752986M","sku":"25752986M","altId":"","altIdType":""},{"id":"25752235M","sku":"25752235M","altId":"","altIdType":""},{"id":"25752218M","sku":"25752218M","altId":"","altIdType":""},{"id":"25752981M","sku":"25752981M","altId":"","altIdType":""}],"showProducts":true,"cookieId":"test-usid","realm":"test","instanceType":"sbx"}'
+            }
+        )
+    })
+
+    test('viewCategory sends expected api request', async () => {
+        await einsteinApi.sendViewCategory(mockCategory, mockSearchResults)
+        expect(fetch).toHaveBeenCalledWith(
+            'http://localhost/test-path/v3/activities/test-site-id/viewCategory',
+            {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                    'x-cq-client-id': 'test-id'
+                },
+                body: '{"category":{"id":"mens-accessories-ties"},"products":[{"id":"25752986M","sku":"25752986M","altId":"","altIdType":""},{"id":"25752235M","sku":"25752235M","altId":"","altIdType":""},{"id":"25752218M","sku":"25752218M","altId":"","altIdType":""},{"id":"25752981M","sku":"25752981M","altId":"","altIdType":""}],"showProducts":true,"cookieId":"test-usid","realm":"test","instanceType":"sbx"}'
+            }
+        )
+    })
+
+    test('clickSearch sends expected api request', async () => {
+        const searchTerm = 'tie'
+        const clickedProduct = mockSearchResults.hits[0]
+        await einsteinApi.sendClickSearch(searchTerm, clickedProduct)
+        expect(fetch).toHaveBeenCalledWith(
+            'http://localhost/test-path/v3/activities/test-site-id/clickSearch',
+            {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                    'x-cq-client-id': 'test-id'
+                },
+                body: '{"searchText":"tie","product":{"id":"25752986M","sku":"25752986M","altId":"","altIdType":""},"cookieId":"test-usid","realm":"test","instanceType":"sbx"}'
+            }
+        )
+    })
+
+    test('clickCategory sends expected api request', async () => {
+        const clickedProduct = mockSearchResults.hits[0]
+        await einsteinApi.sendClickCategory(mockCategory, clickedProduct)
+        expect(fetch).toHaveBeenCalledWith(
+            'http://localhost/test-path/v3/activities/test-site-id/clickCategory',
+            {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                    'x-cq-client-id': 'test-id'
+                },
+                body: '{"category":{"id":"mens-accessories-ties"},"product":{"id":"25752986M","sku":"25752986M","altId":"","altIdType":""},"cookieId":"test-usid","realm":"test","instanceType":"sbx"}'
+            }
+        )
+    })
+
+    test('viewPage sends expected api request', async () => {
+        const path = '/'
+        await einsteinApi.sendViewPage(path)
+        expect(fetch).toHaveBeenCalledWith(
+            'http://localhost/test-path/v3/activities/test-site-id/viewPage',
+            {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                    'x-cq-client-id': 'test-id'
+                },
+                body: '{"currentLocation":"/","cookieId":"test-usid","realm":"test","instanceType":"sbx"}'
+            }
+        )
+    })
+
+    test('beginCheckout sends expected api request', async () => {
+        await einsteinApi.sendBeginCheckout(mockBasket)
+        expect(fetch).toHaveBeenCalledWith(
+            'http://localhost/test-path/v3/activities/test-site-id/beginCheckout',
+            {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                    'x-cq-client-id': 'test-id'
+                },
+                body: '{"products":[{"id":"682875719029M","sku":"","price":29.99,"quantity":1}],"amount":29.99,"cookieId":"test-usid","realm":"test","instanceType":"sbx"}'
+            }
+        )
+    })
+
+    test('checkouStep sends expected api request', async () => {
+        const checkoutStepName = 'CheckoutStep'
+        const checkoutStep = 0
+        await einsteinApi.sendCheckoutStep(checkoutStepName, checkoutStep, mockBasket)
+        expect(fetch).toHaveBeenCalledWith(
+            'http://localhost/test-path/v3/activities/test-site-id/checkoutStep',
+            {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                    'x-cq-client-id': 'test-id'
+                },
+                body: '{"stepName":"CheckoutStep","stepNumber":0,"basketId":"f6bbeee30fb93c2f94213f60f8","cookieId":"test-usid","realm":"test","instanceType":"sbx"}'
+            }
+        )
+    })
+
+    test('addToCart sends expected api request', async () => {
+        await einsteinApi.sendAddToCart([mockAddToCartProduct])
+        expect(fetch).toHaveBeenCalledWith(
+            'http://localhost/test-path/v3/activities/test-site-id/addToCart',
+            {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                    'x-cq-client-id': 'test-id'
+                },
+                body: '{"products":[{"id":"883360544021M","sku":"","price":155,"quantity":1}],"cookieId":"test-usid","realm":"test","instanceType":"sbx"}'
+            }
+        )
+    })
+
+    test('clickRecommendation sends expected api request', async () => {
+        await einsteinApi.sendClickReco(mockRecommenderDetails, mockProduct)
+        expect(fetch).toHaveBeenCalledWith(
+            'http://localhost/test-path/v3/activities/test-site-id/clickReco',
+            {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                    'x-cq-client-id': 'test-id'
+                },
+                body: '{"recommenderName":"testRecommender","__recoUUID":"883360544021M","product":{"id":"56736828M","sku":"56736828M","altId":"","altIdType":""},"cookieId":"test-usid","realm":"test","instanceType":"sbx"}'
+            }
+        )
+    })
+
+    test('viewRecommendation sends expected api request', async () => {
+        await einsteinApi.sendViewReco(mockRecommenderDetails, {id: 'test-reco'})
+        expect(fetch).toHaveBeenCalledWith(
+            'http://localhost/test-path/v3/activities/test-site-id/viewReco',
+            {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                    'x-cq-client-id': 'test-id'
+                },
+                body: '{"recommenderName":"testRecommender","__recoUUID":"883360544021M","products":{"id":"test-reco"},"cookieId":"test-usid","realm":"test","instanceType":"sbx"}'
+            }
+        )
+    })
+
+    test('getRecommenders send expected api request', async () => {
+        await einsteinApi.getRecommenders()
+
+        expect(fetch).toHaveBeenCalledWith(
+            'http://localhost/test-path/v3/personalization/recommenders/test-site-id',
+            {
+                method: 'GET',
+                headers: {
+                    'Content-Type': 'application/json',
+                    'x-cq-client-id': 'test-id'
+                }
+            }
+        )
+    })
+})

package/app/hooks/use-intersection-observer.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
+ */
+import {useState, useEffect} from 'react'
+
+/**
+ * Returns a boolean to indicate if an element is visible on the screen. Fall back to `true`
+ * if IntersectionObserver is not supported.
+ * https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver/IntersectionObserver
+ * @param {Object} ref - element ref
+ * @param {Object} options
+ * @param {Object} options.root - See IntersectionObserver options
+ * @param {string} options.rootMargin - See IntersectionObserver options
+ * @param {number|Array<number>} options.threshold - See IntersectionObserver options
+ * @param {boolean} options.useOnce - Detach the observer after the element appears.
+ * @returns {boolean}
+ */
+const useIntersectionObserver = (ref, options = {}) => {
+    const [isIntersecting, setIntersecting] = useState(false)
+
+    const {useOnce, ...ioOptions} = options
+
+    useEffect(() => {
+        if (!ref?.current) return
+
+        // Just set `isIntersecting` true if browser doesn't implement IntersectionObserver. If the use-case
+        // is critical and you need to support very old browsers, a polyfill will need to be added.
+        if (
+            !('IntersectionObserver' in window) ||
+            !('IntersectionObserverEntry' in window) ||
+            !('intersectionRatio' in window.IntersectionObserverEntry.prototype)
+        ) {
+            if (!isIntersecting) {
+                setIntersecting(true)
+            }
+
+            // We want to return early, but `useEffect` expects a function as the return value,
+            // so we just return a noop function.
+            return () => null
+        }
+
+        const observer = new IntersectionObserver(([entry]) => {
+            const onScreen = entry.isIntersecting
+            setIntersecting(onScreen)
+            if (useOnce && onScreen) {
+                observer.disconnect()
+            }
+        }, ioOptions)
+
+        observer.observe(ref?.current)
+
+        // Remove the observer as soon as the component is unmounted
+        return () => {
+            observer.disconnect()
+        }
+    }, [ref?.current])
+
+    return isIntersecting
+}
+
+export default useIntersectionObserver

package/app/hooks/use-limit-urls.js

@@ -0,0 +1,31 @@
+/*
+ * 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 {useMemo} from 'react'
+import {useLocation} from 'react-router-dom'
+
+// Constants
+import {DEFAULT_LIMIT_VALUES} from '@salesforce/retail-react-app/app/constants'
+
+// Utils
+import {buildUrlSet} from '@salesforce/retail-react-app/app/utils/url'
+
+/*
+ * Generate a memoized list of page size urls. Chaning the page size will reset
+ * the offset to zero to simplify things.
+ */
+export const useLimitUrls = () => {
+    const location = useLocation()
+
+    return useMemo(
+        () =>
+            buildUrlSet(`${location.pathname}${location.search}`, 'limit', DEFAULT_LIMIT_VALUES, {
+                offset: 0
+            }),
+        [location.search, location.pathname]
+    )
+}

package/app/hooks/use-limit-urls.test.js

@@ -0,0 +1,40 @@
+/*
+ * 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 React from 'react'
+import {Router} from 'react-router'
+
+import {render} from '@testing-library/react'
+import {createMemoryHistory} from 'history'
+import {useLimitUrls} from '@salesforce/retail-react-app/app/hooks/use-limit-urls'
+
+const MockComponent = () => {
+    const urls = useLimitUrls()
+
+    return (
+        <script data-testid="limits" type="application/json">
+            {JSON.stringify(urls)}
+        </script>
+    )
+}
+
+describe('The useLimitUrls', () => {
+    test('returns an array of urls, one values for each limit value.', () => {
+        const history = createMemoryHistory()
+        history.push('/test/path')
+
+        const wrapper = render(
+            <Router history={history}>
+                <MockComponent />
+            </Router>
+        )
+
+        expect(wrapper.getByTestId('limits').text).toBe(
+            '["/test/path?limit=25&offset=0","/test/path?limit=50&offset=0","/test/path?limit=100&offset=0"]'
+        )
+    })
+})

package/app/hooks/use-multi-site.js

@@ -0,0 +1,36 @@
+/*
+ * 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 {useCallback, useContext} from 'react'
+import {MultiSiteContext} from '@salesforce/retail-react-app/app/contexts'
+
+/**
+ * Custom React hook to get the function that returns usefule multi-site values, the site, the locale and
+ * the funtion used to build URLs following the App configuration.
+ * @returns {{site, locale, buildUrl: (function(*, *, *): *)}}
+ */
+const useMultiSite = () => {
+    const context = useContext(MultiSiteContext)
+    if (context === undefined) {
+        throw new Error('useMultiSite must be used within MultiSiteProvider')
+    }
+    const {buildUrl: originalFn, site, locale} = context
+
+    const buildUrl = useCallback(
+        (path, siteRef, localeRef) => {
+            return originalFn(
+                path,
+                siteRef ? siteRef : site?.alias || site?.id,
+                localeRef ? localeRef : locale?.alias || locale?.id
+            )
+        },
+        [originalFn, site, locale]
+    )
+    return {site, locale, buildUrl}
+}
+
+export default useMultiSite

package/app/hooks/use-multi-site.test.js

@@ -0,0 +1,53 @@
+/*
+ * 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 React from 'react'
+import {renderHook} from '@testing-library/react'
+import useMultiSite from '@salesforce/retail-react-app/app/hooks/use-multi-site'
+import {MultiSiteProvider} from '@salesforce/retail-react-app/app/contexts'
+import mockConfig from '@salesforce/retail-react-app/config/mocks/default'
+import {DEFAULT_LOCALE} from '@salesforce/retail-react-app/app/utils/test-utils'
+
+const wrapper = ({children}) => <MultiSiteProvider>{children}</MultiSiteProvider>
+
+let resultuseMultiSite = {}
+
+beforeEach(() => {
+    resultuseMultiSite = {}
+})
+
+const site = {
+    ...mockConfig.app.sites[0],
+    alias: 'uk'
+}
+
+const locale = DEFAULT_LOCALE
+
+const buildUrl = jest.fn().mockImplementation((href, site, locale) => {
+    return `${site ? `/${site}` : ''}${locale ? `/${locale}` : ''}${href}`
+})
+
+const mockResultuseMultiSite = {
+    site,
+    locale,
+    buildUrl
+}
+
+const mockUseContext = jest.fn().mockImplementation(() => mockResultuseMultiSite)
+
+React.useContext = mockUseContext
+describe('useMultiSite', () => {
+    it('should set initial values', () => {
+        expect(resultuseMultiSite).toMatchObject({})
+
+        const {result} = renderHook(() => useMultiSite(), {wrapper})
+
+        expect(mockUseContext).toHaveBeenCalled()
+        expect(result.current).toHaveProperty('site')
+        expect(result.current).toHaveProperty('locale')
+    })
+})

package/app/hooks/use-navigation.js

@@ -0,0 +1,37 @@
+/*
+ * Copyright (c) 2023, Salesforce, 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 {useCallback} from 'react'
+import {useHistory} from 'react-router'
+import useMultiSite from '@salesforce/retail-react-app/app/hooks/use-multi-site'
+import {removeSiteLocaleFromPath} from '@salesforce/retail-react-app/app/utils/url'
+
+/**
+ * A convenience hook for programmatic navigation uses history's `push` or `replace`. The proper locale
+ * is automatically prepended to the provided path. Additional args are passed through to `history`.
+ * @returns {function} - Returns a navigate function that passes args to history methods.
+ */
+const useNavigation = () => {
+    const history = useHistory()
+
+    const {site, locale: localeShortCode, buildUrl} = useMultiSite()
+
+    return useCallback(
+        /**
+         *
+         * @param {string} path - path to navigate to
+         * @param {('push'|'replace')} action - which history method to use
+         * @param  {...any} args - additional args passed to `.push` or `.replace`
+         */
+        (path, action = 'push', ...args) => {
+            const updatedHref = buildUrl(removeSiteLocaleFromPath(path))
+            history[action](path === '/' ? '/' : updatedHref, ...args)
+        },
+        [localeShortCode, site]
+    )
+}
+
+export default useNavigation

package/app/hooks/use-navigation.test.js

@@ -0,0 +1,109 @@
+/*
+ * 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 React from 'react'
+import userEvent from '@testing-library/user-event'
+import useNavigation from '@salesforce/retail-react-app/app/hooks/use-navigation'
+import mockConfig from '@salesforce/retail-react-app/config/mocks/default'
+import {renderWithProviders} from '@salesforce/retail-react-app/app/utils/test-utils'
+import {getConfig} from '@salesforce/pwa-kit-runtime/utils/ssr-config'
+
+jest.mock('@salesforce/pwa-kit-runtime/utils/ssr-config', () => {
+    return {
+        getConfig: jest.fn()
+    }
+})
+
+const mockHistoryPush = jest.fn()
+const mockHistoryReplace = jest.fn()
+
+jest.mock('react-router', () => {
+    const original = jest.requireActual('react-router')
+
+    return {
+        ...original,
+        useHistory: jest.fn().mockImplementation(() => {
+            return {
+                push: mockHistoryPush,
+                replace: mockHistoryReplace
+            }
+        })
+    }
+})
+
+afterEach(() => {
+    jest.resetModules()
+})
+
+const TestComponent = () => {
+    const navigate = useNavigation()
+
+    return (
+        <div>
+            <button data-testid="page1-link" onClick={() => navigate('/page1')} />
+            <button data-testid="page2-link" onClick={() => navigate('/page2', 'replace', {})} />
+            <button data-testid="page4-link" onClick={() => navigate('/')} />
+        </div>
+    )
+}
+
+test('prepends locale and site and calls history.push', async () => {
+    const user = userEvent.setup()
+
+    getConfig.mockImplementation(() => mockConfig)
+    const {getByTestId} = renderWithProviders(<TestComponent />, {
+        wrapperProps: {siteAlias: 'uk', appConfig: mockConfig.app}
+    })
+    await user.click(getByTestId('page1-link'))
+    expect(mockHistoryPush).toHaveBeenCalledWith('/uk/en-GB/page1')
+})
+
+test('append locale as path and site as query and calls history.push', async () => {
+    const user = userEvent.setup()
+
+    const newConfig = {
+        ...mockConfig,
+        app: {
+            ...mockConfig.app,
+            url: {
+                locale: 'path',
+                site: 'query_param',
+                showDefaults: true
+            }
+        }
+    }
+    getConfig.mockImplementation(() => newConfig)
+    const {getByTestId} = renderWithProviders(<TestComponent />, {
+        wrapperProps: {siteAlias: 'uk', appConfig: newConfig.app}
+    })
+    await user.click(getByTestId('page1-link'))
+    expect(mockHistoryPush).toHaveBeenCalledWith('/en-GB/page1?site=uk')
+})
+
+test('works for any history method and args', async () => {
+    const user = userEvent.setup()
+
+    getConfig.mockImplementation(() => mockConfig)
+
+    const {getByTestId} = renderWithProviders(<TestComponent />, {
+        wrapperProps: {siteAlias: 'uk', appConfig: mockConfig.app}
+    })
+
+    await user.click(getByTestId('page2-link'))
+    expect(mockHistoryReplace).toHaveBeenCalledWith('/uk/en-GB/page2', {})
+})
+
+test('if given the path to root or homepage, will not prepend the locale', async () => {
+    const user = userEvent.setup()
+
+    getConfig.mockImplementation(() => mockConfig)
+
+    const {getByTestId} = renderWithProviders(<TestComponent />, {
+        wrapperProps: {siteAlias: 'us', locale: 'en-US'}
+    })
+    await user.click(getByTestId('page4-link'))
+    expect(mockHistoryPush).toHaveBeenCalledWith('/')
+})

package/app/hooks/use-page-urls.js

@@ -0,0 +1,35 @@
+/*
+ * 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 {useMemo} from 'react'
+import {useLocation} from 'react-router-dom'
+
+// Utils
+import {buildUrlSet} from '@salesforce/retail-react-app/app/utils/url'
+
+// Hooks
+import {useSearchParams} from '@salesforce/retail-react-app/app/hooks/use-search-params'
+
+/*
+ * Generate a memoized list of page size urls. Chaning the page size will reset
+ * the offset to zero to simplify things.
+ */
+export const usePageUrls = ({total = 0, limit}) => {
+    const location = useLocation()
+    const [searchParams] = useSearchParams()
+    const _limit = limit || searchParams.limit
+
+    return useMemo(() => {
+        const pageCount = Math.ceil(total / _limit)
+
+        return buildUrlSet(
+            `${location.pathname}${location.search}`,
+            'offset',
+            new Array(pageCount).fill(0).map((_, index) => index * _limit)
+        )
+    }, [location.pathname, location.search, _limit, total])
+}

package/app/hooks/use-page-urls.test.js

@@ -0,0 +1,39 @@
+/*
+ * 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 React from 'react'
+import {Router} from 'react-router'
+
+import {render} from '@testing-library/react'
+import {createMemoryHistory} from 'history'
+import {usePageUrls} from '@salesforce/retail-react-app/app/hooks/use-page-urls'
+
+const MockComponent = () => {
+    const urls = usePageUrls({total: 100})
+
+    return (
+        <script data-testid="limits" type="application/json">
+            {JSON.stringify(urls)}
+        </script>
+    )
+}
+
+describe('The usePageUrls', () => {
+    test('returns an array of urls, one values for each page with the correct offset value.', () => {
+        const history = createMemoryHistory()
+        history.push('/test/path?limit=25')
+
+        const wrapper = render(
+            <Router history={history}>
+                <MockComponent />
+            </Router>
+        )
+
+        expect(wrapper.getByTestId('limits').text).toBe(
+            '["/test/path?limit=25&offset=0","/test/path?limit=25&offset=25","/test/path?limit=25&offset=50","/test/path?limit=25&offset=75"]'
+        )
+    })
+})