@envive-ai/react-widgets-v3 0.3.2

package/src/hocs/withBaseWidget/__tests__/withBaseWidget.test.tsx

@@ -0,0 +1,689 @@
+import { render, screen, waitFor } from '@testing-library/react';
+import { RefObject } from 'react';
+import { SpiffyMetricsEventName } from '@envive-ai/react-hooks/contexts/amplitudeContext';
+import { HardcopyResponse } from '@envive-ai/react-hooks/contexts/hardcopyContext';
+import { WidgetTypeV3 } from '@envive-ai/react-hooks/contexts/typesV3';
+import { UserEvent, UserEventCategory } from '@spiffy-ai/commerce-api-client';
+import { BaseWidgetProps } from '../types';
+import { withBaseWidget } from '../withBaseWidget';
+
+// Mock IntersectionObserver
+class MockIntersectionObserver implements IntersectionObserver {
+  observe = vi.fn();
+
+  disconnect = vi.fn();
+
+  unobserve = vi.fn();
+
+  root: Element | null = null;
+
+  rootMargin: string = '';
+
+  thresholds: ReadonlyArray<number> = [];
+
+  private callback: (entries: IntersectionObserverEntry[]) => void;
+
+  private options?: IntersectionObserverInit;
+
+  constructor(
+    callback: (entries: IntersectionObserverEntry[]) => void,
+    options?: IntersectionObserverInit,
+  ) {
+    this.callback = callback;
+    this.options = options;
+    if (options) {
+      this.rootMargin = options.rootMargin || '';
+    }
+  }
+
+  // Helper method to trigger intersection
+  triggerIntersection(isIntersecting: boolean, target?: Element) {
+    const entry = {
+      isIntersecting,
+      intersectionRatio: isIntersecting ? 1 : 0,
+      boundingClientRect: {} as DOMRectReadOnly,
+      rootBounds: {} as DOMRectReadOnly,
+      target: target || ({} as Element),
+      time: Date.now(),
+    } as IntersectionObserverEntry;
+
+    this.callback([entry]);
+  }
+
+  // Helper method to get options
+  getOptions() {
+    return this.options;
+  }
+
+  // Required by IntersectionObserver interface but not used in tests
+  // eslint-disable-next-line class-methods-use-this
+  takeRecords(): IntersectionObserverEntry[] {
+    return [];
+  }
+}
+
+// Mock the contexts
+const mockTrackEvent = vi.fn();
+const mockGetHardcopy = vi.fn();
+
+vi.mock('src/contexts/amplitudeContext/amplitudeContext', () => ({
+  useAmplitude: () => ({
+    trackEvent: mockTrackEvent,
+    isReady: true,
+  }),
+  SpiffyMetricsEventName: {
+    ChatComponentVisible: 'Chat Component Visible',
+    SearchComponentVisible: 'Search Component Visible',
+  },
+}));
+
+vi.mock('src/contexts/hardcopyContext', () => ({
+  useHardcopy: () => ({
+    getHardcopy: mockGetHardcopy,
+  }),
+}));
+
+vi.mock('src/contexts/pageContext', () => ({
+  usePage: () => ({
+    userEvent: {
+      id: 'test-user-event-id',
+      category: UserEventCategory.PageVisit,
+      created_at: '2025-01-01T00:00:00Z',
+      event_id: 'test-event-id',
+    } as UserEvent,
+  }),
+}));
+
+// Test widget component
+interface TestWidgetProps extends BaseWidgetProps {
+  testId?: string;
+  children?: React.ReactNode;
+}
+
+const TestWidget: React.FC<TestWidgetProps> = ({
+  widgetConfigId,
+  widgetType,
+  hardcopyContent,
+  observedWidget,
+  testId = 'test-widget',
+  children,
+}) => {
+  // Attach the ref to the root div so IntersectionObserver can observe it
+  // Note: The ref type is RefObject<HTMLDivElement> but BaseWidgetProps expects RefObject<BaseWidgetProps>
+  // This is a type mismatch in the implementation, but we handle it for testing
+  const ref = observedWidget as unknown as RefObject<HTMLDivElement> | undefined;
+
+  return (
+    <div
+      ref={ref}
+      data-testid={testId}
+    >
+      <div data-testid="widget-config-id">{widgetConfigId}</div>
+      <div data-testid="widget-type">{widgetType}</div>
+      {hardcopyContent && (
+        <div data-testid="hardcopy-content">
+          <div data-testid="hardcopy-language">{hardcopyContent.language}</div>
+          <div data-testid="hardcopy-values">{JSON.stringify(hardcopyContent.values)}</div>
+        </div>
+      )}
+      {observedWidget && <div data-testid="observed-widget-ref">Ref attached</div>}
+      {children}
+    </div>
+  );
+};
+
+describe('withBaseWidget', () => {
+  let mockObserver: MockIntersectionObserver;
+  let mockObservers: MockIntersectionObserver[];
+  let originalIntersectionObserver: typeof IntersectionObserver;
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+    mockObservers = [];
+
+    // Set default mock for getHardcopy to return a resolved promise
+    mockGetHardcopy.mockResolvedValue({
+      language: 'en',
+      values: {},
+    });
+
+    // Store original IntersectionObserver
+    originalIntersectionObserver = global.IntersectionObserver;
+
+    // Replace IntersectionObserver with mock class
+    global.IntersectionObserver = class extends MockIntersectionObserver {
+      constructor(
+        callback: (entries: IntersectionObserverEntry[]) => void,
+        options?: IntersectionObserverInit,
+      ) {
+        super(callback, options);
+        // eslint-disable-next-line @typescript-eslint/no-this-alias
+        mockObserver = this;
+        mockObservers.push(this);
+      }
+    } as unknown as typeof IntersectionObserver;
+  });
+
+  afterEach(() => {
+    // Restore original IntersectionObserver
+    global.IntersectionObserver = originalIntersectionObserver;
+  });
+
+  describe('IntersectionObserver setup', () => {
+    it('should create an IntersectionObserver with default rootMargin', () => {
+      const WrappedWidget = withBaseWidget(TestWidget);
+      render(
+        <WrappedWidget
+          widgetConfigId="test-config-1"
+          widgetType={WidgetTypeV3.PromptCarouselV3}
+        />,
+      );
+
+      expect(mockObserver).toBeDefined();
+      expect(mockObserver.rootMargin).toBe('0px');
+    });
+
+    it('should create an IntersectionObserver with custom rootMargin', () => {
+      const WrappedWidget = withBaseWidget(TestWidget, {
+        rootMargin: '100px',
+      });
+      render(
+        <WrappedWidget
+          widgetConfigId="test-config-2"
+          widgetType={WidgetTypeV3.ChatPreviewV3}
+        />,
+      );
+
+      expect(mockObserver).toBeDefined();
+      expect(mockObserver.rootMargin).toBe('100px');
+    });
+
+    it('should observe the widget element', () => {
+      const WrappedWidget = withBaseWidget(TestWidget);
+      render(
+        <WrappedWidget
+          widgetConfigId="test-config-3"
+          widgetType={WidgetTypeV3.PromptCarouselV3}
+        />,
+      );
+
+      expect(mockObserver.observe).toHaveBeenCalled();
+    });
+  });
+
+  describe('Amplitude event tracking', () => {
+    it('should track default event when widget becomes visible', async () => {
+      const WrappedWidget = withBaseWidget(TestWidget);
+      const { container } = render(
+        <WrappedWidget
+          widgetConfigId="test-config-4"
+          widgetType={WidgetTypeV3.PromptCarouselV3}
+        />,
+      );
+
+      const widgetElement = container.querySelector('[data-testid="test-widget"]');
+
+      // Trigger intersection with the actual element
+      mockObserver.triggerIntersection(true, widgetElement as Element);
+
+      await waitFor(() => {
+        expect(mockTrackEvent).toHaveBeenCalledWith({
+          eventName: SpiffyMetricsEventName.ChatComponentVisible,
+          eventProps: {
+            widget_config_id: 'test-config-4',
+            widget_type: WidgetTypeV3.PromptCarouselV3,
+          },
+        });
+      });
+    });
+
+    it('should track custom event when widget becomes visible', async () => {
+      const WrappedWidget = withBaseWidget(TestWidget, {
+        visibilityEventName: SpiffyMetricsEventName.SearchComponentVisible,
+      });
+      const { container } = render(
+        <WrappedWidget
+          widgetConfigId="test-config-5"
+          widgetType={WidgetTypeV3.ChatPreviewV3}
+        />,
+      );
+
+      const widgetElement = container.querySelector('[data-testid="test-widget"]');
+
+      // Trigger intersection
+      mockObserver.triggerIntersection(true, widgetElement as Element);
+
+      await waitFor(() => {
+        expect(mockTrackEvent).toHaveBeenCalledWith({
+          eventName: SpiffyMetricsEventName.SearchComponentVisible,
+          eventProps: {
+            widget_config_id: 'test-config-5',
+            widget_type: WidgetTypeV3.ChatPreviewV3,
+          },
+        });
+      });
+    });
+
+    it('should include custom event props when tracking', async () => {
+      const WrappedWidget = withBaseWidget(TestWidget, {
+        visibilityEventProps: {
+          custom_prop: 'custom_value',
+          another_prop: 123,
+        },
+      });
+      const { container } = render(
+        <WrappedWidget
+          widgetConfigId="test-config-6"
+          widgetType={WidgetTypeV3.SocialProofV3}
+        />,
+      );
+
+      const widgetElement = container.querySelector('[data-testid="test-widget"]');
+
+      // Trigger intersection
+      mockObserver.triggerIntersection(true, widgetElement as Element);
+
+      await waitFor(() => {
+        expect(mockTrackEvent).toHaveBeenCalledWith({
+          eventName: SpiffyMetricsEventName.ChatComponentVisible,
+          eventProps: {
+            widget_config_id: 'test-config-6',
+            widget_type: WidgetTypeV3.SocialProofV3,
+            custom_prop: 'custom_value',
+            another_prop: 123,
+          },
+        });
+      });
+    });
+
+    it('should only track event once even if intersection happens multiple times', async () => {
+      const WrappedWidget = withBaseWidget(TestWidget);
+      const { container } = render(
+        <WrappedWidget
+          widgetConfigId="test-config-7"
+          widgetType={WidgetTypeV3.PromptCarouselV3}
+        />,
+      );
+
+      const widgetElement = container.querySelector('[data-testid="test-widget"]');
+
+      // Trigger intersection multiple times
+      mockObserver.triggerIntersection(true, widgetElement as Element);
+      mockObserver.triggerIntersection(false, widgetElement as Element);
+      mockObserver.triggerIntersection(true, widgetElement as Element);
+
+      await waitFor(() => {
+        expect(mockTrackEvent).toHaveBeenCalledTimes(1);
+      });
+    });
+
+    it('should disconnect observer after tracking event', async () => {
+      const WrappedWidget = withBaseWidget(TestWidget);
+      const { container } = render(
+        <WrappedWidget
+          widgetConfigId="test-config-8"
+          widgetType={WidgetTypeV3.PromptCarouselV3}
+        />,
+      );
+
+      const widgetElement = container.querySelector('[data-testid="test-widget"]');
+
+      // Trigger intersection
+      mockObserver.triggerIntersection(true, widgetElement as Element);
+
+      await waitFor(() => {
+        expect(mockObserver.disconnect).toHaveBeenCalled();
+      });
+    });
+
+    it('should not track event if widget is not intersecting', async () => {
+      const WrappedWidget = withBaseWidget(TestWidget);
+      const { container } = render(
+        <WrappedWidget
+          widgetConfigId="test-config-9"
+          widgetType={WidgetTypeV3.PromptCarouselV3}
+        />,
+      );
+
+      const widgetElement = container.querySelector('[data-testid="test-widget"]');
+
+      // Trigger non-intersection
+      mockObserver.triggerIntersection(false, widgetElement as Element);
+
+      // Wait a bit to ensure no event is tracked
+      await new Promise(resolve => {
+        setTimeout(resolve, 100);
+      });
+
+      expect(mockTrackEvent).not.toHaveBeenCalled();
+    });
+  });
+
+  describe('Hardcopy content fetching', () => {
+    it('should fetch hardcopy content when widget mounts', async () => {
+      const mockHardcopy: HardcopyResponse = {
+        language: 'en',
+        values: {
+          suggestionBarButtons: ['Button 1', 'Button 2'],
+        },
+      };
+
+      mockGetHardcopy.mockResolvedValue(mockHardcopy);
+
+      const WrappedWidget = withBaseWidget(TestWidget);
+      render(
+        <WrappedWidget
+          widgetConfigId="test-config-10"
+          widgetType={WidgetTypeV3.PromptCarouselV3}
+        />,
+      );
+
+      await waitFor(() => {
+        expect(mockGetHardcopy).toHaveBeenCalledWith({
+          widgetType: WidgetTypeV3.PromptCarouselV3,
+          userEvent: {
+            id: 'test-user-event-id',
+            category: UserEventCategory.PageVisit,
+            created_at: '2025-01-01T00:00:00Z',
+            event_id: 'test-event-id',
+          },
+        });
+      });
+    });
+
+    it('should pass hardcopy content to widget', async () => {
+      const mockHardcopy: HardcopyResponse = {
+        language: 'en',
+        values: {
+          chatPreviewTitle: 'Chat Preview Title',
+          typewriterTextPrefix: 'Want to know',
+        },
+      };
+
+      mockGetHardcopy.mockResolvedValue(mockHardcopy);
+
+      const WrappedWidget = withBaseWidget(TestWidget);
+      render(
+        <WrappedWidget
+          widgetConfigId="test-config-11"
+          widgetType={WidgetTypeV3.ChatPreviewV3}
+        />,
+      );
+
+      await waitFor(() => {
+        expect(screen.getByTestId('hardcopy-content')).toBeInTheDocument();
+        expect(screen.getByTestId('hardcopy-language')).toHaveTextContent('en');
+        expect(screen.getByTestId('hardcopy-values')).toHaveTextContent(
+          JSON.stringify(mockHardcopy.values),
+        );
+      });
+    });
+
+    it('should not fetch hardcopy if widgetType is not provided', () => {
+      const WrappedWidget = withBaseWidget(TestWidget);
+      // @ts-expect-error - Testing invalid props
+      render(<WrappedWidget widgetConfigId="test-config-12" />);
+
+      expect(mockGetHardcopy).not.toHaveBeenCalled();
+    });
+
+    it('should handle hardcopy fetch errors gracefully', async () => {
+      const error = new Error('Failed to fetch hardcopy');
+      mockGetHardcopy.mockRejectedValue(error);
+
+      const WrappedWidget = withBaseWidget(TestWidget);
+      render(
+        <WrappedWidget
+          widgetConfigId="test-config-13"
+          widgetType={WidgetTypeV3.PromptCarouselV3}
+        />,
+      );
+
+      await waitFor(() => {
+        expect(mockGetHardcopy).toHaveBeenCalled();
+      });
+
+      // Wait a bit for the promise to reject and be handled
+      await new Promise(resolve => {
+        setTimeout(resolve, 100);
+      });
+
+      // Widget should still render without hardcopy
+      expect(screen.getByTestId('test-widget')).toBeInTheDocument();
+      expect(screen.queryByTestId('hardcopy-content')).not.toBeInTheDocument();
+    });
+  });
+
+  describe('Widget rendering', () => {
+    it('should render the wrapped widget with correct props', () => {
+      const WrappedWidget = withBaseWidget(TestWidget);
+      render(
+        <WrappedWidget
+          widgetConfigId="test-config-14"
+          widgetType={WidgetTypeV3.PromptCarouselV3}
+        />,
+      );
+
+      expect(screen.getByTestId('test-widget')).toBeInTheDocument();
+      expect(screen.getByTestId('widget-config-id')).toHaveTextContent('test-config-14');
+      expect(screen.getByTestId('widget-type')).toHaveTextContent(WidgetTypeV3.PromptCarouselV3);
+    });
+
+    it('should pass observedWidget ref to the widget', () => {
+      const WrappedWidget = withBaseWidget(TestWidget);
+      render(
+        <WrappedWidget
+          widgetConfigId="test-config-15"
+          widgetType={WidgetTypeV3.PromptCarouselV3}
+        />,
+      );
+
+      expect(screen.getByTestId('observed-widget-ref')).toBeInTheDocument();
+    });
+
+    it('should render widget children correctly', () => {
+      const WrappedWidget = withBaseWidget(TestWidget);
+      render(
+        <WrappedWidget
+          widgetConfigId="test-config-16"
+          widgetType={WidgetTypeV3.PromptCarouselV3}
+        >
+          <div data-testid="child-content">Child Content</div>
+        </WrappedWidget>,
+      );
+
+      expect(screen.getByTestId('child-content')).toBeInTheDocument();
+      expect(screen.getByTestId('child-content')).toHaveTextContent('Child Content');
+    });
+
+    it('should render widget with hardcopy content when available', async () => {
+      const mockHardcopy: HardcopyResponse = {
+        language: 'en',
+        values: {
+          imagePromptTitle: 'Image Prompt Title',
+        },
+      };
+
+      mockGetHardcopy.mockResolvedValue(mockHardcopy);
+
+      const WrappedWidget = withBaseWidget(TestWidget);
+      render(
+        <WrappedWidget
+          widgetConfigId="test-config-17"
+          widgetType={WidgetTypeV3.ImagePromptCardV3}
+        />,
+      );
+
+      await waitFor(() => {
+        expect(screen.getByTestId('hardcopy-content')).toBeInTheDocument();
+      });
+
+      expect(screen.getByTestId('hardcopy-language')).toHaveTextContent('en');
+      expect(screen.getByTestId('hardcopy-values')).toHaveTextContent(
+        JSON.stringify(mockHardcopy.values),
+      );
+    });
+  });
+
+  describe('Integration tests', () => {
+    it('should handle full flow: visibility tracking + hardcopy rendering', async () => {
+      const mockHardcopy: HardcopyResponse = {
+        language: 'en',
+        values: {
+          suggestionBarButtons: ['Button 1', 'Button 2', 'Button 3'],
+        },
+      };
+
+      mockGetHardcopy.mockResolvedValue(mockHardcopy);
+
+      const WrappedWidget = withBaseWidget(TestWidget, {
+        visibilityEventName: SpiffyMetricsEventName.SearchComponentVisible,
+        visibilityEventProps: {
+          test_integration: true,
+        },
+      });
+
+      render(
+        <WrappedWidget
+          widgetConfigId="test-config-integration"
+          widgetType={WidgetTypeV3.PromptCarouselV3}
+        />,
+      );
+
+      // Wait for hardcopy to be fetched and rendered
+      await waitFor(() => {
+        expect(screen.getByTestId('hardcopy-content')).toBeInTheDocument();
+      });
+
+      const widgetElement = screen.getByTestId('test-widget');
+
+      // Trigger intersection to track event
+      mockObserver.triggerIntersection(true, widgetElement);
+
+      // Verify both hardcopy and event tracking worked
+      await waitFor(() => {
+        expect(mockTrackEvent).toHaveBeenCalledWith({
+          eventName: SpiffyMetricsEventName.SearchComponentVisible,
+          eventProps: {
+            widget_config_id: 'test-config-integration',
+            widget_type: WidgetTypeV3.PromptCarouselV3,
+            test_integration: true,
+          },
+        });
+      });
+
+      expect(screen.getByTestId('hardcopy-language')).toHaveTextContent('en');
+      expect(screen.getByTestId('hardcopy-values')).toHaveTextContent(
+        JSON.stringify(mockHardcopy.values),
+      );
+    });
+
+    it('should handle multiple widget instances independently', async () => {
+      const mockHardcopy1: HardcopyResponse = {
+        language: 'en',
+        values: { buttons: ['Button 1'] },
+      };
+      const mockHardcopy2: HardcopyResponse = {
+        language: 'en',
+        values: { buttons: ['Button 2'] },
+      };
+
+      mockGetHardcopy.mockResolvedValueOnce(mockHardcopy1).mockResolvedValueOnce(mockHardcopy2);
+
+      const WrappedWidget = withBaseWidget(TestWidget);
+
+      // Render both widgets simultaneously to test independence
+      render(
+        <>
+          <WrappedWidget
+            widgetConfigId="widget-1"
+            widgetType={WidgetTypeV3.PromptCarouselV3}
+            testId="widget-1"
+          />
+          <WrappedWidget
+            widgetConfigId="widget-2"
+            widgetType={WidgetTypeV3.ChatPreviewV3}
+            testId="widget-2"
+          />
+        </>,
+      );
+
+      // Wait for both widgets to render and fetch hardcopy
+      await waitFor(() => {
+        expect(screen.getByTestId('widget-1')).toBeInTheDocument();
+        expect(screen.getByTestId('widget-2')).toBeInTheDocument();
+      });
+
+      // Verify both widgets have their own config IDs
+      const widget1ConfigId = screen
+        .getByTestId('widget-1')
+        .querySelector('[data-testid="widget-config-id"]');
+      const widget2ConfigId = screen
+        .getByTestId('widget-2')
+        .querySelector('[data-testid="widget-config-id"]');
+      expect(widget1ConfigId).toHaveTextContent('widget-1');
+      expect(widget2ConfigId).toHaveTextContent('widget-2');
+
+      // Verify both widgets fetched their own hardcopy independently
+      expect(mockGetHardcopy).toHaveBeenCalledWith({
+        widgetType: WidgetTypeV3.PromptCarouselV3,
+        userEvent: expect.any(Object),
+      });
+      expect(mockGetHardcopy).toHaveBeenCalledWith({
+        widgetType: WidgetTypeV3.ChatPreviewV3,
+        userEvent: expect.any(Object),
+      });
+
+      // Verify first widget can trigger intersection and track event
+      // When multiple widgets are rendered, each creates its own IntersectionObserver
+      // We need to find the observer that's observing widget-1's element
+      const widget1Element = screen.getByTestId('widget-1');
+      const widget2Element = screen.getByTestId('widget-2');
+
+      // Clear any previous calls to isolate this test
+      mockTrackEvent.mockClear();
+
+      // Find which observer is observing widget-1 by checking which one was called with widget1Element
+      // In our mock setup, the first observer should be for widget-1, second for widget-2
+      const widget1Observer = mockObservers[0];
+      const widget2Observer = mockObservers[1];
+
+      // Verify we have both observers
+      expect(widget1Observer).toBeDefined();
+      expect(widget2Observer).toBeDefined();
+
+      // Trigger intersection for widget-1 using its observer
+      widget1Observer.triggerIntersection(true, widget1Element);
+
+      await waitFor(() => {
+        // Verify that an event was tracked for widget-1
+        expect(mockTrackEvent).toHaveBeenCalled();
+        const { calls } = mockTrackEvent.mock;
+        // Find any call that matches widget-1's properties
+        const widget1Call = calls.find(
+          // eslint-disable-next-line @typescript-eslint/no-explicit-any
+          (call: any) =>
+            call[0]?.eventProps?.widget_config_id === 'widget-1' &&
+            call[0]?.eventProps?.widget_type === WidgetTypeV3.PromptCarouselV3,
+        );
+        expect(widget1Call).toBeDefined();
+      });
+
+      // Verify widget-2 can also track independently
+      mockTrackEvent.mockClear();
+      widget2Observer.triggerIntersection(true, widget2Element);
+
+      await waitFor(() => {
+        expect(mockTrackEvent).toHaveBeenCalled();
+        const { calls } = mockTrackEvent.mock;
+        const widget2Call = calls.find(
+          // eslint-disable-next-line @typescript-eslint/no-explicit-any
+          (call: any) =>
+            call[0]?.eventProps?.widget_config_id === 'widget-2' &&
+            call[0]?.eventProps?.widget_type === WidgetTypeV3.ChatPreviewV3,
+        );
+        expect(widget2Call).toBeDefined();
+      });
+    });
+  });
+});

package/src/hocs/withBaseWidget/index.ts

@@ -0,0 +1,2 @@
+export { withBaseWidget } from './withBaseWidget';
+export type { BaseWidgetProps, WithBaseWidgetOptions } from './types';