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

package/build/test-utils/fetch-utils.js

@@ -1,47 +0,0 @@
-/**
- * Returns a mock http client you can use in your DynamicFlow.
- *
- * @param handlers Map of flow URL to http clients
- * @returns An http client that will handle real URLs and URLs in the handlers map
- * @example getMockHttpClient({
- *  '/form': () => respondWith(formStep),
- *  '/recipient': () => respondWith(recipientStep),
- * })
- */
-export const getMockHttpClient = (handlers) => async (input, init) => {
-    if (typeof input !== 'string') {
-        throw new Error(`Cannot handle non URL httpClient input`);
-    }
-    if (isRealUrl(input)) {
-        return handleRealUrl(input, init);
-    }
-    const handler = handlers[input];
-    if (handler) {
-        return handler(input, init);
-    }
-    throw new Error(`No handler for ${input}`);
-};
-export const respondWith = async (data, init) => {
-    return new Response(data == null ? null : JSON.stringify(data), init);
-};
-export const respondWithDelay = async (data, delayMs, init) => new Promise((resolve) => {
-    setTimeout(() => {
-        resolve(new Response(JSON.stringify(data), init));
-    }, delayMs);
-});
-export const respondWithEtag = async (step) => new Response(JSON.stringify(step), { headers: { etag: eTagFromStep(step) } });
-export const respondWithEmptyOk = async () => new Response(null, { status: 200 });
-export const respondWithEmptyAndEtag = async (step) => new Response(null, { headers: { etag: eTagFromStep(step) }, status: 304 });
-const eTagFromStep = (step) => {
-    const schema = JSON.stringify(step.schemas ? step.schemas[0] : {});
-    return `${schema.slice(0, 50)}-${schema.length}`;
-};
-const isRealUrl = (url) => url.startsWith('http');
-const handleRealUrl = async (url, init) => fetch(url, init);
-export const abortableDelay = async (delayMs, signal) => new Promise((resolve, reject) => {
-    const timeoutId = setTimeout(() => resolve(), delayMs);
-    signal === null || signal === void 0 ? void 0 : signal.addEventListener('abort', () => {
-        clearTimeout(timeoutId);
-        reject(new DOMException('AbortError', 'AbortError'));
-    });
-});

package/build/test-utils/getMergedTestRenderers.js

@@ -1,36 +0,0 @@
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-import { jsx as _jsx } from "react/jsx-runtime";
-import { getWiseRenderers, InitialLoadingStateRenderer } from '@wise/dynamic-flow-renderers';
-import { getDynamicSubflowRenderer } from '../renderers/subflow/getDynamicSubflowRenderer';
-import DynamicFlowWise from './DynamicFlowWise';
-import { DynamicFlowWiseModal } from './DynamicFlowWiseModal';
-const wiseRenderers = getWiseRenderers();
-export const getMergedTestRenderers = (props) => {
-    var _a;
-    var _b;
-    const { initialAction, initialStep } = props, restProps = __rest(props, ["initialAction", "initialStep"]);
-    const subflowFeatures = Object.assign(Object.assign({}, props.features), { nativeBack: true });
-    const subflowRenderer = getDynamicSubflowRenderer({
-        Component: (_a) => {
-            var { presentation, initialRequest } = _a, rest = __rest(_a, ["presentation", "initialRequest"]);
-            const action = {
-                url: initialRequest.url,
-                method: initialRequest.method,
-                data: initialRequest.body,
-            };
-            return presentation.type === 'push' ? (_jsx(DynamicFlowWise, Object.assign({}, restProps, rest, { features: subflowFeatures, initialAction: action }))) : (_jsx(DynamicFlowWiseModal, Object.assign({}, restProps, rest, { features: subflowFeatures, initialAction: action })));
-        },
-    });
-    const loadingStateRenderer = ((_a = props.features) === null || _a === void 0 ? void 0 : _a.initialLoader) ? [InitialLoadingStateRenderer] : [];
-    return [...((_b = props.renderers) !== null && _b !== void 0 ? _b : []), subflowRenderer, ...loadingStateRenderer, ...wiseRenderers];
-};

package/build/test-utils/getRandomId.js

@@ -1 +0,0 @@
-export const getRandomId = () => Math.random().toString(36).substring(2);

package/build/test-utils/index.js

@@ -1,3 +0,0 @@
-export { getMockHttpClient, respondWith, respondWithDelay, respondWithEtag, respondWithEmptyOk, respondWithEmptyAndEtag, } from './fetch-utils';
-export { renderWithProviders } from './rtl-utils';
-export { wait } from './wait';

