Merge pull request #599 from RockefellerArchiveCenter/development

Throw explicit error when no search query is present
RockefellerArchiveCenter · May 3, 2023 · bddf84b · bddf84b
2 parents 1310250 + 5eb7e12
commit bddf84b
Show file tree

Hide file tree

Showing 3 changed files with 46 additions and 25 deletions.
diff --git a/src/components/PageSearch/index.js b/src/components/PageSearch/index.js
@@ -87,7 +87,7 @@ const PageSearch = () => {
           setSuggestions(suggestions)
         })
         .catch(err => setBackendError(err))
-    }
+      }
   }, [params])
 
   /** Executes search and sets results in state */
@@ -104,6 +104,8 @@ const PageSearch = () => {
         })
         .catch(err => setBackendError(err))
         .then(res => setInProgress(false));
+    } else {
+      setInProgress(false)
     }
   }, [params])
 
@@ -186,13 +188,14 @@ const PageSearch = () => {
         </div>
         <div className='results'>
           <h1 className={classnames('results__title', { 'loading-dots': inProgress })}>{inProgress ? "Searching" :
-            (resultsCount ?
-              (`Search Results ${params.query && `for “${params.query.replace(/"([^"]+(?="))"/g, '$1')}”`}`) :
-              (`Sorry, there are no search results ${params.query && `for “${params.query.replace(/"([^"]+(?="))"/g, '$1')}”`}`))
+            (params.query ? (resultsCount ?
+              (`Search Results ${`for “${params.query.replace(/"([^"]+(?="))"/g, '$1')}”`}`) :
+              (`Sorry, there are no search results ${`for “${params.query.replace(/"([^"]+(?="))"/g, '$1')}”`}`)): 
+              'No search query entered')
           }
           </h1>
           {!resultsCount && !inProgress ?
-            (<SearchNotFound suggestions={suggestions}/>) :
+            (<SearchNotFound suggestions={suggestions} query={params.query}/>) :
             <>
               <div className='results__header'>
                 <div className='results__summary'>

diff --git a/src/components/SearchNotFound/__tests__/SearchNotFound.test.js b/src/components/SearchNotFound/__tests__/SearchNotFound.test.js
@@ -16,12 +16,19 @@ afterEach(() => {
 })
 
 const suggestions = ["foo", "bar"]
+const query = "bananas"
 
-it('renders props correctly', () => {
-  act(() => {render(<SearchNotFound suggestions={suggestions} />, container)})
+it('renders suggestions correctly', () => {
+  act(() => {render(<SearchNotFound suggestions={suggestions} query={query} />, container)})
   const list = document.querySelector('.suggestions')
   expect(list.children.length).toBe(suggestions.length)
   suggestions.map(s => {
     expect(list.textContent).toContain(s)
   })
 })
+
+it('renders missing query correctly', () => {
+  act(() => {render(<SearchNotFound suggestions={suggestions} query={''} />, container)})
+  const text = document.querySelector('.results__not-found--text')
+  expect(text.textContent).toContain('Please add a word or phrase to search for.')
+})
diff --git a/src/components/SearchNotFound/index.js b/src/components/SearchNotFound/index.js
@@ -8,27 +8,38 @@ const SuggestionItem = ({text}) => (
   </li>
 )
 
-const SearchNotFound = ({suggestions}) => {
+const SearchNotFound = ({suggestions, query}) => {
 
   const suggestionList = suggestions && suggestions.map((item, idx) => <SuggestionItem key={idx} text={item} />)
 
-  return (
-  <div className='results__not-found'>
-    <p className="results__not-found--text">Have you tried doing the following:</p>
-    <ul className="results__not-found--text">
-      <li>Check for spelling errors or typos</li>
-      <li>Use fewer keywords</li>
-      <li>Clear search filter options</li>
-    </ul>
-    {suggestions.length ? (
-      <>
-        <p className="results__not-found--text">Here are some suggested search terms:</p>
-        <ul className="suggestions unstyled">
-          {suggestionList}
+  if (query) {
+    return (
+      <div className='results__not-found'>
+        <p className="results__not-found--text">Have you tried doing the following:</p>
+        <ul className="results__not-found--text">
+          <li>Check for spelling errors or typos</li>
+          <li>Use fewer keywords</li>
+          <li>Clear search filter options</li>
         </ul>
-      </>
-    ) : null}
-  </div>
-)}
+        {suggestions.length ? (
+          <>
+            <p className="results__not-found--text">Here are some suggested search terms:</p>
+            <ul className="suggestions unstyled">
+              {suggestionList}
+            </ul>
+          </>
+        ) : null}
+      </div>
+    )
+  } else {
+    return (
+      <div className='results__not-found'>
+        <p className="results__not-found--text">Please add a word or phrase to search for.</p>
+      </div>
+    )
+  }
+
+
+}
 
 export default SearchNotFound