@applicaster/zapp-react-native-utils 15.0.0-rc.9 → 15.0.0-rc.90

package/reactHooks/autoscrolling/__tests__/useTrackCurrentAutoScrollingElement.test.ts

@@ -1,4 +1,4 @@
-import { renderHook } from "@testing-library/react-hooks";
+import { renderHook } from "@testing-library/react-native";
 
 jest.mock(
   "@applicaster/zapp-react-native-ui-components/Contexts/ScreenTrackedViewPositionsContext",

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

@@ -1,7 +1,6 @@
 import React from "react";
 
-import { renderHook } from "@testing-library/react-hooks";
-import { act, waitFor } from "@testing-library/react-native";
+import { renderHook, act, waitFor } from "@testing-library/react-native";
 import { Provider } from "react-redux";
 import configureStore from "redux-mock-store";
 import { useTrackedView } from "../useTrackedView";

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

@@ -1,10 +1,8 @@
 import * as React from "react";
-import { cleanup, renderHook } from "@testing-library/react-hooks";
+import { cleanup, renderHook, waitFor } from "@testing-library/react-native";
 import { CellTapContext } from "@applicaster/zapp-react-native-ui-components/Contexts/CellTapContext";
 import { ActionExecutorContext } from "@applicaster/zapp-react-native-utils/actionsExecutor/ActionExecutorContext";
 
-import { waitFor } from "@testing-library/react-native";
-
 const mockNavigator = {
   getPathname: () => "pathnameMock",
   push: jest.fn(),

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/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 } },
   };
 

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

@@ -1,4 +1,4 @@
-import { renderHook } from "@testing-library/react-hooks";
+import { renderHook } from "@testing-library/react-native";
 import * as R from "ramda";
 import * as zappPipesModule from "@applicaster/zapp-react-native-redux/ZappPipes";
 import * as reactReduxModules from "react-redux";
@@ -50,6 +50,16 @@ const mockZappPipesData = {
   url: "test://testfakeurl",
 };
 
