@applicaster/zapp-react-native-ui-components 16.0.0-alpha.9235607812 → 16.0.0-alpha.9338540010

package/Decorators/ZappPipesDataConnector/__tests__/screenToolbox.test.ts

@@ -0,0 +1,347 @@
+import { renderHook } from "@testing-library/react-native";
+
+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 {
+  zappHookModalStore,
+} = require("@applicaster/zapp-react-native-ui-components/Contexts/ZappHookModalContext");
+
+const mockStore = {
+  rivers: { home: { name: "Home", type: "general_content" } },
+  plugins: [
+    { identifier: "quick-brick-epg-screen", name: "EPG" },
+    { identifier: "login-plugin", name: "Login" },
+  ],
+};
+
+jest.mock("@applicaster/zapp-react-native-redux/AppStore", () => ({
+  appStore: { get: (key) => mockStore[key] },
+}));
+
+const { useScreenToolboxRecord, getTopPathname } = require("../screenToolbox");
+
+const home = { id: "home", name: "Home", type: "general_content" };
+
+const stack = {
+  "/river/home": { screen: home },
+  "/river/epg": {
+    screen: { id: "epg", name: "Guide", type: "quick-brick-epg-screen" },
+  },
+  "/river/tabs": {
+    screen: { id: "tabs", name: "Tabs", type: "quick-brick-tabs" },
+    nested: { screen: { id: "t1", name: "Tab 1", type: "general_content" } },
+  },
+  "/river/home/hooks/login": {
+    screen: { identifier: "login-plugin", name: "Login" },
+    entry: { payload: { id: "e1", title: "One" } },
+  },
+};
+
+const navigate = (pathname: string, videoModalState = { visible: false }) =>
+  setXrayNavigator({
+    getPathname: () => pathname,
+    getStackForPathname: (route) =>
+      stack[route] ? { route, state: stack[route] } : undefined,
+    videoModalState,
+  } as unknown as QuickBrickAppNavigator);
+
+const mount = (
+  component,
+  index,
+  feed?,
+  parentId?,
+  pathname = "/river/home"
+) => {
+  const hook = renderHook(() =>
+    useScreenToolboxRecord(component, "home", index, parentId, pathname)
+  );
+
+  hook.result.current.feed = feed;
+
+  return hook;
+};
+
+const current = (args = {}) => {
+  // Other toolboxes (player) may register first.
+  const { tools } = mockRegister.mock.calls.find(
+    ([toolbox]) => toolbox.name === "screen"
+  )[0];
+
+  return tools.find((tool) => tool.name === "current").handler(args);
+};
+
+const presentHook = (overrides = {}) =>
+  zappHookModalStore.setState({
+    state: {
+      path: "/hooks/login",
+      screenData: {
+        hookPlugin: { identifier: "login-plugin", name: "Login" },
+        payload: { id: "e1", title: "One" },
+      },
+    } as any,
+    isHooksExecutionInProgress: true,
+    isRunningInBackground: false,
+    ...overrides,
+  });
+
+describe("screenToolbox", () => {
+  // Registers the toolbox; the registration is kept for the whole module, as in the app.
+  beforeAll(() => mount({ id: "init" }, 0).unmount());
+
+  beforeEach(() => navigate("/river/home"));
+
+  afterEach(() => {
+    modalStore.getState().setModalState({ visible: false, screen: null });
+    zappHookModalStore.getState().resetState();
+    zappHookModalStore.getState().setIsHooksExecutionInProgress(false);
+  });
+
+  it("returns the top screen's mounted components in order, with feed and entries", () => {
+    const second = mount({ id: "c2", component_type: "grid" }, 1, {
+      url: "https://feed/2",
+      loading: true,
+    });
+
+    const first = mount({ id: "c1", component_type: "horizontal_list" }, 0, {
+      url: "https://feed/1",
+      loading: false,
+      data: {
+        entry: [
+          { id: "e1", title: "One" },
+          { id: "e2", title: "Two" },
+        ],
+      },
+    });
+
+    const third = mount({ id: "c3", component_type: "grid" }, 2, {
+      url: "https://feed/3",
+      error: new Error("404"),
+    });
+
+    expect(current({ limit: 1 })).toEqual({
+      pathname: "/river/home",
+      screen: {
+        kind: "river",
+        id: "home",
+        name: "Home",
+        type: "general_content",
+      },
+      entry: null,
+      rivers: [
+        {
+          id: "home",
+          name: "Home",
+          type: "general_content",
+          components: [
+            {
+              index: 0,
+              id: "c1",
+              type: "horizontal_list",
+              feed: { url: "https://feed/1", state: "loaded", count: 2 },
+              entries: [{ index: 0, id: "e1", title: "One" }],
+            },
+            {
+              index: 1,
+              id: "c2",
+              type: "grid",
+              feed: { url: "https://feed/2", state: "loading", count: 0 },
+              entries: [],
+            },
+            {
+              index: 2,
+              id: "c3",
+              type: "grid",
+              feed: {
+                url: "https://feed/3",
+                state: "error",
+                error: "404",
+                count: 0,
+              },
+              entries: [],
+            },
+          ],
+        },
+      ],
+      mounted: ["/river/home"],
+    });
+
+    [first, second, third].forEach((hook) => hook.unmount());
+
+    expect(current().rivers).toEqual([]);
+  });
+
+  it("nests a group's children under it", () => {
+    const group = mount({ id: "g", component_type: "group" }, 1);
+
+    const child = mount(
+      { id: "g0", component_type: "hero" },
+      0,
+      undefined,
+      "g"
+    );
+
+    const row = mount({ id: "r", component_type: "grid" }, 0);
+
+    expect(
+      current().rivers[0].components.map(({ id, children }) => ({
+        id,
+        children: children?.map((item) => item.id),
+      }))
+    ).toEqual([
+      { id: "r", children: undefined },
+      { id: "g", children: ["g0"] },
+    ]);
+
+    [group, child, row].forEach((hook) => hook.unmount());
+  });
+
+  it("reads another mounted screen by pathname", () => {
+    const other = mount({ id: "c" }, 0, undefined, undefined, "/river/epg");
+
+    expect(current({ pathname: "/river/epg" }).rivers[0].components).toEqual([
+      expect.objectContaining({ id: "c" }),
+    ]);
+
+    expect(current().mounted).toEqual(["/river/epg"]);
+
+    other.unmount();
+  });
+
+  it("names the plugin that renders a screen plugin", () => {
+    navigate("/river/epg");
+
+    expect(current().screen).toEqual({
+      kind: "plugin",
+      id: "epg",
+      name: "Guide",
+      type: "quick-brick-epg-screen",
+      plugin: { identifier: "quick-brick-epg-screen", name: "EPG" },
+    });
+  });
+
+  it("reports the nested tab screen", () => {
+    navigate("/river/tabs");
+
+    expect(current().nested).toEqual({
+      id: "t1",
+      name: "Tab 1",
+      type: "general_content",
+    });
+  });
+
+  it("unwraps the entry of a hook screen on the stack", () => {
+    navigate("/river/home/hooks/login");
+
+    expect(current()).toMatchObject({
+      screen: { kind: "hook", plugin: { identifier: "login-plugin" } },
+      entry: { id: "e1", title: "One" },
+    });
+  });
+
+  it("says when there is no screen yet", () => {
+    navigate("/");
+
+    expect(current().screen).toEqual({ kind: "none" });
+  });
+
+  it("reads a modal's screen from the modal store, its pathname as ModalProvider builds it", () => {
+    modalStore.getState().openModal({ item: home, props: { screenId: "m1" } });
+
+    expect(current()).toMatchObject({
+      pathname: "modal/m1",
+      screen: { kind: "river", id: "home" },
+    });
+  });
+
+  it("describes a modal hook by its plugin", () => {
+    modalStore.getState().openModal({
+      item: {
+        hookPlugin: { identifier: "login-plugin", name: "Login" },
+        payload: { id: "e1", title: "One" },
+      },
+      props: { screenType: "hooks" },
+    } as any);
+
+    expect(current()).toMatchObject({
+      screen: {
+        kind: "hook",
+        plugin: { identifier: "login-plugin", name: "Login" },
+      },
+      entry: { id: "e1", title: "One" },
+    });
+  });
+
+  it("describes a bottom sheet", () => {
+    modalStore.getState().openModal({
+      item: { modalBottomSheetContentProps: {} },
+    } as any);
+
+    expect(current().screen).toEqual({ kind: "bottomSheet" });
+  });
+
+  it("puts a modal over the video modal, and the video modal over the stack unless docked", () => {
+    const item = { id: "v1", title: "Video" };
+
+    navigate("/river/home", {
+      visible: true,
+      mode: "MAXIMIZED",
+      item,
+    } as any);
+
+    expect(current()).toMatchObject({
+      pathname: "video-modal/v1",
+      screen: { kind: "player" },
+      entry: { id: "v1", title: "Video" },
+    });
+
+    modalStore.getState().openModal({ item: home });
+
+    expect(getTopPathname()).toBe("modal/home");
+
+    modalStore.getState().setModalState({ visible: false, screen: null });
+
+    navigate("/river/home", {
+      visible: true,
+      mode: "MINIMIZED",
+      item,
+    } as any);
+
+    expect(getTopPathname()).toBe("/river/home");
+  });
+
+  it("puts a presented hook screen on top, not one running in the background", () => {
+    presentHook();
+
+    expect(current()).toMatchObject({
+      pathname: "hooks-modal/Login",
+      screen: {
+        kind: "hook",
+        name: "Login",
+        plugin: { identifier: "login-plugin" },
+      },
+      entry: { id: "e1", title: "One" },
+    });
+
+    presentHook({ isRunningInBackground: true });
+
+    expect(getTopPathname()).toBe("/river/home");
+  });
+
+  it("describes nothing for a modal pathname that is no longer presented", () => {
+    expect(current({ pathname: "modal/gone" }).screen).toEqual({
+      kind: "none",
+    });
+  });
+});

