chore: Added CoursewareSearch hooks coverage

src/course-home/courseware-search/CoursewareResultsFilter.jsx

@@ -22,17 +22,21 @@ export const CoursewareSearchResultsFilter = ({ intl }) => {
 
   const { results: data = [] } = lastSearch;
 
-  if (!data.length) { return null; }
+  // If there's no data, we show an empty result.
+  if (!data.length) { return <CoursewareSearchResults />; }
 
   const results = useMemo(() => {
+    // This reducer distributes the data into different groups to make it easy to
+    // use on the filters.
+    // All results are added to the "all" key and then to its proper group key as well.
     const grouped = data.reduce((acc, { type, ...rest }) => {
       const resultType = filterTypes.includes(type) ? type : filterOther;
       acc[filterAll].push({ type: resultType, ...rest });
       acc[resultType] = [...(acc[resultType] || []), { type: resultType, ...rest }];
       return acc;
     }, { [filterAll]: [] });
 
-    // This is just to keep the tab order
+    // This is just to format the output object with the expected tab order.
     const output = {};
     validFilters.forEach(key => { if (grouped[key]) { output[key] = grouped[key]; } });
 
@@ -60,11 +64,11 @@ export const CoursewareSearchResultsFilter = ({ intl }) => {
       activeKey={activeKey}
       onSelect={setFilter}
     >
-      {filters.filter(({ count }) => (count > 0)).map(({ key, label }) => (results[key].length ? (
+      {filters.filter(({ count }) => (count > 0)).map(({ key, label }) => (
         <Tab key={key} eventKey={key} title={label} data-testid={`courseware-search-results-tabs-${key}`}>
           <CoursewareSearchResults results={results[key]} />
         </Tab>
-      ) : null))}
+      ))}
     </Tabs>
   );
 };

src/course-home/courseware-search/CoursewareSearch.jsx

@@ -122,16 +122,16 @@ const CoursewareSearch = ({ intl, ...sectionProps }) => {
           )}
           {status === 'results' ? (
             <>
-              <div
-                className="courseware-search__results-summary"
-                aria-live="polite"
-                aria-relevant="all"
-                aria-atomic="true"
-                data-testid="courseware-search-summary"
-              >{total > 0
-                ? intl.formatMessage(messages.searchResultsLabel, { total, keyword: lastSearchKeyword })
-                : intl.formatMessage(messages.searchResultsNone)}
-              </div>
+              {total > 0 ? (
+                <div
+                  className="courseware-search__results-summary"
+                  aria-live="polite"
+                  aria-relevant="all"
+                  aria-atomic="true"
+                  data-testid="courseware-search-summary"
+                >{intl.formatMessage(messages.searchResultsLabel, { total, keyword: lastSearchKeyword })}
+                </div>
+              ) : null}
               <CoursewareSearchResultsFilterContainer />
             </>
           ) : null}

src/course-home/courseware-search/CoursewareSearch.test.jsx

@@ -236,14 +236,14 @@ describe('CoursewareSearch', () => {
       expect(screen.queryByTestId('courseware-search-error')).toBeInTheDocument();
     });
 
-    it('should show "No results found." if results is empty', () => {
+    it('should not show a summary if there are no results', () => {
       mockModels({
         searchKeyword: 'test',
         total: 0,
       });
       renderComponent();
 
-      expect(screen.queryByTestId('courseware-search-summary').textContent).toBe('No results found.');
+      expect(screen.queryByTestId('courseware-search-summary')).not.toBeInTheDocument();
     });
 
     it('should show a summary for the results', () => {

src/course-home/courseware-search/courseware-search.scss

@@ -51,6 +51,8 @@
 
   &__empty {
     color: $gray-500;
+    padding: 6rem 0;
+    text-align: center;
   }
 
   &__item {

src/course-home/courseware-search/hooks.js

@@ -70,9 +70,10 @@ export function useLockScroll() {
   }, []);
 }
 
+const initSearchParams = { q: '', f: '' };
 export function useCoursewareSearchParams() {
-  const [searchParams, setSearchParams] = useSearchParams();
-  const clearSearchParams = () => setSearchParams({ q: '', f: '' });
+  const [searchParams, setSearchParams] = useSearchParams(initSearchParams);
+  const clearSearchParams = () => setSearchParams(initSearchParams);
 
   const query = searchParams.get('q');
   const filter = searchParams.get('f')?.toLowerCase();

src/course-home/courseware-search/hooks.test.jsx

@@ -1,9 +1,13 @@
 import { renderHook, act } from '@testing-library/react-hooks';
-import { useParams } from 'react-router-dom';
+import { useParams, useSearchParams } from 'react-router-dom';
 import { useSelector } from 'react-redux';
 import { fetchCoursewareSearchSettings } from '../data/thunks';
 import {
-  useCoursewareSearchFeatureFlag, useCoursewareSearchState, useElementBoundingBox, useLockScroll,
+  useCoursewareSearchFeatureFlag,
+  useCoursewareSearchParams,
+  useCoursewareSearchState,
+  useElementBoundingBox,
+  useLockScroll,
 } from './hooks';
 
 jest.mock('react-redux');
@@ -184,4 +188,45 @@ describe('CoursewareSearch Hooks', () => {
       expect(removeBodyClassSpy).toHaveBeenCalledWith('_search-no-scroll');
     });
   });
+
+  describe('useSearchParams', () => {
+    const initSearch = { q: '', f: '' };
+    const q = { value: '' };
+    const f = { value: '' };
+    const mockedQuery = { q, f };
+    const searchParams = { get: (prop) => mockedQuery[prop].value };
+    const setSearchParams = jest.fn();
+
+    beforeEach(() => {
+      useSearchParams.mockImplementation(() => [searchParams, setSearchParams]);
+    });
+
+    it('should init the search params properly', () => {
+      const {
+        query, filter, setQuery, setFilter, clearSearchParams,
+      } = useCoursewareSearchParams();
+
+      expect(useSearchParams).toBeCalledWith(initSearch);
+      expect(query).toBe('');
+      expect(filter).toBe('');
+
+      setQuery('setQuery');
+      expect(setSearchParams).toBeCalledWith(expect.any(Function));
+
+      setFilter('setFilter');
+      expect(setSearchParams).toBeCalledWith(expect.any(Function));
+
+      clearSearchParams();
+      expect(setSearchParams).toBeCalledWith(initSearch);
+    });
+
+    it('should return the query and lowercase filter if any', () => {
+      q.value = '42';
+      f.value = 'LOWERCASE';
+      const { query, filter } = useCoursewareSearchParams();
+
+      expect(query).toBe('42');
+      expect(filter).toBe('lowercase');
+    });
+  });
 });