+const createWrapper = (
+  getStore: () => any
+): React.FC<{ children: React.ReactNode }> => {
+  const Wrapper: React.FC<{ children: React.ReactNode }> = ({ children }) => (
+    <WrappedWithProviders store={getStore()}>{children}</WrappedWithProviders>
+  );
+
+  return Wrapper;
+};
+
 describe("useFeedLoader", () => {
   describe("with cached feed url", () => {
     const store = {
@@ -57,11 +67,7 @@ describe("useFeedLoader", () => {
       zappPipes: { "test://testfakeurl": mockZappPipesData },
     };
 
-    const wrapper: React.FC<any> = ({ children, ...props }) => (
-      <WrappedWithProviders store={props.store || store}>
-        {children}
-      </WrappedWithProviders>
-    );
+    const wrapper = createWrapper(() => store);
 
     it("returns cached feed", () => {
       const { result } = renderHook(
@@ -109,12 +115,6 @@ describe("useFeedLoader", () => {
   describe("without cached feeds", () => {
     const feedUrl = "test://testfakeurl2";
 
-    const wrapper: React.FC<any> = ({ children, ...props }) => (
-      <WrappedWithProviders store={props.store}>
-        {children}
-      </WrappedWithProviders>
-    );
-
     it("It loads data for new url and returns it", () => {
       const useDispatchSpy = jest
         .spyOn(reactReduxModules, "useDispatch")
@@ -129,9 +129,12 @@ describe("useFeedLoader", () => {
         zappPipes: { "test://testfakeurl": "foobar" },
       };
 
+      let store = initialStore;
+      const wrapper = createWrapper(() => store);
+
       const { result, rerender } = renderHook(
-        () => useFeedLoader({ feedUrl: "test://testfakeurl2" }),
-        { wrapper, initialProps: { store: initialStore } }
+        ({ feedUrl: url }) => useFeedLoader({ feedUrl: url }),
+        { wrapper, initialProps: { feedUrl } }
       );
 
       expect(result.current.data).toBeNull();
@@ -150,7 +153,8 @@ describe("useFeedLoader", () => {
         zappPipes: { "test://testfakeurl2": mockZappPipesData },
       };
 
-      rerender({ store: store2 });
+      store = store2;
+      rerender({ feedUrl });
 
       expect(R.omit(["reloadData", "loadNext"], result.current)).toEqual(
         mockZappPipesData
@@ -174,9 +178,12 @@ describe("useFeedLoader", () => {
         zappPipes: { "test://testfakeurl": "foobar" },
       };
 
+      let store = initialStore;
+      const wrapper = createWrapper(() => store);
+
       const { result, rerender } = renderHook(
-        () => useFeedLoader({ feedUrl: "test://testfakeurl2" }),
-        { wrapper, initialProps: { store: initialStore } }
+        ({ feedUrl: url }) => useFeedLoader({ feedUrl: url }),
+        { wrapper, initialProps: { feedUrl } }
       );
 
       expect(result.current.data).toBeNull();
@@ -198,7 +205,8 @@ describe("useFeedLoader", () => {
         zappPipes: { "test://testfakeurl2": mockZappPipesData },
       };
 
-      rerender({ store: store2 });
+      store = store2;
+      rerender({ feedUrl });
 
       loadPipesDataSpy.mockRestore();
       useDispatchSpy.mockRestore();
@@ -209,12 +217,6 @@ describe("useFeedLoader", () => {
     const feedUrl = "test://testfakeurl";
     const feedUrlWithNext = "test://withnexttestfakeurl";
 
-    const wrapper: React.FC<any> = ({ children, ...props }) => (
-      <WrappedWithProviders store={props.store || {}}>
-        {children}
-      </WrappedWithProviders>
-    );
-
     describe("reloadData", () => {
       it("Tries to reload data in the redux store", () => {
         const loadPipesDataSpy = jest
@@ -230,10 +232,17 @@ describe("useFeedLoader", () => {
           zappPipes: { [feedUrl]: "foobar" },
         };
 
-        const { result } = renderHook(() => useFeedLoader({ feedUrl }), {
-          wrapper,
-          initialProps: { store: initialStore },
-        });
+        const store = initialStore;
+
+        const wrapper = createWrapper(() => store);
+
+        const { result } = renderHook(
+          ({ feedUrl: url }) => useFeedLoader({ feedUrl: url }),
+          {
+            wrapper,
+            initialProps: { feedUrl },
+          }
+        );
 
         const { reloadData } = result.current;
 
@@ -279,11 +288,14 @@ describe("useFeedLoader", () => {
           zappPipes: { [feedUrlWithNext]: { data: { next: nextUrl } } },
         };
 
+        const store = initialStore;
+        const wrapper = createWrapper(() => store);
+
         const { result } = renderHook(
-          () => useFeedLoader({ feedUrl: feedUrlWithNext }),
+          ({ feedUrl: url }) => useFeedLoader({ feedUrl: url }),
           {
             wrapper,
-            initialProps: { store: initialStore },
+            initialProps: { feedUrl: feedUrlWithNext },
           }
         );
 

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

@@ -1,4 +1,4 @@
-import { renderHook } from "@testing-library/react-hooks";
+import { renderHook } from "@testing-library/react-native";
 
 jest.useFakeTimers();
 

package/reactHooks/feed/__tests__/{useInflatedUrl.test.ts → useInflatedUrl.test.tsx}

@@ -1,3 +1,34 @@
+import React from "react";
+
+import { WrappedWithProviders } from "@applicaster/zapp-react-native-utils/testUtils";
+
+import {
+  getInflatedDataSourceUrl,
+  getSearchContext,
+  useGetUrlInflater,
+} from "../useInflatedUrl";
+
+import { reactHooksLogger } from "../../logger";
+
+jest.mock("../../navigation", () => ({
+  useRoute: () => ({ pathname: "/mock/path" }),
+}));
+
+// mock contexts hooks
+jest.mock("@applicaster/zapp-react-native-ui-components/Contexts", () => ({
+  ZappPipesEntryContext: {
+    useZappPipesContext: () => [
+      { id: "entry-1", extensions: { showId: "A123" } },
+    ],
+  },
+  ZappPipesSearchContext: {
+    useZappPipesContext: () => ["user%20query"],
+  },
+  ZappPipesScreenContext: {
+    useZappPipesContext: () => [{ id: "screen-1" }],
+  },
+}));
+
 jest.mock("../../logger", () => ({
   reactHooksLogger: {
     warning: jest.fn(),
@@ -5,13 +36,6 @@ jest.mock("../../logger", () => ({
   },
 }));
 
-const {
-  getInflatedDataSourceUrl,
-  getSearchContext,
-} = require("../useInflatedUrl");
-
-const { reactHooksLogger } = require("../../logger");
-
 let mockStore;
 
 describe("getInflatedDataSourceUrl", () => {
@@ -188,3 +212,34 @@ describe("getSearchContext", () => {
     expect(result).toHaveProperty(mapping.queryParam.property, searchContext);
   });
 });
+
+describe("useGetUrlInflater", () => {
+  const { renderHook } = require("@testing-library/react-native");
+
+  it("returns original url when mapping is not provided", () => {
+    const { result } = renderHook(() => useGetUrlInflater(), {
+      wrapper: WrappedWithProviders,
+    });
+
+    const src = "https://foo.com/feed";
+    expect(result.current(src)).toBe(src);
+  });
+
+  it("inflates url using entry/search/screen contexts when mapping provided", () => {
+    const { result } = renderHook(() => useGetUrlInflater(), {
+      wrapper: ({ children }) => (
+        <WrappedWithProviders>{children}</WrappedWithProviders>
+      ),
+    });
+
+    const source = "https://foo.com/shows/{{showId}}?q={{q}}";
+
+    const mapping = {
+      showId: { source: "entry", property: "extensions.showId" },
+      q: { source: "search", property: "q" },
+    };
+
+    const url = result.current(source, mapping);
+    expect(url).toBe("https://foo.com/shows/A123?q=user%20query");
+  });
+});

package/reactHooks/feed/useBatchLoading.ts

@@ -151,7 +151,13 @@ export const useBatchLoading = (
         }
       }
     });
-  }, [feedUrls, feeds, loadPipesDataDispatcher]);
+  }, [
+    batchComponents,
+    feeds,
+    getUrl,
+    loadPipesDataDispatcher,
+    options.riverId,
+  ]);
 
   React.useEffect(() => {
     runBatchLoading();

package/reactHooks/feed/useEntryScreenId.ts

@@ -1,7 +1,7 @@
-import { usePickFromState } from "@applicaster/zapp-react-native-redux/hooks";
+import { useContentTypes } from "@applicaster/zapp-react-native-redux";
 
 export const useEntryScreenId = (entry?: ZappEntry): string | undefined => {
-  const { contentTypes } = usePickFromState("contentTypes");
+  const contentTypes = useContentTypes();
 
   if (!entry) {
     return;

package/reactHooks/feed/useInflatedUrl.ts

@@ -1,4 +1,4 @@
-import { useMemo } from "react";
+import { useCallback, useMemo, useRef } from "react";
 import * as R from "ramda";
 
 import {
@@ -169,7 +169,7 @@ const encodeIfNeeded: (string) => string = R.tryCatch(
 
 export function getSearchContext(
   searchContext: string,
-  mapping: ZappTypeMapping
+  mapping: Nullable<ZappTypeMapping>
 ) {
   if (!mapping) {
     return {};
@@ -183,31 +183,57 @@ export function getSearchContext(
   return { [property]: encodeIfNeeded(searchContext) };
 }
 
-export function useInflatedUrl({
-  feedUrl,
-  mapping,
-}: {
-  feedUrl?: string;
-  mapping?: ZappTypeMapping;
-}) {
+/**
+ * Hook returns a function that replace placeholders with context values
+ * @returns function that inflates urls based on contexts
+ */
+export const useGetUrlInflater = () => {
   const { pathname } = useRoute();
 
   const [entryContext] = ZappPipesEntryContext.useZappPipesContext(pathname);
   const [searchContext] = ZappPipesSearchContext.useZappPipesContext();
   const [screenContext] = ZappPipesScreenContext.useZappPipesContext();
 
-  const url = useMemo(
-    () =>
-      getInflatedDataSourceUrl({
+  const entryContextRef = useRef(entryContext);
+  entryContextRef.current = entryContext;
+
+  const screenContextRef = useRef(screenContext);
+  screenContextRef.current = screenContext;
+
+  const searchContextRef = useRef(searchContext);
+  searchContextRef.current = searchContext;
+
+  return useCallback(
+    (
+      feedUrl: Nullable<string>,
+      mapping?: Nullable<ZappTypeMapping>
+    ): Nullable<string> => {
+      return getInflatedDataSourceUrl({
         source: feedUrl,
         contexts: {
-          entry: entryContext,
-          screen: screenContext,
-          search: getSearchContext(searchContext, mapping),
+          entry: entryContextRef.current,
+          screen: screenContextRef.current,
+          search: getSearchContext(searchContextRef.current, mapping),
         },
         mapping,
-      }),
-    [entryContext, feedUrl, mapping, screenContext, searchContext]
+      });
+    },
+    []
+  );
+};
+
+export function useInflatedUrl({
+  feedUrl,
+  mapping,
+}: {
+  feedUrl?: string;
+  mapping?: ZappTypeMapping;
+}) {
+  const urlInflater = useGetUrlInflater();
+
+  const url = useMemo(
+    () => urlInflater(feedUrl, mapping),
+    [urlInflater, feedUrl, mapping]
   );
 
   return url;