fix(ga): issue #606 - update unit test and code

Author: eouin

packages/webapp/src/webview/ui/components/Header/SearchField/SearchField.tsx

@@ -1,7 +1,4 @@
-import React, { useCallback, useEffect, useState } from 'react';
-import type { FC } from 'react';
-import type { ChangeEvent } from 'react';
-import { useSelector, useDispatch } from 'react-redux';
+import React, { useEffect, useState } from 'react';
 
 import { UISearchBox } from '@sap-ux/ui-components';
 
@@ -17,20 +14,16 @@ import {
 } from '../../../../state/reducers';
 import { Filters } from '../Filters';
 
-const SEARCH_TIMEOUT = 250;
-
 /**
  *
  * @returns An input field
  */
-export const SearchField: FC = (): JSX.Element => {
-    const dispatch = useDispatch();
-
+export const SearchField: React.FC = (): JSX.Element => {
     const networkStatus: string = useAppSelector(getNetworkStatus);
     const productFilters: string[] = useAppSelector(getProductFilters);
     const componentFilters: string[] = useAppSelector(getComponentFilters);
     const activeScreen: string = useAppSelector(getActiveScreen);
-    const activeSearch: string = useSelector(getSearchQuery);
+    const activeSearch: string = useAppSelector(getSearchQuery);
 
     const [searchTerm, setSearchTerm] = useState<string>(activeSearch);
 
@@ -40,21 +33,12 @@ export const SearchField: FC = (): JSX.Element => {
         }
     };
 
-    const onChange = (_?: ChangeEvent<HTMLInputElement> | undefined, newSearchTerm = ''): void => {
-        if (!/\S/.test(newSearchTerm)) {
-            newSearchTerm = '';
-        }
-        if (activeSearch !== newSearchTerm) {
-            actions.setQueryValue(newSearchTerm);
-        }
-    };
-
     const onSearch = (searchItem: string): void => {
         if (!/\S/.test(searchItem)) {
             searchItem = '';
         }
         if (activeSearch !== searchItem) {
-            dispatch(actions.setQueryValue(searchItem));
+            actions.setQueryValue(searchItem);
         }
     };
 
@@ -69,7 +53,7 @@ export const SearchField: FC = (): JSX.Element => {
                     component: componentFilters
                 },
                 {
-                    responseSize: 20, //appState.pageSize,
+                    responseSize: 20,
                     offset: 0
                 }
             );
@@ -85,7 +69,6 @@ export const SearchField: FC = (): JSX.Element => {
                 placeholder="Search Guided Answers"
                 id="search-field"
                 onClear={onClear}
-                onChange={onChange}
                 onSearch={onSearch}></UISearchBox>
             {activeScreen === 'SEARCH' && <Filters />}
         </div>

packages/webapp/test/Header/SearchField.test.tsx

@@ -25,7 +25,7 @@ describe('<SearchField />', () => {
     });
 
     test('Should render a SearchField component, on home screen', () => {
-        const { container } = renderSearch(Object.assign({}, appState, { activeScreen: 'HOME' }));
+        const { container } = renderSearch({ ...appState, activeScreen: 'HOME' });
         expect(container).toMatchSnapshot();
     });
 
@@ -37,9 +37,10 @@ describe('<SearchField />', () => {
         if (searchInput) {
             fireEvent.focus(searchInput);
             fireEvent.input(searchInput, { target: { value: 'test' } });
-            fireEvent.blur(searchInput);
+            fireEvent.keyDown(searchInput, { key: 'Enter', code: 'Enter', keyCode: 13 });
         }
 
+        // TODO: Need to fix the redux store
         // expect(spyOnSearch).toHaveBeenCalledWith('test');
     });
 });