@applicaster/zapp-react-native-utils 16.0.0-alpha.1833861900 → 16.0.0-alpha.1852433906

package/reactHooks/feed/__tests__/feedInvalidation.test.tsx

@@ -0,0 +1,338 @@
+import React from "react";
+import { Provider } from "react-redux";
+import { configureStore } from "@reduxjs/toolkit";
+import { act, renderHook } from "@testing-library/react-native";
+import reducer, {
+  loadPipesData,
+  unsubscribeFromDataSource,
+  zappPipesClear,
+} from "@applicaster/zapp-react-native-redux/ZappPipes";
+import { zappPipesMiddleware } from "../../../../zapp-react-native-redux/ZappPipes/middleware";
+import { useFeedLoader } from "../useFeedLoader";
+
+const mockGet = jest.fn();
+const mockPost = jest.fn();
+const mockSubscribe = jest.fn();
+const mockRelease = jest.fn();
+let mockChange: () => void;
+let mockLoad: ReturnType<typeof jest.fn>;
+
+jest.mock("@applicaster/zapp-pipes-v2-client", () => ({
+  __esModule: true,
+  default: jest.fn(() => ({
+    get: (...args) => mockGet(...args),
+    post: (...args) => mockPost(...args),
+  })),
+  RequestBuilder: jest.fn(() => ({
+    setResolvers() {
+      return this;
+    },
+    build: async () => ({}),
+  })),
+  subscribeForUrlContextKeyChanges: (...args) => mockSubscribe(...args),
+}));
+
+jest.mock("../useInflatedUrl", () => ({
+  useInflatedUrl: ({ feedUrl }) => feedUrl,
+}));
+
+jest.mock("../useLoadPipesDataDispatch", () => ({
+  useLoadPipesDataDispatch: () => mockLoad,
+}));
+
+const url = "https://example.test/feed";
+const data = { id: "feed", type: { value: "feed" }, entry: [] };
+
+const settle = async () => {
+  for (let index = 0; index < 30; index++) await Promise.resolve();
+};
+
+const createHarness = (plugins: QuickBrickPlugin[] = []) => {
+  const store = configureStore({
+    reducer: {
+      zappPipes: reducer,
+      appData: () => ({ layoutVersion: "v2" }),
+      plugins: () => plugins,
+    },
+    middleware: (defaults) =>
+      defaults({ serializableCheck: false }).concat(zappPipesMiddleware),
+  });
+
+  mockLoad = jest.fn((feedUrl, options) =>
+    store.dispatch(loadPipesData(feedUrl, options))
+  );
+
+  const wrapper = ({ children }) => (
+    <Provider store={store}>{children}</Provider>
+  );
+
+  return { store, wrapper };
+};
+
+describe("dependency-driven feed invalidation", () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+    mockGet.mockResolvedValue({ response: data, code: 200 });
+    mockPost.mockResolvedValue({ response: data, code: 200 });
+
+    mockSubscribe.mockImplementation((_url, _options, onChange) => {
+      mockChange = onChange;
+
+      return mockRelease;
+    });
+  });
+
+  afterEach(() => unsubscribeFromDataSource());
+
+  it("silently revalidates a shared mounted feed once and keeps its content", async () => {
+    const { store, wrapper } = createHarness();
+
+    const first = renderHook(() => useFeedLoader({ feedUrl: url }), {
+      wrapper,
+    });
+
+    const second = renderHook(() => useFeedLoader({ feedUrl: url }), {
+      wrapper,
+    });
+
+    await act(settle);
+
+    expect(mockGet).toHaveBeenCalledTimes(1);
+    expect(mockSubscribe).toHaveBeenCalledTimes(1);
+    let finish;
+
+    mockGet.mockImplementationOnce(
+      () =>
+        new Promise((resolve) => {
+          finish = resolve;
+        })
+    );
+
+    await act(async () => {
+      mockChange();
+      await settle();
+    });
+
+    expect(mockGet).toHaveBeenCalledTimes(2);
+    expect(first.result.current.data).toEqual(data);
+    expect(first.result.current.loading).toBe(false);
+    expect(store.getState().zappPipes[url].refreshing).toBe(true);
+
+    await act(async () => {
+      finish({ response: data, code: 200 });
+      await settle();
+    });
+
+    expect(store.getState().zappPipes[url].stale).toBeUndefined();
+    first.unmount();
+    second.unmount();
+    expect(mockRelease).not.toHaveBeenCalled();
+  });
+
+  it("invalidates an unmounted cache without fetching and revalidates on remount", async () => {
+    const { store, wrapper } = createHarness();
+
+    const first = renderHook(() => useFeedLoader({ feedUrl: url }), {
+      wrapper,
+    });
+
+    await act(settle);
+    first.unmount();
+
+    mockChange();
+    mockChange();
+    await settle();
+
+    expect(mockGet).toHaveBeenCalledTimes(1);
+
+    expect(store.getState().zappPipes[url]).toMatchObject({
+      stale: true,
+      invalidationVersion: 2,
+      data,
+    });
+
+    const second = renderHook(() => useFeedLoader({ feedUrl: url }), {
+      wrapper,
+    });
+
+    await act(settle);
+
+    expect(mockGet).toHaveBeenCalledTimes(2);
+    expect(store.getState().zappPipes[url].stale).toBeUndefined();
+    second.unmount();
+  });
+
+  it("runs one follow-up when invalidated repeatedly during a request", async () => {
+    const { store, wrapper } = createHarness();
+    let finish;
+
+    mockGet.mockImplementationOnce(
+      () =>
+        new Promise((resolve) => {
+          finish = resolve;
+        })
+    );
+
+    const hook = renderHook(() => useFeedLoader({ feedUrl: url }), { wrapper });
+    await act(settle);
+
+    await act(async () => {
+      mockChange();
+      mockChange();
+      await settle();
+    });
+
+    expect(mockGet).toHaveBeenCalledTimes(1);
+
+    await act(async () => {
+      finish({ response: data, code: 200 });
+      await settle();
+    });
+
+    expect(mockGet).toHaveBeenCalledTimes(2);
+    expect(store.getState().zappPipes[url].stale).toBeUndefined();
+    hook.unmount();
+  });
+
+  it("stops a failed revalidation until another dependency change", async () => {
+    const { wrapper } = createHarness();
+    const hook = renderHook(() => useFeedLoader({ feedUrl: url }), { wrapper });
+    await act(settle);
+    mockGet.mockRejectedValueOnce(new Error("network unavailable"));
+
+    await act(async () => {
+      mockChange();
+      await settle();
+    });
+
+    expect(mockGet).toHaveBeenCalledTimes(2);
+    expect(hook.result.current.error).toBeDefined();
+
+    await act(async () => {
+      mockChange();
+      await settle();
+    });
+
+    expect(mockGet).toHaveBeenCalledTimes(3);
+    expect(hook.result.current.error).toBeUndefined();
+    hook.unmount();
+  });
+
+  it("releases cache subscriptions for direct clear actions", async () => {
+    const { store } = createHarness();
+    await store.dispatch(loadPipesData(url));
+    await store.dispatch(loadPipesData(`${url}/two`));
+    store.dispatch(zappPipesClear(url));
+    expect(mockRelease).toHaveBeenCalledTimes(1);
+    store.dispatch(zappPipesClear());
+    expect(mockRelease).toHaveBeenCalledTimes(2);
+  });
+
+  it("preserves POST method and body when revalidating", async () => {
+    const { wrapper } = createHarness();
+    const bodyParams = { filter: "recent" };
+
+    const hook = renderHook(
+      () =>
+        useFeedLoader({
+          feedUrl: url,
+          pipesOptions: { method: "post", bodyParams },
+        }),
+      { wrapper }
+    );
+
+    await act(settle);
+
+    await act(async () => {
+      mockChange();
+      await settle();
+    });
+
+    expect(mockSubscribe).toHaveBeenCalledWith(
+      url,
+      { method: "post" },
+      expect.any(Function)
+    );
+
+    expect(mockPost).toHaveBeenCalledTimes(2);
+    expect(mockPost).toHaveBeenLastCalledWith(url, bodyParams);
+    expect(mockGet).not.toHaveBeenCalled();
+    hook.unmount();
+  });
+
+  it("does not revalidate a skipped mounted feed until loading is enabled", async () => {
+    const { store, wrapper } = createHarness();
+    await store.dispatch(loadPipesData(url));
+
+    const hook = renderHook(
+      ({ skipLoading }) =>
+        useFeedLoader({
+          feedUrl: url,
+          pipesOptions: { skipLoading },
+        }),
+      { wrapper, initialProps: { skipLoading: true } }
+    );
+
+    await act(async () => {
+      mockChange();
+      await settle();
+    });
+
+    expect(mockGet).toHaveBeenCalledTimes(1);
+    expect(store.getState().zappPipes[url].stale).toBe(true);
+
+    hook.rerender({ skipLoading: false });
+    await act(settle);
+    expect(mockGet).toHaveBeenCalledTimes(2);
+    expect(store.getState().zappPipes[url].stale).toBeUndefined();
+    hook.unmount();
+  });
+
+  it("shares GET revalidation with an omitted or empty unused request body", async () => {
+    const { store } = createHarness();
+    await store.dispatch(loadPipesData(url));
+    mockChange();
+    mockGet.mockClear();
+
+    await Promise.all([
+      store.dispatch(loadPipesData(url)),
+      store.dispatch(loadPipesData(url, { method: "get", bodyParams: {} })),
+    ]);
+
+    expect(mockGet).toHaveBeenCalledTimes(1);
+  });
+
+  it("keeps plugin observation until its cache is cleared", async () => {
+    const release = jest.fn();
+    let changed;
+
+    const addDataSourceListener = jest.fn((callback) => {
+      changed = callback;
+
+      return release;
+    });
+
+    const { store, wrapper } = createHarness([
+      {
+        identifier: "generic-provider",
+        module: { addDataSourceListener },
+      } as QuickBrickPlugin,
+    ]);
+
+    const pluginUrl = "pipesv2://generic-provider/feed";
+
+    const hook = renderHook(() => useFeedLoader({ feedUrl: pluginUrl }), {
+      wrapper,
+    });
+
+    await act(settle);
+    hook.unmount();
+    changed();
+    await settle();
+    expect(mockGet).toHaveBeenCalledTimes(1);
+    expect(store.getState().zappPipes[pluginUrl].stale).toBe(true);
+    expect(release).not.toHaveBeenCalled();
+    store.dispatch(zappPipesClear(pluginUrl));
+    expect(release).toHaveBeenCalledTimes(1);
+  });
+});