package/build/test-utils/mockIntersectionObserver.js

@@ -1,23 +0,0 @@
-import { vi } from 'vitest';
-export const mockIntersectionObserver = (isIntersecting) => {
-    vi.stubGlobal('IntersectionObserver', class {
-        get root() {
-            return null;
-        }
-        get rootMargin() {
-            return '';
-        }
-        get thresholds() {
-            return [];
-        }
-        constructor(callback) {
-            this.observe = vi.fn().mockImplementation((el) => {
-                this.callback([{ isIntersecting, target: el }], this);
-            });
-            this.unobserve = vi.fn();
-            this.disconnect = vi.fn();
-            this.takeRecords = vi.fn().mockReturnValue([]);
-            this.callback = callback;
-        }
-    });
-};

package/build/test-utils/openLinkInNewTab.js

@@ -1,15 +0,0 @@
-export const openLinkInNewTab = (url) => {
-    if (typeof window === 'undefined' || typeof window.open !== 'function') {
-        return false;
-    }
-    try {
-        const w = window.open(url, '_blank');
-        if (w) {
-            w.opener = null;
-        }
-        return Boolean(w);
-    }
-    catch (_a) {
-        return false;
-    }
-};

package/build/test-utils/rtl-utils.js

@@ -1,7 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { render } from '@testing-library/react';
-import NeptuneProviders from './NeptuneProviders';
-export const renderWithProviders = (children, options) => {
-    const renderedResult = render(_jsx(NeptuneProviders, { children: children }), options);
-    return Object.assign(Object.assign({}, renderedResult), { rerender: (ui, renderOptions) => renderWithProviders(ui, Object.assign({ container: renderedResult.container }, renderOptions)) });
-};

package/build/test-utils/step-utils.js

@@ -1,6 +0,0 @@
-export const createEmptyStep = () => ({
-    id: 'empty-step',
-    title: '',
-    layout: [],
-    schemas: [],
-});

package/build/test-utils/useSnackBar.js

@@ -1,4 +0,0 @@
-import { useSnackBarIfAvailable } from '@wise/dynamic-flow-renderers';
-export const useSnackBar = () => {
-    return useSnackBarIfAvailable();
-};

package/build/test-utils/wait.js

@@ -1,3 +0,0 @@
-export const wait = async (ms) => new Promise((resolve) => {
-    setTimeout(resolve, ms);
-});

package/build/tests/AlertLayout.test.js

