@applicaster/zapp-react-native-ui-components 15.1.4 → 16.0.0-alpha.1042942411

package/Components/MasterCell/DefaultComponents/__tests__/Button.test.tsx

@@ -0,0 +1,186 @@
+import React from "react";
+import { TouchableOpacity } from "react-native";
+import { render } from "@testing-library/react-native";
+
+import { Button } from "../Button";
+import { masterCellLogger } from "../../logger";
+
+const mockUseActions = jest.fn();
+
+const baseProps = {
+  item: { id: "entry-id" } as any,
+  action: { identifier: "bookmark", type: "plugin" },
+  asset: {
+    type: "Image" as const,
+    src: {
+      active: "active.png",
+      inactive: "inactive.png",
+    },
+    style: {
+      width: 24,
+      height: 24,
+    },
+    props: {
+      testID: "button-image",
+    },
+  },
+  style: {
+    width: 40,
+    height: 40,
+  },
+  testID: "button",
+  accessibilityLabel: "button-label",
+};
+
+jest.mock("@applicaster/zapp-react-native-utils/reactHooks/actions", () => ({
+  useActions: (...args) => mockUseActions(...args),
+}));
+
+jest.mock("@applicaster/zapp-react-native-utils/theme", () => ({
+  useTheme: jest.fn(() => ({
+    use_downscaling_images: false,
+  })),
+}));
+
+jest.mock("../../logger", () => ({
+  masterCellLogger: {
+    warning: jest.fn(),
+    error: jest.fn(),
+  },
+}));
+
+describe("MasterCell Button", () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it("renders the UIKit button with the inactive asset when the item is not selected", () => {
+    mockUseActions.mockReturnValue({
+      state: [],
+    });
+
+    const wrapper = render(<Button {...baseProps} />);
+    const button = wrapper.getByTestId("button");
+    const image = wrapper.getByTestId("button-image");
+
+    expect(button.props).toMatchObject({
+      testID: "button",
+      accessibilityLabel: "button-label",
+      style: { width: 40, height: 40 },
+    });
+
+    expect(wrapper.UNSAFE_getByType(TouchableOpacity).props.id).toBe(
+      "entry-id"
+    );
+
+    expect(image.props.source).toEqual({ uri: "inactive.png" });
+
+    expect(image.props.style).toMatchObject({
+      width: 24,
+      height: 24,
+    });
+  });
+
+  it("renders the active asset when the legacy action context marks the item as selected", () => {
+    mockUseActions.mockReturnValue({
+      state: [],
+      masterCell: {
+        isSelected: jest.fn(() => true),
+      },
+    });
+
+    const wrapper = render(<Button {...baseProps} />);
+
+    expect(wrapper.getByTestId("button-image").props.source).toEqual({
+      uri: "active.png",
+    });
+  });
+
+  it("defaults ButtonAsset to the Image component when asset.type is missing", () => {
+    mockUseActions.mockReturnValue({
+      state: [],
+    });
+
+    const wrapper = render(
+      <Button
+        {...baseProps}
+        asset={{
+          ...baseProps.asset,
+          type: undefined as any,
+        }}
+      />
+    );
+
+    expect(wrapper.getByTestId("button-image").props.source).toEqual({
+      uri: "inactive.png",
+    });
+  });
+
+  it("forwards asset.props to the ButtonAsset component", () => {
+    mockUseActions.mockReturnValue({
+      state: [],
+    });
+
+    const wrapper = render(
+      <Button
+        {...baseProps}
+        asset={{
+          ...baseProps.asset,
+          props: {
+            testID: "button-image",
+            resizeMode: "contain",
+            nativeID: "button-asset",
+          },
+        }}
+      />
+    );
+
+    expect(wrapper.getByTestId("button-image").props).toMatchObject({
+      testID: "button-image",
+      resizeMode: "contain",
+      nativeID: "button-asset",
+    });
+  });
+
+  it("renders the ActionButton when the action context uses the new API", () => {
+    const addListener = jest.fn(() => jest.fn());
+
+    mockUseActions.mockReturnValue({
+      initialEntryState: jest.fn(() => ({
+        asset: "active.png",
+      })),
+      invokeAction: jest.fn(),
+      addListener,
+      isActionAvailable: jest.fn(() => true),
+    });
+
+    const wrapper = render(<Button {...baseProps} />);
+    const button = wrapper.getByTestId("button");
+    const image = wrapper.getByTestId("button-image");
+
+    expect(button.props.accessibilityLabel).toBe("button-label");
+    expect(image.props.source).toEqual({ uri: "inactive.png" });
+    expect(addListener).toHaveBeenCalledWith("entry-id", expect.any(Function));
+
+    expect(wrapper.UNSAFE_getByType(TouchableOpacity).props.id).toBe(
+      "action-button-entry-id"
+    );
+  });
+
+  it("returns null and logs a warning when the action plugin is missing", () => {
+    mockUseActions.mockReturnValue(undefined);
+
+    const wrapper = render(
+      <Button
+        {...baseProps}
+        action={{ identifier: "missing-plugin", type: "plugin" }}
+      />
+    );
+
+    expect(wrapper.toJSON()).toBeNull();
+
+    expect(masterCellLogger.warning).toHaveBeenCalledWith(
+      "You're missing an action plugin(missing-plugin) required by your button.  \n Button can't be displayed"
+    );
+  });
+});

