@envive-ai/react-hooks 0.2.10-arthur-3 → 0.2.11

package/src/hooks/Search/__tests__/useSearch.test.tsx

@@ -1,37 +1,37 @@
-import React from "react";
-import { render, screen, waitFor, act } from "@testing-library/react";
-import userEvent from "@testing-library/user-event";
-import { Provider, useAtomValue, useSetAtom } from "jotai";
-import { useSearch } from "../useSearch";
-import { AmplitudeProvider } from "src/contexts/amplitudeContext/amplitudeContext";
-import { EnviveConfigProvider } from "src/contexts/enviveConfigContext/enviveConfigContext";
-import { LocalStorageProvider } from "src/contexts/localStorageContext/localStorageContext";
-import { GraphQLProvider } from "src/contexts/graphqlContext/graphqlContext";
-import { UserIdentityProvider } from "src/contexts/userIdentityContext/userIdentityContext";
-import { FeatureFlagServiceProvider } from "src/contexts/featureFlagServiceContext/featureFlagServiceContext";
-import { NewOrgConfigProvider } from "src/contexts/newOrgConfigContext/newOrgConfigContext";
-import { SearchProvider } from "src/contexts/searchContext/searchContext";
+import React from 'react';
+import { render, screen, waitFor, act } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { Provider, useAtomValue, useSetAtom } from 'jotai';
+import { useSearch } from '../useSearch';
+import { AmplitudeProvider } from 'src/contexts/amplitudeContext/amplitudeContext';
+import { EnviveConfigProvider } from 'src/contexts/enviveConfigContext/enviveConfigContext';
+import { LocalStorageProvider } from 'src/contexts/localStorageContext/localStorageContext';
+import { GraphQLProvider } from 'src/contexts/graphqlContext/graphqlContext';
+import { UserIdentityProvider } from 'src/contexts/userIdentityContext/userIdentityContext';
+import { FeatureFlagServiceProvider } from 'src/contexts/featureFlagServiceContext/featureFlagServiceContext';
+import { NewOrgConfigProvider } from 'src/contexts/newOrgConfigContext/newOrgConfigContext';
+import { SearchProvider } from 'src/contexts/searchContext/searchContext';
 import {
   searchAtom,
   searchParamsAtom,
   searchSelectedFiltersAtom,
   searchProductSortingAtom,
   searchFiltersAtom,
-} from "src/atoms/search";
-import { isFilterOpenAtom } from "src/atoms/globalSearch/globalSearch";
-import { ProductSorting } from "src/atoms/search/types";
-import { SearchResult } from "src/application/models/api/search";
-import { SearchResultsState } from "src/hooks/utils";
-import { createFilterOption } from "src/atoms/search";
-import { SearchFilterDatum } from "src/types/search-filter-types";
-import { SearchResponseProduct } from "@spiffy-ai/commerce-api-client";
+} from 'src/atoms/search';
+import { isFilterOpenAtom } from 'src/atoms/globalSearch/globalSearch';
+import { ProductSorting } from 'src/atoms/search/types';
+import { SearchResult } from 'src/application/models/api/search';
+import { SearchResultsState } from 'src/hooks/utils';
+import { createFilterOption } from 'src/atoms/search';
+import { SearchFilterDatum } from 'src/types/search-filter-types';
+import { SearchResponseProduct } from '@spiffy-ai/commerce-api-client';
 
 // Mock dependencies
