@applicaster/zapp-react-native-ui-components 14.0.0-alpha.2332850672 → 14.0.0-alpha.2385258459

package/Decorators/ZappPipesDataConnector/__tests__/StaticFeedResolver.test.tsx

@@ -0,0 +1,251 @@
+import React from "react";
+import { render, act, waitFor } from "@testing-library/react-native";
+import { StaticFeedResolver } from "../resolvers/StaticFeedResolver";
+import { View } from "react-native";
+import { ReloadDataFunction } from "@applicaster/zapp-react-native-utils/reactHooks/feed/useFeedLoader";
+
+type MockChildrenArgs = {
+  zappPipesData?: {
+    loading: boolean;
+    data?: any;
+    error?: Error | null;
+  };
+  reloadData?: ReloadDataFunction;
+};
+
+describe("StaticFeedResolver", () => {
+  const mockChildren = jest.fn((_args: MockChildrenArgs) => (
+    <View data-testid="mock-children" />
+  ));
+
+  const mockComponent = {
+    id: "test-component",
+    position: 1,
+  } as any;
+
+  const mockGetStaticComponentFeed = jest.fn();
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+    mockGetStaticComponentFeed.mockResolvedValue({ entry: [{ id: "1" }] });
+  });
+
+  it("should generate correct static URL based on component", () => {
+    render(
+      <StaticFeedResolver
+        getStaticComponentFeed={mockGetStaticComponentFeed}
+        component={mockComponent}
+        componentIndex={0}
+        riverId="test-river"
+      >
+        {mockChildren}
+      </StaticFeedResolver>
+    );
+
+    expect(mockChildren).toHaveBeenCalledWith(
+      expect.objectContaining({
+        zappPipesData: expect.objectContaining({
+          url: "static://component?id=test-component&position=1",
+        }),
+      })
+    );
+  });
+
+  it("should start with loading state", () => {
+    render(
+      <StaticFeedResolver
+        getStaticComponentFeed={mockGetStaticComponentFeed}
+        component={mockComponent}
+        componentIndex={0}
+        riverId="test-river"
+      >
+        {mockChildren}
+      </StaticFeedResolver>
+    );
+
+    expect(mockChildren).toHaveBeenCalledWith(
+      expect.objectContaining({
+        zappPipesData: expect.objectContaining({
+          loading: true,
+          data: null,
+          error: null,
+        }),
+      })
+    );
+  });
+
+  it("should fetch data when mounted", async () => {
+    render(
+      <StaticFeedResolver
+        getStaticComponentFeed={mockGetStaticComponentFeed}
+        component={mockComponent}
+        componentIndex={0}
+        riverId="test-river"
+      >
+        {mockChildren}
+      </StaticFeedResolver>
+    );
+
+    expect(mockGetStaticComponentFeed).toHaveBeenCalledWith({
+      index: 0,
+      component: mockComponent,
+    });
+
+    await waitFor(() => {
+      expect(mockChildren).toHaveBeenLastCalledWith(
+        expect.objectContaining({
+          zappPipesData: expect.objectContaining({
+            loading: false,
+            data: { entry: [{ id: "1" }] },
+          }),
+        })
+      );
+    });
+  });
+
+  it("should handle errors from getStaticComponentFeed", async () => {
+    const error = new Error("Test error");
+    mockGetStaticComponentFeed.mockRejectedValue(error);
+
+    render(
+      <StaticFeedResolver
+        getStaticComponentFeed={mockGetStaticComponentFeed}
+        component={mockComponent}
+        componentIndex={0}
+        riverId="test-river"
+      >
+        {mockChildren}
+      </StaticFeedResolver>
+    );
+
+    await waitFor(() => {
+      expect(mockChildren).toHaveBeenLastCalledWith(
+        expect.objectContaining({
+          zappPipesData: expect.objectContaining({
+            loading: false,
+            error,
+          }),
+        })
+      );
+    });
+  });
+
+  it("should provide a reloadData function that refreshes the data", async () => {
+    render(
+      <StaticFeedResolver
+        getStaticComponentFeed={mockGetStaticComponentFeed}
+        component={mockComponent}
+        componentIndex={0}
+        riverId="test-river"
+      >
+        {mockChildren}
+      </StaticFeedResolver>
+    );
+
+    await waitFor(() => {
+      expect(mockChildren).toHaveBeenLastCalledWith(
+        expect.objectContaining({
+          zappPipesData: expect.objectContaining({
+            loading: false,
+          }),
+        })
+      );
+    });
+
+    const { reloadData } =
+      mockChildren.mock.calls[mockChildren.mock.calls.length - 1][0];
+
+    mockGetStaticComponentFeed.mockClear();
+    mockGetStaticComponentFeed.mockResolvedValue({ entry: [{ id: "2" }] });
+
+    await act(async () => {
+      await reloadData();
+    });
+
+    expect(mockGetStaticComponentFeed).toHaveBeenCalledWith({
+      index: 0,
+      component: mockComponent,
+    });
+
+    await waitFor(() => {
+      expect(mockChildren).toHaveBeenLastCalledWith(
+        expect.objectContaining({
+          zappPipesData: expect.objectContaining({
+            data: { entry: [{ id: "2" }] },
+          }),
+        })
+      );
+    });
+  });
+
+  it("should handle errors in reloadData", async () => {
+    render(
+      <StaticFeedResolver
+        getStaticComponentFeed={mockGetStaticComponentFeed}
+        component={mockComponent}
+        componentIndex={0}
+        riverId="test-river"
+      >
+        {mockChildren}
+      </StaticFeedResolver>
+    );
+
+    await waitFor(() => {
+      expect(mockChildren).toHaveBeenLastCalledWith(
+        expect.objectContaining({
+          zappPipesData: expect.objectContaining({
+            loading: false,
+          }),
+        })
+      );
+    });
+
+    const { reloadData } =
+      mockChildren.mock.calls[mockChildren.mock.calls.length - 1][0];
+
+    const error = new Error("Reload error");
+    mockGetStaticComponentFeed.mockRejectedValue(error);
+
+    await expect(reloadData()).rejects.toEqual(error);
+
+    await waitFor(() => {
+      expect(mockChildren).toHaveBeenLastCalledWith(
+        expect.objectContaining({
+          zappPipesData: expect.objectContaining({
+            error,
+          }),
+        })
+      );
+    });
+  });
+
+  it("should not fetch data if getStaticComponentFeed is not provided", async () => {
+    render(
+      <StaticFeedResolver
+        component={mockComponent}
+        componentIndex={0}
+        riverId="test-river"
+      >
+        {mockChildren}
+      </StaticFeedResolver>
+    );
+
+    expect(mockGetStaticComponentFeed).not.toHaveBeenCalled();
+  });
+
+  it("should provide reloadData function that resolves immediately if getStaticComponentFeed is not provided", async () => {
+    render(
+      <StaticFeedResolver
+        component={mockComponent}
+        componentIndex={0}
+        riverId="test-river"
+      >
+        {mockChildren}
+      </StaticFeedResolver>
+    );
+
+    const { reloadData } = mockChildren.mock.calls[0][0];
+
+    await expect(reloadData()).resolves.toBeUndefined();
+  });
+});