package/Decorators/ZappPipesDataConnector/__tests__/screenToolboxUnavailable.test.ts

@@ -0,0 +1,53 @@
+import { act, renderHook } from "@testing-library/react-native";
+
+// Fails the screen toolbox as a build without the X-Ray bridge does. Others (player, loaded with
+// the toolbox's imports) register, or the helper would never let the screen toolbox try.
+const mockRegister = jest.fn((toolbox) =>
+  toolbox.name === "screen"
+    ? Promise.reject(new Error("no bridge"))
+    : Promise.resolve()
+);
+
+// The X-Ray mock (__mocks__/@applicaster/quick-brick-xray) has no toolbox API: give it one.
+require("@applicaster/quick-brick-xray").registerReactToolbox = mockRegister;
+
+jest.mock("@applicaster/zapp-react-native-redux/AppStore", () => ({
+  appStore: { get: () => undefined },
+}));
+
+const { useScreenToolboxRecord } = require("../screenToolbox");
+
+const mount = (id: string) =>
+  renderHook(() =>
+    useScreenToolboxRecord({ id }, "home", 0, undefined, "/river/home")
+  );
+
+const mounted = () => {
+  // Other toolboxes (player) may register first.
+  const { tools } = mockRegister.mock.calls.find(
+    ([toolbox]) => toolbox.name === "screen"
+  )[0];
+
+  return tools
+    .find((tool) => tool.name === "current")
+    .handler({ pathname: "/river/home" }).mounted;
+};
+
+describe("screenToolbox without the X-Ray bridge", () => {
+  it("drops its records and stops recording", async () => {
+    mount("c1");
+
+    // Let the failed registration settle.
+    await act(async () => {});
+
+    expect(mounted()).toEqual([]);
+
+    mount("c2");
+
+    expect(mounted()).toEqual([]);
+
+    expect(
+      mockRegister.mock.calls.filter(([toolbox]) => toolbox.name === "screen")
+    ).toHaveLength(1);
+  });
+});

