@applicaster/zapp-react-dom-app 16.0.0-rc.102 → 16.0.0-rc.104

package/App/InteractionManager/__tests__/InteractionManager.test.tsx

@@ -0,0 +1,132 @@
+import { DISPLAY_STATES } from "@applicaster/zapp-react-native-ui-components/Contexts/DisplayStateContext";
+import { confirmationDialogStore } from "@applicaster/zapp-react-native-ui-components/Contexts/ConfirmDialogState";
+import { focusManager } from "@applicaster/zapp-react-native-utils/appUtils";
+import { showConfirmationDialog } from "@applicaster/zapp-react-native-utils/alertUtils";
+
+import { InteractionManagerClass } from "..";
+
+jest.mock("@applicaster/zapp-react-native-utils/alertUtils", () => ({
+  showConfirmationDialog: jest.fn(),
+}));
+
+jest.mock(
+  "@applicaster/zapp-react-native-ui-components/Decorators/Navigator",
+  () => ({ withNavigator: (C) => C })
+);
+
+jest.mock("@applicaster/zapp-react-native-redux/utils/connectToStore", () => ({
+  connectToStore: () => (C) => C,
+}));
+
+jest.mock("@applicaster/zapp-react-native-utils/logger", () => {
+  const actual = jest.requireActual(
+    "@applicaster/zapp-react-native-utils/logger"
+  );
+
+  return {
+    ...actual,
+    getXray: () => ({ ...actual.getXray(), withXray: (C) => C }),
+  };
+});
+
+const globalAny: any = global;
+
+const createBackEvent = () => ({
+  code: "Escape",
+  preventDefault: jest.fn(),
+  stopPropagation: jest.fn(),
+});
+
+const createManager = (props = {}) => {
+  const navigator = {
+    canGoBack: jest.fn(() => false),
+    goBack: jest.fn(),
+    replace: jest.fn(),
+    currentRoute: "/river/home",
+  };
+
+  const defaultProps = {
+    displayState: DISPLAY_STATES.DEFAULT,
+    setDisplayState: jest.fn(),
+    navigator,
+    rivers: {},
+    backToTopAction: jest.fn(() => "GO_BACK"),
+    emitFocusOnSelectedTopMenuItem: jest.fn(),
+    emitFocusOnSelectedTab: jest.fn(),
+  };
+
+  const mergedProps = { ...defaultProps, ...props };
+
+  return {
+    manager: new InteractionManagerClass(mergedProps as any),
+    props: mergedProps,
+  };
+};
+
+describe("InteractionManager (web)", () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+    (focusManager as any).setInitialFocus = jest.fn();
+    confirmationDialogStore.getState().hideDialog();
+  });
+
+  afterEach(() => {
+    delete globalAny.webOS;
+  });
+
+  describe("onBackPress with exit dialog visible", () => {
+    it.each([DISPLAY_STATES.DEFAULT, DISPLAY_STATES.PLAYER])(
+      "dismisses the dialog instead of navigating (displayState: %s)",
+      (displayState) => {
+        const { manager, props } = createManager({ displayState });
+        confirmationDialogStore.getState().showDialog();
+
+        const event = createBackEvent();
+        manager.onBackPress(event);
+
+        expect(confirmationDialogStore.getState().isDialogVisible).toBe(false);
+        expect(props.backToTopAction).not.toHaveBeenCalled();
+        expect(props.navigator.goBack).not.toHaveBeenCalled();
+        expect(event.preventDefault).toHaveBeenCalled();
+
+        expect(focusManager.setInitialFocus).toHaveBeenCalledWith(undefined, {
+          source: "cancel",
+          preserveScroll: true,
+        });
+      }
+    );
+
+    it("resolves the back action normally when the dialog is hidden", () => {
+      const { manager, props } = createManager();
+
+      manager.onBackPress(createBackEvent());
+
+      expect(props.backToTopAction).toHaveBeenCalled();
+      expect(props.navigator.canGoBack).toHaveBeenCalled();
+    });
+  });
+
+  describe("handleWebOsBack", () => {
+    it("uses the webOS platformBack API", () => {
+      const platformBack = jest.fn();
+      globalAny.webOS = { platformBack };
+
+      const { manager } = createManager();
+      manager.handleWebOsBack();
+
+      expect(platformBack).toHaveBeenCalledTimes(1);
+      expect(showConfirmationDialog).not.toHaveBeenCalled();
+    });
+
+    it("falls back to the custom exit dialog when platformBack is unavailable", () => {
+      globalAny.webOS = {};
+
+      const { manager } = createManager();
+      manager.handleWebOsBack();
+
+      expect(showConfirmationDialog).toHaveBeenCalledWith(
+        expect.objectContaining({ title: "" })
+      );
+    });
+  });
+});

