@wise/dynamic-flow-client 5.8.1 → 5.9.0

package/build/tests/legacy/Search.test.js

@@ -0,0 +1,437 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { act, screen, waitFor } from '@testing-library/react';
+import { userEvent } from '@testing-library/user-event';
+import { renderWithProviders } from '../../test-utils';
+import { abortableDelay, getMockHttpClient } from '../../test-utils/fetch-utils';
+import DynamicFlowWise from '../../test-utils/DynamicFlowWise';
+import { vi } from 'vitest';
+const user = userEvent.setup({ advanceTimers: vi.advanceTimersByTime });
+const getSearchStep = (search = {}) => ({
+    id: 'Features/Search',
+    title: 'Search Layout',
+    schemas: [],
+    layout: [
+        Object.assign({ type: 'search', analyticsId: 'search-layout-aid', title: 'Title', url: '/search', method: 'GET', param: 'query', emptyMessage: 'No results (sorry!)' }, search),
+    ],
+});
+const getSearchResults = (query) => [
+    {
+        type: 'action',
+        title: `Title ${query} #1`,
+        description: `This is an action search result.`,
+        image: {
+            accessibilityDescription: 'image from URL',
+            url: 'https://example.com/image.png',
+        },
+        value: {
+            id: 'search-result-action-id-01',
+            url: `/next-step`,
+            method: 'GET',
+        },
+    },
+    {
+        type: 'search',
+        title: `Title ${query} #2`,
+        description: `This is a search search result.`,
+        image: {
+            accessibilityDescription: 'image from URI',
+            uri: 'https://example.com/image.png',
+        },
+        value: {
+            url: `/new-search`,
+            method: 'GET',
+            param: 'new-query',
+            query: 'new query with special characters (!@£$%^&*)',
+        },
+    },
+];
+const getLegacySearchResponse = (query) => new Response(JSON.stringify({ results: getSearchResults(query) }));
+const getResultsResponse = (query) => new Response(JSON.stringify({ type: 'results', results: getSearchResults(query) }));
+const getLayoutResponse = (query) => new Response(JSON.stringify({
+    type: 'layout',
+    content: [
+        {
+            type: 'markdown',
+            content: `You've searched for ${query}, but we didn't find anything, so here is an empty state`,
+        },
+    ],
+}));
+describe('DynamicFlow / Search Layout Component', () => {
+    const onCompletion = vi.fn();
+    const onError = vi.fn();
+    const httpClient = vi.fn();
+    beforeEach(() => {
+        vi.clearAllMocks();
+    });
+    describe('user interface', () => {
+        it('renders a search input with the title as a label', () => {
+            const title = 'Search for something';
+            const searchStep = getSearchStep({ title });
+            renderWithProviders(_jsx(DynamicFlowWise, { flowId: "the-flow-id", httpClient: httpClient, initialStep: searchStep, onCompletion: onCompletion, onError: onError }));
+            expect(screen.getByLabelText(title)).toBeInTheDocument();
+        });
+        it('renders the initialState when it is a layout type', () => {
+            const title = 'Search for something';
+            const initialState = {
+                type: 'layout',
+                content: [
+                    {
+                        type: 'markdown',
+                        content: 'This is the initial state',
+                    },
+                ],
+            };
+            const searchStep = getSearchStep({ title, initialState });
+            renderWithProviders(_jsx(DynamicFlowWise, { flowId: "the-flow-id", httpClient: httpClient, initialStep: searchStep, onCompletion: onCompletion, onError: onError }));
+            expect(screen.getByText('This is the initial state')).toBeInTheDocument();
+        });
+        it('renders the initialState when it is a results type', () => {
+            const title = 'Search for something';
+            const initialState = {
+                type: 'results',
+                results: getSearchResults('initial query'),
+            };
+            const searchStep = getSearchStep({ title, initialState });
+            renderWithProviders(_jsx(DynamicFlowWise, { flowId: "the-flow-id", httpClient: httpClient, initialStep: searchStep, onCompletion: onCompletion, onError: onError }));
+            expect(screen.getByText('Title initial query #1')).toBeInTheDocument();
+        });
+    });
+    // TODO we haven't added search events yet
+    describe('when user focuses the text field', () => {
+        it('calls onEvent with the correct analytics event', async () => {
+            const title = 'Search for something';
+            const searchStep = getSearchStep({ title });
+            const onEvent = vi.fn();
+            renderWithProviders(_jsx(DynamicFlowWise, { flowId: "the-flow-id", httpClient: httpClient, initialStep: searchStep, onEvent: onEvent, onCompletion: onCompletion, onError: onError }));
+            const input = screen.getByLabelText(title);
+            // await user.click(input); // the revamp version trigger on the first character, not on focus
+            await user.type(input, 'abcd');
+            await waitFor(() => expect(onEvent).toHaveBeenCalledWith('Dynamic Flow - Search Started', expect.objectContaining({
+                flowId: 'the-flow-id',
+                stepId: 'Features/Search',
+                stepCount: 0,
+                layoutId: 'search-layout-aid',
+            })));
+        });
+    });
+    describe('when user types into text field', () => {
+        it('makes a GET request to the search endpoint', async () => {
+            const title = 'Search for something';
+            const query = 'test';
+            const mockHttpClient = vi.fn(async () => Promise.resolve(new Response(null, { status: 404 })));
+            const searchStep = getSearchStep({ title, url: '/search', method: 'GET' });
+            renderWithProviders(_jsx(DynamicFlowWise, { flowId: "the-flow-id", httpClient: mockHttpClient, initialStep: searchStep, onCompletion: onCompletion, onError: onError }));
+            const input = screen.getByLabelText(title);
+            await user.type(input, query);
+            await act(async () => vi.advanceTimersByTimeAsync(500)); // debounce delay
+            expect(mockHttpClient).toHaveBeenCalledTimes(1);
+            expect(mockHttpClient).toHaveBeenCalledWith(`/search?query=${query}`, expect.anything());
+        });
+        it('makes a GET request to the search endpoint, with the correct query parameters', async () => {
+            const title = 'Search for something';
+            const query = 'test';
+            const mockHttpClient = vi.fn(async () => Promise.resolve(new Response(null, { status: 404 })));
+            const searchStep = getSearchStep({ title, url: '/search?extra=stuff', method: 'GET' });
+            renderWithProviders(_jsx(DynamicFlowWise, { flowId: "the-flow-id", httpClient: mockHttpClient, initialStep: searchStep, onCompletion: onCompletion, onError: onError }));
+            const input = screen.getByLabelText(title);
+            await user.type(input, query);
+            await act(async () => vi.advanceTimersByTimeAsync(500)); // debounce delay
+            expect(mockHttpClient).toHaveBeenCalledTimes(1);
+            expect(mockHttpClient).toHaveBeenCalledWith(`/search?extra=stuff&query=${query}`, expect.anything());
+        });
+        it('makes a POST request to the search endpoint', async () => {
+            const mockHttpClient = vi.fn(async () => Promise.resolve(new Response(null, { status: 404 })));
+            const title = 'Search for something';
+            const method = 'POST';
+            const query = 'test';
+            const searchStep = getSearchStep({ title, method });
+            renderWithProviders(_jsx(DynamicFlowWise, { flowId: "the-flow-id", httpClient: mockHttpClient, initialStep: searchStep, onCompletion: onCompletion, onError: onError }));
+            const input = screen.getByLabelText(title);
+            await user.type(input, query);
+            await act(async () => vi.advanceTimersByTimeAsync(500)); // debounce delay
+            expect(mockHttpClient).toHaveBeenCalledTimes(1);
+            expect(mockHttpClient).toHaveBeenCalledWith('/search', expect.objectContaining({
+                method: 'POST',
+                body: JSON.stringify({ query }),
+            }));
+        });
+        describe('when the legacy results type is provided', () => {
+            it('renders the search results', async () => {
+                const mockHttpClient = vi.fn(async () => Promise.resolve(getLegacySearchResponse('abcd')));
+                const title = 'Search for something';
+                const searchStep = getSearchStep({ title });
+                renderWithProviders(_jsx(DynamicFlowWise, { flowId: "the-flow-id", httpClient: mockHttpClient, initialStep: searchStep, onCompletion: onCompletion, onError: onError }));
+                const input = screen.getByLabelText(title);
+                await user.type(input, 'abcd');
+                await act(async () => vi.advanceTimersByTimeAsync(500)); // debounce delay
+                expect(screen.getByText('Title abcd #1')).toBeInTheDocument();
+                expect(screen.getByText('Title abcd #2')).toBeInTheDocument();
+            });
+        });
+        describe('when the modern results type is provided', () => {
+            it('renders the search results', async () => {
+                const mockHttpClient = vi.fn(async () => Promise.resolve(getResultsResponse('abcd')));
+                const title = 'Search for something';
+                const searchStep = getSearchStep({ title });
+                renderWithProviders(_jsx(DynamicFlowWise, { flowId: "the-flow-id", httpClient: mockHttpClient, initialStep: searchStep, onCompletion: onCompletion, onError: onError }));
+                const input = screen.getByLabelText(title);
+                await user.type(input, 'abcd');
+                await act(async () => vi.advanceTimersByTimeAsync(500)); // debounce delay
+                expect(screen.getByText('Title abcd #1')).toBeInTheDocument();
+                expect(screen.getByText('Title abcd #2')).toBeInTheDocument();
+            });
+        });
+        describe('when the layout response type is provided', () => {
+            it('renders the search results', async () => {
+                const mockHttpClient = vi.fn(async () => Promise.resolve(getLayoutResponse('abcd')));
+                const title = 'Search for something';
+                const searchStep = getSearchStep({ title });
+                renderWithProviders(_jsx(DynamicFlowWise, { flowId: "the-flow-id", httpClient: mockHttpClient, initialStep: searchStep, onCompletion: onCompletion, onError: onError }));
+                const input = screen.getByLabelText(title);
+                await user.type(input, 'abcd');
+                await act(async () => vi.advanceTimersByTimeAsync(500)); // debounce delay
+                expect(screen.getByText("You've searched for abcd, but we didn't find anything, so here is an empty state")).toBeInTheDocument();
+            });
+        });
+        it('renders the images for each result', async () => {
+            const mockHttpClient = vi.fn(async () => Promise.resolve(getLegacySearchResponse('abcd')));
+            const title = 'Search for something';
+            const searchStep = getSearchStep({ title });
+            renderWithProviders(_jsx(DynamicFlowWise, { flowId: "the-flow-id", httpClient: mockHttpClient, initialStep: searchStep, onCompletion: onCompletion, onError: onError }));
+            const input = screen.getByLabelText(title);
+            await user.type(input, 'abcd');
+            await act(async () => vi.advanceTimersByTimeAsync(500)); // debounce delay
+            expect(screen.getByAltText('image from URL')).toHaveAttribute('src', 'https://example.com/image.png');
+            expect(screen.getByAltText('image from URI')).toHaveAttribute('src', 'https://example.com/image.png');
+        });
+        describe('debouncing', () => {
+            describe('when the user resumes typing before the first request is made', () => {
+                it('only makes 1 request with the last query string, rather than every time the search query changes', async () => {
+                    const mockHttpClient = vi.fn(async () => Promise.resolve(new Response(null, { status: 404 })));
+                    const title = 'Search for something';
+                    const searchStep = getSearchStep({ title });
+                    renderWithProviders(_jsx(DynamicFlowWise, { flowId: "the-flow-id", httpClient: mockHttpClient, initialStep: searchStep, onCompletion: onCompletion, onError: onError }));
+                    const input = screen.getByLabelText(title);
+                    await user.type(input, 'abcd');
+                    act(() => {
+                        vi.advanceTimersByTime(200); // half the debounce time
+                    });
+                    expect(mockHttpClient).toHaveBeenCalledTimes(0); // no request yet
+                    await user.type(input, 'efgh'); // continue typing on the text field
+                    act(() => {
+                        vi.advanceTimersByTime(200); // half the debounce time
+                    });
+                    await waitFor(() => expect(mockHttpClient).toHaveBeenCalledTimes(1));
+                    expect(mockHttpClient).toHaveBeenCalledWith(`/search?query=abcdefgh`, expect.anything());
+                });
+            });
+        });
+        describe('de-duplication', () => {
+            describe('when the user adds a trailing space to a successful query', () => {
+                it('only makes 1 request with the original query string, rather than a second one', async () => {
+                    const mockHttpClient = vi.fn(async () => Promise.resolve(getLegacySearchResponse('abcd')));
+                    const title = 'Search for something';
+                    const searchStep = getSearchStep({ title });
+                    renderWithProviders(_jsx(DynamicFlowWise, { flowId: "the-flow-id", httpClient: mockHttpClient, initialStep: searchStep, onCompletion: onCompletion, onError: onError }));
+                    const input = screen.getByLabelText(title);
+                    await user.type(input, 'abcd');
+                    await act(async () => vi.advanceTimersByTime(500)); // debounce delay
+                    expect(mockHttpClient).toHaveBeenCalledTimes(1);
+                    await user.type(input, ' ');
+                    await act(async () => vi.advanceTimersByTime(500)); // debounce delay
+                    expect(mockHttpClient).toHaveBeenCalledTimes(1); // no new requests
+                });
+            });
+            describe('when the user adds a trailing space to a failed query', () => {
+                it('makes a second request', async () => {
+                    const mockHttpClient = vi.fn(async () => Promise.resolve(new Response(null, { status: 404 })));
+                    const title = 'Search for something';
+                    const searchStep = getSearchStep({ title });
+                    renderWithProviders(_jsx(DynamicFlowWise, { flowId: "the-flow-id", httpClient: mockHttpClient, initialStep: searchStep, onCompletion: onCompletion, onError: onError }));
+                    const input = screen.getByLabelText(title);
+                    await user.type(input, 'abcd');
+                    await act(async () => vi.advanceTimersByTimeAsync(500)); // debounce delay
+                    expect(mockHttpClient).toHaveBeenCalledTimes(1);
+                    await user.type(input, ' '); // add a space to the text input field
+                    await act(async () => vi.advanceTimersByTimeAsync(500)); // debounce delay
+                    expect(mockHttpClient).toHaveBeenCalledTimes(2); // it tries again
+                });
+            });
+        });
+        describe('aborting requests', () => {
+            describe('when the user types into the text field, then clears it before the request is made', () => {
+                it('aborts the request', async () => {
+                    const mockHttpClient = vi.fn(async () => Promise.resolve(new Response(null, { status: 404 })));
+                    const title = 'Search for something';
+                    const searchStep = getSearchStep({ title });
+                    renderWithProviders(_jsx(DynamicFlowWise, { flowId: "the-flow-id", httpClient: mockHttpClient, initialStep: searchStep, onCompletion: onCompletion, onError: onError }));
+                    const input = screen.getByLabelText(title);
+                    await user.type(input, 'abcd');
+                    await user.clear(input);
+                    act(() => {
+                        vi.advanceTimersByTime(500); // more than the debounce time
+                    });
+                    await waitFor(() => expect(mockHttpClient).toHaveBeenCalledTimes(0));
+                });
+            });
+            describe('when the user types into the text field, and a first request is made, then they type again before the request resolves', () => {
+                it('aborts the first request and makes a new one, only displaying the results for the second request', async () => {
+                    const mockHttpClient = vi.fn(async (url, init) => {
+                        const query = String(url).split('=')[1];
+                        await abortableDelay(query === 'abcd' ? 2000 : 500, init === null || init === void 0 ? void 0 : init.signal);
+                        return getLegacySearchResponse(query);
+                    });
+                    const title = 'Search for something';
+                    const searchStep = getSearchStep({ title });
+                    renderWithProviders(_jsx(DynamicFlowWise, { flowId: "the-flow-id", httpClient: mockHttpClient, initialStep: searchStep, onCompletion: onCompletion, onError: onError }));
+                    const input = screen.getByLabelText(title);
+                    await user.type(input, 'abcd');
+                    act(() => {
+                        vi.advanceTimersByTime(1000);
+                    });
+                    await user.type(input, 'efgh');
+                    act(() => {
+                        vi.advanceTimersByTime(1000);
+                    });
+                    await waitFor(() => {
+                        expect(screen.getByText('Title abcdefgh #1')).toBeInTheDocument();
+                    });
+                    await waitFor(() => expect(mockHttpClient).toHaveBeenCalledTimes(2));
+                    await act(async () => {
+                        vi.advanceTimersByTime(1500);
+                        return Promise.resolve();
+                    });
+                    expect(screen.queryByText('Title abcd #1')).not.toBeInTheDocument();
+                });
+            });
+        });
+        describe('when the user clears the search input after some results were displayed', () => {
+            it('clears the results and displays the initial state', async () => {
+                const title = 'Search for something';
+                const initialState = {
+                    type: 'layout',
+                    content: [
+                        {
+                            type: 'markdown',
+                            content: 'This is the initial state',
+                        },
+                    ],
+                };
+                const mockHttpClient = vi.fn(async () => Promise.resolve(getResultsResponse('abcd')));
+                const searchStep = getSearchStep({ title, initialState });
+                renderWithProviders(_jsx(DynamicFlowWise, { flowId: "the-flow-id", httpClient: mockHttpClient, initialStep: searchStep, onCompletion: onCompletion, onError: onError }));
+                expect(screen.getByText('This is the initial state')).toBeInTheDocument();
+                await user.type(screen.getByLabelText(title), 'abcd');
+                await act(async () => vi.advanceTimersByTimeAsync(500)); // debounce delay
+                expect(screen.getByText('Title abcd #1')).toBeInTheDocument();
+                await user.clear(screen.getByLabelText(title));
+                await act(async () => vi.advanceTimersByTimeAsync(500)); // debounce delay
+                expect(screen.getByText('This is the initial state')).toBeInTheDocument();
+            });
+        });
+    });
+    describe('when the user clicks on an action search result', () => {
+        it('loads a new step and triggers analytics event', async () => {
+            const mockHttpClient = vi.fn(getMockHttpClient({
+                '/search?query=abcd': async () => Promise.resolve(getLegacySearchResponse('abcd')),
+                '/next-step': async () => Promise.resolve(new Response(JSON.stringify(nextStep))),
+            }));
+            const onEvent = vi.fn();
+            const title = 'Search for something';
+            const searchStep = getSearchStep({ title, url: '/search' });
+            const nextStep = {
+                id: 'next-step',
+                title: 'Next Step',
+                schemas: [],
+                layout: [
+                    {
+                        type: 'paragraph',
+                        text: 'This is the next step.',
+                    },
+                ],
+            };
+            renderWithProviders(_jsx(DynamicFlowWise, { flowId: "the-flow-id", httpClient: mockHttpClient, initialStep: searchStep, onCompletion: onCompletion, onError: onError, onEvent: onEvent }));
+            const input = screen.getByLabelText(title);
+            await user.type(input, 'abcd');
+            await act(async () => vi.advanceTimersByTimeAsync(500)); // debounce delay
+            expect(screen.getByText('Title abcd #1')).toBeInTheDocument();
+            await user.click(screen.getByText('Title abcd #1'));
+            await expect(screen.findByText('Next Step')).resolves.toBeInTheDocument();
+            expect(screen.queryByText('Title abcd #1')).not.toBeInTheDocument();
+            expect(onEvent).toHaveBeenCalledWith('Dynamic Flow - Search Result Selected', expect.objectContaining({
+                flowId: 'the-flow-id',
+                stepId: 'Features/Search',
+                stepCount: 0,
+                layoutId: 'search-layout-aid',
+                type: 'action',
+                actionId: 'search-result-action-id-01',
+            }));
+        });
+    });
+    describe('when the user clicks on a search search result', () => {
+        it('makes a new search request, displays the results, and updates the search input, and triggers analytics event', async () => {
+            const mockHttpClient = vi.fn(getMockHttpClient({
+                '/search?query=abcd': async () => Promise.resolve(getLegacySearchResponse('abcd')),
+                '/new-search?new-query=new+query+with+special+characters+%28%21%40%C2%A3%24%25%5E%26*%29': async () => Promise.resolve(getLegacySearchResponse('new query results')),
+            }));
+            const onEvent = vi.fn();
+            const title = 'Search for something';
+            const searchStep = getSearchStep({ title, url: '/search' });
+            renderWithProviders(_jsx(DynamicFlowWise, { flowId: "the-flow-id", httpClient: mockHttpClient, initialStep: searchStep, onCompletion: onCompletion, onError: onError, onEvent: onEvent }));
+            const input = screen.getByLabelText(title);
+            await user.type(input, 'abcd');
+            await act(async () => vi.advanceTimersByTimeAsync(500)); // debounce delay
+            expect(screen.getByText('Title abcd #1')).toBeInTheDocument();
+            await user.click(screen.getByText('Title abcd #2'));
+            expect(mockHttpClient).toHaveBeenCalledWith(`/new-search?new-query=new+query+with+special+characters+%28%21%40%C2%A3%24%25%5E%26*%29`, expect.anything());
+            expect(screen.getByText('Title new query results #1')).toBeInTheDocument();
+            expect(screen.getByLabelText(title)).toHaveValue('new query with special characters (!@£$%^&*)');
+            expect(onEvent).toHaveBeenCalledWith('Dynamic Flow - Search Result Selected', expect.objectContaining({
+                flowId: 'the-flow-id',
+                stepId: 'Features/Search',
+                stepCount: 0,
+                layoutId: 'search-layout-aid',
+                type: 'search',
+            }));
+        });
+    });
+    describe('when the search request fails', () => {
+        it('displays an error message and allows to retry', async () => {
+            const responses = [
+                Promise.resolve(new Response(null, { status: 404 })),
+                Promise.resolve(getLegacySearchResponse('abcd')),
+            ];
+            let callCount = 0;
+            const mockHttpClient = vi.fn(async () => {
+                const response = responses[Math.min(callCount, responses.length - 1)];
+                callCount += 1;
+                return response;
+            });
+            const title = 'Search for something';
+            const searchStep = getSearchStep({ title, url: '/search' });
+            renderWithProviders(_jsx(DynamicFlowWise, { flowId: "the-flow-id", httpClient: mockHttpClient, initialStep: searchStep, onCompletion: onCompletion, onError: onError }));
+            const input = screen.getByLabelText(title);
+            await user.type(input, 'abcd');
+            await act(async () => vi.advanceTimersByTimeAsync(500)); // debounce delay
+            expect(screen.getByText('Something went wrong.')).toBeInTheDocument();
+            expect(mockHttpClient).toHaveBeenCalledTimes(1);
+            const link = screen.getByText('Retry');
+            await user.click(link);
+            await act(async () => vi.advanceTimersByTimeAsync(500)); // debounce delay
+            expect(mockHttpClient).toHaveBeenCalledTimes(2);
+            expect(screen.getByText('Title abcd #1')).toBeInTheDocument();
+        });
+    });
+    describe('when a search returns no results', () => {
+        it('displays the empty message from the search configuration', async () => {
+            const mockHttpClient = vi.fn(async () => Promise.resolve(new Response(JSON.stringify({ type: 'results', results: [] }))));
+            const title = 'Search for something';
+            const searchStep = getSearchStep({ title });
+            renderWithProviders(_jsx(DynamicFlowWise, { flowId: "the-flow-id", httpClient: mockHttpClient, initialStep: searchStep, onCompletion: onCompletion, onError: onError }));
+            const input = screen.getByLabelText(title);
+            await user.type(input, 'abcd');
+            await act(async () => vi.advanceTimersByTimeAsync(500)); // debounce delay
+            expect(screen.getByText('No results (sorry!)')).toBeInTheDocument();
+        });
+    });
+});