package/reactHooks/feed/__tests__/useBatchLoading.test.tsx

@@ -2,6 +2,7 @@ import { renderHook, waitFor } from "@testing-library/react-native";
 import { allFeedsIsReady, useBatchLoading } from "../useBatchLoading";
 import { WrappedWithProviders } from "@applicaster/zapp-react-native-utils/testUtils";
 import { appStore } from "@applicaster/zapp-react-native-redux/AppStore";
+import * as ZappPipes from "@applicaster/zapp-react-native-redux/ZappPipes";
 
 jest.mock("../../navigation");
 
@@ -32,11 +33,16 @@ describe("useBatchLoading", () => {
     // ... more items
   ];
 
-  beforeAll(() => {
-    jest.useFakeTimers();
+  beforeEach(() => {
+    jest
+      .spyOn(ZappPipes, "loadPipesData")
+      .mockImplementation((url, options) => async (dispatch) => {
+        dispatch(ZappPipes.zappPipesRequestStart(url, options));
+      });
   });
 
   afterEach(() => {
+    jest.restoreAllMocks();
     jest.clearAllMocks();
   });
 

package/reactHooks/feed/__tests__/useInflatedUrl.test.tsx

@@ -242,4 +242,29 @@ describe("useGetUrlInflater", () => {
     const url = result.current(source, mapping);
     expect(url).toBe("https://foo.com/shows/A123?q=user%20query");
   });
+
+  it("handles search queries with apostrophes without HTML entity escaping or URL truncation", () => {
+    const source =
+      "https://api.pc-cms.tele.quebec/api/applicaster/v1/mobile/search?q={{q}}";
+
+    const mapping = {
+      q: { source: "search", property: "q" },
+    };
+
+    const searchContext = getSearchContext("L'aventure", mapping);
+
+    const result = getInflatedDataSourceUrl({
+      source,
+      contexts: {
+        search: searchContext,
+      },
+      mapping,
+    });
+
+    expect(result).toBe(
+      "https://api.pc-cms.tele.quebec/api/applicaster/v1/mobile/search?q=L'aventure"
+    );
+
+    expect(result).not.toContain("'");
+  });
 });

package/reactHooks/feed/__tests__/useMarkPipesDataStale.test.tsx

@@ -0,0 +1,243 @@
+import { renderHook } from "@testing-library/react-native";
+import * as zappPipesModule from "@applicaster/zapp-react-native-redux/ZappPipes";
+import * as useRouteHook from "@applicaster/zapp-react-native-utils/reactHooks/navigation/useRoute";
+import * as useNavigationHooks from "@applicaster/zapp-react-native-utils/reactHooks/navigation/useNavigation";
+import * as useIsScreenActiveHook from "@applicaster/zapp-react-native-utils/reactHooks/navigation/useIsScreenActive";
+import { refreshCoordinator } from "../../../refreshUtils/RefreshCoordinator";
+import { useMarkPipesDataStale } from "../useMarkPipesDataStale";
+
+const mockDispatch = jest.fn();
+
+jest.mock("@applicaster/zapp-react-native-redux", () => ({
+  ...jest.requireActual("@applicaster/zapp-react-native-redux"),
+  useAppDispatch: () => mockDispatch,
+}));
+
+jest.mock(
+  "@applicaster/zapp-react-native-ui-components/Decorators/RiverFeedLoader/utils/getDatasourceUrl",
+  () => ({
+    getDatasourceUrl: jest.fn(
+      (_ctx, component) => component?.data?.source || null
+    ),
+  })
+);
+
+jest.mock(
+  "@applicaster/zapp-react-native-ui-components/Decorators/RiverFeedLoader/utils/usePipesContexts",
+  () => ({
+    usePipesContexts: jest.fn(() => ({})),
+  })
+);
+
+describe("useMarkPipesDataStale", () => {
+  let mockNavigator: any;
+  let mockRoute: any;
+  let mockIsActive: boolean;
+
+  const riverId = "river-123";
+
+  const refreshableComponent: any = {
+    id: "comp-1",
+    rules: { clear_cache_on_reload: true },
+    data: { source: "https://feed.example.com/data1" },
+  };
+
+  const stringBooleanComponent: any = {
+    id: "comp-2",
+    rules: { clear_cache_on_reload: "true" },
+    data: { source: "https://feed.example.com/data2" },
+  };
+
+  const nonRefreshableComponent: any = {
+    id: "comp-3",
+    rules: { clear_cache_on_reload: false },
+    data: { source: "https://feed.example.com/data3" },
+  };
+
+  const noSourceComponent: any = {
+    id: "comp-4",
+    rules: { clear_cache_on_reload: true },
+  };
+
+  const allComponents = [
+    refreshableComponent,
+    stringBooleanComponent,
+    nonRefreshableComponent,
+    noSourceComponent,
+  ];
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+
+    mockIsActive = true;
+
+    mockNavigator = {
+      currentRoute: "river/river-123",
+    };
+
+    mockRoute = {
+      pathname: "river/river-123",
+      screenData: { id: riverId },
+    };
+
+    jest
+      .spyOn(useNavigationHooks, "useNavigation")
+      .mockImplementation(() => mockNavigator);
+
+    jest.spyOn(useRouteHook, "useRoute").mockImplementation(() => mockRoute);
+
+    jest
+      .spyOn(useIsScreenActiveHook, "useIsScreenActive")
+      .mockImplementation(() => mockIsActive);
+
+    jest
+      .spyOn(refreshCoordinator, "triggerRefresh")
+      .mockImplementation(jest.fn());
+
+    jest
+      .spyOn(zappPipesModule, "markPipesDataStale")
+      .mockImplementation(
+        (url, opts) => ({ type: "MARK_STALE", url, opts }) as any
+      );
+  });
+
+  describe("on unmount", () => {
+    it("marks clear_cache_on_reload feeds stale on unmount", () => {
+      const { unmount } = renderHook(() =>
+        useMarkPipesDataStale(riverId, allComponents)
+      );
+
+      expect(mockDispatch).not.toHaveBeenCalled();
+
+      unmount();
+
+      expect(zappPipesModule.markPipesDataStale).toHaveBeenCalledWith(
+        "https://feed.example.com/data1",
+        { riverId }
+      );
+
+      expect(zappPipesModule.markPipesDataStale).toHaveBeenCalledWith(
+        "https://feed.example.com/data2",
+        { riverId }
+      );
+
+      expect(zappPipesModule.markPipesDataStale).not.toHaveBeenCalledWith(
+        "https://feed.example.com/data3",
+        expect.anything()
+      );
+
+      expect(mockDispatch).toHaveBeenCalledTimes(2);
+    });
+
+    it("does not mark stale on unmount if pathname includes videoModal", () => {
+      mockRoute.pathname = "videoModal/item-123";
+
+      const { unmount } = renderHook(() =>
+        useMarkPipesDataStale(riverId, allComponents)
+      );
+
+      unmount();
+
+      expect(mockDispatch).not.toHaveBeenCalled();
+    });
+  });
+
+  describe("on screen return (screen not unmounted in Transitioner)", () => {
+    it("does not trigger refresh on initial mount", () => {
+      renderHook(() => useMarkPipesDataStale(riverId, allComponents));
+
+      expect(refreshCoordinator.triggerRefresh).not.toHaveBeenCalled();
+      expect(mockDispatch).not.toHaveBeenCalled();
+    });
+
+    it("triggers refresh and marks stale when returning from a deeper screen", () => {
+      const { rerender } = renderHook(() =>
+        useMarkPipesDataStale(riverId, allComponents)
+      );
+
+      // 1. User navigates away to a deeper screen
+      mockNavigator.currentRoute = "river/deeper-screen";
+      mockIsActive = false;
+      rerender({});
+
+      expect(refreshCoordinator.triggerRefresh).not.toHaveBeenCalled();
+      expect(mockDispatch).not.toHaveBeenCalled();
+
+      // 2. User presses back and returns to original screen
+      mockNavigator.currentRoute = "river/river-123";
+      mockIsActive = true;
+      rerender({});
+
+      expect(refreshCoordinator.triggerRefresh).toHaveBeenCalledTimes(1);
+
+      expect(refreshCoordinator.triggerRefresh).toHaveBeenCalledWith(
+        [refreshableComponent, stringBooleanComponent],
+        riverId
+      );
+
+      expect(zappPipesModule.markPipesDataStale).toHaveBeenCalledWith(
+        "https://feed.example.com/data1",
+        { riverId }
+      );
+
+      expect(zappPipesModule.markPipesDataStale).toHaveBeenCalledWith(
+        "https://feed.example.com/data2",
+        { riverId }
+      );
+
+      expect(mockDispatch).toHaveBeenCalledTimes(2);
+    });
+
+    it("does not trigger duplicate refreshes on subsequent re-renders on the same screen", () => {
+      const { rerender } = renderHook(() =>
+        useMarkPipesDataStale(riverId, allComponents)
+      );
+
+      // Navigate away
+      mockNavigator.currentRoute = "river/deeper-screen";
+      mockIsActive = false;
+      rerender({});
+
+      // Return
+      mockNavigator.currentRoute = "river/river-123";
+      mockIsActive = true;
+      rerender({});
+
+      expect(refreshCoordinator.triggerRefresh).toHaveBeenCalledTimes(1);
+
+      // Subsequent re-render without navigation
+      rerender({});
+      rerender({});
+
+      expect(refreshCoordinator.triggerRefresh).toHaveBeenCalledTimes(1);
+    });
+
+    it("triggers refresh again if user navigates away a second time and returns", () => {
+      const { rerender } = renderHook(() =>
+        useMarkPipesDataStale(riverId, allComponents)
+      );
+
+      // First trip: navigate away and return
+      mockNavigator.currentRoute = "river/screen-2";
+      mockIsActive = false;
+      rerender({});
+
+      mockNavigator.currentRoute = "river/river-123";
+      mockIsActive = true;
+      rerender({});
+
+      expect(refreshCoordinator.triggerRefresh).toHaveBeenCalledTimes(1);
+
+      // Second trip: navigate away to another screen and return
+      mockNavigator.currentRoute = "river/screen-3";
+      mockIsActive = false;
+      rerender({});
+
+      mockNavigator.currentRoute = "river/river-123";
+      mockIsActive = true;
+      rerender({});
+
+      expect(refreshCoordinator.triggerRefresh).toHaveBeenCalledTimes(2);
+    });
+  });
+});