package/Decorators/ZappPipesDataConnector/__tests__/UrlFeedResolver.test.tsx

@@ -0,0 +1,368 @@
+import React from "react";
+import { render } from "@testing-library/react-native";
+import * as useFeedLoaderModule from "@applicaster/zapp-react-native-utils/reactHooks/feed/useFeedLoader";
+import * as useFeedRefreshModule from "@applicaster/zapp-react-native-utils/reactHooks/feed/useFeedRefresh";
+import * as zappPipesClientModule from "@applicaster/zapp-pipes-v2-client";
+import { favoritesListener } from "@applicaster/zapp-react-native-bridge/Favorites";
+import { UrlFeedResolver } from "../resolvers/UrlFeedResolver";
+
+jest.mock("@applicaster/zapp-react-native-utils/reactHooks/feed/useFeedLoader");
+
+jest.mock(
+  "@applicaster/zapp-react-native-utils/reactHooks/feed/useFeedRefresh"
+);
+
+jest.mock("@applicaster/zapp-pipes-v2-client");
+
+jest.mock("@applicaster/zapp-react-native-bridge/Favorites", () => ({
+  favoritesListener: {
+    on: jest.fn(),
+    removeHandler: jest.fn(),
+  },
+}));
+
+jest.mock("../utils", () => ({
+  isVerticalListOrGrid: jest.fn(
+    (component) =>
+      component?.type === "vertical_list" || component?.type === "vertical_grid"
+  ),
+}));
+
+const componentRequiredKeys = { rules: { item_limit: 10 } };
+
+describe("UrlFeedResolver", () => {
+  const mockChildren = jest.fn(() => <div data-testid="mock-children" />);
+  const mockReloadData = jest.fn();
+  const mockLoadNext = jest.fn();
+
+  const mockSubscribeForUrlContextKeyChanges =
+    zappPipesClientModule.subscribeForUrlContextKeyChanges as jest.Mock;
+
+  const mockAddDataSourceListener = jest.fn().mockReturnValue(jest.fn());
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+
+    (useFeedLoaderModule.useFeedLoader as jest.Mock).mockReturnValue({
+      reloadData: mockReloadData,
+      loadNext: mockLoadNext,
+      error: null,
+      loading: false,
+      url: "test-url",
+      data: { entry: [{ id: "1" }] },
+    });
+
+    mockSubscribeForUrlContextKeyChanges.mockReturnValue(jest.fn());
+  });
+
+  it("should use feedUrl directly when provided", () => {
+    const props = {
+      feedUrl: "https://example.com/feed",
+      component: { ...componentRequiredKeys } as any,
+      children: mockChildren,
+      riverId: "test-river",
+    };
+
+    render(<UrlFeedResolver {...props} />);
+
+    expect(useFeedLoaderModule.useFeedLoader).toHaveBeenCalledWith({
+      feedUrl: "https://example.com/feed",
+      pipesOptions: expect.any(Object),
+    });
+  });
+
+  it("should use component.data.source when no feedUrl is provided", () => {
+    const props = {
+      component: {
+        data: {
+          source: "https://example.com/source",
+        },
+        ...componentRequiredKeys,
+      } as any,
+      children: mockChildren,
+      riverId: "test-river",
+    };
+
+    render(<UrlFeedResolver {...props} />);
+
+    expect(useFeedLoaderModule.useFeedLoader).toHaveBeenCalledWith({
+      feedUrl: "https://example.com/source",
+      pipesOptions: expect.any(Object),
+    });
+  });
+
+  it("should handle FAVOURITES type correctly", () => {
+    const props = {
+      component: {
+        data: {
+          source: "favorites-source",
+          type: "FAVOURITES",
+        },
+        ...componentRequiredKeys,
+      } as any,
+      children: mockChildren,
+      riverId: "test-river",
+    };
+
+    render(<UrlFeedResolver {...props} />);
+
+    expect(useFeedLoaderModule.useFeedLoader).toHaveBeenCalledWith({
+      feedUrl: "favorites-source",
+      pipesOptions: expect.objectContaining({
+        clearCache: true,
+        loadLocalFavorites: true,
+      }),
+    });
+
+    expect(favoritesListener.on).toHaveBeenCalledWith(
+      "FAVORITES_CHANGED",
+      mockReloadData
+    );
+  });
+
+  it("should handle APPLICASTER_COLLECTION type correctly", () => {
+    const props = {
+      component: {
+        data: {
+          source: "collection-id",
+          type: "APPLICASTER_COLLECTION",
+        },
+        ...componentRequiredKeys,
+      } as any,
+      children: mockChildren,
+      riverId: "test-river",
+    };
+
+    render(<UrlFeedResolver {...props} />);
+
+    expect(useFeedLoaderModule.useFeedLoader).toHaveBeenCalledWith({
+      feedUrl:
+        "applicaster://fetchData?type=APPLICASTER_COLLECTION&collectionId=collection-id",
+      pipesOptions: expect.any(Object),
+    });
+  });
+
+  it("should handle APPLICASTER_CATEGORY type correctly", () => {
+    const props = {
+      component: {
+        data: {
+          source: "category-id",
+          type: "APPLICASTER_CATEGORY",
+        },
+        ...componentRequiredKeys,
+      } as any,
+      children: mockChildren,
+      riverId: "test-river",
+      plugins: [],
+    };
+
+    render(<UrlFeedResolver {...props} />);
+
+    expect(useFeedLoaderModule.useFeedLoader).toHaveBeenCalledWith({
+      feedUrl: expect.stringContaining(
+        "applicaster://fetchData?type=APPLICASTER_CATEGORY&categoryId=category-id"
+      ),
+      pipesOptions: expect.any(Object),
+    });
+  });
+
+  it("should set up URL context key changes listener", () => {
+    const props = {
+      feedUrl: "https://example.com/feed",
+      component: { ...componentRequiredKeys } as any,
+      children: mockChildren,
+      riverId: "test-river",
+    };
+
+    render(<UrlFeedResolver {...props} />);
+
+    expect(mockSubscribeForUrlContextKeyChanges).toHaveBeenCalledWith(
+      "https://example.com/feed",
+      {},
+      mockReloadData
+    );
+  });
+
+  it("should set up pipesv2 URL listener from plugin if available", () => {
+    const props = {
+      feedUrl: "pipesv2://test-plugin/endpoint",
+      component: { ...componentRequiredKeys } as any,
+      children: mockChildren,
+      riverId: "test-river",
+      plugins: [
+        {
+          identifier: "test-plugin",
+          module: {
+            addDataSourceListener: mockAddDataSourceListener,
+          },
+        },
+      ] as any,
+    };
+
+    render(<UrlFeedResolver {...props} />);
+
+    expect(mockAddDataSourceListener).toHaveBeenCalledWith(mockReloadData);
+    expect(mockSubscribeForUrlContextKeyChanges).not.toHaveBeenCalled();
+  });
+
+  it("should apply item limit from component rules", () => {
+    const props = {
+      feedUrl: "https://example.com/feed",
+      component: {
+        rules: {
+          item_limit: "2",
+        },
+      } as any,
+      children: mockChildren,
+      riverId: "test-river",
+    };
+
+    (useFeedLoaderModule.useFeedLoader as jest.Mock).mockReturnValue({
+      reloadData: mockReloadData,
+      loadNext: mockLoadNext,
+      error: null,
+      loading: false,
+      url: "test-url",
+      data: { entry: [{ id: "1" }, { id: "2" }, { id: "3" }] },
+    });
+
+    render(<UrlFeedResolver {...props} />);
+
+    expect(mockChildren).toHaveBeenCalledWith(
+      expect.objectContaining({
+        zappPipesData: expect.objectContaining({
+          data: expect.objectContaining({
+            entry: [{ id: "1" }, { id: "2" }],
+          }),
+        }),
+      })
+    );
+  });
+
+  it("should conditionally include loadNextData based on isLast and component type", () => {
+    // Case 1: isLast=true, should not include loadNextData regardless of component type
+    const props1 = {
+      feedUrl: "https://example.com/feed",
+      component: {
+        type: "vertical_list",
+        ...componentRequiredKeys,
+      } as any,
+      children: mockChildren,
+      riverId: "test-river",
+      isLast: true,
+    };
+
+    render(<UrlFeedResolver {...props1} />);
+
+    expect(mockChildren).toHaveBeenCalledWith(
+      expect.objectContaining({
+        loadNextData: mockLoadNext,
+      })
+    );
+
+    mockChildren.mockClear();
+
+    // Case 2: isLast=false, vertical_list component, should not include loadNextData
+    const props2 = {
+      feedUrl: "https://example.com/feed",
+      component: {
+        type: "vertical_list",
+        ...componentRequiredKeys,
+      } as any,
+      children: mockChildren,
+      riverId: "test-river",
+      isLast: false,
+    };
+
+    render(<UrlFeedResolver {...props2} />);
+
+    expect(mockChildren).toHaveBeenCalledWith(
+      expect.objectContaining({
+        loadNextData: undefined,
+      })
+    );
+
+    mockChildren.mockClear();
+
+    // Case 3: isLast=false, non-vertical component, should include loadNextData
+    const props3 = {
+      feedUrl: "https://example.com/feed",
+      component: {
+        type: "horizontal_list",
+        ...componentRequiredKeys,
+      } as any,
+      children: mockChildren,
+      riverId: "test-river",
+      isLast: false,
+    };
+
+    render(<UrlFeedResolver {...props3} />);
+
+    expect(mockChildren).toHaveBeenCalledWith(
+      expect.objectContaining({
+        loadNextData: mockLoadNext,
+      })
+    );
+  });
+
+  it("should pass correct zappPipesDataProps to children", () => {
+    const props = {
+      feedUrl: "https://example.com/feed",
+      component: { ...componentRequiredKeys } as any,
+      children: mockChildren,
+      riverId: "test-river",
+    };
+
+    render(<UrlFeedResolver {...props} />);
+
+    expect(mockChildren).toHaveBeenCalledWith({
+      zappPipesData: {
+        url: "test-url",
+        loading: false,
+        data: { entry: [{ id: "1" }] },
+        error: null,
+      },
+      reloadData: mockReloadData,
+      loadNextData: mockLoadNext,
+    });
+  });
+
+  it("should apply feed refresh hook", () => {
+    const props = {
+      feedUrl: "https://example.com/feed",
+      component: { ...componentRequiredKeys } as any,
+      children: mockChildren,
+      riverId: "test-river",
+    };
+
+    render(<UrlFeedResolver {...props} />);
+
+    expect(useFeedRefreshModule.useFeedRefresh).toHaveBeenCalledWith({
+      reloadData: mockReloadData,
+      component: props.component,
+    });
+  });
+
+  it("should clean up listeners on unmount", () => {
+    const props = {
+      component: {
+        data: {
+          source: "favorites-source",
+          type: "FAVOURITES",
+        },
+        ...componentRequiredKeys,
+      } as any,
+      children: mockChildren,
+      riverId: "test-river",
+    };
+
+    const { unmount } = render(<UrlFeedResolver {...props} />);
+
+    unmount();
+
+    expect(favoritesListener.removeHandler).toHaveBeenCalledWith(
+      "FAVORITES_CHANGED",
+      mockReloadData
+    );
+  });
+});

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

@@ -0,0 +1,39 @@
+import { isVerticalListOrGrid } from "../utils";
+
+describe("ZappPipesDataConnector utils", () => {
+  describe("isVerticalListOrGrid", () => {
+    it("should return true for list-qb components", () => {
+      const component = {
+        component_type: "list-qb",
+      } as any;
+
+      expect(isVerticalListOrGrid(component)).toBe(true);
+    });
+
+    it("should return true for grid-qb components", () => {
+      const component = {
+        component_type: "grid-qb",
+      } as any;
+
+      expect(isVerticalListOrGrid(component)).toBe(true);
+    });
+
+    it("should return false for other component types", () => {
+      const component = {
+        component_type: "horizontal-list",
+      } as any;
+
+      expect(isVerticalListOrGrid(component)).toBe(false);
+    });
+
+    it("should return false for undefined component", () => {
+      expect(isVerticalListOrGrid(undefined)).toBe(false);
+    });
+
+    it("should return false for component without type", () => {
+      const component = {} as any;
+
+      expect(isVerticalListOrGrid(component)).toBe(false);
+    });
+  });
+});