package/build/tests/renderers/MultiSelectInputRendererProps.test.js

@@ -0,0 +1,58 @@
+import { mapSchemaToComponent } from '../../domain/mappers/mapSchemaToComponent';
+import { getMockMapperProps, getMockRendererMapperProps, getMockSchemaMapperProps, } from '../../domain/mappers/schema/tests/test-utils';
+import { multiSelectInputComponentToProps } from '../../renderers/mappers/multiSelectComponentToProps';
+describe('MultiSelectInputRendererProps mapper', () => {
+    describe('given a MultiSelectInputComponent in which each option has a layout', () => {
+        it('should map options including their children and childrenProps', () => {
+            var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+            const schema = {
+                type: 'array',
+                addItemTitle: '',
+                editItemTitle: '',
+                items: {
+                    oneOf: [
+                        {
+                            const: 'option-1',
+                            title: 'Option 1',
+                            layout: [{ type: 'paragraph', text: 'This is option 1' }],
+                        },
+                        {
+                            const: 'option-2',
+                            title: 'Option 2',
+                            layout: [{ type: 'paragraph', text: 'This is option 2' }],
+                        },
+                        {
+                            const: 'option-3',
+                            title: 'Option 3',
+                            layout: [{ type: 'paragraph', text: 'This is option 3' }],
+                        },
+                    ],
+                },
+            };
+            const schemaMapperProps = getMockSchemaMapperProps({ schema });
+            const mapperProps = getMockMapperProps();
+            const component = mapSchemaToComponent(schemaMapperProps, mapperProps);
+            const rendererMapperProps = Object.assign(Object.assign({}, getMockRendererMapperProps()), { render: () => null });
+            const props = multiSelectInputComponentToProps(component, rendererMapperProps);
+            expect(props.options).toHaveLength(3);
+            expect(props.options[0].children).toBeDefined();
+            expect(props.options[1].children).toBeDefined();
+            expect(props.options[2].children).toBeDefined();
+            expect(props.options[0].childrenProps).toBeDefined();
+            expect((_a = props.options[0].childrenProps) === null || _a === void 0 ? void 0 : _a.type).toBe('container');
+            expect((_b = props.options[0].childrenProps.childrenProps) === null || _b === void 0 ? void 0 : _b[0].type).toBe('paragraph');
+            expect(((_c = props.options[0].childrenProps
+                .childrenProps) === null || _c === void 0 ? void 0 : _c[0]).text).toBe('This is option 1');
+            expect(props.options[1].childrenProps).toBeDefined();
+            expect((_d = props.options[1].childrenProps) === null || _d === void 0 ? void 0 : _d.type).toBe('container');
+            expect((_e = props.options[1].childrenProps.childrenProps) === null || _e === void 0 ? void 0 : _e[0].type).toBe('paragraph');
+            expect(((_f = props.options[1].childrenProps
+                .childrenProps) === null || _f === void 0 ? void 0 : _f[0]).text).toBe('This is option 2');
+            expect(props.options[2].childrenProps).toBeDefined();
+            expect((_g = props.options[2].childrenProps) === null || _g === void 0 ? void 0 : _g.type).toBe('container');
+            expect((_h = props.options[2].childrenProps.childrenProps) === null || _h === void 0 ? void 0 : _h[0].type).toBe('paragraph');
+            expect(((_j = props.options[2].childrenProps
+                .childrenProps) === null || _j === void 0 ? void 0 : _j[0]).text).toBe('This is option 3');
+        });
+    });
+});

