Tests for server side rendering useBrowseResults (#40)

* Add server side rendering tests for useCioClient

* Test server side rendering for useSearchResults

* Tests for server side rendering useBrowseResults

* Resolve eslint with jsx

* change file extension from js to jsx for tests with jsx

* update apiResponse mocks to apiSearchResponse and apiBrowseRespons

* remove wrongly created file

* check filterName and filterValue are defined for handleSubmit event

Author: mocca102

spec/useBrowseResults.server.test.js

@@ -0,0 +1,79 @@
+import useBrowseResults from '../src/hooks/useBrowseResults';
+import { renderHookServerSide } from './test-utils.server';
+
+import mockBrowseResponse from './local_examples/apiBrowseResponse.json';
+import { transformBrowseResponse } from '../src/utils/transformers';
+
+describe('Testing Hook on the server: useBrowseResults with initial browse results', () => {
+  it('Should throw error if no filterValue or filterName required', async () => {
+    expect(() =>
+      renderHookServerSide(() => useBrowseResults('', '', { cioClient: null }), {}),
+    ).toThrow('filterName and filterValue are required');
+
+    expect(() =>
+      renderHookServerSide(() => useBrowseResults('filter_name', '', { cioClient: null }), {}),
+    ).toThrow('filterName and filterValue are required');
+
+    expect(() =>
+      renderHookServerSide(() => useBrowseResults('', 'filter_value', { cioClient: null }), {}),
+    ).toThrow('filterName and filterValue are required');
+  });
+
+  it('Should not break if cioClient is null', async () => {
+    const initialBrowseResults = transformBrowseResponse(mockBrowseResponse);
+
+    expect(() =>
+      renderHookServerSide(
+        () =>
+          useBrowseResults(
+            'filter_value',
+            'filter_name',
+            { cioClient: null },
+            initialBrowseResults,
+          ),
+        {},
+      ),
+    ).not.toThrow();
+  });
+
+  it('Should return a PlpBrowseResponse Object when provided initialBrowseResults', async () => {
+    const initialBrowseResults = transformBrowseResponse(mockBrowseResponse);
+
+    const { result } = renderHookServerSide(
+      () =>
+        useBrowseResults('filter_value', 'filter_name', { cioClient: null }, initialBrowseResults),
+      {},
+    );
+
+    const response = result.browseResults;
+    expect(response?.resultId).not.toBeUndefined();
+    expect(response?.totalNumResults).not.toBeUndefined();
+    expect(response?.refinedContent).not.toBeUndefined();
+    expect(response?.groups).not.toBeUndefined();
+    expect(response?.results?.length).not.toBeUndefined();
+    expect(response?.facets?.length).not.toBeUndefined();
+    expect(response?.sortOptions?.length).not.toBeUndefined();
+    expect(response?.rawResponse).not.toBeUndefined();
+  });
+});
+
+describe('Testing Hook on the server: useBrowseResults with no initialBrowseResults', () => {
+  it('Should not break if cioClient is null', async () => {
+    expect(() =>
+      renderHookServerSide(
+        () => useBrowseResults('filter_value', 'filter_name', { cioClient: null }),
+        {},
+      ),
+    ).not.toThrow();
+  });
+
+  it('Should return null when called with no initialBrowseResults', async () => {
+    const { result } = renderHookServerSide(
+      () => useBrowseResults('filter_value', 'filter_name', { cioClient: null }),
+      {},
+    );
+
+    const response = result.browseResults;
+    expect(response).toBeNull();
+  });
+});

src/hooks/useBrowseResults.ts

@@ -32,33 +32,42 @@ export default function useBrowseResults(
   filterName: string,
   filterValue: string,
   configs: UseBrowseResultsConfig = {},
+  initialBrowseResponse?: PlpBrowseResponse,
 ): UseBrowseResultsReturn {
   const { cioClient, browseParams } = configs;
   const state = useCioPlpContext();
   const client = cioClient || state?.cioClient;
 
-  if (!client) {
+  if (!filterName || !filterValue) {
+    throw new Error('filterName and filterValue are required');
+  }
+  // Throw error if client is not provided and window is defined (i.e. not SSR)
+  if (!client && typeof window !== 'undefined') {
     throw new Error('CioClient required');
   }
 
-  const [browseResponse, setBrowseResponse] = useState<PlpBrowseResponse | null>(null);
+  const [browseResponse, setBrowseResponse] = useState<PlpBrowseResponse | null>(
+    initialBrowseResponse || null,
+  );
   const pagination = usePagination({
     initialPage: browseResponse?.rawResponse.request?.page,
     totalNumResults: browseResponse?.totalNumResults,
     resultsPerPage: browseResponse?.numResultsPerPage,
   });
 
   const handleSubmit = () => {
-    client.browse
-      .getBrowseResults(filterName, filterValue, {
-        ...browseParams,
-        page: pagination.currentPage || browseParams?.page,
-      })
-      .then((res) => setBrowseResponse(transformBrowseResponse(res)));
+    if (client && filterName && filterValue) {
+      client.browse
+        .getBrowseResults(filterName, filterValue, {
+          ...browseParams,
+          page: pagination.currentPage || browseParams?.page,
+        })
+        .then((res) => setBrowseResponse(transformBrowseResponse(res)));
+    }
   };
 
   useEffect(() => {
-    if (filterName && filterValue) {
+    if (client && filterName && filterValue) {
       client.browse
         .getBrowseResults(filterName, filterValue, {
           ...browseParams,