@wise/dynamic-flow-client 5.30.0-experimental-7a76ef5 → 5.30.1

package/build/tests/CollectionLayout.v2.test.js

@@ -0,0 +1,350 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { act, screen } 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: [
+            {
+                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 v2', () => {
+    beforeEach(() => {
+        mockIntersectionObserver(false);
+        vi.spyOn(window, 'scrollTo').mockImplementation(() => { });
+    });
+    describe('search', () => {
+        const stepV2 = Object.assign(Object.assign({}, step), { layout: [Object.assign(Object.assign({}, collectionLayout), { control: 'contacts-collection-v2' })] });
+        const searchResponse = {
+            sections: [{ id: 'results', items: [{ title: 'Search Result' }] }],
+        };
+        it('keeps the previous results and hides the filters while the first search is running', async () => {
+            let resolveSearch = () => { };
+            const httpClient = vi.fn().mockImplementation(async () => new Promise((resolve) => {
+                resolveSearch = resolve;
+            }));
+            const props = Object.assign(Object.assign({}, getDefaultProps()), { httpClient, initialStep: stepV2 });
+            renderWithProviders(_jsx(DynamicFlowWise, Object.assign({}, props)));
+            await user.type(screen.getByPlaceholderText('Search items...'), 'hello');
+            await act(async () => vi.advanceTimersByTimeAsync(800));
+            expect(httpClient).toHaveBeenCalledTimes(1);
+            expect(screen.getByText('Action Item')).toBeInTheDocument();
+            // hidden filters are aria-hidden, so they are not found by role
+            expect(screen.queryByRole('radio', { name: 'Popular' })).not.toBeInTheDocument();
+            await act(async () => {
+                resolveSearch(respondWith(searchResponse));
+            });
+            expect(await screen.findByText('Search Result')).toBeInTheDocument();
+            expect(screen.queryByText('Action Item')).not.toBeInTheDocument();
+            expect(screen.getByRole('radio', { name: 'Popular' })).toBeInTheDocument();
+        });
+        it('retains the filters while the second search is running', async () => {
+            let resolveSearch = () => { };
+            const httpClient = vi.fn().mockImplementation(async () => new Promise((resolve) => {
+                resolveSearch = resolve;
+            }));
+            const props = Object.assign(Object.assign({}, getDefaultProps()), { httpClient, initialStep: stepV2 });
+            renderWithProviders(_jsx(DynamicFlowWise, Object.assign({}, props)));
+            await user.type(screen.getByPlaceholderText('Search items...'), 'hello');
+            await act(async () => vi.advanceTimersByTimeAsync(800));
+            expect(httpClient).toHaveBeenCalledTimes(1);
+            expect(screen.getByText('Action Item')).toBeInTheDocument();
+            // hidden filters are aria-hidden, so they are not found by role
+            expect(screen.queryByRole('radio', { name: 'Popular' })).not.toBeInTheDocument();
+            await act(async () => {
+                resolveSearch(respondWith(searchResponse));
+            });
+            expect(await screen.findByText('Search Result')).toBeInTheDocument();
+            await user.type(screen.getByPlaceholderText('Search items...'), 'hello');
+            await act(async () => vi.advanceTimersByTimeAsync(800));
+            expect(httpClient).toHaveBeenCalledTimes(2);
+            expect(screen.getByRole('radio', { name: 'Popular' })).toBeInTheDocument();
+        });
+        it('ignores filter selections while a search is running', async () => {
+            const httpClient = vi
+                .fn()
+                .mockResolvedValueOnce(respondWith(searchResponse))
+                .mockReturnValueOnce(new Promise(() => { }));
+            const props = Object.assign(Object.assign({}, getDefaultProps()), { httpClient, initialStep: stepV2 });
+            renderWithProviders(_jsx(DynamicFlowWise, Object.assign({}, props)));
+            // the filters are hidden during the first search, so a second search keeps them visible
+            await user.type(screen.getByPlaceholderText('Search items...'), 'hello');
+            await act(async () => vi.advanceTimersByTimeAsync(800));
+            expect(await screen.findByText('Search Result')).toBeInTheDocument();
+            await user.type(screen.getByPlaceholderText('Search items...'), ' world');
+            await act(async () => vi.advanceTimersByTimeAsync(800));
+            expect(httpClient).toHaveBeenCalledTimes(2);
+            await user.click(screen.getByText('Recent'));
+            expect(httpClient).toHaveBeenCalledTimes(2);
+            expect(screen.getByRole('radio', { name: 'Recent' })).not.toBeChecked();
+        });
+        it('shows an error instead of the results when a forked search fails, and retries it', async () => {
+            const httpClient = vi
+                .fn()
+                .mockResolvedValueOnce(respondWith({}, { status: 500 }))
+                .mockResolvedValueOnce(respondWith(searchResponse));
+            const props = Object.assign(Object.assign({}, getDefaultProps()), { httpClient, initialStep: stepV2 });
+            renderWithProviders(_jsx(DynamicFlowWise, Object.assign({}, props)));
+            await user.type(screen.getByPlaceholderText('Search items...'), 'hello');
+            await act(async () => vi.advanceTimersByTimeAsync(800));
+            expect(await screen.findByRole('button', { name: 'Retry' })).toBeInTheDocument();
+            expect(screen.queryByText('Action Item')).not.toBeInTheDocument();
+            await user.click(screen.getByRole('button', { name: 'Retry' }));
+            expect(await screen.findByText('Search Result')).toBeInTheDocument();
+            expect(screen.queryByRole('button', { name: 'Retry' })).not.toBeInTheDocument();
+            expect(screen.getByPlaceholderText('Search items...')).toHaveValue('hello');
+        });
+        it('forks when typing, and pops back to the original results when the search is cleared', async () => {
+            const httpClient = vi.fn().mockImplementation(async () => respondWith(searchResponse));
+            const props = Object.assign(Object.assign({}, getDefaultProps()), { httpClient, initialStep: stepV2 });
+            renderWithProviders(_jsx(DynamicFlowWise, Object.assign({}, props)));
+            const searchInput = screen.getByPlaceholderText('Search items...');
+            await user.type(searchInput, 'hello');
+            await act(async () => vi.advanceTimersByTimeAsync(800));
+            expect(await screen.findByText('Search Result')).toBeInTheDocument();
+            expect(screen.queryByText('Action Item')).not.toBeInTheDocument();
+            await user.clear(searchInput);
+            await act(async () => vi.advanceTimersByTimeAsync(800));
+            expect(screen.getByText('Action Item')).toBeInTheDocument();
+            expect(screen.queryByText('Search Result')).not.toBeInTheDocument();
+            // the original results are restored without searching again
+            expect(httpClient).toHaveBeenCalledTimes(1);
+        });
+        it('stays forked when the search is blurred', async () => {
+            const httpClient = vi.fn().mockImplementation(async () => respondWith(searchResponse));
+            const props = Object.assign(Object.assign({}, getDefaultProps()), { httpClient, initialStep: stepV2 });
+            renderWithProviders(_jsx(DynamicFlowWise, Object.assign({}, props)));
+            await user.type(screen.getByPlaceholderText('Search items...'), 'hello');
+            await act(async () => vi.advanceTimersByTimeAsync(800));
+            expect(await screen.findByText('Search Result')).toBeInTheDocument();
+            await user.click(document.body);
+            expect(screen.getByText('Search Result')).toBeInTheDocument();
+            expect(screen.queryByText('Action Item')).not.toBeInTheDocument();
+        });
+        it('pops back to the original results when the clear button is clicked', async () => {
+            const httpClient = vi.fn().mockImplementation(async () => respondWith(searchResponse));
+            const props = Object.assign(Object.assign({}, getDefaultProps()), { httpClient, initialStep: stepV2 });
+            renderWithProviders(_jsx(DynamicFlowWise, Object.assign({}, props)));
+            await user.type(screen.getByPlaceholderText('Search items...'), 'hello');
+            await act(async () => vi.advanceTimersByTimeAsync(800));
+            expect(await screen.findByText('Search Result')).toBeInTheDocument();
+            await user.click(screen.getByRole('button', { name: 'Clear text' }));
+            await act(async () => vi.advanceTimersByTimeAsync(800));
+            expect(screen.getByText('Action Item')).toBeInTheDocument();
+            expect(screen.getByPlaceholderText('Search items...')).toHaveValue('');
+            expect(httpClient).toHaveBeenCalledTimes(1);
+        });
+        it('hides the filters again when searching after the search was cleared', async () => {
+            const httpClient = vi.fn().mockImplementation(async () => respondWith(searchResponse));
+            const props = Object.assign(Object.assign({}, getDefaultProps()), { httpClient, initialStep: stepV2 });
+            renderWithProviders(_jsx(DynamicFlowWise, Object.assign({}, props)));
+            const searchInput = screen.getByPlaceholderText('Search items...');
+            await user.type(searchInput, 'ab');
+            await act(async () => vi.advanceTimersByTimeAsync(800));
+            expect(await screen.findByText('Search Result')).toBeInTheDocument();
+            await user.type(searchInput, '{Backspace}{Backspace}');
+            expect(screen.getByText('Action Item')).toBeInTheDocument();
+            expect(screen.getByRole('radio', { name: 'Popular' })).toBeInTheDocument();
+            httpClient.mockImplementation(async () => new Promise(() => { }));
+            await user.type(searchInput, 'c');
+            await act(async () => vi.advanceTimersByTimeAsync(800));
+            expect(httpClient).toHaveBeenCalledTimes(2);
+            expect(searchInput).toHaveValue('c');
+            expect(screen.getByText('Action Item')).toBeInTheDocument();
+            expect(screen.queryByRole('radio', { name: 'Popular' })).not.toBeInTheDocument();
+        });
+        it('expands and hides search results tagged as hidden', async () => {
+            const httpClient = vi.fn().mockImplementation(async () => respondWith({
+                sections: [
+                    {
+                        id: 'results',
+                        items: [
+                            { title: 'Result One' },
+                            { title: 'Result Two' },
+                            { title: 'Hidden Result', tags: ['hidden'] },
+                        ],
+                    },
+                ],
+            }));
+            const props = Object.assign(Object.assign({}, getDefaultProps()), { httpClient, initialStep: stepV2 });
+            renderWithProviders(_jsx(DynamicFlowWise, Object.assign({}, props)));
+            await user.type(screen.getByPlaceholderText('Search items...'), 'hello');
+            await act(async () => vi.advanceTimersByTimeAsync(800));
+            expect(await screen.findByText('Result One')).toBeInTheDocument();
+            expect(screen.queryByText('Hidden Result')).not.toBeInTheDocument();
+            await user.click(screen.getByRole('button', { name: 'Show all 3 results' }));
+            expect(screen.getByText('Hidden Result')).toBeInTheDocument();
+            await user.click(screen.getByRole('button', { name: 'Show less results' }));
+            expect(screen.queryByText('Hidden Result')).not.toBeInTheDocument();
+            expect(screen.getByText('Result One')).toBeInTheDocument();
+        });
+        it('retains the hidden section state on new results if the IDs match', async () => {
+            let responseCount = 0;
+            const httpClient = vi.fn().mockImplementation(async () => {
+                responseCount += 1;
+                return respondWith({
+                    sections: [
+                        {
+                            id: 'results',
+                            title: 'Constant section',
+                            items: [
+                                { entityId: 'one', title: 'Result One' },
+                                { entityId: 'two', title: 'Result Two' },
+                                { entityId: 'three', title: 'Hidden Result', tags: ['hidden'] },
+                            ],
+                        },
+                        {
+                            id: `dynamic-section`,
+                            title: 'Dynamic section',
+                            items: [
+                                { entityId: `${responseCount}-1`, title: 'Dynamic One' },
+                                {
+                                    entityId: `${responseCount}-2`,
+                                    title: 'Hidden Dynamic Result',
+                                    tags: ['hidden'],
+                                },
+                            ],
+                        },
+                    ],
+                });
+            });
+            const props = Object.assign(Object.assign({}, getDefaultProps()), { httpClient, initialStep: stepV2 });
+            renderWithProviders(_jsx(DynamicFlowWise, Object.assign({}, props)));
+            await user.type(screen.getByPlaceholderText('Search items...'), 'hello');
+            await act(async () => vi.advanceTimersByTimeAsync(800));
+            expect(await screen.findByText('Result One')).toBeInTheDocument();
+            expect(screen.queryByText('Hidden Result')).not.toBeInTheDocument();
+            await user.click(screen.getByRole('button', { name: 'Show all 3 results' }));
+            await user.click(screen.getByRole('button', { name: 'Show all 2 results' }));
+            expect(screen.getByText('Hidden Result')).toBeInTheDocument();
+            expect(screen.getByText('Hidden Dynamic Result')).toBeInTheDocument();
+            await user.type(screen.getByPlaceholderText('Search items...'), 'hello');
+            await act(async () => vi.advanceTimersByTimeAsync(800));
+            expect(screen.getByText('Hidden Result')).toBeInTheDocument();
+            expect(screen.queryByText('Hidden Dynamic Result')).not.toBeInTheDocument();
+        });
+        it('focuses the search when the collection is tagged with autofocus', () => {
+            const autofocusStep = Object.assign(Object.assign({}, step), { layout: [Object.assign(Object.assign({}, collectionLayout), { control: 'contacts-collection-v2', tags: ['autofocus'] })] });
+            const props = Object.assign(Object.assign({}, getDefaultProps()), { initialStep: autofocusStep });
+            renderWithProviders(_jsx(DynamicFlowWise, Object.assign({}, props)));
+            expect(screen.getByPlaceholderText('Search items...')).toHaveFocus();
+        });
+        it('does not focus the search when the collection is not tagged with autofocus', () => {
+            const props = Object.assign(Object.assign({}, getDefaultProps()), { initialStep: stepV2 });
+            renderWithProviders(_jsx(DynamicFlowWise, Object.assign({}, props)));
+            expect(screen.getByPlaceholderText('Search items...')).not.toHaveFocus();
+        });
+    });
+});

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();
+            });
+        });
+    });
+});

