@wise/dynamic-flow-client 5.25.2-experimental-a8a898e → 5.25.2

package/build/tests/CollectionLayout.test.js

@@ -0,0 +1,516 @@
+import { jsx as _jsx } 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';
+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: [
+            {
+                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();
+        });
+    });
+    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('pagination', () => {
+        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 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 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', () => {
+        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());
+        });
+    });
+});

package/build/tests/ConstLayout.test.js

@@ -0,0 +1,95 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { screen, waitFor } from '@testing-library/react';
+import { userEvent } from '@testing-library/user-event';
+import { vi } from 'vitest';
+import { renderWithProviders } from '../test-utils';
+import DynamicFlowWise from '../test-utils/DynamicFlowWise';
+const user = userEvent.setup({ advanceTimers: vi.advanceTimersByTime });
+describe('ConstSchemaLayout', () => {
+    const getDefaultProps = () => ({
+        flowId: 'flow-id',
+        httpClient: vi.fn(),
+        onCompletion: vi.fn(),
+        onError: vi.fn(),
+        onEvent: vi.fn(),
+        onLog: vi.fn(),
+    });
+    const getInitialStep = (control, model) => ({
+        id: 'const-layout-step',
+        title: 'Const Schemas with Layout',
+        schemas: [
+            {
+                $id: '#schema',
+                control,
+                oneOf: [
+                    {
+                        title: 'Option A',
+                        const: 'A',
+                        layout: [
+                            {
+                                type: 'heading',
+                                text: 'This is Option A heading',
+                            },
+                            {
+                                type: 'paragraph',
+                                text: 'Option A is a great choice because, it offers unique benefits and features that are tailored to your needs.',
+                            },
+                        ],
+                    },
+                    {
+                        title: 'Option B',
+                        const: 'B',
+                        layout: [
+                            {
+                                type: 'heading',
+                                text: 'This is Option B heading',
+                            },
+                            {
+                                type: 'paragraph',
+                                text: 'Option B stands out due to its innovative approach and user-friendly design, making it an excellent choice for those seeking simplicity and efficiency.',
+                            },
+                        ],
+                    },
+                ],
+            },
+        ],
+        layout: [
+            {
+                type: 'box',
+                width: 'md',
+                control: 'bordered',
+                components: [
+                    {
+                        type: 'form',
+                        schemaId: '#schema',
+                    },
+                ],
+            },
+        ],
+        model,
+    });
+    describe.each(['tab', 'select', 'radio'])('When using %s', (control) => {
+        it.each(['A', 'B'])('should render the layout for the pre-selected option %s', async (option) => {
+            const props = Object.assign(Object.assign({}, getDefaultProps()), { initialStep: getInitialStep(control, option) });
+            renderWithProviders(_jsx(DynamicFlowWise, Object.assign({}, props)));
+            await waitFor(() => {
+                expect(screen.getByText('Const Schemas with Layout')).toBeInTheDocument();
+            });
+            expect(screen.getByText(`This is Option ${option} heading`)).toBeInTheDocument();
+        });
+    });
+    describe.each(['tab', 'radio'])('When using %s, and then selecting the other option', (control) => {
+        it('renders the other option layout', async () => {
+            const props = Object.assign(Object.assign({}, getDefaultProps()), { initialStep: getInitialStep(control, 'A') });
+            renderWithProviders(_jsx(DynamicFlowWise, Object.assign({}, props)));
+            await waitFor(() => {
+                expect(screen.getByText('Const Schemas with Layout')).toBeInTheDocument();
+            });
+            expect(screen.getByText('This is Option A heading')).toBeInTheDocument();
+            await user.click(screen.getByText('Option B'));
+            await waitFor(() => {
+                expect(screen.getByText('This is Option B heading')).toBeInTheDocument();
+            });
+        });
+    });
+});