@applicaster/zapp-react-native-ui-components 14.0.0-alpha.8419134002 → 14.0.0-alpha.8557119261

package/Components/GeneralContentScreen/utils/__tests__/useCurationAPI.test.js

@@ -8,13 +8,10 @@ import {
   useCurationAPI,
 } from "../useCurationAPI";
 import * as redux from "react-redux";
-import * as layoutPresets from "@applicaster/zapp-react-native-redux/hooks/useLayoutPresets";
-import * as pipesFeeds from "@applicaster/zapp-react-native-redux/hooks/useZappPipesFeeds";
 import { NavigationContext } from "@applicaster/zapp-react-native-ui-components/Contexts/NavigationContext";
 import { PathnameContext } from "@applicaster/zapp-react-native-ui-components/Contexts/PathnameContext";
 
-import { Provider } from "react-redux";
-import configureStore from "redux-mock-store";
+import { WrappedWithProviders } from "@applicaster/zapp-react-native-utils/testUtils";
 
 jest.mock(
   "@applicaster/zapp-react-native-utils/reactHooks/navigation/useRoute",
@@ -42,19 +39,20 @@ const mainStackNavigator = {
   },
 };
 
-const store = configureStore()({});
-
-const wrapper = ({ children }) => (
-  <Provider store={store}>
-    <NavigationContext.Provider
-      value={{ ...mainStackNavigator, currentRoute: homeStack.route }}
-    >
-      <PathnameContext.Provider value={homeStack.route}>
-        {children}
-      </PathnameContext.Provider>
-    </NavigationContext.Provider>
-  </Provider>
-);
+const getWrapper =
+  (store) =>
+  // eslint-disable-next-line react/display-name, react/prop-types
+  ({ children }) => (
+    <WrappedWithProviders store={store}>
+      <NavigationContext.Provider
+        value={{ ...mainStackNavigator, currentRoute: homeStack.route }}
+      >
+        <PathnameContext.Provider value={homeStack.route}>
+          {children}
+        </PathnameContext.Provider>
+      </NavigationContext.Provider>
+    </WrappedWithProviders>
+  );
 
 describe("getTransformedPreset should return the passed components if smartComponents is empty", () => {
   describe("getTransformedPreset function", () => {
@@ -312,19 +310,10 @@ describe("getTransformedPreset should return the passed components if smartCompo
         { id: "02", component_type: "not_smart_another" },
       ];
 
-      // mock the hooks
-      const mockUseZappPipesFeeds = jest.spyOn(pipesFeeds, "useZappPipesFeeds");
-      mockUseZappPipesFeeds.mockReturnValue({});
-
-      const mockUseLayoutPresets = jest.spyOn(
-        layoutPresets,
-        "useLayoutPresets"
-      );
-
-      mockUseLayoutPresets.mockReturnValue({});
-
       const { result } = renderHook(() => useCurationAPI(mockComponents), {
-        wrapper,
+        wrapper: getWrapper({
+          zappPipes: {},
+        }),
       });
 
       // if there are no smart components, it should return the original array
@@ -366,18 +355,15 @@ describe("getTransformedPreset should return the passed components if smartCompo
         "http://curation": { loading: false, data: { entry: mockPresetEntry } },
       };
 
-      const mockUseZappPipesFeeds = jest.spyOn(pipesFeeds, "useZappPipesFeeds");
-      mockUseZappPipesFeeds.mockReturnValue(mockFeeds);
-
-      const mockUseLayoutPresets = jest.spyOn(
-        layoutPresets,
-        "useLayoutPresets"
-      );
-
-      mockUseLayoutPresets.mockReturnValue(mockLayoutPresets);
-
       const { result } = renderHook(() => useCurationAPI(mockComponents), {
-        wrapper,
+        wrapper: getWrapper({
+          zappPipes: mockFeeds,
+          presetsMapping: {
+            presets_mappings: {
+              ...mockLayoutPresets,
+            },
+          },
+        }),
       });
 
       expect(result.current).toEqual(mockTransformedComponents);
@@ -437,19 +423,15 @@ describe("getTransformedPreset should return the passed components if smartCompo
         },
       };
 
-      // mock the hooks
-      const mockUseZappPipesFeeds = jest.spyOn(pipesFeeds, "useZappPipesFeeds");
-      mockUseZappPipesFeeds.mockReturnValue(mockFeeds);
-
-      const mockUseLayoutPresets = jest.spyOn(
-        layoutPresets,
-        "useLayoutPresets"
-      );
-
-      mockUseLayoutPresets.mockReturnValue(mockLayoutPresets);
-
       const { result } = renderHook(() => useCurationAPI(mockComponents), {
-        wrapper,
+        wrapper: getWrapper({
+          zappPipes: mockFeeds,
+          presetsMapping: {
+            presets_mappings: {
+              ...mockLayoutPresets,
+            },
+          },
+        }),
       });
 
       expect(result.current).toEqual(mockTransformedComponents);
@@ -495,14 +477,15 @@ describe("getTransformedPreset should return the passed components if smartCompo
       "http://curation": { loading: false, data: { entry: mockPresetEntry } },
     };
 
-    // mock the hooks
-    const mockUseZappPipesFeeds = jest.spyOn(pipesFeeds, "useZappPipesFeeds");
-    mockUseZappPipesFeeds.mockReturnValue(mockFeeds);
-    const mockUseLayoutPresets = jest.spyOn(layoutPresets, "useLayoutPresets");
-    mockUseLayoutPresets.mockReturnValue(mockLayoutPresets);
-
     const { result } = renderHook(() => useCurationAPI(mockComponents), {
-      wrapper,
+      wrapper: getWrapper({
+        zappPipes: mockFeeds,
+        presetsMapping: {
+          presets_mappings: {
+            ...mockLayoutPresets,
+          },
+        },
+      }),
     });
 
     expect(result.current).toEqual(mockTransformedComponents);

package/Components/GeneralContentScreen/utils/useCurationAPI.ts

@@ -1,17 +1,16 @@
 import { all, equals, path, prop, isEmpty, pluck, values } from "ramda";
 
 import { useEffect, useMemo } from "react";
-import { useDispatch } from "react-redux";
 
 import {
   useLayoutPresets,
-  useZappPipesFeeds,
-} from "@applicaster/zapp-react-native-redux/hooks";
-import { loadPipesData } from "@applicaster/zapp-react-native-redux/ZappPipes";
+  useZappPipesFeed,
+} from "@applicaster/zapp-react-native-redux";
 import { isEmptyOrNil } from "@applicaster/zapp-react-native-utils/cellUtils";
 import { Categories } from "./logger";
 import { createLogger } from "@applicaster/zapp-react-native-utils/logger";
 import { useRoute } from "@applicaster/zapp-react-native-utils/reactHooks/navigation/useRoute";
+
 import {
   ZappPipesEntryContext,
   ZappPipesScreenContext,
@@ -24,9 +23,13 @@ import {
 } from "@applicaster/zapp-react-native-utils/reactHooks/feed/useInflatedUrl";
 
 import { produce } from "immer";
+import { useLoadPipesDataDispatch } from "@applicaster/zapp-react-native-utils/reactHooks";
 // types reference
 
-declare type CurationEntry = { preset_name: string; feed_url: string };
+declare interface CurationEntry {
+  preset_name: string;
+  feed_url: string;
+}
 
 type Feeds = Record<string, ZappPipesData>;
 
@@ -122,8 +125,6 @@ export const getFinalComponents = (
 export const useCurationAPI = (
   components: Array<ZappUIComponent>
 ): ZappUIComponent[] => {
-  const dispatch = useDispatch();
-
   const smartComponents = useMemo(
     () => components?.filter?.(isSmartComponent) ?? [],
     [components]
@@ -159,19 +160,21 @@ export const useCurationAPI = (
 
   const urls = useMemo<string[]>(() => Object.values(urlsMap), [urlsMap]);
 
+  const loadPipesDataDispatcher = useLoadPipesDataDispatch();
+
   useEffect(() => {
     urls.forEach((url, index) => {
       if (url) {
-        dispatch(loadPipesData(url, { clearCache: false }));
+        loadPipesDataDispatcher(url, { clearCache: false });
       } else {
         logger.log_error("Curation url is empty", {
           componentId: smartComponents?.[index]?.id,
         });
       }
     });
-  }, [urls]);
+  }, [urls, loadPipesDataDispatcher]);
 
-  const feeds = useZappPipesFeeds(urls);
+  const feeds = useZappPipesFeed(urls);
   const layoutPresets = useLayoutPresets();
 
   const enrichedComponents = useMemo(() => {

package/Components/HandlePlayable/HandlePlayable.tsx

@@ -7,12 +7,15 @@ import {
 import { usePickFromState } from "@applicaster/zapp-react-native-redux/hooks";
 import {
   useDimensions,
+  useIsTablet as isTablet,
   useNavigation,
 } from "@applicaster/zapp-react-native-utils/reactHooks";
 
 import { BufferAnimation } from "../PlayerContainer/BufferAnimation";
 import { PlayerContainer } from "../PlayerContainer";
 import { useModalSize } from "../VideoModal/hooks";
+import { ViewStyle } from "react-native";
+import { platformSelect } from "@applicaster/zapp-react-native-utils/reactUtils";
 
 type Props = {
   item: ZappEntry;
@@ -83,6 +86,13 @@ type PlayableComponent = {
   Component: React.ComponentType<any>;
 };
 
+const dimensionsContext: "window" | "screen" = platformSelect({
+  android_tv: "window",
+  amazon: "window",
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  default: isTablet() ? "window" : "screen", // on tablet, window represents correct values, on phone it's not as the screen could be rotated
+});
+
 export function HandlePlayable({
   item,
   isModal,
@@ -135,19 +145,25 @@ export function HandlePlayable({
     });
   }, [casting]);
 
-  const { width: screenWidth, height: screenHeight } = useDimensions("window");
+  const { width: screenWidth, height: screenHeight } =
+    useDimensions(dimensionsContext);
 
   const modalSize = useModalSize();
 
   const style = React.useMemo(
-    () => ({
-      width: isModal ? modalSize.width : mode === "PIP" ? "100%" : screenWidth,
-      height: isModal
-        ? modalSize.height
-        : mode === "PIP"
-          ? "100%"
-          : screenHeight,
-    }),
+    () =>
+      ({
+        width: isModal
+          ? modalSize.width
+          : mode === "PIP"
+            ? "100%"
+            : screenWidth,
+        height: isModal
+          ? modalSize.height
+          : mode === "PIP"
+            ? "100%"
+            : screenHeight,
+      }) as ViewStyle,
     [screenWidth, screenHeight, modalSize, isModal, mode]
   );
 

package/Components/Layout/TV/LayoutBackground.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { usePickFromState } from "@applicaster/zapp-react-native-redux/hooks/usePickFromState";
+import { usePickFromState } from "@applicaster/zapp-react-native-redux/hooks";
 import { getBackgroundImageUrl } from "../utils";
 import { useTheme } from "@applicaster/zapp-react-native-utils/theme";
 

package/Components/Layout/TV/__tests__/index.test.tsx

@@ -7,7 +7,6 @@ import { NavigationContext } from "@applicaster/zapp-react-native-ui-components/
 import configureStore from "redux-mock-store";
 import Layout from "../index.web";
 
-// mock useTheme to provide app_background_color
 jest.mock("@applicaster/zapp-react-native-utils/theme", () => ({
   useTheme: () => ({
     app_background_color: "#000000",

package/Components/MasterCell/DefaultComponents/ActionButton.tsx

@@ -23,6 +23,7 @@ type Props = {
   style: ViewStyle;
   testID?: string;
   accessibilityLabel?: string;
+  accessibilityHint?: string;
   cellUUID?: string;
   extraProps?: Record<string, any>;
 };
@@ -98,6 +99,7 @@ export function ActionButton(props: Props) {
       onPress={onPress}
       testID={props?.testID || `${item?.id}`}
       accessibilityLabel={props?.accessibilityLabel || `${item?.id}`}
+      accessibilityHint={props?.accessibilityHint}
       accessible={!!(props?.testID || props?.accessibilityLabel)}
       style={props?.style}
     >

package/Components/MasterCell/DefaultComponents/Button.tsx

@@ -4,7 +4,7 @@ import * as R from "ramda";
 import { TouchableOpacity } from "react-native";
 // import { SvgUri } from "react-native-svg";
 
-import { connectToStore } from "@applicaster/zapp-react-native-redux";
+import { connectToStore } from "@applicaster/zapp-react-native-redux/utils/connectToStore";
 import { useActions } from "@applicaster/zapp-react-native-utils/reactHooks/actions";
 
 import Image from "./Image";

package/Components/MasterCell/DefaultComponents/FocusableView/index.tsx

@@ -2,7 +2,6 @@ import React, { useMemo } from "react";
 import { ImageStyle } from "react-native";
 import { Focusable } from "@applicaster/zapp-react-native-ui-components/Components/Focusable";
 import { useActions } from "@applicaster/zapp-react-native-utils/reactHooks/actions";
-import * as R from "ramda";
 import { getXray } from "@applicaster/zapp-react-native-utils/logger";
 import { toBooleanWithDefaultFalse } from "@applicaster/zapp-react-native-utils/booleanUtils";
 import { useAccessibilityManager } from "@applicaster/zapp-react-native-utils/appUtils/accessibilityManager/hooks";
@@ -67,32 +66,10 @@ export function FocusableView({ style, children, item, ...otherProps }: Props) {
   const handleFocus = (focusable) => {
     const focusedButtonId = getFocusedButtonId(focusable);
 
-    wrapperRef?.current?.measure((x, y, width, height, pageX, pageY) => {
-      const top = pageY;
-      const bottom = top + height;
-      const left = pageX;
-      const right = left + width;
-
-      const boundingRect = {
-        x,
-        y,
-        pageX,
-        pageY,
-        width,
-        height,
-        top,
-        bottom,
-        left,
-        right,
-      };
-
-      otherProps?.onToggleFocus?.({
-        focusable: {
-          getRect: R.always(boundingRect),
-        },
-        focusedButtonId,
-        mouse: focusable.mouse,
-      });
+    otherProps?.onToggleFocus?.({
+      focusable: wrapperRef.current,
+      focusedButtonId,
+      mouse: focusable.mouse,
     });
 
     if (ttsLabel) {

package/Components/MasterCell/DefaultComponents/Image/hoc/withDimensions.tsx

@@ -20,7 +20,7 @@ const withAppliedDimensions = (style: Style) => (source: Source) => ({
 });
 
 export const withDimensionsHOC = (Component) => {
-  return function WithDimensions(props: { style: any }) {
+  return function WithDimensions(props: Record<string, unknown>) {
     const theme = useTheme<BaseThemePropertiesMobile>();
 
     const useDownScalingImages = toBooleanWithDefaultFalse(

package/Components/MasterCell/DefaultComponents/ImageContainer/index.tsx

@@ -13,7 +13,7 @@ export const ImageContainer = (props: Props) => {
   const isActive = useIsScreenActive();
 
   const Component =
-    isVideoPreviewEnabled(props) && isActive ? LiveImage : PureImage;
+    isVideoPreviewEnabled(props as Props) && isActive ? LiveImage : PureImage;
 
   return <Component {...props} />;
 };

package/Components/MasterCell/DefaultComponents/__tests__/image.test.js

@@ -1,5 +1,5 @@
 import React from "react";
-import TestRenderer from "react-test-renderer";
+import { render } from "@testing-library/react-native";
 import { Image } from "react-native";
 
 jest.mock("@applicaster/zapp-react-native-utils/theme", () => ({
@@ -10,35 +10,35 @@ const CustomImage = require("../Image").default;
 
 describe("image with no source", () => {
   it("Uses provided placeholder image string", () => {
-    const testRenderer = TestRenderer.create(
+    const { UNSAFE_getByType } = render(
       <CustomImage placeholderImage={"foo"} />
     );
 
-    const testInstance = testRenderer.root;
+    const imageComponent = UNSAFE_getByType(Image);
 
-    expect(testInstance.findByType(Image).props.source).toEqual({
+    expect(imageComponent.props.source).toEqual({
       uri: "foo",
     });
   });
 
   it("Uses provided placeholder image object", () => {
-    const testRenderer = TestRenderer.create(
+    const { UNSAFE_getByType } = render(
       <CustomImage placeholderImage={"foo"} />
     );
 
-    const testInstance = testRenderer.root;
+    const imageComponent = UNSAFE_getByType(Image);
 
-    expect(testInstance.findByType(Image).props.source).toEqual({
+    expect(imageComponent.props.source).toEqual({
       uri: "foo",
     });
   });
 
   it("Returns empty string if no image or placeholder defined", () => {
-    const testRenderer = TestRenderer.create(
+    const { UNSAFE_getByType } = render(
       <CustomImage placeholderImage={null} />
     );
 
-    const testInstance = testRenderer.root;
-    expect(testInstance.findByType(Image).props.source).toBeUndefined();
+    const imageComponent = UNSAFE_getByType(Image);
+    expect(imageComponent.props.source).toBeUndefined();
   });
 });

package/Components/MasterCell/DefaultComponents/__tests__/text.test.tsx

@@ -1,8 +1,6 @@
 import React from "react";
 import RN from "react-native";
-import { Provider } from "react-redux";
-import TestRenderer from "react-test-renderer";
-import configureStoreFn from "redux-mock-store";
+import { renderWithProviders } from "@applicaster/zapp-react-native-utils/testUtils";
 
 const mockUseIsRTL = jest.fn(() => true);
 const mockGetIsRTL = jest.fn(() => true);
@@ -17,7 +15,6 @@ jest.mock("@applicaster/zapp-react-native-utils/localizationUtils", () => ({
 }));
 
 const CustomText = require("../Text").default;
-const mockStore = configureStoreFn();
 
 const defaultProps = {
   entry: {},
@@ -25,16 +22,15 @@ const defaultProps = {
   transformText: "default",
 };
 
-const getRenderedText = (label: string, store: any) => {
+const getRenderedText = (label: string, storeConfig: any) => {
   const props = { ...{ ...defaultProps, label } };
 
-  const testRenderer = TestRenderer.create(
-    <Provider store={store}>
-      <CustomText {...props} />
-    </Provider>
+  const { UNSAFE_getByType } = renderWithProviders(
+    <CustomText {...props} />,
+    storeConfig
   );
 
-  return testRenderer.root.findByType(RN.Text).props.children;
+  return UNSAFE_getByType(RN.Text).props.children;
 };
 
 describe("RTL app: Hebrew text contains english word", () => {
@@ -42,28 +38,32 @@ describe("RTL app: Hebrew text contains english word", () => {
   const textWithNotFirstEnglishWord = "השיר של נועה נועה קירל באירוויזיון Word";
   const textWithoutEnglishWord = "השיר של נועה נועה קירל באירוויזיון";
 
-  const store = mockStore({
+  const storeConfig = {
     remoteConfigurations: { localizations: { he: {} } },
     appData: {
       languageCode: "he",
       countryCode: "IL",
     },
-  });
+  };
 
   it("Hebrew text contains first english word", () => {
-    const renderedText = getRenderedText(textWithFirstEnglishWord, store);
+    const renderedText = getRenderedText(textWithFirstEnglishWord, storeConfig);
     const desiredText = "\u200fWord\u202c השיר של נועה נועה קירל באירוויזיון";
 
     expect(renderedText).toEqual(desiredText);
   });
 
   it("Hebrew text contains not first english word", () => {
-    const renderedText = getRenderedText(textWithNotFirstEnglishWord, store);
+    const renderedText = getRenderedText(
+      textWithNotFirstEnglishWord,
+      storeConfig
+    );
+
     expect(renderedText).toEqual(textWithNotFirstEnglishWord);
   });
 
   it("Hebrew text doesn't contain english word", () => {
-    const renderedText = getRenderedText(textWithoutEnglishWord, store);
+    const renderedText = getRenderedText(textWithoutEnglishWord, storeConfig);
     expect(renderedText).toEqual(textWithoutEnglishWord);
   });
 });
@@ -77,16 +77,16 @@ describe("LTR app: English text", () => {
 
   const englishText = "Test sentence";
 
-  const store = mockStore({
+  const storeConfig = {
     remoteConfigurations: { localizations: { en: {} } },
     appData: {
       languageCode: "en",
       countryCode: "US",
     },
-  });
+  };
 
   it("English text", () => {
-    const renderedText = getRenderedText(englishText, store);
+    const renderedText = getRenderedText(englishText, storeConfig);
     expect(renderedText).toEqual(englishText);
   });
 });

package/Components/MasterCell/SharedUI/CollapsibleTextContainer/__tests__/index.test.tsx

@@ -1,12 +1,12 @@
 import * as React from "react";
 import { View } from "react-native";
-import ReactTestRenderer from "react-test-renderer";
+import { render } from "@testing-library/react-native";
 
 import { CollapsibleTextContainer } from "../CollapsibleTextContainer";
 
 describe("CollapsibleTextContainer", () => {
   it("render container+children when label is presented", () => {
-    const renderer = ReactTestRenderer.create(
+    const { toJSON } = render(
       <CollapsibleTextContainer
         backgroundColor="#000000"
         label={"label"}
@@ -16,36 +16,36 @@ describe("CollapsibleTextContainer", () => {
       </CollapsibleTextContainer>
     );
 
-    const result = renderer.toJSON();
+    const result = toJSON();
 
     expect(result).not.toBeNull();
-    expect(renderer.toJSON()).toMatchSnapshot();
+    expect(toJSON()).toMatchSnapshot();
   });
 
   it("render nothing when label is empty", () => {
-    const renderer = ReactTestRenderer.create(
+    const { toJSON } = render(
       <CollapsibleTextContainer backgroundColor="#000000" label={""} style={{}}>
         <View />
       </CollapsibleTextContainer>
     );
 
-    const result = renderer.toJSON();
+    const result = toJSON();
     expect(result).toBeNull();
   });
 
   it("render nothing when label is not passed", () => {
-    const renderer = ReactTestRenderer.create(
+    const { toJSON } = render(
       <CollapsibleTextContainer backgroundColor="#000000" label={""} style={{}}>
         <View />
       </CollapsibleTextContainer>
     );
 
-    const result = renderer.toJSON();
+    const result = toJSON();
     expect(result).toBeNull();
   });
 
   it("render nothing when label is undefined", () => {
-    const renderer = ReactTestRenderer.create(
+    const { toJSON } = render(
       <CollapsibleTextContainer
         backgroundColor="#000000"
         label={undefined}
@@ -55,7 +55,7 @@ describe("CollapsibleTextContainer", () => {
       </CollapsibleTextContainer>
     );
 
-    const result = renderer.toJSON();
+    const result = toJSON();
     expect(result).toBeNull();
   });
 });

package/Components/MasterCell/elementMapper.tsx

@@ -73,7 +73,6 @@ export function elementMapper(
       : {};
 
     const componentProps = {
-      key,
       style,
       skipButtons: otherProps?.skipButtons,
       emitAsyncElementRegistrate: otherProps?.emitAsyncElementRegistrate,
@@ -91,7 +90,7 @@ export function elementMapper(
     const fn = mapElementWithKey(elementMapper(components, otherProps));
 
     return (
-      <Component {...componentProps}>
+      <Component key={key} {...componentProps}>
         {focusableTypes.has(type) && elements.length > 0
           ? elements.map(fn)
           : null}