package/build/tests/renderers/SelectInputRendererProps.test.js

@@ -0,0 +1,42 @@
+import { mapSchemaToComponent } from '../../domain/mappers/mapSchemaToComponent';
+import { getMockMapperProps, getMockRendererMapperProps, getMockSchemaMapperProps, } from '../../domain/mappers/schema/tests/test-utils';
+import { selectInputComponentToProps } from '../../renderers/mappers/selectInputComponentToProps';
+describe('SelectInputRendererProps mapper', () => {
+    describe('given a SelectInputComponent in which each option has a layout', () => {
+        it('should map options including their children and childrenProps', () => {
+            var _a, _b, _c, _d, _e, _f;
+            const schema = {
+                oneOf: [
+                    {
+                        title: 'Option 1',
+                        const: 'option-1',
+                        layout: [{ type: 'paragraph', text: 'This is option 1' }],
+                    },
+                    {
+                        title: 'Option 2',
+                        const: 'option-2',
+                        layout: [{ type: 'paragraph', text: 'This is option 2' }],
+                    },
+                ],
+            };
+            const schemaMapperProps = getMockSchemaMapperProps({ schema });
+            const mapperProps = getMockMapperProps();
+            const component = mapSchemaToComponent(schemaMapperProps, mapperProps);
+            const rendererMapperProps = Object.assign(Object.assign({}, getMockRendererMapperProps()), { render: () => null });
+            const props = selectInputComponentToProps(component, rendererMapperProps);
+            expect(props.options).toHaveLength(2);
+            expect(props.options[0].children).toBeDefined();
+            expect(props.options[1].children).toBeDefined();
+            expect(props.options[0].childrenProps).toBeDefined();
+            expect((_a = props.options[0].childrenProps) === null || _a === void 0 ? void 0 : _a.type).toBe('container');
+            expect((_b = props.options[0].childrenProps.childrenProps) === null || _b === void 0 ? void 0 : _b[0].type).toBe('paragraph');
+            expect(((_c = props.options[0].childrenProps
+                .childrenProps) === null || _c === void 0 ? void 0 : _c[0]).text).toBe('This is option 1');
+            expect(props.options[1].childrenProps).toBeDefined();
+            expect((_d = props.options[1].childrenProps) === null || _d === void 0 ? void 0 : _d.type).toBe('container');
+            expect((_e = props.options[1].childrenProps.childrenProps) === null || _e === void 0 ? void 0 : _e[0].type).toBe('paragraph');
+            expect(((_f = props.options[1].childrenProps
+                .childrenProps) === null || _f === void 0 ? void 0 : _f[0]).text).toBe('This is option 2');
+        });
+    });
+});

