@applicaster/zapp-react-native-ui-components 13.0.0-rc.14 → 13.0.0-rc.140

package/Decorators/Navigator/__tests__/navigator.test.js

@@ -1,4 +1,7 @@
-jest.mock("react-router-native", () => require("./react-router-native-mock"));
+import React from "react";
+import { View } from "react-native";
+import { renderWithProviders } from "@applicaster/zapp-react-native-utils/testUtils";
+import { withNavigator } from "..";
 
 const navigatorMock = {
   push: jest.fn(),
@@ -12,27 +15,24 @@ const navigatorMock = {
 
 const mocked_context = navigatorMock;
 
-jest.mock("react", () => {
-  return {
-    ...jest.requireActual("react"),
-    useContext: jest.fn(() => mocked_context),
-  };
-});
-
-import { View } from "react-native";
-import { shallow } from "enzyme";
-
-const React = require("react");
-const { withNavigator } = require("../index");
+jest.mock(
+  "@applicaster/zapp-react-native-utils/reactHooks/navigation/useNavigation",
+  () => {
+    return {
+      useNavigation: jest.fn(() => mocked_context),
+    };
+  }
+);
 
 describe("withNavigator Decorator", () => {
   it("renders correctly", () => {
     const Component = () => <View />;
     const WrappedComponent = withNavigator(Component);
 
-    const wrapper = shallow(<WrappedComponent someProp="foo" />);
+    const wrapper = renderWithProviders(<WrappedComponent someProp="foo" />);
 
-    expect(wrapper).toMatchSnapshot();
-    expect(wrapper.prop("navigator")).toEqual(navigatorMock);
+    expect(wrapper.UNSAFE_getByType(Component).props.navigator).toEqual(
+      navigatorMock
+    );
   });
 });

package/Decorators/Navigator/index.tsx

@@ -1,6 +1,6 @@
 import * as React from "react";
 
-import { useNavigation } from "@applicaster/zapp-react-native-utils/reactHooks/navigation";
+import { useNavigation } from "@applicaster/zapp-react-native-utils/reactHooks/navigation/useNavigation";
 import { deprecationWarningWithIdentifier } from "@applicaster/zapp-react-native-utils/appUtils";
 
 export function withNavigator(Component) {

package/Decorators/RiverFeedLoader/__tests__/__snapshots__/riverFeedLoader.test.tsx.snap

@@ -4,206 +4,206 @@ exports[`WithRiverFeedLoader renders correctly 1`] = `
 <View
   dispatch={[MockFunction]}
   river={
-    Object {
+    {
       "id": "A1234",
-      "ui_components": Array [
-        Object {
-          "data": Object {
+      "ui_components": [
+        {
+          "data": {
             "source": "http://datasource0",
           },
-          "rules": Object {
+          "rules": {
             "clear_cache_on_reload": false,
           },
         },
-        Object {
-          "data": Object {
+        {
+          "data": {
             "source": "http://datasource1",
           },
-          "rules": Object {
+          "rules": {
             "clear_cache_on_reload": false,
           },
         },
-        Object {
-          "data": Object {
+        {
+          "data": {
             "source": "http://datasource2",
           },
-          "rules": Object {
+          "rules": {
             "clear_cache_on_reload": false,
           },
         },
-        Object {
-          "data": Object {
+        {
+          "data": {
             "source": "http://datasource3",
           },
-          "rules": Object {
+          "rules": {
             "clear_cache_on_reload": false,
           },
         },
-        Object {
-          "data": Object {
+        {
+          "data": {
             "source": "http://datasource4",
           },
-          "rules": Object {
+          "rules": {
             "clear_cache_on_reload": false,
           },
         },
-        Object {
-          "data": Object {
+        {
+          "data": {
             "source": "http://datasource5",
           },
-          "rules": Object {
+          "rules": {
             "clear_cache_on_reload": false,
           },
         },
-        Object {
-          "data": Object {
+        {
+          "data": {
             "source": "http://datasource6",
           },
-          "rules": Object {
+          "rules": {
             "clear_cache_on_reload": false,
           },
         },
-        Object {
-          "data": Object {
+        {
+          "data": {
             "source": "http://datasource7",
           },
-          "rules": Object {
+          "rules": {
             "clear_cache_on_reload": false,
           },
         },
-        Object {
-          "data": Object {
+        {
+          "data": {
             "source": "http://datasource8",
           },
-          "rules": Object {
+          "rules": {
             "clear_cache_on_reload": false,
           },
         },
-        Object {
-          "data": Object {
+        {
+          "data": {
             "source": "http://datasource9",
           },
-          "rules": Object {
+          "rules": {
             "clear_cache_on_reload": false,
           },
         },
-        Object {
-          "data": Object {
+        {
+          "data": {
             "source": "http://datasource10",
           },
-          "rules": Object {
+          "rules": {
             "clear_cache_on_reload": false,
           },
         },
-        Object {
-          "data": Object {
+        {
+          "data": {
             "source": "http://datasource11",
           },
-          "rules": Object {
+          "rules": {
             "clear_cache_on_reload": false,
           },
         },
-        Object {
-          "data": Object {
+        {
+          "data": {
             "source": "http://datasource12",
           },
-          "rules": Object {
+          "rules": {
             "clear_cache_on_reload": true,
           },
         },
-        Object {
-          "data": Object {
+        {
+          "data": {
             "source": "http://datasource13",
           },
-          "rules": Object {
+          "rules": {
             "clear_cache_on_reload": false,
           },
         },
-        Object {
-          "data": Object {
+        {
+          "data": {
             "source": "http://datasource14",
           },
-          "rules": Object {
+          "rules": {
             "clear_cache_on_reload": false,
           },
         },
-        Object {
-          "data": Object {
+        {
+          "data": {
             "source": "http://datasource15",
           },
-          "rules": Object {
+          "rules": {
             "clear_cache_on_reload": false,
           },
         },
-        Object {
-          "data": Object {
+        {
+          "data": {
             "source": "http://datasource16",
           },
-          "rules": Object {
+          "rules": {
             "clear_cache_on_reload": false,
           },
         },
-        Object {
-          "data": Object {
+        {
+          "data": {
             "source": "http://datasource17",
           },
-          "rules": Object {
+          "rules": {
             "clear_cache_on_reload": false,
           },
         },
-        Object {
-          "data": Object {
+        {
+          "data": {
             "source": "http://datasource18",
           },
-          "rules": Object {
+          "rules": {
             "clear_cache_on_reload": false,
           },
         },
-        Object {
-          "data": Object {
+        {
+          "data": {
             "source": "http://datasource19",
           },
-          "rules": Object {
+          "rules": {
             "clear_cache_on_reload": false,
           },
         },
-        Object {
-          "data": Object {
+        {
+          "data": {
             "source": "http://datasource20",
           },
-          "rules": Object {
+          "rules": {
             "clear_cache_on_reload": true,
           },
         },
-        Object {
-          "data": Object {
+        {
+          "data": {
             "source": "http://datasource21",
           },
-          "rules": Object {
+          "rules": {
             "clear_cache_on_reload": false,
           },
         },
-        Object {
-          "data": Object {
+        {
+          "data": {
             "source": "http://datasource22",
           },
-          "rules": Object {
+          "rules": {
             "clear_cache_on_reload": false,
           },
         },
-        Object {
-          "data": Object {
+        {
+          "data": {
             "source": "http://datasource23",
           },
-          "rules": Object {
+          "rules": {
             "clear_cache_on_reload": false,
           },
         },
-        Object {
-          "data": Object {
+        {
+          "data": {
             "source": "http://datasource24",
           },
-          "rules": Object {
+          "rules": {
             "clear_cache_on_reload": false,
           },
         },

package/Decorators/RiverFeedLoader/__tests__/riverFeedLoader.test.tsx

@@ -3,73 +3,68 @@ import * as R from "ramda";
 import { View } from "react-native";
 import { render } from "@testing-library/react-native";
 
-import {
-  entryContext,
-  navigator,
-  river,
-  riverDataSources,
-  screenContext,
-  screenData,
-  searchContext,
-} from "./fixtures";
+import * as mock_fixtures from "./fixtures";
 
-jest.mock("@applicaster/zapp-react-native-utils/reactHooks", () => ({
-  useNavigation: jest.fn(() => navigator),
-  useRoute: jest.fn(() => ({ screenData })),
-}));
+const mockUsePipesContexts = () => ({
+  entry: mock_fixtures.entryContext,
+  screen: mock_fixtures.screenContext,
+  search: mock_fixtures.searchContext,
+});
+
+const mockGetDatasourceUrl = jest.fn(
+  R.curry((_, component) => component.data.source)
+);
+
+jest.mock(
+  "@applicaster/zapp-react-native-utils/reactHooks/navigation/useRoute",
+  () => ({
+    useRoute: jest.fn(() => ({ screenData: mock_fixtures.screenData })),
+  })
+);
+
+jest.mock(
+  "@applicaster/zapp-react-native-utils/reactHooks/navigation/useNavigation",
+  () => ({
+    useNavigation: jest.fn(() => mock_fixtures.navigator),
+  })
+);
 
 jest.mock("../utils", () => ({
-  DATASOURCE_CHUNKS: 10,
+  ...jest.requireActual("../utils"),
   loadDatasources: jest.fn(),
-  getDatasourceUrl: jest.fn(R.curry((_, component) => component.data.source)),
-  usePipesContexts: jest.fn(() => ({
-    entryContext,
-    searchContext,
-    screenContext,
-  })),
-  ignoreComponentsWithClearCacheFlag: R.reject(
-    R.pathEq(["rules", "clear_cache_on_reload"], true)
-  ),
+  getDatasourceUrl: mockGetDatasourceUrl,
+  usePipesContexts: mockUsePipesContexts,
 }));
 
-const { WithRiverFeedLoader } = require("../index");
-
 const River = function (props) {
   return <View {...props} />;
 };
 
 const riverProps = {
-  river,
+  river: mock_fixtures.river,
   dispatch: jest.fn(),
 };
 
-const DecoratedRiver = WithRiverFeedLoader(River);
-
 const { loadDatasources, getDatasourceUrl } = require("../utils");
 
-describe("WithRiverFeedLoader", () => {
-  const getWrapper = () => render(<DecoratedRiver {...riverProps} />);
+const { WithRiverFeedLoader } = require("..");
 
-  beforeEach(() => {
-    getDatasourceUrl.mockClear();
-    loadDatasources.mockClear();
-  });
+describe("WithRiverFeedLoader", () => {
+  const DecoratedRiver = WithRiverFeedLoader(River);
+  const wrapper = render(<DecoratedRiver {...riverProps} />);
 
   it("renders correctly", () => {
-    const wrapper = getWrapper();
     expect(wrapper.toJSON()).toMatchSnapshot();
   });
 
   it("collects the datasources in the screen and loads them", () => {
-    getWrapper();
-
     expect(getDatasourceUrl).toHaveBeenCalledTimes(1);
     expect(loadDatasources).toHaveBeenCalledTimes(1);
 
     expect(loadDatasources).toHaveBeenNthCalledWith(
       1,
-      riverDataSources,
-      river.id,
+      mock_fixtures.riverDataSources,
+      mock_fixtures.river.id,
       riverProps.dispatch
     );
   });

package/Decorators/RiverFeedLoader/__tests__/utils.test.ts

@@ -14,7 +14,6 @@ jest.mock("@applicaster/zapp-react-native-redux/ZappPipes", () => ({
 }));
 
 const {
-  DATASOURCE_CHUNKS,
   loadDatasources,
   riverIsCurrentRoute,
   getDatasourceUrl,
@@ -27,14 +26,6 @@ const {
 
 const dispatch = (value) => Promise.resolve(value);
 
-describe("DATASOURCE_CHUNKS", () => {
-  const DEFAULT_DATASOURCE_CHUNKS = 10;
-
-  it("has the correct value", () => {
-    expect(DATASOURCE_CHUNKS).toBe(DEFAULT_DATASOURCE_CHUNKS);
-  });
-});
-
 describe("loadDataSource", () => {
   it("calls loadPipesData for each provided urls", async () => {
     const urls = [

package/Decorators/RiverFeedLoader/index.tsx

@@ -2,7 +2,7 @@ import React, { ComponentClass, FC, useEffect } from "react";
 import * as R from "ramda";
 import { DispatchProp } from "react-redux";
 
-import { useRoute } from "@applicaster/zapp-react-native-utils/reactHooks";
+import { useRoute } from "@applicaster/zapp-react-native-utils/reactHooks/navigation/useRoute";
 
 import { mapAndSplit } from "@applicaster/zapp-react-native-utils/arrayUtils";
 

package/Decorators/RiverFeedLoader/utils/getDatasourceUrl.ts

@@ -0,0 +1,39 @@
+import * as R from "ramda";
+
+import {
+  getInflatedDataSourceUrl,
+  getSearchContext,
+} from "@applicaster/zapp-react-native-utils/reactHooks";
+
+import { ZappPipesEntryContext } from "../../../Contexts";
+
+export const getDatasourceUrl: (
+  contexts: {
+    screenData?: Record<string, any>;
+    entryContext: ReturnType<
+      typeof ZappPipesEntryContext.useZappPipesContext
+    >[0];
+    searchContext: string;
+    screenContext: ZappRiver;
+  },
+  component?: ZappUIComponent
+) => string | null = R.curry(
+  (
+    { screenData, entryContext, searchContext, screenContext },
+    component: ZappUIComponent
+  ) => {
+    const { source, mapping } = R.propOr({}, ["data"], component);
+
+    if (mapping) {
+      const contexts = {
+        entry: entryContext,
+        screen: screenContext || screenData,
+        search: getSearchContext(searchContext, mapping),
+      };
+
+      return getInflatedDataSourceUrl({ source, mapping, contexts });
+    }
+
+    return source;
+  }
+);

package/Decorators/RiverFeedLoader/utils/index.ts

@@ -0,0 +1,29 @@
+import * as R from "ramda";
+import { loadPipesData } from "@applicaster/zapp-react-native-redux/ZappPipes";
+
+import {
+  mapPromises,
+  reducePromises,
+} from "@applicaster/zapp-react-native-utils/arrayUtils";
+
+export { riverIsCurrentRoute, usePipesContexts } from "./usePipesContexts";
+
+export { getDatasourceUrl } from "./getDatasourceUrl";
+
+export const DATASOURCE_CHUNKS = 10;
+
+export async function loadDatasources(urls: string[][], riverId, dispatch) {
+  return reducePromises<string, void>(
+    mapPromises<string, void>((url) => {
+      if (url) {
+        return dispatch(loadPipesData(url, { riverId }));
+      }
+    }),
+    undefined,
+    urls
+  );
+}
+
+export const ignoreComponentsWithClearCacheFlag = R.reject(
+  R.pathEq(["rules", "clear_cache_on_reload"], true)
+);

package/Decorators/RiverFeedLoader/utils/usePipesContexts.ts

@@ -0,0 +1,40 @@
+import * as R from "ramda";
+
+import {
+  ZappPipesEntryContext,
+  ZappPipesScreenContext,
+  ZappPipesSearchContext,
+} from "../../../Contexts";
+
+export function riverIsCurrentRoute(riverId, route) {
+  const routeRiverId = R.compose(R.last, R.split("/"))(route);
+
+  return typeof riverId === "undefined" || routeRiverId === riverId;
+}
+
+export function usePipesContexts(
+  riverId: string,
+  route: string
+): {
+  entryContext: ReturnType<typeof ZappPipesEntryContext.useZappPipesContext>[0];
+  searchContext: string;
+  screenContext: ZappRiver;
+} {
+  const isNestedScreen = !riverIsCurrentRoute(riverId, route);
+
+  const routeForEntry = isNestedScreen ? `${route}/river/${riverId}` : route;
+
+  const [entryContext] = ZappPipesEntryContext.useZappPipesContext(
+    routeForEntry,
+    isNestedScreen
+  );
+
+  const [searchContext] = ZappPipesSearchContext.useZappPipesContext();
+  const [screenContext] = ZappPipesScreenContext.useZappPipesContext();
+
+  return {
+    entryContext,
+    searchContext,
+    screenContext,
+  };
+}

package/Decorators/RiverResolver/__tests__/riverResolver.test.tsx

@@ -1,8 +1,8 @@
 import React from "react";
-import { shallow } from "enzyme";
 import { View } from "react-native";
-import { shallowToJson } from "enzyme-to-json";
-import * as navigationHooks from "@applicaster/zapp-react-native-utils/reactHooks/navigation";
+import { renderWithProviders } from "@applicaster/zapp-react-native-utils/testUtils";
+
+import { withRiver } from "../";
 
 const rivers = {
   A123: {
@@ -13,38 +13,38 @@ const rivers = {
   },
 };
 
-jest.doMock("@applicaster/zapp-react-native-redux/hooks", () => ({
-  usePickFromState: jest.fn(() => ({ rivers })),
-}));
-
-jest.mock("@applicaster/zapp-react-native-utils/reactHooks/layout", () => ({
-  useLayoutVersion: jest.fn(() => true),
-}));
-
-jest.spyOn(navigationHooks, "usePathname").mockReturnValue("/home");
-
-// mocks useNavigator to return currentRoute: "/home"
-jest.mock("@applicaster/zapp-react-native-utils/reactHooks", () => ({
-  useNavigation: jest.fn(() => ({ currentRoute: "/home" })),
-  useRoute: jest.fn(() => ({ pathname: "/home" })),
-}));
+jest.doMock(
+  "@applicaster/zapp-react-native-redux/hooks/usePickFromState",
+  () => ({
+    usePickFromState: jest.fn(() => ({ rivers })),
+  })
+);
 
-const { withRiver } = require("../index");
+jest.doMock(
+  "@applicaster/zapp-react-native-utils/reactHooks/navigation/usePathname",
+  () => ({
+    usePathname: jest.fn(() => "/home"),
+  })
+);
 
-const TestComponent = jest.fn(() => <View />);
+const TestComponent = jest.fn((props) => <View {...props} />);
 
 describe("withRiver HoC", () => {
   const WrappedComponent = withRiver(TestComponent);
 
-  const wrapper = shallow(
-    <WrappedComponent screenId="A123" rivers={rivers} otherProp="otherProp" />
+  const wrapper = renderWithProviders(
+    <WrappedComponent
+      testID="test-view"
+      screenId="A123"
+      otherProp="otherProp"
+    />,
+    { rivers: rivers }
   );
 
-  it("renders correctly", () => {
-    expect(shallowToJson(wrapper)).toMatchSnapshot();
-  });
-
   it("populates the river prop", () => {
-    expect(wrapper.find(TestComponent).prop("river")).toEqual(rivers.A123);
+    const targetView = wrapper.getByTestId("test-view");
+
+    expect(targetView.props.river).toEqual(rivers.A123);
+    expect(targetView.props.screenData).toEqual(rivers.A123);
   });
 });