@applicaster/quick-brick-core 16.0.0-rc.99 → 17.0.0-alpha.2451166845

package/App/DeepLinking/URLSchemeListener/__tests__/URLSchemeListenerReplacement.test.tsx

@@ -0,0 +1,103 @@
+import * as React from "react";
+import { Text } from "react-native";
+import { act, render } from "@testing-library/react-native";
+
+import { URLSchemeListener } from "../index";
+import { URLSchemeContext } from "../URLSchemeContextProvider";
+
+const mockMounts: string[] = [];
+const mockFinishers: Record<string, (callback?: unknown) => void> = {};
+
+jest.mock("../../URLSchemeHandler", () => {
+  const React = require("react");
+
+  return {
+    URLSchemeHandler: ({ url, onFinish }) => {
+      // Mirrors the real scheme handlers: work starts once, on mount.
+      React.useEffect(() => {
+        mockMounts.push(url);
+        mockFinishers[url] = onFinish;
+        // eslint-disable-next-line @wogns3623/better-exhaustive-deps/exhaustive-deps
+      }, []);
+
+      return null;
+    },
+  };
+});
+
+jest.mock("@applicaster/zapp-react-native-utils/reactHooks/navigation", () => ({
+  useNavigation: () => ({ startUpHooks: null }),
+}));
+
+jest.mock("@applicaster/zapp-react-native-redux/hooks", () => ({
+  useAppSelector: () => true,
+}));
+
+const URL_A = "pureflix://open?feed_locator=a&id=1";
+const URL_B = "pureflix://open?feed_locator=b&id=2";
+
+const tree = (url: string | null, done: () => void) => (
+  <URLSchemeContext.Provider value={{ url, done }}>
+    <URLSchemeListener>
+      <Text>app</Text>
+    </URLSchemeListener>
+  </URLSchemeContext.Provider>
+);
+
+describe("URLSchemeListener - deep link replaced while being handled", () => {
+  beforeEach(() => {
+    mockMounts.length = 0;
+    Object.keys(mockFinishers).forEach((key) => delete mockFinishers[key]);
+  });
+
+  it("starts a new handler for a new URL", () => {
+    const done = jest.fn();
+    const { rerender } = render(tree(URL_A, done));
+
+    rerender(tree(URL_B, done));
+
+    expect(mockMounts).toEqual([URL_A, URL_B]);
+  });
+
+  it("ignores the finish of a replaced handler and lets the current one finish", () => {
+    const done = jest.fn();
+    const { rerender } = render(tree(URL_A, done));
+
+    rerender(tree(URL_B, done));
+
+    const staleNavigation = jest.fn((d) => d());
+
+    act(() => mockFinishers[URL_A](staleNavigation));
+    act(() => mockFinishers[URL_A]());
+
+    expect(staleNavigation).not.toHaveBeenCalled();
+    expect(done).not.toHaveBeenCalled();
+
+    const navigation = jest.fn((d) => d());
+
+    act(() => mockFinishers[URL_B](navigation));
+
+    expect(navigation).toHaveBeenCalledWith(done);
+    expect(done).toHaveBeenCalledTimes(1);
+  });
+
+  it("does not restart the handler when the same URL is set again", () => {
+    const done = jest.fn();
+    const { rerender } = render(tree(URL_A, done));
+
+    rerender(tree(URL_A, done));
+
+    expect(mockMounts).toEqual([URL_A]);
+
+    act(() => mockFinishers[URL_A]());
+
+    expect(done).toHaveBeenCalledTimes(1);
+  });
+
+  it("renders the app when there is no URL", () => {
+    const { getByText } = render(tree(null, jest.fn()));
+
+    expect(getByText("app")).toBeTruthy();
+    expect(mockMounts).toEqual([]);
+  });
+});

package/App/DeepLinking/URLSchemeListener/index.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useContext } from "react";
+import React, { useCallback, useContext, useRef } from "react";
 
 import { URLSchemeHandler } from "../URLSchemeHandler";
 import { URLSchemeContext } from "./URLSchemeContextProvider";
