Filter link on search displays results (#742)

* fix navigate url on filter link on search * added test for filter link, added search route * fixed test errors * use !searchquery for consistency Co-authored-by: Adam Raya <[email protected]> * add search path to existing route * added searchQuery to test * tests pass for generated project * fix mock for test util function * fix mock config * fix mock config * fix mock config Co-authored-by: Adam Raya <[email protected]> Co-authored-by: Alex Vuong <[email protected]>
SalesforceCommerceCloud · Oct 4, 2022 · 94aa73b · 94aa73b
1 parent eb0c06c
commit 94aa73b
Show file tree

Hide file tree

Showing 4 changed files with 75 additions and 12 deletions.
diff --git a/packages/template-retail-react-app/app/pages/product-list/index.jsx b/packages/template-retail-react-app/app/pages/product-list/index.jsx
@@ -229,7 +229,11 @@ const ProductList = (props) => {
             }
         }
 
-        navigate(`/category/${params.categoryId}?${stringifySearchParams(searchParamsCopy)}`)
+        if (!searchQuery) {
+            navigate(`/category/${params.categoryId}?${stringifySearchParams(searchParamsCopy)}`)
+        } else {
+            navigate(`/search?${stringifySearchParams(searchParamsCopy)}`)
+        }
     }
 
     // Clears all filters