package/App/InteractionManager/index.tsx

@@ -89,7 +89,7 @@ type KeyCode = { code: string; keyCode: number | string };
 const VIDEO_PLAYER_CONTROLS_NAVIGATION_MESSAGE =
   "Video player controls - use left/right to navigate";
 
-class InteractionManagerClass extends React.Component<Props, State> {
+export class InteractionManagerClass extends React.Component<Props, State> {
   onKeyDownListener: (keyCode: KeyCode) => void;
   onMouseDownListener: (event: MouseEvent) => void;
   onMouseMoveListener: (event: MouseEvent) => void;
@@ -253,7 +253,7 @@ class InteractionManagerClass extends React.Component<Props, State> {
   }
 
   handleWebOsBack() {
-    const systemBack = globalAny?.webOS?.platformToBackground;
+    const systemBack = globalAny?.webOS?.platformBack;
 
     if (systemBack) {
       systemBack();
@@ -420,6 +420,16 @@ class InteractionManagerClass extends React.Component<Props, State> {
       return;
     }
 
+    // Focus is inside the dialog, so backToTopAction() can't resolve a
+    // meaningful action — Back must dismiss the dialog in every display state.
+    if (isDialogVisible) {
+      this.onConfirmDialogClose();
+      event.preventDefault();
+      event.stopPropagation();
+
+      return;
+    }
+
     const action = backToTopAction();
 
     const effectiveDisplayState = this.getEffectiveDisplayState();
@@ -481,9 +491,7 @@ class InteractionManagerClass extends React.Component<Props, State> {
 
         break;
       case DISPLAY_STATES.PLAYER:
-        if (isDialogVisible) {
-          this.onConfirmDialogClose();
-        } else if (navigator.canGoBack()) {
+        if (navigator.canGoBack()) {
           navigator.goBack();
         } else if (this.isHomeScreen()) {
           this.platformToBackground();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applicaster/zapp-react-dom-app",
-  "version": "16.0.0-rc.102",
+  "version": "16.0.0-rc.104",
   "description": "Zapp App Component for Applicaster's Quick Brick React Native App",
   "main": "index.js",
   "scripts": {
@@ -22,11 +22,11 @@
   },
   "homepage": "https://github.com/applicaster/zapp-react-dom-app#readme",
   "dependencies": {
-    "@applicaster/zapp-react-dom-ui-components": "16.0.0-rc.102",
-    "@applicaster/zapp-react-native-bridge": "16.0.0-rc.102",
-    "@applicaster/zapp-react-native-redux": "16.0.0-rc.102",
-    "@applicaster/zapp-react-native-ui-components": "16.0.0-rc.102",
-    "@applicaster/zapp-react-native-utils": "16.0.0-rc.102",
+    "@applicaster/zapp-react-dom-ui-components": "16.0.0-rc.104",
+    "@applicaster/zapp-react-native-bridge": "16.0.0-rc.104",
+    "@applicaster/zapp-react-native-redux": "16.0.0-rc.104",
+    "@applicaster/zapp-react-native-ui-components": "16.0.0-rc.104",
+    "@applicaster/zapp-react-native-utils": "16.0.0-rc.104",
     "abortcontroller-polyfill": "^1.7.5",
     "typeface-montserrat": "^0.0.54",
     "video.js": "7.14.3",