package/Components/MasterCell/DefaultComponents/__tests__/DataProvider.test.tsx

@@ -0,0 +1,141 @@
+import React from "react";
+import { render } from "@testing-library/react-native";
+
+import { defaultComponents } from "../index";
+import { elementMapper } from "../../elementMapper";
+
+const WrapperProbe = jest.fn(({ children }) => <>{children}</>);
+const LeafProbe = jest.fn(() => null);
+
+const components = {
+  ...defaultComponents,
+  View: WrapperProbe,
+  Text: LeafProbe,
+};
+
+const entry = { id: "entry-1" };
+const item = { id: "item-1" };
+
+const renderNode = (node) =>
+  render(
+    <React.Fragment>{elementMapper(components)(node as never)}</React.Fragment>
+  );
+
+describe("DataProvider", () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it("injects resolved runtime props under dataProviderProps into the direct child and its direct children only", () => {
+    renderNode({
+      type: "DataProvider",
+      props: { _dataKey: "entry", entry },
+      elements: [
+        {
+          type: "View",
+          props: {},
+          elements: [
+            {
+              type: "View",
+              props: {},
+              elements: [{ type: "Text", props: {} }],
+            },
+          ],
+        },
+      ],
+    });
+
+    expect(WrapperProbe).toHaveBeenNthCalledWith(
+      1,
+      expect.objectContaining({
+        dataProviderProps: expect.objectContaining({ entry }),
+      }),
+      expect.anything()
+    );
+
+    expect(WrapperProbe).toHaveBeenNthCalledWith(
+      2,
+      expect.objectContaining({
+        dataProviderProps: expect.objectContaining({ entry }),
+      }),
+      expect.anything()
+    );
+
+    expect(LeafProbe).toHaveBeenCalledWith(
+      expect.not.objectContaining({
+        dataProviderProps: expect.anything(),
+      }),
+      expect.anything()
+    );
+  });
+
+  it("derives the namespaced values from the resolved runtime props", () => {
+    renderNode({
+      type: "DataProvider",
+      props: { _dataKey: "item", item },
+      elements: [
+        {
+          type: "View",
+          props: {},
+          elements: [{ type: "View", props: {} }],
+        },
+      ],
+    });
+
+    expect(WrapperProbe).toHaveBeenNthCalledWith(
+      1,
+      expect.objectContaining({
+        dataProviderProps: expect.objectContaining({ item }),
+      }),
+      expect.anything()
+    );
+
+    expect(WrapperProbe).toHaveBeenNthCalledWith(
+      2,
+      expect.objectContaining({
+        dataProviderProps: expect.objectContaining({ item }),
+      }),
+      expect.anything()
+    );
+  });
+
+  it("does not overwrite explicit dataProviderProps on the direct child", () => {
+    const explicitEntry = { id: "explicit" };
+
+    renderNode({
+      type: "DataProvider",
+      props: { _dataKey: "entry", entry },
+      elements: [
+        {
+          type: "View",
+          props: {
+            dataProviderProps: {
+              entry: explicitEntry,
+              source: "child",
+            },
+          },
+          elements: [{ type: "View", props: {} }],
+        },
+      ],
+    });
+
+    expect(WrapperProbe).toHaveBeenNthCalledWith(
+      1,
+      expect.objectContaining({
+        dataProviderProps: expect.objectContaining({
+          entry: explicitEntry,
+          source: "child",
+        }),
+      }),
+      expect.anything()
+    );
+
+    expect(WrapperProbe).toHaveBeenNthCalledWith(
+      2,
+      expect.objectContaining({
+        dataProviderProps: expect.objectContaining({ entry }),
+      }),
+      expect.anything()
+    );
+  });
+});

package/Components/MasterCell/DefaultComponents/__tests__/DynamicBadge.test.tsx