package/build/tests/renderers/TextInputRenderer.test.js

@@ -0,0 +1,51 @@
+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 });
+const getDefaultProps = () => ({
+    flowId: 'flow-id',
+    onCompletion: vi.fn(),
+    onError: vi.fn(),
+    onEvent: vi.fn(),
+    onLog: vi.fn(),
+});
+const getStep = (model, schema) => {
+    var _a;
+    return ({
+        id: 'step-id',
+        title: 'Submission test',
+        layout: [
+            { type: 'form', schemaId: (_a = schema.$id) !== null && _a !== void 0 ? _a : '' },
+            {
+                type: 'button',
+                title: 'Submit',
+                action: { id: 'action-id', url: '/submit', method: 'POST' },
+            },
+        ],
+        schemas: [schema],
+        model,
+    });
+};
+describe('TextInputRenderer', () => {
+    const variants = [
+        ['without control nor format', { $id: '#schema', type: 'string', title: 'Name' }],
+        ['with numeric format', { $id: '#schema', type: 'string', title: 'Name', format: 'numeric' }],
+        ['with numeric control', { $id: '#schema', type: 'string', title: 'Name', control: 'numeric' }],
+    ];
+    describe.each(variants)('%s', (_, schema) => {
+        it('should submit the user-entered data to the server', async () => {
+            const step = getStep(null, schema);
+            const httpClient = vi.fn();
+            const props = getDefaultProps();
+            renderWithProviders(_jsx(DynamicFlowWise, Object.assign({ httpClient: httpClient, initialStep: step }, props)));
+            await user.type(screen.getByLabelText('Name'), '12345.6789');
+            await user.click(screen.getByText('Submit'));
+            await waitFor(() => {
+                expect(httpClient).toHaveBeenCalledWith('/submit', expect.objectContaining({ body: JSON.stringify('12345.6789') }));
+            });
+        });
+    });
+});

