@applicaster/zapp-react-native-ui-components 13.0.0-alpha.2569962250 → 13.0.0-alpha.2685746452

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/OfflineHandler/utils/index.ts

@@ -57,7 +57,7 @@ export const useNotificationHeight = () => {
 
   const navBarHeight = platformSelect({ ios: 44, android: 56 });
 
-  const statusHeight = Platform.OS === "android" ? 0 : insets.top;
+  const statusHeight = insets.top;
   const notificationHeight = statusHeight + navBarHeight;
 
   return { statusHeight, notificationHeight };

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 = {
@@ -335,9 +335,9 @@ const PlayerContainerComponent = (props: Props) => {
 
     const resumeTime = Number(item?.extensions?.resumeTime);
 
-    // TODO: This is temp hack, will be removed on next pr with player refactoring
+    // Сhecking that the player itself knows where to start playing, and there is no need to call seekTo after returning from the Сhromecast
     if (
-      !!playerManager.getActivePlayer()?.getContinueWatchingOffset === false &&
+      !playerManager.getActivePlayer()?.hasResumePosition() &&
       !isNaN(resumeTime)
     ) {
       player?.seekTo(resumeTime);
@@ -514,6 +514,12 @@ const PlayerContainerComponent = (props: Props) => {
   useEffect(() => {
     playerEvent("source_changed", { item });
 
+    return () => {
+      playerEvent("player_did_close", { item });
+    };
+  }, [item?.id, Player]);
+
+  useEffect(() => {
     if (!isModal) {
       showNavBar(false);
     }
@@ -523,13 +529,11 @@ const PlayerContainerComponent = (props: Props) => {
     }
 
     return () => {
-      playerEvent("player_did_close", { item });
-
       if (!isModal) {
         showNavBar(true);
       }
     };
-  }, [showNavBar, /* added as suggested: */ item?.id, isModal, Player]);
+  }, [showNavBar, isModal, Player]);
 
   useEffect(() => {
     if (prevItemId && !R.equals(prevItemId, item?.id)) {
@@ -683,10 +687,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 +721,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

@@ -39,7 +39,7 @@ const PlayerImageBackgroundComponent = ({
   return (
     <View
       style={
-        playerAnimationState === PlayerAnimationStateEnum.maximaze
+        playerAnimationState === PlayerAnimationStateEnum.maximize
           ? defaultImageDimensions
           : style
       }

package/Components/River/ComponentsMap/ComponentsMap.tsx

@@ -34,6 +34,7 @@ type Props = {
   getStaticComponentFeed: any;
   pullToRefreshPipesV1RefreshingStateUpdater: () => boolean;
   refreshingPipesV1?: boolean;
+  stickyHeaderIndices?: number[];
 };
 
 const styles = StyleSheet.create({
@@ -61,6 +62,7 @@ function ComponentsMapComponent(props: Props) {
     // TODO: Remove when pipes v1 is deprecated.
     pullToRefreshPipesV1RefreshingStateUpdater,
     refreshingPipesV1,
+    stickyHeaderIndices,
   } = props;
 
   const flatListRef = React.useRef<FlatList | null>(null);
@@ -274,6 +276,7 @@ function ComponentsMapComponent(props: Props) {
             overScrollMode={Platform.OS === "android" ? "never" : "auto"}
             scrollIndicatorInsets={scrollIndicatorInsets}
             extraData={feed}
+            stickyHeaderIndices={stickyHeaderIndices}
             onLayout={handleOnLayout}
             removeClippedSubviews
             initialNumToRender={3}

package/Components/River/ComponentsMap/hooks/useLoadingState.ts

@@ -28,10 +28,10 @@ type Return = {
 // TODO: Take this value from Zapp configuration, when feature is added to GeneralScreen
 const SHOULD_FAIL_ON_COMPONENT_LOADING = false;
 
-const createLoadingStateObservable = () =>
+const createLoadingStateObservable = (count: number) =>
   new BehaviorSubject<LoadingState>({
     index: -1,
-    done: false,
+    done: count === 0,
     waitForAllComponents: SHOULD_FAIL_ON_COMPONENT_LOADING,
   });
 
@@ -43,7 +43,7 @@ export const useLoadingState = (
   const [loadingError, setLoadingError] = React.useState(null);
 
   const loadingState = useRefWithInitialValue<BehaviorSubject<LoadingState>>(
-    createLoadingStateObservable
+    () => createLoadingStateObservable(count)
   );
 
   const arePreviousComponentsLoaded = React.useCallback((index) => {

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

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
+    );
   });
 });