@wise/dynamic-flow-client 5.30.1 → 5.30.2-experimental-949e5e5

package/build/tests/CollectionLayout.test.js

@@ -1,722 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-/* eslint-disable @typescript-eslint/no-unsafe-assignment */
-import { act, screen, waitFor } from '@testing-library/react';
-import { userEvent } from '@testing-library/user-event';
-import { vi, beforeEach } from 'vitest';
-import { renderWithProviders, respondWith } from '../test-utils';
-import { mockIntersectionObserver } from '../test-utils/mockIntersectionObserver';
-import DynamicFlowWise from '../test-utils/DynamicFlowWise';
-import { createCollectionRenderer } from '@wise/dynamic-flow-renderers';
-const user = userEvent.setup({ advanceTimers: vi.advanceTimersByTime });
-const collectionLayout = {
-    type: 'collection',
-    baseRequest: {
-        url: '/collection',
-        method: 'POST',
-    },
-    analyticsId: 'collection-aid',
-    search: {
-        param: 'query',
-        title: 'Search',
-        hint: 'Search items...',
-    },
-    initialState: {
-        analytics: { source: 'initial', shared: 'initial' },
-        nextCursor: 'page-2',
-        filters: [
-            {
-                param: 'category',
-                type: 'select',
-                options: [
-                    { value: 'popular', title: 'Popular' },
-                    { value: 'recent', title: 'Recent' },
-                ],
-            },
-        ],
-        sections: [
-            {
-                type: 'items',
-                id: 'section-1',
-                title: 'Results',
-                items: [
-                    {
-                        entityId: 'action-item',
-                        title: 'Action Item',
-                        description: 'Item with primary behavior',
-                        primaryBehavior: {
-                            type: 'action',
-                            action: { url: '/item-action' },
-                        },
-                    },
-                    {
-                        entityId: 'link-item',
-                        title: 'Link Item',
-                        description: 'Item with link behavior',
-                        primaryBehavior: {
-                            type: 'link',
-                            url: 'https://example.com',
-                        },
-                    },
-                    {
-                        entityId: 'cta-item',
-                        title: 'CTA Item',
-                        description: 'Item with call to action',
-                        callToAction: {
-                            title: 'Edit',
-                            behavior: {
-                                type: 'action',
-                                action: { url: '/cta-action' },
-                            },
-                        },
-                    },
-                    {
-                        entityId: 'cta-link-item',
-                        title: 'CTA Link Item',
-                        description: 'Item with link CTA',
-                        callToAction: {
-                            title: 'View',
-                            behavior: {
-                                type: 'link',
-                                url: 'https://cta-link.com',
-                            },
-                        },
-                    },
-                    {
-                        entityId: 'disabled-cta-item',
-                        title: 'Disabled CTA Action Item',
-                        description: 'Item with link CTA',
-                        disabled: true,
-                        callToAction: {
-                            title: 'View (Disabled)',
-                            behavior: {
-                                type: 'action',
-                                action: { url: '/item-action' },
-                            },
-                        },
-                    },
-                    {
-                        entityId: 'disabled-behavior-item',
-                        title: 'Disabled Behavior Action Item',
-                        disabled: true,
-                        primaryBehavior: {
-                            type: 'action',
-                            action: { url: '/item-action' },
-                        },
-                    },
-                ],
-            },
-        ],
-    },
-};
-const step = {
-    id: 'collection-step',
-    title: 'Collection Step',
-    schemas: [],
-    layout: [collectionLayout],
-};
-const getDefaultProps = () => ({
-    flowId: 'flow-id',
-    httpClient: vi.fn(),
-    onCompletion: vi.fn(),
-    onError: vi.fn(),
-    onEvent: vi.fn(),
-    onLog: vi.fn(),
-});
-describe('CollectionLayout', () => {
-    beforeEach(() => {
-        mockIntersectionObserver(false);
-        vi.spyOn(window, 'scrollTo').mockImplementation(() => { });
-    });
-    describe('rendering', () => {
-        it('should render items from the initial state', () => {
-            const props = Object.assign(Object.assign({}, getDefaultProps()), { initialStep: step });
-            renderWithProviders(_jsx(DynamicFlowWise, Object.assign({}, props)));
-            expect(screen.getByText('Action Item')).toBeInTheDocument();
-            expect(screen.getByText('Link Item')).toBeInTheDocument();
-            expect(screen.getByText('CTA Item')).toBeInTheDocument();
-        });
-        it('should render filter chips', () => {
-            const props = Object.assign(Object.assign({}, getDefaultProps()), { initialStep: step });
-            renderWithProviders(_jsx(DynamicFlowWise, Object.assign({}, props)));
-            expect(screen.getByText('Popular')).toBeInTheDocument();
-            expect(screen.getByText('Recent')).toBeInTheDocument();
-        });
-        it('should render the search input', () => {
-            const props = Object.assign(Object.assign({}, getDefaultProps()), { initialStep: step });
-            renderWithProviders(_jsx(DynamicFlowWise, Object.assign({}, props)));
-            expect(screen.getByPlaceholderText('Search items...')).toBeInTheDocument();
-        });
-        it('should use the first hint as the search placeholder', () => {
-            const stepWithHints = Object.assign(Object.assign({}, step), { layout: [
-                    Object.assign(Object.assign({}, collectionLayout), { search: Object.assign(Object.assign({}, collectionLayout.search), { param: 'query', hints: ['Find items', 'Other'] }) }),
-                ] });
-            const props = Object.assign(Object.assign({}, getDefaultProps()), { initialStep: stepWithHints });
-            renderWithProviders(_jsx(DynamicFlowWise, Object.assign({}, props)));
-            expect(screen.getByPlaceholderText('Find items')).toBeInTheDocument();
-        });
-        it('should use the search configuration from the initial state', () => {
-            const stepWithInitialStateSearch = Object.assign(Object.assign({}, step), { layout: [
-                    Object.assign(Object.assign({}, collectionLayout), { search: undefined, initialState: Object.assign(Object.assign({}, collectionLayout.initialState), { search: { param: 'query', hints: ['Search the initial state'] } }) }),
-                ] });
-            const props = Object.assign(Object.assign({}, getDefaultProps()), { initialStep: stepWithInitialStateSearch });
-            renderWithProviders(_jsx(DynamicFlowWise, Object.assign({}, props)));
-            expect(screen.getByPlaceholderText('Search the initial state')).toBeInTheDocument();
-        });
-        it('should render components from a layout section', () => {
-            const stepWithLayoutSection = Object.assign(Object.assign({}, step), { layout: [
-                    Object.assign(Object.assign({}, collectionLayout), { initialState: Object.assign(Object.assign({}, collectionLayout.initialState), { sections: [
-                                ...collectionLayout.initialState.sections,
-                                {
-                                    type: 'layout',
-                                    id: 'layout',
-                                    title: 'Layout section',
-                                    components: [
-                                        { type: 'markdown', content: 'Content rendered inside the collection' },
-                                    ],
-                                },
-                            ] }) }),
-                ] });
-            const props = Object.assign(Object.assign({}, getDefaultProps()), { initialStep: stepWithLayoutSection });
-            renderWithProviders(_jsx(DynamicFlowWise, Object.assign({}, props)));
-            expect(screen.getByText('Layout section')).toBeInTheDocument();
-            expect(screen.getByText('Content rendered inside the collection')).toBeInTheDocument();
-        });
-    });
-    describe('primaryBehavior', () => {
-        it('should trigger an action when an item with action behavior is clicked', async () => {
-            const props = Object.assign(Object.assign({}, getDefaultProps()), { initialStep: step });
-            renderWithProviders(_jsx(DynamicFlowWise, Object.assign({}, props)));
-            await user.click(screen.getByText('Action Item'));
-            await waitFor(() => {
-                expect(props.httpClient).toHaveBeenCalledWith('/item-action', expect.anything());
-            });
-        });
-        it('should trigger onLink when an item with link behavior is clicked', async () => {
-            const onLink = vi.fn();
-            const props = Object.assign(Object.assign({}, getDefaultProps()), { onLink, initialStep: step });
-            renderWithProviders(_jsx(DynamicFlowWise, Object.assign({}, props)));
-            await user.click(screen.getByText('Link Item'));
-            await waitFor(() => {
-                expect(onLink).toHaveBeenCalledWith('https://example.com');
-            });
-        });
-        it('should be disabled if the item is disabled', async () => {
-            const props = Object.assign(Object.assign({}, getDefaultProps()), { initialStep: step });
-            renderWithProviders(_jsx(DynamicFlowWise, Object.assign({}, props)));
-            expect(screen.getByRole('button', { name: 'Disabled Behavior Action Item' })).toBeDisabled();
-        });
-    });
-    describe('callToAction', () => {
-        it('should render a CTA button that triggers an action on click', async () => {
-            const props = Object.assign(Object.assign({}, getDefaultProps()), { initialStep: step });
-            renderWithProviders(_jsx(DynamicFlowWise, Object.assign({}, props)));
-            await user.click(screen.getByRole('button', { name: 'Edit' }));
-            await waitFor(() => {
-                expect(props.httpClient).toHaveBeenCalledWith('/cta-action', expect.anything());
-            });
-        });
-        it('should render a CTA link with the correct href', () => {
-            const props = Object.assign(Object.assign({}, getDefaultProps()), { initialStep: step });
-            renderWithProviders(_jsx(DynamicFlowWise, Object.assign({}, props)));
-            const link = screen.getByRole('link', { name: 'View' });
-            expect(link).toHaveAttribute('href', 'https://cta-link.com');
-        });
-        it('should be disabled if the item is disabled', async () => {
-            const props = Object.assign(Object.assign({}, getDefaultProps()), { initialStep: step });
-            renderWithProviders(_jsx(DynamicFlowWise, Object.assign({}, props)));
-            expect(screen.getByRole('button', { name: 'View (Disabled)' })).toBeDisabled();
-        });
-    });
-    describe('custom components', () => {
-        it('renders custom content after the search, with the collection props', async () => {
-            const httpClient = vi.fn().mockReturnValue(new Promise(() => { }));
-            const props = Object.assign(Object.assign({}, getDefaultProps()), { httpClient, initialStep: step });
-            renderWithProviders(_jsx(DynamicFlowWise, Object.assign({}, props, { renderers: [
-                    createCollectionRenderer(() => true, {
-                        AfterSearch: ({ state }) => { var _a; var _b; return _jsx("p", { children: `After search: ${(_b = (_a = state.search) === null || _a === void 0 ? void 0 : _a.query) !== null && _b !== void 0 ? _b : ''}` }); },
-                    }),
-                ] })));
-            expect(screen.getByText('After search:')).toBeInTheDocument();
-            expect(screen.getByPlaceholderText('Search items...')).toBeInTheDocument();
-            expect(screen.getByText('Action Item')).toBeInTheDocument();
-            await user.type(screen.getByPlaceholderText('Search items...'), 'hello');
-            expect(screen.getByText('After search: hello')).toBeInTheDocument();
-        });
-    });
-    describe('pagination', () => {
-        it('should keep the results when loading more fails', async () => {
-            mockIntersectionObserver(true);
-            const pendingResponse = new Promise(() => {
-                // keep the retry pending, so the results are shown in the loading state
-            });
-            const httpClient = vi
-                .fn()
-                .mockResolvedValueOnce(respondWith({}, { status: 500 }))
-                .mockReturnValueOnce(pendingResponse);
-            const props = Object.assign(Object.assign({}, getDefaultProps()), { httpClient, initialStep: step });
-            renderWithProviders(_jsx(DynamicFlowWise, Object.assign({}, props)));
-            await user.click(await screen.findByRole('button', { name: 'Load more' }));
-            expect(httpClient).toHaveBeenCalledTimes(2);
-            expect(screen.getByText('Action Item')).toBeInTheDocument();
-        });
-        it('should auto-load when afterSections is empty', async () => {
-            mockIntersectionObserver(true);
-            const stepWithEmptyAfterSections = Object.assign(Object.assign({}, step), { layout: [
-                    Object.assign(Object.assign({}, collectionLayout), { initialState: Object.assign(Object.assign({}, collectionLayout.initialState), { afterSections: [] }) }),
-                ] });
-            const httpClient = vi.fn().mockResolvedValue(respondWith({ sections: [] }));
-            const props = Object.assign(Object.assign({}, getDefaultProps()), { httpClient, initialStep: stepWithEmptyAfterSections });
-            renderWithProviders(_jsx(DynamicFlowWise, Object.assign({}, props)));
-            await waitFor(() => {
-                expect(httpClient).toHaveBeenCalledWith('/collection', expect.objectContaining({ method: 'POST' }));
-            });
-        });
-        it('should emit pagination events with the state analytics', async () => {
-            mockIntersectionObserver(true);
-            const onEvent = vi.fn();
-            const httpClient = vi.fn().mockImplementation(async () => respondWith({
-                analytics: { page: 'two', shared: 'response' },
-                sections: [],
-            }));
-            const props = Object.assign(Object.assign({}, getDefaultProps()), { httpClient, onEvent, initialStep: step });
-            renderWithProviders(_jsx(DynamicFlowWise, Object.assign({}, props)));
-            await waitFor(() => {
-                expect(onEvent).toHaveBeenCalledWith('Dynamic Flow - Collection Pagination Triggered', expect.objectContaining({ source: 'initial', shared: 'initial' }));
-            });
-            await waitFor(() => {
-                expect(onEvent).toHaveBeenCalledWith('Dynamic Flow - Collection Pagination Succeeded', expect.objectContaining({ source: 'initial', page: 'two', shared: 'response' }));
-            });
-        });
-        it('should show a load more button instead of auto-loading when afterSections is non-empty', async () => {
-            mockIntersectionObserver(true);
-            const stepWithAfterSections = Object.assign(Object.assign({}, step), { layout: [
-                    Object.assign(Object.assign({}, collectionLayout), { initialState: Object.assign(Object.assign({}, collectionLayout.initialState), { afterSections: [{ type: 'markdown', content: 'End of current results' }] }) }),
-                ] });
-            const httpClient = vi.fn().mockResolvedValue(respondWith({ sections: [] }));
-            const props = Object.assign(Object.assign({}, getDefaultProps()), { httpClient, initialStep: stepWithAfterSections });
-            renderWithProviders(_jsx(DynamicFlowWise, Object.assign({}, props)));
-            expect(screen.getByText('End of current results')).toBeInTheDocument();
-            expect(httpClient).not.toHaveBeenCalled();
-            await user.click(screen.getByRole('button', { name: 'Load more' }));
-            await waitFor(() => {
-                expect(httpClient).toHaveBeenCalledWith('/collection', expect.objectContaining({ method: 'POST' }));
-            });
-        });
-        it('should emit failed pagination events with the state analytics', async () => {
-            mockIntersectionObserver(true);
-            const onEvent = vi.fn();
-            const httpClient = vi.fn().mockResolvedValue(respondWith({}, { status: 500 }));
-            const props = Object.assign(Object.assign({}, getDefaultProps()), { httpClient, onEvent, initialStep: step });
-            renderWithProviders(_jsx(DynamicFlowWise, Object.assign({}, props)));
-            await waitFor(() => {
-                expect(onEvent).toHaveBeenCalledWith('Dynamic Flow - Collection Pagination Triggered', expect.objectContaining({ source: 'initial', shared: 'initial' }));
-            });
-            await waitFor(() => {
-                expect(onEvent).toHaveBeenCalledWith('Dynamic Flow - Collection Pagination Failed', expect.objectContaining({ source: 'initial', shared: 'initial' }));
-            });
-        });
-        it('should load more items when the collection is paginated', async () => {
-            mockIntersectionObserver(true);
-            const paginatedResponse = {
-                sections: [
-                    {
-                        id: 'section-1',
-                        items: [{ title: 'Page 2 Item', description: 'From page 2' }],
-                    },
-                ],
-            };
-            const httpClient = vi.fn().mockImplementation(async () => respondWith(paginatedResponse));
-            const props = Object.assign(Object.assign({}, getDefaultProps()), { httpClient, initialStep: step });
-            renderWithProviders(_jsx(DynamicFlowWise, Object.assign({}, props)));
-            await waitFor(() => {
-                expect(httpClient).toHaveBeenCalledWith('/collection', expect.objectContaining({ method: 'POST' }));
-            });
-            await waitFor(() => {
-                expect(screen.getByText('Page 2 Item')).toBeInTheDocument();
-            });
-            expect(screen.getByText('Action Item')).toBeInTheDocument();
-        });
-        it('should render a layout section returned by pagination', async () => {
-            mockIntersectionObserver(true);
-            const paginatedResponse = {
-                sections: [
-                    {
-                        type: 'layout',
-                        id: 'paginated-layout',
-                        title: 'More information',
-                        components: [{ type: 'markdown', content: 'Content returned by pagination' }],
-                    },
-                ],
-            };
-            const httpClient = vi.fn().mockResolvedValue(respondWith(paginatedResponse));
-            const props = Object.assign(Object.assign({}, getDefaultProps()), { httpClient, initialStep: step });
-            renderWithProviders(_jsx(DynamicFlowWise, Object.assign({}, props)));
-            await waitFor(() => {
-                expect(screen.getByText('More information')).toBeInTheDocument();
-                expect(screen.getByText('Content returned by pagination')).toBeInTheDocument();
-            });
-        });
-        it('should retain the previous section title when paginated response has same section id with no title property', async () => {
-            mockIntersectionObserver(true);
-            const paginatedResponse = {
-                sections: [
-                    {
-                        id: 'section-1',
-                        items: [{ title: 'Page 2 Item', description: 'From page 2' }],
-                    },
-                ],
-            };
-            const httpClient = vi.fn().mockImplementation(async () => respondWith(paginatedResponse));
-            const props = Object.assign(Object.assign({}, getDefaultProps()), { httpClient, initialStep: step });
-            renderWithProviders(_jsx(DynamicFlowWise, Object.assign({}, props)));
-            await waitFor(() => {
-                expect(httpClient).toHaveBeenCalledWith('/collection', expect.objectContaining({ method: 'POST' }));
-            });
-            await waitFor(() => {
-                expect(screen.getByText('Page 2 Item')).toBeInTheDocument();
-            });
-            expect(screen.getByText('Results')).toBeInTheDocument();
-        });
-        it('should use the incoming section title when paginated response has same section id with a different title', async () => {
-            mockIntersectionObserver(true);
-            const paginatedResponse = {
-                sections: [
-                    {
-                        id: 'section-1',
-                        title: 'Updated Results',
-                        items: [{ title: 'Page 2 Item', description: 'From page 2' }],
-                    },
-                ],
-            };
-            const httpClient = vi.fn().mockImplementation(async () => respondWith(paginatedResponse));
-            const props = Object.assign(Object.assign({}, getDefaultProps()), { httpClient, initialStep: step });
-            renderWithProviders(_jsx(DynamicFlowWise, Object.assign({}, props)));
-            await waitFor(() => {
-                expect(httpClient).toHaveBeenCalledWith('/collection', expect.objectContaining({ method: 'POST' }));
-            });
-            await waitFor(() => {
-                expect(screen.getByText('Page 2 Item')).toBeInTheDocument();
-            });
-            expect(screen.queryByText('Results')).not.toBeInTheDocument();
-            expect(screen.getByText('Updated Results')).toBeInTheDocument();
-        });
-        it('should retain state on error, and show a button to retry', async () => {
-            mockIntersectionObserver(true);
-            const httpClient = vi
-                .fn()
-                .mockResolvedValueOnce(respondWith({}, { status: 500 }))
-                .mockResolvedValueOnce(respondWith({
-                sections: [
-                    {
-                        id: 'section-1',
-                        title: 'Updated Results',
-                        items: [{ title: 'Page 2 Item', description: 'From page 2' }],
-                    },
-                ],
-            }));
-            const props = Object.assign(Object.assign({}, getDefaultProps()), { httpClient, initialStep: step });
-            renderWithProviders(_jsx(DynamicFlowWise, Object.assign({}, props)));
-            await waitFor(() => {
-                expect(httpClient).toHaveBeenCalledWith('/collection', expect.objectContaining({ method: 'POST' }));
-            });
-            await waitFor(() => {
-                expect(screen.getByRole('button', { name: 'Load more' })).toBeInTheDocument();
-            });
-            expect(screen.getByText('Action Item')).toBeInTheDocument();
-            await user.click(screen.getByRole('button', { name: 'Load more' }));
-            await waitFor(() => {
-                expect(screen.getByText('Page 2 Item')).toBeInTheDocument();
-            });
-        });
-        it('should show pagination loading state while retrying', async () => {
-            mockIntersectionObserver(true);
-            const pendingResponse = new Promise(() => {
-                // Keep the retry request pending so the loading state can be asserted.
-            });
-            const httpClient = vi
-                .fn()
-                .mockResolvedValueOnce(respondWith({}, { status: 500 }))
-                .mockReturnValueOnce(pendingResponse);
-            const props = Object.assign(Object.assign({}, getDefaultProps()), { httpClient, initialStep: step });
-            renderWithProviders(_jsx(DynamicFlowWise, Object.assign({}, props)));
-            const retryButton = await screen.findByRole('button', { name: 'Load more' });
-            await user.click(retryButton);
-            expect(httpClient).toHaveBeenCalledTimes(2);
-            expect(screen.queryByRole('button', { name: 'Load more' })).not.toBeInTheDocument();
-            expect(screen.getByTestId('collection-pagination-loader')).toBeInTheDocument();
-        });
-    });
-    describe('search', () => {
-        it('should clear the results when a search fails', async () => {
-            const pendingResponse = new Promise(() => {
-                // keep the retry pending, so the results are shown in the loading state
-            });
-            const httpClient = vi
-                .fn()
-                .mockResolvedValueOnce(respondWith({}, { status: 500 }))
-                .mockReturnValueOnce(pendingResponse);
-            const props = Object.assign(Object.assign({}, getDefaultProps()), { httpClient, initialStep: step });
-            renderWithProviders(_jsx(DynamicFlowWise, Object.assign({}, props)));
-            expect(screen.getByText('Action Item')).toBeInTheDocument();
-            await user.type(screen.getByPlaceholderText('Search items...'), 'hello');
-            await act(async () => vi.advanceTimersByTimeAsync(800));
-            await user.click(await screen.findByRole('button', { name: 'Retry' }));
-            expect(screen.queryByText('Action Item')).not.toBeInTheDocument();
-        });
-        it('should emit search events with the state analytics', async () => {
-            const onEvent = vi.fn();
-            const httpClient = vi.fn().mockImplementation(async () => respondWith({
-                analytics: { source: 'search-response' },
-                sections: [],
-            }));
-            const props = Object.assign(Object.assign({}, getDefaultProps()), { httpClient, onEvent, initialStep: step });
-            renderWithProviders(_jsx(DynamicFlowWise, Object.assign({}, props)));
-            await user.type(screen.getByPlaceholderText('Search items...'), 'hello');
-            await act(async () => vi.advanceTimersByTimeAsync(800));
-            await waitFor(() => {
-                expect(onEvent).toHaveBeenCalledWith('Dynamic Flow - Collection Search Triggered', expect.objectContaining({ source: 'initial', shared: 'initial' }));
-            });
-            await waitFor(() => {
-                expect(onEvent).toHaveBeenCalledWith('Dynamic Flow - Collection Search Succeeded', expect.objectContaining({ source: 'search-response' }));
-            });
-        });
-        it('should emit failed search events with the state analytics', async () => {
-            const onEvent = vi.fn();
-            const httpClient = vi.fn().mockResolvedValue(respondWith({}, { status: 500 }));
-            const props = Object.assign(Object.assign({}, getDefaultProps()), { httpClient, onEvent, initialStep: step });
-            renderWithProviders(_jsx(DynamicFlowWise, Object.assign({}, props)));
-            await user.type(screen.getByPlaceholderText('Search items...'), 'hello');
-            await act(async () => vi.advanceTimersByTimeAsync(800));
-            await waitFor(() => {
-                expect(onEvent).toHaveBeenCalledWith('Dynamic Flow - Collection Search Triggered', expect.objectContaining({ source: 'initial', shared: 'initial' }));
-            });
-            await waitFor(() => {
-                expect(onEvent).toHaveBeenCalledWith('Dynamic Flow - Collection Search Failed', expect.objectContaining({ source: 'initial', shared: 'initial' }));
-            });
-        });
-        it('should trigger a search request after typing in the search input', async () => {
-            const searchResponse = {
-                sections: [
-                    {
-                        id: 'section-1',
-                        items: [{ title: 'Search Result', description: 'Found it' }],
-                    },
-                ],
-            };
-            const httpClient = vi.fn().mockImplementation(async () => respondWith(searchResponse));
-            const props = Object.assign(Object.assign({}, getDefaultProps()), { httpClient, initialStep: step });
-            renderWithProviders(_jsx(DynamicFlowWise, Object.assign({}, props)));
-            const searchInput = screen.getByPlaceholderText('Search items...');
-            await user.type(searchInput, 'hello');
-            vi.advanceTimersByTime(800);
-            await waitFor(() => {
-                expect(httpClient).toHaveBeenCalledWith('/collection', expect.objectContaining({
-                    body: expect.stringContaining('hello'),
-                }));
-            });
-            await waitFor(() => {
-                expect(screen.getByText('Search Result')).toBeInTheDocument();
-            });
-        });
-        it('should hide the search error and show loading state while retrying', async () => {
-            const pendingResponse = new Promise(() => {
-                // Keep the retry request pending so the loading state can be asserted.
-            });
-            const httpClient = vi
-                .fn()
-                .mockResolvedValueOnce(respondWith({}, { status: 500 }))
-                .mockReturnValueOnce(pendingResponse);
-            const props = Object.assign(Object.assign({}, getDefaultProps()), { httpClient, initialStep: step });
-            renderWithProviders(_jsx(DynamicFlowWise, Object.assign({}, props)));
-            await user.type(screen.getByPlaceholderText('Search items...'), 'hello');
-            await act(async () => vi.advanceTimersByTimeAsync(800));
-            await user.click(await screen.findByRole('button', { name: 'Retry' }));
-            expect(httpClient).toHaveBeenCalledTimes(2);
-            expect(screen.queryByRole('button', { name: 'Retry' })).not.toBeInTheDocument();
-            expect(screen.getByTestId('collection-search-loader')).toBeInTheDocument();
-        });
-    });
-    describe('filters', () => {
-        const getLastRequestBody = (httpClient) => {
-            const [, init] = httpClient.mock.lastCall;
-            return JSON.parse(init.body);
-        };
-        const multiSelectStep = Object.assign(Object.assign({}, step), { layout: [
-                Object.assign(Object.assign({}, collectionLayout), { initialState: Object.assign(Object.assign({}, collectionLayout.initialState), { filters: [
-                            {
-                                param: 'tags',
-                                type: 'select',
-                                multiSelect: true,
-                                options: [
-                                    { value: 'a', title: 'Tag A' },
-                                    { value: 'b', title: 'Tag B' },
-                                    { value: 'c', title: 'Tag C' },
-                                ],
-                            },
-                        ] }) }),
-            ] });
-        it('should select only the clicked option of a single-select filter', async () => {
-            const httpClient = vi.fn().mockImplementation(async () => respondWith({ sections: [] }));
-            const props = Object.assign(Object.assign({}, getDefaultProps()), { httpClient, initialStep: step });
-            renderWithProviders(_jsx(DynamicFlowWise, Object.assign({}, props)));
-            await user.click(screen.getByText('Recent'));
-            expect(screen.getByRole('radio', { name: 'Recent' })).toBeChecked();
-            expect(screen.getByRole('radio', { name: 'Popular' })).not.toBeChecked();
-            expect(getLastRequestBody(httpClient)).toEqual(expect.objectContaining({ category: 'recent' }));
-        });
-        it('should deselect the selected option of a single-select filter when it is clicked again', async () => {
-            const httpClient = vi.fn().mockImplementation(async () => respondWith({ sections: [] }));
-            const props = Object.assign(Object.assign({}, getDefaultProps()), { httpClient, initialStep: step });
-            renderWithProviders(_jsx(DynamicFlowWise, Object.assign({}, props)));
-            await user.click(screen.getByText('Popular'));
-            expect(screen.getByRole('radio', { name: 'Popular' })).not.toBeChecked();
-            expect(getLastRequestBody(httpClient)).not.toHaveProperty('category');
-        });
-        it('should select several options of a multi-select filter', async () => {
-            const httpClient = vi.fn().mockImplementation(async () => respondWith({ sections: [] }));
-            const props = Object.assign(Object.assign({}, getDefaultProps()), { httpClient, initialStep: multiSelectStep });
-            renderWithProviders(_jsx(DynamicFlowWise, Object.assign({}, props)));
-            await user.click(screen.getByText('Tag A'));
-            await user.click(screen.getByText('Tag B'));
-            // only selected chips in a multi-select have a clear button
-            expect(screen.getByRole('button', { name: 'Clear Tag A' })).toBeInTheDocument();
-            expect(screen.getByRole('button', { name: 'Clear Tag B' })).toBeInTheDocument();
-            expect(screen.queryByRole('button', { name: 'Clear Tag C' })).not.toBeInTheDocument();
-            expect(getLastRequestBody(httpClient)).toEqual(expect.objectContaining({ tags: ['a', 'b'] }));
-        });
-        it('should deselect one option of a multi-select filter, keeping the others', async () => {
-            const httpClient = vi.fn().mockImplementation(async () => respondWith({ sections: [] }));
-            const props = Object.assign(Object.assign({}, getDefaultProps()), { httpClient, initialStep: multiSelectStep });
-            renderWithProviders(_jsx(DynamicFlowWise, Object.assign({}, props)));
-            await user.click(screen.getByText('Tag A'));
-            await user.click(screen.getByText('Tag B'));
-            // a selected chip in a multi-select is deselected with its clear button
-            await user.click(screen.getByRole('button', { name: 'Clear Tag A' }));
-            expect(screen.queryByRole('button', { name: 'Clear Tag A' })).not.toBeInTheDocument();
-            expect(screen.getByRole('button', { name: 'Clear Tag B' })).toBeInTheDocument();
-            expect(getLastRequestBody(httpClient)).toEqual(expect.objectContaining({ tags: ['b'] }));
-        });
-        it('should clear the results when filtering fails', async () => {
-            const pendingResponse = new Promise(() => {
-                // keep the retry pending, so the results are shown in the loading state
-            });
-            const httpClient = vi
-                .fn()
-                .mockResolvedValueOnce(respondWith({}, { status: 500 }))
-                .mockReturnValueOnce(pendingResponse);
-            const props = Object.assign(Object.assign({}, getDefaultProps()), { httpClient, initialStep: step });
-            renderWithProviders(_jsx(DynamicFlowWise, Object.assign({}, props)));
-            expect(screen.getByText('Action Item')).toBeInTheDocument();
-            await user.click(screen.getByText('Recent'));
-            await user.click(await screen.findByRole('button', { name: 'Retry' }));
-            expect(screen.queryByText('Action Item')).not.toBeInTheDocument();
-        });
-        it('should auto-select the first option of a single-select when no selection is provided', async () => {
-            const props = Object.assign(Object.assign({}, getDefaultProps()), { initialStep: step });
-            renderWithProviders(_jsx(DynamicFlowWise, Object.assign({}, props)));
-            expect(screen.getByRole('radio', { name: 'Popular' })).toBeChecked();
-            expect(screen.getByRole('radio', { name: 'Recent' })).not.toBeChecked();
-        });
-        it('should trigger a search request when a filter is selected', async () => {
-            const filterResponse = {
-                sections: [
-                    {
-                        id: 'section-1',
-                        items: [{ title: 'Filtered Item', description: 'Filtered' }],
-                    },
-                ],
-            };
-            const httpClient = vi.fn().mockImplementation(async () => respondWith(filterResponse));
-            const props = Object.assign(Object.assign({}, getDefaultProps()), { httpClient, initialStep: step });
-            renderWithProviders(_jsx(DynamicFlowWise, Object.assign({}, props)));
-            await user.click(screen.getByText('Popular'));
-            await waitFor(() => {
-                expect(httpClient).toHaveBeenCalledWith('/collection', expect.anything());
-            });
-            await waitFor(() => {
-                expect(screen.getByText('Filtered Item')).toBeInTheDocument();
-            });
-        });
-        it('should emit filter events with the state analytics', async () => {
-            const onEvent = vi.fn();
-            const httpClient = vi.fn().mockImplementation(async () => respondWith({
-                analytics: { source: 'filter-response' },
-                sections: [],
-            }));
-            const props = Object.assign(Object.assign({}, getDefaultProps()), { httpClient, onEvent, initialStep: step });
-            renderWithProviders(_jsx(DynamicFlowWise, Object.assign({}, props)));
-            await user.click(screen.getByText('Recent'));
-            await waitFor(() => {
-                expect(onEvent).toHaveBeenCalledWith('Dynamic Flow - Collection Filter Triggered', expect.objectContaining({ source: 'initial', shared: 'initial' }));
-            });
-            await waitFor(() => {
-                expect(onEvent).toHaveBeenCalledWith('Dynamic Flow - Collection Filter Succeeded', expect.objectContaining({ source: 'filter-response' }));
-            });
-        });
-        it('should emit failed filter events with the state analytics', async () => {
-            const onEvent = vi.fn();
-            const httpClient = vi.fn().mockResolvedValue(respondWith({}, { status: 500 }));
-            const props = Object.assign(Object.assign({}, getDefaultProps()), { httpClient, onEvent, initialStep: step });
-            renderWithProviders(_jsx(DynamicFlowWise, Object.assign({}, props)));
-            await user.click(screen.getByText('Recent'));
-            await waitFor(() => {
-                expect(onEvent).toHaveBeenCalledWith('Dynamic Flow - Collection Filter Triggered', expect.objectContaining({ source: 'initial', shared: 'initial' }));
-            });
-            await waitFor(() => {
-                expect(onEvent).toHaveBeenCalledWith('Dynamic Flow - Collection Filter Failed', expect.objectContaining({ source: 'initial', shared: 'initial' }));
-            });
-        });
-        it('should only emit filter events when a filter interrupts a debounced text search', async () => {
-            const onEvent = vi.fn();
-            const httpClient = vi.fn().mockImplementation(async () => respondWith({
-                analytics: { source: 'filter-response' },
-                sections: [],
-            }));
-            const props = Object.assign(Object.assign({}, getDefaultProps()), { httpClient, onEvent, initialStep: step });
-            renderWithProviders(_jsx(DynamicFlowWise, Object.assign({}, props)));
-            await user.type(screen.getByPlaceholderText('Search items...'), 'hello');
-            await user.click(screen.getByText('Recent'));
-            await act(async () => vi.advanceTimersByTimeAsync(800));
-            await waitFor(() => {
-                expect(httpClient).toHaveBeenCalledTimes(1);
-            });
-            await waitFor(() => {
-                expect(onEvent).toHaveBeenCalledWith('Dynamic Flow - Collection Filter Triggered', expect.objectContaining({ source: 'initial', shared: 'initial' }));
-            });
-            await waitFor(() => {
-                expect(onEvent).toHaveBeenCalledWith('Dynamic Flow - Collection Filter Succeeded', expect.objectContaining({ source: 'filter-response' }));
-            });
-            expect(onEvent).not.toHaveBeenCalledWith('Dynamic Flow - Collection Search Triggered', expect.anything());
-            expect(onEvent).not.toHaveBeenCalledWith('Dynamic Flow - Collection Search Succeeded', expect.anything());
-            expect(onEvent).not.toHaveBeenCalledWith('Dynamic Flow - Collection Search Failed', expect.anything());
-        });
-    });
-    describe('fork', () => {
-        const forkingRenderer = {
-            canRenderType: 'collection',
-            render: ({ state, depth, fork, pop, onSearchChange }) => { var _a, _b; var _c, _d; return (_jsxs("div", { children: [_jsx("p", { children: `depth: ${depth}` }), _jsx("p", { children: `state: ${state.id}` }), _jsx("p", { children: `query: ${(_c = (_a = state.search) === null || _a === void 0 ? void 0 : _a.query) !== null && _c !== void 0 ? _c : ''}` }), _jsx("button", { type: "button", onClick: fork, children: "Fork" }), _jsx("button", { type: "button", onClick: pop, children: "Pop" }), _jsx("input", { "aria-label": "Search", value: (_d = (_b = state.search) === null || _b === void 0 ? void 0 : _b.query) !== null && _d !== void 0 ? _d : '', onChange: ({ currentTarget: { value } }) => onSearchChange(value) })] })); },
-        };
-        it('should pass the forked state to the renderer', async () => {
-            const httpClient = vi.fn().mockReturnValue(new Promise(() => { }));
-            const props = Object.assign(Object.assign({}, getDefaultProps()), { httpClient, initialStep: step });
-            renderWithProviders(_jsx(DynamicFlowWise, Object.assign({}, props, { renderers: [forkingRenderer] })));
-            expect(screen.getByText('depth: 0')).toBeInTheDocument();
-            expect(screen.getByText(/^state: .*-state-0$/)).toBeInTheDocument();
-            await user.click(screen.getByRole('button', { name: 'Fork' }));
-            expect(screen.getByText('depth: 1')).toBeInTheDocument();
-            expect(screen.getByText(/^state: .*-state-1$/)).toBeInTheDocument();
-        });
-        it('popping a state should revert to the previous state', async () => {
-            const httpClient = vi.fn().mockReturnValue(new Promise(() => { }));
-            const props = Object.assign(Object.assign({}, getDefaultProps()), { httpClient, initialStep: step });
-            renderWithProviders(_jsx(DynamicFlowWise, Object.assign({}, props, { renderers: [forkingRenderer] })));
-            await user.click(screen.getByRole('button', { name: 'Fork' }));
-            expect(screen.getByText('depth: 1')).toBeInTheDocument();
-            await user.type(screen.getByRole('textbox', { name: 'Search' }), 'hello');
-            expect(screen.getByText('query: hello')).toBeInTheDocument();
-            await user.click(screen.getByRole('button', { name: 'Pop' }));
-            expect(screen.getByText('depth: 0')).toBeInTheDocument();
-            expect(screen.getByText('query:')).toBeInTheDocument();
-        });
-    });
-});