@@ -1,228 +0,0 @@
-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('AlertLayout component', () => {
-    const getDefaultProps = () => ({
-        flowId: 'flow-id',
-        httpClient: vi.fn(),
-        onCompletion: vi.fn(),
-        onError: vi.fn(),
-        onEvent: vi.fn(),
-        onLog: vi.fn(),
-    });
-    const getInitialStep = (behavior) => ({
-        id: 'step-id',
-        title: 'Step with alert',
-        layout: [
-            {
-                type: 'alert',
-                markdown: 'This is an alert',
-                callToAction: {
-                    title: 'Call to Action',
-                    behavior,
-                },
-            },
-        ],
-        schemas: [],
-    });
-    const getStepWithAlert = (alert) => ({
-        id: 'step-id',
-        title: 'Step with alert',
-        layout: [alert],
-        schemas: [],
-    });
-    describe('Old "container" behavior type', () => {
-        describe('Given an alert layout component with a link behavior', () => {
-            const props = Object.assign(Object.assign({}, getDefaultProps()), { initialStep: getInitialStep({ link: { url: 'https://google.com' } }) });
-            it('should render a link that opens the url on click', async () => {
-                renderWithProviders(_jsx(DynamicFlowWise, Object.assign({}, props)));
-                await waitFor(() => {
-                    expect(screen.getByRole('link')).toHaveTextContent('Call to Action');
-                });
-                expect(screen.getByRole('link')).toHaveAttribute('href', 'https://google.com');
-            });
-        });
-        describe('Given an alert layout component with an action behavior', () => {
-            const props = Object.assign(Object.assign({}, getDefaultProps()), { initialStep: getInitialStep({ action: { url: '/action' } }) });
-            it('should trigger the action on click', async () => {
-                renderWithProviders(_jsx(DynamicFlowWise, Object.assign({}, props)));
-                await waitFor(() => {
-                    expect(screen.getByRole('button')).toHaveTextContent('Call to Action');
-                });
-                await user.click(screen.getByRole('button'));
-                expect(props.httpClient).toHaveBeenCalledWith('/action', expect.any(Object));
-            });
-        });
-    });
-    describe('New "union type" behavior type', () => {
-        describe('Given an alert layout component with a link behavior', () => {
-            const props = Object.assign(Object.assign({}, getDefaultProps()), { initialStep: getInitialStep({ type: 'link', url: 'https://google.com' }) });
-            it('should render a link that opens the url on click', async () => {
-                renderWithProviders(_jsx(DynamicFlowWise, Object.assign({}, props)));
-                await waitFor(() => {
-                    expect(screen.getByRole('link')).toHaveTextContent('Call to Action');
-                });
-                expect(screen.getByRole('link')).toHaveAttribute('href', 'https://google.com');
-            });
-        });
-        describe('Given an alert layout component with an action behavior', () => {
-            const props = Object.assign(Object.assign({}, getDefaultProps()), { initialStep: getInitialStep({ type: 'action', action: { url: '/action' } }) });
-            it('should trigger the action on click', async () => {
-                renderWithProviders(_jsx(DynamicFlowWise, Object.assign({}, props)));
-                await waitFor(() => {
-                    expect(screen.getByRole('button')).toHaveTextContent('Call to Action');
-                });
-                await user.click(screen.getByRole('button'));
-                expect(props.httpClient).toHaveBeenCalledWith('/action', expect.any(Object));
-            });
-        });
-    });
-    describe('prompt selection', () => {
-        const primaryCallToAction = {
-            title: 'Primary action',
-            behavior: { type: 'link', url: '/primary' },
-        };
-        const secondaryCallToAction = {
-            title: 'Secondary action',
-            behavior: { type: 'link', url: '/secondary' },
-        };
-        it.each([
-            {
-                name: 'no actions',
-                alert: { type: 'alert', markdown: 'No actions' },
-            },
-            {
-                name: 'only a primary action without the preference tag',
-                alert: {
-                    type: 'alert',
-                    markdown: 'Primary action only',
-                    callToAction: primaryCallToAction,
-                },
-            },
-            {
-                name: 'only a secondary action with the preference tag',
-                alert: {
-                    type: 'alert',
-                    markdown: 'Secondary action only',
-                    secondaryCallToAction,
-                    tags: ['prefers-action-prompt'],
-                },
-            },
-        ])('renders an InfoPrompt with $name', ({ alert }) => {
-            renderWithProviders(_jsx(DynamicFlowWise, Object.assign({}, getDefaultProps(), { initialStep: getStepWithAlert(alert) })));
-            expect(screen.getByRole('status')).toBeInTheDocument();
-            expect(screen.queryByRole('region')).not.toBeInTheDocument();
-        });
-        it.each([
-            {
-                name: 'primary and secondary actions',
-                alert: {
-                    type: 'alert',
-                    markdown: 'Two actions',
-                    callToAction: primaryCallToAction,
-                    secondaryCallToAction,
-                },
-            },
-            {
-                name: 'a primary action and the preference tag',
-                alert: {
-                    type: 'alert',
-                    markdown: 'Preferred action prompt',
-                    callToAction: primaryCallToAction,
-                    tags: ['prefers-action-prompt'],
-                },
-            },
-        ])('renders an ActionPrompt with $name', ({ alert }) => {
-            renderWithProviders(_jsx(DynamicFlowWise, Object.assign({}, getDefaultProps(), { initialStep: getStepWithAlert(alert) })));
-            expect(screen.getByRole('region')).toBeInTheDocument();
-            expect(screen.queryByRole('status')).not.toBeInTheDocument();
-        });
-        it('ignores a secondary action when rendering an InfoPrompt', () => {
-            renderWithProviders(_jsx(DynamicFlowWise, Object.assign({}, getDefaultProps(), { initialStep: getStepWithAlert({
-                    type: 'alert',
-                    markdown: 'Secondary action only',
-                    secondaryCallToAction,
-                    tags: ['prefers-action-prompt'],
-                }) })));
-            expect(screen.queryByText('Secondary action')).not.toBeInTheDocument();
-        });
-    });
-    describe('prompt properties', () => {
-        it('renders the title and supported markdown', () => {
-            renderWithProviders(_jsx(DynamicFlowWise, Object.assign({}, getDefaultProps(), { initialStep: getStepWithAlert({
-                    type: 'alert',
-                    title: 'Payment received',
-                    markdown: 'This is **important**.',
-                }) })));
-            expect(screen.getByText('Payment received')).toBeInTheDocument();
-            expect(screen.getByText('important')).toHaveProperty('tagName', 'STRONG');
-        });
-        it('uses custom image media for an ActionPrompt', () => {
-            renderWithProviders(_jsx(DynamicFlowWise, Object.assign({}, getDefaultProps(), { initialStep: getStepWithAlert({
-                    type: 'alert',
-                    markdown: 'Action prompt with image',
-                    callToAction: {
-                        title: 'Continue',
-                        behavior: { type: 'link', url: '/continue' },
-                    },
-                    tags: ['prefers-action-prompt'],
-                    media: {
-                        type: 'image',
-                        uri: 'https://example.com/prompt.png',
-                        accessibilityDescription: 'Prompt illustration',
-                    },
-                }) })));
-            expect(screen.getByRole('img', { name: 'Prompt illustration' })).toHaveAttribute('src', 'https://example.com/prompt.png');
-        });
-        it('falls back to the default InfoPrompt icon for non-icon media', () => {
-            renderWithProviders(_jsx(DynamicFlowWise, Object.assign({}, getDefaultProps(), { initialStep: getStepWithAlert({
-                    type: 'alert',
-                    markdown: 'Info prompt with unsupported image media',
-                    media: {
-                        type: 'image',
-                        uri: 'https://example.com/prompt.png',
-                        accessibilityDescription: 'Unsupported prompt illustration',
-                    },
-                }) })));
-            expect(screen.queryByRole('img', { name: 'Unsupported prompt illustration' })).not.toBeInTheDocument();
-            expect(screen.getByTestId('status-icon')).toBeInTheDocument();
-        });
-        it('uses custom icon media for an InfoPrompt', () => {
-            renderWithProviders(_jsx(DynamicFlowWise, Object.assign({}, getDefaultProps(), { initialStep: getStepWithAlert({
-                    type: 'alert',
-                    markdown: 'Info prompt with custom icon',
-                    media: {
-                        type: 'image',
-                        uri: 'urn:wise:icons:bank',
-                        accessibilityDescription: 'Bank icon',
-                    },
-                }) })));
-            expect(screen.getByTestId('bank-icon')).toBeInTheDocument();
-            expect(screen.queryByTestId('status-icon')).not.toBeInTheDocument();
-        });
-        it('dismisses the prompt and sends the request without waiting for its response', async () => {
-            const httpClient = vi.fn().mockRejectedValue(new Error('Request failed'));
-            renderWithProviders(_jsx(DynamicFlowWise, Object.assign({}, getDefaultProps(), { httpClient: httpClient, initialStep: getStepWithAlert({
-                    type: 'alert',
-                    markdown: 'Dismissible prompt',
-                    onDismiss: {
-                        url: '/dismiss-alert',
-                        method: 'POST',
-                        body: { alertId: 'alert-123' },
-                        headers: { 'X-Alert': 'alert-123' },
-                    },
-                }) })));
-            await user.click(screen.getByLabelText('Close'));
-            expect(screen.queryByText('Dismissible prompt')).not.toBeInTheDocument();
-            expect(httpClient).toHaveBeenCalledWith('/dismiss-alert', {
-                method: 'POST',
-                body: JSON.stringify({ alertId: 'alert-123' }),
-                headers: { 'X-Alert': 'alert-123' },
-            });
-        });
-    });
-});

