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

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/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

@@ -2,7 +2,7 @@ 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";
 
 type Props = ZappUIComponentProps & {
   rivers: ZappRivers;

package/Decorators/ZappPipesDataConnector/__tests__/zappPipesDataConnector.test.js

@@ -1,6 +1,6 @@
 import React from "react";
-import { shallow } from "enzyme";
-import { shallowToJson } from "enzyme-to-json";
+import { renderWithProviders } from "@applicaster/zapp-react-native-utils/testUtils";
+
 import * as zappPipesRedux from "@applicaster/zapp-react-native-redux/ZappPipes";
 import configureStore from "redux-mock-store";
 import thunk from "redux-thunk";
@@ -8,6 +8,7 @@ import thunk from "redux-thunk";
 import { zappPipesDataConnector } from "../index";
 
 import { Hero } from "./Hero";
+import { render } from "ejs";
 
 const mockStore = configureStore([thunk]);
 
@@ -20,6 +21,15 @@ const initialState = {
   },
 };
 
+jest.mock(
+  "@applicaster/zapp-react-native-utils/reactHooks/navigation/useIsScreenActive",
+  () => ({
+    useIsScreenActive: () => ({
+      isScreenActive: true,
+    }),
+  })
+);
+
 const store = mockStore(initialState);
 
 const zappPipesSpy = jest
@@ -31,6 +41,7 @@ const WrappedComponent = zappPipesDataConnector(Hero);
 const componentProp = (data) => ({ data });
 
 // tests need to be re-written due to TS refactor
