@applicaster/zapp-react-native-utils 15.0.0-rc.12 → 15.0.0-rc.120

package/screenPickerUtils/__tests__/index.test.ts

@@ -0,0 +1,333 @@
+import {
+  getFocusableId,
+  getPickerSelectorId,
+  SCREEN_PICKER_CONTAINER,
+  getScreenPickerId,
+  getScreenPickerSelectorContainerId,
+  getScreenPickerContentContainerId,
+} from "../index";
+
+describe("screenPickerUtils", () => {
+  describe("getFocusableId", () => {
+    it("should generate focusable ID with PickerItem prefix", () => {
+      expect(getFocusableId("item1")).toBe("PickerItem.item1");
+    });
+
+    it("should handle numeric IDs", () => {
+      expect(getFocusableId(123)).toBe("PickerItem.123");
+    });
+
+    it("should handle string IDs with special characters", () => {
+      expect(getFocusableId("item-123_test")).toBe("PickerItem.item-123_test");
+    });
+
+    it("should handle empty string ID", () => {
+      expect(getFocusableId("")).toBe("PickerItem.");
+    });
+
+    it("should handle IDs with spaces", () => {
+      expect(getFocusableId("my item")).toBe("PickerItem.my item");
+    });
+
+    it("should handle IDs with dots", () => {
+      expect(getFocusableId("parent.child")).toBe("PickerItem.parent.child");
+    });
+
+    it("should handle null ID", () => {
+      expect(getFocusableId(null)).toBe("PickerItem.null");
+    });
+
+    it("should handle undefined ID", () => {
+      expect(getFocusableId(undefined)).toBe("PickerItem.undefined");
+    });
+  });
+
+  describe("getPickerSelectorId", () => {
+    it("should generate picker selector ID with PickerSelector prefix", () => {
+      expect(getPickerSelectorId("selector1")).toBe("PickerSelector.selector1");
+    });
+
+    it("should handle numeric IDs", () => {
+      expect(getPickerSelectorId(456)).toBe("PickerSelector.456");
+    });
+
+    it("should handle string IDs with special characters", () => {
+      expect(getPickerSelectorId("selector-abc_xyz")).toBe(
+        "PickerSelector.selector-abc_xyz"
+      );
+    });
+
+    it("should handle empty string ID", () => {
+      expect(getPickerSelectorId("")).toBe("PickerSelector.");
+    });
+
+    it("should handle IDs with spaces", () => {
+      expect(getPickerSelectorId("my selector")).toBe(
+        "PickerSelector.my selector"
+      );
+    });
+
+    it("should handle null ID", () => {
+      expect(getPickerSelectorId(null)).toBe("PickerSelector.null");
+    });
+
+    it("should handle undefined ID", () => {
+      expect(getPickerSelectorId(undefined)).toBe("PickerSelector.undefined");
+    });
+  });
+
+  describe("SCREEN_PICKER_CONTAINER", () => {
+    it("should have correct constant value", () => {
+      expect(SCREEN_PICKER_CONTAINER).toBe("ScreenPickerContainer");
+    });
+
+    it("should be a string", () => {
+      expect(typeof SCREEN_PICKER_CONTAINER).toBe("string");
+    });
+  });
+
+  describe("getScreenPickerId", () => {
+    it("should generate screen picker ID with container prefix", () => {
+      expect(getScreenPickerId("screen1")).toBe(
+        "ScreenPickerContainer.screen1"
+      );
+    });
+
+    it("should use SCREEN_PICKER_CONTAINER constant", () => {
+      const id = "test";
+      expect(getScreenPickerId(id)).toBe(`${SCREEN_PICKER_CONTAINER}.${id}`);
+    });
+
+    it("should handle numeric IDs", () => {
+      expect(getScreenPickerId(789)).toBe("ScreenPickerContainer.789");
+    });
+
+    it("should handle string IDs with special characters", () => {
+      expect(getScreenPickerId("screen-123_test")).toBe(
+        "ScreenPickerContainer.screen-123_test"
+      );
+    });
+
+    it("should handle empty string ID", () => {
+      expect(getScreenPickerId("")).toBe("ScreenPickerContainer.");
+    });
+
+    it("should handle IDs with spaces", () => {
+      expect(getScreenPickerId("my screen")).toBe(
+        "ScreenPickerContainer.my screen"
+      );
+    });
+
+    it("should handle null ID", () => {
+      expect(getScreenPickerId(null)).toBe("ScreenPickerContainer.null");
+    });
+
+    it("should handle undefined ID", () => {
+      expect(getScreenPickerId(undefined)).toBe(
+        "ScreenPickerContainer.undefined"
+      );
+    });
+  });
+
+  describe("getScreenPickerSelectorContainerId", () => {
+    it("should generate selector container ID with suffix", () => {
+      expect(getScreenPickerSelectorContainerId("screen1")).toBe(
+        "ScreenPickerContainer.screen1-screen-selector"
+      );
+    });
+
+    it("should build on top of getScreenPickerId", () => {
+      const id = "test";
+      const baseId = getScreenPickerId(id);
+
+      expect(getScreenPickerSelectorContainerId(id)).toBe(
+        `${baseId}-screen-selector`
+      );
+    });
+
+    it("should handle numeric IDs", () => {
+      expect(getScreenPickerSelectorContainerId(123)).toBe(
+        "ScreenPickerContainer.123-screen-selector"
+      );
+    });
+
+    it("should handle string IDs with special characters", () => {
+      expect(getScreenPickerSelectorContainerId("screen-abc_xyz")).toBe(
+        "ScreenPickerContainer.screen-abc_xyz-screen-selector"
+      );
+    });
+
+    it("should handle empty string ID", () => {
+      expect(getScreenPickerSelectorContainerId("")).toBe(
+        "ScreenPickerContainer.-screen-selector"
+      );
+    });
+
+    it("should handle IDs with spaces", () => {
+      expect(getScreenPickerSelectorContainerId("my screen")).toBe(
+        "ScreenPickerContainer.my screen-screen-selector"
+      );
+    });
+
+    it("should handle null ID", () => {
+      expect(getScreenPickerSelectorContainerId(null)).toBe(
+        "ScreenPickerContainer.null-screen-selector"
+      );
+    });
+
+    it("should handle undefined ID", () => {
+      expect(getScreenPickerSelectorContainerId(undefined)).toBe(
+        "ScreenPickerContainer.undefined-screen-selector"
+      );
+    });
+  });
+
+  describe("getScreenPickerContentContainerId", () => {
+    it("should generate content container ID with suffix", () => {
+      expect(getScreenPickerContentContainerId("screen1")).toBe(
+        "ScreenPickerContainer.screen1-screen-container"
+      );
+    });
+
+    it("should build on top of getScreenPickerId", () => {
+      const id = "test";
+      const baseId = getScreenPickerId(id);
+
+      expect(getScreenPickerContentContainerId(id)).toBe(
+        `${baseId}-screen-container`
+      );
+    });
+
+    it("should handle numeric IDs", () => {
+      expect(getScreenPickerContentContainerId(456)).toBe(
+        "ScreenPickerContainer.456-screen-container"
+      );
+    });
+
+    it("should handle string IDs with special characters", () => {
+      expect(getScreenPickerContentContainerId("content-abc_xyz")).toBe(
+        "ScreenPickerContainer.content-abc_xyz-screen-container"
+      );
+    });
+
+    it("should handle empty string ID", () => {
+      expect(getScreenPickerContentContainerId("")).toBe(
+        "ScreenPickerContainer.-screen-container"
+      );
+    });
+
+    it("should handle IDs with spaces", () => {
+      expect(getScreenPickerContentContainerId("my content")).toBe(
+        "ScreenPickerContainer.my content-screen-container"
+      );
+    });
+
+    it("should handle null ID", () => {
+      expect(getScreenPickerContentContainerId(null)).toBe(
+        "ScreenPickerContainer.null-screen-container"
+      );
+    });
+
+    it("should handle undefined ID", () => {
+      expect(getScreenPickerContentContainerId(undefined)).toBe(
+        "ScreenPickerContainer.undefined-screen-container"
+      );
+    });
+  });
+
+  describe("ID relationships", () => {
+    it("should generate different IDs for different functions", () => {
+      const id = "test";
+
+      const focusableId = getFocusableId(id);
+      const selectorId = getPickerSelectorId(id);
+      const screenPickerId = getScreenPickerId(id);
+
+      expect(focusableId).not.toBe(selectorId);
+      expect(focusableId).not.toBe(screenPickerId);
+      expect(selectorId).not.toBe(screenPickerId);
+    });
+
+    it("should have consistent prefixes across calls", () => {
+      expect(getFocusableId("a")).toContain("PickerItem.");
+      expect(getFocusableId("b")).toContain("PickerItem.");
+      expect(getPickerSelectorId("a")).toContain("PickerSelector.");
+      expect(getPickerSelectorId("b")).toContain("PickerSelector.");
+      expect(getScreenPickerId("a")).toContain("ScreenPickerContainer.");
+      expect(getScreenPickerId("b")).toContain("ScreenPickerContainer.");
+    });
+
+    it("should generate selector and content IDs from same base", () => {
+      const id = "common";
+      const baseId = getScreenPickerId(id);
+      const selectorId = getScreenPickerSelectorContainerId(id);
+      const contentId = getScreenPickerContentContainerId(id);
+
+      expect(selectorId).toContain(baseId);
+      expect(contentId).toContain(baseId);
+      expect(selectorId).not.toBe(contentId);
+    });
+
+    it("should distinguish between selector and content containers", () => {
+      const id = "test";
+
+      const selectorId = getScreenPickerSelectorContainerId(id);
+      const contentId = getScreenPickerContentContainerId(id);
+
+      expect(selectorId).toContain("-screen-selector");
+      expect(contentId).toContain("-screen-container");
+      expect(selectorId).not.toBe(contentId);
+    });
+  });
+
+  describe("special characters and edge cases", () => {
+    it("should handle IDs with slashes", () => {
+      const id = "path/to/screen";
+
+      expect(getFocusableId(id)).toBe("PickerItem.path/to/screen");
+      expect(getPickerSelectorId(id)).toBe("PickerSelector.path/to/screen");
+
+      expect(getScreenPickerId(id)).toBe(
+        "ScreenPickerContainer.path/to/screen"
+      );
+    });
+
+    it("should handle IDs with Unicode characters", () => {
+      const id = "écran-日本語";
+
+      expect(getFocusableId(id)).toBe("PickerItem.écran-日本語");
+      expect(getPickerSelectorId(id)).toBe("PickerSelector.écran-日本語");
+      expect(getScreenPickerId(id)).toBe("ScreenPickerContainer.écran-日本語");
+    });
+
+    it("should handle very long IDs", () => {
+      const id = "a".repeat(1000);
+
+      expect(getFocusableId(id)).toContain("PickerItem.");
+      expect(getPickerSelectorId(id)).toContain("PickerSelector.");
+      expect(getScreenPickerId(id)).toContain("ScreenPickerContainer.");
+    });
+
+    it("should handle IDs with equals signs", () => {
+      const id = "key=value";
+
+      expect(getFocusableId(id)).toBe("PickerItem.key=value");
+      expect(getPickerSelectorId(id)).toBe("PickerSelector.key=value");
+      expect(getScreenPickerId(id)).toBe("ScreenPickerContainer.key=value");
+    });
+
+    it("should handle boolean values", () => {
+      expect(getFocusableId(true)).toBe("PickerItem.true");
+      expect(getPickerSelectorId(false)).toBe("PickerSelector.false");
+      expect(getScreenPickerId(true)).toBe("ScreenPickerContainer.true");
+    });
+
+    it("should handle object IDs", () => {
+      const obj = { toString: () => "customId" };
+
+      expect(getFocusableId(obj)).toContain("PickerItem.");
+      expect(getPickerSelectorId(obj)).toContain("PickerSelector.");
+      expect(getScreenPickerId(obj)).toContain("ScreenPickerContainer.");
+    });
+  });
+});

