@applicaster/zapp-react-native-ui-components 13.0.0-alpha.9946926334 → 13.0.0-rc.100

package/Components/River/RiverItem.tsx

@@ -1,5 +1,6 @@
-import React from "react";
+import React, { useEffect } from "react";
 import * as R from "ramda";
+import { isGroup } from "@applicaster/zapp-react-native-utils/componentsUtils";
 
 import { applyDecorators } from "../../Decorators";
 
@@ -11,6 +12,7 @@ import {
 import { riverLogger } from "./logger";
 import { tvPluginsWithCellRenderer } from "../../const";
 import { isTV } from "@applicaster/zapp-react-native-utils/reactUtils";
+import type { BehaviorSubject } from "rxjs";
 
 export type RiverItemType = {
   item: ZappUIComponent;
@@ -24,6 +26,7 @@ export type RiverItemType = {
   getStaticComponentFeed: GeneralContentScreenProps["getStaticComponentFeed"];
   readyToBeDisplayed?: boolean;
   isLast: boolean;
+  loadingState: BehaviorSubject<{ index: number }>;
 };
 
 function getFeedUrl(feed: ZappFeed, index: number) {
@@ -36,6 +39,33 @@ function getFeedUrl(feed: ZappFeed, index: number) {
   }
 }
 
+/**
+ * useLoadingState for RiverItemComponent
+ * takes currentIndex and loadingState as arguments
+ **/
+const useLoadingState = (
+  currentIndex: number,
+  loadingState: RiverItemType["loadingState"]
+) => {
+  const [readyToBeDisplayed, setReadyToBeDisplayed] = React.useState(
+    loadingState.getValue().index + 1 === currentIndex
+  );
+
+  useEffect(() => {
+    const subscription = loadingState.subscribe(({ index }) => {
+      if (index + 1 === currentIndex) {
+        setReadyToBeDisplayed(true);
+      }
+    });
+
+    return () => {
+      subscription.unsubscribe();
+    };
+  }, [loadingState, currentIndex]);
+
+  return readyToBeDisplayed;
+};
+
 function RiverItemComponent(props: RiverItemType) {
   const {
     item,
@@ -47,10 +77,12 @@ function RiverItemComponent(props: RiverItemType) {
     onLoadFinished,
     onLoadFailed,
     getStaticComponentFeed,
-    readyToBeDisplayed,
     isLast,
+    loadingState,
   } = props;
 
+  const readyToBeDisplayed = useLoadingState(index, loadingState);
+
   const feedUrl = getFeedUrl(feed, index);
 
   const Component = useComponentResolver(
@@ -81,7 +113,7 @@ function RiverItemComponent(props: RiverItemType) {
       jsOnly: true,
     });
 
-    if (!CellRenderer && item.component_type !== "group-qb") {
+    if (!CellRenderer && !isGroup(item)) {
       riverLogger.warning({
         message: "Cell Renderer is null - will fallback to default cell",
         data: { item, CellRenderer },
@@ -90,6 +122,10 @@ function RiverItemComponent(props: RiverItemType) {
     }
   }, []);
 
+  if (!readyToBeDisplayed) {
+    return null;
+  }
+
   if (Component === null || typeof Component === "undefined") {
     riverLogger.warning({
       message: `Component ${item.component_type} is null - skipping rendering`,

package/Components/River/TV/index.tsx

@@ -1,4 +1,9 @@
+import { compose } from "ramda";
 import { River as RiverComponent } from "./River";
 import { withTvEventHandler } from "./withTVEventHandler";
+import { withComponentsMapOffsetContext } from "../../../Contexts/ComponentsMapOffsetContext";
 
-export const River = withTvEventHandler(RiverComponent);
+export const River = compose(
+  withTvEventHandler,
+  withComponentsMapOffsetContext
+)(RiverComponent);

package/Components/River/__tests__/__snapshots__/componentsMap.test.js.snap

@@ -17,7 +17,90 @@ exports[`componentsMap renders renders components map correctly 1`] = `
     }
   >
     <RCTScrollView
-      ListFooterComponent={[Function]}
+      ListFooterComponent={
+        <Memo(RiverFooterComponent)
+          flatListHeight={null}
+          loadingState={
+            BehaviorSubject {
+              "_value": {
+                "done": false,
+                "index": -1,
+                "waitForAllComponents": false,
+              },
+              "closed": false,
+              "currentObservers": null,
+              "hasError": false,
+              "isStopped": false,
+              "observers": [
+                SafeSubscriber {
+                  "_finalizers": [
+                    Subscription {
+                      "_finalizers": null,
+                      "_parentage": [Circular],
+                      "closed": false,
+                      "initialTeardown": [Function],
+                    },
+                  ],
+                  "_parentage": null,
+                  "closed": false,
+                  "destination": ConsumerObserver {
+                    "partialObserver": {
+                      "complete": undefined,
+                      "error": undefined,
+                      "next": [Function],
+                    },
+                  },
+                  "initialTeardown": undefined,
+                  "isStopped": false,
+                },
+                SafeSubscriber {
+                  "_finalizers": [
+                    Subscription {
+                      "_finalizers": null,
+                      "_parentage": [Circular],
+                      "closed": false,
+                      "initialTeardown": [Function],
+                    },
+                  ],
+                  "_parentage": null,
+                  "closed": false,
+                  "destination": ConsumerObserver {
+                    "partialObserver": {
+                      "complete": undefined,
+                      "error": undefined,
+                      "next": [Function],
+                    },
+                  },
+                  "initialTeardown": undefined,
+                  "isStopped": false,
+                },
+                SafeSubscriber {
+                  "_finalizers": [
+                    Subscription {
+                      "_finalizers": null,
+                      "_parentage": [Circular],
+                      "closed": false,
+                      "initialTeardown": [Function],
+                    },
+                  ],
+                  "_parentage": null,
+                  "closed": false,
+                  "destination": ConsumerObserver {
+                    "partialObserver": {
+                      "complete": undefined,
+                      "error": undefined,
+                      "next": [Function],
+                    },
+                  },
+                  "initialTeardown": undefined,
+                  "isStopped": false,
+                },
+              ],
+              "thrownError": null,
+            }
+          }
+        />
+      }
       contentContainerStyle={
         {
           "paddingBottom": undefined,
@@ -80,22 +163,14 @@ exports[`componentsMap renders renders components map correctly 1`] = `
           style={null}
         >
           <View
+            onLayout={[Function]}
             style={
               {
-                "display": "flex",
+                "flex": 1,
               }
             }
           >
-            <View
-              onLayout={[Function]}
-              style={
-                {
-                  "flex": 1,
-                }
-              }
-            >
-              <View />
-            </View>
+            <View />
           </View>
         </View>
         <View
@@ -103,23 +178,13 @@ exports[`componentsMap renders renders components map correctly 1`] = `
           style={null}
         >
           <View
+            onLayout={[Function]}
             style={
               {
-                "display": "none",
+                "flex": 1,
               }
             }
-          >
-            <View
-              onLayout={[Function]}
-              style={
-                {
-                  "flex": 1,
-                }
-              }
-            >
-              <View />
-            </View>
-          </View>
+          />
         </View>
         <View
           onLayout={[Function]}
@@ -127,12 +192,16 @@ exports[`componentsMap renders renders components map correctly 1`] = `
           <View
             renderToHardwareTextureAndroid={true}
             style={
-              {
-                "alignItems": "center",
-                "height": null,
-                "justifyContent": "center",
-                "width": "100%",
-              }
+              [
+                {
+                  "alignItems": "center",
+                  "justifyContent": "center",
+                  "width": "100%",
+                },
+                {
+                  "height": null,
+                },
+              ]
             }
           >
             <ActivityIndicator

package/Components/River/__tests__/__snapshots__/river.test.js.snap

@@ -1,89 +1,27 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`When River has a general_content type <River /> renders correctly 1`] = `
-<ContextProvider
-  value={null}
->
-  <RiverWithData
-    appData={
-      {
-        "layoutVersion": "v1",
-      }
-    }
-    dispatch={[Function]}
-    rivers={
-      {
-        "A1234": {
-          "home": true,
-          "id": "A1234",
-          "name": "foo",
-          "type": "general_content",
-          "ui_components": [
-            {
-              "component_type": "hero",
-            },
-            {
-              "component_type": "grid",
-            },
-          ],
-        },
-        "B4567": {
-          "id": "B4567",
-        },
-        "C0987": {
-          "home": false,
-          "id": "C0987",
-          "name": "Some-Screen-Plugin",
-          "type": "some-screen-plugin",
-          "ui_components": [],
-        },
-      }
-    }
-    screenId="A1234"
-    store={
-      {
-        "clearActions": [Function],
-        "dispatch": [Function],
-        "getActions": [Function],
-        "getState": [Function],
-        "replaceReducer": [Function],
-        "subscribe": [Function],
-      }
-    }
-  />
-</ContextProvider>
-`;
-
-exports[`When River has a general_content type <RiverComponent /> renders correctly 1`] = `
-<GeneralContentScreen
-  groupId="ZF-C4"
-  screenId="A1234"
-/>
-`;
-
-exports[`When River has any other type other than general_content <RiverComponent /> renders correctly 1`] = `
-<WithProvider
-  screenData={
+exports[`When River has a general_content type renders River component correctly 1`] = `
+<View
+  onLayout={[Function]}
+  style={
     {
-      "groupId": undefined,
-      "home": false,
-      "id": "C0987",
-      "name": "Some-Screen-Plugin",
-      "type": "some-screen-plugin",
-      "ui_components": [],
+      "flex": 1,
     }
   }
-  screenId="C0987"
-  screenType="some-screen-plugin"
-/>
-`;
-
-exports[`When River has feed url <RiverComponent /> renders correctly 1`] = `
-<Connect(FeedLoaderComponent)
-  feedUrl="https://some-feed-url.net"
-  refreshCallback={[Function]}
-  refreshing={false}
+  testID="on-layout-view"
 >
-  <Component />
-</Connect(FeedLoaderComponent)>
+  <View
+    style={
+      {
+        "display": "none",
+        "flex": 1,
+      }
+    }
+  >
+    <View
+      screenId="A1234"
+      testID="general-content-screen"
+    />
+  </View>
+</View>
 `;

package/Components/River/__tests__/componentsMap.test.js

@@ -1,6 +1,5 @@
 import React from "react";
-import TestRenderer from "react-test-renderer";
-import { cleanup } from "@testing-library/react-native";
+import { cleanup, render } from "@testing-library/react-native";
 import { Provider } from "react-redux";
 import configureStore from "redux-mock-store";
 
@@ -81,6 +80,13 @@ const mockScreenData = {
   id: "A1234",
 };
 
+jest.mock("@applicaster/zapp-react-native-redux/AppStore", () => ({
+  appStore: {
+    get: jest.fn((prop) => mockStore[prop]),
+    getState: jest.fn(),
+  },
+}));
+
 jest.mock("@applicaster/zapp-react-native-utils/localizationUtils", () => ({
   useIsRTL: jest.fn(() => mock_rtl_flag),
 }));
@@ -153,7 +159,13 @@ const plugins = [];
 const navigation = {};
 
 const props = { components, cellStyles, riverComponents, navigation };
-const store = mockStore({ components, cellStyles, plugins });
+
+const store = mockStore({
+  components,
+  cellStyles,
+  plugins,
+  getState: jest.fn(),
+});
 
 jest.useFakeTimers();
 
@@ -170,12 +182,12 @@ describe("componentsMap", () => {
       .spyOn(themeUtils, "useTheme")
       .mockImplementation(() => () => theme);
 
-    const wrapper = TestRenderer.create(
+    const { toJSON } = render(
       <Provider store={store}>
         <ComponentsMap {...props} />
       </Provider>
     );
 
-    expect(wrapper.toJSON()).toMatchSnapshot();
+    expect(toJSON()).toMatchSnapshot();
   });
 });

package/Components/River/__tests__/river.test.js

@@ -1,13 +1,50 @@
 import React from "react";
-import { shallow } from "enzyme";
-import { shallowToJson } from "enzyme-to-json";
+import { render, screen } from "@testing-library/react-native";
 import configureStore from "redux-mock-store";
+import { renderWithProviders } from "@applicaster/zapp-react-native-utils/testUtils";
+import { Provider } from "react-redux";
 
-import { GeneralContentScreen } from "../../GeneralContentScreen";
-import { FeedLoader } from "../../FeedLoader";
-import { River } from "../index";
-import { RiverComponent } from "../River";
+import { River } from "../";
 import { ScreenResolver } from "../../ScreenResolver";
+import { RiverComponent } from "../River";
+
+jest.mock(
+  "@applicaster/zapp-react-native-utils/reactHooks/navigation/useIsScreenActive",
+  () => ({
+    useIsScreenActive: jest.fn(() => true),
+  })
+);
+
+jest.mock(
+  "@applicaster/zapp-react-native-ui-components/Components/GeneralContentScreen",
+  () => {
+    const { View } = jest.requireActual("react-native");
+
+    return {
+      GeneralContentScreen: (props) => (
+        <View testID="general-content-screen" {...props} />
+      ),
+    };
+  }
+);
+
+jest.mock(
+  "@applicaster/zapp-react-native-utils/analyticsUtils/helpers/hooks",
+  () => ({
+    useScreenAnalytics: jest.fn(),
+  })
+);
+
+jest.mock(
+  "@applicaster/zapp-react-native-utils/reactHooks/navigation/useNavigation",
+  () => ({
+    useNavigation: jest.fn(() => ({
+      videoModalState: {
+        mode: "test",
+      },
+    })),
+  })
+);
 
 const river = {
   home: true,
@@ -55,24 +92,24 @@ const appData = { layoutVersion: "v1" };
 const store = configureStore()({ rivers, appData });
 
 describe("When River has a general_content type", () => {
-  const wrapper = shallow(<RiverComponent {...riverProps} />);
-
-  describe("<RiverComponent />", () => {
-    it("renders correctly", () => {
-      expect(shallowToJson(wrapper)).toMatchSnapshot();
-    });
-
-    it("it returns a GeneralContentScreen", () => {
-      expect(wrapper.find(GeneralContentScreen).length).toBe(1);
-    });
+  it("renders GeneralContentScreen correctly", () => {
+    const { getByTestId } = render(
+      <Provider store={store}>
+        <RiverComponent {...riverProps} />
+      </Provider>
+    );
+
+    expect(getByTestId("general-content-screen")).toBeTruthy();
   });
 
-  describe("<River />", () => {
-    const wrapper = shallow(<River screenId="A1234" store={store} />);
+  it("renders River component correctly", () => {
+    const wrapper = render(
+      <Provider store={store}>
+        <River screenId="A1234" />
+      </Provider>
+    );
 
-    it("renders correctly", () => {
-      expect(shallowToJson(wrapper)).toMatchSnapshot();
-    });
+    expect(wrapper.toJSON()).toMatchSnapshot();
   });
 });
 
@@ -83,16 +120,10 @@ describe("When River has any other type other than general_content", () => {
     appData,
   };
 
-  const wrapper = shallow(<RiverComponent {...riverPropsWithScreenPlugin} />);
-
-  describe("<RiverComponent />", () => {
-    it("renders correctly", () => {
-      expect(shallowToJson(wrapper)).toMatchSnapshot();
-    });
+  it("renders ScreenResolver correctly", () => {
+    renderWithProviders(<RiverComponent {...riverPropsWithScreenPlugin} />);
 
-    it("it returns a ScreenResolver", () => {
-      expect(wrapper.find(ScreenResolver).length).toBe(1);
-    });
+    expect(screen.UNSAFE_getByType(ScreenResolver)).toBeDefined();
   });
 });
 
@@ -104,15 +135,19 @@ describe("When River has feed url", () => {
     appData: { layoutVersion: "v1" },
   };
 
-  const wrapper = shallow(<RiverComponent {...riverPropsWithFeedUrl} />);
-
-  describe("<RiverComponent />", () => {
-    it("renders correctly", () => {
-      expect(shallowToJson(wrapper)).toMatchSnapshot();
-    });
-
-    it("it returns a FeedLoader if it's a v1 layout", () => {
-      expect(wrapper.find(FeedLoader).length).toBe(1);
-    });
+  it("renders FeedLoader when layout is v1", () => {
+    const wrapper = renderWithProviders(
+      <RiverComponent {...riverPropsWithFeedUrl} />,
+      {
+        zappPipes: {
+          "https://some-feed-url.net": {
+            loading: false,
+            data: { entry: [] },
+          },
+        },
+      }
+    );
+
+    expect(wrapper.getByTestId("general-content-screen")).toBeDefined();
   });
 });

package/Components/RouteManager/__tests__/__snapshots__/routeManager.test.js.snap

@@ -1,10 +1,16 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`<RouteManager /> renders correctly 1`] = `
-<TestId
-  screenId="A1234"
+<View
+  accessibilityLabel="A1234"
+  style={
+    {
+      "flex": 1,
+    }
+  }
+  testID="A1234"
 >
-  <WithProvider
+  <View
     pathname="/river/A1234"
     screenData={
       {
@@ -13,6 +19,7 @@ exports[`<RouteManager /> renders correctly 1`] = `
     }
     screenId="A1234"
     screenType="river"
+    testID="screen-resolver"
   />
-</TestId>
+</View>
 `;

package/Components/RouteManager/__tests__/routeManager.test.js

@@ -1,31 +1,46 @@
 import React from "react";
-import { shallow } from "enzyme";
-import { shallowToJson } from "enzyme-to-json";
+import { render } from "@testing-library/react-native";
 
-const pathname = "/river/A1234";
-const screenData = { id: "A1234" };
+import { RouteManager } from "../";
+
+const mockPathname = "/river/A1234";
+const mockScreenData = { id: "A1234" };
 
 jest.mock("@applicaster/zapp-react-native-utils/reactHooks/navigation", () => ({
-  useRoute: jest.fn(() => ({ pathname: pathname, screenData: screenData })),
+  useRoute: jest.fn(() => ({
+    pathname: mockPathname,
+    screenData: mockScreenData,
+  })),
 }));
 
-const {
-  ScreenResolver,
-} = require("@applicaster/zapp-react-native-ui-components/Components/ScreenResolver");
+jest.mock(
+  "@applicaster/zapp-react-native-ui-components/Components/ScreenResolver",
+  () => {
+    const { View } = jest.requireActual("react-native");
 
-const { RouteManager } = require("../index");
+    return {
+      ScreenResolver: (props) => <View testID="screen-resolver" {...props} />,
+    };
+  }
+);
 
 describe("<RouteManager />", () => {
-  const wrapper = shallow(
-    <RouteManager pathname={pathname} screenData={screenData} />
-  );
+  let wrapper;
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+
+    wrapper = render(
+      <RouteManager pathname={mockPathname} screenData={mockScreenData} />
+    );
+  });
 
   it("renders correctly", () => {
-    expect(shallowToJson(wrapper)).toMatchSnapshot();
+    expect(wrapper.toJSON()).toMatchSnapshot();
   });
 
   it("passes the correct props to ScreenResolver", () => {
-    expect(wrapper.find(ScreenResolver).props()).toEqual({
+    expect(wrapper.getByTestId("screen-resolver").props).toMatchObject({
       pathname: "/river/A1234",
       screenType: "river",
       screenId: "A1234",