@envive-ai/react-hooks 0.3.57 → 0.3.59

package/src/hooks/Intersection/__tests__/useIntersection.test.ts

@@ -0,0 +1,134 @@
+import { act, renderHook } from '@testing-library/react';
+import { RefObject } from 'react';
+import { useIntersection } from '../useIntersection';
+
+class MockIntersectionObserver {
+  static instances: MockIntersectionObserver[] = [];
+
+  observedTargets: Element[] = [];
+
+  disconnected = false;
+
+  private callback: IntersectionObserverCallback;
+
+  constructor(callback: IntersectionObserverCallback) {
+    this.callback = callback;
+    MockIntersectionObserver.instances.push(this);
+  }
+
+  observe(target: Element) {
+    this.observedTargets.push(target);
+  }
+
+  disconnect() {
+    this.disconnected = true;
+  }
+
+  unobserve() {}
+
+  fire(isIntersecting: boolean, target: Element) {
+    this.callback(
+      [
+        {
+          isIntersecting,
+          intersectionRatio: isIntersecting ? 1 : 0,
+          boundingClientRect: {} as DOMRectReadOnly,
+          target,
+        } as IntersectionObserverEntry,
+      ],
+      this as unknown as IntersectionObserver,
+    );
+  }
+}
+
+const lastObserver = () =>
+  MockIntersectionObserver.instances[MockIntersectionObserver.instances.length - 1];
+
+describe('useIntersection', () => {
+  beforeEach(() => {
+    MockIntersectionObserver.instances = [];
+    vi.stubGlobal('IntersectionObserver', MockIntersectionObserver);
+  });
+
+  afterEach(() => {
+    vi.unstubAllGlobals();
+  });
+
+  it('observes the node and reports visibility when the observer fires', () => {
+    const node = document.createElement('span');
+    const ref: RefObject<HTMLElement> = { current: node };
+
+    const { result } = renderHook(() => useIntersection(ref, '0px'));
+
+    expect(MockIntersectionObserver.instances).toHaveLength(1);
+    expect(lastObserver().observedTargets).toEqual([node]);
+    expect(result.current).toBe(false);
+
+    act(() => {
+      lastObserver().fire(true, node);
+    });
+    expect(result.current).toBe(true);
+  });
+
+  it('attaches late when the ref starts out null', () => {
+    const ref = { current: null as HTMLElement | null };
+
+    const { rerender } = renderHook(() => useIntersection(ref as RefObject<HTMLElement>, '0px'));
+    expect(MockIntersectionObserver.instances).toHaveLength(0);
+
+    const node = document.createElement('span');
+    ref.current = node;
+    rerender();
+
+    expect(MockIntersectionObserver.instances).toHaveLength(1);
+    expect(lastObserver().observedTargets).toEqual([node]);
+  });
+
+  it('does not re-attach across rerenders while the node is unchanged', () => {
+    const node = document.createElement('span');
+    const ref: RefObject<HTMLElement> = { current: node };
+
+    const { rerender } = renderHook(() => useIntersection(ref, '0px'));
+    rerender();
+    rerender();
+
+    expect(MockIntersectionObserver.instances).toHaveLength(1);
+    expect(lastObserver().observedTargets).toEqual([node]);
+  });
+
+  it('re-attaches to the new node when the node under the ref is replaced', () => {
+    // Mount churn (e.g. a portal re-creating the widget subtree) can swap the DOM node
+    // while the hook instance survives. The old implementation kept observing the detached
+    // node forever, so the widget read as permanently not-visible and never fetched.
+    const nodeA = document.createElement('span');
+    const ref: RefObject<HTMLElement> = { current: nodeA };
+
+    const { result, rerender } = renderHook(() => useIntersection(ref, '0px'));
+    const firstObserver = lastObserver();
+    expect(firstObserver.observedTargets).toEqual([nodeA]);
+
+    const nodeB = document.createElement('span');
+    (ref as { current: HTMLElement | null }).current = nodeB;
+    rerender();
+
+    expect(firstObserver.disconnected).toBe(true);
+    expect(MockIntersectionObserver.instances).toHaveLength(2);
+    expect(lastObserver().observedTargets).toEqual([nodeB]);
+
+    // Visibility of the replacement node is now detected
+    act(() => {
+      lastObserver().fire(true, nodeB);
+    });
+    expect(result.current).toBe(true);
+  });
+
+  it('disconnects the observer on unmount', () => {
+    const node = document.createElement('span');
+    const ref: RefObject<HTMLElement> = { current: node };
+
+    const { unmount } = renderHook(() => useIntersection(ref, '0px'));
+    unmount();
+
+    expect(lastObserver().disconnected).toBe(true);
+  });
+});

