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

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

@@ -1,157 +1,180 @@
 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";
+import { renderWithProviders } from "@applicaster/zapp-react-native-utils/testUtils";
 
 const pluginConfiguration = { foo: "bar" };
 
-const ScreenType1 = jest.fn(() => <View />);
-const ScreenType2 = jest.fn(() => <View />);
+const MockModuleView = (testID) => {
+  // eslint-disable-next-line react/display-name
+  return function (props) {
+    return <View testID={testID} {...props} />;
+  };
+};
+
+const ScreenType1 = MockModuleView("screen_type_1");
+const ScreenType2 = MockModuleView("screen_type_2");
+const PlayerController = MockModuleView("player_controller");
 
-const ScreenType3 = {
-  module: jest.fn(() => <View />),
+const mockScreenType3 = {
+  module: MockModuleView("screen_type_3"),
   name: "ScreenType3",
   type: "screen_type_3",
   configuration: pluginConfiguration,
 };
 
-const ScreenType4 = {
-  module: jest.fn(() => <View />),
+const mockScreenType4 = {
+  module: MockModuleView("screen_type_4"),
   name: "ScreenType4",
   type: "screen_type_4",
 };
 
-const PlayerController = jest.fn(() => <View />);
-
-const playerPlugin = {
-  module: jest.fn(() => <View />),
+const mockPlayerPlugin = {
+  module: MockModuleView("player_plugin"),
   name: "playerPlugin",
   type: "player",
 };
 
-const ScreenPlugin = {
-  module: jest.fn(() => <View />),
+const mockScreenPlugin = {
+  module: MockModuleView("screen_plugin"),
   type: "general",
   name: "Screen plugin",
   identifier: "screen-plugin",
 };
 
-const PluginWithConfig = {
-  module: jest.fn(() => <View />),
+const mockPluginWithConfig = {
+  module: MockModuleView("plugin_with_config"),
   type: "general",
   name: "Plugin with config",
   identifier: "plugin-with-config",
   configuration: pluginConfiguration,
 };
 
-const components = { ScreenType1, ScreenType2, PlayerController };
-
-const plugins = {
-  ScreenType3,
-  ScreenType4,
-  playerPlugin,
-  ScreenPlugin,
-  PluginWithConfig,
+const mockComponents = { ScreenType1, ScreenType2, PlayerController };
+
+const mockState = {
+  components: mockComponents,
+  plugins: [
+    mockScreenType3,
+    mockScreenType4,
+    mockPlayerPlugin,
+    mockScreenPlugin,
+    mockPluginWithConfig,
+  ],
+  rivers: {
+    A1234: {},
+  },
 };
 
-const withAnalytics = {
-  sendOnClickEvent: jest.fn(),
-  sendMenuClickEvent: jest.fn(),
-  sendMenuToggleEvent: jest.fn(),
-  sendBackButtonClickEvent: jest.fn(),
-  sendOnNavItemClickEvent: jest.fn(),
-  sendHeaderClickEvent: jest.fn(),
-  sendHardwareBackButtonClickEvent: jest.fn(),
-  sendScreenEvent: jest.fn(),
-};
+jest.mock(
+  "@applicaster/zapp-react-native-utils/analyticsUtils/helpers/hooks",
+  () => ({
+    useScreenAnalytics: jest.fn(),
+  })
+);
 
-jest.mock("@applicaster/zapp-react-native-utils/analyticsUtils", () => ({
-  useAnalytics: jest.fn().mockReturnValue(withAnalytics),
-}));
+jest.mock(
+  "@applicaster/zapp-react-native-utils/reactHooks/navigation/useNavigation",
+  () => ({
+    useNavigation: jest.fn(() => ({
+      closeVideoModal: jest.fn(),
+      videoModalState: {
+        mode: "test",
+      },
+    })),
+  })
+);
 
-jest.mock("@applicaster/zapp-react-native-redux/hooks", () => ({
-  usePickFromState: jest.fn(() => ({ components, plugins })),
-}));
+jest.mock(
+  "@applicaster/zapp-react-native-utils/reactHooks/navigation/useRoute",
+  () => ({
+    useRoute: jest.fn(() => ({ screenId: "1234" })),
+  })
+);
 
 jest.mock(
-  "@applicaster/zapp-react-native-utils/analyticsUtils/helpers/hooks",
+  "@applicaster/zapp-react-native-utils/reactHooks/navigation/useIsScreenActive",
   () => ({
-    useScreenAnalytics: jest.fn(() => {}),
+    useIsScreenActive: () => ({
+      isScreenActive: true,
+    }),
   })
 );
 
-jest.mock("react-redux", () => ({
-  useDispatch: jest.fn(() => () => {}),
-  connect: realConnect,
-}));
+jest.mock("../../PlayerContainer", () => {
+  const { View } = jest.requireActual("react-native");
 
-jest.mock("@applicaster/zapp-react-native-utils/reactHooks", () => ({
-  useNavigation: jest.fn(() => ({
-    videoModalState: {
-      mode: "test",
-    },
-  })),
-  useRoute: jest.fn(() => ({ screenId: "1234" })),
-}));
+  return {
+    PlayerContainer: (props) => (
+      <View {...props}>
+        <props.Player />
+      </View>
+    ),
+  };
+});
 
-const { ScreenResolverComponent: ScreenResolver } = require("..");
+const getWrapper = (screenId, screenType, screenData) => {
+  const ScreenResolver = require("../").ScreenResolverComponent;
 
-const getWrapper = (screenId, screenType, screenData) =>
-  shallow(
+  return renderWithProviders(
     <ScreenResolver
       {...{
         screenId,
         screenType,
         screenData,
       }}
-    />
+    />,
+    mockState
   );
+};
 
 describe("<ScreenResolver />", () => {
   it("renders correctly", () => {
     const wrapper = getWrapper("1234", "screen_type_1", {});
 
-    expect(shallowToJson(wrapper)).toMatchSnapshot();
+    expect(wrapper.getByTestId("screen_type_1")).toBeDefined();
   });
 
   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.getByTestId("screen_type_3")).toBeDefined();
   });
 
   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.getByTestId("screen_plugin")).toBeDefined();
   });
 
   it("picks screen from components if it doesn't exist in plugins", () => {
     const wrapper = getWrapper("A1234", "screen_type_2", {});
 
-    expect(wrapper.find(ScreenType2)).toHaveProperty("length", 1);
+    expect(wrapper.getByTestId("screen_type_2")).toBeDefined();
   });
 
   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.getByTestId("screen_type_3");
 
-    expect(screenWrapper.prop("screenId")).toEqual("A1234");
-    expect(screenWrapper.prop("screenData")).toEqual("foo");
+    expect(screenWrapper.props).toMatchObject({
+      screenId: "A1234",
+      screenData: "foo",
+    });
   });
 
   it("renders null if the screen is not found", () => {
     const wrapper = getWrapper(null, "screen_type_5", {});
 
-    expect(wrapper.getElement()).toBe(null);
+    expect(wrapper.queryAllByTestId("screen_type_5")).toBeEmpty();
   });
 
   it("injects the plugin configuration if it exists", () => {
     const wrapper = getWrapper("A1234", "plugin-with-config", {});
 
-    expect(wrapper.find(PluginWithConfig.module).props()).toHaveProperty(
+    const screenWrapper = wrapper.getByTestId("plugin_with_config");
+
+    expect(screenWrapper.props).toHaveProperty(
       "configuration",
       expect.objectContaining(pluginConfiguration)
     );
@@ -160,7 +183,9 @@ 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(
+    const screenWrapper = wrapper.getByTestId("screen_type_3");
+
+    expect(screenWrapper.props).toHaveProperty(
       "configuration",
       expect.objectContaining(pluginConfiguration)
     );
@@ -168,6 +193,6 @@ describe("<ScreenResolver />", () => {
 
   it("wraps the player with the playerController component when the screenType is playable", () => {
     const wrapper = getWrapper("A1234", "playable", {});
-    expect(shallowToJson(wrapper)).toMatchSnapshot();
+    expect(wrapper.getByTestId("player_plugin")).toBeDefined();
   });
 });

package/Components/Tabs/Tab.tsx

@@ -1,11 +1,11 @@
 /* eslint-disable react-native/no-unused-styles */
 import React from "react";
 import * as R from "ramda";
-import { View, Text, StyleSheet, TouchableWithoutFeedback } from "react-native";
+import { StyleSheet, Text, TouchableWithoutFeedback, View } from "react-native";
 import { useConfiguration } from "@applicaster/zapp-react-native-utils/reactHooks/configuration";
 import {
-  getStyleForPlatform,
   applyStringTransformation,
+  getStyleForPlatform,
 } from "@applicaster/zapp-react-native-utils/configurationUtils";
 
 type Props = {
@@ -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}
@@ -147,7 +148,9 @@ const Tab = ({ title, selected, handleOnPress }: Props, ref: any) => {
           <Text numberOfLines={1} style={styles.label}>
             {tabTitle}
           </Text>
-          {selected && <View testID="underline" style={styles.underline} />}
+          {selected ? (
+            <View testID="underline" style={styles.underline} />
+          ) : null}
         </View>
       </View>
     </TouchableWithoutFeedback>

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 } };
         }
@@ -174,11 +174,12 @@ function TextInputTV(props: Props, ref) {
 
   return isWebPlatform ? (
     <>
-      {additional && additional()}
-      <input ref={ref} {...inputProps} />
+      {additional ? additional() : null}
+      {/* eslint-disable-next-line react/no-unknown-property */}
+      <input testID="TextInput-tv" ref={ref} {...inputProps} />
     </>
   ) : (
-    <TextInput ref={ref} {...inputProps} />
+    <TextInput testID="TextInput-tv" ref={ref} {...inputProps} />
   );
 }
 

package/Components/TopMarginApplicator/TopMarginApplicator.tsx

@@ -2,6 +2,7 @@ import React from "react";
 import { View, ViewProps, ViewStyle } from "react-native";
 import { useTheme } from "@applicaster/zapp-react-native-utils/theme";
 import { useCurrentScreenData } from "@applicaster/zapp-react-native-utils/reactHooks";
+import { isFirstComponentScreenPicker } from "@applicaster/zapp-react-native-utils/componentsUtils";
 
 interface IProps {
   targetScreenId?: string;
@@ -31,11 +32,9 @@ export const useMarginTop = (targetScreenId: string): number => {
    * ScreenPicker is a component but should really be a screen.
    * We need to skip margin top for it as it's already applied to the target screen
    **/
-  const isScreenPicker =
-    screenData?.ui_components?.[0]?.component_type === "screen-picker-qb-tv";
 
   // ignore margin on screenPicker
-  if (isScreenPicker) {
+  if (isFirstComponentScreenPicker(screenData?.ui_components)) {
     return 0;
   }
 

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/TrackedView/index.tsx

@@ -12,6 +12,7 @@ type TrackedViewProps = {
   onPositionUpdated: (props: { rect?: Record<string, number> }) => void;
   testId?: string | undefined;
   groupId?: string;
+  clipThreshold?: number;
 };
 
 export const TrackedView = memo(function TrackedView(props: TrackedViewProps) {

package/Components/Transitioner/AnimationManager.js

@@ -2,21 +2,21 @@ import { Animated } from "react-native";
 
 import { NAV_ACTION_PUSH, NAV_ACTION_BACK } from "./Transitioner";
 
-type TransitionConfig = {
-  duration: number,
-  easing: any,
-  from: {
-    style: any,
-  },
-  to: {
-    style: any,
-  },
-};
+// type TransitionConfig = {
+//   duration: number;
+//   easing: any;
+//   from: {
+//     style: any;
+//   };
+//   to: {
+//     style: any;
+//   };
+// };
 
-type Props = {
-  transitionConfig: TransitionConfig,
-  contentStyle: { [string]: any },
-};
+// type Props = {
+//   transitionConfig: TransitionConfig;
+//   contentStyle: { [string]: any };
+// };
 
 /**
  * Manages animation for the Transitioner,
@@ -25,7 +25,7 @@ type Props = {
  * which must have a proper structure, see types above ^.
  */
 export class AnimationManager {
-  constructor(props: Props) {
+  constructor(props) {
     this.animatedValue = new Animated.Value(0.0);
 
     this.config = props.transitionConfig(