@applicaster/zapp-react-native-utils 14.0.0-alpha.1308901965 → 14.0.0-alpha.1310732876

package/navigationUtils/__tests__/mapContentTypesToRivers.test.ts

@@ -0,0 +1,130 @@
+import { mapContentTypesToRivers } from "../index";
+
+describe("mapContentTypesToRivers", () => {
+  it("should return the correct content types mapped to rivers", () => {
+    const state = {
+      rivers: {
+        "river-1": {
+          plugin_type: "river",
+        },
+      },
+      contentTypes: {
+        "content-type-1": {
+          screen_id: "river-1",
+        },
+      },
+    };
+
+    const result = mapContentTypesToRivers(state);
+
+    expect(result).toEqual({
+      "content-type-1": {
+        screenType: "river",
+        screen_id: "river-1",
+      },
+    });
+  });
+
+  it("should return null if contentTypes is undefined", () => {
+    const state = {
+      rivers: {
+        "river-1": {
+          plugin_type: "river",
+        },
+      },
+      // contentTypes is missing
+    };
+
+    const result = mapContentTypesToRivers(state);
+
+    expect(result).toBeNull();
+  });
+
+  it("should skip content types whose screen does not exist in rivers", () => {
+    const state = {
+      rivers: {
+        "river-1": {
+          plugin_type: "river",
+        },
+      },
+      contentTypes: {
+        "content-type-1": {
+          screen_id: "river-1",
+        },
+        "content-type-2": {
+          screen_id: "river-2", // river-2 does not exist
+        },
+      },
+    };
+
+    const result = mapContentTypesToRivers(state);
+
+    expect(result).toEqual({
+      "content-type-1": {
+        screenType: "river",
+        screen_id: "river-1",
+      },
+    });
+
+    // result is not null, but may be undefined for missing keys
+    expect(result && result["content-type-2"]).toBeUndefined();
+  });
+
+  it("should use 'type' if 'plugin_type' is not present in river", () => {
+    const state = {
+      rivers: {
+        "river-1": {
+          type: "custom-type",
+        },
+      },
+      contentTypes: {
+        "content-type-1": {
+          screen_id: "river-1",
+        },
+      },
+    };
+
+    const result = mapContentTypesToRivers(state);
+
+    expect(result).toEqual({
+      "content-type-1": {
+        screenType: "custom-type",
+        screen_id: "river-1",
+      },
+    });
+  });
+
+  it("should skip content types if neither plugin_type nor type is present in river", () => {
+    const state = {
+      rivers: {
+        "river-1": {
+          // no plugin_type or type
+        },
+      },
+      contentTypes: {
+        "content-type-1": {
+          screen_id: "river-1",
+        },
+      },
+    };
+
+    const result = mapContentTypesToRivers(state);
+
+    expect(result).toEqual({});
+  });
+
+  it("should handle empty contentTypes object", () => {
+    const state = {
+      rivers: {
+        "river-1": {
+          plugin_type: "river",
+        },
+      },
+      contentTypes: {},
+    };
+
+    const result = mapContentTypesToRivers(state);
+
+    expect(result).toEqual({});
+  });
+});

package/navigationUtils/index.ts

@@ -13,6 +13,7 @@ import {
   isPlayable,
   isV2River,
 } from "./itemTypeMatchers";