@@ -13,19 +13,30 @@ export function URLSchemeListener({ children }: { children: React.ReactNode }) {
 
   const appReady = useAppSelector(selectAppReady);
 
+  // The URL currently in the context. A handler compares its own URL with it on finish:
+  // a newer deep link may have replaced it while it was still resolving (e.g. loading a feed).
+  const latestUrl = useRef(url);
+  latestUrl.current = url;
+
   const onFinish = useCallback(
     (callback) => {
+      if (latestUrl.current !== url) {
+        // Stale handler: skip its navigation and do not clear the newer URL.
+        return;
+      }
+
       if (callback && typeof callback === "function") {
         callback?.(done);
       } else {
         done();
       }
     },
-    [url]
+    [url, done]
   );
 
   if (url && !navigator.startUpHooks && appReady) {
-    return <URLSchemeHandler url={url} onFinish={onFinish} />;
+    // key: a new URL remounts the handler so that its effects run for that URL.
+    return <URLSchemeHandler key={url} url={url} onFinish={onFinish} />;
   }
 
   return children;

package/App/DeepLinking/logger.ts

@@ -5,6 +5,6 @@ import { coreAppLogger } from "../logger";
 export const { log_verbose, log_debug, log_warning, log_info, log_error } =
   createLogger({
     category: "DeepLinking",
-    subsystem: "General",
+    subsystem: "app/deep_linking",
     parent: coreAppLogger,
   });

package/App/ErrorBoundary/index.tsx

@@ -1,13 +1,16 @@
 import * as React from "react";
 import pick from "lodash/pick";
 
-import { coreLogger } from "@applicaster/zapp-react-native-utils/logger";
+import { subsystemLogger } from "@applicaster/zapp-react-native-utils/logger";
 import { ErrorScreen } from "@applicaster/zapp-react-native-ui-components/Components/ErrorScreen";
 
 import { useErrorStore } from "./store";
 import * as QuickBrickManager from "@applicaster/zapp-react-native-bridge/QuickBrick";
 
-const errorBoundaryLogger = coreLogger.addSubsystem("react_error-boundary");
+const errorBoundaryLogger = subsystemLogger(
+  "crash/error_boundary",
+  "ErrorBoundary"
+);
 
 type Props = {
   children: React.ReactNode;

package/App/NavigationProvider/NavigationProvider.tsx

@@ -13,6 +13,8 @@ import {
   useGetScreenOrientation,
 } from "@applicaster/zapp-react-native-utils/appUtils/orientationHelper";
 import { focusManager } from "@applicaster/zapp-react-native-utils/focusManager/FocusManager";
+import { setXrayNavigator } from "@applicaster/zapp-react-native-utils/navigationUtils/xrayNavigator";
+import { registerNavToolbox } from "./navToolbox";
 
 import reducer, {
   ACTIONS,
@@ -43,7 +45,6 @@ import {
   startUpHookPluginIdentifiersSelector,
 } from "./navigator/selectors";
 
-import { coreAppLogger } from "../logger";
 import {
   getPlatform,
   isTV,
@@ -87,8 +88,9 @@ import {
   useLayoutVersion,
   useRivers,
 } from "@applicaster/zapp-react-native-utils/reactHooks";
+import { subsystemLogger } from "@applicaster/zapp-react-native-utils/logger";
 
-const logger = coreAppLogger.addSubsystem("Navigator");
+const logger = subsystemLogger("ui/navigation", "Navigator");
 
 type Props = {
   children?: React.ReactChild;
@@ -353,10 +355,7 @@ export function NavigationProvider({ children }: Props) {
           state: firstRoute.state,
         };
 
-        if (
-          stateForBack?.state?.entry &&
-          "home" in stateForBack?.state?.entry
-        ) {
+        if (stateForBack?.state?.entry?.home) {
           goHome();
         } else {
           dispatch(back(stateForBack));
@@ -763,11 +762,11 @@ export function NavigationProvider({ children }: Props) {
   const getStackForPathname = (
     pathname: string
   ): NavigationScreenState | undefined => {
-    const stack = [...state?.stack?.mainStack];
-
-    const currentStack = stack.find(({ route }) => route === pathname);
-
-    return currentStack;
+    // Topmost match: the active screen if a route is on the stack twice.
+    return R.findLast(
+      ({ route }) => route === pathname,
+      state?.stack?.mainStack ?? []
+    );
   };
 
   const navigator: QuickBrickAppNavigator = React.useMemo(
@@ -832,6 +831,13 @@ export function NavigationProvider({ children }: Props) {
     navigator.state = state;
   }
 
+  React.useLayoutEffect(() => {
+    setXrayNavigator(navigator);
+    registerNavToolbox();
+
+    return () => setXrayNavigator(undefined);
+  }, [navigator]);
+
   React.useLayoutEffect(() => {
     if (pathname === "/" && appLaunched) {
       goHome(true);

package/App/NavigationProvider/__tests__/navToolbox.test.ts

@@ -0,0 +1,227 @@
+const mockRegister = jest.fn().mockResolvedValue(undefined);
+
+// The X-Ray mock (__mocks__/@applicaster/quick-brick-xray) has no toolbox API: give it one.
+require("@applicaster/quick-brick-xray").registerReactToolbox = mockRegister;
+
+// Required after the toolbox API is in place: loading them can register the player toolbox.
+const {
+  modalStore,
+} = require("@applicaster/zapp-react-native-utils/modalState");
+
+const {
+  setXrayNavigator,
+} = require("@applicaster/zapp-react-native-utils/navigationUtils/xrayNavigator");
+
+const {
+  playerManager,
+} = require("@applicaster/zapp-react-native-utils/appUtils/playerManager");
+
+const { registerNavToolbox } = require("../navToolbox");
+
+const navigator = (overrides = {}) => {
+  const nav = {
+    getPathname: () => "/river/a/river/b",
+    getStack: () => [{ route: "/river/a" }, { route: "/river/a/river/b" }],
+    canGoBack: () => true,
+    goBack: jest.fn(),
+    goHome: jest.fn(),
+    getPlayNextOverlay: () => null,
+    getModalState: () => modalStore.getState().modalState,
+    dismissModal: jest.fn(),
+    videoModalState: { visible: false },
+    minimiseVideoModal: jest.fn(),
+    maximiseVideoModal: jest.fn(),
+    closeVideoModal: jest.fn(),
+    ...overrides,
+  };
+
+  setXrayNavigator(nav as unknown as QuickBrickAppNavigator);
+
+  return nav;
+};
+
+const videoModal = (mode: string) => ({
+  videoModalState: { visible: true, mode, item: { id: "v1", title: "V" } },
+});
+
+const call = (name: string) => {
+  // Other toolboxes (player) may register first.
+  const { tools } = mockRegister.mock.calls.find(
+    ([toolbox]) => toolbox.name === "nav"
+  )[0];
+
+  return tools.find((tool) => tool.name === name).handler({});
+};
+
+describe("navToolbox", () => {
+  beforeAll(() => registerNavToolbox());
+
+  afterEach(() => {
+    modalStore.getState().setModalState({ visible: false, screen: null });
+    jest.restoreAllMocks();
+  });
+
+  it("throws until the NavigationProvider sets the navigator", () => {
+    setXrayNavigator(undefined);
+
+    expect(() => call("stack")).toThrow("Navigation is not available yet");
+  });
+
+  it("goes back one screen", () => {
+    const nav = navigator();
+
+    expect(call("back")).toEqual({ from: "/river/a/river/b", wentBack: true });
+    expect(nav.goBack).toHaveBeenCalledWith(false);
+  });
+
+  it("does not go back from the root", () => {
+    const nav = navigator({ canGoBack: () => false });
+
+    expect(call("back")).toMatchObject({ wentBack: false });
+    expect(nav.goBack).not.toHaveBeenCalled();
+  });
+
+  it("does not pop the screen under a modal or the video modal", () => {
+    const nav = navigator(videoModal("MAXIMIZED"));
+
+    expect(call("back")).toEqual({
+      from: "video-modal/v1",
+      wentBack: false,
+      blockedBy: "video-modal",
+    });
+
+    modalStore.getState().openModal({ item: { id: "m" } });
+
+    expect(call("back")).toMatchObject({ blockedBy: "modal" });
+    expect(nav.goBack).not.toHaveBeenCalled();
+  });
+
+  it("only dismisses Play Next when it shows", () => {
+    const nav = navigator({ getPlayNextOverlay: () => ({}) });
+
+    expect(call("back")).toMatchObject({
+      wentBack: false,
+      dismissed: "playNext",
+    });
+
+    expect(nav.goBack).toHaveBeenCalledWith(false);
+  });
+
+  it("leaves a hook screen to cancel itself", () => {
+    const nav = navigator({ getPathname: () => "/river/a/hooks/login" });
+
+    expect(call("back")).toMatchObject({ wentBack: false, blockedBy: "hook" });
+    expect(nav.goBack).not.toHaveBeenCalled();
+  });
+
+  it("goes home", () => {
+    const nav = navigator();
+
+    expect(call("home")).toEqual({ from: "/river/a/river/b", wentHome: true });
+    expect(nav.goHome).toHaveBeenCalled();
+  });
+
+  it("does not go home under a modal or the video modal", () => {
+    const nav = navigator(videoModal("MAXIMIZED"));
+
+    expect(call("home")).toEqual({
+      from: "video-modal/v1",
+      wentHome: false,
+      blockedBy: "video-modal",
+    });
+
+    modalStore.getState().openModal({ item: { id: "m" } });
+
+    expect(call("home")).toMatchObject({ blockedBy: "modal" });
+    expect(nav.goHome).not.toHaveBeenCalled();
+  });
+
+  it("goes home with the mini player docked", () => {
+    const nav = navigator(videoModal("MINIMIZED"));
+
+    expect(call("home")).toMatchObject({ wentHome: true });
+    expect(nav.goHome).toHaveBeenCalled();
+  });
+
+  it("dismisses the modal store's modal, not the video modal", () => {
+    const nav = navigator(videoModal("MAXIMIZED"));
+
+    expect(() => call("dismissModal")).toThrow("No modal is open");
+
+    modalStore.getState().openModal({ item: { id: "m" } });
+
+    expect(call("dismissModal")).toBe("OK");
+    expect(nav.dismissModal).toHaveBeenCalled();
+  });
+
+  it("minimises only a maximised video modal", () => {
+    const fullscreen = navigator(videoModal("FULLSCREEN"));
+
+    expect(() => call("minimizeVideoModal")).toThrow("mode is FULLSCREEN");
+    expect(fullscreen.minimiseVideoModal).not.toHaveBeenCalled();
+
+    const maximized = navigator(videoModal("MAXIMIZED"));
+
+    call("minimizeVideoModal");
+
+    expect(maximized.minimiseVideoModal).toHaveBeenCalled();
+  });
+
+  it("enters and leaves fullscreen through the player, which also rotates the phone", () => {
+    const invoke = jest.spyOn(playerManager, "invokeHandler");
+    const playerContainer = jest.fn();
+
+    playerManager.on("toggleFullscreen", playerContainer);
+
+    navigator(videoModal("MAXIMIZED"));
+    call("fullscreenVideoModal");
+
+    expect(invoke).toHaveBeenCalledWith("toggleFullscreen", {
+      fullscreen: true,
+    });
+
+    const fullscreen = navigator(videoModal("FULLSCREEN"));
+
+    call("maximizeVideoModal");
+
+    expect(invoke).toHaveBeenCalledWith("toggleFullscreen", {
+      fullscreen: false,
+    });
+
+    expect(fullscreen.maximiseVideoModal).not.toHaveBeenCalled();
+
+    playerManager.removeHandler("toggleFullscreen", playerContainer);
+  });
+
+  it("does not claim fullscreen without a player, or from the mini player", () => {
+    navigator(videoModal("MAXIMIZED"));
+
+    expect(() => call("fullscreenVideoModal")).toThrow("shows no player");
+
+    navigator(videoModal("MINIMIZED"));
+
+    expect(() => call("fullscreenVideoModal")).toThrow("mode is MINIMIZED");
+  });
+
+  it("expands the mini player", () => {
+    const nav = navigator(videoModal("MINIMIZED"));
+
+    call("maximizeVideoModal");
+
+    expect(nav.maximiseVideoModal).toHaveBeenCalled();
+  });
+
+  it("reports the video modal", () => {
+    navigator(videoModal("MINIMIZED"));
+
+    expect(call("videoModal")).toMatchObject({
+      visible: true,
+      mode: "MINIMIZED",
+      entry: { id: "v1", title: "V" },
+    });
+
+    navigator();
+
+    expect(call("videoModal")).toMatchObject({ visible: false });
+  });
+});

package/App/NavigationProvider/__tests__/navigationProvider.test.tsx

@@ -410,6 +410,62 @@ describe("<NavigationProvider />", () => {
       });
     });
 
+    describe("when backToTop is requested from a non-home tab", () => {
+      const listenRiver = {
+        id: "LISTEN",
+        home: false,
+        navigations: [],
+        ui_components: [],
+      };
+
+      beforeEach(() => {
+        wrapper = renderContextConsumer({
+          ...store,
+          rivers: { ...rivers, LISTEN: listenRiver },
+        });
+
+        act(() => {
+          getNavigatorValues(wrapper).navigator.replace(listenRiver);
+        });
+      });
+
+      it("returns to the tab root from the second level", () => {
+        act(() => {
+          getNavigatorValues(wrapper).navigator.push(rivers.A1234);
+        });
+
+        act(() => {
+          getNavigatorValues(wrapper).navigator.goBack(false, false, true);
+        });
+
+        const { navigator, state } = getNavigatorValues(wrapper);
+
+        expect(navigator.currentRoute).toEqual("/river/LISTEN");
+        expect(navigator.activeRiver).toEqual(listenRiver);
+        expect(state.stack.mainStack).toHaveLength(1);
+      });
+
+      it("returns to the tab root from the third level", () => {
+        act(() => {
+          getNavigatorValues(wrapper).navigator.push(rivers.A1234);
+        });
+
+        act(() => {
+          getNavigatorValues(wrapper).navigator.push(rivers.C0987);
+        });
+
+        act(() => {
+          getNavigatorValues(wrapper).navigator.goBack(false, false, true);
+        });
+
+        const { navigator, state } = getNavigatorValues(wrapper);
+
+        expect(navigator.currentRoute).toEqual("/river/LISTEN");
+        expect(navigator.activeRiver).toEqual(listenRiver);
+        expect(state.stack.mainStack).toHaveLength(1);
+      });
+    });
+
     describe("when there is a previous route and there are hooks", () => {
       beforeEach(() => {
         wrapper = renderContextConsumer();