package/Decorators/ZappPipesDataConnector/index.tsx

@@ -5,7 +5,9 @@ import { useRoute } from "@applicaster/zapp-react-native-utils/reactHooks/naviga
 import { usePlugins } from "@applicaster/zapp-react-native-redux/hooks";
 import { ZappPipesSearchContext } from "@applicaster/zapp-react-native-ui-components/Contexts";
 import { useScreenContext } from "@applicaster/zapp-react-native-utils/reactHooks/screen/useScreenContext";
+import { useUIComponentContext } from "@applicaster/zapp-react-native-ui-components/Contexts/UIComponentContext";
 import { ResolverSelector } from "./ResolverSelector";
+import { useScreenToolboxRecord } from "./screenToolbox";
 import { ComponentDataSourceContext } from "./types";
 
 type Props = {
@@ -22,7 +24,7 @@ export function zappPipesDataConnector(
   Component: React.FC<any> | React.ComponentClass<any>
 ) {
   return function WrappedWithZappPipesData(props: Props) {
-    const { screenData } = useRoute();
+    const { screenData, pathname } = useRoute();
     const plugins = usePlugins();
     const screenContextData = useScreenContext();
 
@@ -53,6 +55,16 @@ export function zappPipesDataConnector(
 
     const [searchContext] = ZappPipesSearchContext.useZappPipesContext();
 
+    const parent = useUIComponentContext() as { id?: string } | null;
+
+    const toolboxRecord = useScreenToolboxRecord(
+      component,
+      riverId,
+      componentIndex,
+      parent?.id,
+      pathname
+    );
+
     // Prepare context for resolvers
     const resolverProps: ComponentDataSourceContext = {
       component,
@@ -71,9 +83,12 @@ export function zappPipesDataConnector(
 
     return (
       <ResolverSelector {...resolverProps}>
-        {(zappPipesDataProps) => (
-          <Component {...props} {...zappPipesDataProps} />
-        )}
+        {(zappPipesDataProps) => {
+          // A plain field on the toolbox record, read only when the agent asks: no render.
+          toolboxRecord.feed = zappPipesDataProps.zappPipesData;
+
+          return <Component {...props} {...zappPipesDataProps} />;
+        }}
       </ResolverSelector>
     );
   };