package/build/tests/DateInput.test.js

@@ -0,0 +1,190 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { renderWithProviders } from '../test-utils';
+import DynamicFlowWise from '../test-utils/DynamicFlowWise';
+import userEvent from '@testing-library/user-event';
+import { screen, waitFor } from '@testing-library/react';
+const user = userEvent.setup({ advanceTimers: vi.advanceTimersByTime });
+describe('given a step with date input', () => {
+    const step = (required, defaultValue) => ({
+        id: 'step',
+        title: 'step title',
+        schemas: [
+            {
+                properties: {
+                    date: {
+                        format: 'date',
+                        title: 'This is a date',
+                        type: 'string',
+                        default: defaultValue,
+                    },
+                },
+                required: required ? ['date'] : undefined,
+                displayOrder: ['date'],
+                $id: '#schema',
+                type: 'object',
+            },
+        ],
+        layout: [
+            {
+                schemaId: '#schema',
+                type: 'form',
+            },
+            {
+                type: 'button',
+                title: 'Submit',
+                action: { url: '/submit' },
+            },
+        ],
+    });
+    describe('when a full date is provided', () => {
+        it('submits successfully', async () => {
+            vi.setSystemTime(new Date(2026, 1, 1, 12, 0));
+            const httpClient = vi.fn();
+            renderWithProviders(_jsx(DynamicFlowWise, { flowId: "flow-id", httpClient: httpClient, initialStep: step(true), onCompletion: vi.fn(), onError: vi.fn() }));
+            await user.click(screen.getAllByText('Month')[0]);
+            await waitFor(() => {
+                expect(screen.getByText('January')).toBeInTheDocument();
+            });
+            await user.click(screen.getByText('January'));
+            await user.type(screen.getByLabelText('Day'), '1');
+            await user.type(screen.getByLabelText('Year'), '2024');
+            await user.click(screen.getByText('Submit'));
+            await waitFor(() => {
+                expect(httpClient).toHaveBeenCalled();
+            });
+            expect(screen.queryByText('Please fill out this field.')).not.toBeInTheDocument();
+        });
+    });
+    describe('when a partial date (YYYY-MM) is filled in', () => {
+        describe('and the field is required', () => {
+            it('blocks submission', async () => {
+                const httpClient = vi.fn();
+                renderWithProviders(_jsx(DynamicFlowWise, { flowId: "flow-id", httpClient: httpClient, initialStep: step(true), onCompletion: vi.fn(), onError: vi.fn() }));
+                await waitFor(() => {
+                    expect(screen.getByText('step title')).toBeInTheDocument();
+                });
+                await user.click(screen.getAllByText('Month')[0]);
+                await waitFor(() => {
+                    expect(screen.getByText('January')).toBeInTheDocument();
+                });
+                await user.click(screen.getByText('January'));
+                await user.type(screen.getByLabelText('Year'), '2024');
+                await user.click(screen.getByText('Submit'));
+                await waitFor(() => {
+                    expect(httpClient).not.toHaveBeenCalled();
+                });
+                expect(screen.getByText('Please fill out this field.')).toBeInTheDocument();
+            });
+        });
+        describe('and the field is optional', () => {
+            it('submits null', async () => {
+                const httpClient = vi.fn();
+                renderWithProviders(_jsx(DynamicFlowWise, { flowId: "flow-id", httpClient: httpClient, initialStep: step(false), onCompletion: vi.fn(), onError: vi.fn() }));
+                await waitFor(() => {
+                    expect(screen.getByText('step title')).toBeInTheDocument();
+                });
+                await user.click(screen.getAllByText('Month')[0]);
+                await waitFor(() => {
+                    expect(screen.getByText('January')).toBeInTheDocument();
+                });
+                await user.click(screen.getByText('January'));
+                await user.type(screen.getByLabelText('Year'), '2024');
+                await user.click(screen.getByText('Submit'));
+                await waitFor(() => {
+                    expect(httpClient).toHaveBeenCalledWith('/submit', expect.objectContaining({ body: '{}' }));
+                });
+                expect(screen.queryByText('Please fill out this field.')).not.toBeInTheDocument();
+            });
+        });
+    });
+    describe('when a partial date (YYYY-MM) is provided in the model', () => {
+        describe('and the field is required', () => {
+            it('blocks submission', async () => {
+                const httpClient = vi.fn();
+                renderWithProviders(_jsx(DynamicFlowWise, { flowId: "flow-id", httpClient: httpClient, initialStep: Object.assign(Object.assign({}, step(true)), { model: { date: '2024-07' } }), onCompletion: vi.fn(), onError: vi.fn() }));
+                await user.click(screen.getByText('Submit'));
+                await waitFor(() => {
+                    expect(httpClient).not.toHaveBeenCalled();
+                });
+                expect(screen.getByText('Please enter a date in the correct format.')).toBeInTheDocument();
+            });
+        });
+        describe('and the field is optional', () => {
+            it('submits null', async () => {
+                const httpClient = vi.fn();
+                renderWithProviders(_jsx(DynamicFlowWise, { flowId: "flow-id", httpClient: httpClient, initialStep: Object.assign(Object.assign({}, step(false)), { model: { date: '2024-07' } }), onCompletion: vi.fn(), onError: vi.fn() }));
+                await user.click(screen.getByText('Submit'));
+                await waitFor(() => {
+                    expect(httpClient).toHaveBeenCalledWith('/submit', expect.objectContaining({ body: '{}' }));
+                });
+                expect(screen.queryByText('Please fill out this field.')).not.toBeInTheDocument();
+            });
+        });
+    });
+    it('omits incomplete YYYY and YYYY-MM model values from submission', async () => {
+        const httpClient = vi.fn();
+        const partialDatesStep = Object.assign(Object.assign({}, step(false)), { model: { year: '2026', yearMonth: '2026-09' }, schemas: [
+                {
+                    properties: {
+                        year: {
+                            format: 'date',
+                            title: 'Year',
+                            type: 'string',
+                        },
+                        yearMonth: {
+                            format: 'date',
+                            title: 'Year and month',
+                            type: 'string',
+                        },
+                    },
+                    displayOrder: ['year', 'yearMonth'],
+                    $id: '#schema',
+                    type: 'object',
+                },
+            ] });
+        renderWithProviders(_jsx(DynamicFlowWise, { flowId: "flow-id", httpClient: httpClient, initialStep: partialDatesStep, onCompletion: vi.fn(), onError: vi.fn() }));
+        await user.click(screen.getByText('Submit'));
+        await waitFor(() => {
+            expect(httpClient).toHaveBeenCalledWith('/submit', expect.objectContaining({ body: '{}' }));
+        });
+    });
+    describe('when an invalid date is provided', () => {
+        const cases = [
+            { model: 'abcd-ef-gh', description: 'nonsense string in model' },
+            { model: '25-10-1985', description: 'wrong format in model' },
+            { default: 'abcd-ef-gh', description: 'nonsense string in default' },
+            { default: '25-10-1985', description: 'wrong format in default' },
+        ];
+        cases.forEach(({ model, default: defaultValue, description }) => {
+            it(`blocks submission for ${model !== null && model !== void 0 ? model : defaultValue} because "${description}"`, async () => {
+                const httpClient = vi.fn();
+                renderWithProviders(_jsx(DynamicFlowWise, { flowId: "flow-id", httpClient: httpClient, initialStep: Object.assign(Object.assign({}, step(true, defaultValue)), { model: { date: model !== null && model !== void 0 ? model : null } }), onCompletion: vi.fn(), onError: vi.fn() }));
+                await user.click(screen.getByText('Submit'));
+                await waitFor(() => {
+                    expect(httpClient).not.toHaveBeenCalled();
+                });
+                expect(screen.getByText('Please fill out this field.')).toBeInTheDocument();
+            });
+        });
+    });
+    describe('when a date-time value is provided in the model', () => {
+        it('extracts and uses only the date portion', async () => {
+            const httpClient = vi.fn();
+            renderWithProviders(_jsx(DynamicFlowWise, { flowId: "flow-id", httpClient: httpClient, initialStep: Object.assign(Object.assign({}, step(true)), { model: { date: '1985-10-25T01:18:00.000-08:00' } }), onCompletion: vi.fn(), onError: vi.fn() }));
+            await user.click(screen.getByText('Submit'));
+            await waitFor(() => {
+                expect(httpClient).toHaveBeenCalledWith('/submit', expect.objectContaining({ body: '{"date":"1985-10-25"}' }));
+            });
+        });
+    });
+    describe('when a date-time value is provided in the schema default', () => {
+        it('extracts and uses only the date portion', async () => {
+            const httpClient = vi.fn();
+            renderWithProviders(_jsx(DynamicFlowWise, { flowId: "flow-id", httpClient: httpClient, initialStep: Object.assign({}, step(true, '1985-10-25T01:18:00.000-08:00')), onCompletion: vi.fn(), onError: vi.fn() }));
+            await user.click(screen.getByText('Submit'));
+            await waitFor(() => {
+                expect(httpClient).toHaveBeenCalledWith('/submit', expect.objectContaining({ body: '{"date":"1985-10-25"}' }));
+            });
+        });
+    });
+});