+import { RootState } from "@applicaster/zapp-react-native-redux/store";
 
 type PathAttribute = {
   screenType: string;
@@ -377,10 +378,11 @@ export const usesVideoModal = (
   return targetScreenConfiguration?.styles?.use_video_modal;
 };
 
-export const mapContentTypesToRivers = ({
-  rivers,
-  contentTypes,
-}): ZappContentTypesMapped | null => {
+export const mapContentTypesToRivers = (
+  state: Partial<RootState>
+): ZappContentTypesMapped | null => {
+  const { rivers, contentTypes } = state;
+
   if (!contentTypes) {
     return null;
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applicaster/zapp-react-native-utils",
-  "version": "14.0.0-alpha.1308901965",
+  "version": "14.0.0-alpha.1310732876",
   "description": "Applicaster Zapp React Native utilities package",
   "main": "index.js",
   "types": "index.d.ts",
@@ -27,7 +27,7 @@
   },
   "homepage": "https://github.com/applicaster/quickbrick#readme",
   "dependencies": {
-    "@applicaster/applicaster-types": "14.0.0-alpha.1308901965",
+    "@applicaster/applicaster-types": "14.0.0-alpha.1310732876",
     "buffer": "^5.2.1",
     "camelize": "^1.0.0",
     "dayjs": "^1.11.10",
@@ -38,7 +38,6 @@
   "peerDependencies": {
     "@applicaster/zapp-pipes-v2-client": "*",
     "@react-native-community/netinfo": "*",
-    "immer": "*",
     "react": "*",
     "react-native": "*",
     "uglify-js": "*",

package/playerUtils/index.ts

@@ -5,6 +5,7 @@ import { isFilledArray } from "@applicaster/zapp-react-native-utils/arrayUtils";
 import { isTV } from "@applicaster/zapp-react-native-utils/reactUtils";
 
 import { getBoolFromConfigValue } from "../configurationUtils";
+import { Dimensions } from "react-native";
 
 export { getPlayerActionButtons } from "./getPlayerActionButtons";
 
@@ -97,3 +98,53 @@ export const isAudioItem = (item: Option<ZappEntry>) => {
 export const isInlineTV = (screenData) => {
   return isTV() && isFilledArray(screenData?.ui_components);
 };
+
+const isPercentage = (value: string | number): boolean => {
+  if (typeof value === "string") {
+    return value.includes("%");
+  }
+
+  return false;
+};
+
+const getPercentageOf = (percent: string, value: number) => {
+  const percentageValue = parseFloat(percent.replace("%", ""));
+
+  if (isNaN(percentageValue)) {
+    return value;
+  }
+
+  return (value * percentageValue) / 100;
+};
+
+type DimensionsT = {
+  width: number | string;
+  height: number | string | undefined;
+  aspectRatio?: number;
+};
+
+export const getTabletWidth = (
+  tablet_landscape_sidebar_width,
+  dimensions: DimensionsT
+) => {
+  const { width: SCREEN_WIDTH } = Dimensions.get("screen");
+
+  const { width } = dimensions;
+  let widthValue = Number(width);
+
+  if (isPercentage(width)) {
+    widthValue = getPercentageOf(width.toString(), SCREEN_WIDTH);
+  }
+
+  const sidebarWidth = Number(tablet_landscape_sidebar_width?.replace("%", ""));
+
+  if (tablet_landscape_sidebar_width?.includes("%")) {
+    return widthValue * (1 - sidebarWidth / 100);
+  }
+
+  if (Number.isNaN(sidebarWidth)) {
+    return widthValue * 0.65;
+  }
+
+  return widthValue - sidebarWidth;
+};

package/reactHooks/autoscrolling/__tests__/useTrackedView.test.tsx

@@ -1,27 +1,31 @@
 import React from "react";
 
-import { act, renderHook } from "@testing-library/react-hooks";
+import { renderHook } from "@testing-library/react-hooks";
+import { act, waitFor } from "@testing-library/react-native";
 import { Provider } from "react-redux";
 import configureStore from "redux-mock-store";
+import { useTrackedView } from "../useTrackedView";
 
 const mockUpdateComponentsPositions = jest.fn();
 
 jest.mock(
   "@applicaster/zapp-react-native-ui-components/Contexts/ScreenTrackedViewPositionsContext",
   () => ({
-    useScreenTrackedViewPositionsContext: jest.fn().mockReturnValue({
+    useScreenTrackedViewPositionsContext: jest.fn(() => ({
       updateComponentsPositions: mockUpdateComponentsPositions,
       value: {
         "123": { componentId: "123", centerX: 0.4, centerY: 0.5 },
         "124": { componentId: "124", centerX: 0.2, centerY: 0.3 },
       },
-    }),
+    })),
   })
 );
 
-jest.useFakeTimers({ legacyFakeTimers: true });
+jest.useFakeTimers();
 
-jest.mock("@applicaster/zapp-react-native-utils/reactHooks/navigation");
+jest.mock(
+  "@applicaster/zapp-react-native-utils/reactHooks/navigation/useNavigation"
+);
 
 const mockStore = configureStore();
 
@@ -32,10 +36,8 @@ const Wrapper = ({ children }: { children: React.ReactChild }) => (
   <Provider store={store}>{children}</Provider>
 );
 
-const { useTrackedView } = require("../useTrackedView");
-
 describe("useTrackCurrentAutoScrollingElement", () => {
-  it("should update position for selected component - onViewportEnter", () => {
+  it("should update position for selected component - onViewportEnter", async () => {
     const { result } = renderHook(() => useTrackedView("123"), {
       wrapper: Wrapper,
     });
@@ -46,14 +48,13 @@ describe("useTrackCurrentAutoScrollingElement", () => {
       rect: { left: 1, right: 1, top: 1, bottom: 1 },
     };
 
-    act(async () => {
-      await result.current.onPositionUpdated(mockRect);
+    act(() => {
+      result.current.onPositionUpdated(mockRect);
     });
 
-    // Fast-forward until all timers have been executed
-    jest.runAllTimers();
-
-    expect(result.current.inViewPort).toBe(true);
+    await waitFor(() => {
+      expect(result.current.inViewPort).toBe(true);
+    });
 
     expect(mockUpdateComponentsPositions).toHaveBeenCalledWith(
       "123",

package/reactHooks/cell-click/__tests__/index.test.js

@@ -26,6 +26,9 @@ jest.mock("@applicaster/zapp-react-native-utils/analyticsUtils/", () => ({
 }));
 
 jest.mock("@applicaster/zapp-react-native-utils/reactHooks/screen", () => ({
+  ...jest.requireActual(
+    "@applicaster/zapp-react-native-utils/reactHooks/screen"
+  ),
   useTargetScreenData: jest.fn(() => ({})),
   useCurrentScreenData: jest.fn(() => ({})),
 }));

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

@@ -12,7 +12,6 @@ describe("Debug utils", () => {
     // Clear the timers object
     Object.keys(timers).forEach((key) => delete timers[key]);
 
-    // Mock performance.now()
     // eslint-disable-next-line no-undef
     performanceNowMock = jest.spyOn(performance, "now");
     performanceNowMock.mockReturnValue(0); // Initial value

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

@@ -1,29 +1,33 @@
 import { renderHook } from "@testing-library/react-hooks";
-import * as reduxMockStore from "redux-mock-store";
-import thunk from "redux-thunk";
-import React from "react";
-import * as ReactRedux from "react-redux";
+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");
 
 jest.mock(
   "@applicaster/zapp-react-native-utils/reactHooks/screen/useScreenContext",
   () => ({
+    ...jest.requireActual(
+      "@applicaster/zapp-react-native-utils/reactHooks/screen/useScreenContext"
+    ),
     useScreenContext: jest.fn().mockReturnValue({ screen: {}, entry: {} }),
   })
 );
 
-const useBatchLoading = require("../useBatchLoading").useBatchLoading;
-const allFeedsIsReady = require("../useBatchLoading").allFeedsIsReady;
-
-const mockStore = reduxMockStore.default([thunk]);
-
-const wrapper: React.FC<any> = ({ children, store }) => (
-  <ReactRedux.Provider store={store}>{children}</ReactRedux.Provider>
-);
+const wrapper = WrappedWithProviders;
 
 describe("useBatchLoading", () => {
-  const useDispatchSpy = jest.spyOn(ReactRedux, "useDispatch");
+  const data = [
+    { data: { source: "url1" }, component_type: "any" },
+    { data: { source: "url2" }, component_type: "any" },
+    { data: { source: "url3" }, component_type: "any" },
+    { data: { source: "url4" }, component_type: "any" },
+    { data: { source: "url5" }, component_type: "any" },
+    { data: { source: "url6" }, component_type: "any" },
+    // ... more items
+  ];
 
   beforeAll(() => {
     jest.useFakeTimers();
@@ -33,8 +37,8 @@ describe("useBatchLoading", () => {
     jest.clearAllMocks();
   });
 
-  it("loadPipesData start loading not started requests", () => {
-    const store = mockStore({
+  it("loadPipesData start loading not started requests", async () => {
+    const store = {
       zappPipes: {
         url1: {
           loading: true,
@@ -53,31 +57,21 @@ describe("useBatchLoading", () => {
         },
       },
       test: "true",
-    });
-
-    useDispatchSpy.mockReturnValue(store.dispatch);
+    };
 
     const initialBatchSize = 3;
     const riverId = "123";
 
-    const data = [
-      { data: { source: "url1" } },
-      { data: { source: "url2" } },
-      { data: { source: "url3" } },
-      { data: { source: "url4" } },
-      { data: { source: "url5" } },
-      { data: { source: "url6" } },
-      // ... more items
-    ];
-
     renderHook(() => useBatchLoading(data, { initialBatchSize, riverId }), {
       wrapper,
       initialProps: { store },
     });
 
-    const actions = store.getActions();
+    const actions = (appStore.getStore() as any).getActions();
 
-    expect(actions).toHaveLength(2);
+    await waitFor(() => {
+      expect(actions).toHaveLength(2);
+    });
 
     expect(actions[0]).toMatchObject({
       type: "ZAPP_PIPES_REQUEST_START",
@@ -91,7 +85,7 @@ describe("useBatchLoading", () => {
   });
 
   it("loadPipesData start loading new feed when 1 feed is done loading and 1 is in loading state", () => {
-    const store = mockStore({
+    const store = {
       zappPipes: {
         url1: {
           loading: false,
@@ -110,31 +104,17 @@ describe("useBatchLoading", () => {
         },
       },
       test: "true",
-    });
-
-    useDispatchSpy.mockReturnValue(store.dispatch);
+    };
 
     const initialBatchSize = 3;
     const riverId = "123";
 
-    const data = [
-      { data: { source: "url1" } },
-      { data: { source: "url2" } },
-      { data: { source: "url3" } },
-      { data: { source: "url4" } },
-      { data: { source: "url5" } },
-      { data: { source: "url6" } },
-      // ... more items
-    ];
-
-    expect(useDispatchSpy).toBeCalledTimes(0);
-
     renderHook(() => useBatchLoading(data, { initialBatchSize, riverId }), {
       wrapper,
       initialProps: { store },
     });
 
-    const actions = store.getActions();
+    const actions = (appStore.getStore() as any).getActions();
 
     expect(actions).toHaveLength(1);
 
@@ -145,38 +125,26 @@ describe("useBatchLoading", () => {
   });
 
   it("loadPipesData has been called when no data cached", () => {
-    const store = mockStore({
+    const store = {
       zappPipes: {},
       test: "true",
-    });
-
-    useDispatchSpy.mockReturnValue(store.dispatch);
+    };
 
     const initialBatchSize = 3;
     const riverId = "123";
 
-    const data = [
-      { data: { source: "url1" } },
-      { data: { source: "url2" } },
-      { data: { source: "url3" } },
-      { data: { source: "url4" } },
-      { data: { source: "url5" } },
-      { data: { source: "url6" } },
-      // ... more items
-    ];
-
     renderHook(() => useBatchLoading(data, { initialBatchSize, riverId }), {
       wrapper,
       initialProps: { store },
     });
 
-    const actions = store.getActions();
+    const actions = (appStore.getStore() as any).getActions();
 
     expect(actions).toHaveLength(3);
   });
 
   it("initial batch ready when all initial items loaded", () => {
-    const store = mockStore({
+    const store = {
       zappPipes: {
         url1: {
           loading: false,
@@ -194,19 +162,11 @@ describe("useBatchLoading", () => {
           data: {},
         },
       },
-    });
-
-    useDispatchSpy.mockReturnValue(store.dispatch);
+    };
 
     const initialBatchSize = 3;
     const riverId = "123";
 
-    const data: Partial<ZappUIComponent>[] = [
-      { data: { source: "url1" } },
-      { data: { source: "url2" } },
-      { data: { source: "url3" } },
-    ];
-
     const { result } = renderHook(
       () => useBatchLoading(data, { initialBatchSize, riverId }),
       { wrapper, initialProps: { store } }
@@ -216,12 +176,10 @@ describe("useBatchLoading", () => {
   });
 
   it("gallery-qb: loadPipesData should be called only once for first component in the gallery", () => {
-    const store = mockStore({
+    const store = {
       zappPipes: {},
       test: "true",
-    });
-
-    useDispatchSpy.mockReturnValue(store.dispatch);
+    };
 
     const initialBatchSize = 3;
     const riverId = "123";
@@ -231,11 +189,11 @@ describe("useBatchLoading", () => {
         component_type: "gallery-qb",
         ui_components: [{ data: { source: "url1" } }],
       },
-      { data: { source: "url2" } },
-      { data: { source: "url3" } },
-      { data: { source: "url4" } },
-      { data: { source: "url5" } },
-      { data: { source: "url6" } },
+      { data: { source: "url2" }, component_type: "any" },
+      { data: { source: "url3" }, component_type: "any" },
+      { data: { source: "url4" }, component_type: "any" },
+      { data: { source: "url5" }, component_type: "any" },
+      { data: { source: "url6" }, component_type: "any" },
       // ... more items
     ];
 
@@ -244,13 +202,13 @@ describe("useBatchLoading", () => {
       initialProps: { store },
     });
 
-    const actions = store.getActions();
+    const actions = (appStore.getStore() as any).getActions();
 
     expect(actions).toHaveLength(1);
   });
 
   it("gallery-qb: initial batch ready when all initial items loaded", () => {
-    const store = mockStore({
+    const store = {
       zappPipes: {
         url1: {
           loading: false,
@@ -258,20 +216,19 @@ describe("useBatchLoading", () => {
           data: {},
         },
       },
-    });
-
-    useDispatchSpy.mockReturnValue(store.dispatch);
+    };
 
     const initialBatchSize = 3;
     const riverId = "123";
 
-    const data: Partial<ZappUIComponent>[] = [
+    const data = [
       {
         component_type: "gallery-qb",
-        ui_components: [{ data: { source: "url1" } }],
+        data: {},
+        ui_components: [{ data: { source: "url1" } }] as any,
       },
-      { data: { source: "url2" } },
-      { data: { source: "url3" } },
+      { data: { source: "url2" }, component_type: "any" },
+      { data: { source: "url3" }, component_type: "any" },
     ];
 
     const { result } = renderHook(