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

Author: eouin

packages/webapp/package.json

@@ -33,7 +33,7 @@
         "esbuild-plugin-replace": "1.4.0",
         "esbuild-plugin-svgr": "2.1.0",
         "esbuild-sass-plugin": "2.16.1",
-        "html-react-parser": "4.2.2",
+        "html-react-parser": "5.1.12",
         "i18next": "23.7.16",
         "jest-css-modules-transform": "4.4.2",
         "jest-environment-jsdom": "29.7.0",

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

@@ -3,17 +3,38 @@ import React from 'react';
 import { useSelector } from 'react-redux';
 import { render, fireEvent, cleanup } from '@testing-library/react';
 import { screen } from '@testing-library/dom';
+import { initIcons } from '@sap-ux/ui-components';
+
 import { SearchField } from '../../src/webview/ui/components/Header/SearchField';
 import { initI18n } from '../../src/webview/i18n';
 
+import * as actions from '../../src/webview/state/actions';
+
+const mockState = {
+    activeGuidedAnswerNode: [],
+    guidedAnswerTreeSearchResult: {
+        trees: [treeMock],
+        resultSize: 1,
+        productFilters: [],
+        componentFilters: []
+    },
+    query: 'fiori tools',
+    guideFeedback: true,
+    selectedProductFilters: ['ProductFilter1, ProductFilter2'],
+    selectedComponentFilters: ['ComponentFilter1', 'ComponentFilter2'],
+    activeScreen: 'SEARCH'
+};
+
 jest.useFakeTimers();
 jest.spyOn(global, 'setTimeout');
 
 jest.mock('../../src/webview/state', () => {
     return {
         actions: {
             searchTree: jest.fn(),
-            setQueryValue: jest.fn(),
+            setQueryValue: (newValue: string) => {
+                mockState.query = newValue;
+            },
             parseUrl: jest.fn()
         }
     };
@@ -24,21 +45,7 @@ jest.mock('react-redux', () => ({
 }));
 
 describe('<SearchField />', () => {
-    const mockState = {
-        activeGuidedAnswerNode: [],
-        guidedAnswerTreeSearchResult: {
-            trees: [treeMock],
-            resultSize: 1,
-            productFilters: [],
-            componentFilters: []
-        },
-        query: 'fiori tools',
-        guideFeedback: true,
-        selectedProductFilters: ['ProductFilter1, ProductFilter2'],
-        selectedComponentFilters: ['ComponentFilter1', 'ComponentFilter2'],
-        activeScreen: 'SEARCH'
-    };
-
+    initIcons();
     initI18n();
     afterEach(cleanup);
 
@@ -47,17 +54,40 @@ describe('<SearchField />', () => {
 
         const { container } = render(<SearchField />);
         expect(container).toMatchSnapshot();
+    });
+
+    it('Should render a SearchField component, on home screen', () => {
+        (useSelector as jest.Mock).mockImplementation((selector) => selector({ ...mockState, activeScreen: 'HOME' }));
+
+        const { container } = render(<SearchField />);
+        expect(container).toMatchSnapshot();
+    });
+
+    it('Should render a SearchField component, search value entered', () => {
+        (useSelector as jest.Mock).mockImplementation((selector) => selector(mockState));
+
+        const { container } = render(<SearchField />);
+        expect(container).toMatchSnapshot();
 
         //Test click event
         const element = screen.getByTestId('search-field');
         fireEvent.input(element, { target: { value: 'Fiori Tools' } });
-        expect(setTimeout).toHaveBeenCalledTimes(2);
+        expect(setTimeout).toHaveBeenCalledTimes(1);
+
+        expect(mockState.query).toEqual('Fiori Tools');
     });
 
-    it('Should render a SearchField component, on home screen', () => {
-        (useSelector as jest.Mock).mockImplementation((selector) => selector({ ...mockState, activeScreen: 'HOME' }));
+    it('Should render a SearchField component, search value entered', () => {
+        (useSelector as jest.Mock).mockImplementation((selector) => selector(mockState));
 
         const { container } = render(<SearchField />);
         expect(container).toMatchSnapshot();
+
+        //Test click event
+        const element = screen.getByTestId('search-field');
+        fireEvent.input(element, { target: { value: '' } });
+        expect(setTimeout).toHaveBeenCalledTimes(1);
+
+        expect(mockState.query).toEqual('');
     });
 });