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

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

@@ -3,7 +3,7 @@
 exports[`componentsMap renders renders components map correctly 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -11,15 +11,98 @@ exports[`componentsMap renders renders components map correctly 1`] = `
   <View
     onLayout={[Function]}
     style={
-      Object {
+      {
         "flex": 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={
-        Object {
+        {
           "paddingBottom": undefined,
           "paddingLeft": undefined,
           "paddingRight": undefined,
@@ -27,22 +110,22 @@ exports[`componentsMap renders renders components map correctly 1`] = `
         }
       }
       data={
-        Array [
-          Object {
+        [
+          {
             "component_type": "hero",
             "id": "A1",
-            "styles": Object {
-              "cell_styles": Array [
+            "styles": {
+              "cell_styles": [
                 "some",
                 "obsolete",
                 "ids",
               ],
             },
           },
-          Object {
+          {
             "component_type": "grid",
             "id": "A2",
-            "styles": Object {
+            "styles": {
               "master_cell_id": "uuid-5678-B",
             },
           },
@@ -62,16 +145,16 @@ exports[`componentsMap renders renders components map correctly 1`] = `
       onScrollEndDrag={[Function]}
       overScrollMode="auto"
       refreshControl={null}
-      removeClippedSubviews={true}
+      removeClippedSubviews={false}
       renderItem={[Function]}
       scrollEventThrottle={16}
       scrollIndicatorInsets={
-        Object {
+        {
           "right": 1,
         }
       }
-      stickyHeaderIndices={Array []}
-      viewabilityConfigCallbackPairs={Array []}
+      stickyHeaderIndices={[]}
+      viewabilityConfigCallbackPairs={[]}
       windowSize={12}
     >
       <View>
@@ -80,22 +163,14 @@ exports[`componentsMap renders renders components map correctly 1`] = `
           style={null}
         >
           <View
+            onLayout={[Function]}
             style={
-              Object {
-                "display": "flex",
+              {
+                "flex": 1,
               }
             }
           >
-            <View
-              onLayout={[Function]}
-              style={
-                Object {
-                  "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={
-              Object {
-                "display": "none",
+              {
+                "flex": 1,
               }
             }
-          >
-            <View
-              onLayout={[Function]}
-              style={
-                Object {
-                  "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={
-              Object {
-                "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={
-      Object {
-        "layoutVersion": "v1",
-      }
-    }
-    dispatch={[Function]}
-    rivers={
-      Object {
-        "A1234": Object {
-          "home": true,
-          "id": "A1234",
-          "name": "foo",
-          "type": "general_content",
-          "ui_components": Array [
-            Object {
-              "component_type": "hero",
-            },
-            Object {
-              "component_type": "grid",
-            },
-          ],
-        },
-        "B4567": Object {
-          "id": "B4567",
-        },
-        "C0987": Object {
-          "home": false,
-          "id": "C0987",
-          "name": "Some-Screen-Plugin",
-          "type": "some-screen-plugin",
-          "ui_components": Array [],
-        },
-      }
-    }
-    screenId="A1234"
-    store={
-      Object {
-        "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={
-    Object {
-      "groupId": undefined,
-      "home": false,
-      "id": "C0987",
-      "name": "Some-Screen-Plugin",
-      "type": "some-screen-plugin",
-      "ui_components": Array [],
+exports[`When River has a general_content type renders River component correctly 1`] = `
+<View
+  onLayout={[Function]}
+  style={
+    {
+      "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";
 
@@ -75,28 +74,70 @@ const riverComponents = [
   },
 ];
 
-const screenData = {
+const mockScreenData = {
   ui_components: riverComponents,
   rules: { pull_to_refresh_enabled: false },
   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),
 }));
 
-jest.mock("@applicaster/zapp-react-native-utils/reactHooks/navigation", () => ({
-  useNavigation: jest.fn(() => ({ currentRoute: "/river/A1234" })),
-  useRoute: jest.fn(() => ({ pathname: "/river/A1234", screenData })),
-  useProfilerLogging: jest.fn(),
-  useIsScreenActive: jest.fn().mockReturnValue(true),
-}));
+jest.mock(
+  "@applicaster/zapp-react-native-utils/reactHooks/navigation/useNavigation",
+  () => ({
+    useNavigation: jest.fn(() => ({ currentRoute: "/river/A1234" })),
+  })
+);
 
-jest.mock("@applicaster/zapp-react-native-utils/reactHooks/screen", () => ({
-  useCurrentScreenData: jest.fn(() => screenData),
-  useScreenData: jest.fn(() => screenData),
-  useScreenContext: jest.fn(() => screenData),
-}));
+jest.mock(
+  "@applicaster/zapp-react-native-utils/reactHooks/navigation/useRoute",
+  () => ({
+    useRoute: jest.fn(() => ({
+      pathname: "/river/A1234",
+      screenData: mockScreenData,
+    })),
+  })
+);
+
+jest.mock(
+  "@applicaster/zapp-react-native-utils/reactHooks/navigation/useIsScreenActive",
+  () => ({
+    useIsScreenActive: jest.fn().mockReturnValue(true),
+  })
+);
+
+jest.mock(
+  "@applicaster/zapp-react-native-utils/reactHooks/screen/useCurrentScreenData",
+  () => ({
+    useCurrentScreenData: jest.fn(() => mockScreenData),
+  })
+);
+
+jest.mock(
+  "@applicaster/zapp-react-native-utils/reactHooks/screen/useScreenData",
+  () => ({
+    useScreenData: jest.fn(() => mockScreenData),
+  })
+);
+
+jest.mock(
+  "@applicaster/zapp-react-native-utils/reactHooks/screen/useScreenContext",
+  () => ({
+    ...jest.requireActual(
+      "@applicaster/zapp-react-native-utils/reactHooks/screen/useScreenContext"
+    ),
+    useScreenContext: jest.fn(() => mockScreenData),
+  })
+);
 
 const { View } = require("react-native");
 const { ComponentsMap } = require("../ComponentsMap/ComponentsMap");
@@ -118,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();
 
@@ -135,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/TestId.tsx

@@ -12,11 +12,7 @@ const styles = StyleSheet.create({
 
 export function TestId({ screenId, children }: Props) {
   return (
-    <View
-      testID={screenId}
-      accessibilityLabel={screenId}
-      style={styles.container}
-    >
+    <View testID={screenId} style={styles.container}>
       {children}
     </View>
   );

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

@@ -1,18 +1,24 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`<RouteManager /> renders correctly 1`] = `
-<TestId
-  screenId="A1234"
+<View
+  style={
+    {
+      "flex": 1,
+    }
+  }
+  testID="A1234"
 >
-  <WithProvider
+  <View
     pathname="/river/A1234"
     screenData={
-      Object {
+      {
         "id": "A1234",
       }
     }
     screenId="A1234"
     screenType="river"
+    testID="screen-resolver"
   />
-</TestId>
+</View>
 `;