package/reactHooks/feed/index.ts

@@ -6,7 +6,11 @@ export { useEntryScreenId } from "./useEntryScreenId";
 
 export { useBuildPipesUrl } from "./useBuildPipesUrl";
 
-export { usePipesCacheReset } from "./usePipesCacheReset";
+export {
+  useMarkPipesDataStale,
+  // eslint-disable-next-line @typescript-eslint/no-deprecated
+  usePipesCacheReset,
+} from "./useMarkPipesDataStale";
 
 export { useBatchLoading } from "./useBatchLoading";
 

package/reactHooks/feed/useBatchLoading.ts

@@ -159,9 +159,17 @@ export const useBatchLoading = (
     options.riverId,
   ]);
 
+  // Initial preload only. Batch loading warms the first batch of component
+  // feeds and signals readiness; the feed set is frozen at mount on purpose.
+  // Per-component loads and reloads (including stale revalidation) are owned by
+  // useFeedLoader in ZappPipesDataConnector. Re-running on `feeds`/input changes
+  // would re-fire on every store update and cause redundant dispatch storms, so
+  // this intentionally runs once on mount.
+  /* eslint-disable @wogns3623/better-exhaustive-deps/exhaustive-deps */
   React.useEffect(() => {
     runBatchLoading();
-  }, [runBatchLoading]); // Adding runBatchLoading as a dependency to ensure that it reloads feeds when clearPipesData is called
+  }, []);
+  /* eslint-enable @wogns3623/better-exhaustive-deps/exhaustive-deps */
 
   React.useEffect(() => {
     // check if all feeds are ready and set hasEverBeenReady to true