@applicaster/zapp-react-native-utils 13.0.0-alpha.9433330286 → 13.0.0-alpha.9524088075

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

@@ -1,8 +1,7 @@
 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";
 
 jest.mock("../../navigation");
 
@@ -13,17 +12,18 @@ jest.mock(
   })
 );
 
-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();
@@ -34,7 +34,7 @@ describe("useBatchLoading", () => {
   });
 
   it("loadPipesData start loading not started requests", () => {
-    const store = mockStore({
+    const store = {
       zappPipes: {
         url1: {
           loading: true,
@@ -53,29 +53,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
-    ];
-
     renderHook(() => useBatchLoading(data, { initialBatchSize, riverId }), {
       wrapper,
       initialProps: { store },
     });
 
-    const actions = store.getActions();
+    const actions = (appStore.getStore() as any).getActions();
 
     expect(actions).toHaveLength(2);
 
@@ -91,7 +79,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 +98,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 +119,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 +156,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 +170,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 +183,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 +196,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 +210,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(

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

@@ -7,12 +7,12 @@ const appData = {
   sdk_version: "2.0.0",
 };
 
-let INFLATED_URL;
+const mockUseInflatedUrl = jest.fn();
 
 jest.mock(
   "@applicaster/zapp-react-native-utils/reactHooks/feed/useInflatedUrl",
   () => ({
-    useInflatedUrl: () => INFLATED_URL,
+    useInflatedUrl: mockUseInflatedUrl,
   })
 );
 
@@ -20,7 +20,7 @@ const { useBuildPipesUrl } = require("../useBuildPipesUrl");
 
 describe("useBuildPipesUrl", () => {
   it("returns the proper url", async () => {
-    INFLATED_URL = "http://foo.com/show/show-1";
+    mockUseInflatedUrl.mockReturnValue("http://foo.com/show/show-1");
     const url = "http://foo.com/show/{{showId}}";
 
     const mapping = {
@@ -65,7 +65,7 @@ describe("useBuildPipesUrl", () => {
   });
 
   it("returns empty object if url is not in endpoints", async () => {
-    INFLATED_URL = "http://foobar.com/show-1";
+    mockUseInflatedUrl.mockReturnValue("http://foobar.com/show-1");
     const url = "http://foobar.com/{{showId}}";
 
     const mapping = {

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

@@ -6,42 +6,41 @@ import { Provider } from "react-redux";
 import * as React from "react";
 import configureStore from "redux-mock-store";
 import thunk from "redux-thunk";
-import * as navigationHooks from "@applicaster/zapp-react-native-utils/reactHooks/navigation";
+import * as useRouteHook from "@applicaster/zapp-react-native-utils/reactHooks/navigation/useRoute";
 import * as useNavigationHooks from "@applicaster/zapp-react-native-utils/reactHooks/navigation/useNavigation";
+import { useFeedLoader } from "../useFeedLoader";
 
 const mockStore = configureStore([thunk]);
 
-jest.useFakeTimers();
+jest.useFakeTimers({ legacyFakeTimers: true });
 
-const logger = {
+const mockLogger = {
   warning: jest.fn(),
   log: jest.fn(),
   info: jest.fn(),
 };
 
-const navigator = {
+const mockNavigator: any = {
   currentRoute: "/river/A1234",
   getStack: jest.fn(() => []),
 };
 
-const routeData = {
+const mockRouteData: any = {
   screenData: {},
   pathname: "/river/A1234",
 };
 
-jest.mock("../../logger", () => ({
+jest.doMock("../../logger", () => ({
   reactHooksLogger: {
-    addSubsystem: jest.fn(() => logger),
+    addSubsystem: jest.fn(() => mockLogger),
   },
 }));
 
 jest
   .spyOn(useNavigationHooks, "useNavigation")
-  .mockImplementation(() => navigator);
+  .mockImplementation(() => mockNavigator);
 
-jest.spyOn(navigationHooks, "useRoute").mockImplementation(() => routeData);
-
-const { useFeedLoader } = require("../useFeedLoader");
+jest.spyOn(useRouteHook, "useRoute").mockImplementation(() => mockRouteData);
 
 const mockZappPipesData = {
   data: {

package/reactHooks/feed/useFeedLoader.tsx

@@ -87,7 +87,7 @@ export const useFeedLoader = ({
         );
       }
     }
-  }, [callableFeedUrl, currentFeed?.data]);
+  }, [callableFeedUrl, currentFeed?.data?.next]);
 
   useEffect(() => {
     if (

package/reactHooks/feed/usePipesCacheReset.ts

@@ -1,12 +1,12 @@
 import React from "react";
 import { useDispatch } from "react-redux";
-import { useRoute } from "@applicaster/zapp-react-native-utils/reactHooks/navigation";
-import {
-  getDatasourceUrl,
-  usePipesContexts,
-} from "@applicaster/zapp-react-native-ui-components/Decorators/RiverFeedLoader/utils";
+
+import { getDatasourceUrl } from "@applicaster/zapp-react-native-ui-components/Decorators/RiverFeedLoader/utils/getDatasourceUrl";
+import { usePipesContexts } from "@applicaster/zapp-react-native-ui-components/Decorators/RiverFeedLoader/utils/usePipesContexts";
 import { clearPipesData } from "@applicaster/zapp-react-native-redux/ZappPipes";
 
+import { useRoute } from "../navigation/useRoute";
+
 /**
  * reset river components cache when screen is unmounted
  * @param {string} riverId screen id

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

@@ -1,6 +1,5 @@
 import * as React from "react";
-import { renderHook, act } from "@testing-library/react-hooks";
-import { render } from "@testing-library/react-native";
+import { renderHook, render, act } from "@testing-library/react-native";
 import { View } from "react-native";
 
 import { useSequentialLoader, useSequentialRenderItem } from "..";
@@ -66,26 +65,28 @@ describe("flatList hooks", () => {
 
         expect(result.current.allLoaded).toBe(false);
 
-        result.current.renderItem(
-          ({ onLoadFinished }) => {
-            onLoadFinished();
-          },
-          { index: 1 }
-        );
+        act(() => {
+          result.current.renderItem(
+            ({ onLoadFinished }) => {
+              onLoadFinished();
+            },
+            { index: 1 }
+          );
+        });
 
         expect(result.current.allLoaded).toBe(true);
       });
     });
 
     describe("Rendering wrapper", () => {
-      it("wraps the elements in the View with display: none style", () => {
+      it("wraps the elements in the View with display: none style", async () => {
         const element1 = { id: 1 };
         const element2 = { id: 2 };
         const mockData = [element1, element2];
 
         const { result } = renderHook(() => useSequentialRenderItem(mockData));
 
-        const { getByTestId } = render(
+        const res = render(
           result.current.renderItem(
             () => {
               return <View testID={"test"} />;
@@ -94,7 +95,9 @@ describe("flatList hooks", () => {
           )
         );
 
-        const element = getByTestId("sequential-river-wrapper-1");
+        const element = res.root.findByProps({
+          testID: "sequential-river-wrapper-1",
+        });
 
         expect(element.props.style.display).toEqual("none");
       });
@@ -106,14 +109,16 @@ describe("flatList hooks", () => {
 
         const { result } = renderHook(() => useSequentialRenderItem(mockData));
 
-        result.current.renderItem(
-          ({ onLoadFinished }) => {
-            onLoadFinished();
-          },
-          { item: element1, index: 0 }
-        );
+        act(() => {
+          result.current.renderItem(
+            ({ onLoadFinished }) => {
+              onLoadFinished();
+            },
+            { item: element1, index: 0 }
+          );
+        });
 
-        const { getByTestId } = render(
+        const { root } = render(
           result.current.renderItem(
             ({ onLoadFinished }) => {
               onLoadFinished();
@@ -124,7 +129,9 @@ describe("flatList hooks", () => {
           )
         );
 
-        const element = getByTestId("sequential-river-wrapper-1");
+        const element = root.findByProps({
+          testID: "sequential-river-wrapper-1",
+        });
 
         expect(element.props.style.display).toEqual("flex");
       });
@@ -136,7 +143,7 @@ describe("flatList hooks", () => {
 
         const { result } = renderHook(() => useSequentialRenderItem(mockData));
 
-        const { getByTestId } = render(
+        const { root } = render(
           result.current.renderItem(
             ({ onLoadFinished }) => {
               onLoadFinished();
@@ -147,7 +154,9 @@ describe("flatList hooks", () => {
           )
         );
 
-        const element = getByTestId("sequential-river-wrapper-1");
+        const element = root.findByProps({
+          testID: "sequential-river-wrapper-1",
+        });
 
         expect(element.props.style.display).toEqual("none");
       });

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

@@ -14,10 +14,10 @@ const mocked_return_value = (tv) => ({
 });
 
 const platform = "android";
-let tv_flag = false;
+let mock_tv_flag = false;
 
 ReactNative.Dimensions.get = jest.fn(
-  (context) => mocked_return_value(tv_flag)[context]
+  (context) => mocked_return_value(mock_tv_flag)[context]
 );
 
 const mockRemoveFn = jest.fn();
@@ -43,7 +43,7 @@ jest.mock("react-native-safe-area-context", () => ({
 
 jest.mock("../../../reactUtils", () => ({
   platformSelect: jest.fn((specs) => specs[platform] || specs.default),
-  isTV: jest.fn(() => tv_flag),
+  isTV: jest.fn(() => mock_tv_flag),
 }));
 
 jest.mock("../../navigation", () => ({
@@ -134,20 +134,20 @@ describe("useDimensions", () => {
 
   describe("it applies the scale to the width & height if needed", () => {
     it("applies the scale on TV, and screen context", () => {
-      tv_flag = true;
-      const { screen } = mocked_return_value(tv_flag);
+      mock_tv_flag = true;
+      const { screen } = mocked_return_value(mock_tv_flag);
       const { dimensions } = testHook("screen");
 
       expect(dimensions).toHaveProperty("height", screen.height * screen.scale);
       expect(dimensions).toHaveProperty("width", screen.width * screen.scale);
       expect(dimensions).toHaveProperty("scale", 1);
 
-      tv_flag = false;
+      mock_tv_flag = false;
     });
 
     it("doesn't apply the scale on mobile with screen context", () => {
-      tv_flag = false;
-      const { screen } = mocked_return_value(tv_flag);
+      mock_tv_flag = false;
+      const { screen } = mocked_return_value(mock_tv_flag);
       const { dimensions } = testHook("screen");
 
       expect(dimensions).toHaveProperty("height", screen.height);
@@ -156,8 +156,8 @@ describe("useDimensions", () => {
     });
 
     it("doesn't apply the scale on TV with window context", () => {
-      tv_flag = true;
-      const { window } = mocked_return_value(tv_flag);
+      mock_tv_flag = true;
+      const { window } = mocked_return_value(mock_tv_flag);
       const { dimensions } = testHook("window");
 
       expect(dimensions).toHaveProperty("height", window.height);

package/reactHooks/layout/useDimensions/helpers/__tests__/getInitialDimensions.native.test.js

@@ -1,25 +1,14 @@
 import * as ReactNative from "react-native";
+import NativeDeviceInfo from "react-native/Libraries/Utilities/NativeDeviceInfo";
 
-const mockDimensionsGet = jest.fn(
-  (type) =>
-    ({
-      window: { width: 1, height: 1 },
-      screen: { width: 360, height: 540 },
-    }[type])
-);
+const mockDimensions = {
+  window: { width: 1, height: 1 },
+  screen: { width: 360, height: 540 },
+};
 
-ReactNative.Dimensions.get = mockDimensionsGet;
-
-const mockGetConstants = jest.fn().mockReturnValue({
-  Dimensions: {
-    window: { width: 360, height: 540 },
-    screen: { width: 360, height: 540 },
-  },
-});
+const mockDimensionsGet = jest.fn((type) => mockDimensions[type]);
 
-jest.mock("react-native/Libraries/Utilities/NativeDeviceInfo", () => ({
-  getConstants: mockGetConstants,
-}));
+ReactNative.Dimensions.get = mockDimensionsGet;
 
 const { Platform, Dimensions } = ReactNative;
 
@@ -34,27 +23,24 @@ describe("useDimensions > helpers ( native )", () => {
 
   it("should call Dimensions.get for window context", () => {
     getInitialDimensions("window");
-    expect(Dimensions.get).toBeCalled();
+    expect(Dimensions.get).toHaveBeenCalled();
   });
 
   it("should call Dimensions.get for screen context", () => {
     getInitialDimensions("screen");
-    expect(Dimensions.get).toBeCalled();
+    expect(Dimensions.get).toHaveBeenCalled();
   });
 
   it("should call NativeDeviceInfo.getConstants for ios when width === height", () => {
     Platform.OS = "ios";
 
-    jest.fn().mockReturnValue({
-      Dimensions: {
-        window: { width: 1, height: 1 },
-        screen: { width: 360, height: 540 },
-      },
-    });
+    const mockGetConstants = jest
+      .spyOn(NativeDeviceInfo, "getConstants")
+      .mockReturnValue({ Dimensions: mockDimensions });
 
     getInitialDimensions("window");
 
-    expect(Dimensions.get).toBeCalled();
-    expect(mockGetConstants).toBeCalled();
+    expect(Dimensions.get).toHaveBeenCalled();
+    expect(mockGetConstants).toHaveBeenCalled();
   });
 });

package/reactHooks/layout/useDimensions/helpers/__tests__/getInitialDimensions.test.js

@@ -5,7 +5,7 @@ const mockDimensionsGet = jest.fn(
     ({
       window: { width: 1, height: 1 },
       screen: { width: 360, height: 540 },
-    }[type])
+    })[type]
 );
 
 ReactNative.Dimensions.get = mockDimensionsGet;

package/reactHooks/layout/useDimensions/useDimensions.ts

@@ -52,6 +52,14 @@ export const useDimensions: UseDimensions = (
       ? { fullDimensions }
       : { ...fullDimensions };
 
+  if (options.updateForInactiveScreens === undefined) {
+    options.updateForInactiveScreens = true;
+  }
+
+  if (options.fullDimensions === undefined) {
+    options.fullDimensions = false;
+  }
+
   const [dimensions, setDimensions] = useState(getInitialDimensions(context));
   const deviceInfo = useRef(getDeviceInfo(dimensions, appData));
 

package/reactHooks/navigation/__mocks__/useNavigation.ts

@@ -3,5 +3,8 @@ export const useNavigation = jest.fn(() => ({
   screenData: {
     name: "someName",
   },
+  videoModalState: {
+    visible: false,
+  },
   currentRoute: "someRoute",
 }));