@applicaster/zapp-react-native-ui-components 15.1.0-rc.1 → 16.0.0-rc.1

package/Components/MasterCell/DefaultComponents/tv/TvActionButtons/__tests__/renderedTree.test.tsx

@@ -0,0 +1,231 @@
+import React from "react";
+import { Text as RNText, View } from "react-native";
+import { render } 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 { TvActionButtons } from "..";
+
+jest.mock("@applicaster/zapp-react-native-utils/reactHooks/actions", () => ({
+  useActions: jest.fn(),
+}));
+
+jest.mock("@applicaster/zapp-react-native-utils/reactHooks", () => ({
+  useIsScreenActive: jest.fn(() => false),
+}));
+
+jest.mock("@applicaster/zapp-react-native-utils/theme", () => ({
+  useTheme: () => ({}),
+}));
+
+jest.mock("@applicaster/zapp-react-native-utils/localizationUtils", () => ({
+  useIsRTL: jest.fn(() => false),
+  applyRTLStylesIfNeeded: jest.fn((style) => style),
+}));
+
+jest.mock(
+  "@applicaster/zapp-react-native-utils/appUtils/accessibilityManager/hooks",
+  () => ({
+    useAccessibilityManager: jest.fn(() => ({
+      addHeading: jest.fn(),
+    })),
+  })
+);
+
+jest.mock(
+  "@applicaster/zapp-react-native-ui-components/Components/Focusable",
+  () => ({
+    Focusable: ({ children, ...props }) => {
+      const { View: MockView } = require("react-native");
+
+      return (
+        <MockView testID="tv-focusable" {...props}>
+          {typeof children === "function" ? children(false) : children}
+        </MockView>
+      );
+    },
+  })
+);
+
+const mockUseActions = useActions as jest.Mock;
+
+const item = {
+  id: "entry-1",
+} as ZappEntry;
+
+const buildActionContext = (entryState = {}) => ({
+  initialEntryState: jest.fn(() => ({
+    label: {
+      label_1: "Play",
+    },
+    ...entryState,
+  })),
+  invokeAction: jest.fn(),
+  addListener: jest.fn(() => jest.fn()),
+  addListeners: jest.fn(() => jest.fn()),
+});
+
+const tvConfiguration = {
+  tv_buttons_container_buttons_enabled: true,
+  tv_buttons_container_align: "middle",
+  tv_buttons_container_margin_top: 1,
+  tv_buttons_container_margin_right: 2,
+  tv_buttons_container_margin_bottom: 3,
+  tv_buttons_container_margin_left: 4,
+  tv_buttons_container_horizontal_gutter: 10,
+  tv_buttons_container_independent_styles: true,
+  tv_buttons_button_1_button_enabled: true,
+  tv_buttons_button_1_assign_action: "navigation_action",
+  tv_buttons_button_1_background_padding_top: 11,
+  tv_buttons_button_1_background_padding_right: 12,
+  tv_buttons_button_1_background_padding_bottom: 13,
+  tv_buttons_button_1_background_padding_left: 14,
+  tv_buttons_button_1_background_color: "rgba(1,1,1,1)",
+  tv_buttons_button_1_background_border_color: "rgba(2,2,2,1)",
+  tv_buttons_button_1_background_border_thickness: 1,
+  tv_buttons_button_1_background_corner_radius: 8,
+  tv_buttons_button_1_focused_background_color: "rgba(3,3,3,1)",
+  tv_buttons_button_1_focused_background_border_color: "rgba(4,4,4,1)",
+  tv_buttons_button_1_display_mode: "dynamic",
+  tv_buttons_button_1_asset_enabled: true,
+  tv_buttons_button_1_asset_width: 40,
+  tv_buttons_button_1_asset_height: 40,
+  tv_buttons_button_1_asset_margin_top: 0,
+  tv_buttons_button_1_asset_margin_right: 0,
+  tv_buttons_button_1_asset_margin_bottom: 0,
+  tv_buttons_button_1_asset_margin_left: 0,
+  tv_buttons_button_1_asset_alignment: "left",
+  tv_buttons_button_1_label_1_toggle: true,
+  tv_buttons_button_1_label_1_margin_top: 0,
+  tv_buttons_button_1_label_1_margin_right: 0,
+  tv_buttons_button_1_label_1_margin_bottom: 0,
+  tv_buttons_button_1_label_1_margin_left: 0,
+  tv_buttons_button_1_label_1_padding_top: 0,
+  tv_buttons_button_1_label_1_padding_right: 0,
+  tv_buttons_button_1_label_1_padding_bottom: 0,
+  tv_buttons_button_1_label_1_padding_left: 0,
+  tv_buttons_button_1_label_1_text_alignment: "left",
+  tv_buttons_button_1_label_1_text_transform: "default",
+  tv_buttons_button_1_label_1_font_color: "rgba(10,10,10,1)",
+  tv_buttons_button_1_label_1_focused_font_color: "rgba(20,20,20,1)",
+  tv_buttons_button_1_label_1_font_size: 18,
+  tv_buttons_button_1_label_1_line_height: 24,
+  tv_buttons_button_1_label_1_font_family: "Ubuntu-Bold",
+  tv_buttons_button_1_label_1_letter_spacing: -0.2,
+};
+
+const mergeStyle = (style) =>
+  (Array.isArray(style) ? style : [style]).reduce(
+    (acc, part) => ({ ...acc, ...(part || {}) }),
+    {}
+  );
+
+describe("TvActionButtons rendered tree", () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it("preserves the rendered primitive tree when the tv builder is wrapped with DataProvider", () => {
+    mockUseActions.mockImplementation((identifier) => {
+      if (identifier === "") {
+        return {
+          actions: {
+            navigation_action: {
+              module: {
+                context: {
+                  _currentValue: {
+                    isActionAvailable: jest.fn(() => true),
+                  },
+                },
+              },
+            },
+          },
+        };
+      }
+
+      return buildActionContext();
+    });
+
+    const node = configInflater(
+      item,
+      TvActionButtons({
+        value: (key) => tvConfiguration[key],
+        platformValue: (key) => tvConfiguration[key],
+        configuration: tvConfiguration,
+        state: "focused",
+        skipButtons: false,
+      })
+    );
+
+    const { UNSAFE_getAllByType, getByText } = render(
+      <React.Fragment>
+        {elementMapper(defaultComponents)(node as never)}
+      </React.Fragment>
+    );
+
+    const views = UNSAFE_getAllByType(View);
+    const text = getByText("Play");
+
+    const labelContainer = views.find(
+      (view) => mergeStyle(view.props.style).flexDirection === "column"
+    );
+
+    const buttonView = views.find((view) => {
+      const style = mergeStyle(view.props.style);
+
+      return style.display === "flex" && style.alignItems === "center";
+    });
+
+    const outerContainer = views.find((view) => {
+      const style = mergeStyle(view.props.style);
+
+      return style.flexDirection === "row" && style.justifyContent === "center";
+    });
+
+    expect(mergeStyle(outerContainer?.props.style)).toEqual(
+      expect.objectContaining({
+        flexDirection: "row",
+        justifyContent: "center",
+        marginTop: 1,
+        marginRight: 2,
+        marginBottom: 3,
+        marginLeft: 4,
+      })
+    );
+
+    expect(mergeStyle(buttonView?.props.style)).toEqual(
+      expect.objectContaining({
+        display: "flex",
+        alignItems: "center",
+        paddingTop: 11,
+        paddingRight: 12,
+        paddingBottom: 13,
+        paddingLeft: 14,
+        backgroundColor: "rgba(1,1,1,1)",
+        borderColor: "rgba(2,2,2,1)",
+        borderWidth: 1,
+        borderRadius: 8,
+      })
+    );
+
+    expect(mergeStyle(labelContainer?.props.style)).toEqual(
+      expect.objectContaining({
+        flexDirection: "column",
+      })
+    );
+
+    expect(UNSAFE_getAllByType(RNText)).toHaveLength(1);
+
+    expect(mergeStyle(text.props.style)).toEqual(
+      expect.objectContaining({
+        fontSize: 18,
+        lineHeight: 24,
+        letterSpacing: -0.2,
+        fontFamily: "Ubuntu-Bold",
+        color: "rgba(10,10,10,1)",
+      })
+    );
+  });
+});

