@applicaster/zapp-react-native-ui-components 13.0.0-alpha.3755455151 → 13.0.0-alpha.3829509172

package/Components/Layout/TV/__tests__/__snapshots__/ScreenContainer.test.tsx.snap

@@ -16,13 +16,14 @@ exports[`ScreenContainer renders 1`] = `
     style={
       [
         {
+          "flex": 1,
           "position": "absolute",
           "top": 0,
-          "width": 1920,
+          "width": "100%",
           "zIndex": 10,
         },
         {
-          "maxHeight": 10,
+          "maxHeight": 1,
         },
       ]
     }

package/Components/MasterCell/DefaultComponents/ActionButton.tsx

@@ -4,7 +4,6 @@ import { TouchableOpacity, ViewStyle } from "react-native";
 import { useActions } from "@applicaster/zapp-react-native-utils/reactHooks/actions";
 
 import Image from "./Image";
-
 type Props = {
   item: ZappEntry | ZappFeed;
   flavour?: "flavour_1" | "flavour_2";
@@ -69,7 +68,7 @@ export function ActionButton(props: Props) {
     if (!((actionDisabled || !actionContext) && actionState !== null)) {
       setActionState(actionContext.initialEntryState(item));
     }
-  }, [actionDisabled, item?.id, actionContext, action]);
+  }, [actionDisabled, item?.id, actionContext, action, setActionState]);
 
   const onPress = useCallback(() => {
     actionContext.invokeAction(item, {
@@ -85,7 +84,7 @@ export function ActionButton(props: Props) {
         setActionState(state);
       });
     }
-  }, [item?.id]);
+  }, [item?.id, setActionState, actionContext]);
 
   if (actionDisabled || !actionContext) return null;
   const AssetComponent = actionState?.asset;

package/Components/MasterCell/DefaultComponents/BorderContainerView/__tests__/index.test.tsx

@@ -0,0 +1,66 @@
+import {
+  BorderContainerView,
+  getBorderPadding, // Export for testing (using a double underscore prefix is a common convention)
+} from "../index";
+import * as React from "react";
+import { render } from "@testing-library/react-native";
+import { toNumberWithDefaultZero } from "@applicaster/zapp-react-native-utils/numberUtils";
+import { View } from "react-native";
+
+jest.mock("@applicaster/zapp-react-native-utils/numberUtils", () => ({
+  toNumberWithDefaultZero: jest.fn((value) => Number(value) || 0),
+}));
+
+describe("BorderContainerView", () => {
+  describe("getBorderPadding", () => {
+    it("returns 0 for inside", () => {
+      expect(getBorderPadding("inside", 10)).toBe(0);
+    });
+
+    it("returns borderWidth / 2 for center", () => {
+      expect(getBorderPadding("center", 10)).toBe(5);
+    });
+
+    it("returns borderWidth for outside", () => {
+      expect(getBorderPadding("outside", 10)).toBe(10);
+    });
+
+    it("returns borderWidth for invalid position", () => {
+      // @ts-ignore
+      expect(getBorderPadding("other_value", 10)).toBe(10);
+    });
+  });
+
+  it("Border component renders null if no borderPosition", () => {
+    const style = { borderWidth: 5, borderRadius: 10, borderColor: "red" };
+
+    const padding = {
+      paddingTop: 2,
+      paddingRight: 3,
+      paddingBottom: 4,
+      paddingLeft: 5,
+    };
+
+    const borderPosition = null;
+
+    const { queryByTestId } = render(
+      <BorderContainerView
+        style={style}
+        testID="border-container"
+        borderPosition={borderPosition}
+        borderPaddingTop={toNumberWithDefaultZero(padding.paddingTop)}
+        borderPaddingRight={toNumberWithDefaultZero(padding.paddingRight)}
+        borderPaddingBottom={toNumberWithDefaultZero(padding.paddingBottom)}
+        borderPaddingLeft={toNumberWithDefaultZero(padding.paddingLeft)}
+      >
+        <View testID="child" />
+      </BorderContainerView>
+    );
+
+    const children = queryByTestId("border-container").children;
+
+    expect(children[1].props.testID).toBe("child");
+
+    expect(children[0].children.length).toBe(0);
+  });
+});

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

@@ -28,7 +28,10 @@ const styles = StyleSheet.create({
   },
 });
 
-const getBorderPadding = (borderPosition: BorderPosition, borderWidth) => {
+export const getBorderPadding = (
+  borderPosition: BorderPosition,
+  borderWidth: number
+) => {
   switch (borderPosition) {
     case "inside":
       return 0;

package/Components/MasterCell/DefaultComponents/Image/Image.ios.tsx

@@ -38,22 +38,16 @@ function Image({
 
   const shouldRenderImg = source && !error;
 
-  // Default placeholder image fallback is empty string because it won't rerender
-  // in case of undefined or {uri: undefined} source
-  // https://github.com/facebook/react-native/issues/9195
-  const defaultPlaceHolderImage = React.useMemo(
-    () => ({ uri: placeholderImage || "" }),
-    [source, error]
-  );
+  const _source = shouldRenderImg
+    ? withDimensions(source)
+    : { uri: placeholderImage };
 
   return (
-    // @ts-ignore
     <MemoizedImage
       style={style as ImageStyle}
-      onError={() => setErrorState(true)}
-      source={
-        shouldRenderImg ? withDimensions(source) : defaultPlaceHolderImage
-      }
+      onError={React.useCallback(() => setErrorState(true), [])}
+      // as we have defaults as "" for placeholder image, we need to pass undefined to source to not throw warnings
+      source={_source?.uri ? _source : undefined}
       {...R.omit(["source"], otherProps)}
     />
   );

package/Components/MasterCell/DefaultComponents/ImageBorderContainer/__tests__/index.test.ts

@@ -0,0 +1,93 @@
+import { ImageBorderContainer } from "../index";
+import { getImageContainerMarginStyles } from "@applicaster/zapp-react-native-utils/cellUtils";
+
+const mockValue = (key) => {
+  const values = {
+    cell_padding_top: 1,
+    cell_padding_left: 2,
+    cell_padding_right: 3,
+    cell_padding_bottom: 4,
+    image_border_size: 5,
+    image_focused_border_color: "red",
+    image_selected_border_color: "blue",
+    image_focused_selected_border_color: "green",
+    image_border_color: "black",
+    image_corner_radius: 10,
+    image_border_position: "outside",
+    image_border_padding_top: 6,
+    image_border_padding_right: 7,
+    image_border_padding_bottom: 8,
+    image_border_padding_left: 9,
+    image_margin_top: 11,
+    image_margin_left: 12,
+    image_margin_right: 13,
+    image_margin_bottom: 14,
+  };
+
+  return values[key] || 0;
+};
+
+describe("ImageBorderContainer", () => {
+  it("calculates style properties correctly", () => {
+    const marginStyles = getImageContainerMarginStyles({ value: mockValue });
+
+    expect(marginStyles.marginTop).toBe(11);
+    expect(marginStyles.marginLeft).toBe(12);
+    expect(marginStyles.marginRight).toBe(13);
+    expect(marginStyles.marginBottom).toBe(14);
+
+    const props = {
+      value: mockValue,
+      state: "default",
+      imageStyles: {},
+    };
+
+    const result = ImageBorderContainer(props);
+
+    expect(result.style.marginTop).toBe(12); // 11 + 1
+    expect(result.style.marginLeft).toBe(14); // 12 + 2
+    expect(result.style.marginRight).toBe(16); // 13 + 3
+    expect(result.style.marginBottom).toBe(18); // 14 + 4
+    expect(result.style.borderWidth).toBe(5);
+    expect(result.style.borderColor).toBe("black");
+    expect(result.style.borderRadius).toBe(10);
+    expect(result.additionalProps.borderPosition).toBe("outside");
+    expect(result.additionalProps.borderPaddingTop).toBe(6);
+    expect(result.additionalProps.borderPaddingRight).toBe(7);
+    expect(result.additionalProps.borderPaddingBottom).toBe(8);
+    expect(result.additionalProps.borderPaddingLeft).toBe(9);
+  });
+
+  it("handles focused state correctly", () => {
+    const props = {
+      value: mockValue,
+      state: "focused",
+      imageStyles: {},
+    };
+
+    const result = ImageBorderContainer(props);
+    expect(result.style.borderColor).toBe("red");
+  });
+
+  it("handles selected state correctly", () => {
+    const props = {
+      value: mockValue,
+      state: "selected",
+      imageStyles: {},
+    };
+
+    const result = ImageBorderContainer(props);
+    expect(result.style.borderColor).toBe("blue");
+  });
+
+  it("handles focused and selected state correctly", () => {
+    const props = {
+      value: mockValue,
+      state: "focused_selected",
+      imageStyles: {},
+    };
+
+    const result = ImageBorderContainer(props);
+    expect(result.style.borderColor).toBe("green");
+  });
+});

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

@@ -244,7 +244,7 @@ const LiveImageComponent = (props: LiveImageProps) => {
   return (
     <>
       <Image {...props} applyMaxSize />
-      {isShouldRender && (
+      {isShouldRender ? (
         <View style={[style, positionAbsolute]}>
           <PlayerLiveImage
             uri={props.uri}
@@ -257,7 +257,7 @@ const LiveImageComponent = (props: LiveImageProps) => {
             audioMutedByDefault={audio_muted_by_default}
           />
         </View>
-      )}
+      ) : null}
     </>
   );
 };

package/Components/MasterCell/DefaultComponents/SecondaryImage/utils.ts

@@ -17,7 +17,7 @@ const SECONDARY_IMAGE_PREFIX = "secondary_image";
 
 type ImageSizing = typeof IMAGE_SIZING_FIT | typeof IMAGE_SIZING_FILL;
 
-type ImagePosition = typeof IMAGE_POSITION[keyof typeof IMAGE_POSITION];
+type ImagePosition = (typeof IMAGE_POSITION)[keyof typeof IMAGE_POSITION];
 
 export type DisplayMode =
   | typeof DISPLAY_MODE_FIXED

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

@@ -39,6 +39,6 @@ describe("image with no source", () => {
     );
 
     const testInstance = testRenderer.root;
-    expect(testInstance.findByType(Image).props.source).toEqual({ uri: "" });
+    expect(testInstance.findByType(Image).props.source).toBeUndefined();
   });
 });

package/Components/MasterCell/SharedUI/ProgressBar/hooks/useFillInPercent.ts

@@ -34,7 +34,6 @@ export const useFillInPercent = (entry: ZappEntry): number => {
     React.useState<number>(DEFAULT_FILL);
 
   React.useEffect(() => {
-    // setup progress in UI on mount
     getProgressValue(action, entry, (progress) => {
       setFillInPercent(progress);
     });
@@ -45,17 +44,12 @@ export const useFillInPercent = (entry: ZappEntry): number => {
       return;
     }
 
-    // refresh progress in UI when it was changed in CW
-    const unsubscribe = action?.addDataSourceListener?.(() => {
+    return action?.addDataSourceListener?.(() => {
       getProgressValue(action, entry, (progress) => {
         setFillInPercent(progress);
       });
     });
-
-    return () => {
-      unsubscribe?.();
-    };
-  }, [isActive]);
+  }, [isActive, action, entry, setFillInPercent]);
 
   return fillInPercent;
 };

package/Components/MasterCell/__tests__/__snapshots__/elementMapper.test.js.snap

@@ -3,12 +3,10 @@
 exports[`elementMapper renders the nodes 1`] = `
 <View>
   <View
