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

package/Components/TopCutoffOverlay/__tests__/TopCutoffOverlay.test.tsx

@@ -0,0 +1,201 @@
+import React from "react";
+import { Text } from "react-native";
+import { render } from "@testing-library/react-native";
+
+jest.mock(
+  "@applicaster/zapp-react-native-ui-components/Components/River/useScreenConfiguration",
+  () => ({
+    useScreenConfiguration: jest.fn(),
+  })
+);
+
+jest.mock(
+  "@applicaster/zapp-react-native-ui-components/Components/TopCutoffOverlay/hooks",
+  () => ({
+    useMarginTop: jest.fn(),
+  })
+);
+
+jest.mock("@applicaster/zapp-react-native-utils/theme", () => ({
+  useTheme: jest.fn(),
+}));
+
+import { TopCutoffOverlay } from "../index";
+import { useMarginTop } from "../hooks";
+import { useScreenConfiguration } from "../../River/useScreenConfiguration";
+import { useTheme } from "@applicaster/zapp-react-native-utils/theme";
+
+// Recursively find a View with position: absolute in the JSON tree
+const findOverlayStyle = (node: any): Record<string, any> | null => {
+  if (!node) return null;
+
+  // Style can be a plain object or an array of style objects
+  const styles = Array.isArray(node.props?.style)
+    ? node.props.style
+    : node.props?.style
+      ? [node.props.style]
+      : [];
+
+  const styleObj = styles.find((s: any) => s?.position === "absolute");
+  if (styleObj) return styleObj;
+
+  const children = node.children || [];
+
+  if (Array.isArray(children)) {
+    for (const child of children) {
+      const result = findOverlayStyle(child);
+      if (result) return result;
+    }
+  }
+
+  const propChildren = node.props?.children;
+
+  if (propChildren && Array.isArray(propChildren)) {
+    for (const child of propChildren) {
+      const result = findOverlayStyle(child);
+      if (result) return result;
+    }
+  }
+
+  if (
+    typeof propChildren === "object" &&
+    propChildren !== null &&
+    "type" in propChildren
+  ) {
+    return findOverlayStyle(propChildren);
+  }
+
+  return null;
+};
+
+describe("TopCutoffOverlay", () => {
+  const mockUseMarginTop = useMarginTop as jest.MockedFunction<
+    typeof useMarginTop
+  >;
+
+  const mockUseScreenConfig = useScreenConfiguration as jest.MockedFunction<
+    typeof useScreenConfiguration
+  >;
+
+  const mockUseTheme = useTheme as jest.MockedFunction<typeof useTheme>;
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+    mockUseMarginTop.mockReturnValue(60);
+    mockUseScreenConfig.mockReturnValue({ backgroundColor: "#1a1a1a" });
+    mockUseTheme.mockReturnValue({ app_background_color: "#222222" });
+  });
+
+  it("renders children when applyTopCutoff is false", () => {
+    const { getByText } = render(
+      <TopCutoffOverlay applyTopCutoff={false}>
+        <Text>Child content</Text>
+      </TopCutoffOverlay>
+    );
+
+    expect(getByText("Child content")).toBeTruthy();
+  });
+
+  it("does not render overlay when applyTopCutoff is false", () => {
+    const tree = render(
+      <TopCutoffOverlay applyTopCutoff={false}>
+        <Text>Child content</Text>
+      </TopCutoffOverlay>
+    );
+
+    expect(findOverlayStyle(tree.toJSON())).toBeNull();
+  });
+
+  it("renders overlay when applyTopCutoff is true (default)", () => {
+    const tree = render(
+      <TopCutoffOverlay>
+        <Text>Child content</Text>
+      </TopCutoffOverlay>
+    );
+
+    expect(findOverlayStyle(tree.toJSON())).not.toBeNull();
+  });
+
+  it("renders overlay with correct height from useMarginTop", () => {
+    const tree = render(
+      <TopCutoffOverlay>
+        <Text>Child content</Text>
+      </TopCutoffOverlay>
+    );
+
+    expect(findOverlayStyle(tree.toJSON())?.height).toBe(60);
+  });
+
+  it("uses screenBackgroundColor from useScreenConfiguration when available", () => {
+    mockUseScreenConfig.mockReturnValue({ backgroundColor: "#ff0000" });
+
+    const tree = render(
+      <TopCutoffOverlay>
+        <Text>Child content</Text>
+      </TopCutoffOverlay>
+    );
+
+    expect(findOverlayStyle(tree.toJSON())?.backgroundColor).toBe("#ff0000");
+  });
+
+  it("falls back to themeBackgroundColor when screenBackgroundColor is not available", () => {
+    mockUseScreenConfig.mockReturnValue({ backgroundColor: undefined });
+
+    const tree = render(
+      <TopCutoffOverlay>
+        <Text>Child content</Text>
+      </TopCutoffOverlay>
+    );
+
+    expect(findOverlayStyle(tree.toJSON())?.backgroundColor).toBe("#222222");
+  });
+
+  it("falls back to transparent when neither screenBackgroundColor nor themeBackgroundColor is available", () => {
+    mockUseScreenConfig.mockReturnValue({ backgroundColor: undefined });
+    mockUseTheme.mockReturnValue({});
+
+    const tree = render(
+      <TopCutoffOverlay>
+        <Text>Child content</Text>
+      </TopCutoffOverlay>
+    );
+
+    expect(findOverlayStyle(tree.toJSON())?.backgroundColor).toBe(
+      "transparent"
+    );
+  });
+
+  it("passes targetScreenId to useMarginTop and useScreenConfiguration", () => {
+    render(
+      <TopCutoffOverlay targetScreenId="custom-screen-1">
+        <Text>Child content</Text>
+      </TopCutoffOverlay>
+    );
+
+    expect(mockUseMarginTop).toHaveBeenCalledWith("custom-screen-1");
+    expect(mockUseScreenConfig).toHaveBeenCalledWith("custom-screen-1");
+  });
+
+  it("positions overlay at top with left/right 0", () => {
+    const tree = render(
+      <TopCutoffOverlay>
+        <Text>Child content</Text>
+      </TopCutoffOverlay>
+    );
+
+    const style = findOverlayStyle(tree.toJSON());
+    expect(style?.top).toBe(0);
+    expect(style?.left).toBe(0);
+    expect(style?.right).toBe(0);
+  });
+
+  it("renders children inside the container", () => {
+    const { getByText } = render(
+      <TopCutoffOverlay>
+        <Text>Child content</Text>
+      </TopCutoffOverlay>
+    );
+
+    expect(getByText("Child content")).toBeTruthy();
+  });
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applicaster/zapp-react-native-ui-components",
-  "version": "15.0.0-rc.141",
+  "version": "15.0.0-rc.143",
   "description": "Applicaster Zapp React Native ui components for the Quick Brick App",
   "main": "index.js",
   "types": "index.d.ts",
@@ -28,10 +28,10 @@
   },
   "homepage": "https://github.com/applicaster/quickbrick#readme",
   "dependencies": {
-    "@applicaster/applicaster-types": "15.0.0-rc.141",
-    "@applicaster/zapp-react-native-bridge": "15.0.0-rc.141",
-    "@applicaster/zapp-react-native-redux": "15.0.0-rc.141",
-    "@applicaster/zapp-react-native-utils": "15.0.0-rc.141",
+    "@applicaster/applicaster-types": "15.0.0-rc.143",
+    "@applicaster/zapp-react-native-bridge": "15.0.0-rc.143",
+    "@applicaster/zapp-react-native-redux": "15.0.0-rc.143",
+    "@applicaster/zapp-react-native-utils": "15.0.0-rc.143",
     "fast-json-stable-stringify": "^2.1.0",
     "promise": "^8.3.0",
     "url": "^0.11.0",