package/screenPickerUtils/index.ts

@@ -1,3 +1,5 @@
+import { endsWith } from "@applicaster/zapp-react-native-utils/utils";
+
 export const getFocusableId = (id) => `PickerItem.${id}`;
 
 export const getPickerSelectorId = (id) => `PickerSelector.${id}`;
@@ -11,3 +13,6 @@ export const getScreenPickerSelectorContainerId = (id) =>
 
 export const getScreenPickerContentContainerId = (id) =>
   `${getScreenPickerId(id)}-screen-container`;
+
+export const isTabsScreenContentContainerId = (id) =>
+  endsWith("-screen-container", id);

package/screenState/__tests__/index.test.ts

@@ -1,4 +1,4 @@
-import { act, renderHook } from "@testing-library/react-hooks";
+import { act, renderHook } from "@testing-library/react-native";
 import { useScreenState } from "../index";
 
 describe("useScreenState", () => {

package/screenUtils/index.ts

@@ -0,0 +1,3 @@
+export const TV_SCREEN_HEIGHT = 1080;
+
+export const TV_SCREEN_WIDTH = 1920;

package/searchUtils/const.ts

@@ -0,0 +1,7 @@
+export const FOCUSABLE_GROUP_ID = "search-screen";
+
+export const FOCUSABLE_RESULTS_ID = "search-screen-results";
+
+export const SEARCH_BOX_GROUP_ID = "search_box_group_id";
+
+export const SEARCH_INPUT_FOCUSABLE_ID = "search_input_group_id";

package/searchUtils/index.ts

@@ -0,0 +1,3 @@
+import { SEARCH_INPUT_FOCUSABLE_ID } from "./const";
+
+export const isSearchInputId = (id) => id === SEARCH_INPUT_FOCUSABLE_ID;

package/services/storageServiceSync.web.ts

@@ -17,7 +17,7 @@ export const resolveStorageContextKey = (storageKey: string) => {
   const key = splitKey[1];
 
   if (!key) {
-    return getFromSessionOrLocalStorage(key);
+    return getFromSessionOrLocalStorage(namespaceOrKey);
   } else {
     return getFromSessionOrLocalStorage(key, namespaceOrKey);
   }

package/stringUtils/index.ts

@@ -4,7 +4,7 @@ declare const global;
 import * as R from "ramda";
 import camelize from "camelize";
 // @ts-ignore
-import Handlebars from "react-native-handlebars";
+import Handlebars from "handlebars";
 
 global.Buffer = global.Buffer || require("buffer").Buffer;
 

package/testUtils/index.tsx

@@ -4,7 +4,7 @@ import React, { PropsWithChildren } from "react";
 import configureStore from "redux-mock-store";
 import { Provider } from "react-redux";
 import { View } from "react-native";
-import thunk from "redux-thunk";
+import { thunk } from "redux-thunk";
 import * as R from "ramda";
 
 import { appStore } from "@applicaster/zapp-react-native-redux/AppStore";
@@ -56,9 +56,29 @@ const initialState = {
   contentTypes: null,
 };
 
+const themeObjDefault = {
+  component_margin_top: 0,
+  component_margin_bottom: 0,
+  component_margin_left: 0,
+  component_margin_right: 0,
+  component_padding_top: 0,
+  component_padding_bottom: 0,
+  component_padding_left: 0,
+  component_padding_right: 0,
+  component_gutter_vertical: 0,
+  component_gutter_horizontal: 0,
+  component_corner_radius: 0,
+  app_background_color: "rgba(0,0,0,0)",
+  screen_margin_top: 0,
+  screen_margin_bottom: 0,
+  component_anchor_point_y: 0,
+  assets: "",
+};
+
 export const WrappedWithProviders = ({
   children,
   store: storeObj = {},
+  theme: themeObj = themeObjDefault,
 }: any) => {
   const _store = configureStore([thunk])(
     R.mergeDeepRight(initialState, { ...storeObj })
@@ -70,24 +90,7 @@ export const WrappedWithProviders = ({
     <ThemeContext.Provider
       value={{
         themes: {
-          light: {
-            component_margin_top: 0,
-            component_margin_bottom: 0,
-            component_margin_left: 0,
-            component_margin_right: 0,
-            component_padding_top: 0,
-            component_padding_bottom: 0,
-            component_padding_left: 0,
-            component_padding_right: 0,
-            component_gutter_vertical: 0,
-            component_gutter_horizontal: 0,
-            component_corner_radius: 0,
-            app_background_color: "rgba(0,0,0,0)",
-            screen_margin_top: 0,
-            screen_margin_bottom: 0,
-            component_anchor_point_y: 0,
-            assets: "",
-          },
+          light: themeObj,
         },
         selectedThemeId: "light",
         setSelectedThemeId: () => {},
@@ -113,11 +116,17 @@ export const WrappedWithProviders = ({
  * @param store optional store to pass to the provider
  * @returns
  */
-export const renderWithProviders = (component, storeObj?: unknown) => {
+export const renderWithProviders = (
+  component,
+  storeObj?: unknown,
+  themeObj?: unknown
+) => {
   return render(component, {
     wrapper: function TestWrapper({ children }: PropsWithChildren<any>) {
       return (
-        <WrappedWithProviders store={storeObj}>{children}</WrappedWithProviders>
+        <WrappedWithProviders store={storeObj} theme={themeObj}>
+          {children}
+        </WrappedWithProviders>
       );
     },
   });

package/time/__tests__/BackgroundTimer.test.ts

@@ -0,0 +1,156 @@
+const mockBackgroundTimerModule = {
+  setTimeout: jest.fn(),
+  clearTimeout: jest.fn(),
+};
+
+jest.mock("../../reactUtils", () => ({
+  platformSelect: jest.fn((options) => options.android || options.default),
+}));
+
+describe("BackgroundTimer", () => {
+  let BackgroundTimer: any;
+
+  const setupTimer = (withNativeModule = true) => {
+    jest.resetModules();
+
+    jest.doMock("react-native", () => ({
+      NativeModules: {
+        BackgroundTimer: withNativeModule
+          ? mockBackgroundTimerModule
+          : undefined,
+      },
+      DeviceEventEmitter: {
+        addListener: jest.fn(),
+        removeListener: jest.fn(),
+      },
+    }));
+
+    BackgroundTimer = require("../BackgroundTimer").default;
+  };
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  describe("Native Module Environment", () => {
+    beforeEach(() => {
+      setupTimer(true);
+    });
+
+    it("should initialize device event listener on startup", () => {
+      const { DeviceEventEmitter } = require("react-native");
+
+      expect(DeviceEventEmitter.addListener).toHaveBeenCalledWith(
+        "BackgroundTimer.timer.fired",
+        expect.any(Function)
+      );
+    });
+
+    it("should delegate setTimeout to native module and return a unique ID", () => {
+      const callback1 = jest.fn();
+      const callback2 = jest.fn();
+      const timeout = 1000;
+
+      const id1 = BackgroundTimer.setTimeout(callback1, timeout);
+      const id2 = BackgroundTimer.setTimeout(callback2, timeout);
+
+      expect(mockBackgroundTimerModule.setTimeout).toHaveBeenCalledWith(
+        id1,
+        timeout
+      );
+
+      expect(mockBackgroundTimerModule.setTimeout).toHaveBeenCalledWith(
+        id2,
+        timeout
+      );
+
+      expect(id1).not.toBe(id2);
+      expect(typeof id1).toBe("number");
+    });
+
+    it("should delegate clearTimeout to native module", () => {
+      const id = BackgroundTimer.setTimeout(jest.fn(), 1000);
+      BackgroundTimer.clearTimeout(id);
+
+      expect(mockBackgroundTimerModule.clearTimeout).toHaveBeenCalledWith(id);
+    });
+
+    it("should execute callback when native timer fires", () => {
+      const { DeviceEventEmitter } = require("react-native");
+      const callback = jest.fn();
+
+      const id = BackgroundTimer.setTimeout(callback, 1000);
+
+      const listener = DeviceEventEmitter.addListener.mock.calls[0][1];
+
+      listener(id);
+
+      expect(callback).toHaveBeenCalledTimes(1);
+    });
+
+    it("should cleanup callback after execution (prevent double firing)", () => {
+      const { DeviceEventEmitter } = require("react-native");
+      const callback = jest.fn();
+
+      const id = BackgroundTimer.setTimeout(callback, 1000);
+      const listener = DeviceEventEmitter.addListener.mock.calls[0][1];
+
+      listener(id);
+      listener(id);
+
+      expect(callback).toHaveBeenCalledTimes(1);
+    });
+
+    it("should not execute callback if cleared before firing", () => {
+      const { DeviceEventEmitter } = require("react-native");
+      const callback = jest.fn();
+
+      const id = BackgroundTimer.setTimeout(callback, 1000);
+      BackgroundTimer.clearTimeout(id);
+
+      const listener = DeviceEventEmitter.addListener.mock.calls[0][1];
+      listener(id);
+
+      expect(callback).not.toHaveBeenCalled();
+    });
+
+    it("should ignore events for unknown/invalid IDs", () => {
+      const { DeviceEventEmitter } = require("react-native");
+      const callback = jest.fn();
+
+      BackgroundTimer.setTimeout(callback, 1000);
+
+      const listener = DeviceEventEmitter.addListener.mock.calls[0][1];
+      listener(99999);
+
+      expect(callback).not.toHaveBeenCalled();
+    });
+  });
+
+  describe("Fallback Environment (No Native Module)", () => {
+    beforeEach(() => {
+      setupTimer(false);
+    });
+
+    it("should use global setTimeout when native module is missing", () => {
+      const callback = jest.fn();
+      const timeout = 500;
+
+      const globalSpy = jest.spyOn(global, "setTimeout");
+
+      BackgroundTimer.setTimeout(callback, timeout);
+
+      expect(globalSpy).toHaveBeenCalledWith(callback, timeout);
+    });
+
+    it("should use global clearTimeout when native module is missing", () => {
+      const callback = jest.fn();
+      const globalSpy = jest.spyOn(global, "clearTimeout");
+
+      const id = BackgroundTimer.setTimeout(callback, 500);
+      BackgroundTimer.clearTimeout(id);
+
+      expect(globalSpy).toHaveBeenCalledWith(id);
+    });
+  });
+});