-vi.mock("src/hooks/TrackComponentVisibleEvent/useTrackComponentVisibleEvent", () => ({
+vi.mock('src/hooks/TrackComponentVisibleEvent/useTrackComponentVisibleEvent', () => ({
   useTrackComponentVisibleEvent: vi.fn(),
 }));
 
-vi.mock("src/hooks/Intersection/useIntersection", () => ({
+vi.mock('src/hooks/Intersection/useIntersection', () => ({
   useIntersection: vi.fn(() => false),
 }));
 
@@ -40,7 +40,7 @@ const mockTrack = vi.fn();
 const mockInit = vi.fn();
 const mockAdd = vi.fn();
 
-vi.mock("@amplitude/analytics-browser", () => ({
+vi.mock('@amplitude/analytics-browser', () => ({
   createInstance: vi.fn(() => ({
     track: mockTrack,
     init: mockInit,
@@ -49,65 +49,63 @@ vi.mock("@amplitude/analytics-browser", () => ({
 }));
 
 // Mock useAppDetails
-vi.mock("src/hooks/AppDetails/useAppDetails", () => ({
+vi.mock('src/hooks/AppDetails/useAppDetails', () => ({
   useAppDetails: vi.fn(() => ({
-    orgId: "test-org-id",
-    userId: "test-user-id",
-    orgShortName: "test-org",
-    chatId: "test-chat-id",
-    source: "app",
-    env: "dev",
+    orgId: 'test-org-id',
+    userId: 'test-user-id',
+    orgShortName: 'test-org',
+    chatId: 'test-chat-id',
+    source: 'app',
+    env: 'dev',
     variantInfo: {},
   })),
 }));
 
 // Mock useEnviveConfig
-vi.mock("src/contexts/enviveConfigContext/enviveConfigContext", async () => {
-  const actual = await vi.importActual(
-    "src/contexts/enviveConfigContext/enviveConfigContext"
-  );
+vi.mock('src/contexts/enviveConfigContext/enviveConfigContext', async () => {
+  const actual = await vi.importActual('src/contexts/enviveConfigContext/enviveConfigContext');
   return {
     ...actual,
     useEnviveConfig: vi.fn(() => ({
-      orgLevelApiKey: "test-api-key",
-      publicKey: "test-public-key",
-      baseUrl: "https://test-api.example.com",
+      orgLevelApiKey: 'test-api-key',
+      publicKey: 'test-public-key',
+      baseUrl: 'https://test-api.example.com',
     })),
   };
 });
 
 // Mock useColorsAndFrontendConfig
-vi.mock("src/hooks/GraphQLConfig/useGraphQLConfig", () => ({
+vi.mock('src/hooks/GraphQLConfig/useGraphQLConfig', () => ({
   useColorsAndFrontendConfig: vi.fn(() => ({
     data: {
-      colorsConfig: { accentPrimary: "#FF0000" },
+      colorsConfig: { accentPrimary: '#FF0000' },
       frontendConfig: {
         uiConfigs: {
           productCardConfig: {
-            variant: "minimal",
-            hoverVariant: "none",
-            layoutVariant: "square",
+            variant: 'minimal',
+            hoverVariant: 'none',
+            layoutVariant: 'square',
           },
           searchConfig: {
-            recommendedProductsHeading: "Suggested Products",
-            searchOverlayHeading: "What can I help you find?",
+            recommendedProductsHeading: 'Suggested Products',
+            searchOverlayHeading: 'What can I help you find?',
             recommendedProducts: [],
             searchFilterConfig: [
               {
-                filterId: "category",
+                filterId: 'category',
                 type: 'dynamic',
-                displayName: "Category",
-                attribute: "category",
+                displayName: 'Category',
+                attribute: 'category',
                 sorting: {
-                  type: "alphabetic",
+                  type: 'alphabetic',
                 },
                 items: [
                   {
-                    filterItemId: "shoes",
-                    displayName: "Shoes",
+                    filterItemId: 'shoes',
+                    displayName: 'Shoes',
                   },
                 ],
-              }
+              },
             ],
             additiveDynamicFilters: false,
           },
@@ -122,7 +120,7 @@ vi.mock("src/hooks/GraphQLConfig/useGraphQLConfig", () => ({
 
 // Mock commerce-api-client
 const mockV1SearchQueryGet = vi.fn();
-vi.mock("@spiffy-ai/commerce-api-client", () => ({
+vi.mock('@spiffy-ai/commerce-api-client', () => ({
   SearchApi: vi.fn(function SearchApi() {
     return {
       v1SearchQueryGet: mockV1SearchQueryGet,
@@ -130,12 +128,12 @@ vi.mock("@spiffy-ai/commerce-api-client", () => ({
   }),
   Configuration: vi.fn(function Configuration() {}),
   ResponseCategory: {
-    Product: "product",
+    Product: 'product',
   },
 }));
 
 // Mock Logger
-vi.mock("src/application/logging/logger", () => ({
+vi.mock('src/application/logging/logger', () => ({
   default: {
     logInfo: vi.fn(),
     logWarn: vi.fn(),
@@ -145,7 +143,7 @@ vi.mock("src/application/logging/logger", () => ({
 }));
 
 // Mock search service adapter
-vi.mock("src/atoms/search/searchServiceAdapter", () => ({
+vi.mock('src/atoms/search/searchServiceAdapter', () => ({
   setSearchServiceFunction: vi.fn(),
   clearSearchServiceFunction: vi.fn(),
   getSearchServiceFunction: vi.fn(),
@@ -153,7 +151,7 @@ vi.mock("src/atoms/search/searchServiceAdapter", () => ({
 
 // Mock crypto.subtle.digest
 const mockDigest = vi.fn().mockResolvedValue(new Uint8Array(32).fill(0));
-Object.defineProperty(global, "crypto", {
+Object.defineProperty(global, 'crypto', {
   value: {
     subtle: {
       digest: mockDigest,
@@ -163,45 +161,43 @@ Object.defineProperty(global, "crypto", {
 });
 
 // Mock EventsDispatcher
-vi.mock("src/events", () => ({
+vi.mock('src/events', () => ({
   EventsDispatcher: {
     dispatch: vi.fn(),
   },
   SpiffyEvent: {
-    AMPLITUDE_EVENT: "AMPLITUDE_EVENT",
+    AMPLITUDE_EVENT: 'AMPLITUDE_EVENT',
   },
 }));
 
 const mockSearchData: SearchResult = {
   products: [
     {
-      id: "1",
-      title: "Test Product 1",
+      id: '1',
+      title: 'Test Product 1',
       price: 100,
       filters: {
-        category: ["shoes"],
+        category: ['shoes'],
       },
-      url: "https://example.com/product1",
+      url: 'https://example.com/product1',
     } as SearchResponseProduct,
     {
-      id: "2",
-      title: "Test Product 2",
+      id: '2',
+      title: 'Test Product 2',
       price: 200,
       filters: {
-        category: ["other"],
+        category: ['other'],
       },
-      url: "https://example.com/product2",
+      url: 'https://example.com/product2',
     } as SearchResponseProduct,
   ],
-  filters: ["brand", "color"],
+  filters: ['brand', 'color'],
   totalProductCount: 2,
-  searchResponseId: "test-response-id",
+  searchResponseId: 'test-response-id',
 };
 
 // Test component that uses the hook
-const TestComponent: React.FC<{ allowRedirect?: boolean }> = ({
-  allowRedirect = false,
-}) => {
+const TestComponent: React.FC<{ allowRedirect?: boolean }> = ({ allowRedirect = false }) => {
   const searchHook = useSearch({ allowRedirect });
 
   return (
@@ -209,34 +205,18 @@ const TestComponent: React.FC<{ allowRedirect?: boolean }> = ({
       <div data-testid="search-text">{searchHook.searchText}</div>
       <div data-testid="query">{searchHook.query}</div>
       <div data-testid="is-loading">{searchHook.isLoadingSearch.toString()}</div>
-      <div data-testid="search-results-state">
-        {searchHook.searchResultsState}
-      </div>
-      <div data-testid="is-filter-open">
-        {searchHook.isFilterOpen.toString()}
-      </div>
-      <div data-testid="product-list-length">
-        {searchHook.productList.length}
-      </div>
+      <div data-testid="search-results-state">{searchHook.searchResultsState}</div>
+      <div data-testid="is-filter-open">{searchHook.isFilterOpen.toString()}</div>
+      <div data-testid="product-list-length">{searchHook.productList.length}</div>
       <div data-testid="filter-button-text">{searchHook.filterButtonText}</div>
-      <div data-testid="merchant-short-name">
-        {searchHook.merchantShortName}
-      </div>
-      <div data-testid="recommended-products-heading">
-        {searchHook.recommendedProductsHeading}
-      </div>
-      <div data-testid="search-overlay-heading">
-        {searchHook.searchOverlayHeading}
-      </div>
+      <div data-testid="merchant-short-name">{searchHook.merchantShortName}</div>
+      <div data-testid="recommended-products-heading">{searchHook.recommendedProductsHeading}</div>
+      <div data-testid="search-overlay-heading">{searchHook.searchOverlayHeading}</div>
       <div data-testid="available-dynamic-filters-count">
         {searchHook.availableDynamicFilters.length}
       </div>
-      <div data-testid="selected-filters-count">
-        {searchHook.selectedFilterOptions.length}
-      </div>
-      <div data-testid="autocomplete-results-count">
-        {searchHook.autocompleteResults.length}
-      </div>
+      <div data-testid="selected-filters-count">{searchHook.selectedFilterOptions.length}</div>
+      <div data-testid="autocomplete-results-count">{searchHook.autocompleteResults.length}</div>
       <div data-testid="should-show-autocomplete">
         {searchHook.shouldShowAutocomplete.toString()}
       </div>
@@ -244,7 +224,7 @@ const TestComponent: React.FC<{ allowRedirect?: boolean }> = ({
       <input
         data-testid="search-input"
         value={searchHook.searchText}
-        onChange={(e) => searchHook.onSearchInputChange(e.target.value)}
+        onChange={e => searchHook.onSearchInputChange(e.target.value)}
         onFocus={searchHook.onSearchInputFocus}
         onBlur={searchHook.onSearchInputBlur}
         onKeyDown={searchHook.onKeyDown}
@@ -284,8 +264,7 @@ const TestComponent: React.FC<{ allowRedirect?: boolean }> = ({
           onClick={() =>
             searchHook.onToggleDynamicFilter({
               filter: searchHook.availableDynamicFilters[0].name,
-              dynamicFilterDisplayName:
-                searchHook.availableDynamicFilters[0].displayName,
+              dynamicFilterDisplayName: searchHook.availableDynamicFilters[0].displayName,
             })
           }
         >
@@ -312,17 +291,13 @@ const TestComponent: React.FC<{ allowRedirect?: boolean }> = ({
       {searchHook.selectedFilterOptions.length > 0 && (
         <button
           data-testid="remove-filter"
-          onClick={() =>
-            searchHook.onRemoveFilter(searchHook.selectedFilterOptions[0])
-          }
+          onClick={() => searchHook.onRemoveFilter(searchHook.selectedFilterOptions[0])}
         >
           Remove Filter
         </button>
       )}
 
-      <div data-testid="search-results-ref">
-        Results Container
-      </div>
+      <div data-testid="search-results-ref">Results Container</div>
     </div>
   );
 };
@@ -337,7 +312,7 @@ const AtomManipulator: React.FC<{
   isFilterOpen?: boolean;
 }> = ({
   searchData = null,
-  query = "",
+  query = '',
   loading = false,
   selectedFilters = [],
   sorting = ProductSorting.FEATURED,
@@ -390,7 +365,7 @@ const TestWrapper: React.FC<{
 }> = ({
   children,
   searchData = null,
-  query = "",
+  query = '',
   loading = false,
   selectedFilters = [],
   sorting = ProductSorting.FEATURED,
@@ -440,10 +415,10 @@ const TestWrapper: React.FC<{
   );
 };
 
-describe("useSearch", () => {
+describe('useSearch', () => {
   beforeEach(() => {
     vi.clearAllMocks();
-    if (typeof localStorage !== "undefined") {
+    if (typeof localStorage !== 'undefined') {
       localStorage.clear();
     }
     mockTrack.mockClear();
@@ -452,86 +427,80 @@ describe("useSearch", () => {
     mockDigest.mockResolvedValue(new Uint8Array(32).fill(0));
   });
 
-  describe("Initial State", () => {
-    it("should initialize with default values", async () => {
+  describe('Initial State', () => {
+    it('should initialize with default values', async () => {
       render(
         <TestWrapper>
           <TestComponent />
-        </TestWrapper>
+        </TestWrapper>,
       );
 
       await waitFor(() => {
-        expect(screen.getByTestId("test-component")).toBeInTheDocument();
+        expect(screen.getByTestId('test-component')).toBeInTheDocument();
       });
 
-      expect(screen.getByTestId("search-text")).toHaveTextContent("");
-      expect(screen.getByTestId("query")).toHaveTextContent("");
-      expect(screen.getByTestId("is-loading")).toHaveTextContent("false");
-      expect(screen.getByTestId("search-results-state")).toHaveTextContent(
-        String(SearchResultsState.NoResults)
-      );
-      expect(screen.getByTestId("is-filter-open")).toHaveTextContent("false");
-      expect(screen.getByTestId("product-list-length")).toHaveTextContent("0");
-      expect(screen.getByTestId("filter-button-text")).toHaveTextContent(
-        "Filter & Sort"
-      );
-      expect(screen.getByTestId("merchant-short-name")).toHaveTextContent(
-        "test-org"
+      expect(screen.getByTestId('search-text')).toHaveTextContent('');
+      expect(screen.getByTestId('query')).toHaveTextContent('');
+      expect(screen.getByTestId('is-loading')).toHaveTextContent('false');
+      expect(screen.getByTestId('search-results-state')).toHaveTextContent(
+        String(SearchResultsState.NoResults),
       );
+      expect(screen.getByTestId('is-filter-open')).toHaveTextContent('false');
+      expect(screen.getByTestId('product-list-length')).toHaveTextContent('0');
+      expect(screen.getByTestId('filter-button-text')).toHaveTextContent('Filter & Sort');
+      expect(screen.getByTestId('merchant-short-name')).toHaveTextContent('test-org');
     });
 
-    it("should initialize with query from search params", async () => {
+    it('should initialize with query from search params', async () => {
       render(
         <TestWrapper query="test query">
           <TestComponent />
-        </TestWrapper>
+        </TestWrapper>,
       );
 
       await waitFor(() => {
-        expect(screen.getByTestId("query")).toHaveTextContent("test query");
+        expect(screen.getByTestId('query')).toHaveTextContent('test query');
       });
     });
   });
 
-  describe("Search Input", () => {
-    it("should update search text when input changes", async () => {
+  describe('Search Input', () => {
+    it('should update search text when input changes', async () => {
       const user = userEvent.setup();
       render(
         <TestWrapper>
           <TestComponent />
-        </TestWrapper>
+        </TestWrapper>,
       );
 
       await waitFor(() => {
-        expect(screen.getByTestId("search-input")).toBeInTheDocument();
+        expect(screen.getByTestId('search-input')).toBeInTheDocument();
       });
 
-      const input = screen.getByTestId("search-input") as HTMLInputElement;
+      const input = screen.getByTestId('search-input') as HTMLInputElement;
 
       await act(async () => {
-        await user.type(input, "new search");
+        await user.type(input, 'new search');
       });
 
       await waitFor(() => {
-        expect(screen.getByTestId("search-text")).toHaveTextContent(
-          "new search"
-        );
+        expect(screen.getByTestId('search-text')).toHaveTextContent('new search');
       });
     });
 
-    it("should handle search input focus", async () => {
+    it('should handle search input focus', async () => {
       const user = userEvent.setup();
       render(
         <TestWrapper>
           <TestComponent />
-        </TestWrapper>
+        </TestWrapper>,
       );
 
       await waitFor(() => {
-        expect(screen.getByTestId("search-input")).toBeInTheDocument();
+        expect(screen.getByTestId('search-input')).toBeInTheDocument();
       });
 
-      const input = screen.getByTestId("search-input") as HTMLInputElement;
+      const input = screen.getByTestId('search-input') as HTMLInputElement;
 
       await act(async () => {
         await user.click(input);
@@ -541,173 +510,176 @@ describe("useSearch", () => {
       expect(input).toBeInTheDocument();
     });
 
-    it("should handle search submission", async () => {
+    it('should handle search submission', async () => {
       const user = userEvent.setup();
       render(
         <TestWrapper>
           <TestComponent />
-        </TestWrapper>
+        </TestWrapper>,
       );
 
       await waitFor(() => {
-        expect(screen.getByTestId("submit-search")).toBeInTheDocument();
+        expect(screen.getByTestId('submit-search')).toBeInTheDocument();
       });
 
       await act(async () => {
-        await user.click(screen.getByTestId("submit-search"));
+        await user.click(screen.getByTestId('submit-search'));
       });
 
       // Search submission should be handled
-      expect(screen.getByTestId("submit-search")).toBeInTheDocument();
+      expect(screen.getByTestId('submit-search')).toBeInTheDocument();
     });
   });
 
-  describe("Filter Operations", () => {
-    it("should toggle filter open state", async () => {
+  describe('Filter Operations', () => {
+    it('should toggle filter open state', async () => {
       const user = userEvent.setup();
       render(
         <TestWrapper>
           <TestComponent />
-        </TestWrapper>
+        </TestWrapper>,
       );
 
       await waitFor(() => {
-        expect(screen.getByTestId("toggle-filter")).toBeInTheDocument();
+        expect(screen.getByTestId('toggle-filter')).toBeInTheDocument();
       });
 
-      expect(screen.getByTestId("is-filter-open")).toHaveTextContent("false");
+      expect(screen.getByTestId('is-filter-open')).toHaveTextContent('false');
 
       await act(async () => {
-        await user.click(screen.getByTestId("toggle-filter"));
+        await user.click(screen.getByTestId('toggle-filter'));
       });
 
       await waitFor(() => {
-        expect(screen.getByTestId("is-filter-open")).toHaveTextContent("true");
+        expect(screen.getByTestId('is-filter-open')).toHaveTextContent('true');
       });
     });
 
-    it("should clear all filters", async () => {
+    it('should clear all filters', async () => {
       const user = userEvent.setup();
-      const selectedFilter = createFilterOption("category", "shoes", "Shoes");
+      const selectedFilter = createFilterOption('category', 'shoes', 'Shoes');
       render(
         <TestWrapper selectedFilters={[selectedFilter]}>
           <TestComponent />
-        </TestWrapper>
+        </TestWrapper>,
       );
 
       await waitFor(() => {
-        expect(screen.getByTestId("selected-filters-count")).toHaveTextContent(
-          "1"
-        );
+        expect(screen.getByTestId('selected-filters-count')).toHaveTextContent('1');
       });
 
       await act(async () => {
-        await user.click(screen.getByTestId("clear-all-filters"));
+        await user.click(screen.getByTestId('clear-all-filters'));
       });
 
       await waitFor(() => {
-        expect(screen.getByTestId("selected-filters-count")).toHaveTextContent(
-          "0"
-        );
+        expect(screen.getByTestId('selected-filters-count')).toHaveTextContent('0');
       });
     });
 
-    it("should update filter button text when filters are selected", async () => {
-      const selectedFilter = createFilterOption("category", "shoes", "Shoes");
+    it('should update filter button text when filters are selected', async () => {
+      const selectedFilter = createFilterOption('category', 'shoes', 'Shoes');
       render(
-        <TestWrapper selectedFilters={[selectedFilter]} searchData={mockSearchData}>
+        <TestWrapper
+          selectedFilters={[selectedFilter]}
+          searchData={mockSearchData}
+        >
           <TestComponent />
-        </TestWrapper>
+        </TestWrapper>,
       );
 
       await waitFor(() => {
-        const filterButtonText = screen.getByTestId("filter-button-text")
-          .textContent;
-        expect(filterButtonText).toContain("Filter & Sort (");
+        const filterButtonText = screen.getByTestId('filter-button-text').textContent;
+        expect(filterButtonText).toContain('Filter & Sort (');
       });
     });
   });
 
-  describe("Search Results", () => {
-
+  describe('Search Results', () => {
     // TODO: Come back and fix this test later
-    it.skip("should display search results when data is available", async () => {
+    it.skip('should display search results when data is available', async () => {
       render(
-        <TestWrapper searchData={mockSearchData} query="test">
+        <TestWrapper
+          searchData={mockSearchData}
+          query="test"
+        >
           <TestComponent />
-        </TestWrapper>
+        </TestWrapper>,
       );
 
       await waitFor(() => {
-        expect(screen.getByTestId("search-results-state")).toHaveTextContent(
-          String(SearchResultsState.Results)
+        expect(screen.getByTestId('search-results-state')).toHaveTextContent(
+          String(SearchResultsState.Results),
         );
       });
 
-      expect(screen.getByTestId("product-list-length")).toHaveTextContent("2");
+      expect(screen.getByTestId('product-list-length')).toHaveTextContent('2');
     });
 
-    it("should show loading state", async () => {
+    it('should show loading state', async () => {
       render(
-        <TestWrapper loading={true} query="test">
+        <TestWrapper
+          loading={true}
+          query="test"
+        >
           <TestComponent />
-        </TestWrapper>
+        </TestWrapper>,
       );
 
       await waitFor(() => {
-        expect(screen.getByTestId("is-loading")).toHaveTextContent("true");
+        expect(screen.getByTestId('is-loading')).toHaveTextContent('true');
       });
 
-      expect(screen.getByTestId("search-results-state")).toHaveTextContent(
-        String(SearchResultsState.Loading)
+      expect(screen.getByTestId('search-results-state')).toHaveTextContent(
+        String(SearchResultsState.Loading),
       );
     });
 
-    it("should show no results state when search data is null", async () => {
+    it('should show no results state when search data is null', async () => {
       render(
-        <TestWrapper searchData={null} loading={false}>
+        <TestWrapper
+          searchData={null}
+          loading={false}
+        >
           <TestComponent />
-        </TestWrapper>
+        </TestWrapper>,
       );
 
       await waitFor(() => {
-        expect(screen.getByTestId("search-results-state")).toHaveTextContent(
-          String(SearchResultsState.NoResults)
+        expect(screen.getByTestId('search-results-state')).toHaveTextContent(
+          String(SearchResultsState.NoResults),
         );
       });
     });
 
     // TODO: Come back and fix this test later
-    it.skip("should display available dynamic filters", async () => {
+    it.skip('should display available dynamic filters', async () => {
       const searchDataWithFilters: SearchResult = {
         ...mockSearchData,
-        filters: ["brand", "color", "size"],
+        filters: ['brand', 'color', 'size'],
       };
 
       render(
-        <TestWrapper searchData={searchDataWithFilters} query="test">
+        <TestWrapper
+          searchData={searchDataWithFilters}
+          query="test"
+        >
           <TestComponent />
-        </TestWrapper>
+        </TestWrapper>,
       );
 
       await waitFor(() => {
-        expect(
-          screen.getByTestId("available-dynamic-filters-count")
-        ).toHaveTextContent("3");
+        expect(screen.getByTestId('available-dynamic-filters-count')).toHaveTextContent('3');
       });
     });
 
     // TODO: Come back and fix this test later
-    it.skip("should exclude selected dynamic filters from available filters", async () => {
+    it.skip('should exclude selected dynamic filters from available filters', async () => {
       const searchDataWithFilters: SearchResult = {
         ...mockSearchData,
-        filters: ["brand", "color"],
+        filters: ['brand', 'color'],
       };
-      const selectedFilter = createFilterOption(
-        "dynamic",
-        "brand",
-        "Brand"
-      );
+      const selectedFilter = createFilterOption('dynamic', 'brand', 'Brand');
 
       render(
         <TestWrapper
@@ -716,137 +688,132 @@ describe("useSearch", () => {
           query="test"
         >
           <TestComponent />
-        </TestWrapper>
+        </TestWrapper>,
       );
 
       await waitFor(() => {
-        expect(
-          screen.getByTestId("available-dynamic-filters-count")
-        ).toHaveTextContent("1");
+        expect(screen.getByTestId('available-dynamic-filters-count')).toHaveTextContent('1');
       });
     });
   });
 
-  describe("Product Sorting", () => {
-    it("should handle product sorting changes", async () => {
+  describe('Product Sorting', () => {
+    it('should handle product sorting changes', async () => {
       render(
         <TestWrapper sorting={ProductSorting.FEATURED}>
           <TestComponent />
-        </TestWrapper>
+        </TestWrapper>,
       );
 
       await waitFor(() => {
-        expect(screen.getByTestId("test-component")).toBeInTheDocument();
+        expect(screen.getByTestId('test-component')).toBeInTheDocument();
       });
 
       // The sorting should be reflected in the filters
-      expect(screen.getByTestId("filter-button-text")).toBeInTheDocument();
+      expect(screen.getByTestId('filter-button-text')).toBeInTheDocument();
     });
   });
 
-  describe("Configuration", () => {
-    it("should use default product card config when not provided", async () => {
+  describe('Configuration', () => {
+    it('should use default product card config when not provided', async () => {
       render(
         <TestWrapper>
           <TestComponent />
-        </TestWrapper>
+        </TestWrapper>,
       );
 
       await waitFor(() => {
-        expect(screen.getByTestId("test-component")).toBeInTheDocument();
+        expect(screen.getByTestId('test-component')).toBeInTheDocument();
       });
 
       // Should have default config values
-      expect(screen.getByTestId("merchant-short-name")).toHaveTextContent(
-        "test-org"
-      );
+      expect(screen.getByTestId('merchant-short-name')).toHaveTextContent('test-org');
     });
 
-    it("should use recommended products heading from config", async () => {
+    it('should use recommended products heading from config', async () => {
       render(
         <TestWrapper>
           <TestComponent />
-        </TestWrapper>
+        </TestWrapper>,
       );
 
       await waitFor(() => {
-        expect(
-          screen.getByTestId("recommended-products-heading")
-        ).toHaveTextContent("Suggested Products");
+        expect(screen.getByTestId('recommended-products-heading')).toHaveTextContent(
+          'Suggested Products',
+        );
       });
     });
 
-    it("should use search overlay heading from config", async () => {
+    it('should use search overlay heading from config', async () => {
       render(
         <TestWrapper>
           <TestComponent />
-        </TestWrapper>
+        </TestWrapper>,
       );
 
       await waitFor(() => {
-        expect(screen.getByTestId("search-overlay-heading")).toHaveTextContent(
-          "What can I help you find?"
+        expect(screen.getByTestId('search-overlay-heading')).toHaveTextContent(
+          'What can I help you find?',
         );
       });
     });
   });
 
-  describe("Reset Search", () => {
-    it("should reset search when resetSearch is called", async () => {
+  describe('Reset Search', () => {
+    it('should reset search when resetSearch is called', async () => {
       const user = userEvent.setup();
       render(
         <TestWrapper query="test query">
           <TestComponent />
-        </TestWrapper>
+        </TestWrapper>,
       );
 
       await waitFor(() => {
-        expect(screen.getByTestId("reset-search")).toBeInTheDocument();
+        expect(screen.getByTestId('reset-search')).toBeInTheDocument();
       });
 
       await act(async () => {
-        await user.click(screen.getByTestId("reset-search"));
+        await user.click(screen.getByTestId('reset-search'));
       });
 
       // Reset should clear the search text
       await waitFor(() => {
-        expect(screen.getByTestId("search-text")).toHaveTextContent("");
+        expect(screen.getByTestId('search-text')).toHaveTextContent('');
       });
     });
   });
 
-  describe("Search Results Ref", () => {
-    it("should provide a ref for search results container", async () => {
+  describe('Search Results Ref', () => {
+    it('should provide a ref for search results container', async () => {
       render(
         <TestWrapper>
           <TestComponent />
-        </TestWrapper>
+        </TestWrapper>,
       );
 
       await waitFor(() => {
-        expect(screen.getByTestId("search-results-ref")).toBeInTheDocument();
+        expect(screen.getByTestId('search-results-ref')).toBeInTheDocument();
       });
 
-      const refElement = screen.getByTestId("search-results-ref");
-      expect(refElement).toHaveTextContent("Results Container");
+      const refElement = screen.getByTestId('search-results-ref');
+      expect(refElement).toHaveTextContent('Results Container');
     });
   });
 
-  describe("Allow Redirect Option", () => {
-    it("should pass allowRedirect option to performSearch", async () => {
+  describe('Allow Redirect Option', () => {
+    it('should pass allowRedirect option to performSearch', async () => {
       render(
         <TestWrapper allowRedirect={true}>
           <TestComponent allowRedirect={true} />
-        </TestWrapper>
+        </TestWrapper>,
       );
 
       await waitFor(() => {
-        expect(screen.getByTestId("test-component")).toBeInTheDocument();
+        expect(screen.getByTestId('test-component')).toBeInTheDocument();
       });
 
       // Component should render with allowRedirect option
-      expect(screen.getByTestId("test-component")).toBeInTheDocument();
+      expect(screen.getByTestId('test-component')).toBeInTheDocument();
     });
   });
 });
-