@hubspot/ui-extensions 0.12.4 → 0.13.1

package/dist/__tests__/experimental/hooks/useCrmSearch.spec.js

@@ -0,0 +1,586 @@
+import { renderHook, waitFor } from '@testing-library/react';
+import { vi } from 'vitest';
+import { useCrmSearch } from "../../../experimental/hooks/useCrmSearch.js";
+import { fetchCrmSearch } from "../../../experimental/hooks/utils/fetchCrmSearch.js";
+vi.mock('../../../logger', () => ({
+    logger: {
+        debug: vi.fn(),
+        info: vi.fn(),
+        warn: vi.fn(),
+        error: vi.fn(),
+    },
+}));
+vi.mock('../../../experimental/hooks/utils/fetchCrmSearch.ts', async (importOriginal) => {
+    const actual = (await importOriginal());
+    return {
+        ...actual,
+        fetchCrmSearch: vi.fn(),
+    };
+});
+const mockFetchCrmSearch = fetchCrmSearch;
+const createSearchResult = (objectId) => ({
+    objectId,
+    properties: {},
+});
+const mockResponse = (results, { hasMore = false, total = results.length, after, } = {}) => ({
+    data: { results, total, hasMore, after },
+    cleanup: vi.fn(),
+});
+describe('useCrmSearch', () => {
+    let originalError;
+    beforeAll(() => {
+        originalError = console.error;
+        console.error = (...args) => {
+            if (typeof args[0] === 'string' &&
+                (args[0].includes('ReactDOMTestUtils.act') ||
+                    args[0].includes('was not wrapped in act')))
+                return;
+            originalError.call(console, ...args);
+        };
+    });
+    beforeEach(() => {
+        mockFetchCrmSearch.mockReset();
+    });
+    afterAll(() => {
+        console.error = originalError;
+    });
+    describe('initial state', () => {
+        it('should initialize with proper pagination state', async () => {
+            mockFetchCrmSearch.mockResolvedValue(mockResponse([]));
+            const { result } = renderHook(() => useCrmSearch({
+                objectType: '0-1',
+                properties: ['firstname', 'lastname'],
+                pageSize: 10,
+            }));
+            await waitFor(() => {
+                expect(result.current.results).toEqual([]);
+                expect(result.current.total).toBe(0);
+                expect(result.current.error).toBeNull();
+                expect(result.current.isLoading).toBe(false);
+                expect(result.current.pagination.currentPage).toBe(1);
+                expect(result.current.pagination.pageSize).toBe(10);
+                expect(result.current.pagination.hasNextPage).toBe(false);
+                expect(result.current.pagination.hasPreviousPage).toBe(false);
+            });
+        });
+        it('should use default page size when not specified', async () => {
+            mockFetchCrmSearch.mockResolvedValue(mockResponse([]));
+            const { result } = renderHook(() => useCrmSearch({
+                objectType: '0-1',
+                properties: ['firstname'],
+            }));
+            await waitFor(() => {
+                expect(result.current.pagination.pageSize).toBe(10); // DEFAULT_PAGE_SIZE
+            });
+        });
+        it('should reflect updated pageSize in pagination.pageSize when config changes', async () => {
+            mockFetchCrmSearch.mockResolvedValue(mockResponse([]));
+            const { result, rerender } = renderHook(({ pageSize }) => useCrmSearch({
+                objectType: '0-1',
+                properties: ['firstname'],
+                pageSize,
+            }), { initialProps: { pageSize: 10 } });
+            await waitFor(() => {
+                expect(result.current.pagination.pageSize).toBe(10);
+            });
+            rerender({ pageSize: 25 });
+            await waitFor(() => {
+                expect(result.current.pagination.pageSize).toBe(25);
+            });
+        });
+        it('should reset pagination to first page when pageSize changes mid-session', async () => {
+            mockFetchCrmSearch
+                .mockResolvedValueOnce(mockResponse([createSearchResult(1)], {
+                hasMore: true,
+                total: 3,
+                after: 'cursor-1',
+            }))
+                .mockResolvedValueOnce(mockResponse([createSearchResult(2)], {
+                hasMore: true,
+                total: 3,
+                after: 'cursor-2',
+            }))
+                .mockResolvedValueOnce(mockResponse([createSearchResult(3)], { hasMore: true, total: 3 }));
+            const { result, rerender } = renderHook(({ pageSize }) => useCrmSearch({
+                objectType: '0-1',
+                pageSize,
+            }), { initialProps: { pageSize: 10 } });
+            await waitFor(() => {
+                expect(result.current.pagination.currentPage).toBe(1);
+                expect(result.current.pagination.hasNextPage).toBe(true);
+            });
+            result.current.pagination.nextPage();
+            await waitFor(() => {
+                expect(result.current.pagination.currentPage).toBe(2);
+                expect(result.current.pagination.hasPreviousPage).toBe(true);
+            });
+            rerender({ pageSize: 25 });
+            await waitFor(() => {
+                expect(result.current.pagination.pageSize).toBe(25);
+                expect(result.current.pagination.currentPage).toBe(1);
+                expect(result.current.pagination.hasPreviousPage).toBe(false);
+            });
+            expect(mockFetchCrmSearch).toHaveBeenLastCalledWith(expect.objectContaining({
+                pageSize: 25,
+                after: undefined,
+            }), expect.any(Object));
+        });
+    });
+    describe('data fetching', () => {
+        it('should successfully fetch and return CRM search results with pagination info', async () => {
+            mockFetchCrmSearch.mockResolvedValue({
+                data: {
+                    results: [
+                        {
+                            objectId: 1001,
+                            properties: { firstname: 'John', lastname: 'Doe' },
+                        },
+                    ],
+                    total: 42,
+                    hasMore: true,
+                    after: 'next-cursor',
+                },
+                cleanup: vi.fn(),
+            });
+            const { result } = renderHook(() => useCrmSearch({
+                objectType: '0-1',
+                properties: ['firstname', 'lastname'],
+                pageSize: 10,
+            }));
+            await waitFor(() => {
+                expect(result.current.results).toHaveLength(1);
+                expect(result.current.results[0].objectId).toBe(1001);
+                expect(result.current.total).toBe(42);
+                expect(result.current.pagination.hasNextPage).toBe(true);
+                expect(result.current.pagination.hasPreviousPage).toBe(false);
+                expect(result.current.pagination.currentPage).toBe(1);
+                expect(result.current.isLoading).toBe(false);
+            });
+            expect(mockFetchCrmSearch).toHaveBeenCalledWith(expect.objectContaining({
+                objectType: '0-1',
+                properties: ['firstname', 'lastname'],
+                pageSize: 10,
+                after: undefined,
+            }), expect.any(Object));
+        });
+        it('should handle empty results correctly', async () => {
+            mockFetchCrmSearch.mockResolvedValue(mockResponse([]));
+            const { result } = renderHook(() => useCrmSearch({
+                objectType: '0-1',
+                properties: ['firstname'],
+                pageSize: 5,
+            }));
+            await waitFor(() => {
+                expect(result.current.results).toEqual([]);
+                expect(result.current.total).toBe(0);
+                expect(result.current.pagination.hasNextPage).toBe(false);
+                expect(result.current.pagination.hasPreviousPage).toBe(false);
+                expect(result.current.isLoading).toBe(false);
+                expect(result.current.error).toBeNull();
+            });
+        });
+        it('should pass query, filterGroups, and sorts through to fetchCrmSearch', async () => {
+            mockFetchCrmSearch.mockResolvedValue(mockResponse([]));
+            const config = {
+                objectType: '0-1',
+                properties: ['firstname'],
+                query: 'john',
+                filterGroups: [
+                    {
+                        filters: [
+                            {
+                                propertyName: 'lifecyclestage',
+                                operator: 'EQ',
+                                value: 'lead',
+                            },
+                        ],
+                    },
+                ],
+                sorts: [
+                    { propertyName: 'createdate', direction: 'DESCENDING' },
+                ],
+                pageSize: 10,
+            };
+            renderHook(() => useCrmSearch(config));
+            await waitFor(() => {
+                expect(mockFetchCrmSearch).toHaveBeenCalledWith(expect.objectContaining({
+                    objectType: '0-1',
+                    properties: ['firstname'],
+                    query: 'john',
+                    filterGroups: config.filterGroups,
+                    sorts: config.sorts,
+                    pageSize: 10,
+                    after: undefined,
+                }), expect.any(Object));
+            });
+        });
+    });
+    describe('pagination actions', () => {
+        it('should navigate to next page using the after cursor', async () => {
+            mockFetchCrmSearch.mockResolvedValueOnce(mockResponse([createSearchResult(1)], {
+                hasMore: true,
+                total: 2,
+                after: 'cursor-page-2',
+            }));
+            mockFetchCrmSearch.mockResolvedValueOnce(mockResponse([createSearchResult(2)], { hasMore: false, total: 2 }));
+            const { result } = renderHook(() => useCrmSearch({ objectType: '0-1', pageSize: 10 }));
+            await waitFor(() => {
+                expect(result.current.pagination.currentPage).toBe(1);
+                expect(result.current.pagination.hasNextPage).toBe(true);
+            });
+            result.current.pagination.nextPage();
+            await waitFor(() => {
+                expect(result.current.pagination.currentPage).toBe(2);
+                expect(result.current.pagination.hasNextPage).toBe(false);
+                expect(result.current.pagination.hasPreviousPage).toBe(true);
+            });
+            expect(mockFetchCrmSearch).toHaveBeenLastCalledWith(expect.objectContaining({
+                after: 'cursor-page-2',
+            }), expect.any(Object));
+        });
+        it('should navigate to previous page using the stored cursor history', async () => {
+            mockFetchCrmSearch.mockResolvedValueOnce(mockResponse([createSearchResult(1)], {
+                hasMore: true,
+                total: 3,
+                after: 'cursor-page-2',
+            }));
+            mockFetchCrmSearch.mockResolvedValueOnce(mockResponse([createSearchResult(2)], {
+                hasMore: true,
+                total: 3,
+                after: 'cursor-page-3',
+            }));
+            mockFetchCrmSearch.mockResolvedValueOnce(mockResponse([createSearchResult(1)], {
+                hasMore: true,
+                total: 3,
+                after: 'cursor-page-2',
+            }));
+            const { result } = renderHook(() => useCrmSearch({ objectType: '0-1', pageSize: 10 }));
+            await waitFor(() => {
+                expect(result.current.pagination.currentPage).toBe(1);
+                expect(result.current.pagination.hasNextPage).toBe(true);
+            });
+            result.current.pagination.nextPage();
+            await waitFor(() => {
+                expect(result.current.pagination.currentPage).toBe(2);
+                expect(result.current.pagination.hasPreviousPage).toBe(true);
+            });
+            result.current.pagination.previousPage();
+            await waitFor(() => {
+                expect(result.current.pagination.currentPage).toBe(1);
+                expect(result.current.pagination.hasPreviousPage).toBe(false);
+            });
+        });
+        it('should reset to the first page correctly', async () => {
+            mockFetchCrmSearch.mockResolvedValue(mockResponse([], { hasMore: true, total: 30, after: 'next' }));
+            const { result } = renderHook(() => useCrmSearch({ objectType: '0-1', pageSize: 10 }));
+            await waitFor(() => {
+                expect(result.current.pagination.currentPage).toBe(1);
+                expect(result.current.pagination.hasNextPage).toBe(true);
+            });
+            result.current.pagination.nextPage();
+            await waitFor(() => {
+                expect(result.current.pagination.currentPage).toBe(2);
+            });
+            result.current.pagination.nextPage();
+            await waitFor(() => {
+                expect(result.current.pagination.currentPage).toBe(3);
+            });
+            result.current.pagination.reset();
+            await waitFor(() => {
+                expect(result.current.pagination.currentPage).toBe(1);
+                expect(result.current.pagination.hasPreviousPage).toBe(false);
+            });
+        });
+        it('should not refetch when reset is called on the first page', async () => {
+            mockFetchCrmSearch.mockResolvedValueOnce(mockResponse([createSearchResult(1)], {
+                hasMore: true,
+                total: 2,
+                after: 'next',
+            }));
+            const { result } = renderHook(() => useCrmSearch({ objectType: '0-1', pageSize: 10 }));
+            await waitFor(() => {
+                expect(result.current.pagination.currentPage).toBe(1);
+            });
+            result.current.pagination.reset();
+            await waitFor(() => {
+                expect(result.current.pagination.currentPage).toBe(1);
+            });
+            expect(result.current.results).toEqual([createSearchResult(1)]);
+            expect(mockFetchCrmSearch).toHaveBeenCalledTimes(1);
+        });
+        it('should not allow navigation beyond pagination boundaries', async () => {
+            mockFetchCrmSearch.mockResolvedValue(mockResponse([], { hasMore: false, total: 0 }));
+            const { result } = renderHook(() => useCrmSearch({ objectType: '0-1', pageSize: 10 }));
+            await waitFor(() => {
+                expect(result.current.pagination.currentPage).toBe(1);
+                expect(result.current.pagination.hasNextPage).toBe(false);
+            });
+            result.current.pagination.nextPage();
+            expect(result.current.pagination.currentPage).toBe(1);
+            result.current.pagination.previousPage();
+            expect(result.current.pagination.currentPage).toBe(1);
+        });
+    });
+    describe('error handling', () => {
+        it('should handle fetch errors correctly', async () => {
+            const errorMessage = 'Failed to fetch CRM search results';
+            mockFetchCrmSearch.mockRejectedValue(new Error(errorMessage));
+            const { result } = renderHook(() => useCrmSearch({
+                objectType: '0-1',
+                properties: ['firstname'],
+                pageSize: 10,
+            }));
+            await waitFor(() => {
+                expect(result.current.error).toBeInstanceOf(Error);
+                expect(result.current.error?.message).toBe(errorMessage);
+                expect(result.current.results).toEqual([]);
+                expect(result.current.total).toBe(0);
+                expect(result.current.isLoading).toBe(false);
+            });
+        });
+        it('should handle null config gracefully', async () => {
+            mockFetchCrmSearch.mockResolvedValue(mockResponse([]));
+            // @ts-expect-error - intentional type issue to check the failure state
+            const { result } = renderHook(() => useCrmSearch(null));
+            await waitFor(() => {
+                expect(result.current.isLoading).toBe(false);
+                expect(result.current.results).toEqual([]);
+                expect(result.current.pagination.pageSize).toBe(10); // DEFAULT_PAGE_SIZE
+            });
+            expect(mockFetchCrmSearch).toHaveBeenCalledWith(expect.objectContaining({
+                objectType: undefined,
+                properties: undefined,
+                query: undefined,
+                filterGroups: undefined,
+                sorts: undefined,
+                pageSize: 10,
+                after: undefined,
+            }), expect.any(Object));
+        });
+        it('should handle undefined config gracefully', async () => {
+            mockFetchCrmSearch.mockResolvedValue(mockResponse([]));
+            // @ts-expect-error - intentional type issue to check the failure state
+            const { result } = renderHook(() => useCrmSearch(undefined));
+            await waitFor(() => {
+                expect(result.current.isLoading).toBe(false);
+                expect(result.current.results).toEqual([]);
+                expect(result.current.pagination.pageSize).toBe(10); // DEFAULT_PAGE_SIZE
+            });
+        });
+        it('should handle empty config object gracefully', async () => {
+            mockFetchCrmSearch.mockResolvedValue(mockResponse([]));
+            // @ts-expect-error - intentional type issue to check the failure state
+            const { result } = renderHook(() => useCrmSearch({}));
+            await waitFor(() => {
+                expect(result.current.isLoading).toBe(false);
+                expect(result.current.results).toEqual([]);
+                expect(result.current.pagination.pageSize).toBe(10); // DEFAULT_PAGE_SIZE
+            });
+            expect(mockFetchCrmSearch).toHaveBeenCalledWith(expect.objectContaining({
+                objectType: undefined,
+                pageSize: 10,
+                after: undefined,
+            }), expect.any(Object));
+        });
+        it('should handle config missing objectType', async () => {
+            mockFetchCrmSearch.mockResolvedValue(mockResponse([]));
+            const { result } = renderHook(() => 
+            // @ts-expect-error - intentional type issue to check the failure state
+            useCrmSearch({ properties: ['firstname'], pageSize: 5 }));
+            await waitFor(() => {
+                expect(result.current.isLoading).toBe(false);
+                expect(result.current.pagination.pageSize).toBe(5);
+            });
+            expect(mockFetchCrmSearch).toHaveBeenCalledWith(expect.objectContaining({
+                objectType: undefined,
+                properties: ['firstname'],
+                pageSize: 5,
+                after: undefined,
+            }), expect.any(Object));
+        });
+    });
+    describe('options handling', () => {
+        it('should pass formatting options to fetchCrmSearch', async () => {
+            mockFetchCrmSearch.mockResolvedValue(mockResponse([]));
+            const config = {
+                objectType: '0-1',
+                properties: ['firstname', 'lastname'],
+                pageSize: 10,
+            };
+            const options = {
+                propertiesToFormat: ['firstname'],
+                formattingOptions: {
+                    date: { format: 'MM/DD/YYYY', relative: true },
+                },
+            };
+            renderHook(() => useCrmSearch(config, options));
+            await waitFor(() => {
+                expect(mockFetchCrmSearch).toHaveBeenCalledWith(expect.objectContaining(config), options);
+            });
+        });
+        it('should use default empty options when no options provided', async () => {
+            mockFetchCrmSearch.mockResolvedValue(mockResponse([]));
+            const config = {
+                objectType: '0-1',
+                properties: ['firstname'],
+                pageSize: 10,
+            };
+            renderHook(() => useCrmSearch(config));
+            await waitFor(() => {
+                expect(mockFetchCrmSearch).toHaveBeenCalledWith(expect.objectContaining(config), {
+                    propertiesToFormat: undefined,
+                    formattingOptions: undefined,
+                });
+            });
+        });
+    });
+    describe('refetch', () => {
+        it('should handle complete refetch lifecycle with loading states and data preservation', async () => {
+            const initialData = [createSearchResult(1)];
+            const refetchedData = [createSearchResult(2)];
+            let resolveRefetch = () => { };
+            const refetchPromise = new Promise((resolve) => {
+                resolveRefetch = resolve;
+            });
+            mockFetchCrmSearch
+                .mockResolvedValueOnce(mockResponse(initialData))
+                .mockImplementationOnce(() => refetchPromise);
+            const { result } = renderHook(() => useCrmSearch({ objectType: '0-1', pageSize: 10 }));
+            await waitFor(() => {
+                expect(result.current.results).toEqual(initialData);
+                expect(result.current.isLoading).toBe(false);
+                expect(result.current.isRefetching).toBe(false);
+            });
+            const refetchCall = result.current.refetch();
+            await waitFor(() => expect(result.current.isRefetching).toBe(true));
+            expect(result.current.results).toEqual(initialData);
+            resolveRefetch(mockResponse(refetchedData, { hasMore: true, total: 5, after: 'next' }));
+            await refetchCall;
+            await waitFor(() => {
+                expect(result.current.isRefetching).toBe(false);
+                expect(result.current.results).toEqual(refetchedData);
+                expect(result.current.total).toBe(5);
+            });
+        });
+        it('should handle errors during refetch and allow recovery', async () => {
+            const initialData = [createSearchResult(1)];
+            const recoveredData = [createSearchResult(2)];
+            mockFetchCrmSearch
+                .mockResolvedValueOnce(mockResponse(initialData))
+                .mockRejectedValueOnce(new Error('Failed to refetch CRM search results'))
+                .mockResolvedValueOnce(mockResponse(recoveredData));
+            const { result } = renderHook(() => useCrmSearch({ objectType: '0-1', pageSize: 10 }));
+            await waitFor(() => expect(result.current.results).toEqual(initialData));
+            await result.current.refetch();
+            await waitFor(() => {
+                expect(result.current.error?.message).toBe('Failed to refetch CRM search results');
+                expect(result.current.results).toEqual(initialData);
+            });
+            await result.current.refetch();
+            await waitFor(() => {
+                expect(result.current.error).toBeNull();
+                expect(result.current.results).toEqual(recoveredData);
+            });
+        });
+        it('should cancel in-flight refetch when called again', async () => {
+            const initialData = [createSearchResult(1)];
+            const firstRefetchCleanup = vi.fn();
+            const secondRefetchCleanup = vi.fn();
+            mockFetchCrmSearch
+                .mockResolvedValueOnce(mockResponse(initialData))
+                .mockResolvedValueOnce({
+                ...mockResponse([createSearchResult(2)]),
+                cleanup: firstRefetchCleanup,
+            })
+                .mockResolvedValueOnce({
+                ...mockResponse([createSearchResult(3)]),
+                cleanup: secondRefetchCleanup,
+            });
+            const { result } = renderHook(() => useCrmSearch({ objectType: '0-1', pageSize: 10 }));
+            await waitFor(() => expect(result.current.results).toEqual(initialData));
+            await Promise.all([result.current.refetch(), result.current.refetch()]);
+            await waitFor(() => expect(result.current.results).toEqual([createSearchResult(3)]));
+            expect(firstRefetchCleanup).toHaveBeenCalledTimes(1);
+            expect(secondRefetchCleanup).not.toHaveBeenCalled();
+        });
+        it('should maintain current page and pagination state during refetch', async () => {
+            mockFetchCrmSearch
+                .mockResolvedValueOnce(mockResponse([createSearchResult(1)], {
+                hasMore: true,
+                total: 2,
+                after: 'cursor-2',
+            }))
+                .mockResolvedValueOnce(mockResponse([createSearchResult(2)], {
+                hasMore: true,
+                total: 2,
+                after: 'cursor-3',
+            }))
+                .mockResolvedValueOnce(mockResponse([createSearchResult(2)], {
+                hasMore: true,
+                total: 2,
+                after: 'cursor-3',
+            }));
+            const { result } = renderHook(() => useCrmSearch({ objectType: '0-1', pageSize: 10 }));
+            await waitFor(() => expect(result.current.pagination.currentPage).toBe(1));
+            result.current.pagination.nextPage();
+            await waitFor(() => expect(result.current.pagination.currentPage).toBe(2));
+            await result.current.refetch();
+            await waitFor(() => {
+                expect(result.current.pagination.currentPage).toBe(2);
+                expect(result.current.pagination.hasNextPage).toBe(true);
+                expect(result.current.pagination.hasPreviousPage).toBe(true);
+            });
+            expect(mockFetchCrmSearch).toHaveBeenLastCalledWith(expect.objectContaining({ after: 'cursor-2' }), expect.any(Object));
+        });
+    });
+    describe('lifecycle management', () => {
+        it('should call cleanup function on unmount', async () => {
+            const mockCleanup = vi.fn();
+            mockFetchCrmSearch.mockResolvedValue({
+                data: { results: [], total: 0, hasMore: false },
+                cleanup: mockCleanup,
+            });
+            const { unmount } = renderHook(() => useCrmSearch({ objectType: '0-1', pageSize: 10 }));
+            await waitFor(() => {
+                expect(mockFetchCrmSearch).toHaveBeenCalled();
+            });
+            unmount();
+            await waitFor(() => {
+                expect(mockCleanup).toHaveBeenCalled();
+            });
+        });
+        it('should handle stable reference optimization for config', async () => {
+            mockFetchCrmSearch.mockResolvedValue(mockResponse([]));
+            const config = {
+                objectType: '0-1',
+                properties: ['firstname'],
+                pageSize: 10,
+            };
+            const { rerender } = renderHook(({ configProp }) => useCrmSearch(configProp), { initialProps: { configProp: config } });
+            await waitFor(() => {
+                expect(mockFetchCrmSearch).toHaveBeenCalledTimes(1);
+            });
+            rerender({ configProp: { ...config } });
+            await waitFor(() => {
+                expect(mockFetchCrmSearch).toHaveBeenCalledTimes(1);
+            });
+        });
+        it('should refetch when query changes', async () => {
+            mockFetchCrmSearch.mockResolvedValue(mockResponse([]));
+            const { rerender } = renderHook(({ query }) => useCrmSearch({
+                objectType: '0-1',
+                properties: ['firstname'],
+                pageSize: 10,
+                query,
+            }), { initialProps: { query: 'john' } });
+            await waitFor(() => {
+                expect(mockFetchCrmSearch).toHaveBeenCalledTimes(1);
+            });
+            rerender({ query: 'jane' });
+            await waitFor(() => {
+                expect(mockFetchCrmSearch).toHaveBeenCalledTimes(2);
+                expect(mockFetchCrmSearch).toHaveBeenLastCalledWith(expect.objectContaining({ query: 'jane' }), expect.any(Object));
+            });
+        });
+    });
+});