Prevent Android first-layer readiness race

examples/consentmanager/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @contentpass/examples-consentmanager
 
+## 0.0.9
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @contentpass/react-native-contentpass-ui@0.7.2
+
 ## 0.0.8
 
 ### Patch Changes

examples/consentmanager/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@contentpass/examples-consentmanager",
-  "version": "0.0.8",
+  "version": "0.0.9",
   "main": "index.ts",
   "scripts": {
     "start": "expo start",

packages/react-native-contentpass-ui/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @contentpass/react-native-contentpass-ui
 
+## 0.7.2
+
+### Patch Changes
+
+- Prevent Android first-layer readiness race
+
 ## 0.7.1
 
 ### Patch Changes

packages/react-native-contentpass-ui/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@contentpass/react-native-contentpass-ui",
-  "version": "0.7.1",
+  "version": "0.7.2",
   "description": "Contentpass React Native UI Components",
   "source": "./src/index.tsx",
   "main": "./lib/commonjs/index.js",

packages/react-native-contentpass-ui/src/components/ContentpassLayer.test.ts

@@ -7,9 +7,14 @@ jest.mock('react-native-webview', () => ({
 
 type WindowMock = {
   postMessage: (...args: unknown[]) => void;
+  parent?: {
+    postMessage: (...args: unknown[]) => void;
+  };
   ReactNativeWebView?: {
     postMessage: (message: string) => void;
   };
+  __cpRnPendingMessages?: string[];
+  __cpRnBridgeInterval?: number | null;
 };
 
 type DocumentParentMock = {
@@ -57,6 +62,11 @@ describe('ContentpassLayer', () => {
     expect(readyAfterLoadStart).toBe(true);
     expect(layerReadyReducer(readyAfterLoadStart, 'url-changed')).toBe(false);
   });
+
+  it('becomes visible when load-end fires without a ready message', () => {
+    expect(layerReadyReducer(false, 'load-ended')).toBe(true);
+    expect(layerReadyReducer(true, 'load-started')).toBe(true);
+  });
 });
 
 describe('EARLY_INJECT_JS', () => {
@@ -145,4 +155,83 @@ describe('EARLY_INJECT_JS', () => {
     expect(style.textContent).toContain('animation-duration: 0s');
     expect(appendChild).toHaveBeenCalledWith(style);
   });
+
+  it('forwards parent.postMessage when parent is not the same window', () => {
+    const originalWindowPostMessage = jest.fn();
+    const originalParentPostMessage = jest.fn();
+    const parent = { postMessage: originalParentPostMessage };
+    const window: WindowMock = {
+      postMessage: originalWindowPostMessage,
+      parent,
+    };
+    const document: DocumentMock = {
+      head: { appendChild: jest.fn() },
+      documentElement: null,
+      createElement: jest.fn(() => ({ textContent: '' })),
+      addEventListener: jest.fn(),
+    };
+    const intervalCallbacks = new Map<number, () => void>();
+    const setInterval = jest.fn((callback: () => void) => {
+      const intervalId = intervalCallbacks.size + 1;
+      intervalCallbacks.set(intervalId, callback);
+      return intervalId;
+    });
+    const clearInterval = jest.fn((intervalId: number) => {
+      intervalCallbacks.delete(intervalId);
+    });
+
+    executeEarlyInjection({
+      window,
+      document,
+      setInterval,
+      clearInterval,
+    });
+
+    const readyMessage = {
+      protocol: 'contentpass-first-layer',
+      type: 'REQUEST',
+      action: 'FIRST_LAYER_READY',
+    };
+    parent.postMessage(readyMessage, '*');
+
+    expect(originalParentPostMessage).toHaveBeenCalledWith(readyMessage, '*');
+    expect(originalWindowPostMessage).not.toHaveBeenCalled();
+
+    const nativePostMessage = jest.fn();
+    window.ReactNativeWebView = { postMessage: nativePostMessage };
+    intervalCallbacks.get(1)?.();
+
+    expect(nativePostMessage).toHaveBeenCalledWith(
+      JSON.stringify(readyMessage)
+    );
+    expect(clearInterval).toHaveBeenCalledWith(1);
+  });
+
+  it('is safe to inject twice without starting a second bridge interval', () => {
+    const window: WindowMock = { postMessage: jest.fn() };
+    const document: DocumentMock = {
+      head: { appendChild: jest.fn() },
+      documentElement: null,
+      createElement: jest.fn(() => ({ textContent: '' })),
+      addEventListener: jest.fn(),
+    };
+    const setInterval = jest.fn(() => 7);
+    const clearInterval = jest.fn();
+
+    executeEarlyInjection({
+      window,
+      document,
+      setInterval,
+      clearInterval,
+    });
+    executeEarlyInjection({
+      window,
+      document,
+      setInterval,
+      clearInterval,
+    });
+
+    expect(setInterval).toHaveBeenCalledTimes(1);
+    expect(window.__cpRnBridgeInterval).toBe(7);
+  });
 });