@applicaster/zapp-react-native-ui-components 13.0.0-alpha.8532113155 → 13.0.0-alpha.8541129242

package/Components/MasterCell/__tests__/masterCell.test.js

@@ -1,16 +1,25 @@
 import * as 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";
 
 import { testCellStyle } from "./TestCellStyle";
 import { singleView } from "./SingleView";
 import { entry } from "./testEntry";
 import { singleElement } from "./testElements";
 
-jest.mock("@applicaster/zapp-react-native-utils/reactHooks/navigation", () => ({
-  useRoute: jest.fn(() => ({ screenData: { id: "test" } })),
-}));
+jest.mock(
+  "@applicaster/zapp-react-native-utils/reactHooks/navigation/useRoute",
+  () => ({
+    useRoute: jest.fn(() => ({ screenData: { id: "test" } })),
+  })
+);
+
+jest.mock(
+  "@applicaster/zapp-react-native-utils/reactHooks/navigation/useIsScreenActive",
+  () => ({
+    useIsScreenActive: jest.fn(() => true),
+  })
+);
 
 jest.mock("@applicaster/zapp-react-native-utils/screenState", () => ({
   useScreenState: jest.fn(() => ({
@@ -27,36 +36,27 @@ describe("masterCellBuilder", () => {
   describe("when using default options", () => {
     const MasterCell = masterCellBuilder({ cellConfiguration: testCellStyle });
 
-    it("returns a function", () => {
-      expect(MasterCell).toMatchSnapshot();
-    });
-
     it("renders correctly", () => {
-      const wrapper = shallow(
-        <View>
+      const wrapper = renderWithProviders(
+        <View testID="master-cell">
           <MasterCell item={entry} />
         </View>
       );
 
-      expect(shallowToJson(wrapper)).toMatchSnapshot();
-    });
-
-    it("can be invoked as a React Component", () => {
-      const wrapper = shallow(<MasterCell item={entry} state={null} />);
-
-      expect(shallowToJson(wrapper)).toMatchSnapshot();
+      expect(wrapper.getByTestId("master-cell").children[0]).toBeDefined();
     });
   });
 
-  describe("when using custom containerStyle", () => {
+  describe.skip("when using custom containerStyle", () => {
     const MasterCell = masterCellBuilder({
       cellConfiguration: singleView,
       containerStyle: { backgroundColor: "black" },
     });
 
     it("renders correctly", () => {
-      const renderer = shallow(<MasterCell item={entry} />);
-      expect(shallowToJson(renderer)).toMatchSnapshot();
+      renderWithProviders(<MasterCell item={entry} />);
+
+      // TODO define the test need
     });
   });
 
@@ -69,14 +69,14 @@ describe("masterCellBuilder", () => {
     });
 
     it("renders correctly", () => {
-      const renderer = shallow(<MasterCell item={entry} />);
-      expect(shallowToJson(renderer)).toMatchSnapshot();
+      renderWithProviders(<MasterCell item={entry} />);
+      // TODO define the test need
 
       expect(dataAdapter).toHaveBeenCalledWith(singleView);
     });
   });
 
-  describe("when using custom default components", () => {
+  describe.skip("when using custom default components", () => {
     // the collapsable prop is added here to easily check from the snapshot that the mock
     // component is being used instead of the default one
     const CustomView = jest.fn((props) => <View {...props} collapsable />);
@@ -88,8 +88,8 @@ describe("masterCellBuilder", () => {
     });
 
     it("renders correctly", () => {
-      const renderer = shallow(<MasterCell item={entry} />);
-      expect(shallowToJson(renderer)).toMatchSnapshot();
+      renderWithProviders(<MasterCell item={entry} />);
+      // TODO define the test need
     });
   });
 });

package/Components/ModalComponent/Button/index.tsx

@@ -3,8 +3,8 @@ import { StyleSheet, TouchableOpacity, View } from "react-native";
 import { Item, ItemProps } from "./Item";
 import { ItemIcon, ItemIconProps } from "./ItemIcon";
 import { ItemLabel, ItemLabelProps } from "./ItemLabel";
-import { defaultSelectedAsset } from "./assets";
 import * as assets from "./assets";
+import { defaultSelectedAsset } from "./assets";
 
 type ButtonProps = {
   configuration: any;
@@ -92,18 +92,18 @@ export function Button({
       >
         <Item {...itemProps} focused={focused} selected={selected}>
           <View style={styles.label_icon_container}>
-            {itemIconProps.asset && itemIconProps.asset.length > 0 && (
+            {itemIconProps.asset && itemIconProps.asset.length > 0 ? (
               <ItemIcon {...itemIconProps} />
-            )}
-            {itemLabelProps.label && (
+            ) : null}
+            {itemLabelProps.label ? (
               <ItemLabel
                 {...itemLabelProps}
                 focused={focused}
                 selected={selected}
               />
-            )}
+            ) : null}
           </View>
-          {selected && <ItemIcon {...selectedItemIconProps} />}
+          {selected ? <ItemIcon {...selectedItemIconProps} /> : null}
         </Item>
       </TouchableOpacity>
     </View>

package/Components/OfflineHandler/NotificationView/NotificationView.lg.tsx

@@ -90,7 +90,7 @@ export const NotificationView = (props: Props) => {
   return (
     <div onClick={onClose}>
       {children}
-      {open && (
+      {open ? (
         <div style={styles.body}>
           <div style={styles.title}>
             <h2>{MSG}</h2>
@@ -98,7 +98,7 @@ export const NotificationView = (props: Props) => {
 
           <h4 style={styles.subtitle}>{EXTRA_MSG}</h4>
         </div>
-      )}
+      ) : null}
     </div>
   );
 };

package/Components/OfflineHandler/NotificationView/NotificationView.samsung.tsx

@@ -85,7 +85,7 @@ export const NotificationView = (props: Props) => {
   return (
     <div onClick={onClose}>
       {children}
-      {shown && (
+      {shown ? (
         <div style={styles.body}>
           <div style={styles.title}>
             <h2>{title}</h2>
@@ -93,7 +93,7 @@ export const NotificationView = (props: Props) => {
 
           <h4 style={styles.subtitle}>{subtitle}</h4>
         </div>
-      )}
+      ) : null}
     </div>
   );
 };

package/Components/OfflineHandler/NotificationView/__tests__/index.test.tsx

@@ -1,7 +1,6 @@
 import React from "react";
 import { Text, Animated } from "react-native";
 
-import { shallow } from "enzyme";
 import renderer from "react-test-renderer";
 
 jest.useFakeTimers();
@@ -40,10 +39,6 @@ const {
 } = require("../NotificationView");
 
 describe("NotificationView", () => {
-  it("renders", () => {
-    shallow(<NotificationView dismiss={dismiss} />);
-  });
-
   it("Show online message when Online", () => {
     const component = renderer.create(
       <NotificationView online dismiss={dismiss} />

package/Components/PlayerContainer/PlayerContainer.tsx

@@ -1,17 +1,17 @@
 import * as React from "react";
+import { useEffect, useReducer } from "react";
 // @ts-ignore
-import { View, ViewStyle, TVMenuControl } from "react-native";
+import { TVMenuControl, View, ViewStyle } from "react-native";
 import * as R from "ramda";
 import uuid from "uuid/v4";
 import { playerManager } from "@applicaster/zapp-react-native-utils/appUtils/playerManager";
 import {
   isApplePlatform,
-  platformSelect,
   isTV,
+  platformSelect,
 } from "@applicaster/zapp-react-native-utils/reactUtils";
 
 import { TVEventHandlerComponent } from "@applicaster/zapp-react-native-tvos-ui-components/Components/TVEventHandlerComponent";
-import { useEffect, useReducer } from "react";
 import { usePrevious } from "@applicaster/zapp-react-native-utils/reactHooks/utils";
 import { usePickFromState } from "@applicaster/zapp-react-native-redux/hooks";
 import {
@@ -29,10 +29,10 @@ import {
 import { ProgramInfo } from "./ProgramInfo";
 import { AudioPlayer } from "../AudioPlayer";
 import {
-  playerContainerLogger,
   log_debug,
   log_info,
   log_warning,
+  playerContainerLogger,
 } from "./logger";
 import { usePlayer } from "@applicaster/zapp-react-native-utils/appUtils/playerManager/usePlayer";
 import { useSetNavbarState } from "@applicaster/zapp-react-native-utils/reactHooks/screen/useScreenContext";
@@ -53,8 +53,8 @@ import { usePlayNextOverlay } from "@applicaster/zapp-react-native-utils/appUtil
 import { PlayNextState } from "@applicaster/zapp-react-native-utils/appUtils/playerManager/OverlayObserver/OverlaysObserver";
 
 import {
-  useModalAnimationContext,
   PlayerAnimationStateEnum,
+  useModalAnimationContext,
 } from "@applicaster/zapp-react-native-ui-components/Components/VideoModal/ModalAnimation";
 
 type Props = {
@@ -683,10 +683,10 @@ const PlayerContainerComponent = (props: Props) => {
 
                     {renderRestPlayers(restPlayerProps)}
 
-                    {state.error && <ErrorDisplay error={state.error} />}
+                    {state.error ? <ErrorDisplay error={state.error} /> : null}
                   </View>
                   {/* Components container */}
-                  {isInlineTV && context.showComponentsContainer && (
+                  {isInlineTV && context.showComponentsContainer ? (
                     <View
                       style={styles.inlineRiver}
                       testID={"inline-river-component-wrapper"}
@@ -717,7 +717,7 @@ const PlayerContainerComponent = (props: Props) => {
                         )}
                       </ComponentFocusableWrapperView>
                     </View>
-                  )}
+                  ) : null}
                 </View>
               </FocusableGroup>
             </TVEventHandlerComponent>

package/Components/PlayerContainer/ProgramInfo/index.tsx

@@ -114,12 +114,12 @@ function ProgramInfoComponent({
   return (
     <View style={container}>
       <View style={programStyles.programInfo.container}>
-        {logo && (
+        {logo ? (
           <Image
             source={{ uri: logo }}
             style={programStyles.programInfo.logo}
           />
-        )}
+        ) : null}
         {!isAudioContent && transportInfo}
       </View>
     </View>

package/Components/PlayerImageBackground/index.tsx

@@ -1,4 +1,4 @@
-import React, { PropsWithChildren } from "react";
+import React, { PropsWithChildren, useEffect, useState } from "react";
 import { ImageBackground, View } from "react-native";
 
 import { imageSrcFromMediaItem } from "@applicaster/zapp-react-native-utils/configurationUtils";
@@ -12,6 +12,7 @@ import {
 type Props = PropsWithChildren<{
   entry: ZappEntry;
   style?: { [K: string]: any };
+  docked?: boolean;
   imageStyle?: { [K: string]: any };
   imageKey?: string;
   defaultImageDimensions?: { [K: string]: any };
@@ -23,6 +24,7 @@ const PlayerImageBackgroundComponent = ({
   entry,
   children,
   style,
+  docked,
   imageStyle,
   imageKey,
   defaultImageDimensions,
@@ -34,8 +36,22 @@ const PlayerImageBackgroundComponent = ({
 
   const { playerAnimationState } = useModalAnimationContext();
 
+  const [lastNonNullAnimationState, setLastNonNullAnimationState] =
+    useState(playerAnimationState);
+
+  useEffect(() => {
+    if (playerAnimationState !== null) {
+      setLastNonNullAnimationState(playerAnimationState);
+    }
+  }, [playerAnimationState]);
+
   if (!source) return <>{children}</>;
 
+  const imageBackgroundStyle =
+    lastNonNullAnimationState !== PlayerAnimationStateEnum.minimize && !docked
+      ? defaultImageDimensions
+      : imageSize;
+
   return (
     <View
       style={
@@ -45,13 +61,17 @@ const PlayerImageBackgroundComponent = ({
       }
     >
       <AnimationComponent
-        style={style}
+        style={
+          playerAnimationState === PlayerAnimationStateEnum.maximaze
+            ? defaultImageDimensions
+            : style
+        }
         animationType={ComponentAnimationType.player}
         additionalData={defaultImageDimensions}
       >
         <ImageBackground
           resizeMode="cover"
-          style={imageSize}
+          style={imageBackgroundStyle}
           imageStyle={imageStyle}
           source={source}
         >

package/Components/River/ComponentsMap/ComponentsMap.tsx

@@ -279,7 +279,6 @@ function ComponentsMapComponent(props: Props) {
             initialNumToRender={3}
             maxToRenderPerBatch={10}
             windowSize={12}
-            listKey={riverId}
             keyExtractor={keyExtractor}
             renderItem={renderRiverItem}
             data={riverComponents}

package/Components/River/TV/index.tsx

@@ -1,4 +1,9 @@
+import { compose } from "ramda";
 import { River as RiverComponent } from "./River";
 import { withTvEventHandler } from "./withTVEventHandler";
+import { withComponentsMapOffsetContext } from "../../../Contexts/ComponentsMapOffsetContext";
 
-export const River = withTvEventHandler(RiverComponent);
+export const River = compose(
+  withTvEventHandler,
+  withComponentsMapOffsetContext
+)(RiverComponent);

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

@@ -1,89 +1,27 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`When River has a general_content type <River /> renders correctly 1`] = `
-<ContextProvider
-  value={null}
->
-  <RiverWithData
-    appData={
-      {
-        "layoutVersion": "v1",
-      }
-    }
-    dispatch={[Function]}
-    rivers={
-      {
-        "A1234": {
-          "home": true,
-          "id": "A1234",
-          "name": "foo",
-          "type": "general_content",
-          "ui_components": [
-            {
-              "component_type": "hero",
-            },
-            {
-              "component_type": "grid",
-            },
-          ],
-        },
-        "B4567": {
-          "id": "B4567",
-        },
-        "C0987": {
-          "home": false,
-          "id": "C0987",
-          "name": "Some-Screen-Plugin",
-          "type": "some-screen-plugin",
-          "ui_components": [],
-        },
-      }
-    }
-    screenId="A1234"
-    store={
-      {
-        "clearActions": [Function],
-        "dispatch": [Function],
-        "getActions": [Function],
-        "getState": [Function],
-        "replaceReducer": [Function],
-        "subscribe": [Function],
-      }
-    }
-  />
-</ContextProvider>
-`;
-
-exports[`When River has a general_content type <RiverComponent /> renders correctly 1`] = `
-<GeneralContentScreen
-  groupId="ZF-C4"
-  screenId="A1234"
-/>
-`;
-
-exports[`When River has any other type other than general_content <RiverComponent /> renders correctly 1`] = `
-<WithProvider
-  screenData={
+exports[`When River has a general_content type renders River component correctly 1`] = `
+<View
+  onLayout={[Function]}
+  style={
     {
-      "groupId": undefined,
-      "home": false,
-      "id": "C0987",
-      "name": "Some-Screen-Plugin",
-      "type": "some-screen-plugin",
-      "ui_components": [],
+      "flex": 1,
     }
   }
-  screenId="C0987"
-  screenType="some-screen-plugin"
-/>
-`;
-
-exports[`When River has feed url <RiverComponent /> renders correctly 1`] = `
-<Connect(FeedLoaderComponent)
-  feedUrl="https://some-feed-url.net"
-  refreshCallback={[Function]}
-  refreshing={false}
+  testID="on-layout-view"
 >
-  <Component />
-</Connect(FeedLoaderComponent)>
+  <View
+    style={
+      {
+        "display": "none",
+        "flex": 1,
+      }
+    }
+  >
+    <View
+      screenId="A1234"
+      testID="general-content-screen"
+    />
+  </View>
+</View>
 `;

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>
 `;