@applicaster/zapp-react-native-app 13.0.0-rc.16 → 13.0.0-rc.18

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,38 @@ 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 +60,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 +86,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 +114,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 +146,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 +170,7 @@ describe("Layout", () => {
 
   it("should match snapshot when appReady is true", () => {
     const { toJSON } = renderWithProviders(<Layout />);
+
     expect(toJSON()).toMatchSnapshot();
   });
 
@@ -147,8 +186,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 +219,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

@@ -29,10 +29,8 @@ import {
 } 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";

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

@@ -6,33 +6,33 @@ exports[`<ZappApp /> renders correctly 1`] = `
 >
   <WithContextProviderComponent
     appSettings={
-      Object {
-        "runtimeConfigurationUrls": Object {
+      {
+        "runtimeConfigurationUrls": {
           "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],
@@ -42,7 +42,7 @@ exports[`<ZappApp /> renders correctly 1`] = `
       }
     }
     styles={
-      Object {
+      {
         "color": "blue",
       }
     }

package/App/__tests__/app.test.js

@@ -8,7 +8,7 @@ const MockNetInfo = {
   connection: { type: "none " },
 };
 
-class NativeEventEmitter {
+class mockNativeEventEmitter {
   constructor(eventEmitter) {
     this.eventEmitter = eventEmitter;
     this.listeners = [];
@@ -98,7 +98,7 @@ jest.mock("react-native", () => {
       },
       UIManager: {},
     },
-    NativeEventEmitter: NativeEventEmitter,
+    NativeEventEmitter: mockNativeEventEmitter,
     Easing: {
       in: jest.fn(),
       bezier: jest.fn(),
@@ -111,13 +111,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 +129,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 = {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applicaster/zapp-react-native-app",
-  "version": "13.0.0-rc.16",
+  "version": "13.0.0-rc.18",
   "description": "Zapp App Component for Applicaster's Quick Brick React Native App",
   "main": "index.js",
   "scripts": {
@@ -28,11 +28,11 @@
   },
   "homepage": "https://github.com/applicaster/quickbrick#readme",
   "dependencies": {
-    "@applicaster/quick-brick-core": "13.0.0-rc.16",
-    "@applicaster/zapp-react-native-bridge": "13.0.0-rc.16",
-    "@applicaster/zapp-react-native-redux": "13.0.0-rc.16",
-    "@applicaster/zapp-react-native-ui-components": "13.0.0-rc.16",
-    "@applicaster/zapp-react-native-utils": "13.0.0-rc.16",
+    "@applicaster/quick-brick-core": "13.0.0-rc.18",
+    "@applicaster/zapp-react-native-bridge": "13.0.0-rc.18",
+    "@applicaster/zapp-react-native-redux": "13.0.0-rc.18",
+    "@applicaster/zapp-react-native-ui-components": "13.0.0-rc.18",
+    "@applicaster/zapp-react-native-utils": "13.0.0-rc.18",
     "axios": "^0.28.0",
     "camelize": "^1.0.0",
     "query-string": "7.1.3",
@@ -40,8 +40,28 @@
     "url": "^0.11.0"
   },
   "peerDependencies": {
+    "@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": "*",
+    "@types/node": "*",
+    "immer": "*",
     "react": "17.0.2",
-    "react-native": "0.68.6"
+    "react-native": "0.68.6",
+    "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",