@wise/dynamic-flow-client 5.25.1 → 5.25.2

package/build/tests/InitialAction.test.js

@@ -0,0 +1,235 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/* eslint-disable @typescript-eslint/no-unsafe-member-access */
+import { screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { useState } from 'react';
+import { vi } from 'vitest';
+import { renderWithProviders, respondWith } from '../test-utils';
+import DynamicFlowWise from '../test-utils/DynamicFlowWise';
+const user = userEvent.setup({ advanceTimers: vi.advanceTimersByTime });
+const getDefaultProps = () => ({
+    flowId: 'flow-id',
+    httpClient: vi.fn().mockResolvedValue(respondWith(getStep())),
+    initialAction: { url: '/initial', method: 'GET' },
+    onCompletion: vi.fn(),
+    onError: vi.fn(),
+    onEvent: vi.fn(),
+    onLog: vi.fn(),
+    onLink: vi.fn(),
+});
+const getStep = () => ({
+    id: 'step-id',
+    title: 'Initial Action Test',
+    analytics: { custom: 'analytics' },
+    layout: [
+        { type: 'paragraph', text: 'This is a test' },
+        {
+            type: 'button',
+            title: 'Submit',
+            action: { id: 'action-id', url: '/submit', method: 'POST' },
+        },
+    ],
+    schemas: [],
+    model: null,
+});
+describe('Initial action', () => {
+    describe('Given a DynamicFlow component with a "initialAction" prop', () => {
+        it('renders the step', async () => {
+            renderWithProviders(_jsx(DynamicFlowWise, Object.assign({}, getDefaultProps())));
+            await waitFor(() => {
+                expect(screen.getByText('This is a test')).toBeInTheDocument();
+            });
+        });
+        it('triggers the "Initiated" tracking event with flowId', async () => {
+            const props = getDefaultProps();
+            renderWithProviders(_jsx(DynamicFlowWise, Object.assign({}, props)));
+            await waitFor(() => {
+                expect(props.onEvent).toHaveBeenCalledWith('Dynamic Flow - Initiated', expect.objectContaining({
+                    flowId: 'flow-id',
+                }));
+            });
+        });
+        it('does not trigger "Action Triggered" nor "Action Succeeded" tracking events', async () => {
+            const props = getDefaultProps();
+            renderWithProviders(_jsx(DynamicFlowWise, Object.assign({}, props)));
+            await waitFor(() => {
+                expect(props.onEvent).toHaveBeenCalledWith('Dynamic Flow - Step Shown', expect.anything());
+            });
+            expect(props.onEvent).not.toHaveBeenCalledWith('Dynamic Flow - Action Triggered', expect.anything());
+            expect(props.onEvent).not.toHaveBeenCalledWith('Dynamic Flow - Action Succeeded', expect.anything());
+        });
+        it('triggers the "Step Shown" tracking event, with flowId, stepId, and step analytics', async () => {
+            const props = getDefaultProps();
+            renderWithProviders(_jsx(DynamicFlowWise, Object.assign({}, props)));
+            await waitFor(() => {
+                expect(props.onEvent).toHaveBeenCalledWith('Dynamic Flow - Step Shown', expect.objectContaining({
+                    flowId: 'flow-id',
+                    stepId: 'step-id',
+                    stepCount: 0,
+                    custom: 'analytics',
+                    isFirstStep: true,
+                }));
+            });
+        });
+        describe('when the initialAction is missing the method property', () => {
+            it('makes the GET request', async () => {
+                const props = Object.assign(Object.assign({}, getDefaultProps()), { initialAction: { url: '/initial' } });
+                renderWithProviders(_jsx(DynamicFlowWise, Object.assign({}, props)));
+                await waitFor(() => {
+                    expect(props.httpClient).toHaveBeenCalledWith('/initial', expect.objectContaining({ method: 'GET' }));
+                });
+            });
+        });
+        describe('when the initialAction is a GET method', () => {
+            it('makes the GET request', async () => {
+                const props = Object.assign(Object.assign({}, getDefaultProps()), { initialAction: { url: '/initial', method: 'GET' } });
+                renderWithProviders(_jsx(DynamicFlowWise, Object.assign({}, props)));
+                await waitFor(() => {
+                    expect(props.httpClient).toHaveBeenCalledWith('/initial', expect.objectContaining({ method: 'GET' }));
+                });
+            });
+        });
+        describe('when the initialAction is a POST method', () => {
+            it('makes the POST request', async () => {
+                const props = Object.assign(Object.assign({}, getDefaultProps()), { initialAction: {
+                        url: '/initial',
+                        method: 'POST',
+                        data: { custom: 'data' },
+                    } });
+                renderWithProviders(_jsx(DynamicFlowWise, Object.assign({}, props)));
+                await waitFor(() => {
+                    expect(props.httpClient).toHaveBeenCalledWith('/initial', expect.objectContaining({ method: 'POST', body: '{"custom":"data"}' }));
+                });
+            });
+        });
+        describe('when the initial request fails with a generic "Initial request failed"', () => {
+            it('(the fetch promise rejects) calls the onError callback', async () => {
+                const props = Object.assign(Object.assign({}, getDefaultProps()), { httpClient: vi.fn().mockRejectedValue(new Error('Failed')) });
+                renderWithProviders(_jsx(DynamicFlowWise, Object.assign({}, props)));
+                await waitFor(() => {
+                    expect(props.onError).toHaveBeenCalledWith(expect.any(Error), undefined);
+                });
+                expect(props.onError.mock.calls[0][0].message).toContain('Initial request failed');
+            });
+            it('(with status 500, and empty body) calls the onError callback with a generic "Initial request failed"', async () => {
+                const props = Object.assign(Object.assign({}, getDefaultProps()), { httpClient: vi.fn().mockResolvedValue(respondWith(null, { status: 500 })) });
+                renderWithProviders(_jsx(DynamicFlowWise, Object.assign({}, props)));
+                await waitFor(() => {
+                    expect(props.onError).toHaveBeenCalledWith(expect.any(Error), 500);
+                });
+                expect(props.onError.mock.calls[0][0].message).toContain('Initial request failed');
+            });
+            it('(with status 504, and a string body) calls the onError callback with the specified string error', async () => {
+                const props = Object.assign(Object.assign({}, getDefaultProps()), { httpClient: vi
+                        .fn()
+                        .mockResolvedValue(new Response('504 Gateway Time-out', { status: 504 })) });
+                renderWithProviders(_jsx(DynamicFlowWise, Object.assign({}, props)));
+                await waitFor(() => {
+                    expect(props.onError).toHaveBeenCalledWith(expect.any(Error), 504);
+                });
+                expect(props.onError.mock.calls[0][0].message).toContain('504 Gateway Time-out');
+            });
+            it('(with status 500, and global error) calls the onError callback with the error message specified in the response JSON body', async () => {
+                const props = Object.assign(Object.assign({}, getDefaultProps()), { httpClient: vi
+                        .fn()
+                        .mockResolvedValue(respondWith({ error: 'This is a global error' }, { status: 500 })) });
+                renderWithProviders(_jsx(DynamicFlowWise, Object.assign({}, props)));
+                await waitFor(() => {
+                    expect(props.onError).toHaveBeenCalledWith(expect.any(Error), 500);
+                });
+                expect(props.onError.mock.calls[0][0].message).toContain('This is a global error');
+            });
+            it('(step without id/key) calls the onError callback', async () => {
+                const httpClient = vi.fn().mockResolvedValue({
+                    title: 'Step without id nor key',
+                    layout: [],
+                    schemas: [],
+                });
+                const props = Object.assign(Object.assign({}, getDefaultProps()), { httpClient, initialAction: { url: '/initial' } });
+                renderWithProviders(_jsx(DynamicFlowWise, Object.assign({}, props)));
+                await waitFor(() => {
+                    expect(props.onError).toHaveBeenCalledWith(expect.any(Error), undefined);
+                });
+            });
+        });
+        describe('when the DF component is re-rendered by its parent', () => {
+            function ContainerComponent(props) {
+                const [, setState] = useState({});
+                const rerender = () => setState({});
+                const newProps = Object.assign(Object.assign({}, props), { initialAction: {
+                        url: '/initial',
+                        method: 'POST',
+                        data: { custom: 'data' },
+                    } });
+                return (_jsxs(_Fragment, { children: [_jsx("button", { type: "button", onClick: () => rerender(), children: "rerender" }), _jsx(DynamicFlowWise, Object.assign({}, newProps))] }));
+            }
+            it('makes the initial request only once to fetch the first step', async () => {
+                const props = getDefaultProps();
+                renderWithProviders(_jsx(ContainerComponent, Object.assign({}, props)));
+                await waitFor(() => {
+                    expect(props.httpClient).toHaveBeenCalledTimes(1);
+                });
+                await user.click(screen.getByText('rerender'));
+                await waitFor(() => {
+                    expect(props.httpClient).toHaveBeenCalledTimes(1);
+                });
+            });
+        });
+        describe('when the initial request response is an exit response', () => {
+            describe('by means of the "X-Df-Response-Type" header being set to "exit"', () => {
+                it('calls the onCompletion callback with the exit response result', async () => {
+                    const props = Object.assign(Object.assign({}, getDefaultProps()), { httpClient: vi
+                            .fn()
+                            .mockResolvedValue(respondWith({ custom: 'result' }, { status: 200, headers: { 'X-Df-Response-Type': 'exit' } })) });
+                    renderWithProviders(_jsx(DynamicFlowWise, Object.assign({}, props)));
+                    await waitFor(() => {
+                        expect(props.onCompletion).toHaveBeenCalledWith({ custom: 'result' });
+                    });
+                });
+            });
+            it('calls onError if initialAction responds with a modal response', async () => {
+                const modalResponse = {
+                    title: 'Test Modal',
+                    content: [{ type: 'paragraph', text: 'Modal content' }],
+                };
+                const props = Object.assign(Object.assign({}, getDefaultProps()), { httpClient: vi.fn().mockResolvedValue(respondWith(modalResponse, {
+                        status: 200,
+                        headers: { 'X-DF-Response-Type': 'modal' },
+                    })) });
+                renderWithProviders(_jsx(DynamicFlowWise, Object.assign({}, props)));
+                await waitFor(() => {
+                    expect(props.onError).toHaveBeenCalledWith(new Error('Cannot show modal without a current step'), undefined);
+                });
+            });
+            it('calls onError if initialAction responds with a subflow response', async () => {
+                const subflowResponse = {
+                    referrerId: 'ref-id',
+                    launchConfig: {
+                        type: 'dynamic',
+                        request: { url: '/sub', method: 'GET' },
+                        presentation: { type: 'modal' },
+                    },
+                };
+                const props = Object.assign(Object.assign({}, getDefaultProps()), { httpClient: vi.fn().mockResolvedValue(respondWith(subflowResponse, {
+                        status: 200,
+                        headers: { 'X-DF-Response-Type': 'subflow' },
+                    })) });
+                renderWithProviders(_jsx(DynamicFlowWise, Object.assign({}, props)));
+                await waitFor(() => {
+                    expect(props.onError).toHaveBeenCalledWith(new Error('Cannot start subflow without a current step'), undefined);
+                });
+            });
+            describe('by means of the "X-Df-Exit" header being set to "true"', () => {
+                it('calls the onCompletion callback with the exit response result', async () => {
+                    const props = Object.assign(Object.assign({}, getDefaultProps()), { httpClient: vi
+                            .fn()
+                            .mockResolvedValue(respondWith({ custom: 'result' }, { status: 200, headers: { 'X-Df-Exit': 'true' } })) });
+                    renderWithProviders(_jsx(DynamicFlowWise, Object.assign({}, props)));
+                    await waitFor(() => {
+                        expect(props.onCompletion).toHaveBeenCalledWith({ custom: 'result' });
+                    });
+                });
+            });
+        });
+    });
+});

package/build/tests/InitialStep.test.js

@@ -0,0 +1,168 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/* eslint-disable @typescript-eslint/no-unsafe-member-access */
+import { screen, waitFor } from '@testing-library/react';
+import { renderWithProviders } from '../test-utils';
+import DynamicFlowWise from '../test-utils/DynamicFlowWise';
+import { useState } from 'react';
+import { vi } from 'vitest';
+const getDefaultProps = () => ({
+    flowId: 'flow-id',
+    httpClient: vi.fn(),
+    onCompletion: vi.fn(),
+    onError: vi.fn(),
+    onEvent: vi.fn(),
+    onLog: vi.fn(),
+});
+describe('InitialStep', () => {
+    describe('when an initialStep is a valid Step', () => {
+        it('renders the step', async () => {
+            const props = Object.assign(Object.assign({}, getDefaultProps()), { initialStep: {
+                    id: 'step-id',
+                    title: 'Step with id',
+                    layout: [],
+                    schemas: [],
+                } });
+            renderWithProviders(_jsx(DynamicFlowWise, Object.assign({}, props)));
+            expect(screen.getByText('Step with id')).toBeInTheDocument();
+        });
+    });
+    describe('when an initialStep is missing id and key properties', () => {
+        it('triggers onError', async () => {
+            // This test causes an error during rendering.
+            // Even though the error is caught by the ErrorBoundary,
+            // the console.error function is still called.
+            // To avoid flooding the test logs with error messages,
+            // we temporarily replace the console.error function with a mock.
+            // eslint-disable-next-line no-console
+            const consoleError = console.error;
+            // eslint-disable-next-line no-console
+            console.error = vi.fn();
+            const props = Object.assign(Object.assign({}, getDefaultProps()), { initialStep: {
+                    title: 'Step without id nor key',
+                    layout: [],
+                    schemas: [],
+                } });
+            renderWithProviders(_jsx(DynamicFlowWise, Object.assign({}, props)));
+            await waitFor(() => {
+                expect(props.onError).toHaveBeenCalledWith(expect.any(Error), undefined);
+            });
+            // eslint-disable-next-line require-atomic-updates
+            console.error = consoleError;
+        });
+        it('does not continuously try to re-initialise when parent state is updated', async () => {
+            const props = Object.assign(Object.assign({}, getDefaultProps()), { initialStep: {
+                    title: 'Step without id nor key',
+                    layout: [],
+                    schemas: [],
+                } });
+            const ParentComponent = () => {
+                const [state, setState] = useState(0);
+                return (_jsxs("div", { children: [_jsxs("p", { children: ["Parent state: ", state] }), _jsx(DynamicFlowWise, Object.assign({}, props, { onError: () => {
+                                props.onError();
+                                setState((prev) => prev + 1);
+                            } })), ");"] }));
+            };
+            renderWithProviders(_jsx(ParentComponent, {}));
+            await waitFor(() => {
+                expect(props.onError).toHaveBeenCalledTimes(1);
+            });
+        });
+    });
+    describe('when a step has an object schema...', () => {
+        describe('...missing its displayOrder property', () => {
+            const props = Object.assign(Object.assign({}, getDefaultProps()), { initialStep: {
+                    id: 'step-id',
+                    title: 'Invalid object schema',
+                    layout: [{ type: 'form', schemaId: 'MY-OBJECT-SCHEMA' }],
+                    schemas: [
+                        {
+                            $id: 'MY-OBJECT-SCHEMA',
+                            type: 'object',
+                            properties: {
+                                prop1: { type: 'string' },
+                                prop2: { type: 'string' },
+                            },
+                        },
+                    ],
+                } });
+            it('triggers onError and logs an event', async () => {
+                renderWithProviders(_jsx(DynamicFlowWise, Object.assign({}, props)));
+                await waitFor(() => {
+                    expect(props.onError).toHaveBeenCalledWith(expect.any(Error), undefined);
+                });
+                expect(props.onError.mock.calls[0][0].message).toContain('Object schema MY-OBJECT-SCHEMA has no displayOrder property.');
+                expect(props.onLog).toHaveBeenCalledWith('info', 'The provided step does not conform to the specification.', // Zod
+                expect.anything());
+                expect(props.onLog).toHaveBeenCalledWith('error', 'Object schema MY-OBJECT-SCHEMA has no displayOrder property.', { flowId: 'flow-id', stepId: 'step-id', stepCount: 0 });
+            });
+        });
+        describe('...with a displayOrder array that is missing some properties', () => {
+            const props = Object.assign(Object.assign({}, getDefaultProps()), { initialStep: {
+                    id: 'step-id',
+                    title: 'Title: Missing properties in displayOrder',
+                    schemas: [
+                        {
+                            $id: 'MY-OBJECT-SCHEMA',
+                            type: 'object',
+                            displayOrder: ['prop1'],
+                            properties: {
+                                prop1: { type: 'string' },
+                                prop2: { type: 'string' },
+                            },
+                        },
+                    ],
+                    layout: [
+                        { type: 'form', schemaId: 'MY-OBJECT-SCHEMA' },
+                        {
+                            type: 'button',
+                            title: 'Submit',
+                            action: { url: '/submit', method: 'POST' },
+                        },
+                    ],
+                    model: { prop1: 'value1', prop2: 'value2' },
+                } });
+            it('triggers onError and logs an event', async () => {
+                renderWithProviders(_jsx(DynamicFlowWise, Object.assign({}, props)));
+                await waitFor(() => {
+                    expect(props.onError).toHaveBeenCalledWith(expect.any(Error), undefined);
+                });
+                expect(props.onError.mock.calls[0][0].message).toContain('Object schema MY-OBJECT-SCHEMA has a "prop2" property which is missing in the displayOrder array.');
+                expect(props.onLog).toHaveBeenCalledWith('error', 'Object schema MY-OBJECT-SCHEMA has a "prop2" property which is missing in the displayOrder array.', { flowId: 'flow-id', stepId: 'step-id', stepCount: 0 });
+            });
+        });
+        describe('...with a displayOrder array that has some extra properties', () => {
+            const props = Object.assign(Object.assign({}, getDefaultProps()), { initialStep: {
+                    id: 'step-id',
+                    title: 'Title: Missing properties in displayOrder',
+                    schemas: [
+                        {
+                            $id: 'MY-OBJECT-SCHEMA',
+                            type: 'object',
+                            displayOrder: ['prop1', 'prop2', 'prop3'],
+                            properties: {
+                                prop1: { type: 'string' },
+                                prop2: { type: 'string' },
+                            },
+                        },
+                    ],
+                    layout: [
+                        { type: 'form', schemaId: 'MY-OBJECT-SCHEMA' },
+                        {
+                            type: 'button',
+                            title: 'Submit',
+                            action: { url: '/submit', method: 'POST' },
+                        },
+                    ],
+                    model: { prop1: 'value1', prop2: 'value2' },
+                } });
+            it('triggers onError and logs an event', async () => {
+                renderWithProviders(_jsx(DynamicFlowWise, Object.assign({}, props)));
+                await waitFor(() => {
+                    expect(props.onError).toHaveBeenCalledWith(expect.any(Error), undefined);
+                });
+                expect(props.onError.mock.calls[0][0].message).toContain('Object schema MY-OBJECT-SCHEMA has no property named "prop3", but it is listed in the displayOrder array.');
+                expect(props.onLog).toHaveBeenCalledWith('error', 'Object schema MY-OBJECT-SCHEMA has no property named "prop3", but it is listed in the displayOrder array.', { flowId: 'flow-id', stepId: 'step-id', stepCount: 0 });
+            });
+        });
+    });
+});

package/build/tests/InstructionsLayout.test.js

@@ -0,0 +1,45 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { renderWithProviders } from '../test-utils';
+import DynamicFlowWise from '../test-utils/DynamicFlowWise';
+import { vi } from 'vitest';
+describe('InstructionsLayout component', () => {
+    const getDefaultProps = () => ({
+        flowId: 'flow-id',
+        httpClient: vi.fn(),
+        onCompletion: vi.fn(),
+        onError: vi.fn(),
+        onEvent: vi.fn(),
+        onLog: vi.fn(),
+    });
+    const getInitialStep = () => ({
+        id: 'step-id',
+        title: 'Step with instructions',
+        layout: [
+            {
+                type: 'instructions',
+                title: 'Instructions Title',
+                items: [
+                    { text: 'Item 1', context: 'neutral', tag: 'tag1' },
+                    { text: 'Item 2', context: 'neutral', tag: 'tag2' },
+                ],
+            },
+        ],
+        schemas: [],
+    });
+    describe('Extra props', () => {
+        const props = Object.assign(Object.assign({}, getDefaultProps()), { initialStep: getInitialStep() });
+        const customRenderer = {
+            canRenderType: 'instructions',
+            render: vi.fn(),
+        };
+        it('should pass the tag property to the renderer', async () => {
+            renderWithProviders(_jsx(DynamicFlowWise, Object.assign({}, props, { renderers: [customRenderer] })));
+            expect(customRenderer.render).toHaveBeenCalledWith(expect.objectContaining({
+                items: expect.arrayContaining([
+                    expect.objectContaining({ text: 'Item 1', tag: 'tag1' }),
+                    expect.objectContaining({ text: 'Item 2', tag: 'tag2' }),
+                ]),
+            }));
+        });
+    });
+});

package/build/tests/ListLayout.test.js

@@ -0,0 +1,165 @@
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+/* eslint-disable @typescript-eslint/no-unsafe-assignment */
+import { screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { renderWithProviders } from '../test-utils';
+import DynamicFlowWise from '../test-utils/DynamicFlowWise';
+import { vi } from 'vitest';
+const user = userEvent.setup({ advanceTimers: vi.advanceTimersByTime });
+describe('ListLayout component', () => {
+    const getDefaultProps = () => ({
+        flowId: 'flow-id',
+        httpClient: vi.fn(),
+        onCompletion: vi.fn(),
+        onError: vi.fn(),
+        onEvent: vi.fn(),
+        onLog: vi.fn(),
+    });
+    const getInitialStep = () => ({
+        id: 'step-id',
+        title: 'Step with list',
+        layout: [
+            {
+                type: 'list',
+                analyticsId: 'list-layout-aid',
+                title: 'List Title',
+                items: [
+                    {
+                        analyticsId: 'item-1-aid',
+                        title: 'Item 1',
+                        tag: 'tag1',
+                        supportingValues: { value: 'value1', subvalue: 'subvalue1' },
+                        additionalInfo: {
+                            text: 'Additional info 1',
+                            behavior: { type: 'action', action: { url: '/additional-info', method: 'GET' } },
+                            accessibilityDescription: 'Accessibility description for additional info 1',
+                        },
+                    },
+                    {
+                        analyticsId: 'item-2-aid',
+                        title: 'Item 2',
+                        tag: 'tag2',
+                        supportingValues: { value: 'value2', subvalue: 'subvalue2' },
+                        callToAction: {
+                            title: 'Click me',
+                            behavior: {
+                                type: 'action',
+                                action: { url: '/item-cta' },
+                            },
+                        },
+                        additionalInfo: {
+                            text: 'Additional info 2',
+                            behavior: { type: 'action', action: { url: '/additional-info', method: 'GET' } },
+                            accessibilityDescription: 'Accessibility description for additional info 2',
+                        },
+                    },
+                    {
+                        analyticsId: 'item-3-aid',
+                        title: 'Item 3',
+                        tag: 'tag3',
+                        supportingValues: { value: 'value3', subvalue: 'subvalue3' },
+                        callToAction: {
+                            title: 'Go to FooBar',
+                            behavior: {
+                                type: 'link',
+                                url: 'https://foo.bar',
+                            },
+                            accessibilityDescription: 'Accessibility description for item 3 link',
+                        },
+                    },
+                ],
+            },
+        ],
+        schemas: [],
+    });
+    describe('CallToAction', () => {
+        const props = Object.assign(Object.assign({}, getDefaultProps()), { initialStep: getInitialStep() });
+        it('should render a button for the item that performs the behavior on click', async () => {
+            renderWithProviders(_jsx(DynamicFlowWise, Object.assign({}, props)));
+            expect(screen.getByRole('button', { name: 'Click me' })).toBeInTheDocument();
+            await user.click(screen.getByRole('button', { name: 'Click me' }));
+            expect(props.httpClient).toHaveBeenCalledWith('/item-cta', expect.anything());
+        });
+        it('should render a link for the item with the correct href and accessibility description', () => {
+            renderWithProviders(_jsx(DynamicFlowWise, Object.assign({}, props)));
+            const link = screen.getByRole('link', { name: 'Go to FooBar' });
+            expect(link).toBeInTheDocument();
+            expect(link).toHaveAttribute('href', 'https://foo.bar');
+            expect(link).toHaveAttribute('target', '_blank');
+            expect(link).toHaveAttribute('rel', 'noopener noreferrer');
+            expect(link).toHaveAttribute('aria-description', 'Accessibility description for item 3 link');
+        });
+    });
+    describe('Extra props', () => {
+        const props = Object.assign(Object.assign({}, getDefaultProps()), { initialStep: getInitialStep() });
+        const customRenderer = {
+            canRenderType: 'list',
+            render: vi.fn(),
+        };
+        it('should pass the tag and analyticsId property to the renderer', async () => {
+            renderWithProviders(_jsx(DynamicFlowWise, Object.assign({}, props, { renderers: [customRenderer] })));
+            expect(customRenderer.render).toHaveBeenCalledWith(expect.objectContaining({
+                items: expect.arrayContaining([
+                    expect.objectContaining({ title: 'Item 1', tag: 'tag1', analyticsId: 'item-1-aid' }),
+                    expect.objectContaining({ title: 'Item 2', tag: 'tag2', analyticsId: 'item-2-aid' }),
+                ]),
+            }));
+        });
+        it('should pass the additionalInfo property to the renderer', async () => {
+            renderWithProviders(_jsx(DynamicFlowWise, Object.assign({}, props, { renderers: [customRenderer] })));
+            expect(customRenderer.render).toHaveBeenCalledWith(expect.objectContaining({
+                items: expect.arrayContaining([
+                    expect.objectContaining({
+                        title: 'Item 1',
+                        tag: 'tag1',
+                        additionalInfo: expect.objectContaining({
+                            text: 'Additional info 1',
+                            accessibilityDescription: 'Accessibility description for additional info 1',
+                        }),
+                    }),
+                ]),
+            }));
+        });
+        it('should trigger the specified behavior when the additionalInfo is clicked', async () => {
+            const localProps = Object.assign(Object.assign({}, getDefaultProps()), { initialStep: getInitialStep() });
+            const testListRenderer = {
+                canRenderType: 'list',
+                render: (list) => (_jsx(_Fragment, { children: list.items.map((item) => { var _a, _b; return (_jsx("button", { type: "button", onClick: (_a = item.additionalInfo) === null || _a === void 0 ? void 0 : _a.onClick, children: (_b = item.additionalInfo) === null || _b === void 0 ? void 0 : _b.text }, item.title)); }) })),
+            };
+            renderWithProviders(_jsx(DynamicFlowWise, Object.assign({}, localProps, { renderers: [testListRenderer] })));
+            await user.click(screen.getByRole('button', { name: 'Additional info 1' }));
+            expect(localProps.httpClient).toHaveBeenCalledWith('/additional-info', expect.anything());
+        });
+        it('should pass subvalue, value and subvalue to the renderer, even though they are deprecated', () => {
+            const initialStep = {
+                id: 'step-id',
+                title: 'Step with list',
+                layout: [
+                    {
+                        type: 'list',
+                        title: 'List Title',
+                        items: [
+                            {
+                                title: 'Item 1',
+                                subtitle: 'Item 1 subtitle',
+                                value: 'value1',
+                                subvalue: 'subvalue1',
+                            },
+                        ],
+                    },
+                ],
+                schemas: [],
+            };
+            renderWithProviders(_jsx(DynamicFlowWise, Object.assign({}, getDefaultProps(), { initialStep: initialStep, renderers: [customRenderer] })));
+            expect(customRenderer.render).toHaveBeenCalledWith(expect.objectContaining({
+                items: expect.arrayContaining([
+                    expect.objectContaining({
+                        title: 'Item 1',
+                        description: 'Item 1 subtitle',
+                        supportingValues: { value: 'value1', subvalue: 'subvalue1' },
+                    }),
+                ]),
+            }));
+        });
+    });
+});

package/build/tests/Logging.test.js

@@ -0,0 +1,53 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/* eslint-disable @typescript-eslint/no-unsafe-assignment */
+import { screen, waitFor } from '@testing-library/react';
+import { renderWithProviders } from '../test-utils';
+import DynamicFlowWise from '../test-utils/DynamicFlowWise';
+import { vi } from 'vitest';
+const getDefaultProps = () => ({
+    flowId: 'flow-id',
+    httpClient: vi.fn(),
+    onCompletion: vi.fn(),
+    onError: vi.fn(),
+    onEvent: vi.fn(),
+    onLog: vi.fn(),
+});
+describe('Logging Events', () => {
+    describe('when initialStep is missing an "id" property', () => {
+        it('renders the step, and logs an event', async () => {
+            const props = Object.assign(Object.assign({}, getDefaultProps()), { initialStep: {
+                    key: 'step-key',
+                    title: 'Step with key',
+                    layout: [],
+                    schemas: [],
+                } });
+            renderWithProviders(_jsx(DynamicFlowWise, Object.assign({}, props)));
+            expect(screen.getByText('Step with key')).toBeInTheDocument();
+            expect(props.onLog).toHaveBeenCalledWith('info', 'The provided step does not conform to the specification.', expect.objectContaining({
+                flowId: 'flow-id',
+                stepId: 'step-key',
+                errors: expect.any(String),
+            }));
+        });
+    });
+    describe('when loading a step missing an "id" property', () => {
+        it('renders the step, and logs an event', async () => {
+            const httpClient = vi.fn().mockResolvedValue(new Response(JSON.stringify({
+                key: 'step-key',
+                title: 'Step with key',
+                layout: [],
+                schemas: [],
+            }), { status: 200 }));
+            const props = getDefaultProps();
+            renderWithProviders(_jsx(DynamicFlowWise, Object.assign({}, props, { httpClient: httpClient, initialAction: { url: '/' } })));
+            await waitFor(() => {
+                expect(screen.getByText('Step with key')).toBeInTheDocument();
+            });
+            expect(props.onLog).toHaveBeenCalledWith('info', 'The provided step does not conform to the specification.', expect.objectContaining({
+                flowId: 'flow-id',
+                stepId: 'step-key',
+                errors: expect.any(String),
+            }));
+        });
+    });
+});