diff --git a/packages/template-retail-react-app/app/pages/product-list/index.test.js b/packages/template-retail-react-app/app/pages/product-list/index.test.js
@@ -69,7 +69,10 @@ const MockedComponent = ({isLoading, isLoggedIn = false, searchQuery}) => {
     return (
         <Switch>
             <Route
-                path={createPathWithDefaults('/category/:categoryId')}
+                path={[
+                    createPathWithDefaults('/category/:categoryId'),
+                    createPathWithDefaults('/search')
+                ]}
                 render={(props) => (
                     <div>
                         <div>{customer.customerId}</div>
@@ -108,8 +111,6 @@ const server = setupMockServer(
 )
 
 beforeEach(() => {
-    window.history.pushState({}, 'ProductList', '/uk/en-GB/category/mens-clothing-jackets')
-
     jest.resetModules()
     server.listen({onUnhandledRequest: 'error'})
     useWishlist.mockReturnValue({
@@ -128,37 +129,44 @@ afterEach(() => {
 afterAll(() => server.close())
 
 test('should render product list page', async () => {
+    window.history.pushState({}, 'ProductList', '/uk/en-GB/category/mens-clothing-jackets')
     renderWithProviders(<MockedComponent />)
     expect(await screen.findByTestId('sf-product-list-page')).toBeInTheDocument()
 })
 
 test('should render sort option list page', async () => {
+    window.history.pushState({}, 'ProductList', '/uk/en-GB/category/mens-clothing-jackets')
     renderWithProviders(<MockedComponent />)
     expect(await screen.findByTestId('sf-product-list-sort')).toBeInTheDocument()
 })
 
 test('should render skeleton', async () => {
+    window.history.pushState({}, 'ProductList', '/uk/en-GB/category/mens-clothing-jackets')
     renderWithProviders(<MockedComponent isLoading />)
     expect(screen.getAllByTestId('sf-product-tile-skeleton').length).toEqual(25)
 })
 
 test('should render empty list page', async () => {
+    window.history.pushState({}, 'ProductList', '/uk/en-GB/category/mens-clothing-jackets')
     renderWithProviders(<MockedEmptyPage />)
     expect(await screen.findByTestId('sf-product-empty-list-page')).toBeInTheDocument()
 })
 
 test('pagination is rendered', async () => {
+    window.history.pushState({}, 'ProductList', '/uk/en-GB/category/mens-clothing-jackets')
     renderWithProviders(<MockedComponent />)
     expect(await screen.findByTestId('sf-pagination')).toBeInTheDocument()
 })
 
 test('should display Selected refinements as there are some in the response', async () => {
+    window.history.pushState({}, 'ProductList', '/uk/en-GB/category/mens-clothing-jackets')
     renderWithProviders(<MockedComponent />)
     const countOfRefinements = await screen.findAllByText('Black')
     expect(countOfRefinements.length).toEqual(2)
 })
 
 test('show login modal when an unauthenticated user tries to add an item to wishlist', async () => {
+    window.history.pushState({}, 'ProductList', '/uk/en-GB/category/mens-clothing-jackets')
     renderWithProviders(<MockedComponent />)
     const wishlistButton = screen.getAllByLabelText('Wishlist')
     expect(wishlistButton.length).toBe(25)
@@ -168,6 +176,7 @@ test('show login modal when an unauthenticated user tries to add an item to wish
 })
 
 test('clicking a filter will change url', async () => {
+    window.history.pushState({}, 'ProductList', '/uk/en-GB/category/mens-clothing-jackets')
     renderWithProviders(<MockedComponent />, {
         wrapperProps: {siteAlias: 'uk', locale: {id: 'en-GB'}}
     })
@@ -183,7 +192,7 @@ test('click on filter All should clear out all the filter in search params', asy
     window.history.pushState(
         {},
         'ProductList',
-        'uk/en-GB/category/mens-clothing-jackets?limit=25&refine=c_refinementColor%3DBeige&sort=best-matches'
+        '/uk/en-GB/category/mens-clothing-jackets?limit=25&refine=c_refinementColor%3DBeige&sort=best-matches'
     )
     renderWithProviders(<MockedComponent />, {
         wrapperProps: {siteAlias: 'uk', locale: {id: 'en-GB'}}
@@ -194,7 +203,22 @@ test('click on filter All should clear out all the filter in search params', asy
 })
 
 test('should display Search Results for when searching ', async () => {
-    renderWithProviders(<MockedComponent />)
-    window.history.pushState({}, 'ProductList', 'uk/en-GB/search?q=test')
+    window.history.pushState({}, 'ProductList', '/uk/en-GB/search?q=test')
+    renderWithProviders(<MockedComponent searchQuery="test" />, {
+        wrapperProps: {siteAlias: 'uk', locale: {id: 'en-GB'}}
+    })
     expect(await screen.findByTestId('sf-product-list-page')).toBeInTheDocument()
 })
+
+test('clicking a filter on search result will change url', async () => {
+    window.history.pushState({}, 'ProductList', '/uk/en-GB/search?q=dress')
+    renderWithProviders(<MockedComponent searchQuery="dress" />, {
+        wrapperProps: {siteAlias: 'uk', locale: {id: 'en-GB'}}
+    })
+    user.click(screen.getByText(/Beige/i))
+    await waitFor(() =>
+        expect(window.location.search).toEqual(
+            '?limit=25&q=dress&refine=c_refinementColor%3DBeige&sort=best-matches'
+        )
+    )
+})
diff --git a/packages/template-retail-react-app/app/utils/test-utils.js b/packages/template-retail-react-app/app/utils/test-utils.js
@@ -21,7 +21,6 @@ import {
     CustomerProductListsProvider
 } from '../commerce-api/contexts'
 import {AddToCartModalContext} from '../hooks/use-add-to-cart-modal'
-import {app as appDefaultConfig} from '../../config/default'
 import {IntlProvider} from 'react-intl'
 import {
     mockCategories as initialMockCategories,
@@ -62,8 +61,8 @@ export const renderWithRouter = (node) => renderWithReactIntl(<Router>{node}</Ro
 
 export const renderWithRouterAndCommerceAPI = (node) => {
     const api = new CommerceAPI({
-        ...appDefaultConfig.commerceAPI,
-        einsteinConfig: appDefaultConfig.einsteinAPI,
+        ...mockConfig.app.commerceAPI,
+        einsteinConfig: mockConfig.app.einsteinAPI,
         proxy: undefined
     })
     return renderWithReactIntl(
@@ -85,7 +84,7 @@ export const TestProviders = ({
     initialCategories = initialMockCategories,
     locale = {id: DEFAULT_LOCALE},
     messages = fallbackMessages,
-    appConfig = appDefaultConfig,
+    appConfig = mockConfig.app,
     siteAlias = DEFAULT_SITE
 }) => {
     const mounted = useRef()

diff --git a/packages/template-retail-react-app/config/mocks/default.js b/packages/template-retail-react-app/config/mocks/default.js
@@ -71,7 +71,7 @@ module.exports = {
                 clientId: 'c9c45bfd-0ed3-4aa2-9971-40f88962b836',
                 organizationId: 'f_ecom_zzrf_001',
                 shortCode: '8o7m175y',
-                siteId: 'RefArchGlobal'
+                siteId: 'site-1'
             }
         },
         einsteinAPI: {
@@ -80,5 +80,41 @@ module.exports = {
             // This differs from the siteId in commerceAPIConfig for testing purposes
             siteId: 'aaij-MobileFirst'
         }
+    },
+    // 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: '14.x',
+        proxyConfigs: [
+            {
+                host: 'kv7kzm78.api.commercecloud.salesforce.com',
+                path: 'api'
+            },
+            {
+                host: 'zzrf-001.sandbox.us03.dx.commercecloud.salesforce.com',
+                path: 'ocapi'
+            },
+            {
+                host: 'api.cquotient.com',
+                path: 'einstein'
+            }
+        ]
     }
 }