package/build/types/domain/components/UpsellComponent.d.ts

@@ -1,4 +1,4 @@
-import type { BaseLayoutComponent, CallToAction, Context, Media, OnComponentUpdate } from '../types';
+import type { BaseLayoutComponent, CallToAction, Media, OnComponentUpdate } from '../types';
 export type UpsellComponent = BaseLayoutComponent & {
     type: 'upsell';
     kind: 'layout';
@@ -7,7 +7,6 @@ export type UpsellComponent = BaseLayoutComponent & {
     media?: Media;
     visible: boolean;
     onDismiss: (() => void) | undefined;
-    context: Context;
 };
-export declare const createUpsellComponent: (upsellProps: Pick<UpsellComponent, "uid" | "analyticsId" | "callToAction" | "context" | "control" | "margin" | "media" | "tags" | "text" | "onDismiss">, onComponentUpdate: OnComponentUpdate) => UpsellComponent;
+export declare const createUpsellComponent: (upsellProps: Pick<UpsellComponent, "uid" | "analyticsId" | "callToAction" | "control" | "margin" | "media" | "tags" | "text" | "onDismiss">, onComponentUpdate: OnComponentUpdate) => UpsellComponent;
 //# sourceMappingURL=UpsellComponent.d.ts.map

package/build/types/domain/components/UpsellComponent.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"UpsellComponent.d.ts","sourceRoot":"","sources":["../../../../src/domain/components/UpsellComponent.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,mBAAmB,EACnB,YAAY,EACZ,OAAO,EACP,KAAK,EACL,iBAAiB,EAClB,MAAM,UAAU,CAAC;AAGlB,MAAM,MAAM,eAAe,GAAG,mBAAmB,GAAG;IAClD,IAAI,EAAE,QAAQ,CAAC;IACf,IAAI,EAAE,QAAQ,CAAC;IACf,IAAI,EAAE,MAAM,CAAC;IACb,YAAY,EAAE,YAAY,CAAC;IAC3B,KAAK,CAAC,EAAE,KAAK,CAAC;IACd,OAAO,EAAE,OAAO,CAAC;IACjB,SAAS,EAAE,CAAC,MAAM,IAAI,CAAC,GAAG,SAAS,CAAC;IACpC,OAAO,EAAE,OAAO,CAAC;CAClB,CAAC;AAEF,eAAO,MAAM,qBAAqB,GAChC,aAAa,IAAI,CACf,eAAe,EACb,KAAK,GACL,aAAa,GACb,cAAc,GACd,SAAS,GACT,SAAS,GACT,QAAQ,GACR,OAAO,GACP,MAAM,GACN,MAAM,GACN,WAAW,CACd,EACD,mBAAmB,iBAAiB,KACnC,eAmBF,CAAC"}
+{"version":3,"file":"UpsellComponent.d.ts","sourceRoot":"","sources":["../../../../src/domain/components/UpsellComponent.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,mBAAmB,EAAE,YAAY,EAAE,KAAK,EAAE,iBAAiB,EAAE,MAAM,UAAU,CAAC;AAG5F,MAAM,MAAM,eAAe,GAAG,mBAAmB,GAAG;IAClD,IAAI,EAAE,QAAQ,CAAC;IACf,IAAI,EAAE,QAAQ,CAAC;IACf,IAAI,EAAE,MAAM,CAAC;IACb,YAAY,EAAE,YAAY,CAAC;IAC3B,KAAK,CAAC,EAAE,KAAK,CAAC;IACd,OAAO,EAAE,OAAO,CAAC;IACjB,SAAS,EAAE,CAAC,MAAM,IAAI,CAAC,GAAG,SAAS,CAAC;CACrC,CAAC;AAEF,eAAO,MAAM,qBAAqB,GAChC,aAAa,IAAI,CACf,eAAe,EACb,KAAK,GACL,aAAa,GACb,cAAc,GACd,SAAS,GACT,QAAQ,GACR,OAAO,GACP,MAAM,GACN,MAAM,GACN,WAAW,CACd,EACD,mBAAmB,iBAAiB,KACnC,eAmBF,CAAC"}

package/build/types/domain/components/searchComponent/SearchComponent.d.ts

@@ -10,26 +10,27 @@ export type SearchProps = {
     query: string;
     signal: AbortSignal;
 };
-export type SearchResponse = {
+export type SearchResultsState = {
     type: 'layout';
     content: LayoutComponent[];
 } | {
     type: 'results';
     results: SearchResult[];
 };
-export type PerformSearch = (props: SearchProps) => Promise<SearchResponse | null>;
+export type PerformSearch = (props: SearchProps) => Promise<SearchResultsState | null>;
 export type SearchComponent = BaseLayoutComponent & {
     type: 'search';
     kind: 'layout';
     emptyMessage: string;
+    initialState: SearchResultsState;
     hint?: string;
     isLoading: boolean;
     query: string;
     title: string;
-    state: SearchResponse | null;
+    state: SearchResultsState;
     error?: string;
     onChange: (query: string) => void;
     onSelect: (result: SearchResult) => void;
 };
-export declare const createSearchComponent: (searchProps: Pick<SearchComponent, "uid" | "analyticsId" | "control" | "emptyMessage" | "hint" | "margin" | "tags" | "title">, performSearch: PerformSearch, onBehavior: OnBehavior, onComponentUpdate: OnComponentUpdate) => SearchComponent;
+export declare const createSearchComponent: (searchProps: Pick<SearchComponent, "uid" | "analyticsId" | "control" | "emptyMessage" | "initialState" | "hint" | "margin" | "tags" | "title">, performSearch: PerformSearch, onBehavior: OnBehavior, onComponentUpdate: OnComponentUpdate) => SearchComponent;
 //# sourceMappingURL=SearchComponent.d.ts.map