package/build/tests/ArrayTuple.test.js

@@ -1,118 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { screen, waitFor } from '@testing-library/react';
-import { vi } from 'vitest';
-import { renderWithProviders } from '../test-utils';
-import DynamicFlowWise from '../test-utils/DynamicFlowWise';
-import { userEvent } from '@testing-library/user-event';
-const user = userEvent.setup({ advanceTimers: vi.advanceTimersByTime });
-const tupleSchema = {
-    $id: '#schema',
-    type: 'array',
-    items: [
-        {
-            type: 'string',
-            title: 'name',
-        },
-        {
-            type: 'integer',
-            title: 'age',
-        },
-    ],
-};
-const step = {
-    id: 'array-schema-step',
-    title: 'Array Schema Text',
-    schemas: [tupleSchema],
-    layout: [
-        {
-            type: 'form',
-            schemaId: '#schema',
-        },
-        {
-            type: 'button',
-            title: 'Submit',
-            action: {
-                url: '/submit',
-            },
-        },
-    ],
-};
-describe('given a array tuple schema', () => {
-    it('will render all items', () => {
-        renderWithProviders(_jsx(DynamicFlowWise, { initialStep: step, flowId: "array-schema-test", httpClient: vi.fn(), onError: () => { }, onCompletion: () => { } }));
-        expect(screen.getByLabelText('name')).toBeInTheDocument();
-        expect(screen.getByLabelText('age')).toBeInTheDocument();
-    });
-    it('will submit an array of nulls when children are not filled in and schema is not required (in an object)', async () => {
-        const mockHttpClient = vi.fn();
-        renderWithProviders(_jsx(DynamicFlowWise, { initialStep: Object.assign(Object.assign({}, step), { schemas: [
-                    {
-                        type: 'object',
-                        $id: '#schema',
-                        displayOrder: ['schema'],
-                        properties: {
-                            schema: tupleSchema,
-                        },
-                    },
-                ] }), flowId: "array-schema-test", httpClient: mockHttpClient, onError: () => { }, onCompletion: () => { } }));
-        await user.click(screen.getByRole('button', { name: 'Submit' }));
-        await waitFor(() => {
-            expect(mockHttpClient).toHaveBeenCalledWith('/submit', expect.objectContaining({
-                body: JSON.stringify({ schema: [null, null] }),
-            }));
-        });
-    });
-    it('will submit an array of the children items when filled in', async () => {
-        const mockHttpClient = vi.fn();
-        renderWithProviders(_jsx(DynamicFlowWise, { initialStep: step, flowId: "array-schema-test", httpClient: mockHttpClient, onError: () => { }, onCompletion: () => { } }));
-        await user.type(screen.getByLabelText('name'), 'Jon Snow');
-        await user.type(screen.getByLabelText('age'), '25');
-        await user.click(screen.getByRole('button', { name: 'Submit' }));
-        await waitFor(() => {
-            expect(mockHttpClient).toHaveBeenCalledWith('/submit', expect.objectContaining({
-                body: JSON.stringify(['Jon Snow', 25]),
-            }));
-        });
-    });
-    describe('when the schema is explicitly required (i.e. a required child of an object schema)', () => {
-        const tupleInObjectSchema = {
-            $id: '#schema',
-            type: 'object',
-            displayOrder: ['tuple'],
-            required: ['tuple'],
-            properties: {
-                tuple: tupleSchema,
-            },
-        };
-        it('ensures that all items are required', async () => {
-            const mockHttpClient = vi.fn();
-            renderWithProviders(_jsx(DynamicFlowWise, { initialStep: Object.assign(Object.assign({}, step), { schemas: [tupleInObjectSchema] }), flowId: "array-schema-test", httpClient: mockHttpClient, onError: () => { }, onCompletion: () => { } }));
-            await user.click(screen.getByRole('button', { name: 'Submit' }));
-            await waitFor(() => {
-                expect(screen.getAllByText(/please fill out this field/i)).toHaveLength(2);
-            });
-            expect(mockHttpClient).not.toHaveBeenCalled();
-        });
-    });
-    describe('when the step has errors in an array that match the schema', () => {
-        it('passes down the errors into the child components', () => {
-            renderWithProviders(_jsx(DynamicFlowWise, { initialStep: Object.assign(Object.assign({}, step), { errors: { validation: ['This name is NOT allowed', 'This is TOO old'] } }), flowId: "array-schema-test", httpClient: vi.fn(), onError: () => { }, onCompletion: () => { } }));
-            expect(screen.getByText(/this name is not allowed/i)).toBeInTheDocument();
-            expect(screen.getByText(/this is too old/i)).toBeInTheDocument();
-        });
-    });
-    describe('when a model is provided', () => {
-        it('correctly fills the fields', async () => {
-            const mockHttpClient = vi.fn();
-            renderWithProviders(_jsx(DynamicFlowWise, { initialStep: Object.assign(Object.assign({}, step), { model: ['Colin Robinson', 103] }), flowId: "array-schema-test", httpClient: mockHttpClient, onError: () => { }, onCompletion: () => { } }));
-            await user.click(screen.getByRole('button', { name: 'Submit' }));
-            expect(screen.getByDisplayValue('Colin Robinson')).toBeInTheDocument();
-            expect(screen.getByDisplayValue('103')).toBeInTheDocument();
-            await waitFor(() => {
-                expect(mockHttpClient).toHaveBeenCalledWith('/submit', expect.objectContaining({
-                    body: JSON.stringify(['Colin Robinson', 103]),
-                }));
-            });
-        });
-    });
-});