-    key="View_0"
     testProp={true}
     viewProp={true}
   >
-    <ImageContainer
-      key="0"
+    <View
       style={
         {
           "borderTopLeftRadius": 4,
@@ -20,7 +18,6 @@ exports[`elementMapper renders the nodes 1`] = `
       uri="http://urlOfTheImage.net/img.png"
     />
     <View
-      key="1"
       style={
         {
           "height": 30,
@@ -32,8 +29,7 @@ exports[`elementMapper renders the nodes 1`] = `
       testProp={true}
       viewProp={true}
     >
-      <_Text
-        key="0"
+      <View
         label="Test Entry"
         numberOfLines={1}
         style={
@@ -47,7 +43,6 @@ exports[`elementMapper renders the nodes 1`] = `
       />
     </View>
     <View
-      key="2"
       style={
         {
           "height": 60,
@@ -58,8 +53,7 @@ exports[`elementMapper renders the nodes 1`] = `
       }
       testProp={true}
     >
-      <_Text
-        key="0"
+      <View
         label="Summary of the test entry"
         numberOfLines={2}
         style={
@@ -74,7 +68,6 @@ exports[`elementMapper renders the nodes 1`] = `
       />
     </View>
     <View
-      key="3"
       style={
         {
           "height": 42,
@@ -85,8 +78,7 @@ exports[`elementMapper renders the nodes 1`] = `
       testProp={true}
       viewProp={true}
     >
-      <ImageContainer
-        key="0"
+      <View
         style={
           {
             "height": 42,

package/Components/MasterCell/__tests__/__snapshots__/masterCell.test.js.snap

@@ -1,35 +1,5 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`masterCellBuilder when using a custom data adapter renders correctly 1`] = `
-<View
-  style={
-    {
-      "flex": 1,
-    }
-  }
->
-  <View
-    cellUUID="mocked-uuid"
-    key="0"
-    skipButtons={false}
-    style={
-      {
-        "backgroundColor": "#2F2F2F",
-        "borderRadius": 4,
-        "height": 436,
-        "marginRight": 20,
-        "width": 384,
-      }
-    }
-    wrapperRef={
-      {
-        "current": null,
-      }
-    }
-  />
-</View>
-`;
-
 exports[`masterCellBuilder when using custom containerStyle renders correctly 1`] = `
 <View
   style={
@@ -73,202 +43,3 @@ exports[`masterCellBuilder when using custom default components renders correctl
   />
 </mockConstructor>
 `;
-
-exports[`masterCellBuilder when using default options can be invoked as a React Component 1`] = `
-<View
-  style={
-    {
-      "flex": 1,
-    }
-  }
->
-  <View
-    cellUUID="mocked-uuid"
-    key="0"
-    skipButtons={false}
-    style={
-      {
-        "backgroundColor": "#2F2F2F",
-        "borderRadius": 4,
-        "height": 436,
-        "marginRight": 20,
-        "width": 384,
-      }
-    }
-    whoAmI={
-      {
-        "contentType": "feed",
-        "state": "default",
-      }
-    }
-    wrapperRef={
-      {
-        "current": null,
-      }
-    }
-  >
-    <ImageContainer
-      cellUUID="mocked-uuid"
-      key="0"
-      numberOfLines={1}
-      skipButtons={false}
-      style={
-        {
-          "borderTopLeftRadius": 4,
-          "borderTopRightRadius": 4,
-          "height": 216,
-          "width": 384,
-        }
-      }
-      uri="http://urlOfTheImage.net/img.png"
-    />
-    <View
-      cellUUID="mocked-uuid"
-      key="1"
-      skipButtons={false}
-      style={
-        {
-          "height": 30,
-          "marginHorizontal": 24,
-          "marginTop": 24,
-          "width": 336,
-        }
-      }
-      wrapperRef={
-        {
-          "current": null,
-        }
-      }
-    >
-      <_Text
-        key="0"
-        label="Test Entry"
-        numberOfLines={1}
-        skipButtons={false}
-        style={
-          {
-            "color": "#EFEFEF",
-            "fontSize": 26,
-            "fontStyle": "normal",
-            "fontWeight": "bold",
-          }
-        }
-      />
-    </View>
-    <View
-      cellUUID="mocked-uuid"
-      key="2"
-      skipButtons={false}
-      style={
-        {
-          "height": 60,
-          "marginHorizontal": 24,
-          "marginTop": 10,
-          "width": 336,
-        }
-      }
-      wrapperRef={
-        {
-          "current": null,
-        }
-      }
-    >
-      <_Text
-        key="0"
-        label="Summary of the test entry"
-        numberOfLines={2}
-        skipButtons={false}
-        style={
-          {
-            "color": "#EFEFEF",
-            "fontSize": 24,
-            "fontStyle": "normal",
-            "fontWeight": "normal",
-            "opacity": 0.8,
-          }
-        }
-      />
-    </View>
-    <View
-      cellUUID="mocked-uuid"
-      key="3"
-      skipButtons={false}
-      style={
-        {
-          "height": 42,
-          "margin": 24,
-          "width": 56,
-        }
-      }
-      wrapperRef={
-        {
-          "current": null,
-        }
-      }
-    >
-      <ImageContainer
-        cellUUID="mocked-uuid"
-        key="0"
-        skipButtons={false}
-        style={
-          {
-            "height": 42,
-            "width": 56,
-          }
-        }
-        uri="http://urlOfTheImage.net/channelLogo.png"
-      />
-    </View>
-  </View>
-</View>
-`;
-
-exports[`masterCellBuilder when using default options renders correctly 1`] = `
-<View>
-  <Memo(MasterCell)
-    item={
-      {
-        "author": {
-          "name": "John Doe",
-        },
-        "id": "A1234",
-        "media_group": [
-          {
-            "media_item": [
-              {
-                "key": "image_base",
-                "src": "http://urlOfTheImage.net/img.png",
-              },
-            ],
-            "type": "image",
-          },
-          {
-            "media_item": [
-              {
-                "key": "logo_thumbnail",
-                "src": "http://urlOfTheImage.net/channelLogo.png",
-              },
-            ],
-            "type": "thumbnail",
-          },
-        ],
-        "published": "2019/03/17 02:17:46 +0000",
-        "summary": "Summary of the test entry",
-        "title": "Test Entry",
-        "type": {
-          "value": "feed",
-        },
-      }
-    }
-  />
-</View>
-`;
-
-exports[`masterCellBuilder when using default options returns a function 1`] = `
-{
-  "$$typeof": Symbol(react.memo),
-  "compare": null,
-  "hasFocusableInside": [Function],
-  "type": [Function],
-}
-`;

package/Components/MasterCell/__tests__/elementMapper.test.js

@@ -1,20 +1,33 @@
 import * as R from "ramda";
 import * as React from "react";
 import { View } from "react-native";
-import { shallow } from "enzyme";
-import { shallowToJson } from "enzyme-to-json";
+import { render } from "@testing-library/react-native";
 import { elementMapper } from "../elementMapper";
 import { elements } from "./testElements";
 import { defaultComponents } from "../DefaultComponents";
 
+jest.mock(
+  "@applicaster/zapp-react-native-utils/reactHooks/navigation/useNavigation"
+);
+
 describe("elementMapper", () => {
   it("renders the nodes", () => {
-    const wrapper = shallow(
+    const wrapper = render(
       <View key={1}>
-        {R.map(elementMapper(defaultComponents, { testProp: true }), elements)}
+        {R.map(
+          elementMapper(
+            Object.entries(defaultComponents).reduce((acc, [key]) => {
+              acc[key] = View;
+
+              return acc;
+            }, {}),
+            { testProp: true }
+          ),
+          elements
+        )}
       </View>
     );
 
-    expect(shallowToJson(wrapper)).toMatchSnapshot();
+    expect(wrapper.toJSON()).toMatchSnapshot();
   });
 });