fix(retail-react-app): recent searches (#969)

+ Add missing `return` to recent searches filter method + Add test cases for recent search storage Co-authored-by: Vincent Marta <[email protected]> Co-authored-by: vcua-mobify <[email protected]>
SalesforceCommerceCloud · Feb 9, 2023 · aa48ea8 · aa48ea8
1 parent 5e24613
commit aa48ea8
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 18 deletions.
diff --git a/packages/template-retail-react-app/app/components/search/index.jsx b/packages/template-retail-react-app/app/components/search/index.jsx
@@ -105,7 +105,7 @@ const Search = (props) => {
 
         // Check if term is already in the saved searches
         searches = searches.filter((savedSearchTerm) => {
-            searchText.toLowerCase() !== savedSearchTerm.toLowerCase()
+            return searchText.toLowerCase() !== savedSearchTerm.toLowerCase()
         })
 
         // Create a new array consisting of the search text and up to 4 other resent searches.

diff --git a/packages/template-retail-react-app/app/components/search/index.test.js b/packages/template-retail-react-app/app/components/search/index.test.js
@@ -7,15 +7,17 @@
 import React from 'react'
 import {renderWithProviders, createPathWithDefaults} from '../../utils/test-utils'
 import user from '@testing-library/user-event'
-import {screen, waitFor} from '@testing-library/react'
+import {screen, waitFor, within} from '@testing-library/react'
 import SearchInput from './index'
 import Suggestions from './partials/suggestions'
-import {noop} from '../../utils/utils'
+import {clearSessionJSONItem, getSessionJSONItem, setSessionJSONItem, noop} from '../../utils/utils'
+import {RECENT_SEARCH_KEY, RECENT_SEARCH_LIMIT} from '../../constants'
 import mockSearchResults from '../../commerce-api/mocks/searchResults'
 import mockConfig from '../../../config/mocks/default'
 import {rest} from 'msw'
 
 beforeEach(() => {
+    clearSessionJSONItem(RECENT_SEARCH_KEY)
     jest.resetModules()
     global.server.use(
         rest.get('*/search-suggestions', (req, res, ctx) => {
@@ -30,15 +32,6 @@ test('renders SearchInput', () => {
     expect(searchInput).toBeInTheDocument()
 })
 
-test('renders Popover if recent searches populated', async () => {
-    renderWithProviders(<SearchInput />)
-    const searchInput = document.querySelector('input[type="search"]')
-    await user.type(searchInput, 'Dresses')
-    expect(await screen.findByTestId('sf-suggestion')).toBeInTheDocument()
-    const countOfSuggestions = await screen.findAllByText('Dresses')
-    expect(countOfSuggestions.length).toEqual(2)
-})
-
 test('changes url when enter is pressed', async () => {
     renderWithProviders(<SearchInput />, {
         wrapperProps: {siteAlias: 'uk', appConfig: mockConfig.app}
@@ -50,29 +43,52 @@ test('changes url when enter is pressed', async () => {
 })
 
 test('shows previously searched items when focused', async () => {
+    setSessionJSONItem(RECENT_SEARCH_KEY, ['Dresses', 'Suits', 'Tops'])
     renderWithProviders(<SearchInput />)
     const searchInput = document.querySelector('input[type="search"]')
     user.clear(searchInput)
     await searchInput.focus()
-    const countOfSuggestions = await screen.findAllByText('Recent Searches')
-    expect(countOfSuggestions.length).toEqual(2)
+    const suggestionPopoverEl = await screen.findByTestId('sf-suggestion-popover')
+    const recentSearchesEl = await within(suggestionPopoverEl).findByTestId('sf-suggestion-recent')
+    expect(recentSearchesEl).toBeInTheDocument()
+    expect(
+        document.querySelectorAll('[data-testid=sf-suggestion-popover] button[name=recent-search]')
+    ).toHaveLength(3)
+})
+
+test('saves recent searches on submit', async () => {
+    setSessionJSONItem(RECENT_SEARCH_KEY, ['Dresses', 'Suits', 'Tops'])
+    renderWithProviders(<SearchInput />)
+    const searchInput = document.querySelector('input[type="search"]')
+    await user.type(searchInput, 'Gloves{enter}')
+    expect(getSessionJSONItem(RECENT_SEARCH_KEY)).toHaveLength(4)
+})
+
+test('limits number of saved recent searches', async () => {
+    setSessionJSONItem(RECENT_SEARCH_KEY, ['Dresses', 'Suits', 'Tops', 'Gloves', 'Bracelets'])
+    renderWithProviders(<SearchInput />)
+    const searchInput = document.querySelector('input[type="search"]')
+    await user.type(searchInput, 'Ties{enter}')
+    expect(getSessionJSONItem(RECENT_SEARCH_KEY)).toHaveLength(RECENT_SEARCH_LIMIT)
 })
 
 test('suggestions render when there are some', async () => {
     renderWithProviders(<SearchInput />)
     const searchInput = document.querySelector('input[type="search"]')
     await user.type(searchInput, 'Dress')
-    const countOfSuggestions = await screen.findAllByText('Dress')
-    expect(countOfSuggestions.length).toEqual(2)
+    const suggestionPopoverEl = await screen.findByTestId('sf-suggestion-popover')
+    const suggestionsEl = await within(suggestionPopoverEl).findByTestId('sf-suggestion')
+    expect(suggestionsEl.querySelector('button').textContent).toBe('Dresses')
 })
 
-test('clicking clear searches clears searches', async () => {
+test('clicking clear searches clears recent searches', async () => {
+    setSessionJSONItem(RECENT_SEARCH_KEY, ['Dresses', 'Suits', 'Tops'])
     renderWithProviders(<SearchInput />)
     const searchInput = document.querySelector('input[type="search"]')
     await searchInput.focus()
     const clearSearch = document.getElementById('clear-search')
     await user.click(clearSearch)
-    expect(await screen.findByTestId('sf-suggestion-popover')).toBeInTheDocument()
+    expect(getSessionJSONItem(RECENT_SEARCH_KEY)).not.toBeDefined()
 })
 
 test('passing undefined to Suggestions returns undefined', async () => {