@applicaster/zapp-react-native-ui-components 13.0.0-alpha.6714678893 → 13.0.0-alpha.7100577251

package/Components/Screen/index.tsx

@@ -2,10 +2,6 @@
 import React from "react";
 import { View } from "react-native";
 import { usePickFromState } from "@applicaster/zapp-react-native-redux/hooks";
-import {
-  isOrientationCompatible,
-  useGetScreenOrientation,
-} from "@applicaster/zapp-react-native-utils/appUtils/orientationHelper";
 
 import { useTheme } from "@applicaster/zapp-react-native-utils/theme";
 import { getComponentModule } from "@applicaster/zapp-react-native-utils/pluginUtils";
@@ -15,7 +11,6 @@ import {
   getScreenId,
 } from "@applicaster/zapp-react-native-utils/navigationUtils";
 import {
-  useDimensions,
   useRoute,
   useCurrentScreenData,
   useNavbarState,
@@ -27,6 +22,7 @@ import { getNavigationPluginModule } from "@applicaster/zapp-react-native-app/Ap
 import { RouteManager } from "../RouteManager";
 import { useScreenConfiguration } from "../River/useScreenConfiguration";
 import { isValidColor } from "./utils";
+import { useWaitForValidOrientation } from "./hooks";
 
 const screenStyles = {
   flex: 1,
@@ -50,14 +46,6 @@ export function Screen(_props: Props) {
   const currentScreenData = useCurrentScreenData();
   const { backgroundColor } = useScreenConfiguration(currentScreenData.id);
 
-  const {
-    width: screenWidth,
-    height,
-    deviceInfo,
-  } = useDimensions("screen", {
-    fullDimensions: true,
-  });
-
   const { screenData, pathname } = useRoute();
 
   const currentRiver = useScreenData(
@@ -66,13 +54,6 @@ export function Screen(_props: Props) {
 
   const { title } = useNavbarState();
 
-  const isTablet = deviceInfo?.isTablet;
-
-  const { appData } = usePickFromState(["appData"]);
-  const isTabletPortrait = appData?.isTabletPortrait;
-
-  const layoutData = { isTablet, isTabletPortrait, width: screenWidth, height };
-
   const hasMenu = shouldNavBarDisplayMenu(currentRiver, plugins);
 
   const navBarProps = React.useMemo<MobileNavBarPluginProps | null>(
@@ -108,30 +89,23 @@ export function Screen(_props: Props) {
     [theme.app_background_color, backgroundColor]
   );
 
-  const targetScreenData =
-    currentScreenData || (screenData as any)?.targetScreen || screenData;
-
-  const orientation = useGetScreenOrientation(targetScreenData);
+  // Set ready state when screen is rotated to desired orientation
+  const isReady = useWaitForValidOrientation();
 
   // We prevent rendering of the screen until UI is actually rotated to screen desired orientation.
   // This saves unnecessary re-renders and user will not see distorted aspect screen.
-  if (
-    !isOrientationCompatible({
-      orientation,
-      layoutData,
-    })
-  ) {
-    return <View style={style} />;
-  }
-
   return (
     <View style={style}>
-      {navBarProps && <NavBar {...navBarProps} hasMenu={hasMenu} />}
-
-      <OfflineFallbackScreen>
-        {/* @TODO RouteManager doesn't use props, can they be removed ?  */}
-        <RouteManager pathname={pathname} screenData={screenData} />
-      </OfflineFallbackScreen>
+      {isReady ? (
+        <>
+          {navBarProps && <NavBar {...navBarProps} hasMenu={hasMenu} />}
+
+          <OfflineFallbackScreen>
+            {/* @TODO RouteManager doesn't use props, can they be removed ?  */}
+            <RouteManager pathname={pathname} screenData={screenData} />
+          </OfflineFallbackScreen>
+        </>
+      ) : null}
     </View>
   );
 }

package/Components/ScreenResolver/__tests__/__snapshots__/screenResolver.test.js.snap

@@ -2,7 +2,7 @@
 
 exports[`<ScreenResolver /> renders correctly 1`] = `
 <mockConstructor
-  screenData={Object {}}
+  screenData={{}}
   screenId="1234"
   screenType="screen_type_1"
 />
@@ -11,7 +11,7 @@ exports[`<ScreenResolver /> renders correctly 1`] = `
 exports[`<ScreenResolver /> wraps the player with the playerController component when the screenType is playable 1`] = `
 <HandlePlayable
   isModal={false}
-  item={Object {}}
+  item={{}}
   mode="FULLSCREEN"
 />
 `;

package/Components/ScreenResolver/__tests__/screenResolver.test.js

@@ -2,42 +2,39 @@ import React from "react";
 import { View } from "react-native";
 import { shallow } from "enzyme";
 import { shallowToJson } from "enzyme-to-json";
-import { connect as realConnect } from "react-redux";
-
 const pluginConfiguration = { foo: "bar" };
 
 const ScreenType1 = jest.fn(() => <View />);
 const ScreenType2 = jest.fn(() => <View />);
+const PlayerController = jest.fn(() => <View />);
 
-const ScreenType3 = {
+const mockScreenType3 = {
   module: jest.fn(() => <View />),
   name: "ScreenType3",
   type: "screen_type_3",
   configuration: pluginConfiguration,
 };
 
-const ScreenType4 = {
+const mockScreenType4 = {
   module: jest.fn(() => <View />),
   name: "ScreenType4",
   type: "screen_type_4",
 };
 
-const PlayerController = jest.fn(() => <View />);
-
-const playerPlugin = {
+const mockPlayerPlugin = {
   module: jest.fn(() => <View />),
   name: "playerPlugin",
   type: "player",
 };
 
-const ScreenPlugin = {
+const mockScreenPlugin = {
   module: jest.fn(() => <View />),
   type: "general",
   name: "Screen plugin",
   identifier: "screen-plugin",
 };
 
-const PluginWithConfig = {
+const mockPluginWithConfig = {
   module: jest.fn(() => <View />),
   type: "general",
   name: "Plugin with config",
@@ -47,15 +44,7 @@ const PluginWithConfig = {
 
 const components = { ScreenType1, ScreenType2, PlayerController };
 
-const plugins = {
-  ScreenType3,
-  ScreenType4,
-  playerPlugin,
-  ScreenPlugin,
-  PluginWithConfig,
-};
-
-const withAnalytics = {
+const mockWithAnalytics = {
   sendOnClickEvent: jest.fn(),
   sendMenuClickEvent: jest.fn(),
   sendMenuToggleEvent: jest.fn(),
@@ -66,24 +55,39 @@ const withAnalytics = {
   sendScreenEvent: jest.fn(),
 };
 
+const mockUsePickFromState = jest.fn(() => {
+  return {
+    components,
+    plugins: {
+      ScreenType3: mockScreenType3,
+      ScreenType4: mockScreenType4,
+      playerPlugin: mockPlayerPlugin,
+      ScreenPlugin: mockScreenPlugin,
+      PluginWithConfig: mockPluginWithConfig,
+    },
+  };
+});
+
 jest.mock("@applicaster/zapp-react-native-utils/analyticsUtils", () => ({
-  useAnalytics: jest.fn().mockReturnValue(withAnalytics),
+  useAnalytics: jest.fn().mockReturnValue(mockWithAnalytics),
 }));
 
 jest.mock("@applicaster/zapp-react-native-redux/hooks", () => ({
-  usePickFromState: jest.fn(() => ({ components, plugins })),
+  usePickFromState: mockUsePickFromState,
 }));
 
+const mockUseScreenAnalytics = jest.fn();
+
 jest.mock(
   "@applicaster/zapp-react-native-utils/analyticsUtils/helpers/hooks",
   () => ({
-    useScreenAnalytics: jest.fn(() => {}),
+    useScreenAnalytics: mockUseScreenAnalytics,
   })
 );
 
 jest.mock("react-redux", () => ({
+  ...jest.requireActual("react-redux"),
   useDispatch: jest.fn(() => () => {}),
-  connect: realConnect,
 }));
 
 jest.mock("@applicaster/zapp-react-native-utils/reactHooks", () => ({
@@ -118,13 +122,13 @@ describe("<ScreenResolver />", () => {
   it("picks screen from plugins if it exists", () => {
     const wrapper = getWrapper("A1234", "screen_type_3", {});
 
-    expect(wrapper.find(ScreenType3.module)).toHaveProperty("length", 1);
+    expect(wrapper.find(mockScreenType3.module)).toHaveProperty("length", 1);
   });
 
   it("picks the screen from its identifier if it exists", () => {
     const wrapper = getWrapper("A1234", "screen-plugin", {});
 
-    expect(wrapper.find(ScreenPlugin.module)).toHaveProperty("length", 1);
+    expect(wrapper.find(mockScreenPlugin.module)).toHaveProperty("length", 1);
   });
 
   it("picks screen from components if it doesn't exist in plugins", () => {
@@ -136,7 +140,7 @@ describe("<ScreenResolver />", () => {
   it("renders the screen and passes screenId & locationState as props", () => {
     const wrapper = getWrapper("A1234", "screen_type_3", "foo");
 
-    const screenWrapper = wrapper.find(ScreenType3.module);
+    const screenWrapper = wrapper.find(mockScreenType3.module);
 
     expect(screenWrapper.prop("screenId")).toEqual("A1234");
     expect(screenWrapper.prop("screenData")).toEqual("foo");
@@ -151,7 +155,7 @@ describe("<ScreenResolver />", () => {
   it("injects the plugin configuration if it exists", () => {
     const wrapper = getWrapper("A1234", "plugin-with-config", {});
 
-    expect(wrapper.find(PluginWithConfig.module).props()).toHaveProperty(
+    expect(wrapper.find(mockPluginWithConfig.module).props()).toHaveProperty(
       "configuration",
       expect.objectContaining(pluginConfiguration)
     );
@@ -160,7 +164,7 @@ describe("<ScreenResolver />", () => {
   it("injects the plugin configuration if it exists, even when plugin is resolved by type", () => {
     const wrapper = getWrapper("A1234", "screen_type_3", {});
 
-    expect(wrapper.find(ScreenType3.module).props()).toHaveProperty(
+    expect(wrapper.find(mockScreenType3.module).props()).toHaveProperty(
       "configuration",
       expect.objectContaining(pluginConfiguration)
     );

package/Components/Tabs/Tab.tsx

@@ -69,8 +69,8 @@ const getStyles = (configuration, selected, focused) => {
           ? tab_cell_background_color_selected_active
           : tab_cell_background_color_selected_default
         : focused
-        ? tab_cell_background_color_active
-        : tab_cell_background_color_default,
+          ? tab_cell_background_color_active
+          : tab_cell_background_color_default,
       justifyContent: "center",
       alignItems: "center",
       position: "relative",
@@ -85,8 +85,8 @@ const getStyles = (configuration, selected, focused) => {
           ? tab_cell_border_color_active_focused
           : tab_cell_border_color_active
         : focused
-        ? tab_cell_border_color_default_focused
-        : tab_cell_border_color_default,
+          ? tab_cell_border_color_default_focused
+          : tab_cell_border_color_default,
     },
     label: {
       fontFamily: text_label_font_family,
@@ -98,8 +98,8 @@ const getStyles = (configuration, selected, focused) => {
           ? text_label_selected_active_font_color
           : text_label_selected_default_font_color
         : focused
-        ? text_label_active_font_color
-        : text_label_default_font_color,
+          ? text_label_active_font_color
+          : text_label_default_font_color,
     },
     underline: {
       position: "absolute",
@@ -138,6 +138,7 @@ const Tab = ({ title, selected, handleOnPress }: Props, ref: any) => {
 
   return (
     <TouchableWithoutFeedback
+      testID="tab-touchable"
       onPressIn={handleOnPressIn}
       onPressOut={handleOnPressOut}
       onPress={handleOnPress}

package/Components/TextInputTv/__tests__/TextInputTv.test.js

@@ -1,18 +1,13 @@
 import React from "react";
-import TestRenderer from "react-test-renderer";
-
-jest.mock("react-native", () => {
-  const RNMock = jest.genMockFromModule("react-native");
-  const { TextInput } = jest.requireActual("react-native");
-
-  return {
-    ...RNMock,
-    TextInput,
-    Platform: {
-      OS: "samsung_tv",
-      isTV: true,
-    },
-  };
+import { Platform } from "react-native";
+import { render } from "@testing-library/react-native";
+
+Platform.OS = "samsung_tv";
+
+Object.defineProperty(Platform, "isTV", {
+  get() {
+    return true;
+  },
 });
 
 jest.mock("@applicaster/zapp-react-native-utils/localizationUtils", () => ({
@@ -20,12 +15,12 @@ jest.mock("@applicaster/zapp-react-native-utils/localizationUtils", () => ({
 }));
 
 const { TextInputTv } = require("../");
-const { Platform, TextInput } = require("react-native");
+const testIDToTest = "TextInput-tv";
 
 describe("<TextInputTv />", () => {
   it("renders", () => {
-    const testInstance = TestRenderer.create(<TextInputTv />);
-    expect(testInstance.toJSON).toBeTruthy();
+    const { toJSON } = render(<TextInputTv />);
+    expect(toJSON()).toMatchSnapshot();
   });
 
   describe("on native", () => {
@@ -34,8 +29,8 @@ describe("<TextInputTv />", () => {
     });
 
     it("returns React-Native TextInput component if not on samsung", () => {
-      const testInstance = TestRenderer.create(<TextInputTv />);
-      expect(testInstance.root.findByType(TextInput)).toBeTruthy();
+      const { getByTestId } = render(<TextInputTv />);
+      expect(getByTestId(testIDToTest)).toBeTruthy();
     });
   });
 
@@ -45,29 +40,30 @@ describe("<TextInputTv />", () => {
     });
 
     it("returns React input component if on samsung", () => {
-      const testInstance = TestRenderer.create(<TextInputTv type="samsung" />);
-      expect(testInstance.root.findByType("input")).toBeTruthy();
+      const { getByTestId } = render(<TextInputTv type="samsung" />);
+      expect(getByTestId(testIDToTest)).toBeTruthy();
     });
 
     it("flattens styles", () => {
       Platform.OS = "samsung_tv";
       const style = [{ width: 200 }, { height: 200 }];
-      const testInstance = TestRenderer.create(<TextInputTv style={style} />);
 
-      expect(typeof testInstance.root.findByType("input").props.style).toBe(
-        "object"
+      const { getByTestId } = render(
+        <TextInputTv type="samsung" style={style} />
       );
+
+      expect(getByTestId(testIDToTest).props.style).toBeObject();
     });
 
     it("maps onChangeText to onChange", () => {
       Platform.OS = "samsung_tv";
       const onChangeText = jest.fn();
 
-      const testInstance = TestRenderer.create(
-        <TextInputTv onChangeText={onChangeText} />
+      const { getByTestId } = render(
+        <TextInputTv type="samsung" onChangeText={onChangeText} />
       );
 
-      const inputInstance = testInstance.root.findByType("input");
+      const inputInstance = getByTestId(testIDToTest);
       expect(inputInstance.props.onChange).toBeDefined();
       expect(inputInstance.props.onChangeText).toBeUndefined();
     });
@@ -76,11 +72,11 @@ describe("<TextInputTv />", () => {
       Platform.OS = "samsung_tv";
       const onChangeText = jest.fn();
 
-      const testInstance = TestRenderer.create(
-        <TextInputTv onChangeText={onChangeText} />
+      const { getByTestId } = render(
+        <TextInputTv type="samsung" onChangeText={onChangeText} />
       );
 
-      const inputInstance = testInstance.root.findByType("input");
+      const inputInstance = getByTestId(testIDToTest);
       const value = "foobar";
       inputInstance.props.onChange({ target: { value: value } });
       expect(onChangeText).toBeCalledWith(value);
@@ -89,11 +85,12 @@ describe("<TextInputTv />", () => {
     it("maps onEndEditing to onBlur", () => {
       Platform.OS = "samsung_tv";
 
-      const testInstance = TestRenderer.create(
-        <TextInputTv onEndEditing={() => null} />
+      const { getByTestId } = render(
+        <TextInputTv type="samsung" onEndEditing={() => null} />
       );
 
-      const inputInstance = testInstance.root.findByType("input");
+      const inputInstance = getByTestId(testIDToTest);
+
       expect(inputInstance.props.onBlur).toBeDefined();
       expect(inputInstance.props.onEndEditing).toBeUndefined();
     });
@@ -101,11 +98,12 @@ describe("<TextInputTv />", () => {
     it("maps onPress to onClick", () => {
       Platform.OS = "samsung_tv";
 
-      const testInstance = TestRenderer.create(
-        <TextInputTv onPress={() => null} />
+      const { getByTestId } = render(
+        <TextInputTv type="samsung" onPress={() => null} />
       );
 
-      const inputInstance = testInstance.root.findByType("input");
+      const inputInstance = getByTestId(testIDToTest);
+
       expect(inputInstance.props.onClick).toBeDefined();
       expect(inputInstance.props.onPress).toBeUndefined();
     });
@@ -113,22 +111,24 @@ describe("<TextInputTv />", () => {
     it("replaces secureTextEntry with type:'password'", () => {
       Platform.OS = "samsung_tv";
 
-      const testInstance = TestRenderer.create(
-        <TextInputTv secureTextEntry={true} />
+      const { getByTestId } = render(
+        <TextInputTv type="samsung" secureTextEntry />
       );
 
-      const inputInstance = testInstance.root.findByType("input");
+      const inputInstance = getByTestId(testIDToTest);
+
       expect(inputInstance.props.type).toBe("password");
     });
 
     it("removes 'onChangeText', 'secureTextEntry', 'onEndEditing', 'onPress' props", () => {
       Platform.OS = "samsung_tv";
 
-      const testInstance = TestRenderer.create(
-        <TextInputTv onChangeText secureTextEntry onEndEditing />
+      const { getByTestId } = render(
+        <TextInputTv type="samsung" onChangeText secureTextEntry onEndEditing />
       );
 
-      const inputInstance = testInstance.root.findByType("input");
+      const inputInstance = getByTestId(testIDToTest);
+
       expect(inputInstance.props.onChangeText).toBeUndefined();
       expect(inputInstance.props.secureTextEntry).toBeUndefined();
       expect(inputInstance.props.onEndEditing).toBeUndefined();

package/Components/TextInputTv/__tests__/__snapshots__/TextInputTv.test.js.snap

@@ -0,0 +1,7 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<TextInputTv /> renders 1`] = `
+<input
+  testID="TextInput-tv"
+/>
+`;

package/Components/TextInputTv/index.tsx

@@ -94,8 +94,8 @@ function TextInputTV(props: Props, ref) {
             styles.textAlign === "center"
               ? styles.textAlign
               : styles.textAlign === "left"
-              ? "right"
-              : "left";
+                ? "right"
+                : "left";
 
           return { style: { ...styles, textAlign } };
         }
@@ -175,10 +175,10 @@ function TextInputTV(props: Props, ref) {
   return isWebPlatform ? (
     <>
       {additional && additional()}
-      <input ref={ref} {...inputProps} />
+      <input testID="TextInput-tv" ref={ref} {...inputProps} />
     </>
   ) : (
-    <TextInput ref={ref} {...inputProps} />
+    <TextInput testID="TextInput-tv" ref={ref} {...inputProps} />
   );
 }
 

package/Components/Touchable/__tests__/__snapshots__/touchable.test.tsx.snap

@@ -14,7 +14,7 @@ exports[`<Touchable /> when not running in automated tests environment renders c
   onResponderTerminationRequest={[Function]}
   onStartShouldSetResponder={[Function]}
   style={
-    Object {
+    {
       "opacity": 1,
     }
   }
@@ -40,7 +40,7 @@ exports[`<Touchable /> when running in automated tests environment has accessibl
   onResponderTerminationRequest={[Function]}
   onStartShouldSetResponder={[Function]}
   style={
-    Object {
+    {
       "opacity": 1,
     }
   }

package/Components/Transitioner/AnimationManager.js

@@ -3,19 +3,19 @@ import { Animated } from "react-native";
 import { NAV_ACTION_PUSH, NAV_ACTION_BACK } from "./Transitioner";
 
 type TransitionConfig = {
-  duration: number,
-  easing: any,
+  duration: number;
+  easing: any;
   from: {
-    style: any,
-  },
+    style: any;
+  };
   to: {
-    style: any,
-  },
+    style: any;
+  };
 };
 
 type Props = {
-  transitionConfig: TransitionConfig,
-  contentStyle: { [string]: any },
+  transitionConfig: TransitionConfig;
+  contentStyle: { [string]: any };
 };
 
 /**

package/Components/Transitioner/Scene.tsx

@@ -1,4 +1,5 @@
 import React from "react";
+import { equals } from "ramda";
 import { Animated, ViewProps, ViewStyle } from "react-native";
 import { useSafeAreaFrame } from "react-native-safe-area-context";
 
@@ -8,6 +9,11 @@ import { PathnameContext } from "../../Contexts/PathnameContext";
 import { ScreenDataContext } from "../../Contexts/ScreenDataContext";
 import { ScreenContextProvider } from "../../Contexts/ScreenContext";
 
+const fullWidthDimensions = {
+  height: "100%",
+  width: "100%",
+};
+
 type Props = {
   children: any;
   style: any;
@@ -20,6 +26,47 @@ type Props = {
   screenData: NavigationScreenData;
 };
 
+export function CurrentScreenContextProvider({
+  children,
+  ...props
+}: {
+  children: any;
+  pathname: string;
+  isActive: boolean;
+  screenData: NavigationScreenData;
+}) {
+  const { pathname, isActive = false, screenData } = props;
+
+  const [initialScreenData, setInitialScreenData] = React.useState(screenData);
+
+  React.useLayoutEffect(() => {
+    const screenDataChanged = !equals(initialScreenData, screenData);
+
+    if (isActive && screenDataChanged) {
+      setInitialScreenData(screenData);
+    }
+  }, [initialScreenData, screenData, isActive]);
+
+  return (
+    <ScreenDataContext.Provider value={initialScreenData}>
+      <PathnameContext.Provider value={pathname}>
+        <ScreenContextProvider pathname={pathname}>
+          {children}
+        </ScreenContextProvider>
+      </PathnameContext.Provider>
+    </ScreenDataContext.Provider>
+  );
+}
+
+const withCurrentScreenContext = (Component) =>
+  function SceneComponent(props: Props) {
+    return (
+      <CurrentScreenContextProvider {...props}>
+        <Component {...props} />
+      </CurrentScreenContextProvider>
+    );
+  };
+
 /**
  * Animated View container for any purpose.
  * Renders given children with given style object.
@@ -32,53 +79,35 @@ type Props = {
  * @param contentStyle
  * @param screenUniqueId
  */
-export function Scene({
+function SceneComponent({
   children,
   style,
   pointerEvents = "auto",
   overlayStyle,
   animating,
   contentStyle,
-  pathname,
   isActive = false,
   screenData,
 }: Props) {
-  const [initialScreenData, setInitialScreenData] = React.useState(screenData);
-
   useScreenOrientationHandler({
     screenData,
     isActive,
   });
 
-  React.useLayoutEffect(() => {
-    if (isActive) {
-      setInitialScreenData(screenData);
-    }
-  }, [screenData, isActive]);
-
   const frame = useSafeAreaFrame();
   const isAnimating = animating && overlayStyle;
 
-  const dimensions = isAnimating
-    ? {
-        width: "100%",
-        height: "100%",
-      }
-    : frame;
+  const dimensions = isAnimating ? fullWidthDimensions : frame;
 
   return (
     <Animated.View
       pointerEvents={pointerEvents}
       style={[style, contentStyle, dimensions]}
     >
-      <ScreenDataContext.Provider value={initialScreenData}>
-        <PathnameContext.Provider value={pathname}>
-          <ScreenContextProvider pathname={pathname}>
-            {children}
-          </ScreenContextProvider>
-        </PathnameContext.Provider>
-      </ScreenDataContext.Provider>
+      {children}
       {isAnimating && <Animated.View style={overlayStyle} />}
     </Animated.View>
   );
 }
+
+export const Scene = withCurrentScreenContext(SceneComponent);