+// this test has old usage of enzyme API, that's need to be replaced with @testing-library/react-native
 describe.skip("zappPipesDataConnector", () => {
   beforeEach(() => {
     zappPipesSpy.mockClear();
@@ -43,7 +54,7 @@ describe.skip("zappPipesDataConnector", () => {
     it("loads the provided feed url", () => {
       expect(zappPipesDataConnector).toBeFunction();
 
-      const wrapper = shallow(
+      const wrapper = renderWithProviders(
         <WrappedComponent
           component={componentProp(data)}
           feedUrl={feedUrl}
@@ -51,8 +62,7 @@ describe.skip("zappPipesDataConnector", () => {
         />
       ).dive();
 
-      expect(shallowToJson(wrapper)).toMatchSnapshot();
-      expect(wrapper.first().shallow()).toMatchSnapshot();
+      expect(wrapper.toJSON()).toMatchSnapshot();
 
       expect(zappPipesSpy).toHaveBeenCalledWith(feedUrl, {
         clearCache: false,
@@ -71,12 +81,11 @@ describe.skip("zappPipesDataConnector", () => {
     it("is a HoC", () => {
       expect(zappPipesDataConnector).toBeFunction();
 
-      const wrapper = shallow(
+      const wrapper = renderWithProviders(
         <WrappedComponent component={componentProp(data)} store={store} />
       ).dive();
 
-      expect(shallowToJson(wrapper)).toMatchSnapshot();
-      expect(wrapper.first().shallow()).toMatchSnapshot();
+      expect(wrapper.toJSON()).toMatchSnapshot();
 
       expect(zappPipesSpy).toHaveBeenCalledWith(data.source, {
         clearCache: false,
@@ -99,12 +108,11 @@ describe.skip("zappPipesDataConnector", () => {
     it("calls clearCache true and silentRefresh with false", () => {
       expect(zappPipesDataConnector).toBeFunction();
 
-      const wrapper = shallow(
+      const wrapper = renderWithProviders(
         <WrappedComponent component={{ data, rules }} store={store} />
       ).dive();
 
-      expect(shallowToJson(wrapper)).toMatchSnapshot();
-      expect(wrapper.first().shallow()).toMatchSnapshot();
+      expect(wrapper.toJSON()).toMatchSnapshot();
 
       expect(zappPipesSpy).toHaveBeenCalledWith(data.source, {
         clearCache: true,
@@ -123,12 +131,11 @@ describe.skip("zappPipesDataConnector", () => {
     it("is a HoC", () => {
       expect(zappPipesDataConnector).toBeFunction();
 
-      const wrapper = shallow(
+      const wrapper = renderWithProviders(
         <WrappedComponent component={componentProp(data)} store={store} />
       ).dive();
 
-      expect(shallowToJson(wrapper)).toMatchSnapshot();
-      expect(wrapper.first().shallow()).toMatchSnapshot();
+      expect(wrapper.toJSON()).toMatchSnapshot();
 
       expect(zappPipesSpy).toHaveBeenCalledWith(
         "applicaster://fetchData?type=APPLICASTER_COLLECTION&collectionId=1234",
@@ -146,11 +153,11 @@ describe.skip("zappPipesDataConnector", () => {
     it("is a HoC", () => {
       expect(zappPipesDataConnector).toBeFunction();
 
-      const wrapper = shallow(
+      const wrapper = renderWithProviders(
         <WrappedComponent component={componentProp(data)} store={store} />
       ).dive();
 
-      expect(shallowToJson(wrapper)).toMatchSnapshot();
+      expect(wrapper.toJSON()).toMatchSnapshot();
       expect(wrapper.first().shallow()).toMatchSnapshot();
 
       expect(zappPipesSpy).toHaveBeenCalledWith(
@@ -171,11 +178,11 @@ describe.skip("zappPipesDataConnector", () => {
     };
 
     it("calls loadPipesData with favourites option", () => {
-      const wrapper = shallow(
+      const wrapper = renderWithProviders(
         <WrappedComponent component={componentProp(data)} store={store} />
       ).dive();
 
-      expect(shallowToJson(wrapper)).toMatchSnapshot();
+      expect(wrapper.toJSON()).toMatchSnapshot();
       expect(wrapper.first().shallow()).toMatchSnapshot();
 
       expect(zappPipesSpy).toHaveBeenCalledWith("FAVOURITES", {
@@ -188,7 +195,7 @@ describe.skip("zappPipesDataConnector", () => {
 
   describe("getDataSourceUrl", () => {
     it("returns null if data prop is empty", () => {
-      const wrapper = shallow(
+      const wrapper = render(
         <WrappedComponent component={componentProp({})} store={store} />
       ).dive();
 
@@ -199,7 +206,7 @@ describe.skip("zappPipesDataConnector", () => {
     });
 
     it("returns null if data.source is falsy", () => {
-      const wrapper = shallow(
+      const wrapper = renderWithProviders(
         <WrappedComponent
           component={componentProp({ source: null })}
           store={store}
@@ -222,7 +229,7 @@ describe.skip("zappPipesDataConnector", () => {
     it("reloads the app's datasource", () => {
       store.clearActions();
 
-      const wrapper = shallow(
+      const wrapper = renderWithProviders(
         <WrappedComponent component={componentProp(data)} store={store} />
       ).dive();
 
@@ -251,7 +258,7 @@ describe.skip("zappPipesDataConnector", () => {
         entry: [{ id: "test-entry", title: "test entry" }],
       }));
 
-      const wrapper = shallow(
+      const wrapper = renderWithProviders(
         <WrappedComponent
           component={{ data, getStaticComponentFeed }}
           store={store}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applicaster/zapp-react-native-ui-components",
-  "version": "13.0.0-alpha.8532113155",
+  "version": "13.0.0-alpha.8541129242",
   "description": "Applicaster Zapp React Native ui components for the Quick Brick App",
   "main": "index.js",
   "types": "index.d.ts",
@@ -34,10 +34,10 @@
     "redux-mock-store": "^1.5.3"
   },
   "dependencies": {
-    "@applicaster/applicaster-types": "13.0.0-alpha.8532113155",
-    "@applicaster/zapp-react-native-bridge": "13.0.0-alpha.8532113155",
-    "@applicaster/zapp-react-native-redux": "13.0.0-alpha.8532113155",
-    "@applicaster/zapp-react-native-utils": "13.0.0-alpha.8532113155",
+    "@applicaster/applicaster-types": "13.0.0-alpha.8541129242",
+    "@applicaster/zapp-react-native-bridge": "13.0.0-alpha.8541129242",
+    "@applicaster/zapp-react-native-redux": "13.0.0-alpha.8541129242",
+    "@applicaster/zapp-react-native-utils": "13.0.0-alpha.8541129242",
     "promise": "^8.3.0",
     "react-router-native": "^5.1.2",
     "url": "^0.11.0",
@@ -48,8 +48,8 @@
     "@react-native-community/netinfo": "*",
     "@types/node": "*",
     "immer": "*",
-    "react": "17.0.2",
-    "react-native": "0.68.6",
+    "react": "*",
+    "react-native": "*",
     "react-native-safe-area-context": "*",
     "react-native-svg": "*",
     "uglify-js": "*",

package/Components/Cell/CellWithFocusable.ios.tsx

@@ -1,126 +0,0 @@
-/** TODO: Remove this file when tvos FocusableGroup
- * behaviour is aligned to the web one
- * FocusableGroup should only send onFocus and onBlur events when
- * Focus enters and leaves the Focusables inside the branch
- */
-import * as React from "react";
-
-import { focusManager } from "@applicaster/zapp-react-native-utils/appUtils/focusManager";
-import * as FOCUS_EVENTS from "@applicaster/zapp-react-native-utils/appUtils/focusManager/events";
-import { noop } from "@applicaster/zapp-react-native-utils/functionUtils";
-import { toBooleanWithDefaultFalse } from "@applicaster/zapp-react-native-utils/booleanUtils";
-
-import { isAppleTV } from "../../Helpers/Platform";
-import { useCellState } from "../MasterCell/utils";
-
-const useCellFocusedState = (
-  skipFocusManagerRegistration: boolean,
-  groupId: string,
-  id: string
-) => {
-  const [currentCellFocused, setCurrentCellFocused] = React.useState(false);
-
-  React.useEffect(() => {
-    const isGroupItemFocused = () => {
-      if (!skipFocusManagerRegistration) {
-        const isFocused = focusManager.isGroupItemFocused(groupId, id);
-        setCurrentCellFocused(isFocused);
-      }
-    };
-
-    const handler = () => {
-      // tvOS hack for properly checking focus
-      if (isAppleTV()) {
-        setTimeout(() => {
-          isGroupItemFocused();
-        }, 0);
-      } else {
-        isGroupItemFocused();
-      }
-    };
-
-    focusManager.on(FOCUS_EVENTS.FOCUS, handler);
-
-    return () => {
-      focusManager.removeHandler(FOCUS_EVENTS.FOCUS, handler);
-    };
-  }, [groupId, skipFocusManagerRegistration]);
-
-  return currentCellFocused;
-};
-
-type Props = {
-  item: ZappEntry;
-  CellRenderer: React.FunctionComponent<any>;
-  id: string;
-  groupId: string;
-  onFocus: Function;
-  index: number;
-  scrollTo: Function;
-  preferredFocus?: boolean;
-  skipFocusManagerRegistration?: boolean;
-  isFocusable?: boolean;
-  behavior: Behavior;
-  focused?: boolean;
-};
-
-export function CellWithFocusable(props: Props) {
-  const {
-    index,
-    item,
-    CellRenderer,
-    id,
-    groupId,
-    onFocus,
-    scrollTo = noop,
-    preferredFocus,
-    skipFocusManagerRegistration,
-    isFocusable,
-    behavior,
-    focused,
-  } = props;
-
-  const isFocused = useCellFocusedState(
-    skipFocusManagerRegistration,
-    groupId,
-    id
-  );
-
-  const state = useCellState({
-    id: item.id,
-    behavior,
-    focused: isFocused || toBooleanWithDefaultFalse(focused),
-  });
-
-  const [focusedButtonId, setFocusedButtonId] = React.useState(undefined);
-
-  // for horizontal scrolling
-  React.useEffect(() => {
-    if (focusedButtonId) {
-      scrollTo(index);
-    }
-  }, [focusedButtonId]);
-
-  const handleToggleFocus = (value) => {
-    setFocusedButtonId(value.focusedButtonId);
-
-    if (value.focusable) {
-      onFocus(value.focusable, value.mouse);
-    }
-  };
-
-  return (
-    <CellRenderer
-      item={item}
-      groupId={groupId}
-      onToggleFocus={handleToggleFocus}
-      state={state}
-      prefixId={id}
-      focusedButtonId={focusedButtonId}
-      preferredFocus={preferredFocus}
-      skipFocusManagerRegistration={skipFocusManagerRegistration}
-      isFocusable={isFocusable}
-      focused={focused}
-    />
-  );
-}

package/Components/CellRendererResolver/__tests__/__snapshots__/cellRendererResolver.test.js.snap

@@ -1,53 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`CellRendererResolver renders correctly 1`] = `
-<View
-  someProp={
-    {
-      "cellOptions": {},
-      "cellStyles": {
-        "ABCDE-123456": {
-          "configuration": {},
-          "plugin_identifier": "custom_renderer_plugin",
-        },
-        "FGHIJ-123456": {
-          "configuration": {},
-          "plugin_identifier": "unknown_plugin",
-        },
-      },
-      "component": {
-        "styles": {
-          "cell_plugin_configuration_id": "ABCDE-123456",
-        },
-      },
-      "styles": {},
-    }
-  }
-/>
-`;
-
-exports[`CellRendererResolver with a default renderer plugin renders correctly 1`] = `
-<View
-  someProp={
-    {
-      "cellOptions": {},
-      "cellStyles": {
-        "ABCDE-123456": {
-          "configuration": {},
-          "plugin_identifier": "custom_renderer_plugin",
-        },
-        "FGHIJ-123456": {
-          "configuration": {},
-          "plugin_identifier": "unknown_plugin",
-        },
-      },
-      "component": {
-        "styles": {
-          "cell_plugin_configuration_id": "ABCDE-123456",
-        },
-      },
-      "styles": {},
-    }
-  }
-/>
-`;

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

@@ -1,17 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`TestId renders correctly and assigns the testID to a wrapping view 1`] = `
-<View
-  accessibilityLabel="A1234"
-  style={
-    {
-      "flex": 1,
-    }
-  }
-  testID="A1234"
->
-  <TestComponent
-    name="dev test"
-  />
-</View>
-`;

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

@@ -1,17 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`<ScreenResolver /> renders correctly 1`] = `
-<mockConstructor
-  screenData={{}}
-  screenId="1234"
-  screenType="screen_type_1"
-/>
-`;
-
-exports[`<ScreenResolver /> wraps the player with the playerController component when the screenType is playable 1`] = `
-<HandlePlayable
-  isModal={false}
-  item={{}}
-  mode="FULLSCREEN"
-/>
-`;