@applicaster/zapp-react-native-ui-components 12.0.0-alpha.5882013252 → 12.0.0-alpha.6437417031

package/Components/VideoModal/__tests__/PlayerWrapper.test.tsx

@@ -19,8 +19,6 @@ const props = {
 
 const useIsTablet = jest.fn();
 
-jest.mock("react-native");
-
 jest.mock("../PlayerDetails", () => ({ PlayerDetails: View }));
 
 jest.mock("@applicaster/zapp-react-native-utils/reactHooks/device", () => ({
@@ -38,6 +36,7 @@ jest.mock("@applicaster/zapp-react-native-utils/reactUtils", () => ({
 }));
 
 jest.mock("@applicaster/zapp-react-native-utils/reactHooks/navigation", () => ({
+  isNavBarVisible: jest.fn(() => true),
   useRoute: jest.fn(() => ({
     pathname: "/river/testId",
   })),
@@ -50,7 +49,7 @@ jest.mock("@applicaster/zapp-react-native-utils/reactHooks/navigation", () => ({
 
 jest.mock("../utils", () => ({ playerDimesionsHack: {} }));
 
-const { PlayerWrapper, defaultAspectRatioWidth } = require("../PlayerWrapper");
+const { PlayerWrapper } = require("../PlayerWrapper");
 
 jest.useFakeTimers();
 const children = jest.fn(() => {});
@@ -110,7 +109,8 @@ describe("PlayerWrapper", () => {
 
     const expectDimensions = {
       ...dimensions,
-      width: defaultAspectRatioWidth(dimensions.height),
+      width: undefined,
+      aspectRatio: 16 / 9,
     };
 
     expect(element).toMatchSnapshot();

package/Components/VideoModal/__tests__/__snapshots__/PlayerWrapper.test.tsx.snap

@@ -1,253 +1,297 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`PlayerWrapper renders inline 1`] = `
-<RNCSafeAreaView
-  edges={
-    Object {
-      "bottom": "off",
-      "left": "off",
-      "right": "off",
-      "top": "additive",
-    }
-  }
+<RNCSafeAreaProvider
+  onInsetsChange={[Function]}
   style={
     Array [
       Object {
-        "flexDirection": "column",
-      },
-      Object {
-        "backgroundColor": "transparent",
-      },
-      Object {
-        "height": 800,
-        "width": 300,
+        "flex": 1,
       },
-      Object {},
+      undefined,
     ]
   }
 >
-  <View
+  <RNCSafeAreaView
+    edges={
+      Object {
+        "bottom": "off",
+        "left": "off",
+        "right": "off",
+        "top": "additive",
+      }
+    }
     style={
       Array [
         Object {
-          "alignSelf": "center",
-          "position": "relative",
-          "zIndex": 200,
+          "flexDirection": "column",
         },
         Object {
-          "height": 421.875,
-          "width": 300,
+          "backgroundColor": "transparent",
         },
-        Object {},
         Object {
-          "aspectRatio": 1.7777777777777777,
-          "height": undefined,
-          "width": "100%",
+          "height": 800,
+          "width": 300,
         },
         Object {},
       ]
     }
-    testID="test-player-container"
-  />
-  <View
-    configuration={
-      Object {
-        "tablet_landscape_player_container_background_color": "red",
-        "tablet_landscape_sidebar_width": "35%",
+  >
+    <View
+      style={
+        Array [
+          Object {
+            "alignSelf": "center",
+            "position": "relative",
+            "zIndex": 200,
+          },
+          Object {
+            "aspectRatio": 1.7777777777777777,
+            "height": undefined,
+            "width": "100%",
+          },
+          Object {},
+          Object {},
+        ]
       }
-    }
-    entry={
-      Object {
-        "id": "test",
+      testID="test-player-container"
+    />
+    <View
+      configuration={
+        Object {
+          "tablet_landscape_player_container_background_color": "red",
+          "tablet_landscape_sidebar_width": "35%",
+        }
       }
-    }
-    isTabletLandscape={false}
-    style={
-      Object {
-        "flex": 1,
-        "paddingTop": 20,
+      entry={
+        Object {
+          "id": "test",
+        }
       }
-    }
-  />
-</RNCSafeAreaView>
+      isTabletLandscape={false}
+      style={
+        Object {
+          "flex": 1,
+          "paddingTop": 20,
+        }
+      }
+    />
+  </RNCSafeAreaView>
+</RNCSafeAreaProvider>
 `;
 
 exports[`PlayerWrapper renders inline and docked 1`] = `
-<RNCSafeAreaView
-  edges={
-    Object {
-      "bottom": "additive",
-      "left": "off",
-      "right": "off",
-      "top": "off",
-    }
-  }
+<RNCSafeAreaProvider
+  onInsetsChange={[Function]}
   style={
     Array [
       Object {
-        "flexDirection": "column",
-      },
-      Object {
-        "backgroundColor": "transparent",
-      },
-      Object {
-        "height": 50,
-        "width": 300,
+        "flex": 1,
       },
-      Object {},
+      undefined,
     ]
   }
 >
-  <View
+  <RNCSafeAreaView
+    edges={
+      Object {
+        "bottom": "additive",
+        "left": "off",
+        "right": "off",
+        "top": "off",
+      }
+    }
     style={
       Array [
         Object {
-          "alignSelf": "center",
-          "position": "relative",
-          "zIndex": 200,
+          "flexDirection": "column",
+        },
+        Object {
+          "backgroundColor": "transparent",
         },
         Object {
           "height": 50,
           "width": 300,
         },
         Object {},
-        Object {},
-        Object {},
       ]
     }
-    testID="test-player-container"
-  />
-  <View
-    style={
-      Object {
-        "flex": 1,
-        "paddingTop": 20,
+  >
+    <View
+      style={
+        Array [
+          Object {
+            "alignSelf": "center",
+            "position": "relative",
+            "zIndex": 200,
+          },
+          Object {
+            "aspectRatio": undefined,
+            "height": 50,
+            "width": "100%",
+          },
+          Object {},
+          Object {},
+        ]
       }
-    }
-  />
-</RNCSafeAreaView>
+      testID="test-player-container"
+    />
+    <View
+      style={
+        Object {
+          "flex": 1,
+          "paddingTop": 20,
+        }
+      }
+    />
+  </RNCSafeAreaView>
+</RNCSafeAreaProvider>
 `;
 
 exports[`PlayerWrapper renders inline on tablet in landscape orientation 1`] = `
-<RNCSafeAreaView
-  edges={
-    Object {
-      "bottom": "off",
-      "left": "off",
-      "right": "off",
-      "top": "additive",
-    }
-  }
+<RNCSafeAreaProvider
+  onInsetsChange={[Function]}
   style={
     Array [
       Object {
-        "flexDirection": "row",
-      },
-      Object {
-        "backgroundColor": "red",
-      },
-      Object {
-        "height": 800,
-        "width": 300,
+        "flex": 1,
       },
-      Object {},
+      undefined,
     ]
   }
 >
-  <View
+  <RNCSafeAreaView
+    edges={
+      Object {
+        "bottom": "off",
+        "left": "off",
+        "right": "off",
+        "top": "additive",
+      }
+    }
     style={
       Array [
         Object {
-          "alignSelf": "center",
-          "position": "relative",
-          "zIndex": 200,
+          "flexDirection": "row",
         },
         Object {
-          "height": 109.6875,
-          "width": 195,
+          "backgroundColor": "red",
+        },
+        Object {
+          "height": 800,
+          "width": 300,
         },
-        Object {},
-        Object {},
         Object {},
       ]
     }
-    testID="test-player-container"
-  />
-  <View
-    configuration={
-      Object {
-        "tablet_landscape_player_container_background_color": "red",
-        "tablet_landscape_sidebar_width": "35%",
+  >
+    <View
+      style={
+        Array [
+          Object {
+            "alignSelf": "center",
+            "position": "relative",
+            "zIndex": 200,
+          },
+          Object {
+            "aspectRatio": 1.7777777777777777,
+            "height": undefined,
+            "width": 195,
+          },
+          Object {},
+          Object {},
+        ]
       }
-    }
-    entry={
-      Object {
-        "id": "test",
+      testID="test-player-container"
+    />
+    <View
+      configuration={
+        Object {
+          "tablet_landscape_player_container_background_color": "red",
+          "tablet_landscape_sidebar_width": "35%",
+        }
       }
-    }
-    isTabletLandscape={true}
-    style={
-      Object {
-        "flex": 1,
-        "paddingTop": 20,
+      entry={
+        Object {
+          "id": "test",
+        }
       }
-    }
-  />
-</RNCSafeAreaView>
+      isTabletLandscape={true}
+      style={
+        Object {
+          "flex": 1,
+          "paddingTop": 20,
+        }
+      }
+    />
+  </RNCSafeAreaView>
+</RNCSafeAreaProvider>
 `;
 
 exports[`PlayerWrapper renders properly 1`] = `
-<RNCSafeAreaView
-  edges={
-    Object {
-      "bottom": "off",
-      "left": "off",
-      "right": "off",
-      "top": "additive",
-    }
-  }
+<RNCSafeAreaProvider
+  onInsetsChange={[Function]}
   style={
     Array [
       Object {
-        "flexDirection": "column",
-      },
-      Object {
-        "backgroundColor": "transparent",
-      },
-      Object {
-        "height": 800,
-        "width": 300,
+        "flex": 1,
       },
-      Object {},
+      undefined,
     ]
   }
 >
-  <View
+  <RNCSafeAreaView
+    edges={
+      Object {
+        "bottom": "off",
+        "left": "off",
+        "right": "off",
+        "top": "additive",
+      }
+    }
     style={
       Array [
         Object {
-          "alignSelf": "center",
-          "position": "relative",
-          "zIndex": 200,
+          "flexDirection": "column",
+        },
+        Object {
+          "backgroundColor": "transparent",
         },
         Object {
           "height": 800,
           "width": 300,
         },
         Object {},
-        Object {},
-        Object {},
       ]
     }
-    testID="test-player-container"
-  />
-  <View
-    style={
-      Object {
-        "flex": 1,
-        "paddingTop": 20,
+  >
+    <View
+      style={
+        Array [
+          Object {
+            "alignSelf": "center",
+            "position": "relative",
+            "zIndex": 200,
+          },
+          Object {
+            "aspectRatio": 1.7786666666666666,
+            "height": undefined,
+            "width": "100%",
+          },
+          Object {},
+          Object {},
+        ]
       }
-    }
-  />
-</RNCSafeAreaView>
+      testID="test-player-container"
+    />
+    <View
+      style={
+        Object {
+          "flex": 1,
+          "paddingTop": 20,
+        }
+      }
+    />
+  </RNCSafeAreaView>
+</RNCSafeAreaProvider>
 `;

package/Components/VideoModal/hooks/useModalSize.ts

@@ -1,4 +1,4 @@
-import React from "react";
+import * as React from "react";
 import { Dimensions } from "react-native";
 import { useIsTabletLandscape } from "@applicaster/zapp-react-native-utils/reactHooks/device/useMemoizedIsTablet";
 import {
@@ -39,13 +39,22 @@ export const useModalSize = (): Size => {
     MODAL_SIZE_FOR_PORTRAIT
   );
 
-  const setNewModalSize = (size, log) => {
-    setModalSize(size);
+  const setNewModalSize = React.useCallback((newSize, log) => {
+    setModalSize((oldSize) => {
+      if (
+        oldSize.height === newSize.height &&
+        oldSize.width === newSize.width
+      ) {
+        return oldSize;
+      }
+
+      return newSize;
+    });
 
     logger.debug({
       message: log,
     });
-  };
+  }, []);
 
   const isTabletLandscape = useIsTabletLandscape();
 

package/Components/Viewport/ViewportAware/__tests__/viewportAware.test.js

@@ -1,35 +1,38 @@
 /* eslint-disable react/prop-types */
 
-jest.mock("react-native", () => {
-  const { ScrollView } = jest.requireActual("react-native");
+import * as React from "react";
+
+import { shallow } from "enzyme";
+import { create, act } from "react-test-renderer";
+import { shallowToJson } from "enzyme-to-json";
+
+import { ViewportEvents } from "../../ViewportEvents";
+
+jest.useFakeTimers();
 
+jest.mock("react-native/Libraries/ReactNative/UIManager", () => {
   return {
-    ScrollView,
-    UIManager: {
-      measureLayout: jest.fn((handle, parent, error, success) => {
-        success(100, 100, 400, 400);
-      }),
-    },
-    findNodeHandle: jest.fn(() => 1234),
-    Animated: {
-      timing: jest.fn(() => ({ start: jest.fn() })),
+    ...jest.requireActual("react-native/Libraries/ReactNative/NativeUIManager"),
+    measureLayout: (handle, parent, error, success) => {
+      success(100, 100, 400, 400);
     },
   };
 });
 
-import * as React from "react";
+jest.mock("react-native/Libraries/Renderer/shims/ReactNative", () => ({
+  ...jest.requireActual("react-native/Libraries/Renderer/shims/ReactNative"),
+  findNodeHandle: () => 1234,
+}));
 
-import { shallow } from "enzyme";
-import TestRenderer from "react-test-renderer";
-import { act } from "@testing-library/react-hooks";
-import { shallowToJson } from "enzyme-to-json";
+const ReactNative = require("react-native");
 
-import { ViewportEvents } from "../../ViewportEvents";
+const { Animated, ScrollView } = ReactNative;
+
+Animated.timing = jest.fn(() => ({ start: jest.fn() }));
 
 const viewportEventsManager = new ViewportEvents(true);
 
-const { ScrollView } = require("react-native");
-const { ViewportAware } = require("../index");
+const { ViewportAware } = require("../");
 const { ViewportTracker } = require("../../ViewportTracker");
 
 const TestComponent = (props) => {
@@ -116,7 +119,7 @@ describe("<ViewportAware />", () => {
   });
 
   it("invokes the onViewportEnter function when entering the viewport", () => {
-    const wrapper = TestRenderer.create(
+    const wrapper = create(
       getWrapper(() => (
         <TestComponent
           preTriggerRatio={0.1}
@@ -134,6 +137,8 @@ describe("<ViewportAware />", () => {
         width: 1920,
         height: 1080,
       });
+
+      jest.runAllTimers();
     });
 
     expect(wrapper.toJSON()).toMatchSnapshot();
@@ -151,7 +156,7 @@ describe("<ViewportAware />", () => {
   });
 
   it("invokes the onViewportLeave function when leaving the viewport", () => {
-    const wrapper = TestRenderer.create(
+    const wrapper = create(
       getWrapper(() => (
         <TestComponent
           preTriggerRatio={0.1}

package/Components/Viewport/ViewportTracker/__tests__/viewportTracker.test.js

@@ -5,11 +5,10 @@ import { ViewportEvents } from "../../ViewportEvents";
 
 const TestComponent = () => <ScrollView />;
 
-jest.mock("react-native", () => {
-  return {
-    findNodeHandle: jest.fn(() => 1234),
-  };
-});
+jest.mock("react-native/Libraries/Renderer/shims/ReactNative", () => ({
+  ...jest.requireActual("react-native/Libraries/Renderer/shims/ReactNative"),
+  findNodeHandle: () => 1234,
+}));
 
 const viewportEventsManager = new ViewportEvents(true);