@applicaster/zapp-react-native-ui-components 15.0.0-rc.143 → 15.0.0-rc.145

package/Components/MasterCell/DefaultComponents/mobile/MobileActionButtons/__tests__/PressableView.test.tsx

@@ -1,9 +1,13 @@
 import React from "react";
+import { Text as RNText, TouchableOpacity, View } from "react-native";
 import { render, fireEvent } from "@testing-library/react-native";
 import { useActions } from "@applicaster/zapp-react-native-utils/reactHooks/actions";
 
+import { configInflater } from "../../../../dataAdapter";
 import { elementMapper } from "../../../../elementMapper";
 import { defaultComponents } from "../../../index";
+import { MobileActionButtons } from "..";
+import { AssetComponent } from "../AssetComponent";
 
 jest.mock("@applicaster/zapp-react-native-utils/reactHooks/actions", () => ({
   useActions: jest.fn(),
@@ -47,7 +51,7 @@ jest.mock(
 
 const mockUseActions = useActions as jest.Mock;
 
-const item = {
+const entry = {
   id: "entry-1",
 } as ZappEntry;
 
@@ -71,15 +75,59 @@ const buildActionContext = (entryState = {}) => ({
   isActionAvailable: jest.fn(() => true),
 });
 
+const mobileConfiguration = {
+  mobile_buttons_container_buttons_enabled: true,
+  mobile_buttons_container_position: "over_image",
+  mobile_buttons_container_align: "left",
+  mobile_buttons_container_margin_top: 0,
+  mobile_buttons_container_margin_right: 0,
+  mobile_buttons_container_margin_bottom: 0,
+  mobile_buttons_container_margin_left: 0,
+  mobile_buttons_container_stacking: "horizontal",
+  mobile_buttons_container_horizontal_gutter: 8,
+  mobile_buttons_container_vertical_gutter: 8,
+  mobile_buttons_container_independent_styles: true,
+  mobile_buttons_container_over_image_position: "top_right",
+  mobile_button_1_button_enabled: true,
+  mobile_button_1_assign_action: "navigation_action",
+  mobile_button_1_display_mode: "dynamic",
+  mobile_button_1_contents_alignment: "center",
+  mobile_button_1_background_color: "rgba(1,1,1,1)",
+  mobile_button_1_border_color: "rgba(2,2,2,1)",
+  mobile_button_1_border_size: 1,
+  mobile_button_1_corner_radius: 8,
+  mobile_button_1_padding_top: 10,
+  mobile_button_1_padding_right: 10,
+  mobile_button_1_padding_bottom: 10,
+  mobile_button_1_padding_left: 10,
+  mobile_button_1_asset_width: 24,
+  mobile_button_1_asset_height: 24,
+  mobile_button_1_asset_margin_top: 0,
+  mobile_button_1_asset_margin_right: 0,
+  mobile_button_1_asset_margin_bottom: 0,
+  mobile_button_1_asset_margin_left: 0,
+  mobile_button_1_asset_enabled: true,
+  mobile_button_1_label_enabled: true,
+  mobile_button_1_font_color: "rgba(10,10,10,1)",
+  mobile_button_1_focused_font_color: "rgba(20,20,20,1)",
+  mobile_button_1_font_size: 15,
+  mobile_button_1_line_height: 24,
+  mobile_button_1_ios_font_family: "Ubuntu-Bold",
+  mobile_button_1_android_font_family: "Ubuntu-Bold",
+  mobile_button_1_ios_letter_spacing: -0.2,
+  mobile_button_1_android_letter_spacing: -0.2,
+  mobile_button_1_text_transform: "default",
+};
+
 const baseNode = {
-  type: "PressableView",
+  type: "MobileActionButton",
   style: {
     backgroundColor: "rgba(1,1,1,1)",
     borderColor: "rgba(2,2,2,1)",
     borderWidth: 1,
   },
   props: {
-    item,
+    entry,
     action: {
       identifier: "navigation_action",
     },
@@ -91,16 +139,16 @@ const baseNode = {
   },
   elements: [
     {
-      type: "Image",
+      type: "ReactComponent",
       style: {
         width: 24,
         height: 24,
       },
       props: {
+        component: AssetComponent,
+        renderChildren: false,
+        requiresCellUUID: true,
         testID: "mobile-action-button-asset",
-        source: {
-          context: "navigation_action",
-        },
         mobileActionRole: "asset",
       },
     },
@@ -139,7 +187,7 @@ const baseNode = {
   ],
 };
 
-describe("PressableView", () => {
+describe("MobileActionButton", () => {
   beforeEach(() => {
     jest.clearAllMocks();
   });
@@ -186,10 +234,160 @@ describe("PressableView", () => {
     fireEvent.press(getByTestId("mobile-action-button"));
 
     expect(actionContext.invokeAction).toHaveBeenCalledWith(
-      item,
+      entry,
       expect.objectContaining({
         updateState: expect.any(Function),
       })
     );
   });
+
+  it("preserves the rendered primitive tree when the mobile builder is wrapped with DataProvider", () => {
+    mockUseActions.mockReturnValue(buildActionContext());
+
+    const node = configInflater(
+      entry,
+      MobileActionButtons({
+        value: (key) => mobileConfiguration[key],
+        configuration: mobileConfiguration,
+        placement: "over_image",
+      })
+    );
+
+    const { UNSAFE_getAllByType, UNSAFE_getByType, getByTestId, getByText } =
+      render(
+        <React.Fragment>
+          {elementMapper(defaultComponents)(node as never)}
+        </React.Fragment>
+      );
+
+    const pressable = UNSAFE_getByType(TouchableOpacity);
+    const label = getByText("Play");
+    const asset = getByTestId("mobile_action_button_1-asset");
+
+    expect(pressable.props.testID).toBe("mobile_action_button_1");
+    expect(pressable.props.accessibilityLabel).toBe("entry-1");
+
+    expect(pressable.props.style).toMatchObject({
+      backgroundColor: "rgba(1,1,1,1)",
+      borderColor: "rgba(2,2,2,1)",
+      borderWidth: 1,
+    });
+
+    expect(asset.props.style).toMatchObject({
+      width: 24,
+      height: 24,
+    });
+
+    expect(label.props.style).toEqual(
+      expect.arrayContaining([
+        expect.objectContaining({
+          color: "rgba(10,10,10,1)",
+          fontSize: 15,
+          lineHeight: 24,
+        }),
+      ])
+    );
+
+    expect(UNSAFE_getAllByType(View).length).toBeGreaterThan(0);
+    expect(UNSAFE_getAllByType(RNText).length).toBeGreaterThan(0);
+  });
+
+  describe("component asset via mobileButtonAssets", () => {
+    const nodeWithFlavour1 = {
+      ...baseNode,
+      props: {
+        ...baseNode.props,
+        action: {
+          identifier: "navigation_action",
+          flavour: "flavour_1" as const,
+        },
+      },
+    };
+
+    const nodeWithFlavour2 = {
+      ...baseNode,
+      props: {
+        ...baseNode.props,
+        action: {
+          identifier: "navigation_action",
+          flavour: "flavour_2" as const,
+        },
+      },
+    };
+
+    it("renders mobileButtonAssets component instead of Image when it is a function", () => {
+      const MockAssetComponent = jest.fn(({ testID }) => (
+        <View testID={testID} accessibilityLabel="mock-asset" />
+      ));
+
+      mockUseActions.mockReturnValue(
+        buildActionContext({ mobileButtonAssets: MockAssetComponent })
+      );
+
+      const { getByTestId } = renderNode(nodeWithFlavour1);
+
+      expect(MockAssetComponent).toHaveBeenCalled();
+      expect(getByTestId("mobile-action-button-asset")).toBeTruthy();
+    });
+
+    it("passes flavour_1 to the mobileButtonAssets component", () => {
+      const MockAssetComponent = jest.fn(({ testID }) => (
+        <View testID={testID} />
+      ));
+
+      mockUseActions.mockReturnValue(
+        buildActionContext({ mobileButtonAssets: MockAssetComponent })
+      );
+
+      renderNode(nodeWithFlavour1);
+
+      expect(MockAssetComponent).toHaveBeenCalledWith(
+        expect.objectContaining({ flavour: "flavour_1" }),
+        expect.anything()
+      );
+    });
+
+    it("passes flavour_2 to the mobileButtonAssets component", () => {
+      const MockAssetComponent = jest.fn(({ testID }) => (
+        <View testID={testID} />
+      ));
+
+      mockUseActions.mockReturnValue(
+        buildActionContext({ mobileButtonAssets: MockAssetComponent })
+      );
+
+      renderNode(nodeWithFlavour2);
+
+      expect(MockAssetComponent).toHaveBeenCalledWith(
+        expect.objectContaining({ flavour: "flavour_2" }),
+        expect.anything()
+      );
+    });
+
+    it("does not render asset when mobileButtonAssets is absent", () => {
+      mockUseActions.mockReturnValue(
+        buildActionContext({ mobileButtonAssets: undefined })
+      );
+
+      const { queryByTestId } = renderNode(nodeWithFlavour1);
+
+      expect(queryByTestId("mobile-action-button-asset")).toBeNull();
+    });
+
+    it("renders asset when mobileButtonAssets exists even if asset is absent", () => {
+      mockUseActions.mockReturnValue(
+        buildActionContext({
+          asset: undefined,
+          mobileButtonAssets: [
+            "https://example.com/image-inactive.png",
+            "https://example.com/image-active.png",
+          ],
+        })
+      );
+
+      const { getByTestId } = renderNode(nodeWithFlavour1);
+
+      expect(getByTestId("mobile-action-button-asset")).toBeTruthy();
+    });
+  });
 });

package/Components/MasterCell/DefaultComponents/mobile/MobileActionButtons/__tests__/builders.test.ts

@@ -1,8 +1,7 @@
+import { MobileActionButtons } from "..";
 import { Asset } from "../Asset";
+import { AssetComponent } from "../AssetComponent";
 import { Button } from "../Button";
-import { ButtonContainerView } from "../ButtonContainerView";
-import { Spacer } from "../Spacer";
-import { TextLabel } from "../TextLabel";
 import { TextLabelsContainer } from "../TextLabelsContainer";
 
 describe("mobile action button builders", () => {
@@ -48,30 +47,6 @@ describe("mobile action button builders", () => {
 
   const value = (key) => configuration[key];
 
-  it("builds the container node with content style in additionalProps", () => {
-    const result = ButtonContainerView({
-      style: { position: "absolute" },
-      contentStyle: {
-        flexDirection: "row",
-      },
-      elements: [{ type: "PressableView" }],
-    });
-
-    expect(result).toEqual({
-      type: "View",
-      style: { position: "absolute" },
-      elements: [
-        {
-          type: "View",
-          style: {
-            flexDirection: "row",
-          },
-          elements: [{ type: "PressableView" }],
-        },
-      ],
-    });
-  });
-
   it("builds the button node with asset and text label children", () => {
     const result = Button({
       index: 0,
@@ -81,35 +56,80 @@ describe("mobile action button builders", () => {
       spacingStyle: { marginRight: 8 },
     });
 
-    expect(result.type).toBe("PressableView");
+    expect(result.type).toBe("MobileActionButton");
     expect(result.additionalProps.action.identifier).toBe("navigation_action");
 
     expect(result.elements).toEqual(
       expect.arrayContaining([
-        expect.objectContaining({ type: "Image" }),
+        expect.objectContaining({ type: "ReactComponent" }),
         expect.objectContaining({ type: "View" }),
       ])
     );
   });
 
-  it("builds the asset, label container, label and spacer nodes", () => {
+  it("wraps each mobile button with DataProvider", () => {
+    const dataProviderConfiguration = {
+      ...configuration,
+      mobile_buttons_container_buttons_enabled: true,
+      mobile_buttons_container_position: "over_image",
+      mobile_buttons_container_align: "left",
+      mobile_buttons_container_margin_top: 0,
+      mobile_buttons_container_margin_right: 12,
+      mobile_buttons_container_margin_bottom: 0,
+      mobile_buttons_container_margin_left: 6,
+      mobile_buttons_container_stacking: "horizontal",
+      mobile_buttons_container_horizontal_gutter: 8,
+      mobile_buttons_container_vertical_gutter: 8,
+      mobile_buttons_container_independent_styles: true,
+      mobile_buttons_container_over_image_position: "top_right",
+    };
+
+    const result = MobileActionButtons({
+      value: (key) => dataProviderConfiguration[key],
+      configuration: dataProviderConfiguration,
+      placement: "over_image",
+    });
+
+    // Top-level is ButtonContainerView (View)
+    expect(result.type).toBe("ButtonContainerView");
+
+    // Content view contains DataProvider-wrapped buttons
+    const dataProvider = result.elements[0];
+    expect(dataProvider.type).toBe("DataProvider");
+
+    expect(dataProvider).toMatchObject({
+      type: "DataProvider",
+      data: [
+        {
+          func: "identity",
+          args: [],
+          propName: "entry",
+        },
+      ],
+      elements: [expect.objectContaining({ type: "MobileActionButton" })],
+    });
+  });
+
+  it("builds the asset, label container, and label nodes", () => {
     expect(
       Asset({
-        prefix: "mobile_button_1",
-        value,
-        actionIdentifier: "navigation_action",
+        style: { width: 24, height: 24 },
+        testID: "mobile_action_button_1",
       })
     ).toEqual(
       expect.objectContaining({
-        type: "Image",
+        type: "ReactComponent",
+        additionalProps: expect.objectContaining({
+          component: AssetComponent,
+        }),
       })
     );
 
     expect(
       TextLabelsContainer({
-        prefix: "mobile_button_1",
-        value,
         actionIdentifier: "navigation_action",
+        testID: "mobile_action_button_1",
+        style: { color: "rgba(255,255,255,1)" },
       })
     ).toEqual(
       expect.objectContaining({
@@ -117,24 +137,5 @@ describe("mobile action button builders", () => {
         elements: [expect.objectContaining({ type: "Text" })],
       })
     );
-
-    expect(
-      TextLabel({
-        prefix: "mobile_button_1",
-        value,
-        actionIdentifier: "navigation_action",
-      })
-    ).toEqual(
-      expect.objectContaining({
-        type: "Text",
-      })
-    );
-
-    expect(Spacer({ enabled: true })).toEqual({
-      type: "View",
-      style: {
-        flex: 1,
-      },
-    });
   });
 });

package/Components/MasterCell/DefaultComponents/mobile/MobileActionButtons/__tests__/index.test.ts

@@ -48,18 +48,32 @@ describe("MobileActionButtons", () => {
     });
 
     expect(result).toBeTruthy();
-    expect(result.type).toBe("View");
+    expect(result.type).toBe("ButtonContainerView");
     expect(result.style.position).toBe("absolute");
     expect(result.style.top).toBe(0);
     expect(result.style.right).toBe(0);
-    expect(result.elements).toHaveLength(1);
-    expect(result.elements[0].type).toBe("View");
-    expect(result.elements[0].style.flexDirection).toBe("row");
-    expect(result.elements[0].elements[0].type).toBe("PressableView");
 
-    expect(result.elements[0].elements[0].elements).toEqual(
+    // Content view
+    expect(result.additionalProps.contentStyle.flexDirection).toBe("row");
+
+    // First button wrapped in DataProvider
+    const dataProvider = result.elements[0];
+    expect(dataProvider.type).toBe("DataProvider");
+
+    expect(dataProvider.data).toEqual([
+      {
+        func: "identity",
+        args: [],
+        propName: "entry",
+      },
+    ]);
+
+    const button = dataProvider.elements[0];
+    expect(button.type).toBe("MobileActionButton");
+
+    expect(button.elements).toEqual(
       expect.arrayContaining([
-        expect.objectContaining({ type: "Image" }),
+        expect.objectContaining({ type: "ReactComponent" }),
         expect.objectContaining({ type: "View" }),
       ])
     );
@@ -92,7 +106,12 @@ describe("MobileActionButtons", () => {
     });
 
     expect(result?.elements?.[0]?.elements).toHaveLength(1);
-    expect(result?.elements?.[0]?.elements?.[0]?.type).toBe("PressableView");
+
+    expect(result?.elements?.[0]?.type).toBe("DataProvider");
+
+    expect(result?.elements?.[0]?.elements?.[0]?.type).toBe(
+      "MobileActionButton"
+    );
   });
 
   it("renders button 2 when only button 2 is enabled", () => {
@@ -100,6 +119,7 @@ describe("MobileActionButtons", () => {
       ...configuration,
       mobile_button_1_button_enabled: false,
       mobile_button_2_button_enabled: true,
+      mobile_button_2_asset_enabled: true,
       mobile_button_3_button_enabled: false,
     };
 
@@ -112,10 +132,14 @@ describe("MobileActionButtons", () => {
     });
 
     expect(result?.elements?.[0]?.elements).toHaveLength(1);
-    expect(result?.elements?.[0]?.elements?.[0]?.type).toBe("PressableView");
+
+    expect(result?.elements?.[0]?.elements?.[0]?.type).toBe(
+      "MobileActionButton"
+    );
 
     expect(
-      result?.elements?.[0]?.elements?.[0]?.additionalProps?.action?.identifier
+      result?.elements?.[0]?.elements?.[0]?.elements?.[0]?.additionalProps
+        ?.action?.identifier
     ).toBe(configurationWithSingleButton.mobile_button_2_assign_action);
   });
 
@@ -126,6 +150,7 @@ describe("MobileActionButtons", () => {
       mobile_button_2_button_enabled: false,
       mobile_button_3_button_enabled: true,
       mobile_button_3_assign_action: "local_storage_favourites_action",
+      mobile_button_3_asset_enabled: true,
     };
 
     const singleButtonValue = (key) => configurationWithSingleButton[key];
@@ -137,7 +162,10 @@ describe("MobileActionButtons", () => {
     });
 
     expect(result?.elements?.[0]?.elements).toHaveLength(1);
-    expect(result?.elements?.[0]?.elements?.[0]?.type).toBe("PressableView");
+
+    expect(result?.elements?.[0]?.elements?.[0]?.type).toBe(
+      "MobileActionButton"
+    );
 
     expect(
       result?.elements?.[0]?.elements?.[0]?.additionalProps?.action?.identifier
@@ -152,6 +180,7 @@ describe("MobileActionButtons", () => {
       mobile_button_2_button_enabled: false,
       mobile_button_3_button_enabled: true,
       mobile_button_3_assign_action: "action_3",
+      mobile_button_3_asset_enabled: true,
     };
 
     const sparseValue = (key) => configurationWithSparseButtons[key];
@@ -162,21 +191,22 @@ describe("MobileActionButtons", () => {
       placement: "over_image",
     });
 
-    expect(result?.elements?.[0]?.elements).toHaveLength(2);
+    // Content view has 2 DataProvider children (one per enabled button)
+    expect(result?.elements).toHaveLength(2);
 
     expect(
       result?.elements?.[0]?.elements?.[0]?.additionalProps?.action?.identifier
     ).toBe("action_1");
 
     expect(
-      result?.elements?.[0]?.elements?.[1]?.additionalProps?.action?.identifier
+      result?.elements?.[1]?.elements?.[0]?.additionalProps?.action?.identifier
     ).toBe("action_3");
 
     expect(result?.elements?.[0]?.elements?.[0]?.additionalProps?.testID).toBe(
       "mobile_action_button_1"
     );
 
-    expect(result?.elements?.[0]?.elements?.[1]?.additionalProps?.testID).toBe(
+    expect(result?.elements?.[1]?.elements?.[0]?.additionalProps?.testID).toBe(
       "mobile_action_button_2"
     );
   });
@@ -208,7 +238,7 @@ describe("MobileActionButtons", () => {
       placement: "over_image",
     });
 
-    expect(overImageResult?.elements?.[0]?.style).toMatchObject({
+    expect(overImageResult?.additionalProps?.contentStyle).toMatchObject({
       flexDirection: "column",
       alignItems: "center",
       marginTop: 5,
@@ -217,6 +247,97 @@ describe("MobileActionButtons", () => {
       marginLeft: 8,
     });
 
-    expect(overImageResult?.elements?.[0]?.style.alignSelf).toBeUndefined();
+    expect(
+      overImageResult?.additionalProps?.contentStyle?.alignSelf
+    ).toBeUndefined();
+  });
+
+  describe("button content visibility", () => {
+    const makeConfig = (overrides) => ({
+      ...configuration,
+      ...overrides,
+    });
+
+    it("renders only an asset when only asset is enabled", () => {
+      const config = makeConfig({
+        mobile_button_1_asset_enabled: true,
+        mobile_button_1_label_enabled: false,
+      });
+
+      const result = MobileActionButtons({
+        value: (key) => config[key],
+        configuration: config,
+        placement: "over_image",
+      });
+
+      const buttonElements =
+        result?.elements?.[0]?.elements?.[0]?.elements ?? [];
+
+      expect(buttonElements.some((el) => el.type === "ReactComponent")).toBe(
+        true
+      );
+
+      expect(buttonElements.some((el) => el.type === "View")).toBe(false);
+    });
+
+    it("renders only a label container when only label is enabled", () => {
+      const config = makeConfig({
+        mobile_button_1_asset_enabled: false,
+        mobile_button_1_label_enabled: true,
+      });
+
+      const result = MobileActionButtons({
+        value: (key) => config[key],
+        configuration: config,
+        placement: "over_image",
+      });
+
+      const buttonElements =
+        result?.elements?.[0]?.elements?.[0]?.elements ?? [];
+
+      expect(buttonElements.some((el) => el.type === "ReactComponent")).toBe(
+        false
+      );
+
+      expect(buttonElements.some((el) => el.type === "View")).toBe(true);
+    });
+
+    it("renders both asset and label container when both are enabled", () => {
+      const config = makeConfig({
+        mobile_button_1_asset_enabled: true,
+        mobile_button_1_label_enabled: true,
+      });
+
+      const result = MobileActionButtons({
+        value: (key) => config[key],
+        configuration: config,
+        placement: "over_image",
+      });
+
+      const buttonElements =
+        result?.elements?.[0]?.elements?.[0]?.elements ?? [];
+
+      expect(buttonElements.some((el) => el.type === "ReactComponent")).toBe(
+        true
+      );
+
+      expect(buttonElements.some((el) => el.type === "View")).toBe(true);
+    });
+
+    it("omits the button entirely when neither asset nor label is enabled", () => {
+      const config = makeConfig({
+        mobile_button_1_asset_enabled: false,
+        mobile_button_1_label_enabled: false,
+      });
+
+      const result = MobileActionButtons({
+        value: (key) => config[key],
+        configuration: config,
+        placement: "over_image",
+      });
+
+      // Button() returns null so compact filters the DataProvider wrapper
+      expect(result?.elements).toHaveLength(0);
+    });
   });
 });