@times-components/ts-components 1.140.5 → 1.141.0

package/src/helpers/algolia/__tests__/AlgoliaSearchProvider.test.tsx

@@ -0,0 +1,367 @@
+import React from 'react';
+import { render, waitFor } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import {
+  AlgoliaSearchProvider,
+  useAlgoliaSearch
+} from '../AlgoliaSearchProvider';
+
+jest.mock('algoliasearch', () => {
+  return jest.fn(() => ({
+    initIndex: jest.fn()
+  }));
+});
+
+jest.mock('../algoliaRelatedArticles', () => ({
+  searchRelatedArticles: jest.fn()
+}));
+
+import algoliasearch from 'algoliasearch';
+import { searchRelatedArticles } from '../algoliaRelatedArticles';
+
+const mockAlgoliasearch = algoliasearch as jest.MockedFunction<
+  typeof algoliasearch
+>;
+const mockSearchRelatedArticles = searchRelatedArticles as jest.MockedFunction<
+  typeof searchRelatedArticles
+>;
+
+const TestComponent: React.FC = () => {
+  const { getRelatedArticles } = useAlgoliaSearch();
+
+  React.useEffect(
+    () => {
+      if (getRelatedArticles) {
+        getRelatedArticles();
+      }
+    },
+    [getRelatedArticles]
+  );
+
+  return <div data-testid="test-component">Test Component</div>;
+};
+
+const mockAnalyticsStream = jest.fn();
+
+const mockAlgoliaSearchKeys = {
+  applicationId: 'test-app-id',
+  apiKey: 'test-api-key',
+  indexName: 'test-index'
+};
+
+const mockArticle = {
+  id: 'test-article-123',
+  label: 'Test Article Label',
+  headline: 'Test Article Headline',
+  section: 'news',
+  topics: [{ name: 'Technology' }],
+  bylines: []
+};
+
+describe('AlgoliaSearchProvider', () => {
+  let mockIndex: any;
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+    mockIndex = {
+      search: jest.fn()
+    };
+    mockAlgoliasearch.mockReturnValue({
+      initIndex: jest.fn().mockReturnValue(mockIndex)
+    } as any);
+  });
+
+  describe('Provider functionality', () => {
+    it('should render children correctly', () => {
+      const { getByTestId } = render(
+        <AlgoliaSearchProvider
+          algoliaSearchKeys={mockAlgoliaSearchKeys}
+          article={mockArticle}
+          analyticsStream={mockAnalyticsStream}
+        >
+          <div data-testid="child-component">Child Content</div>
+        </AlgoliaSearchProvider>
+      );
+
+      expect(getByTestId('child-component')).toBeInTheDocument();
+    });
+
+    it('should create algolia index with correct parameters', () => {
+      render(
+        <AlgoliaSearchProvider
+          algoliaSearchKeys={mockAlgoliaSearchKeys}
+          article={mockArticle}
+          analyticsStream={mockAnalyticsStream}
+        >
+          <div>Content</div>
+        </AlgoliaSearchProvider>
+      );
+
+      expect(mockAlgoliasearch).toHaveBeenCalledWith(
+        'test-app-id',
+        'test-api-key'
+      );
+      expect(
+        mockAlgoliasearch('test-app-id', 'test-api-key').initIndex
+      ).toHaveBeenCalledWith('test-index');
+    });
+
+    it('should handle null algoliaSearchKeys', () => {
+      render(
+        <AlgoliaSearchProvider
+          algoliaSearchKeys={null as any}
+          article={mockArticle}
+          analyticsStream={mockAnalyticsStream}
+        >
+          <div>Content</div>
+        </AlgoliaSearchProvider>
+      );
+
+      expect(mockAlgoliasearch).not.toHaveBeenCalled();
+    });
+
+    it('should recreate index when algoliaSearchKeys change', () => {
+      const { rerender } = render(
+        <AlgoliaSearchProvider
+          algoliaSearchKeys={mockAlgoliaSearchKeys}
+          article={mockArticle}
+          analyticsStream={mockAnalyticsStream}
+        >
+          <div>Content</div>
+        </AlgoliaSearchProvider>
+      );
+
+      expect(mockAlgoliasearch).toHaveBeenCalledTimes(1);
+
+      const newKeys = {
+        ...mockAlgoliaSearchKeys,
+        applicationId: 'new-app-id'
+      };
+
+      rerender(
+        <AlgoliaSearchProvider
+          algoliaSearchKeys={newKeys}
+          article={mockArticle}
+          analyticsStream={mockAnalyticsStream}
+        >
+          <div>Content</div>
+        </AlgoliaSearchProvider>
+      );
+
+      expect(mockAlgoliasearch).toHaveBeenCalledTimes(2);
+      expect(mockAlgoliasearch).toHaveBeenLastCalledWith(
+        'new-app-id',
+        'test-api-key'
+      );
+    });
+  });
+
+  describe('getRelatedArticles functionality', () => {
+    it('should call searchRelatedArticles with correct parameters when index and article exist', async () => {
+      const mockResults = {
+        query: 'test query',
+        sliceName: 'test slice',
+        items: [],
+        count: 5
+      };
+      mockSearchRelatedArticles.mockResolvedValue(mockResults);
+
+      render(
+        <AlgoliaSearchProvider
+          algoliaSearchKeys={mockAlgoliaSearchKeys}
+          article={mockArticle}
+          analyticsStream={mockAnalyticsStream}
+        >
+          <TestComponent />
+        </AlgoliaSearchProvider>
+      );
+
+      await waitFor(() => {
+        expect(mockSearchRelatedArticles).toHaveBeenCalledWith(
+          mockIndex,
+          mockArticle,
+          mockAnalyticsStream
+        );
+      });
+    });
+
+    it('should return null when no index is available', async () => {
+      let resultFromHook: any;
+
+      const TestComponentWithResult: React.FC = () => {
+        const { getRelatedArticles } = useAlgoliaSearch();
+
+        React.useEffect(
+          () => {
+            const fetchResults = async () => {
+              if (getRelatedArticles) {
+                resultFromHook = await getRelatedArticles();
+              }
+            };
+            fetchResults();
+          },
+          [getRelatedArticles]
+        );
+
+        return <div>Test</div>;
+      };
+
+      render(
+        <AlgoliaSearchProvider
+          algoliaSearchKeys={null as any}
+          article={mockArticle}
+          analyticsStream={mockAnalyticsStream}
+        >
+          <TestComponentWithResult />
+        </AlgoliaSearchProvider>
+      );
+
+      await waitFor(() => {
+        expect(resultFromHook).toBeNull();
+      });
+      expect(mockSearchRelatedArticles).not.toHaveBeenCalled();
+    });
+
+    it('should return null when no article is provided', async () => {
+      let resultFromHook: any;
+
+      const TestComponentWithResult: React.FC = () => {
+        const { getRelatedArticles } = useAlgoliaSearch();
+
+        React.useEffect(
+          () => {
+            const fetchResults = async () => {
+              if (getRelatedArticles) {
+                resultFromHook = await getRelatedArticles();
+              }
+            };
+            fetchResults();
+          },
+          [getRelatedArticles]
+        );
+
+        return <div>Test</div>;
+      };
+
+      render(
+        <AlgoliaSearchProvider
+          algoliaSearchKeys={mockAlgoliaSearchKeys}
+          article={null}
+          analyticsStream={mockAnalyticsStream}
+        >
+          <TestComponentWithResult />
+        </AlgoliaSearchProvider>
+      );
+
+      await waitFor(() => {
+        expect(resultFromHook).toBeNull();
+      });
+      expect(mockSearchRelatedArticles).not.toHaveBeenCalled();
+    });
+
+    it('should return results from searchRelatedArticles', async () => {
+      const mockResults = {
+        query: 'test query',
+        sliceName: 'test slice',
+        items: [{ id: 1 }, { id: 2 }, { id: 3 }],
+        count: 3
+      };
+      mockSearchRelatedArticles.mockResolvedValue(mockResults);
+
+      let resultFromHook: any;
+
+      const TestComponentWithResult: React.FC = () => {
+        const { getRelatedArticles } = useAlgoliaSearch();
+
+        React.useEffect(
+          () => {
+            const fetchResults = async () => {
+              if (getRelatedArticles) {
+                resultFromHook = await getRelatedArticles();
+              }
+            };
+            fetchResults();
+          },
+          [getRelatedArticles]
+        );
+
+        return <div>Test</div>;
+      };
+
+      render(
+        <AlgoliaSearchProvider
+          algoliaSearchKeys={mockAlgoliaSearchKeys}
+          article={mockArticle}
+          analyticsStream={mockAnalyticsStream}
+        >
+          <TestComponentWithResult />
+        </AlgoliaSearchProvider>
+      );
+
+      await waitFor(() => {
+        expect(resultFromHook).toEqual(mockResults);
+      });
+    });
+
+    it('should memoize getRelatedArticles callback based on dependencies', () => {
+      let firstCallback: any;
+      let secondCallback: any;
+
+      const CallbackCapture: React.FC = () => {
+        const { getRelatedArticles } = useAlgoliaSearch();
+        if (!firstCallback) {
+          firstCallback = getRelatedArticles;
+        } else if (!secondCallback) {
+          secondCallback = getRelatedArticles;
+        }
+        return <div>Test</div>;
+      };
+
+      const { rerender } = render(
+        <AlgoliaSearchProvider
+          algoliaSearchKeys={mockAlgoliaSearchKeys}
+          article={mockArticle}
+          analyticsStream={mockAnalyticsStream}
+        >
+          <CallbackCapture />
+        </AlgoliaSearchProvider>
+      );
+
+      rerender(
+        <AlgoliaSearchProvider
+          algoliaSearchKeys={mockAlgoliaSearchKeys}
+          article={mockArticle}
+          analyticsStream={mockAnalyticsStream}
+        >
+          <CallbackCapture />
+        </AlgoliaSearchProvider>
+      );
+
+      expect(firstCallback).toBe(secondCallback);
+    });
+  });
+
+  describe('useAlgoliaSearch hook', () => {
+    it('should provide context value when used within provider', () => {
+      let contextValue: any;
+
+      const TestComponentInsideProvider: React.FC = () => {
+        contextValue = useAlgoliaSearch();
+        return <div>Test</div>;
+      };
+
+      render(
+        <AlgoliaSearchProvider
+          algoliaSearchKeys={mockAlgoliaSearchKeys}
+          article={mockArticle}
+          analyticsStream={mockAnalyticsStream}
+        >
+          <TestComponentInsideProvider />
+        </AlgoliaSearchProvider>
+      );
+
+      expect(contextValue).toHaveProperty('getRelatedArticles');
+      expect(typeof contextValue.getRelatedArticles).toBe('function');
+    });
+  });
+});