@applicaster/zapp-react-native-ui-components 14.0.0-alpha.5219335081 → 14.0.0-alpha.5234792518

package/Components/Cell/__tests__/CellWIthFocusable.test.js

@@ -1,12 +1,13 @@
 import { View } from "react-native";
 import React from "react";
-import { act, render } from "@testing-library/react-native";
+import { act } from "@testing-library/react-native";
 import { CellWithFocusable } from "../CellWithFocusable.tsx";
 
 import { focusManager } from "@applicaster/zapp-react-native-utils/appUtils/focusManager";
+import { renderWithProviders } from "@applicaster/zapp-react-native-utils/testUtils/index.tsx";
 
 const renderWith = (props) => {
-  return render(<CellWithFocusable {...props} />);
+  return renderWithProviders(<CellWithFocusable {...props} />);
 };
 
 describe("CellWithFocusable", () => {

package/Components/FeedLoader/FeedLoader.tsx

@@ -1,25 +1,16 @@
 import React from "react";
 import * as R from "ramda";
+import { selectZappPipes } from "@applicaster/zapp-react-native-redux";
 
 type Props = {
-  zappPipes: ZappPipesData;
-  loadPipesData: (
-    feed: string,
-    options?: Partial<{
-      clearCache: boolean;
-      meta: any;
-      loadLocalFavorites: boolean;
-      silentRefresh: boolean;
-      parentFeed: ZappFeed;
-      callback: () => void;
-      bodyParams: any;
-      riverId: string;
-    }>
-  ) => void;
+  zappPipes: ReturnType<typeof selectZappPipes>;
+  loadPipesData: ReturnType<
+    typeof import("@applicaster/zapp-react-native-utils/reactHooks/feed").useLoadPipesDataDispatch
+  >;
   feedUrl: string;
-  children: (feed: ZappFeed) => React.ComponentType<any>;
+  children: (feed: ZappFeed) => React.ReactNode;
   onFeedLoaded: (feed: ZappFeed) => {};
-  onError: (feed: ZappFeed) => {};
+  onError: (error: ZappPipesData["error"]) => {};
   refreshing: boolean;
   refreshCallback: () => void;
 };

package/Components/FeedLoader/FeedLoaderHOC.tsx

@@ -0,0 +1,21 @@
+import React from "react";
+import {
+  selectZappPipes,
+  useAppSelector,
+} from "@applicaster/zapp-react-native-redux";
+import { useLoadPipesDataDispatch } from "@applicaster/zapp-react-native-utils/reactHooks/feed";
+
+export const FeedLoaderHOC = (_Component: any) => {
+  return function FeedLoaderHOC(props: any) {
+    const zappPipes = useAppSelector(selectZappPipes);
+    const loadPipesData = useLoadPipesDataDispatch();
+
+    return (
+      <_Component
+        {...props}
+        zappPipes={zappPipes}
+        loadPipesData={loadPipesData}
+      />
+    );
+  };
+};

package/Components/FeedLoader/index.js

@@ -1,10 +1,4 @@
-import * as R from "ramda";
-
-import { connectToStore } from "@applicaster/zapp-react-native-redux/utils/connectToStore";
-import { loadPipesData } from "@applicaster/zapp-react-native-redux/ZappPipes";
-
 import { FeedLoaderComponent } from "./FeedLoader";
+import { FeedLoaderHOC } from "./FeedLoaderHOC";
 
-export const FeedLoader = connectToStore(R.pick(["zappPipes"]), {
-  loadPipesData,
-})(FeedLoaderComponent);
+export const FeedLoader = FeedLoaderHOC(FeedLoaderComponent);

package/Components/Focusable/Focusable.tsx

@@ -20,7 +20,7 @@ type Props = {
   onPressOut?: () => void;
   onLongPress?: () => void;
   handleFocus?: ({ mouse }: { mouse: boolean }) => void;
-  children: (boolean, string) => React.ComponentType<any>;
+  children: (boolean, string) => React.ReactNode;
   selected?: boolean;
   style?: ViewStyle[] | ViewStyle;
 };

package/Components/Focusable/FocusableTvOS.tsx

@@ -19,7 +19,7 @@ type Props = {
   onPress?: (nativeEvent: any) => void;
   onFocus?: (nativeEvent: any) => void;
   onBlur?: (nativeEvent: any) => void;
-  children: (focused?: boolean) => React.ReactNode;
+  children: ((focused?: boolean) => React.ReactNode) | React.ReactNode;
   isParallaxDisabled: boolean;
   preferredFocus?: boolean;
   selected?: boolean;
@@ -204,7 +204,7 @@ export class Focusable extends BaseFocusable<Props> {
         {...this.nextFocusableReactTags}
         {...otherProps}
       >
-        {R.is(Function, children) ? children(focused) : children}
+        {typeof children === "function" ? children(focused) : children}
       </FocusableItemNative>
     );
   }

package/Components/FocusableGroup/FocusableTvOS.tsx

@@ -22,7 +22,7 @@ type FocusableGroupNativeEvent = {
 
 type Props = {
   id: string;
-  children: (arg1: boolean) => React.ComponentType<any>;
+  children: React.ReactNode;
   isFocusDisabled: boolean;
   isWithMemory: boolean;
   focusGroupRef: React.Component;

package/Components/FocusableList/index.tsx

@@ -20,11 +20,11 @@ import { FocusableScrollView } from "../FocusableScrollView";
 const mapIndexed = R.addIndex(R.map);
 
 export type IListRenderItem<ItemT> = (
-  info: IListRenderItemInfo<ItemT> & {
+  info: {
     focused: boolean;
     onLoadFinished: () => void;
     onLoadFailed: () => void;
-  }
+  } & IListRenderItemInfo<ItemT>
 ) => React.ReactElement | null;
 
 export const getFocusableId = (parentId, index) =>

package/Components/FreezeWithCallback/__tests__/index.test.tsx

@@ -1,19 +1,18 @@
 import React, { Dispatch, useEffect, useState } from "react";
-import {
-  act,
-  create,
-  ReactTestRenderer,
-  ReactTestRendererJSON,
-} from "react-test-renderer";
+import { act, render } from "@testing-library/react-native";
+import { View } from "react-native";
 import { FreezeWithCallback } from "../index";
 
-const SimpleContent = () => <div />;
+const SimpleContent = () => <View testID="simple-content" />;
 
 interface InnerProps {
   value: number;
 }
+
 // eslint-disable-next-line unused-imports/no-unused-vars
-const Inner = ({ value }: InnerProps) => <div />;
+const Inner = ({ value }: InnerProps) => (
+  <View testID="inner-component" data-value={value} />
+);
 
 interface TestSubscriber {
   renderCount: number;
@@ -51,24 +50,20 @@ const Container = ({ freeze, children }: ContainerProps) => (
 );
 
 function setupTest(initialFreeze: boolean = false) {
-  let testRenderer: ReactTestRenderer | undefined;
   const [Subscriber, subscriberState] = createSubscriberComponent();
 
-  act(() => {
-    testRenderer = create(
-      <Container freeze={initialFreeze}>
-        <Subscriber />
-      </Container>
-    );
-  });
+  const renderResult = render(
+    <Container freeze={initialFreeze}>
+      <Subscriber />
+    </Container>
+  );
 
   return {
-    testRenderer,
-    testInstance: testRenderer?.root,
+    renderResult,
     subscriberState,
     updateFreeze: (freeze: boolean) => {
       act(() =>
-        testRenderer?.update(
+        renderResult.rerender(
           <Container freeze={freeze}>
             <Subscriber />
           </Container>
@@ -80,91 +75,120 @@ function setupTest(initialFreeze: boolean = false) {
 
 describe("FreezeWithCallback", () => {
   test("Renders stuff not frozen", () => {
-    const testRenderer = create(
+    const { getByTestId } = render(
       <Container freeze={false}>
         <SimpleContent />
       </Container>
     );
 
-    expect(testRenderer.root.findByType(SimpleContent)).toBeTruthy();
+    expect(getByTestId("simple-content")).toBeTruthy();
   });
 
   test("Does not render stuff when frozen", () => {
-    const testRenderer = create(
+    const { queryByTestId } = render(
       <Container freeze>
         <SimpleContent />
       </Container>
     );
 
-    expect(testRenderer.root.findAllByType(SimpleContent)).toHaveLength(0);
+    expect(queryByTestId("simple-content")).toBe(null);
   });
 
   test("Stuff is gone after freeze", () => {
-    const testRenderer = create(
+    const { toJSON, getByTestId, rerender } = render(
       <Container freeze={false}>
         <SimpleContent />
       </Container>
     );
 
-    expect(testRenderer.root.findByType(SimpleContent)).toBeTruthy();
+    expect(getByTestId("simple-content")).toBeTruthy();
 
     act(() =>
-      testRenderer.update(
+      rerender(
         <Container freeze>
           <SimpleContent />
         </Container>
       )
     );
 
-    expect(testRenderer.toJSON()).toBe(null);
+    expect(toJSON()).toBe(null);
   });
 
   test("Updates work when not frozen", () => {
-    const { testInstance, subscriberState } = setupTest();
+    const { renderResult, subscriberState } = setupTest();
+
+    expect(
+      renderResult.getByTestId("inner-component").props["data-value"]
+    ).toEqual(0);
 
-    expect(testInstance?.findByType(Inner).props.value).toEqual(0);
     act(() => subscriberState.subscription(1));
-    expect(testInstance?.findByType(Inner).props.value).toEqual(1);
+
+    expect(
+      renderResult.getByTestId("inner-component").props["data-value"]
+    ).toEqual(1);
+
     expect(subscriberState.renderCount).toBe(2);
   });
 
   test("Updates does not propagate when frozen", () => {
-    const { testInstance, subscriberState, updateFreeze } = setupTest();
+    const { renderResult, subscriberState, updateFreeze } = setupTest();
+
+    expect(
+      renderResult.getByTestId("inner-component").props["data-value"]
+    ).toEqual(0);
 
-    expect(testInstance?.findByType(Inner).props.value).toEqual(0);
     updateFreeze(true);
     act(() => subscriberState.subscription(1));
-    expect(testInstance?.findByType(Inner).props.value).toEqual(0);
+
+    expect(
+      renderResult.getByTestId("inner-component").props["data-value"]
+    ).toEqual(0);
+
     expect(subscriberState.renderCount).toBe(1);
   });
 
   test("State persists after defrost", () => {
-    const { testInstance, subscriberState, updateFreeze, testRenderer } =
-      setupTest();
+    const { renderResult, subscriberState, updateFreeze } = setupTest();
+
+    expect(
+      renderResult.getByTestId("inner-component").props["data-value"]
+    ).toEqual(0);
 
-    expect(testInstance?.findByType(Inner).props.value).toEqual(0);
     act(() => subscriberState.subscription(1));
-    expect(testInstance?.findByType(Inner).props.value).toEqual(1);
+
+    expect(
+      renderResult.getByTestId("inner-component").props["data-value"]
+    ).toEqual(1);
 
     updateFreeze(true);
-    expect(testRenderer?.toJSON()).toBe(null);
+    expect(renderResult.toJSON()).toBe(null);
 
     updateFreeze(false);
-    expect((testRenderer?.toJSON() as ReactTestRendererJSON).type).toBe("div");
-    expect(testInstance?.findByType(Inner).props.value).toEqual(1);
+    expect(renderResult.getByTestId("inner-component")).toBeTruthy();
+
+    expect(
+      renderResult.getByTestId("inner-component").props["data-value"]
+    ).toEqual(1);
   });
 
   test("Update propagate after defrost", () => {
-    const { testInstance, subscriberState, updateFreeze } = setupTest();
+    const { renderResult, subscriberState, updateFreeze } = setupTest();
 
     updateFreeze(true);
     act(() => subscriberState.subscription(1));
     act(() => subscriberState.subscription(2));
     act(() => subscriberState.subscription(3));
-    expect(testInstance?.findByType(Inner).props.value).toEqual(0);
+
+    expect(
+      renderResult.getByTestId("inner-component").props["data-value"]
+    ).toEqual(0);
 
     updateFreeze(false);
-    expect(testInstance?.findByType(Inner).props.value).toEqual(3);
+
+    expect(
+      renderResult.getByTestId("inner-component").props["data-value"]
+    ).toEqual(3);
+
     expect(subscriberState.renderCount).toBe(2);
   });
 });

package/Components/GeneralContentScreen/utils/useCurationAPI.ts

@@ -3,8 +3,6 @@ import { all, equals, path, prop, isEmpty, pluck, values } from "ramda";
 import { useEffect, useMemo } from "react";
 
 import {
-  ZappPipes,
-  useAppDispatch,
   useLayoutPresets,
   useZappPipesFeed,
 } from "@applicaster/zapp-react-native-redux";
@@ -25,6 +23,7 @@ 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 interface CurationEntry {
@@ -126,8 +125,6 @@ export const getFinalComponents = (
 export const useCurationAPI = (
   components: Array<ZappUIComponent>
 ): ZappUIComponent[] => {
-  const dispatch = useAppDispatch();
-
   const smartComponents = useMemo(
     () => components?.filter?.(isSmartComponent) ?? [],
     [components]
@@ -163,17 +160,19 @@ export const useCurationAPI = (
 
   const urls = useMemo<string[]>(() => Object.values(urlsMap), [urlsMap]);
 
+  const loadPipesDataDispatcher = useLoadPipesDataDispatch();
+
   useEffect(() => {
     urls.forEach((url, index) => {
       if (url) {
-        dispatch(ZappPipes.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 = useZappPipesFeed(urls);
   const layoutPresets = useLayoutPresets();

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>;
 };
@@ -48,7 +49,9 @@ function getAssetValue(asset, flavour, fallbackAsset = null) {
   return asset.src || fallbackAsset;
 }
 
-export function ActionButton(props: Props) {
+export const ActionButton = React.memo(function ActionButtonComponent(
+  props: Props
+) {
   const { item, action, asset, flavour = "flavour_1", cellUUID } = props;
   const actionContext = useActions(action?.identifier);
 
@@ -98,6 +101,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}
     >
@@ -118,4 +122,4 @@ export function ActionButton(props: Props) {
       )}
     </TouchableOpacity>
   );
-}
+});

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