@applicaster/zapp-react-native-ui-components 13.0.0-alpha.6523249552 → 13.0.0-alpha.6651373134

package/Components/ZappUIComponent/__tests__/{ZappUIComponent.test.js → ZappUIComponent.test.tsx}

@@ -1,7 +1,7 @@
 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 { ZappUIComponent } from "../index";
 
@@ -37,7 +37,13 @@ const ErrorComponent = (props) => <MockComponent name="error" {...props} />;
 const LoadingComponent = (props) => <MockComponent name="loading" {...props} />;
 
 function getProps(zappPipesData) {
-  return { onLoadFinished, zappPipesData };
+  return {
+    component: {
+      rules: {},
+    },
+    onLoadFinished,
+    zappPipesData,
+  };
 }
 
 function getWrapper({ error, loading, props }) {
@@ -47,21 +53,28 @@ function getWrapper({ error, loading, props }) {
     LoadingComponent: loading ? LoadingComponent : null,
   });
 
-  return shallow(<WrappedComponent {...props} />);
+  return renderWithProviders(
+    <View testID="outer-test-view">
+      <WrappedComponent testID="test-view" {...props} />
+    </View>
+  );
 }
 
 describe("ZappUIComponent", () => {
   describe("when zapp pipes data is loading", () => {
     const props = getProps(zappPipesData_loading);
 
-    it("renders null if no loading component is provided", () => {
+    it("renders placeholder component if no loading component is provided", () => {
       const wrapper = getWrapper({ props });
-      expect(shallowToJson(wrapper)).toMatchSnapshot();
+      const testView = wrapper.getByTestId("ZappUIComponent-placeholder");
+
+      expect(testView.props).toBeDefined();
     });
 
     it("renders correctly otherwise", () => {
       const wrapper = getWrapper({ props, loading: true });
-      expect(shallowToJson(wrapper)).toMatchSnapshot();
+      const testView = wrapper.getByTestId("test-view");
+      expect(testView.props.name).toBe("loading");
     });
   });
 
@@ -70,12 +83,14 @@ describe("ZappUIComponent", () => {
 
     it("renders null if no error component is provided", () => {
       const wrapper = getWrapper({ props });
-      expect(shallowToJson(wrapper)).toMatchSnapshot();
+
+      expect(wrapper.queryByTestId("test-view")).toBeNull();
     });
 
     it("renders correctly otherwise", () => {
       const wrapper = getWrapper({ props, error: true });
-      expect(shallowToJson(wrapper)).toMatchSnapshot();
+      const testView = wrapper.getByTestId("test-view");
+      expect(testView.props.name).toBe("error");
     });
   });
 
@@ -84,7 +99,8 @@ describe("ZappUIComponent", () => {
 
     it("renders correctly", () => {
       const wrapper = getWrapper({ props });
-      expect(shallowToJson(wrapper)).toMatchSnapshot();
+      const testView = wrapper.getByTestId("test-view");
+      expect(testView.props.name).toBe("success");
     });
   });
 });

package/Components/ZappUIComponent/index.tsx

@@ -1,8 +1,6 @@
 import * as React from "react";
 import * as R from "ramda";
 import { toBooleanWithDefaultFalse } from "@applicaster/zapp-react-native-utils/booleanUtils";
-import { ifEmptyUseFallback } from "@applicaster/zapp-react-native-utils/cellUtils";
-import { isAndroidTVPlatform } from "@applicaster/zapp-react-native-utils/reactUtils";
 import {
   UIComponentContext,
   useUIComponentContext,
@@ -10,7 +8,7 @@ import {
 
 import { Placeholder } from "./Placeholder";
 import { useInitialLoading } from "./hooks";
-import { useFocusable } from "../Focusable/index.android";
+import { useIsFocusable } from "@applicaster/zapp-react-native-utils/focusManager";
 
 type ReactComponent = React.ComponentType<any>;
 
@@ -127,7 +125,6 @@ New signature: {Component, ErrorComponent, LoadingComponent, options}`
       props;
 
     const parent = useUIComponentContext();
-    const { setIsFocusable } = useFocusable();
 
     const isLoading = toBooleanWithDefaultFalse(zappPipesData?.loading);
     const isInitialLoading = useInitialLoading(isLoading);
@@ -145,24 +142,14 @@ New signature: {Component, ErrorComponent, LoadingComponent, options}`
       [props, parent]
     );
 
+    useIsFocusable(componentProps);
+
     React.useEffect(() => {
       if (!skipOnLoadFinished && !isLoading) {
         onLoadFinished();
       }
     }, [isLoading]);
 
-    React.useEffect(() => {
-      const focusable = ifEmptyUseFallback(
-        props.component?.rules?.component_cells_focusable,
-        true
-      );
-
-      // Android TV only fix for focusable components - manually set focusable false
-      if (!focusable && isAndroidTVPlatform()) {
-        setIsFocusable(focusable);
-      }
-    }, [props.component?.rules?.component_cells_focusable]);
-
     if (isDataSourceEmpty(props) && allowsEmptyDataSource) {
       return RenderComponent(Component, componentProps);
     }

package/Components/default-cell-renderer/__tests__/defaultCellRenderer.test.tsx

@@ -1,10 +1,10 @@
 import * as React from "react";
 import { Platform } from "react-native";
-import { shallow } from "enzyme";
-import { shallowToJson } from "enzyme-to-json";
+import { renderWithProviders } from "@applicaster/zapp-react-native-utils/testUtils";
 
 jest.mock("@applicaster/zapp-react-native-utils/reactHooks/navigation", () => ({
   useRoute: jest.fn(() => ({ screenData: { id: "test" } })),
+  useIsScreenActive: jest.fn(() => true),
 }));
 
 jest.mock("@applicaster/zapp-react-native-utils/screenState", () => ({
@@ -26,8 +26,16 @@ const cell_styles = "style";
 const configuration = { component, styles, cell_styles } as const;
 
 describe("DefaultCellRenderer", () => {
+  beforeEach(() => {
+    Platform.OS = "ios"; // Reset to default
+  });
+
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+
   it("is a function", () => {
-    expect(DefaultCellRenderer).toBeFunction();
+    expect(typeof DefaultCellRenderer).toBe("function");
   });
 
   it("returns an error if component is missing in configuration", () => {
@@ -36,28 +44,23 @@ describe("DefaultCellRenderer", () => {
     );
   });
 
-  it("returns a react component and it renders correctly", () => {
+  it("renders correctly", () => {
     const CellRenderer = DefaultCellRenderer(configuration);
-    const wrapper = shallow(<CellRenderer store={null} />);
-
-    expect(shallowToJson(wrapper)).toMatchSnapshot();
+    const result = renderWithProviders(<CellRenderer store={null} />);
+    expect(result).toBeTruthy();
   });
 
-  it("returns a react component for LG TVs", () => {
+  it("renders correctly for LG TVs", () => {
     Platform.OS = "lg_tv";
-
     const CellRenderer = DefaultCellRenderer(configuration);
-    const wrapper = shallow(<CellRenderer store={null} />);
-
-    expect(shallowToJson(wrapper)).toMatchSnapshot();
+    const result = renderWithProviders(<CellRenderer store={null} />);
+    expect(result).toBeTruthy();
   });
 
-  it("returns a react component for Samsung TVs", () => {
+  it("renders correctly for Samsung TVs", () => {
     Platform.OS = "samsung_tv";
-
     const CellRenderer = DefaultCellRenderer(configuration);
-    const wrapper = shallow(<CellRenderer store={null} />);
-
-    expect(shallowToJson(wrapper)).toMatchSnapshot();
+    const result = renderWithProviders(<CellRenderer store={null} />);
+    expect(result).toBeTruthy();
   });
 });

package/Components/default-cell-renderer/viewTrees/tv/DefaultCell/__tests__/DefaultCell.test.tsx

@@ -1,8 +1,12 @@
 import * as React from "react";
-import { shallow } from "enzyme";
+import { renderWithProviders } from "@applicaster/zapp-react-native-utils/testUtils";
+import { DefaultCell } from "../";
+import { masterCellBuilder } from "@applicaster/zapp-react-native-ui-components/Components/MasterCell";
+import { View, Text, Image } from "react-native";
 
 jest.mock("@applicaster/zapp-react-native-utils/reactHooks/navigation", () => ({
   useRoute: jest.fn(() => ({ screenData: { id: "test" } })),
+  useIsScreenActive: jest.fn(() => true),
 }));
 
 jest.mock("@applicaster/zapp-react-native-utils/screenState", () => ({
@@ -12,12 +16,6 @@ jest.mock("@applicaster/zapp-react-native-utils/screenState", () => ({
   })),
 }));
 
-const {
-  masterCellBuilder,
-} = require("@applicaster/zapp-react-native-ui-components/Components/MasterCell");
-
-const { DefaultCell } = require("../");
-
 describe("DefaultCell", () => {
   it("is a function", () => {
     expect(DefaultCell).toBeFunction();
@@ -33,15 +31,21 @@ describe("DefaultCell", () => {
     } as const;
 
     const CellRenderer = masterCellBuilder({
+      components: {
+        View: View,
+        Text: Text,
+        Image: Image,
+      },
       containerStyle: {},
       cellConfiguration: DefaultCell(styles),
     });
 
-    const wrapper = shallow(<CellRenderer />);
+    const { UNSAFE_getAllByType } = renderWithProviders(<CellRenderer />);
+    const textElement = UNSAFE_getAllByType(Text)[0];
 
-    expect(wrapper.find("_Text").first().prop("style").color).toEqual(
-      "rgba(239,239,239,1.0)"
-    );
+    expect(textElement.props.style).toMatchObject({
+      color: "rgba(239,239,239,1.0)",
+    });
   });
 
   it.skip("matches snapshot", () => {

package/Contexts/ComponentsMapOffsetContext/index.tsx

@@ -0,0 +1,49 @@
+import { useTheme } from "@applicaster/zapp-react-native-utils/theme";
+import React, { PropsWithChildren, useMemo } from "react";
+
+export const ComponentsMapOffsetContext = React.createContext({
+  setComponentsMapOffset: (_offset: number) => void 0,
+  componentsMapOffset: 0,
+});
+
+export const ComponentsMapOffsetContextProvider = ({
+  children,
+}: PropsWithChildren<{}>) => {
+  const theme = useTheme<BaseThemePropertiesTV>();
+
+  const [componentsMapOffset, setComponentsMapOffset] = React.useState(
+    theme?.screen_margin_top
+  );
+
+  const contextValue = useMemo(
+    () => ({
+      componentsMapOffset,
+      setComponentsMapOffset,
+    }),
+    [componentsMapOffset]
+  );
+
+  return (
+    <ComponentsMapOffsetContext.Provider value={contextValue}>
+      {children}
+    </ComponentsMapOffsetContext.Provider>
+  );
+};
+
+export const withComponentsMapOffsetContext = (Component: any) =>
+  function ComponentsMapOffsetContextProviderWrapper(props: {}) {
+    return (
+      <ComponentsMapOffsetContextProvider>
+        <Component {...props} />
+      </ComponentsMapOffsetContextProvider>
+    );
+  };
+
+export const withComponentsMapOffsetContextConsumer = (Component: any) =>
+  function ComponentsMapOffsetContextConsumerWrapper(props: {}) {
+    const { componentsMapOffset } = React.useContext(
+      ComponentsMapOffsetContext
+    );
+
+    return <Component {...props} componentsMapOffset={componentsMapOffset} />;
+  };

package/Contexts/FocusableGroupContext/withFocusableContext.tsx

@@ -7,17 +7,11 @@ export const withFocusableContext = (Component) => {
     { groupId, ...props }: Record<string, any>,
     ref
   ) => {
-    return (
-      <FocusableGroupContext.Consumer>
-        {(groupIdContext: string) => {
-          // eslint-disable-next-line react/display-name
-          const propsGroupId = groupId || null;
-          const providedGroupId = propsGroupId || groupIdContext;
+    const groupIdContext = React.useContext(FocusableGroupContext);
+    const propsGroupId = groupId || null;
+    const providedGroupId = propsGroupId || groupIdContext;
 
-          return <Component {...props} groupId={providedGroupId} ref={ref} />;
-        }}
-      </FocusableGroupContext.Consumer>
-    );
+    return <Component {...props} groupId={providedGroupId} ref={ref} />;
   };
 
   return React.forwardRef(WithFocusableContext);

package/Contexts/HeaderOffsetContext/index.tsx

@@ -13,7 +13,7 @@ type ProviderProps = {
   };
 };
 
-const initialHeaderOffsetContext = () => ({
+const initialHeaderOffsetContext: HeaderOffsetContextType = () => ({
   headerOffset: 0,
   headersAbove: null,
 });
@@ -24,11 +24,9 @@ export const HeaderOffsetContext = React.createContext<HeaderOffsetContextType>(
 
 export function withConsumer(Component) {
   return function WithConsumer(props) {
-    return (
-      <HeaderOffsetContext.Consumer>
-        {(context) => <Component getHeaderOffset={context} {...props} />}
-      </HeaderOffsetContext.Consumer>
-    );
+    const getHeaderOffset = React.useContext(HeaderOffsetContext);
+
+    return <Component getHeaderOffset={getHeaderOffset} {...props} />;
   };
 }
 

package/Contexts/ScreenContext/index.tsx

@@ -176,15 +176,8 @@ export function ScreenContextProvider({
 
 export function withScreenContext(Component: React.ComponentType<any>) {
   return function WithScreenContextWrapper(props) {
-    return (
-      <ScreenContext.Consumer>
-        {useCallback(
-          (value) => (
-            <Component {...props} screenContext={value} />
-          ),
-          [Component, props]
-        )}
-      </ScreenContext.Consumer>
-    );
+    const screenContext = React.useContext(ScreenContext);
+
+    return <Component {...props} screenContext={screenContext} />;
   };
 }

package/Contexts/ScreenLayoutContext/index.tsx

@@ -8,10 +8,11 @@ type LayoutContext = {
   componentAnchorPointY: number | null;
   componentAvailableWidth: number | null;
   setScreenLayout?: (properties: {}) => void;
+  resetScreenLayout?: () => void;
   extraAnchorPointYOffset: number;
 };
 
-const screenLayoutContext: LayoutContext = {
+const initialScreenLayoutContext: LayoutContext = {
   screenMarginTop: null,
   screenMarginBottom: null,
   screenHeight: null,
@@ -21,8 +22,9 @@ const screenLayoutContext: LayoutContext = {
   extraAnchorPointYOffset: 0,
 };
 
-export const ScreenLayoutContext =
-  React.createContext<LayoutContext>(screenLayoutContext);
+export const ScreenLayoutContext = React.createContext<LayoutContext>(
+  initialScreenLayoutContext
+);
 
 export function ScreenLayoutContextConsumer(Component) {
   return function WithConsumer(props) {

package/Decorators/Navigator/__tests__/navigator.test.js

@@ -1,4 +1,7 @@
-jest.mock("react-router-native", () => require("./react-router-native-mock"));
+import React from "react";
+import { View } from "react-native";
+import { renderWithProviders } from "@applicaster/zapp-react-native-utils/testUtils";
+import { withNavigator } from "..";
 
 const navigatorMock = {
   push: jest.fn(),
@@ -12,27 +15,24 @@ const navigatorMock = {
 
 const mocked_context = navigatorMock;
 
-jest.mock("react", () => {
-  return {
-    ...jest.requireActual("react"),
-    useContext: jest.fn(() => mocked_context),
-  };
-});
-
-import { View } from "react-native";
-import { shallow } from "enzyme";
-
-const React = require("react");
-const { withNavigator } = require("../index");
+jest.mock(
+  "@applicaster/zapp-react-native-utils/reactHooks/navigation/useNavigation",
+  () => {
+    return {
+      useNavigation: jest.fn(() => mocked_context),
+    };
+  }
+);
 
 describe("withNavigator Decorator", () => {
   it("renders correctly", () => {
     const Component = () => <View />;
     const WrappedComponent = withNavigator(Component);
 
-    const wrapper = shallow(<WrappedComponent someProp="foo" />);
+    const wrapper = renderWithProviders(<WrappedComponent someProp="foo" />);
 
-    expect(wrapper).toMatchSnapshot();
-    expect(wrapper.prop("navigator")).toEqual(navigatorMock);
+    expect(wrapper.UNSAFE_getByType(Component).props.navigator).toEqual(
+      navigatorMock
+    );
   });
 });

package/Decorators/Navigator/index.tsx

@@ -1,6 +1,6 @@
 import * as React from "react";
 
-import { useNavigation } from "@applicaster/zapp-react-native-utils/reactHooks/navigation";
+import { useNavigation } from "@applicaster/zapp-react-native-utils/reactHooks/navigation/useNavigation";
 import { deprecationWarningWithIdentifier } from "@applicaster/zapp-react-native-utils/appUtils";
 
 export function withNavigator(Component) {

package/Decorators/RiverResolver/__tests__/riverResolver.test.tsx

@@ -1,8 +1,8 @@
 import React from "react";
-import { shallow } from "enzyme";
 import { View } from "react-native";
-import { shallowToJson } from "enzyme-to-json";
-import * as usePathnameHooks from "@applicaster/zapp-react-native-utils/reactHooks/navigation/usePathname";
+import { renderWithProviders } from "@applicaster/zapp-react-native-utils/testUtils";
+
+import { withRiver } from "../";
 
 const rivers = {
   A123: {
@@ -20,37 +20,31 @@ jest.doMock(
   })
 );
 
-jest.mock(
-  "@applicaster/zapp-react-native-utils/reactHooks/layout/useLayoutVersion",
+jest.doMock(
+  "@applicaster/zapp-react-native-utils/reactHooks/navigation/usePathname",
   () => ({
-    useLayoutVersion: jest.fn(() => true),
+    usePathname: jest.fn(() => "/home"),
   })
 );
 
-jest.spyOn(usePathnameHooks, "usePathname").mockReturnValue("/home");
-
-// mocks useNavigator to return currentRoute: "/home"
-jest.mock("@applicaster/zapp-react-native-utils/reactHooks", () => ({
-  useNavigation: jest.fn(() => ({ currentRoute: "/home" })),
-  useRoute: jest.fn(() => ({ pathname: "/home" })),
-}));
-
-const { withRiver } = require("../index");
-
-const TestComponent = jest.fn(() => <View />);
+const TestComponent = jest.fn((props) => <View {...props} />);
 
 describe("withRiver HoC", () => {
   const WrappedComponent = withRiver(TestComponent);
 
-  const wrapper = shallow(
-    <WrappedComponent screenId="A123" rivers={rivers} otherProp="otherProp" />
+  const wrapper = renderWithProviders(
+    <WrappedComponent
+      testID="test-view"
+      screenId="A123"
+      otherProp="otherProp"
+    />,
+    { rivers: rivers }
   );
 
-  it("renders correctly", () => {
-    expect(shallowToJson(wrapper)).toMatchSnapshot();
-  });
-
   it("populates the river prop", () => {
-    expect(wrapper.find(TestComponent).prop("river")).toEqual(rivers.A123);
+    const targetView = wrapper.getByTestId("test-view");
+
+    expect(targetView.props.river).toEqual(rivers.A123);
+    expect(targetView.props.screenData).toEqual(rivers.A123);
   });
 });

package/Decorators/RiverResolver/index.tsx

@@ -1,8 +1,8 @@
 import * as React from "react";
 
-import { usePickFromState } from "@applicaster/zapp-react-native-redux/hooks";
 import { isTV } from "@applicaster/zapp-react-native-utils/reactUtils";
-import { usePathname } from "@applicaster/zapp-react-native-utils/reactHooks/navigation";
+import { usePathname } from "@applicaster/zapp-react-native-utils/reactHooks/navigation/usePathname";
+import { useRivers } from "@applicaster/zapp-react-native-utils/reactHooks";
 
 type Props = ZappUIComponentProps & {
   rivers: ZappRivers;
@@ -12,27 +12,25 @@ type Props = ZappUIComponentProps & {
 
 export function withRiver(Component: ZappComponent): ZappComponent {
   const RiverWithData = ({ screenId, ...otherProps }: Props) => {
-    const { rivers } = usePickFromState(["rivers"]);
+    const river = useRivers()?.[screenId];
     const pathname = usePathname();
-    const river = rivers[screenId];
 
     if (!river) {
       return null;
     }
 
-    if (!otherProps.screenData) {
-      otherProps.screenData = river;
-    }
-
     return (
       <Component
         screenId={screenId}
         river={river}
         key={isTV() ? pathname : undefined}
         {...otherProps}
+        screenData={otherProps.screenData || river}
       />
     );
   };
 
+  RiverWithData.displayName = `RiverWithData(${Component.displayName || Component.name})`;
+
   return RiverWithData;
 }