@applicaster/zapp-react-native-ui-components 13.0.0-alpha.7330390362 → 13.0.0-alpha.7620873141

package/Components/River/__tests__/river.test.js

@@ -1,13 +1,50 @@
 import React from "react";
-import { shallow } from "enzyme";
-import { shallowToJson } from "enzyme-to-json";
+import { render, screen } from "@testing-library/react-native";
 import configureStore from "redux-mock-store";
+import { renderWithProviders } from "@applicaster/zapp-react-native-utils/testUtils";
+import { Provider } from "react-redux";
 
-import { GeneralContentScreen } from "../../GeneralContentScreen";
-import { FeedLoader } from "../../FeedLoader";
-import { River } from "../index";
-import { RiverComponent } from "../River";
+import { River } from "../";
 import { ScreenResolver } from "../../ScreenResolver";
+import { RiverComponent } from "../River";
+
+jest.mock(
+  "@applicaster/zapp-react-native-utils/reactHooks/navigation/useIsScreenActive",
+  () => ({
+    useIsScreenActive: jest.fn(() => true),
+  })
+);
+
+jest.mock(
+  "@applicaster/zapp-react-native-ui-components/Components/GeneralContentScreen",
+  () => {
+    const { View } = jest.requireActual("react-native");
+
+    return {
+      GeneralContentScreen: (props) => (
+        <View testID="general-content-screen" {...props} />
+      ),
+    };
+  }
+);
+
+jest.mock(
+  "@applicaster/zapp-react-native-utils/analyticsUtils/helpers/hooks",
+  () => ({
+    useScreenAnalytics: jest.fn(),
+  })
+);
+
+jest.mock(
+  "@applicaster/zapp-react-native-utils/reactHooks/navigation/useNavigation",
+  () => ({
+    useNavigation: jest.fn(() => ({
+      videoModalState: {
+        mode: "test",
+      },
+    })),
+  })
+);
 
 const river = {
   home: true,
@@ -55,24 +92,24 @@ const appData = { layoutVersion: "v1" };
 const store = configureStore()({ rivers, appData });
 
 describe("When River has a general_content type", () => {
-  const wrapper = shallow(<RiverComponent {...riverProps} />);
-
-  describe("<RiverComponent />", () => {
-    it("renders correctly", () => {
-      expect(shallowToJson(wrapper)).toMatchSnapshot();
-    });
-
-    it("it returns a GeneralContentScreen", () => {
-      expect(wrapper.find(GeneralContentScreen).length).toBe(1);
-    });
+  it("renders GeneralContentScreen correctly", () => {
+    const { getByTestId } = render(
+      <Provider store={store}>
+        <RiverComponent {...riverProps} />
+      </Provider>
+    );
+
+    expect(getByTestId("general-content-screen")).toBeTruthy();
   });
 
-  describe("<River />", () => {
-    const wrapper = shallow(<River screenId="A1234" store={store} />);
+  it("renders River component correctly", () => {
+    const wrapper = render(
+      <Provider store={store}>
+        <River screenId="A1234" />
+      </Provider>
+    );
 
-    it("renders correctly", () => {
-      expect(shallowToJson(wrapper)).toMatchSnapshot();
-    });
+    expect(wrapper.toJSON()).toMatchSnapshot();
   });
 });
 
@@ -83,16 +120,10 @@ describe("When River has any other type other than general_content", () => {
     appData,
   };
 
-  const wrapper = shallow(<RiverComponent {...riverPropsWithScreenPlugin} />);
-
-  describe("<RiverComponent />", () => {
-    it("renders correctly", () => {
-      expect(shallowToJson(wrapper)).toMatchSnapshot();
-    });
+  it("renders ScreenResolver correctly", () => {
+    renderWithProviders(<RiverComponent {...riverPropsWithScreenPlugin} />);
 
-    it("it returns a ScreenResolver", () => {
-      expect(wrapper.find(ScreenResolver).length).toBe(1);
-    });
+    expect(screen.UNSAFE_getByType(ScreenResolver)).toBeDefined();
   });
 });
 
@@ -104,15 +135,19 @@ describe("When River has feed url", () => {
     appData: { layoutVersion: "v1" },
   };
 
-  const wrapper = shallow(<RiverComponent {...riverPropsWithFeedUrl} />);
-
-  describe("<RiverComponent />", () => {
-    it("renders correctly", () => {
-      expect(shallowToJson(wrapper)).toMatchSnapshot();
-    });
-
-    it("it returns a FeedLoader if it's a v1 layout", () => {
-      expect(wrapper.find(FeedLoader).length).toBe(1);
-    });
+  it("renders FeedLoader when layout is v1", () => {
+    const wrapper = renderWithProviders(
+      <RiverComponent {...riverPropsWithFeedUrl} />,
+      {
+        zappPipes: {
+          "https://some-feed-url.net": {
+            loading: false,
+            data: { entry: [] },
+          },
+        },
+      }
+    );
+
+    expect(wrapper.getByTestId("general-content-screen")).toBeDefined();
   });
 });

package/Components/RouteManager/__tests__/__snapshots__/routeManager.test.js.snap

@@ -1,10 +1,16 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`<RouteManager /> renders correctly 1`] = `
-<TestId
-  screenId="A1234"
+<View
+  accessibilityLabel="A1234"
+  style={
+    {
+      "flex": 1,
+    }
+  }
+  testID="A1234"
 >
-  <WithProvider
+  <View
     pathname="/river/A1234"
     screenData={
       {
@@ -13,6 +19,7 @@ exports[`<RouteManager /> renders correctly 1`] = `
     }
     screenId="A1234"
     screenType="river"
+    testID="screen-resolver"
   />
-</TestId>
+</View>
 `;

package/Components/RouteManager/__tests__/routeManager.test.js

@@ -1,31 +1,46 @@
 import React from "react";
-import { shallow } from "enzyme";
-import { shallowToJson } from "enzyme-to-json";
+import { render } from "@testing-library/react-native";
 
-const pathname = "/river/A1234";
-const screenData = { id: "A1234" };
+import { RouteManager } from "../";
+
+const mockPathname = "/river/A1234";
+const mockScreenData = { id: "A1234" };
 
 jest.mock("@applicaster/zapp-react-native-utils/reactHooks/navigation", () => ({
-  useRoute: jest.fn(() => ({ pathname: pathname, screenData: screenData })),
+  useRoute: jest.fn(() => ({
+    pathname: mockPathname,
+    screenData: mockScreenData,
+  })),
 }));
 
-const {
-  ScreenResolver,
-} = require("@applicaster/zapp-react-native-ui-components/Components/ScreenResolver");
+jest.mock(
+  "@applicaster/zapp-react-native-ui-components/Components/ScreenResolver",
+  () => {
+    const { View } = jest.requireActual("react-native");
 
-const { RouteManager } = require("../index");
+    return {
+      ScreenResolver: (props) => <View testID="screen-resolver" {...props} />,
+    };
+  }
+);
 
 describe("<RouteManager />", () => {
-  const wrapper = shallow(
-    <RouteManager pathname={pathname} screenData={screenData} />
-  );
+  let wrapper;
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+
+    wrapper = render(
+      <RouteManager pathname={mockPathname} screenData={mockScreenData} />
+    );
+  });
 
   it("renders correctly", () => {
-    expect(shallowToJson(wrapper)).toMatchSnapshot();
+    expect(wrapper.toJSON()).toMatchSnapshot();
   });
 
   it("passes the correct props to ScreenResolver", () => {
-    expect(wrapper.find(ScreenResolver).props()).toEqual({
+    expect(wrapper.getByTestId("screen-resolver").props).toMatchObject({
       pathname: "/river/A1234",
       screenType: "river",
       screenId: "A1234",

package/Components/RouteManager/__tests__/testId.test.js

@@ -2,8 +2,8 @@
 /* eslint-disable react/prop-types */
 import React from "react";
 import { View, Text } from "react-native";
-import { shallow } from "enzyme";
-import { shallowToJson } from "enzyme-to-json";
+
+import { render } from "@testing-library/react-native";
 
 import { TestId } from "../TestId";
 
@@ -17,14 +17,16 @@ const screenId = "A1234";
 
 describe("TestId", () => {
   it("renders correctly and assigns the testID to a wrapping view", () => {
-    const wrapper = shallow(
+    const wrapper = render(
       <TestId screenId={screenId}>
         <TestComponent name="dev test" />
       </TestId>
     );
 
-    expect(shallowToJson(wrapper)).toMatchSnapshot();
-    expect(wrapper.find(View).prop("testID")).toEqual(screenId);
-    expect(wrapper.find(View).prop("accessibilityLabel")).toEqual(screenId);
+    expect(wrapper.getByTestId(screenId)).toBeTruthy();
+
+    expect(wrapper.getByTestId(screenId).props.accessibilityLabel).toEqual(
+      screenId
+    );
   });
 });

package/Components/Screen/TV/index.web.tsx

@@ -92,6 +92,10 @@ const getNavigations = ({
   return fallbackNavigations;
 };
 
+const onRelease = () => {
+  focusManager.setInitialFocus();
+};
+
 export const Screen = ({ route, Components }: Props) => {
   if (isNilOrEmpty(route)) {
     throw Error("Required props: route is missing");
@@ -152,12 +156,7 @@ export const Screen = ({ route, Components }: Props) => {
   const isScreenActive = useIsScreenActive();
 
   return (
-    <FreezeWithCallback
-      freeze={!isScreenActive}
-      onRelease={() => {
-        focusManager.setInitialFocus();
-      }}
-    >
+    <FreezeWithCallback freeze={!isScreenActive} onRelease={onRelease}>
       <View style={[styles.container, { backgroundColor }]}>
         <NavBarContainer isVisible={isNavBarVisible} onReady={noop}>
           <NavBar

package/Components/Screen/hooks.ts

@@ -7,15 +7,12 @@ import {
   useCurrentScreenData,
   useDimensions,
   useRoute,
+  useIsTablet,
 } from "@applicaster/zapp-react-native-utils/reactHooks";
 import { useMemo, useEffect, useState } from "react";
 
 export const useWaitForValidOrientation = () => {
-  const {
-    width: screenWidth,
-    height,
-    deviceInfo,
-  } = useDimensions("screen", {
+  const { width: screenWidth, height } = useDimensions("screen", {
     fullDimensions: true,
     updateForInactiveScreens: false,
   });
@@ -26,7 +23,7 @@ export const useWaitForValidOrientation = () => {
 
   const [readyState, setReadyState] = useState(false);
 
-  const isTablet = deviceInfo?.isTablet;
+  const isTablet = useIsTablet();
 
   const { appData } = usePickFromState(["appData"]);
   const isTabletPortrait = appData?.isTabletPortrait;

package/Components/Screen/index.tsx

@@ -6,16 +6,16 @@ import { usePickFromState } from "@applicaster/zapp-react-native-redux/hooks";
 import { useTheme } from "@applicaster/zapp-react-native-utils/theme";
 import { getComponentModule } from "@applicaster/zapp-react-native-utils/pluginUtils";
 import {
-  shouldNavBarDisplayMenu,
   getNavBarProps,
   getScreenId,
+  shouldNavBarDisplayMenu,
 } from "@applicaster/zapp-react-native-utils/navigationUtils";
 import {
-  useRoute,
   useCurrentScreenData,
   useNavbarState,
-  useScreenData,
   useNavigation,
+  useRoute,
+  useScreenData,
 } from "@applicaster/zapp-react-native-utils/reactHooks";
 import { getNavigationPluginModule } from "@applicaster/zapp-react-native-app/App/Layout/layoutHelpers";
 
@@ -98,7 +98,7 @@ export function Screen(_props: Props) {
     <View style={style}>
       {isReady ? (
         <>
-          {navBarProps && <NavBar {...navBarProps} hasMenu={hasMenu} />}
+          {navBarProps ? <NavBar {...navBarProps} hasMenu={hasMenu} /> : null}
 
           <OfflineFallbackScreen>
             {/* @TODO RouteManager doesn't use props, can they be removed ?  */}

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

@@ -1,161 +1,180 @@
 import React from "react";
 import { View } from "react-native";
-import { shallow } from "enzyme";
-import { shallowToJson } from "enzyme-to-json";
+import { renderWithProviders } from "@applicaster/zapp-react-native-utils/testUtils";
+
 const pluginConfiguration = { foo: "bar" };
 
-const ScreenType1 = jest.fn(() => <View />);
-const ScreenType2 = jest.fn(() => <View />);
-const PlayerController = 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 mockScreenType3 = {
-  module: jest.fn(() => <View />),
+  module: MockModuleView("screen_type_3"),
   name: "ScreenType3",
   type: "screen_type_3",
   configuration: pluginConfiguration,
 };
 
 const mockScreenType4 = {
-  module: jest.fn(() => <View />),
+  module: MockModuleView("screen_type_4"),
   name: "ScreenType4",
   type: "screen_type_4",
 };
 
 const mockPlayerPlugin = {
-  module: jest.fn(() => <View />),
+  module: MockModuleView("player_plugin"),
   name: "playerPlugin",
   type: "player",
 };
 
 const mockScreenPlugin = {
-  module: jest.fn(() => <View />),
+  module: MockModuleView("screen_plugin"),
   type: "general",
   name: "Screen plugin",
   identifier: "screen-plugin",
 };
 
 const mockPluginWithConfig = {
-  module: jest.fn(() => <View />),
+  module: MockModuleView("plugin_with_config"),
   type: "general",
   name: "Plugin with config",
   identifier: "plugin-with-config",
   configuration: pluginConfiguration,
 };
 
-const components = { ScreenType1, ScreenType2, PlayerController };
-
-const mockWithAnalytics = {
-  sendOnClickEvent: jest.fn(),
-  sendMenuClickEvent: jest.fn(),
-  sendMenuToggleEvent: jest.fn(),
-  sendBackButtonClickEvent: jest.fn(),
-  sendOnNavItemClickEvent: jest.fn(),
-  sendHeaderClickEvent: jest.fn(),
-  sendHardwareBackButtonClickEvent: jest.fn(),
-  sendScreenEvent: jest.fn(),
+const mockComponents = { ScreenType1, ScreenType2, PlayerController };
+
+const mockState = {
+  components: mockComponents,
+  plugins: [
+    mockScreenType3,
+    mockScreenType4,
+    mockPlayerPlugin,
+    mockScreenPlugin,
+    mockPluginWithConfig,
+  ],
+  rivers: {
+    A1234: {},
+  },
 };
 
-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(mockWithAnalytics),
-}));
+jest.mock(
+  "@applicaster/zapp-react-native-utils/analyticsUtils/helpers/hooks",
+  () => ({
+    useScreenAnalytics: jest.fn(),
+  })
+);
 
-jest.mock("@applicaster/zapp-react-native-redux/hooks", () => ({
-  usePickFromState: mockUsePickFromState,
-}));
+jest.mock(
+  "@applicaster/zapp-react-native-utils/reactHooks/navigation/useNavigation",
+  () => ({
+    useNavigation: jest.fn(() => ({
+      closeVideoModal: jest.fn(),
+      videoModalState: {
+        mode: "test",
+      },
+    })),
+  })
+);
 
-const mockUseScreenAnalytics = jest.fn();
+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: mockUseScreenAnalytics,
+    useIsScreenActive: () => ({
+      isScreenActive: true,
+    }),
   })
 );
 
-jest.mock("react-redux", () => ({
-  ...jest.requireActual("react-redux"),
-  useDispatch: jest.fn(() => () => {}),
-}));
+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(mockScreenType3.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(mockScreenPlugin.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(mockScreenType3.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(mockPluginWithConfig.module).props()).toHaveProperty(
+    const screenWrapper = wrapper.getByTestId("plugin_with_config");
+
+    expect(screenWrapper.props).toHaveProperty(
       "configuration",
       expect.objectContaining(pluginConfiguration)
     );
@@ -164,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(mockScreenType3.module).props()).toHaveProperty(
+    const screenWrapper = wrapper.getByTestId("screen_type_3");
+
+    expect(screenWrapper.props).toHaveProperty(
       "configuration",
       expect.objectContaining(pluginConfiguration)
     );
@@ -172,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 = {
@@ -148,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/index.tsx

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