@applicaster/zapp-react-native-ui-components 13.0.0-alpha.5771418585 → 13.0.0-alpha.5790181722

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

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;