@applicaster/zapp-react-native-ui-components 15.0.0-alpha.4153840309 → 15.0.0-alpha.4200413542

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

@@ -1,9 +1,15 @@
-import { getPluginIdentifier } from "..";
+import { getPluginIdentifier, memoizedGetPluginIdentifier } from "..";
 
 describe("getPluginIdentifier", () => {
   const prefix = "tv_buttons";
 
-  it("get first plugin identifier", () => {
+  beforeAll(() => {
+    memoizedGetPluginIdentifier.clear();
+  });
+
+  it("returns the first valid plugin identifier", () => {
+    expect.assertions(2);
+
     const configuration = {
       tv_buttons_button_1_other: "value",
       tv_buttons_button_1_assign_action:
@@ -13,13 +19,21 @@ describe("getPluginIdentifier", () => {
     };
 
     const index = 0;
-
     const result = getPluginIdentifier(configuration, prefix, index);
 
+    const memoizedResult = memoizedGetPluginIdentifier(
+      configuration,
+      prefix,
+      index
+    );
+
     expect(result).toEqual(configuration.tv_buttons_button_1_assign_action);
+    expect(memoizedResult).toEqual(result);
   });
 
-  it("get second plugin identifier", () => {
+  it("returns the second valid plugin identifier", () => {
+    expect.assertions(2);
+
     const configuration = {
       tv_buttons_button_1_other: "value_1",
       tv_buttons_button_1_assign_action:
@@ -30,24 +44,216 @@ describe("getPluginIdentifier", () => {
     };
 
     const index = 1;
-
     const result = getPluginIdentifier(configuration, prefix, index);
 
+    const memoizedResult = memoizedGetPluginIdentifier(
+      configuration,
+      prefix,
+      index
+    );
+
     expect(result).toEqual(configuration.tv_buttons_button_2_assign_action);
+    expect(memoizedResult).toEqual(result);
   });
 
-  it("get undefined if no assign_actions at all", () => {
+  it("returns undefined when there are no assign_action keys", () => {
+    expect.assertions(2);
+
     const configuration = {};
+    const index = 0;
+
+    const result = getPluginIdentifier(configuration, prefix, index);
+
+    const memoizedResult = memoizedGetPluginIdentifier(
+      configuration,
+      prefix,
+      index
+    );
+
+    expect(result).toBeUndefined();
+    expect(memoizedResult).toBeUndefined();
+  });
+
+  it("skips undefined values and returns the correct plugin identifier", () => {
+    expect.assertions(2);
+
+    const configuration = {
+      tv_buttons_button_1_assign_action: "tv_buttons_button_1_assign_action",
+      tv_buttons_button_2_assign_action: undefined,
+      tv_buttons_button_3_assign_action: "tv_buttons_button_3_assign_action",
+    };
+
+    const index = 1;
+    const result = getPluginIdentifier(configuration, prefix, index);
+
+    const memoizedResult = memoizedGetPluginIdentifier(
+      configuration,
+      prefix,
+      index
+    );
+
+    expect(result).toEqual(configuration.tv_buttons_button_3_assign_action);
+    expect(memoizedResult).toEqual(result);
+  });
+
+  it("handles missing intermediate keys and returns the correct plugin identifier", () => {
+    expect.assertions(2);
+
+    const configuration = {
+      tv_buttons_button_1_assign_action: "tv_buttons_button_1_assign_action",
+      tv_buttons_button_3_assign_action: "tv_buttons_button_3_assign_action",
+    };
+
+    const index = 1;
+    const result = getPluginIdentifier(configuration, prefix, index);
+
+    const memoizedResult = memoizedGetPluginIdentifier(
+      configuration,
+      prefix,
+      index
+    );
+
+    expect(result).toEqual(configuration.tv_buttons_button_3_assign_action);
+    expect(memoizedResult).toEqual(result);
+  });
+
+  it("skips empty string values and returns the first non-empty assign_action", () => {
+    expect.assertions(2);
+
+    const configuration = {
+      tv_buttons_button_1_assign_action: "",
+      tv_buttons_button_2_assign_action: "tv_buttons_button_2_assign_action",
+    };
 
     const index = 0;
+    const result = getPluginIdentifier(configuration, prefix, index);
+
+    const memoizedResult = memoizedGetPluginIdentifier(
+      configuration,
+      prefix,
+      index
+    );
+
+    expect(result).toEqual(configuration.tv_buttons_button_2_assign_action);
+    expect(memoizedResult).toEqual(result);
+  });
+
+  it("returns undefined for negative index", () => {
+    expect.assertions(2);
+
+    const configuration = {
+      tv_buttons_button_1_assign_action: "a",
+      tv_buttons_button_2_assign_action: "b",
+    };
 
+    const index = -1;
     const result = getPluginIdentifier(configuration, prefix, index);
 
+    const memoizedResult = memoizedGetPluginIdentifier(
+      configuration,
+      prefix,
+      index
+    );
+
     expect(result).toBeUndefined();
+    expect(memoizedResult).toBeUndefined();
+  });
+
+  it("returns undefined for out-of-bounds index", () => {
+    expect.assertions(2);
+
+    const configuration = {
+      tv_buttons_button_1_assign_action: "a",
+      tv_buttons_button_2_assign_action: "b",
+    };
+
+    const index = 5;
+    const result = getPluginIdentifier(configuration, prefix, index);
+
+    const memoizedResult = memoizedGetPluginIdentifier(
+      configuration,
+      prefix,
+      index
+    );
+
+    expect(result).toBeUndefined();
+    expect(memoizedResult).toBeUndefined();
+  });
+
+  it("ignores keys with wrong prefix or format", () => {
+    expect.assertions(2);
+
+    const configuration = {
+      tv_buttons_button_1_assign_action: "a",
+      tv_buttons_wrongprefix_2_assign_action: "b",
+      tv_buttons_button_x_assign_action: "c",
+    };
+
+    const index = 1;
+    const result = getPluginIdentifier(configuration, prefix, index);
+
+    const memoizedResult = memoizedGetPluginIdentifier(
+      configuration,
+      prefix,
+      index
+    );
+
+    expect(result).toBeUndefined();
+    expect(memoizedResult).toBeUndefined();
+  });
+
+  it("returns undefined if all assign_actions are null or empty", () => {
+    expect.assertions(2);
+
+    const configuration = {
+      tv_buttons_button_1_assign_action: null,
+      tv_buttons_button_2_assign_action: undefined,
+      tv_buttons_button_3_assign_action: "",
+    };
+
+    const index = 0;
+    const result = getPluginIdentifier(configuration, prefix, index);
+
+    const memoizedResult = memoizedGetPluginIdentifier(
+      configuration,
+      prefix,
+      index
+    );
+
+    expect(result).toBeUndefined();
+    expect(memoizedResult).toBeUndefined();
+  });
+
+  it("handles non-string values correctly", () => {
+    expect.assertions(6);
+
+    const configuration = {
+      tv_buttons_button_1_assign_action: 123,
+      tv_buttons_button_2_assign_action: true,
+      tv_buttons_button_3_assign_action: { nested: "value" },
+    };
+
+    expect(getPluginIdentifier(configuration, prefix, 0)).toEqual(123);
+    expect(getPluginIdentifier(configuration, prefix, 1)).toEqual(true);
+
+    expect(getPluginIdentifier(configuration, prefix, 2)).toEqual({
+      nested: "value",
+    });
+
+    expect(memoizedGetPluginIdentifier(configuration, prefix, 0)).toEqual(123);
+    expect(memoizedGetPluginIdentifier(configuration, prefix, 1)).toEqual(true);
+
+    expect(memoizedGetPluginIdentifier(configuration, prefix, 2)).toEqual({
+      nested: "value",
+    });
   });
 });
 
-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 +261,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 first plugin identifier when values are identical", () => {
+    expect.assertions(2);
 
+    const index = 0;
     const result = getPluginIdentifier(configuration, prefix, index);
 
+    const memoizedResult = memoizedGetPluginIdentifier(
+      configuration,
+      prefix,
+      index
+    );
+
     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 plugin identifier when values are identical", () => {
+    expect.assertions(2);
 
+    const index = 1;
     const result = getPluginIdentifier(configuration, prefix, index);
 
+    const memoizedResult = memoizedGetPluginIdentifier(
+      configuration,
+      prefix,
+      index
+    );
+
     expect(result).toEqual(configuration.tv_buttons_button_2_assign_action);
+    expect(memoizedResult).toEqual(result);
   });
 });

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

@@ -1,7 +1,7 @@
 import * as R from "ramda";
+import memoizee from "memoizee";
 
 import { isWeb } from "@applicaster/zapp-react-native-utils/reactUtils";
-import { isNotNil } from "@applicaster/zapp-react-native-utils/reactUtils/helpers";
 
 export const getButtonsCount = (
   configuration: Record<string, unknown>,
@@ -21,23 +21,27 @@ export const getPluginIdentifier = (
   configuration: Record<string, unknown>,
   prefix: string,
   index: number
-): string => {
-  const match = `${prefix}_button_\\d_assign_action`;
-  const re = new RegExp(match);
-
-  const rejectNils = R.compose(R.path([index]), R.filter(isNotNil));
-
-  return rejectNils(
-    R.toPairs(configuration)
-      .filter(([key]) => R.startsWith(`${prefix}_button`, key))
-      .map(([key, value]) => {
-        const matched = key.match(re);
+): string | undefined => {
+  const re = new RegExp(`${prefix}_button_\\d_assign_action`);
+  let count = 0;
+
+  for (const [key, value] of Object.entries(configuration)) {
+    if (
+      key.startsWith(`${prefix}_button`) &&
+      re.test(key) &&
+      value != null &&
+      value !== ""
+    ) {
+      if (count === index) return value as string;
+      count++;
+    }
+  }
 
-        return matched ? value : undefined;
-      })
-  );
+  return undefined;
 };
 
+export const memoizedGetPluginIdentifier = memoizee(getPluginIdentifier);
+
 type Label = {
   name: string;
 };

package/Components/MasterCell/hoc/__tests__/withAsyncRender.test.tsx

@@ -0,0 +1,219 @@
+import React from "react";
+import { render } from "@testing-library/react-native";
+import { Text, View } from "react-native";
+import { withAsyncRenderHOC } from "../withAsyncRender";
+
+describe("withAsyncRenderHOC", () => {
+  // Test component that requires onAsyncRender
+  const TestComponent = ({
+    onAsyncRender,
+    text,
+  }: {
+    onAsyncRender: () => void;
+    text?: string;
+  }) => {
+    React.useEffect(() => {
+      onAsyncRender();
+    }, [onAsyncRender]);
+
+    return (
+      <View>
+        <Text>{text || "Test"}</Text>
+      </View>
+    );
+  };
+
+  it("should wrap component and provide onAsyncRender callback", () => {
+    const WrappedComponent = withAsyncRenderHOC(TestComponent);
+
+    const wrapper = render(<WrappedComponent text="Hello" />);
+
+    expect(wrapper.toJSON()).not.toBeNull();
+    expect(wrapper.getByText("Hello")).toBeDefined();
+  });
+
+  it("should call emitAsyncElementRegistrate on mount", () => {
+    const mockRegistrate = jest.fn();
+    const WrappedComponent = withAsyncRenderHOC(TestComponent);
+
+    render(<WrappedComponent emitAsyncElementRegistrate={mockRegistrate} />);
+
+    expect(mockRegistrate).toHaveBeenCalledTimes(1);
+  });
+
+  it("should call emitAsyncElementLayout when onAsyncRender is called", () => {
+    const mockLayout = jest.fn();
+
+    const ComponentWithAsyncCall = ({
+      onAsyncRender,
+    }: {
+      onAsyncRender: () => void;
+    }) => {
+      return (
+        <View onLayout={onAsyncRender}>
+          <Text>Async Component</Text>
+        </View>
+      );
+    };
+
+    const WrappedComponent = withAsyncRenderHOC(ComponentWithAsyncCall);
+
+    const wrapper = render(
+      <WrappedComponent emitAsyncElementLayout={mockLayout} />
+    );
+
+    // Trigger onLayout
+    const view = wrapper.UNSAFE_getByType(View);
+    view.props.onLayout();
+
+    expect(mockLayout).toHaveBeenCalled();
+  });
+
+  it("should return unsubscribe function from emitAsyncElementRegistrate", () => {
+    const mockUnsubscribe = jest.fn();
+    const mockRegistrate = jest.fn(() => mockUnsubscribe);
+    const WrappedComponent = withAsyncRenderHOC(TestComponent);
+
+    const { unmount } = render(
+      <WrappedComponent emitAsyncElementRegistrate={mockRegistrate} />
+    );
+
+    expect(mockRegistrate).toHaveBeenCalledTimes(1);
+
+    // Unmount should trigger cleanup
+    unmount();
+
+    expect(mockUnsubscribe).toHaveBeenCalled();
+  });
+
+  it("should work without emitAsyncElementRegistrate prop", () => {
+    const WrappedComponent = withAsyncRenderHOC(TestComponent);
+
+    const wrapper = render(<WrappedComponent text="No Registration" />);
+
+    expect(wrapper.toJSON()).not.toBeNull();
+    expect(wrapper.getByText("No Registration")).toBeDefined();
+  });
+
+  it("should work without emitAsyncElementLayout prop", () => {
+    const ComponentWithLayout = ({
+      onAsyncRender,
+    }: {
+      onAsyncRender: () => void;
+    }) => {
+      return (
+        <View onLayout={onAsyncRender}>
+          <Text>Test Layout</Text>
+        </View>
+      );
+    };
+
+    const WrappedComponent = withAsyncRenderHOC(ComponentWithLayout);
+
+    const wrapper = render(<WrappedComponent />);
+
+    // Should not throw when calling onLayout without emitAsyncElementLayout
+    const view = wrapper.UNSAFE_getByType(View);
+    expect(() => view.props.onLayout()).not.toThrow();
+  });
+
+  it("should pass through all other props to wrapped component", () => {
+    const ComponentWithProps = ({
+      customProp,
+      anotherProp,
+    }: {
+      onAsyncRender: () => void;
+      customProp: string;
+      anotherProp: number;
+    }) => {
+      return (
+        <View>
+          <Text>{customProp}</Text>
+          <Text>{anotherProp}</Text>
+        </View>
+      );
+    };
+
+    const WrappedComponent = withAsyncRenderHOC(ComponentWithProps);
+
+    const wrapper = render(
+      <WrappedComponent customProp="custom value" anotherProp={42} />
+    );
+
+    expect(wrapper.getByText("custom value")).toBeDefined();
+    expect(wrapper.getByText("42")).toBeDefined();
+  });
+
+  it("should call emitAsyncElementLayout multiple times if onAsyncRender is called multiple times", () => {
+    const mockLayout = jest.fn();
+
+    const ComponentWithMultipleCalls = ({
+      onAsyncRender,
+    }: {
+      onAsyncRender: () => void;
+    }) => {
+      return (
+        <View>
+          <View onLayout={onAsyncRender} testID="view1">
+            <Text>First</Text>
+          </View>
+          <View onLayout={onAsyncRender} testID="view2">
+            <Text>Second</Text>
+          </View>
+        </View>
+      );
+    };
+
+    const WrappedComponent = withAsyncRenderHOC(ComponentWithMultipleCalls);
+
+    const wrapper = render(
+      <WrappedComponent emitAsyncElementLayout={mockLayout} />
+    );
+
+    // Trigger both onLayout callbacks
+    const view1 = wrapper.getByTestId("view1");
+    const view2 = wrapper.getByTestId("view2");
+
+    view1.props.onLayout();
+    view2.props.onLayout();
+
+    expect(mockLayout).toHaveBeenCalledTimes(2);
+  });
+
+  it("should handle components that use onAsyncRender in effects", () => {
+    const mockLayout = jest.fn();
+
+    const ComponentWithEffect = ({
+      onAsyncRender,
+    }: {
+      onAsyncRender: () => void;
+    }) => {
+      React.useEffect(() => {
+        // Simulate async operation completing
+        const timer = setTimeout(() => {
+          onAsyncRender();
+        }, 0);
+
+        return () => clearTimeout(timer);
+      }, [onAsyncRender]);
+
+      return (
+        <View>
+          <Text>Effect Component</Text>
+        </View>
+      );
+    };
+
+    const WrappedComponent = withAsyncRenderHOC(ComponentWithEffect);
+
+    render(<WrappedComponent emitAsyncElementLayout={mockLayout} />);
+
+    // The effect should have been triggered
+    return new Promise((resolve) => {
+      setTimeout(() => {
+        expect(mockLayout).toHaveBeenCalled();
+        resolve(true);
+      }, 10);
+    });
+  });
+});

package/Components/MasterCell/hoc/withAsyncRender.tsx

@@ -6,12 +6,12 @@ type withAsyncRenderHOCProps = {
   emitAsyncElementLayout?: () => void;
 };
 
-type withAsyncRenderHOCT = (
-  Component: React.ComponentType<{ onAsyncRender: () => void }>
-) => React.FC<withAsyncRenderHOCProps>;
-
-export const withAsyncRenderHOC: withAsyncRenderHOCT = (Component) => {
-  const WithAsyncRender = (props: withAsyncRenderHOCProps) => {
+export const withAsyncRenderHOC = <P extends { onAsyncRender: () => void }>(
+  Component: React.ComponentType<P>
+): React.FC<Omit<P, "onAsyncRender"> & withAsyncRenderHOCProps> => {
+  const WithAsyncRender = (
+    props: Omit<P, "onAsyncRender"> & withAsyncRenderHOCProps
+  ) => {
     const { emitAsyncElementRegistrate = noop, emitAsyncElementLayout = noop } =
       props;
 
@@ -27,7 +27,9 @@ export const withAsyncRenderHOC: withAsyncRenderHOCT = (Component) => {
       }
     }, [emitAsyncElementLayout]);
 
-    return <Component {...props} onAsyncRender={onAsyncRender} />;
+    return (
+      <Component {...(props as unknown as P)} onAsyncRender={onAsyncRender} />
+    );
   };
 
   return WithAsyncRender;

package/Components/MasterCell/utils/__tests__/resolveColor.test.js

@@ -32,14 +32,16 @@ describe("resolveColor", () => {
       color: "invalid_path",
     };
 
-    expect(resolveColor(entry, style)).toEqual(style);
+    expect(resolveColor(entry, style)).toEqual({
+      color: undefined,
+    });
 
     expect(loggerSpy).toHaveBeenCalledWith(
       expect.objectContaining({
         message: "Cannot resolve property invalid_path from the entry.",
         data: {
+          colorFromProp: "invalid_path",
           configurationValue: "invalid_path",
-          entry,
         },
       })
     );
@@ -102,7 +104,9 @@ describe("resolveColor", () => {
       color: "not.exist.path",
     };
 
-    expect(resolveColor(entry, style)).toEqual(style);
+    expect(resolveColor(entry, style)).toEqual({
+      color: undefined,
+    });
   });
 
   it("not modify style with empty path", () => {
@@ -112,4 +116,79 @@ describe("resolveColor", () => {
 
     expect(resolveColor(entry, style)).toEqual(style);
   });
+
+  describe("memoization", () => {
+    beforeEach(() => {
+      // Clear memoization cache before each test
+      resolveColor.clear && resolveColor.clear();
+    });
+
+    it("hits cache with same entry and style references", () => {
+      const style = { color: "extensions.color" };
+
+      const result1 = resolveColor(entry, style);
+      const result2 = resolveColor(entry, style);
+
+      expect(result1).toBe(result2); // Same object reference
+    });
+
+    it("hits cache with new references but equal entry/style values", () => {
+      const entryClone = {
+        extensions: {
+          color: "red",
+          green_color: "green",
+        },
+      };
+
+      const style = { color: "extensions.color" };
+      const styleClone = { color: "extensions.color" };
+
+      const result1 = resolveColor(entry, style);
+      const result2 = resolveColor(entryClone, styleClone);
+
+      expect(result1).toBe(result2);
+    });
+
+    it("misses cache when entry is new object", () => {
+      const entry2 = { extensions: { color: "blue" } }; // Same values, different object
+      const style = { color: "extensions.color" };
+
+      const result1 = resolveColor(entry, style);
+      const result2 = resolveColor(entry2, style);
+
+      expect(result1).not.toBe(result2); // Different object references
+    });
+
+    it("misses cache when entry property changes", () => {
+      const myEntry = {
+        extensions: {
+          color: "red",
+          green_color: "green",
+        },
+      };
+
+      const style = { color: "extensions.color" };
+
+      const result1 = resolveColor(myEntry, style);
+
+      myEntry.extensions.color = "blue"; // Change property
+      const result2 = resolveColor(myEntry, style);
+
+      expect(result1).toEqual({ color: "red" });
+      expect(result2).toEqual({ color: "blue" });
+      expect(result1).not.toBe(result2);
+    });
+
+    it("misses cache when style changes", () => {
+      const style1 = { color: "extensions.color" };
+      const style2 = { backgroundColor: "extensions.color" };
+
+      const result1 = resolveColor(entry, style1);
+      const result2 = resolveColor(entry, style2);
+
+      expect(result1).toEqual({ color: "red" });
+      expect(result2).toEqual({ backgroundColor: "red" });
+      expect(result1).not.toBe(result2);
+    });
+  });
 });