package/src/hooks/Intersection/useIntersection.ts

@@ -7,23 +7,37 @@ const logger = new Logger('useIntersection');
 export const useIntersection = (element: RefObject<HTMLElement>, rootMargin: string) => {
   const [isVisible, setIsVisible] = useState(false);
   const observerRef = useRef<IntersectionObserver | null>(null);
+  const observedNodeRef = useRef<HTMLElement | null>(null);
 
-  // Runs after every render so it catches when element.current transitions from null
-  // to a mounted DOM node (e.g. when a conditionally-rendered element first appears).
-  // Bails immediately once the observer is attached, keeping per-render cost O(1).
+  // Runs after every render so it catches when element.current transitions from null to a
+  // mounted DOM node, AND when the node under the ref is replaced. The replacement case is
+  // load-bearing: mount churn (e.g. the shadow-root portal re-creating the widget subtree)
+  // can swap the DOM node while this hook instance survives, and an observer left on the
+  // detached old node never fires again — the widget then reads as permanently not-visible
+  // and never starts loading. Bails once the current node is the one being observed,
+  // keeping per-render cost O(1).
   useEffect(() => {
     const current = element?.current;
     logger.logDebug('effect ran', {
       elementCurrent: current,
       rootMargin,
       alreadyObserving: !!observerRef.current,
+      observingCurrentNode: observedNodeRef.current === current,
     });
 
     if (!current) {
       logger.logDebug('element.current is null — observer NOT attached');
       return;
     }
-    if (observerRef.current) return; // already observing
+    if (observedNodeRef.current === current) return; // already observing this exact node
+
+    if (observerRef.current) {
+      logger.logDebug('observed node was replaced — re-attaching observer', {
+        previousNode: observedNodeRef.current,
+        newNode: current,
+      });
+      observerRef.current.disconnect();
+    }
 
     const observer = new IntersectionObserver(
       ([entry]) => {
@@ -40,6 +54,7 @@ export const useIntersection = (element: RefObject<HTMLElement>, rootMargin: str
 
     observer.observe(current);
     observerRef.current = observer;
+    observedNodeRef.current = current;
     logger.logDebug('observer attached to element', current);
   });
 
@@ -48,6 +63,7 @@ export const useIntersection = (element: RefObject<HTMLElement>, rootMargin: str
     return () => {
       observerRef.current?.disconnect();
       observerRef.current = null;
+      observedNodeRef.current = null;
     };
   }, []);
 

package/src/services/enviveConfigService/__tests__/enviveConfigService.test.ts

@@ -3,35 +3,30 @@ import { EnviveConfigService } from '../enviveConfigService';
 const mockFetch = vi.fn();
 globalThis.fetch = mockFetch;
 
-const ORG_CONFIG_RESPONSE = {
-  org: {
-    org: {
-      id: 'org-1',
-      short_name: 'test-org',
-      display_name: 'Test Org',
-      domain: 'test.com',
-      status: 'active',
-      created_at: '2024-01-01T00:00:00.000Z',
-      updated_at: '2024-01-01T00:00:00.000Z',
-    },
-  },
-  gates: [],
-};
-
-function makeOkOrgConfigFetch(overrides: Record<string, unknown> = {}) {
-  mockFetch.mockResolvedValueOnce({
-    ok: true,
-    json: () => Promise.resolve({ ...ORG_CONFIG_RESPONSE, ...overrides }),
-  });
-}
-
-// productsConfig has no colors, so fetchGraphQLConfig falls back to its mock
-// config (see fetchGraphQLConfig.test.ts "no colors fallback") - fine here
-// since these tests only care about caching/fetch-count behaviour.
-function makeOkGraphqlFetch() {
+// getWidgetConfig is the single config call now: it returns org identity +
+// gates + experiment assignments alongside productsConfig (the separate
+// GET /v1/org/config fetch was removed). productsConfig has no colors, so
+// fetchUnifiedGraphQLConfig falls back to its mock config — fine here since
+// these tests only care about caching / fetch-count behaviour.
+function makeOkConfigFetch() {
   mockFetch.mockResolvedValueOnce({
     ok: true,
-    json: () => Promise.resolve({ data: { me: { getProductsConfigByVersion: {} } } }),
+    json: () =>
+      Promise.resolve({
+        data: {
+          me: {
+            org: {
+              id: 'org-1',
+              shortName: 'test-org',
+              displayName: 'Test Org',
+              domain: 'test.com',
+              createdAt: '2024-01-01T00:00:00.000Z',
+              updatedAt: '2024-01-01T00:00:00.000Z',
+            },
+            getWidgetConfig: { productsConfig: {}, gates: [], experimentAssignments: [] },
+          },
+        },
+      }),
   });
 }
 
@@ -60,27 +55,25 @@ afterEach(() => {
 });
 
 describe('EnviveConfigService caching', () => {
-  it('fetches org config + GraphQL config on a cold cache', async () => {
-    makeOkOrgConfigFetch();
-    makeOkGraphqlFetch();
+  it('fetches the unified config once on a cold cache', async () => {
+    makeOkConfigFetch();
 
     const result = await makeService().getEnviveConfig();
 
-    expect(mockFetch).toHaveBeenCalledTimes(2);
+    expect(mockFetch).toHaveBeenCalledTimes(1);
     expect(result.org.org.id).toBe('org-1');
   });
 
   it('serves a warm cache to a new instance with identical params without hitting the network', async () => {
-    makeOkOrgConfigFetch();
-    makeOkGraphqlFetch();
+    makeOkConfigFetch();
     await makeService().getEnviveConfig();
-    expect(mockFetch).toHaveBeenCalledTimes(2);
+    expect(mockFetch).toHaveBeenCalledTimes(1);
 
     // A fresh instance (as happens on the next page navigation) should read
     // from the sessionStorage cache instead of refetching.
     const result = await makeService().getEnviveConfig();
 
-    expect(mockFetch).toHaveBeenCalledTimes(2);
+    expect(mockFetch).toHaveBeenCalledTimes(1);
     expect(result.org.org.id).toBe('org-1');
   });
 
@@ -88,18 +81,16 @@ describe('EnviveConfigService caching', () => {
     vi.useFakeTimers();
     vi.setSystemTime(new Date('2026-01-01T00:00:00.000Z'));
 
-    makeOkOrgConfigFetch();
-    makeOkGraphqlFetch();
+    makeOkConfigFetch();
     await makeService().getEnviveConfig();
-    expect(mockFetch).toHaveBeenCalledTimes(2);
+    expect(mockFetch).toHaveBeenCalledTimes(1);
 
     vi.setSystemTime(new Date('2026-01-01T00:05:01.000Z'));
 
-    makeOkOrgConfigFetch();
-    makeOkGraphqlFetch();
+    makeOkConfigFetch();
     await makeService().getEnviveConfig();
 
-    expect(mockFetch).toHaveBeenCalledTimes(4);
+    expect(mockFetch).toHaveBeenCalledTimes(2);
   });
 
   it.each(['envive_config_version', 'spiffy_config_version'])(
@@ -107,59 +98,51 @@ describe('EnviveConfigService caching', () => {
     async param => {
       window.history.replaceState({}, '', `/?${param}=1.2.3`);
 
-      makeOkOrgConfigFetch();
-      makeOkGraphqlFetch();
+      makeOkConfigFetch();
       await makeService().getEnviveConfig();
-      expect(mockFetch).toHaveBeenCalledTimes(2);
+      expect(mockFetch).toHaveBeenCalledTimes(1);
 
-      makeOkOrgConfigFetch();
-      makeOkGraphqlFetch();
+      makeOkConfigFetch();
       await makeService().getEnviveConfig();
 
       // No cache read/write happened, so a second instance refetches instead
       // of reusing anything the first instance stored.
-      expect(mockFetch).toHaveBeenCalledTimes(4);
+      expect(mockFetch).toHaveBeenCalledTimes(2);
     },
   );
 
   it('does not read a version-pinned cache entry after the override is removed', async () => {
     window.history.replaceState({}, '', '/?envive_config_version=1.2.3');
-    makeOkOrgConfigFetch();
-    makeOkGraphqlFetch();
+    makeOkConfigFetch();
     await makeService().getEnviveConfig();
 
     window.history.replaceState({}, '', '/');
-    makeOkOrgConfigFetch();
-    makeOkGraphqlFetch();
+    makeOkConfigFetch();
     await makeService().getEnviveConfig();
 
-    expect(mockFetch).toHaveBeenCalledTimes(4);
+    expect(mockFetch).toHaveBeenCalledTimes(2);
   });
 
   it('keeps separate cache entries per userId', async () => {
-    makeOkOrgConfigFetch();
-    makeOkGraphqlFetch();
+    makeOkConfigFetch();
     await makeService({ userId: 'user-1' }).getEnviveConfig();
-    expect(mockFetch).toHaveBeenCalledTimes(2);
+    expect(mockFetch).toHaveBeenCalledTimes(1);
 
-    makeOkOrgConfigFetch();
-    makeOkGraphqlFetch();
+    makeOkConfigFetch();
     await makeService({ userId: 'user-2' }).getEnviveConfig();
 
-    expect(mockFetch).toHaveBeenCalledTimes(4);
+    expect(mockFetch).toHaveBeenCalledTimes(2);
   });
 
   it('keeps separate cache entries per namespace/source/baseUrl/apiKey', async () => {
-    makeOkOrgConfigFetch();
-    makeOkGraphqlFetch();
+    makeOkConfigFetch();
     await makeService({ namespace: 'ns-a' }).getEnviveConfig();
-    expect(mockFetch).toHaveBeenCalledTimes(2);
+    expect(mockFetch).toHaveBeenCalledTimes(1);
 
-    makeOkOrgConfigFetch();
-    makeOkGraphqlFetch();
+    makeOkConfigFetch();
     await makeService({ namespace: 'ns-b' }).getEnviveConfig();
 
-    expect(mockFetch).toHaveBeenCalledTimes(4);
+    expect(mockFetch).toHaveBeenCalledTimes(2);
   });
 
   it('fails open and still returns config when sessionStorage.setItem throws', async () => {
@@ -167,8 +150,7 @@ describe('EnviveConfigService caching', () => {
       throw new Error('quota exceeded');
     });
 
-    makeOkOrgConfigFetch();
-    makeOkGraphqlFetch();
+    makeOkConfigFetch();
 
     const result = await makeService().getEnviveConfig();
 
@@ -180,8 +162,7 @@ describe('EnviveConfigService caching', () => {
       throw new Error('storage disabled');
     });
 
-    makeOkOrgConfigFetch();
-    makeOkGraphqlFetch();
+    makeOkConfigFetch();
 
     const result = await makeService().getEnviveConfig();
 
@@ -190,17 +171,12 @@ describe('EnviveConfigService caching', () => {
 
   it('fails open and refetches when a cached entry is corrupted JSON', async () => {
     const service = makeService();
-    // Seed a corrupted entry under whatever key the service reads from by
-    // populating every session storage key with garbage after a real write,
-    // then corrupting it directly.
-    makeOkOrgConfigFetch();
-    makeOkGraphqlFetch();
+    makeOkConfigFetch();
     await service.getEnviveConfig();
     const [key] = Object.keys(sessionStorage);
     sessionStorage.setItem(key, 'not json');
 
-    makeOkOrgConfigFetch();
-    makeOkGraphqlFetch();
+    makeOkConfigFetch();
     const result = await makeService().getEnviveConfig();
 
     expect(result.org.org.id).toBe('org-1');