@@ -0,0 +1,156 @@
+import React from "react";
+import { StyleSheet } from "react-native";
+import { act, render } from "@testing-library/react-native";
+import { DynamicBadge } from "../DynamicBadge";
+
+const mockAddListener = jest.fn();
+const mockUsePlayer = jest.fn();
+
+jest.mock(
+  "@applicaster/zapp-react-native-utils/appUtils/playerManager/usePlayer",
+  () => ({
+    usePlayer: (...args) => mockUsePlayer(...args),
+  })
+);
+
+jest.mock("@applicaster/zapp-react-native-utils/theme", () => ({
+  useTheme: jest.fn(() => ({
+    use_downscaling_images: false,
+  })),
+}));
+
+describe("DynamicBadge", () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it("renders through UIKitBadge and maps layout props from style", () => {
+    mockUsePlayer.mockReturnValue(undefined);
+
+    const style = {
+      width: 32,
+      height: 16,
+    };
+
+    const { getByTestId, toJSON } = render(
+      <DynamicBadge
+        cellUUID="player-1"
+        uri="badge.png"
+        style={style}
+        resizeMode="cover"
+        testID="badge"
+        accessibilityLabel="Badge"
+        accessibilityHint="Hint"
+      />
+    );
+
+    const root = getByTestId("badge");
+    const flattenedRootStyle = StyleSheet.flatten(root.props.style);
+    const tree = toJSON() as any;
+
+    expect(flattenedRootStyle).toEqual(
+      expect.objectContaining({
+        width: 32,
+        height: 16,
+      })
+    );
+
+    expect(root.props.accessibilityLabel).toBe("Badge");
+    expect(root.props.accessibilityHint).toBe("Hint");
+
+    expect(tree.props.resizeMode).toBe("cover");
+    expect(tree.props.source).toEqual({ uri: "badge.png" });
+
+    expect(StyleSheet.flatten(tree.props.style)).toEqual({
+      width: 32,
+      height: 16,
+    });
+  });
+
+  it("renders through UIKitBadge and maps layout props including positioning and margins", () => {
+    mockUsePlayer.mockReturnValue(undefined);
+
+    const style = {
+      width: 32,
+      height: 16,
+      position: "absolute" as const,
+      bottom: 0,
+      left: 0,
+      marginTop: 1,
+      marginRight: 2,
+      marginBottom: 3,
+      marginLeft: 4,
+      backgroundColor: "transparent",
+    };
+
+    const { getByTestId, toJSON } = render(
+      <DynamicBadge
+        cellUUID="player-1"
+        uri="badge.png"
+        style={style}
+        resizeMode="cover"
+        testID="badge"
+        accessibilityLabel="Badge"
+        accessibilityHint="Hint"
+      />
+    );
+
+    const root = getByTestId("badge");
+    const flattenedRootStyle = StyleSheet.flatten(root.props.style);
+    const tree = toJSON() as any;
+
+    expect(flattenedRootStyle).toEqual({
+      width: 32,
+      height: 16,
+      position: "absolute",
+      bottom: 0,
+      left: 0,
+      marginTop: 1,
+      marginRight: 2,
+      marginBottom: 3,
+      marginLeft: 4,
+      backgroundColor: "transparent",
+    });
+
+    expect(root.props.accessibilityLabel).toBe("Badge");
+    expect(root.props.accessibilityHint).toBe("Hint");
+
+    expect(tree.props.resizeMode).toBe("cover");
+    expect(tree.props.source).toEqual({ uri: "badge.png" });
+  });
+
+  it("hides the badge while the player is loading and shows it again after close", () => {
+    let listeners;
+
+    mockAddListener.mockImplementation(({ listener }) => {
+      listeners = listener;
+
+      return jest.fn();
+    });
+
+    mockUsePlayer.mockReturnValue({ addListener: mockAddListener });
+
+    const { queryByTestId } = render(
+      <DynamicBadge
+        cellUUID="player-1"
+        uri="badge.png"
+        style={{ width: 32, height: 16, bottom: 0, left: 0 }}
+        testID="badge"
+      />
+    );
+
+    expect(queryByTestId("badge")).not.toBeNull();
+
+    act(() => {
+      listeners.onLoad();
+    });
+
+    expect(queryByTestId("badge")).toBeNull();
+
+    act(() => {
+      listeners.onPlayerClose();
+    });
+
+    expect(queryByTestId("badge")).not.toBeNull();
+  });
+});

package/Components/MasterCell/DefaultComponents/__tests__/__snapshots__/ActionButton.test.tsx.snap

@@ -0,0 +1,60 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`MasterCell ActionButton matches the rendered "action-button" snapshot 1`] = `
+<View
+  accessibilityLabel="action-button-label"
+  accessibilityState={
+    {
+      "busy": undefined,
+      "checked": undefined,
+      "disabled": undefined,
+      "expanded": undefined,
+      "selected": undefined,
+    }
+  }
+  accessibilityValue={
+    {
+      "max": undefined,
+      "min": undefined,
+      "now": undefined,
+      "text": undefined,
+    }
+  }
+  accessible={true}
+  collapsable={false}
+  focusable={true}
+  nativeID="action-button-entry-id"
+  onClick={[Function]}
+  onResponderGrant={[Function]}
+  onResponderMove={[Function]}
+  onResponderRelease={[Function]}
+  onResponderTerminate={[Function]}
+  onResponderTerminationRequest={[Function]}
+  onStartShouldSetResponder={[Function]}
+  style={
+    {
+      "height": 32,
+      "opacity": 1,
+      "width": 32,
+    }
+  }
+  testID="action-button"
+>
+  <Image
+    fadeDuration={0}
+    onError={[Function]}
+    source={
+      {
+        "uri": "inactive.png",
+      }
+    }
+    style={
+      {
+        "height": 32,
+        "width": 32,
+      }
+    }
+    testID="action-button-image"
+  />
+</View>
+`;