@applicaster/zapp-react-native-utils 15.1.0-rc.8 → 16.0.0-alpha.1833861900

package/reactHooks/cell-click/index.ts

@@ -54,7 +54,7 @@ export const useCellClick = ({
     component?.rules?.component_cells_selectable
   );
 
-  const [__, setEntryContext] =
+  const [entryContext, setEntryContext] =
     ZappPipesEntryContext.useZappPipesContext(pathname);
 
   const logTimestamp = useProfilerLogging();
@@ -89,6 +89,7 @@ export const useCellClick = ({
           screenState,
           screenRoute: pathname,
           screenStateStore,
+          entryContext,
         });
       }
 

package/reactHooks/configuration/__tests__/index.test.tsx

@@ -1,6 +1,6 @@
 /* eslint-disable react/prop-types */
 import React from "react";
-import { renderHook, cleanup } from "@testing-library/react-hooks";
+import { renderHook, cleanup } from "@testing-library/react-native";
 import { ConfigurationContext } from "@applicaster/zapp-react-native-ui-components/Contexts/ConfigutaionContext";
 import { useConfiguration } from "@applicaster/zapp-react-native-utils/reactHooks/configuration";
 

package/reactHooks/connection/__tests__/index.test.js

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { renderHook, cleanup } from "@testing-library/react-hooks";
+import { renderHook, cleanup } from "@testing-library/react-native";
 import { NetworkStatusContext } from "@applicaster/zapp-react-native-ui-components/Contexts/NetworkStatusContext";
 
 const MockNetInfo = {

package/reactHooks/debugging/__tests__/index.test.js

@@ -27,20 +27,20 @@ describe("Debug utils", () => {
     it("should create new timer if timer with a label does not exist", () => {
       performanceNowMock.mockReturnValue(1000);
       time("timer1");
-      expect(timers["timer1"]).toBeDefined();
-      expect(timers["timer1"].startTime).toBe(1000);
+      expect(timers.timer1).toBeDefined();
+      expect(timers.timer1.startTime).toBe(1000);
     });
 
     it("should update start time of timer if timer with a label exists", () => {
       // First call to time()
       performanceNowMock.mockReturnValue(1000);
       time("timer1");
-      const previousStartTime = timers["timer1"].startTime;
+      const previousStartTime = timers.timer1.startTime;
 
       // Second call to time()
       performanceNowMock.mockReturnValue(2000);
       time("timer1");
-      const currentStartTime = timers["timer1"].startTime;
+      const currentStartTime = timers.timer1.startTime;
 
       expect(previousStartTime).toBe(1000);
       expect(currentStartTime).toBe(2000);

package/reactHooks/dev/__tests__/useReRenderLog.test.ts

@@ -0,0 +1,188 @@
+import { renderHook } from "@testing-library/react-native";
+import { useReRenderLog } from "../index";
+
+describe("useReRenderLog", () => {
+  let consoleLogSpy: jest.SpyInstance;
+
+  beforeEach(() => {
+    consoleLogSpy = jest.spyOn(console, "log").mockImplementation();
+  });
+
+  afterEach(() => {
+    consoleLogSpy.mockRestore();
+  });
+
+  it("should log on initial render", () => {
+    const message = "Test Component";
+
+    renderHook(() => useReRenderLog(message));
+
+    expect(consoleLogSpy).toHaveBeenCalledWith(
+      expect.stringContaining("<<RE-RENDERED>>")
+    );
+
+    expect(consoleLogSpy).toHaveBeenCalledWith(
+      expect.stringContaining("<<COUNT: 1>>")
+    );
+
+    expect(consoleLogSpy).toHaveBeenCalledWith(
+      expect.stringContaining(message)
+    );
+  });
+
+  it("should increment count on each re-render", () => {
+    const message = "Counter Test";
+
+    const { rerender } = renderHook(() => useReRenderLog(message));
+
+    expect(consoleLogSpy).toHaveBeenCalledWith(
+      expect.stringContaining("<<COUNT: 1>>")
+    );
+
+    rerender();
+
+    expect(consoleLogSpy).toHaveBeenCalledWith(
+      expect.stringContaining("<<COUNT: 2>>")
+    );
+
+    rerender();
+
+    expect(consoleLogSpy).toHaveBeenCalledWith(
+      expect.stringContaining("<<COUNT: 3>>")
+    );
+  });
+
+  it("should log correct message format", () => {
+    const message = "MyComponent";
+
+    renderHook(() => useReRenderLog(message));
+
+    expect(consoleLogSpy).toHaveBeenCalledWith(
+      "<<RE-RENDERED>><<COUNT: 1>>: MyComponent"
+    );
+  });
+
+  it("should track renders independently for different hook instances", () => {
+    const message1 = "Component1";
+    const message2 = "Component2";
+
+    const { rerender: rerender1 } = renderHook(() => useReRenderLog(message1));
+
+    const { rerender: rerender2 } = renderHook(() => useReRenderLog(message2));
+
+    consoleLogSpy.mockClear();
+
+    rerender1();
+
+    expect(consoleLogSpy).toHaveBeenLastCalledWith(
+      expect.stringContaining("Component1")
+    );
+
+    rerender2();
+
+    expect(consoleLogSpy).toHaveBeenLastCalledWith(
+      expect.stringContaining("Component2")
+    );
+  });
+
+  it("should handle empty string message", () => {
+    renderHook(() => useReRenderLog(""));
+
+    expect(consoleLogSpy).toHaveBeenCalledWith("<<RE-RENDERED>><<COUNT: 1>>: ");
+  });
+
+  it("should handle message with special characters", () => {
+    const message = "Test!@#$%^&*()";
+
+    renderHook(() => useReRenderLog(message));
+
+    expect(consoleLogSpy).toHaveBeenCalledWith(
+      expect.stringContaining(message)
+    );
+  });
+
+  it("should handle long messages", () => {
+    const message = "A".repeat(1000);
+
+    renderHook(() => useReRenderLog(message));
+
+    expect(consoleLogSpy).toHaveBeenCalledWith(
+      expect.stringContaining(message)
+    );
+  });
+
+  it("should persist count across multiple re-renders", () => {
+    const message = "Persistence Test";
+
+    const { rerender } = renderHook(() => useReRenderLog(message));
+
+    for (let i = 2; i <= 10; i++) {
+      rerender();
+
+      expect(consoleLogSpy).toHaveBeenLastCalledWith(
+        expect.stringContaining(`<<COUNT: ${i}>>`)
+      );
+    }
+  });
+
+  it("should log on every render without dependencies", () => {
+    const message = "Every Render";
+
+    const { rerender } = renderHook(() => useReRenderLog(message));
+
+    const initialCallCount = consoleLogSpy.mock.calls.length;
+
+    rerender();
+    rerender();
+    rerender();
+
+    // Should have 4 total calls (initial + 3 rerenders)
+    expect(consoleLogSpy).toHaveBeenCalledTimes(initialCallCount + 3);
+  });
+
+  it("should handle numeric messages", () => {
+    renderHook(() => useReRenderLog(123 as any));
+
+    expect(consoleLogSpy).toHaveBeenCalledWith(expect.stringContaining("123"));
+  });
+
+  it("should handle object messages", () => {
+    const obj = { key: "value" };
+
+    renderHook(() => useReRenderLog(obj as any));
+
+    expect(consoleLogSpy).toHaveBeenCalled();
+  });
+
+  it("should maintain separate refs for each instance", () => {
+    const { rerender: rerender1 } = renderHook(() =>
+      useReRenderLog("Instance1")
+    );
+
+    const { rerender: rerender2 } = renderHook(() =>
+      useReRenderLog("Instance2")
+    );
+
+    consoleLogSpy.mockClear();
+
+    // Render instance 1 twice more
+    rerender1();
+    rerender1();
+
+    // Render instance 2 once more
+    rerender2();
+
+    const calls = consoleLogSpy.mock.calls;
+
+    // Instance 1 should be at count 2 and 3
+    expect(calls[0][0]).toContain("Instance1");
+    expect(calls[0][0]).toContain("<<COUNT: 2>>");
+
+    expect(calls[1][0]).toContain("Instance1");
+    expect(calls[1][0]).toContain("<<COUNT: 3>>");
+
+    // Instance 2 should be at count 2
+    expect(calls[2][0]).toContain("Instance2");
+    expect(calls[2][0]).toContain("<<COUNT: 2>>");
+  });
+});

package/reactHooks/device/useIsTablet.tsx

@@ -1,28 +1,23 @@
 /* eslint react-native/split-platform-components: off */
 
 import { Platform, PlatformIOSStatic, NativeModules } from "react-native";
-import { platformSelect } from "@applicaster/zapp-react-native-utils/reactUtils";
-import { F as alwaysFalse } from "ramda";
 import { toBooleanWithDefaultFalse } from "@applicaster/zapp-react-native-utils/booleanUtils";
 
-const useIsTabletIos = (): boolean => {
-  const { isPad } = Platform as PlatformIOSStatic;
+export const useIsTablet = (): boolean => {
+  const platform = Platform.OS;
 
-  return isPad;
-};
+  if (platform === "ios") {
+    const { isPad } = Platform as PlatformIOSStatic;
 
-const useIsTabletAndroid = (): boolean => {
-  const { initialProps } = NativeModules.QuickBrickCommunicationModule;
+    return Boolean(isPad);
+  }
 
-  return toBooleanWithDefaultFalse(initialProps?.is_tablet);
-};
+  if (platform === "android") {
+    const initialProps =
+      NativeModules.QuickBrickCommunicationModule?.initialProps;
 
-export const useIsTablet = platformSelect({
-  ios: useIsTabletIos,
-  android: useIsTabletAndroid,
-  lg_tv: alwaysFalse,
-  samsung_tv: alwaysFalse,
-  android_tv: alwaysFalse,
-  tvos: alwaysFalse,
-  default: alwaysFalse,
-});
+    return toBooleanWithDefaultFalse(initialProps?.is_tablet);
+  }
+
+  return false;
+};

package/reactHooks/device/useMemoizedIsTablet.ts

@@ -1,6 +1,6 @@
 import * as React from "react";
-import { usePickFromState } from "@applicaster/zapp-react-native-redux/hooks";
 import { useIsTablet } from "./useIsTablet";
+import { useAppData } from "@applicaster/zapp-react-native-redux";
 
 export const useMemoizedIsTablet = () => {
   const isTablet = useIsTablet();
@@ -14,9 +14,9 @@ export const useMemoizedIsTablet = () => {
 };
 
 export const useIsTabletLandscape = (): boolean => {
-  const { appData } = usePickFromState(["appData"]);
+  const { isTabletPortrait } = useAppData();
 
   const isTablet = useIsTablet();
 
-  return isTablet && !appData.isTabletPortrait;
+  return isTablet && !isTabletPortrait;
 };

package/reactHooks/feed/__tests__/useBatchLoading.test.tsx

@@ -1,8 +1,7 @@
-import { renderHook } from "@testing-library/react-hooks";
+import { renderHook, waitFor } from "@testing-library/react-native";
 import { allFeedsIsReady, useBatchLoading } from "../useBatchLoading";
 import { WrappedWithProviders } from "@applicaster/zapp-react-native-utils/testUtils";
 import { appStore } from "@applicaster/zapp-react-native-redux/AppStore";
-import { waitFor } from "@testing-library/react-native";
 
 jest.mock("../../navigation");
 
@@ -16,7 +15,11 @@ jest.mock(
   })
 );
 
-const wrapper = WrappedWithProviders;
+const getWrapper =
+  (store) =>
+  ({ children }) => (
+    <WrappedWithProviders store={store}>{children}</WrappedWithProviders>
+  );
 
 describe("useBatchLoading", () => {
   const data = [
@@ -63,8 +66,7 @@ describe("useBatchLoading", () => {
     const riverId = "123";
 
     renderHook(() => useBatchLoading(data, { initialBatchSize, riverId }), {
-      wrapper,
-      initialProps: { store },
+      wrapper: getWrapper(store),
     });
 
     const actions = (appStore.getStore() as any).getActions();
@@ -84,7 +86,7 @@ describe("useBatchLoading", () => {
     });
   });
 
-  it("loadPipesData start loading new feed when 1 feed is done loading and 1 is in loading state", () => {
+  it("loadPipesData start loading new feed when 1 feed is done loading and 1 is in loading state", async () => {
     const store = {
       zappPipes: {
         url1: {
@@ -110,13 +112,14 @@ describe("useBatchLoading", () => {
     const riverId = "123";
 
     renderHook(() => useBatchLoading(data, { initialBatchSize, riverId }), {
-      wrapper,
-      initialProps: { store },
+      wrapper: getWrapper(store),
     });
 
     const actions = (appStore.getStore() as any).getActions();
 
-    expect(actions).toHaveLength(1);
+    await waitFor(() => {
+      expect(actions).toHaveLength(1);
+    });
 
     expect(actions[0]).toMatchObject({
       type: "ZAPP_PIPES_REQUEST_START",
@@ -124,7 +127,7 @@ describe("useBatchLoading", () => {
     });
   });
 
-  it("loadPipesData has been called when no data cached", () => {
+  it("loadPipesData has been called when no data cached", async () => {
     const store = {
       zappPipes: {},
       test: "true",
@@ -134,16 +137,17 @@ describe("useBatchLoading", () => {
     const riverId = "123";
 
     renderHook(() => useBatchLoading(data, { initialBatchSize, riverId }), {
-      wrapper,
-      initialProps: { store },
+      wrapper: getWrapper(store),
     });
 
     const actions = (appStore.getStore() as any).getActions();
 
-    expect(actions).toHaveLength(3);
+    await waitFor(() => {
+      expect(actions).toHaveLength(3);
+    });
   });
 
-  it("initial batch ready when all initial items loaded", () => {
+  it("initial batch ready when all initial items loaded", async () => {
     const store = {
       zappPipes: {
         url1: {
@@ -169,13 +173,15 @@ describe("useBatchLoading", () => {
 
     const { result } = renderHook(
       () => useBatchLoading(data, { initialBatchSize, riverId }),
-      { wrapper, initialProps: { store } }
+      { wrapper: getWrapper(store) }
     );
 
-    expect(result.current).toBe(true);
+    await waitFor(() => {
+      expect(result.current).toBe(true);
+    });
   });
 
-  it("gallery-qb: loadPipesData should be called only once for first component in the gallery", () => {
+  it("gallery-qb: loadPipesData should be called only once for first component in the gallery", async () => {
     const store = {
       zappPipes: {},
       test: "true",
@@ -198,16 +204,17 @@ describe("useBatchLoading", () => {
     ];
 
     renderHook(() => useBatchLoading(data, { initialBatchSize, riverId }), {
-      wrapper,
-      initialProps: { store },
+      wrapper: getWrapper(store),
     });
 
     const actions = (appStore.getStore() as any).getActions();
 
-    expect(actions).toHaveLength(1);
+    await waitFor(() => {
+      expect(actions).toHaveLength(1);
+    });
   });
 
-  it("gallery-qb: initial batch ready when all initial items loaded", () => {
+  it("gallery-qb: initial batch ready when all initial items loaded", async () => {
     const store = {
       zappPipes: {
         url1: {
@@ -233,10 +240,12 @@ describe("useBatchLoading", () => {
 
     const { result } = renderHook(
       () => useBatchLoading(data, { initialBatchSize, riverId }),
-      { wrapper, initialProps: { store } }
+      { wrapper: getWrapper(store) }
     );
 
-    expect(result.current).toBe(true);
+    await waitFor(() => {
+      expect(result.current).toBe(true);
+    });
   });
 });
 

package/reactHooks/feed/__tests__/useBuildPipesUrl.test.tsx

@@ -1,4 +1,4 @@
-import { renderHook } from "@testing-library/react-hooks";
+import { renderHook, waitFor } from "@testing-library/react-native";
 import { encodeParams } from "@applicaster/zapp-pipes-v2-client/src/utils";
 
 const appData = {
@@ -42,26 +42,26 @@ describe("useBuildPipesUrl", () => {
       build: jest.fn(() => Promise.resolve(buildResult)),
     };
 
-    const { result, waitForNextUpdate } = renderHook(() =>
+    const { result } = renderHook(() =>
       useBuildPipesUrl({ url, mapping, requestBuilder: mockedRequestBuilder })
     );
 
     expect(result.current.url).toBe("http://foo.com/show/show-1");
     expect(result.current.requestParams).toBeNull();
 
-    await waitForNextUpdate();
-
-    expect(result.current.requestParams).toEqual(
-      expect.objectContaining({
-        params: {
-          version: appData.version_name,
-          ctx: encodeParams({ platform: appData.platform }),
-        },
-        headers: {
-          SDK: appData.sdk_version,
-        },
-      })
-    );
+    await waitFor(() => {
+      expect(result.current.requestParams).toEqual(
+        expect.objectContaining({
+          params: {
+            version: appData.version_name,
+            ctx: encodeParams({ platform: appData.platform }),
+          },
+          headers: {
+            SDK: appData.sdk_version,
+          },
+        })
+      );
+    });
   });
 
   it("returns empty object if url is not in endpoints", async () => {
@@ -81,15 +81,15 @@ describe("useBuildPipesUrl", () => {
       build: jest.fn(() => Promise.resolve(buildResult)),
     };
 
-    const { result, waitForNextUpdate } = renderHook(() =>
+    const { result } = renderHook(() =>
       useBuildPipesUrl({ url, mapping, requestBuilder: mockedRequestBuilder })
     );
 
     expect(result.current.url).toBe("http://foobar.com/show-1");
     expect(result.current.requestParams).toBeNull();
 
-    await waitForNextUpdate();
-
-    expect(result.current.requestParams).toEqual({});
+    await waitFor(() => {
+      expect(result.current.requestParams).toEqual({});
+    });
   });
 });

package/reactHooks/feed/__tests__/useEntryScreenId.test.tsx

@@ -1,6 +1,6 @@
 import * as R from "ramda";
 import React from "react";
-import { renderHook } from "@testing-library/react-hooks";
+import { renderHook } from "@testing-library/react-native";
 import { Provider } from "react-redux";
 import { createStore } from "redux";
 
@@ -10,6 +10,9 @@ describe("useEntryScreenId", () => {
   const mappedScreenId = "mapped-id";
 
   const initialState = {
+    rivers: {
+      [mappedScreenId]: { id: mappedScreenId, type: "any" },
+    },
     contentTypes: { mappedEntry: { screen_id: mappedScreenId } },
   };