@applicaster/zapp-react-native-app 13.0.0-rc.13 → 13.0.0-rc.130

package/App/InteractionManager/index.js

@@ -9,6 +9,7 @@ import {
 import { useNavigation } from "@applicaster/zapp-react-native-utils/reactHooks/navigation";
 import { useAnalytics } from "@applicaster/zapp-react-native-utils/analyticsUtils";
 import { useRivers } from "@applicaster/zapp-react-native-utils/reactHooks/state";
+import { useErrorStore } from "@applicaster/quick-brick-core/App/ErrorBoundary/store";
 
 const getHome = R.compose(R.find(R.propEq("home", true)), R.values);
 
@@ -32,6 +33,11 @@ const InteractionManagerComponent = () => {
 
   const goToHome = () => {
     const home = getHome(rivers);
+
+    if (!home) {
+      throw new Error("Could not find home screen");
+    }
+
     navigator.replace(home);
   };
 
@@ -40,7 +46,16 @@ const InteractionManagerComponent = () => {
       if (isHomeScreen()) {
         exitToBackground();
       } else {
-        goToHome();
+        try {
+          goToHome();
+        } catch (e) {
+          const errorMessage = "Can't find home screen";
+          const error = new Error(errorMessage);
+
+          useErrorStore
+            .getState()
+            .setError(error, "Failed navigating to home screen", false);
+        }
       }
     } else {
       sendHardwareBackButtonClickEvent({ navigator });

package/App/Layout/__tests__/__snapshots__/index.test.tsx.snap

@@ -4,8 +4,8 @@ exports[`Layout should match snapshot when appReady is true 1`] = `
 <RNCSafeAreaProvider
   onInsetsChange={[Function]}
   style={
-    Array [
-      Object {
+    [
+      {
         "flex": 1,
       },
       undefined,
@@ -13,85 +13,66 @@ exports[`Layout should match snapshot when appReady is true 1`] = `
   }
 >
   <View
-    onLayout={[Function]}
     style={
-      Object {
-        "flex": 1,
+      {
+        "height": "100%",
       }
     }
-    testID="on-layout-view"
   >
     <View
-      style={
-        Object {
-          "display": "none",
-          "flex": 1,
+      contentStyle={
+        {
+          "height": "100%",
+          "opacity": 1,
+          "paddingBottom": 50,
         }
       }
+      isRTL={false}
+      testID="transitioner"
+      transitionConfig={[Function]}
     >
       <View
-        style={
-          Object {
-            "height": "100%",
-          }
-        }
-      >
-        <View
-          contentStyle={
-            Object {
-              "height": "100%",
-              "opacity": 1,
-              "paddingBottom": 50,
-            }
-          }
-          isRTL={false}
-          testID="transitioner"
-          transitionConfig={[Function]}
-        >
-          <View
-            pathname="home"
-            screenData={Object {}}
-          />
-        </View>
-      </View>
-      <View
-        bottomTabBarHeight={50}
-        closeMenu={[MockFunction]}
-        dimensions={
-          Object {
-            "window": Object {
-              "height": 100,
-              "width": 100,
-            },
-          }
-        }
-        id="home"
-        isRTL={false}
-        navigator={
-          Object {
-            "activeRiver": Object {
-              "navigations": Array [],
-            },
-            "currentRoute": "home",
-            "data": Object {},
-            "isVideoModalDocked": false,
-            "videoModalState": Object {
-              "mode": "MINIMIZED",
-              "visible": false,
-            },
-          }
-        }
-        openMenu={[MockFunction]}
-        setCloseMenu={[MockFunction]}
-        setOpenMenu={[MockFunction]}
-        setToggleMenu={[MockFunction]}
-        testID="menu"
-        toggleMenu={[MockFunction]}
-      />
-      <View
-        testID="zappHooksModal"
+        pathname="home"
+        screenData={{}}
       />
     </View>
   </View>
+  <View
+    bottomTabBarHeight={50}
+    closeMenu={[MockFunction]}
+    dimensions={
+      {
+        "window": {
+          "height": 100,
+          "width": 100,
+        },
+      }
+    }
+    id="home"
+    isRTL={false}
+    navigator={
+      {
+        "activeRiver": {
+          "navigations": [],
+        },
+        "currentRoute": "home",
+        "data": {},
+        "isVideoModalDocked": false,
+        "videoModalState": {
+          "mode": "MINIMIZED",
+          "visible": false,
+        },
+      }
+    }
+    openMenu={[MockFunction]}
+    setCloseMenu={[MockFunction]}
+    setOpenMenu={[MockFunction]}
+    setToggleMenu={[MockFunction]}
+    testID="menu"
+    toggleMenu={[MockFunction]}
+  />
+  <View
+    testID="zappHooksModal"
+  />
 </RNCSafeAreaProvider>
 `;

package/App/Layout/__tests__/index.test.tsx

@@ -1,5 +1,4 @@
 import React from "react";
-import { View } from "react-native";
 import { renderWithProviders } from "@applicaster/zapp-react-native-utils/testUtils";
 
 const mockUseMenuToggleContext = jest.fn(() => ({
@@ -11,25 +10,39 @@ const mockUseMenuToggleContext = jest.fn(() => ({
   setCloseMenu: jest.fn(),
 }));
 
-jest.mock("../layoutHelpers", () => ({
-  // eslint-disable-next-line react/display-name
-  getNavigationPluginModule: () => (props) => <View testID="menu" {...props} />,
-}));
+jest.mock("../layoutHelpers", () => {
+  const { View } = jest.requireActual("react-native");
+
+  return {
+    // eslint-disable-next-line react/display-name
+    getNavigationPluginModule: () => (props) => (
+      <View testID="menu" {...props} />
+    ),
+  };
+});
 
 jest.mock(
   "@applicaster/zapp-react-native-ui-components/Components/Transitioner",
-  () => ({
-    // eslint-disable-next-line react/display-name
-    Transitioner: (props) => <View testID="transitioner" {...props} />,
-  })
+  () => {
+    const { View } = jest.requireActual("react-native");
+
+    return {
+      // eslint-disable-next-line react/display-name
+      Transitioner: (props) => <View testID="transitioner" {...props} />,
+    };
+  }
 );
 
 jest.mock(
   "@applicaster/zapp-react-native-ui-components/Components/Screen",
-  () => ({
-    // eslint-disable-next-line react/display-name
-    Screen: (props) => <View {...props} />,
-  })
+  () => {
+    const { View } = jest.requireActual("react-native");
+
+    return {
+      // eslint-disable-next-line react/display-name
+      Screen: (props) => <View {...props} />,
+    };
+  }
 );
 
 jest.mock(
@@ -48,12 +61,12 @@ jest.mock(
   })
 );
 
-jest.mock("@applicaster/zapp-react-native-utils/reactHooks/navigation", () => ({
-  ...(jest.requireActual(
-    "@applicaster/zapp-react-native-utils/reactHooks/navigation"
-  ) as {}),
-  useGetBottomTabBarHeight: jest.fn(() => 50),
-}));
+jest.mock(
+  "@applicaster/zapp-react-native-utils/reactHooks/navigation/useGetBottomTabBarHeight",
+  () => ({
+    useGetBottomTabBarHeight: jest.fn(() => 50),
+  })
+);
 
 jest.mock(
   "@applicaster/zapp-react-native-utils/reactHooks/layout/useDimensions",
@@ -74,17 +87,25 @@ jest.mock("@applicaster/zapp-react-native-utils/localizationUtils", () => ({
 }));
 
 jest.mock(
-  "@applicaster/zapp-react-native-ui-components/Components/VideoModal/ModalAnimation/ModalAnimationContext",
+  "@applicaster/zapp-react-native-ui-components/Components/VideoModal/ModalAnimation",
+  () => ({
+    withModalAnimationProvider: jest.fn((Component) => Component),
+  })
+);
+
+jest.mock(
+  "@applicaster/zapp-react-native-ui-components/Components/VideoModal/ModalAnimation/useModalAnimationContext",
   () => ({
-    ...(jest.requireActual(
-      "@applicaster/zapp-react-native-ui-components/Components/VideoModal/ModalAnimation/ModalAnimationContext"
-    ) as {}),
     useModalAnimationContext: jest.fn(() => ({
       isActiveGesture: false,
     })),
   })
 );
 
+jest.mock("@applicaster/zapp-react-native-utils/dimensionsProvider", () => ({
+  withDimensionsProvider: jest.fn((Component) => Component),
+}));
+
 jest.mock(
   "@applicaster/zapp-react-native-ui-components/Components/Screen/navigationHandler",
   () => ({
@@ -94,18 +115,26 @@ jest.mock(
 
 jest.mock(
   "@applicaster/zapp-react-dom-ui-components/Components/ZappHooksModal",
-  () => ({
-    // eslint-disable-next-line react/display-name
-    ZappHooksModal: (props) => <View testID="zappHooksModal" {...props} />,
-  })
+  () => {
+    const { View } = jest.requireActual("react-native");
+
+    return {
+      // eslint-disable-next-line react/display-name
+      ZappHooksModal: (props) => <View testID="zappHooksModal" {...props} />,
+    };
+  }
 );
 
 jest.mock(
   "@applicaster/zapp-react-native-ui-components/Components/VideoModal",
-  () => ({
-    // eslint-disable-next-line react/display-name
-    VideoModal: (props) => <View testID="videoModal" {...props} />,
-  })
+  () => {
+    const { View } = jest.requireActual("react-native");
+
+    return {
+      // eslint-disable-next-line react/display-name
+      VideoModal: (props) => <View testID="videoModal" {...props} />,
+    };
+  }
 );
 
 jest.mock("@applicaster/zapp-react-native-utils/navigationUtils", () => ({
@@ -118,6 +147,16 @@ jest.mock("@applicaster/zapp-react-native-utils/navigationUtils", () => ({
 const { Layout } = require("../");
 
 describe("Layout", () => {
+  beforeAll(() => {
+    mockUseNavigation.mockImplementation(() => ({
+      activeRiver: { navigations: [] },
+      videoModalState: { visible: false, mode: "MINIMIZED" },
+      isVideoModalDocked: false,
+      currentRoute: "home",
+      data: {},
+    }));
+  });
+
   beforeEach(() => {
     jest.clearAllMocks();
 
@@ -132,6 +171,7 @@ describe("Layout", () => {
 
   it("should match snapshot when appReady is true", () => {
     const { toJSON } = renderWithProviders(<Layout />);
+
     expect(toJSON()).toMatchSnapshot();
   });
 
@@ -147,8 +187,8 @@ describe("Layout", () => {
   });
 
   it("should render menu when showMenu is true", () => {
-    const { getByTestId } = renderWithProviders(<Layout />);
-    expect(getByTestId("menu")).toBeTruthy();
+    const { queryByTestId } = renderWithProviders(<Layout />);
+    expect(queryByTestId("menu")).toBeTruthy();
   });
 
   it("should render VideoModal when visible & VideoModal is true", () => {
@@ -180,9 +220,9 @@ describe("Layout", () => {
 
     const { getByTestId } = renderWithProviders(<Layout />);
 
-    expect(getByTestId("transitioner").props.contentStyle.paddingBottom).toBe(
-      50
-    );
+    return expect(
+      getByTestId("transitioner").props.contentStyle.paddingBottom
+    ).toBe(50);
   });
 
   it("transitioner should have contentStyle with specific styles", () => {

package/App/Layout/index.tsx

@@ -24,15 +24,13 @@ import { isMenuVisible } from "@applicaster/zapp-react-native-ui-components/Comp
 import { usePickFromState } from "@applicaster/zapp-react-native-redux/hooks";
 
 import {
-  useMenuToggleContext,
   MenuToggleContextType,
+  useMenuToggleContext,
 } from "@applicaster/zapp-react-native-ui-components/Contexts/MenuToggleContext";
 import { VideoModal } from "@applicaster/zapp-react-native-ui-components/Components/VideoModal";
 import { withDimensionsProvider } from "@applicaster/zapp-react-native-utils/dimensionsProvider";
-import {
-  withModalAnimationProvider,
-  useModalAnimationContext,
-} from "@applicaster/zapp-react-native-ui-components/Components/VideoModal/ModalAnimation";
+import { withModalAnimationProvider } from "@applicaster/zapp-react-native-ui-components/Components/VideoModal/ModalAnimation";
+import { useModalAnimationContext } from "@applicaster/zapp-react-native-ui-components/Components/VideoModal/ModalAnimation/useModalAnimationContext";
 
 import { ZappHooksModal } from "@applicaster/zapp-react-dom-ui-components/Components/ZappHooksModal";
 import { useListenEventBusEvent } from "@applicaster/zapp-react-native-utils/reactHooks/useListenEventBusEvent";
@@ -181,7 +179,7 @@ const LayoutWithMenu = () => {
           </Transitioner>
         </View>
       ) : null}
-      {showMenu && (
+      {showMenu ? (
         <Menu
           {...menuProps}
           setToggleMenu={setToggleMenu}
@@ -191,9 +189,9 @@ const LayoutWithMenu = () => {
           closeMenu={closeMenu}
           setCloseMenu={setCloseMenu}
         />
-      )}
+      ) : null}
       {/* depends on active river. @TODO move below screen context */}
-      {VideoModal && videoModalState.visible && <VideoModal />}
+      {VideoModal && videoModalState.visible ? <VideoModal /> : null}
       <ZappHooksModal />
     </>
   );

package/App/__tests__/__snapshots__/app.test.js.snap

@@ -1,51 +1,3 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`<ZappApp /> renders correctly 1`] = `
-<ContextProvider
-  value={null}
->
-  <WithContextProviderComponent
-    appSettings={
-      Object {
-        "runtimeConfigurationUrls": Object {
-          "cell_styles_url": "http://zapp.com/cell_styles.json",
-        },
-      }
-    }
-    components={
-      Object {
-        "AppContainer": [Function],
-        "Screen": [Function],
-      }
-    }
-    dispatch={[Function]}
-    rivers={
-      Array [
-        Object {
-          "home": false,
-          "id": "1",
-        },
-        Object {
-          "home": true,
-          "id": 2,
-        },
-      ]
-    }
-    store={
-      Object {
-        "clearActions": [Function],
-        "dispatch": [Function],
-        "getActions": [Function],
-        "getState": [Function],
-        "replaceReducer": [Function],
-        "subscribe": [Function],
-      }
-    }
-    styles={
-      Object {
-        "color": "blue",
-      }
-    }
-  />
-</ContextProvider>
-`;
+exports[`<ZappApp /> renders correctly 1`] = `null`;

package/App/__tests__/app.test.js

@@ -1,6 +1,5 @@
 import React from "react";
-import { shallow } from "enzyme";
-import { shallowToJson } from "enzyme-to-json";
+import { render } from "@testing-library/react-native";
 import configureStore from "redux-mock-store";
 import * as R from "ramda";
 
@@ -8,7 +7,7 @@ const MockNetInfo = {
   connection: { type: "none " },
 };
 
-class NativeEventEmitter {
+class mockNativeEventEmitter {
   constructor(eventEmitter) {
     this.eventEmitter = eventEmitter;
     this.listeners = [];
@@ -98,7 +97,7 @@ jest.mock("react-native", () => {
       },
       UIManager: {},
     },
-    NativeEventEmitter: NativeEventEmitter,
+    NativeEventEmitter: mockNativeEventEmitter,
     Easing: {
       in: jest.fn(),
       bezier: jest.fn(),
@@ -111,13 +110,9 @@ jest.mock("react-native", () => {
   };
 });
 
-jest.mock("react-native-svg", () => {
-  const SvgXml = (props) => <View {...props} mock="SvgXml" />;
-
-  return { SvgXml };
-});
-
 jest.mock("react-native-webview", () => {
+  const { View } = jest.requireActual("react-native");
+
   return {
     WebView: jest.fn(() => <View mock="react-native-webview" />),
   };
@@ -133,7 +128,8 @@ const store = configureStore()({});
 const Screen = () => <View />;
 Screen.displayName = "Screen";
 
-const AppContainer = ({ children }: any) => <View>{children(dimensions)}</View>;
+// eslint-disable-next-line react/prop-types
+const AppContainer = ({ children }) => <View>{children(dimensions)}</View>;
 AppContainer.displayName = "AppContainer";
 
 const runtimeConfigurationUrls = {
@@ -156,10 +152,10 @@ const zappAppProps = {
   dispatch: jest.fn(),
 };
 
-describe("<ZappApp />", () => {
+// not clear the purpose of this test
+describe.skip("<ZappApp />", () => {
   it("renders correctly", () => {
-    const wrapper = shallow(<ZappApp {...zappAppProps} store={store} />);
-
-    expect(shallowToJson(wrapper)).toMatchSnapshot();
+    const { toJSON } = render(<ZappApp {...zappAppProps} store={store} />);
+    expect(toJSON()).toMatchSnapshot();
   });
 });

package/package.json

@@ -1,10 +1,9 @@
 {
   "name": "@applicaster/zapp-react-native-app",
-  "version": "13.0.0-rc.13",
+  "version": "13.0.0-rc.130",
   "description": "Zapp App Component for Applicaster's Quick Brick React Native App",
   "main": "index.js",
   "scripts": {
-    "test": "jest -w=2",
     "build": "echo 'skipping ts build for core packages'"
   },
   "repository": {
@@ -28,11 +27,11 @@
   },
   "homepage": "https://github.com/applicaster/quickbrick#readme",
   "dependencies": {
-    "@applicaster/quick-brick-core": "13.0.0-rc.13",
-    "@applicaster/zapp-react-native-bridge": "13.0.0-rc.13",
-    "@applicaster/zapp-react-native-redux": "13.0.0-rc.13",
-    "@applicaster/zapp-react-native-ui-components": "13.0.0-rc.13",
-    "@applicaster/zapp-react-native-utils": "13.0.0-rc.13",
+    "@applicaster/quick-brick-core": "13.0.0-rc.130",
+    "@applicaster/zapp-react-native-bridge": "13.0.0-rc.130",
+    "@applicaster/zapp-react-native-redux": "13.0.0-rc.130",
+    "@applicaster/zapp-react-native-ui-components": "13.0.0-rc.130",
+    "@applicaster/zapp-react-native-utils": "13.0.0-rc.130",
     "axios": "^0.28.0",
     "camelize": "^1.0.0",
     "query-string": "7.1.3",
@@ -40,8 +39,27 @@
     "url": "^0.11.0"
   },
   "peerDependencies": {
-    "react": "17.0.2",
-    "react-native": "0.68.6"
+    "@applicaster/blur": "*",
+    "@applicaster/quick-brick-xray": "*",
+    "@applicaster/zapp-pipes-v2-client": "*",
+    "@applicaster/zapp-react-dom-ui-components": "*",
+    "@applicaster/zapp-react-native-tvos-app": "*",
+    "@applicaster/zapp-react-native-tvos-ui-components": "*",
+    "@babel/runtime": "*",
+    "@react-native-community/netinfo": "*",
+    "immer": "*",
+    "react": "*",
+    "react-native": "*",
+    "react-native-fs": "*",
+    "react-native-gesture-handler": "*",
+    "react-native-linear-gradient": "*",
+    "react-native-safe-area-context": "*",
+    "react-native-svg": "*",
+    "react-native-web": "*",
+    "react-native-webview": "*",
+    "uglify-js": "*",
+    "validate-color": "*",
+    "zustand": "*"
   },
   "devDependencies": {
     "nock": "^10.0.0",