package/Components/MasterCell/DefaultComponents/tv/TvActionButtons/index.ts

@@ -1,12 +1,6 @@
-import { times } from "@applicaster/zapp-react-native-utils/utils";
-import { toNumberWithDefaultZero } from "@applicaster/zapp-react-native-utils/numberUtils";
-
 import { Button } from "./Button";
-import {
-  getButtonsCount,
-  getPluginIdentifier,
-  mapSelfAlignment,
-} from "./utils";
+import { memoizedGetPluginIdentifier } from "./utils";
+import { buildActionButtonsModel } from "../../ActionButtonsCore/model";
 
 import { compact } from "@applicaster/zapp-react-native-utils/cellUtils";
 import { PREFIX, BUTTON_PREFIX } from "./const";
@@ -16,11 +10,9 @@ export {
   insertButtonsBetweenLabelContainers,
 } from "./utils";
 
-const buttonId = (index: number) => `${BUTTON_PREFIX}_${index}`;
-
 type Props = {
-  value: Function;
-  platformValue: Function;
+  value: (key: string) => unknown;
+  platformValue: (key: string) => unknown;
   configuration: Record<string, unknown>;
   state: string;
   skipButtons: boolean;
@@ -33,58 +25,65 @@ export const TvActionButtons = ({
   state,
   skipButtons,
 }: Props) => {
-  if (skipButtons || !value(`${PREFIX}_container_buttons_enabled`)) {
+  if (skipButtons) {
     return null;
   }
 
-  const buttonsCount = getButtonsCount(configuration, PREFIX);
+  const model = buildActionButtonsModel({
+    configuration,
+    value,
+    containerPrefix: `${PREFIX}_container`,
+    buttonPrefix: BUTTON_PREFIX,
+  });
 
-  if (buttonsCount <= 0) {
+  if (!model) {
     return null;
   }
 
-  const independentStyles = value(`${PREFIX}_container_independent_styles`);
-
   return {
     type: "ButtonContainerView",
     style: {
       flexDirection: "row",
-
-      justifyContent: mapSelfAlignment(value(`${PREFIX}_container_align`)),
-
-      marginTop: toNumberWithDefaultZero(
-        value(`${PREFIX}_container_margin_top`)
-      ),
-      marginRight: toNumberWithDefaultZero(
-        value(`${PREFIX}_container_margin_right`)
-      ),
-      marginBottom: toNumberWithDefaultZero(
-        value(`${PREFIX}_container_margin_bottom`)
-      ),
-      marginLeft: toNumberWithDefaultZero(
-        value(`${PREFIX}_container_margin_left`)
-      ),
+      justifyContent: model.container.horizontalAlign,
+      marginTop: model.container.margins.top,
+      marginRight: model.container.margins.right,
+      marginBottom: model.container.margins.bottom,
+      marginLeft: model.container.margins.left,
     },
     additionalProps: {
-      horizontalGutter: toNumberWithDefaultZero(
-        value(`${PREFIX}_container_horizontal_gutter`)
-      ),
+      horizontalGutter: model.container.horizontalGutter,
       state,
-      buttonsCount,
+      buttonsCount: model.buttonsCount,
     },
     elements: compact(
-      times((index) => {
-        const prefixSpecificButton = buttonId(index + 1);
-
-        return Button({
-          prefix: independentStyles ? prefixSpecificButton : buttonId(1),
-          value,
-          platformValue,
-          pluginIdentifier: getPluginIdentifier(configuration, PREFIX, index),
-          suffixId: prefixSpecificButton,
-          preferredFocus: index === 0,
-        });
-      }, buttonsCount)
+      model.buttons.map(
+        ({ slot, renderIndex, specificPrefix, stylePrefix }) => {
+          return {
+            type: "DataProvider",
+            data: [
+              {
+                func: "identity",
+                args: [],
+                propName: "entry",
+              },
+            ],
+            elements: [
+              Button({
+                prefix: stylePrefix,
+                value,
+                platformValue,
+                pluginIdentifier: memoizedGetPluginIdentifier(
+                  configuration,
+                  PREFIX,
+                  slot
+                ) as string,
+                suffixId: specificPrefix,
+                preferredFocus: renderIndex === 0,
+              }),
+            ],
+          };
+        }
+      )
     ),
   };
 };

package/Components/MasterCell/DefaultComponents/tv/TvActionButtons/utils/__tests__/getPluginIdentifier.test.ts

@@ -1,53 +1,123 @@
-import { getPluginIdentifier } from "..";
+import { getPluginIdentifier, memoizedGetPluginIdentifier } from "..";
 
 describe("getPluginIdentifier", () => {
   const prefix = "tv_buttons";
 
-  it("get first plugin identifier", () => {
+  beforeAll(() => {
+    memoizedGetPluginIdentifier.clear();
+  });
+
+  it("returns the requested slot action identifier", () => {
+    expect.assertions(2);
+
     const configuration = {
-      tv_buttons_button_1_other: "value",
       tv_buttons_button_1_assign_action:
         "tv_buttons_button_1_assign_action_value",
-      tv_buttons_button_2_assign_action:
-        "tv_buttons_button_2_assign_action_value",
+      tv_buttons_button_3_assign_action:
+        "tv_buttons_button_3_assign_action_value",
     };
 
-    const index = 0;
+    const slot = 3;
+    const result = getPluginIdentifier(configuration, prefix, slot);
 
-    const result = getPluginIdentifier(configuration, prefix, index);
+    const memoizedResult = memoizedGetPluginIdentifier(
+      configuration,
+      prefix,
+      slot
+    );
 
-    expect(result).toEqual(configuration.tv_buttons_button_1_assign_action);
+    expect(result).toEqual(configuration.tv_buttons_button_3_assign_action);
+    expect(memoizedResult).toEqual(result);
   });
 
-  it("get second plugin identifier", () => {
+  it("returns undefined for a disabled or missing slot", () => {
+    expect.assertions(2);
+
     const configuration = {
-      tv_buttons_button_1_other: "value_1",
-      tv_buttons_button_1_assign_action:
-        "tv_buttons_button_1_assign_action_value",
-      tv_buttons_button_2_other: "value_2",
-      tv_buttons_button_2_assign_action:
-        "tv_buttons_button_2_assign_action_value",
+      tv_buttons_button_1_assign_action: "tv_buttons_button_1_assign_action",
     };
 
-    const index = 1;
+    const slot = 2;
+    const result = getPluginIdentifier(configuration, prefix, slot);
 
-    const result = getPluginIdentifier(configuration, prefix, index);
+    const memoizedResult = memoizedGetPluginIdentifier(
+      configuration,
+      prefix,
+      slot
+    );
 
-    expect(result).toEqual(configuration.tv_buttons_button_2_assign_action);
+    expect(result).toBeUndefined();
+    expect(memoizedResult).toEqual(result);
+  });
+
+  it("returns undefined for empty string values", () => {
+    expect.assertions(2);
+
+    const configuration = {
+      tv_buttons_button_2_assign_action: "",
+    };
+
+    const slot = 2;
+
+    const result = getPluginIdentifier(configuration, prefix, slot);
+
+    const memoizedResult = memoizedGetPluginIdentifier(
+      configuration,
+      prefix,
+      slot
+    );
+
+    expect(result).toBeUndefined();
+    expect(memoizedResult).toBeUndefined();
   });
 
-  it("get undefined if no assign_actions at all", () => {
-    const configuration = {};
+  it("returns undefined for negative slots", () => {
+    expect.assertions(2);
+
+    const configuration = {
+      tv_buttons_button_1_assign_action: "a",
+      tv_buttons_button_2_assign_action: "b",
+    };
 
-    const index = 0;
+    const slot = -1;
+    const result = getPluginIdentifier(configuration, prefix, slot);
 
-    const result = getPluginIdentifier(configuration, prefix, index);
+    const memoizedResult = memoizedGetPluginIdentifier(
+      configuration,
+      prefix,
+      slot
+    );
 
     expect(result).toBeUndefined();
+    expect(memoizedResult).toBeUndefined();
+  });
+
+  it("handles non-string values by returning the configured slot value", () => {
+    expect.assertions(2);
+
+    const configuration = {
+      tv_buttons_button_2_assign_action: true,
+    };
+
+    const slot = 2;
+    const result = getPluginIdentifier(configuration, prefix, slot);
+
+    const memoizedResult = memoizedGetPluginIdentifier(
+      configuration,
+      prefix,
+      slot
+    );
+
+    expect(result).toBe(true);
+    expect(memoizedResult).toBe(true);
   });
 });
 
-describe("getPluginIdentifier - when configuration has same values for different keys", () => {
+describe("getPluginIdentifier - when configuration has duplicate values", () => {
+  beforeAll(() => {
+    memoizedGetPluginIdentifier.clear();
+  });
+
   const prefix = "tv_buttons";
 
   const configuration = {
@@ -55,19 +125,35 @@ describe("getPluginIdentifier - when configuration has same values for different
     tv_buttons_button_2_assign_action: "navigation_action",
   };
 
-  it("get first plugin identifier", () => {
-    const index = 0;
+  it("returns the requested slot even when values are identical", () => {
+    expect.assertions(2);
 
-    const result = getPluginIdentifier(configuration, prefix, index);
+    const slot = 1;
+    const result = getPluginIdentifier(configuration, prefix, slot);
+
+    const memoizedResult = memoizedGetPluginIdentifier(
+      configuration,
+      prefix,
+      slot
+    );
 
     expect(result).toEqual(configuration.tv_buttons_button_1_assign_action);
+    expect(memoizedResult).toEqual(result);
   });
 
-  it("get second plugin identifier", () => {
-    const index = 1;
+  it("returns the second slot when values are identical", () => {
+    expect.assertions(2);
+
+    const slot = 2;
+    const result = getPluginIdentifier(configuration, prefix, slot);
 
-    const result = getPluginIdentifier(configuration, prefix, index);
+    const memoizedResult = memoizedGetPluginIdentifier(
+      configuration,
+      prefix,
+      slot
+    );
 
     expect(result).toEqual(configuration.tv_buttons_button_2_assign_action);
+    expect(memoizedResult).toEqual(result);
   });
 });