@wise/dynamic-flow-client 5.25.1 → 5.25.2

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

@@ -0,0 +1,47 @@
+/**
+ * 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

@@ -0,0 +1,36 @@
+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

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

package/build/test-utils/index.js

@@ -0,0 +1,3 @@
+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

@@ -0,0 +1,23 @@
+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

@@ -0,0 +1,15 @@
+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

@@ -0,0 +1,7 @@
+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

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

package/build/test-utils/useSnackBar.js

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

package/build/test-utils/wait.js

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

package/build/tests/AlertLayout.test.js

@@ -0,0 +1,228 @@
+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

@@ -0,0 +1,118 @@
+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]),
+                }));
+            });
+        });
+    });
+});