@applicaster/zapp-react-native-ui-components 14.0.0-alpha.2332850672 → 14.0.0-alpha.2523527255

package/Components/AudioPlayer/{__tests__ → tv/__tests__}/audioPlayer.test.js

@@ -1,7 +1,11 @@
 import React from "react";
 import { render } from "@testing-library/react-native";
 
-import { AudioPlayer } from "../AudioPlayer";
+import { AudioPlayerTV } from "..";
+
+jest.mock("@applicaster/zapp-react-native-utils/audioPlayerUtils", () => ({
+  useArtworkImage: jest.fn(() => "artwork_url"),
+}));
 
 const audioPlayerProps = {
   audio_item: {
@@ -45,9 +49,9 @@ const audioPlayerProps = {
   styles: {},
 };
 
-describe("<AudioPlayer />", () => {
+describe("<AudioPlayerTV />", () => {
   it("renders correctly", () => {
-    const { toJSON } = render(<AudioPlayer {...audioPlayerProps} />);
+    const { toJSON } = render(<AudioPlayerTV {...audioPlayerProps} />);
     expect(toJSON()).toMatchSnapshot();
   });
 });

package/Components/AudioPlayer/{helpers.tsx → tv/helpers.tsx}

@@ -2,9 +2,8 @@ const defaults = {
   audio_player_title_color: "white",
   audio_player_summary_color: "white",
   audio_player_background_color: "black",
-  audio_player_artwork_aspect_ratio: "1:1",
+  audio_player_background_image: undefined,
   audio_player_rtl: false,
-  audio_player_background_image_default_color: "",
 };
 
 export function getPropertyFromEntryOrConfig({ entry, plugin_configuration }) {
@@ -28,13 +27,20 @@ const LTR = {
   justifyContent: "flex-start",
   textAlign: "left",
   alignItems: "flex-end",
-};
+} as const;
 
 const RTL = {
   flexDirection: "row-reverse",
   justifyContent: "flex-end",
   textAlign: "right",
   alignItems: "flex-start",
-};
+} as const;
 
-export const directionStyles = (isRTL) => (isRTL ? RTL : LTR);
+export const directionStyles = (
+  isRTL: boolean
+): {
+  flexDirection: "row" | "row-reverse";
+  justifyContent: "flex-start" | "flex-end";
+  textAlign: "left" | "right";
+  alignItems: "flex-end" | "flex-start";
+} => (isRTL ? RTL : LTR);

package/Components/AudioPlayer/{AudioPlayer.tsx → tv/index.tsx}

@@ -1,76 +1,23 @@
 import React, { useCallback, useMemo } from "react";
 
-import {
-  platformSelect,
-  isTV,
-} from "@applicaster/zapp-react-native-utils/reactUtils";
+import { platformSelect } from "@applicaster/zapp-react-native-utils/reactUtils";
+import { useArtworkImage } from "@applicaster/zapp-react-native-utils/audioPlayerUtils";
 
-import { imageSrcFromMediaItem } from "@applicaster/zapp-react-native-utils/configurationUtils";
-import { getBackgroundImage } from "@applicaster/zapp-react-native-utils/audioPlayerUtils";
-
-import { AudioPlayerMobileLayout } from "./AudioPlayerMobileLayout";
-import { AudioPlayerTVLayout } from "./AudioPlayerTVLayout";
+import { AudioPlayerTVLayout } from "./Layout";
 
 import { Channel } from "./Channel";
 import { Title } from "./Title";
 import { Summary } from "./Summary";
 import { Runtime } from "./Runtime";
 import { getPropertyFromEntryOrConfig } from "./helpers";
-import { ViewStyle } from "react-native";
-
-type Props = {
-  audio_item: ZappEntry & {
-    extensions?: {
-      audio_player_artwork_aspect_ratio?: string;
-      audio_player_background_image?: string;
-      audio_player_background_color?: string;
-      audio_player_channel_icon?: string;
-      audio_player_title_color?: string;
-      audio_player_summary_color?: string;
-      audio_player_rtl?: boolean;
-      audio_player_background_image_default_color?: string;
-      start_time?: string;
-      end_time?: string;
-    };
-  };
-  plugin_configuration: {
-    audio_player_background_color?: string;
-    audio_player_title_color?: string;
-    audio_player_summary_color?: string;
-    audio_player_rtl?: string;
-    audio_player_background_image_default_color?: string;
-    audio_player_background_image?: string;
-    audio_player_artwork_aspect_ratio?: string;
-    lg_tv_audio_player_title_font_family?: string;
-    lg_tv_audio_player_title_font_size?: number;
-    lg_tv_audio_player_summary_font_family?: string;
-    lg_tv_audio_player_summary_font_size?: number;
-    samsung_tv_audio_player_title_font_family?: string;
-    samsung_tv_audio_player_title_font_size?: number;
-    samsung_tv_audio_player_summary_font_family?: string;
-    samsung_tv_audio_player_summary_font_size?: number;
-    tv_os_audio_player_title_font_family?: string;
-    tv_os_audio_player_title_font_size?: number;
-    tv_os_audio_player_summary_font_family?: string;
-    tv_os_audio_player_summary_font_size?: number;
-  };
-  style?: ViewStyle;
-};
-
-export function AudioPlayer(props: Props) {
+
+import { Props } from "../types";
+
+export function AudioPlayerTV(props: Props) {
   const { audio_item, plugin_configuration, style = {} } = props;
   const { extensions, title, summary } = audio_item;
 
-  const mobileConfig = useMemo(() => {
-    const backgroundImage = getBackgroundImage({
-      entry: audio_item,
-      plugin_configuration,
-    });
-
-    return {
-      backgroundImage,
-    };
-  }, [audio_item, plugin_configuration]);
+  const artwork = useArtworkImage(audio_item);
 
   const getProp = useCallback(
     getPropertyFromEntryOrConfig({
@@ -80,22 +27,21 @@ export function AudioPlayer(props: Props) {
     [audio_item, plugin_configuration]
   );
 
-  const tvConfig = useMemo(() => {
-    // Checking if we are recieving items from the DSP
+  const config = useMemo(() => {
+    // Checking if we are receiving items from the DSP
     const titleColor = getProp("audio_player_title_color");
     const summaryColor = getProp("audio_player_summary_color");
     const backgroundColor = getProp("audio_player_background_color");
     const backgroundImage = getProp("audio_player_background_image");
-    const backgroundImageKey = getProp("audio_player_background_image_key");
-    const artworkAspectRatio = getProp("audio_player_artwork_aspect_ratio");
     const channelIcon = getProp("audio_player_channel_icon");
     const rtlFlag = getProp("audio_player_rtl");
-    const artworkBorderRadius = getProp("audio_player_artwork_border_radius");
 
-    const audioPlayerBackgroundImageDefaultColor = getProp(
-      "audio_player_background_image_default_color"
+    const backgroundImageOverlay = getProp(
+      "audio_player_background_image_overlay"
     );
 
+    const artworkBorderRadius = getProp("audio_player_artwork_border_radius");
+
     const isRTL = rtlFlag === "1" || rtlFlag === "true" || rtlFlag === true;
 
     const titleFontFamily = getProp(
@@ -163,7 +109,6 @@ export function AudioPlayer(props: Props) {
       summaryColor,
       backgroundColor,
       backgroundImage,
-      backgroundImageKey,
       isRTL,
       titleFontFamily,
       titleFontSize,
@@ -171,39 +116,18 @@ export function AudioPlayer(props: Props) {
       summaryFontSize,
       runTimeFontFamily,
       runTimeFontSize,
-      artworkAspectRatio,
       channelIcon,
-      audioPlayerBackgroundImageDefaultColor,
       artworkBorderRadius,
+      backgroundImageOverlay,
     };
   }, [getProp]);
 
-  const artwork = imageSrcFromMediaItem(audio_item, [
-    tvConfig?.artworkAspectRatio,
-  ]);
-
-  console.log("debug_2", "AudioPlayer", {
-    tvConfig,
-    mobileConfig,
-    audio_item,
-    plugin_configuration,
-  });
-
-  if (isTV()) {
-    return (
-      <AudioPlayerTVLayout artwork={artwork} config={tvConfig} style={style}>
-        <Channel srcImage={tvConfig?.channelIcon} config={tvConfig} />
-        <Title title={title} config={tvConfig} />
-        <Summary summary={summary} config={tvConfig} />
-        <Runtime {...extensions} config={tvConfig} />
-      </AudioPlayerTVLayout>
-    );
-  }
-
   return (
-    <AudioPlayerMobileLayout
-      backgroundImage={mobileConfig.backgroundImage}
-      style={style}
-    />
+    <AudioPlayerTVLayout artwork={artwork} config={config} style={style}>
+      <Channel srcImage={config?.channelIcon} config={config} />
+      <Title title={title} config={config} />
+      <Summary summary={summary} config={config} />
+      <Runtime {...extensions} config={config} />
+    </AudioPlayerTVLayout>
   );
 }

package/Components/AudioPlayer/types.ts

@@ -0,0 +1,40 @@
+import { ViewStyle } from "react-native";
+
+export type Props = {
+  audio_item: ZappEntry & {
+    extensions?: {
+      audio_player_artwork_aspect_ratio?: string;
+      audio_player_background_image?: string;
+      audio_player_background_color?: string;
+      audio_player_channel_icon?: string;
+      audio_player_title_color?: string;
+      audio_player_summary_color?: string;
+      audio_player_rtl?: boolean;
+      audio_player_background_image_default_color?: string;
+      start_time?: string;
+      end_time?: string;
+    };
+  };
+  plugin_configuration: {
+    audio_player_background_color?: string;
+    audio_player_title_color?: string;
+    audio_player_summary_color?: string;
+    audio_player_rtl?: string;
+    audio_player_background_image_default_color?: string;
+    audio_player_background_image?: string;
+    audio_player_artwork_aspect_ratio?: string;
+    lg_tv_audio_player_title_font_family?: string;
+    lg_tv_audio_player_title_font_size?: number;
+    lg_tv_audio_player_summary_font_family?: string;
+    lg_tv_audio_player_summary_font_size?: number;
+    samsung_tv_audio_player_title_font_family?: string;
+    samsung_tv_audio_player_title_font_size?: number;
+    samsung_tv_audio_player_summary_font_family?: string;
+    samsung_tv_audio_player_summary_font_size?: number;
+    tv_os_audio_player_title_font_family?: string;
+    tv_os_audio_player_title_font_size?: number;
+    tv_os_audio_player_summary_font_family?: string;
+    tv_os_audio_player_summary_font_size?: number;
+  };
+  style?: ViewStyle;
+};

package/Components/Cell/index.js

@@ -1,13 +1,17 @@
 import * as R from "ramda";
 
-import { connectToStore } from "@applicaster/zapp-react-native-redux";
+import { connectToStore } from "@applicaster/zapp-react-native-redux/utils/connectToStore";
 import { platformSelect } from "@applicaster/zapp-react-native-utils/reactUtils";
 
-import { HorizontalScrollContext, RiverOffsetContext } from "../../Contexts";
+import {
+  HorizontalScrollContext,
+  RiverOffsetContext,
+  ScreenScrollingContext,
+} from "../../Contexts";
+
 import { CellComponent } from "./Cell";
 import { TvOSCellComponent } from "./TvOSCellComponent";
 import { withConsumer } from "../../Contexts/HeaderOffsetContext";
-import { ScreenScrollingContext } from "../../Contexts/ScreenScrollingContext";
 
 import { ScreenLayoutContextConsumer } from "../../Contexts/ScreenLayoutContext";
 import { createContext } from "@applicaster/zapp-react-native-utils/reactUtils/createContext";

package/Components/ComponentResolver/index.ts

@@ -1,6 +1,6 @@
 import * as R from "ramda";
 
-import { connectToStore } from "@applicaster/zapp-react-native-redux";
+import { connectToStore } from "@applicaster/zapp-react-native-redux/utils/connectToStore";
 
 import { ComponentResolverComponent } from "./ComponentResolver";
 

package/Components/FeedLoader/index.js

@@ -1,6 +1,6 @@
 import * as R from "ramda";
 
-import { connectToStore } from "@applicaster/zapp-react-native-redux";
+import { connectToStore } from "@applicaster/zapp-react-native-redux/utils/connectToStore";
 import { loadPipesData } from "@applicaster/zapp-react-native-redux/ZappPipes";
 
 import { FeedLoaderComponent } from "./FeedLoader";

package/Components/Focusable/Focusable.tsx

@@ -5,6 +5,7 @@ import { BaseFocusable } from "../BaseFocusable";
 import { focusManager } from "@applicaster/zapp-react-native-utils/appUtils/focusManager";
 import { LONG_KEY_PRESS_TIMEOUT } from "@applicaster/quick-brick-core/const";
 import { withFocusableContext } from "../../Contexts/FocusableGroupContext/withFocusableContext";
+import { StyleSheet, ViewStyle } from "react-native";
 
 type Props = {
   initialFocus?: boolean;
@@ -21,7 +22,7 @@ type Props = {
   handleFocus?: ({ mouse }: { mouse: boolean }) => void;
   children: (boolean, string) => React.ComponentType<any>;
   selected?: boolean;
-  style?: React.CSSProperties;
+  style?: ViewStyle[] | ViewStyle;
 };
 
 class Focusable extends BaseFocusable<Props> {
@@ -122,7 +123,7 @@ class Focusable extends BaseFocusable<Props> {
   }
 
   render() {
-    const { children, style } = this.props;
+    const { children, style, ...otherProps } = this.props;
     const { focused } = this.state;
 
     const id = this.getId();
@@ -139,7 +140,8 @@ class Focusable extends BaseFocusable<Props> {
         onMouseUp={this.pressOut}
         data-testid={focusableId}
         focused-teststate={focused ? "focused" : "default"}
-        style={style}
+        style={StyleSheet.flatten(style) as any as React.CSSProperties}
+        {...otherProps}
       >
         {children(focused, { mouse: this.mouse })}
       </div>

package/Components/Focusable/FocusableTvOS.tsx

@@ -16,9 +16,9 @@ function noop() {}
 type Props = {
   id: string;
   groupId: string;
-  onPress?: (nativeEvent: React.SyntheticEvent) => void;
-  onFocus?: (nativeEvent: React.SyntheticEvent) => void;
-  onBlur?: (nativeEvent: React.SyntheticEvent) => void;
+  onPress?: (nativeEvent: any) => void;
+  onFocus?: (nativeEvent: any) => void;
+  onBlur?: (nativeEvent: any) => void;
   children: (focused?: boolean) => React.ReactNode;
   isParallaxDisabled: boolean;
   preferredFocus?: boolean;

package/Components/Focusable/FocusableiOS.tsx

@@ -2,7 +2,7 @@ import React from "react";
 
 type Props = {
   children: () => React.ReactNode;
-};
+} & Record<string, any>;
 
 function FocusableiOSComponent({ children }: Props) {
   if (typeof children === "function") {
@@ -12,4 +12,4 @@ function FocusableiOSComponent({ children }: Props) {
   return children;
 }
 
-export const FocusableiOS = React.forwardRef(FocusableiOSComponent);
+export const FocusableiOS = FocusableiOSComponent;

package/Components/Focusable/__tests__/index.android.test.tsx

@@ -38,6 +38,9 @@ describe("Focusable", () => {
   });
 
   it("updates disableFocus state when disableFocus prop changes", () => {
+    const unregister = jest.fn();
+    mockFocusManager.registerFocusable.mockReturnValue(unregister);
+
     const { rerender } = render(
       <Focusable id="test-id" disableFocus={false}>
         <Touchable testID="touchable" />

package/Components/Focusable/index.android.tsx

@@ -43,11 +43,13 @@ export const FocusableContext = React.createContext<
     // eslint-disable-next-line
     setIsFocusable: (enableFocus: boolean) => void;
     ref: FocusManager.FocusableRef;
+    parentFocusableId: Option<string>;
   } & ParentFocus
 >({
   focused: false,
   setIsFocusable: () => {},
   ref: { current: null },
+  parentFocusableId: undefined,
 });
 
 export const useFocusable = () => React.useContext(FocusableContext);
@@ -74,7 +76,7 @@ function FocusableComponent(props: Props, forwardedRef) {
 
   const isRTL = useIsRTL();
   const focusManager = useFocusManager();
-  const { ref: parentFocusable } = useFocusable();
+  const { ref: parentFocusableRef, parentFocusableId } = useFocusable();
   const touchableRef = React.useRef(null);
 
   const [focused, setFocused] = React.useState(() =>
@@ -98,13 +100,14 @@ function FocusableComponent(props: Props, forwardedRef) {
     }
   }, [disableFocus]);
 
-  React.useEffect(() => {
+  React.useLayoutEffect(() => {
     if (id) {
-      const unregister = focusManager.registerFocusable(
+      const unregister = focusManager.registerFocusable({
         touchableRef,
-        parentFocusable,
-        isFocusableCell
-      );
+        parentFocusableRef,
+        isFocusableCell,
+        parentFocusableId,
+      });
 
       onRegister();
 
@@ -112,7 +115,7 @@ function FocusableComponent(props: Props, forwardedRef) {
         unregister();
       };
     }
-  }, [id, onRegister, isFocusableCell]);
+  }, [id, onRegister, isFocusableCell, parentFocusableId]);
 
   if (R.isNil(id)) {
     // eslint-disable-next-line no-console
@@ -164,8 +167,9 @@ function FocusableComponent(props: Props, forwardedRef) {
       ...parentFocus,
       ref: touchableRef,
       setIsFocusable,
+      parentFocusableId: id,
     };
-  }, [parentFocus, focused]);
+  }, [parentFocus, focused, id]);
 
   return (
     <Touchable

package/Components/Focusable/index.tsx

@@ -4,7 +4,7 @@ import { FocusableiOS } from "./FocusableiOS";
 
 import { platformSelect } from "@applicaster/zapp-react-native-utils/reactUtils";
 
-export const Focusable = platformSelect({
+export const Focusable: React.ComponentType<any> = platformSelect({
   tvos: FocusableTvOS,
   ios: FocusableiOS,
   default: FocusableDefault,

package/Components/FocusableList/index.tsx

@@ -91,6 +91,7 @@ function FocusableListComponent<ItemT>(props: Props<ItemT>, ref) {
     // eslint-disable-next-line unused-imports/no-unused-vars
     omitPropsPropagation = [],
     useScrollView = false,
+    onScrollToIndexFailed = noop,
   } = props;
 
   useCheckItemIdsForUnique({ componentId: props.id, items: data });
@@ -277,6 +278,7 @@ function FocusableListComponent<ItemT>(props: Props<ItemT>, ref) {
         "withStateMemory",
         "useSequentialLoading",
         "useScrollView",
+        "onScrollToIndexFailed",
         ...omitPropsPropagation,
       ],
       R.__
@@ -305,6 +307,7 @@ function FocusableListComponent<ItemT>(props: Props<ItemT>, ref) {
           {...getFlatListProps(props)}
           onEndReached={onEndReached}
           initialNumToRender={initialNumToRender}
+          onScrollToIndexFailed={onScrollToIndexFailed}
           renderItem={renderItem}
           focused={focused}
           data={data}
@@ -319,6 +322,7 @@ function FocusableListComponent<ItemT>(props: Props<ItemT>, ref) {
           renderItem={renderItem}
           onEndReached={onEndReached}
           initialNumToRender={initialNumToRender}
+          onScrollToIndexFailed={onScrollToIndexFailed}
         />
       )}
     </ChildrenFocusDeactivatorView>

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