@wise/dynamic-flow-client 5.28.0 → 5.29.0-experimental-f7c2300

package/build/tests/legacy/PersistAsync.string-schema.test.js

@@ -1,211 +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 { renderWithProviders } from '../../test-utils';
-import DynamicFlowWise from '../../test-utils/DynamicFlowWise';
-import { abortableDelay } from '../../test-utils/fetch-utils';
-import { vi } from 'vitest';
-const user = userEvent.setup({ advanceTimers: vi.advanceTimersByTime });
-// This file is a copy of the E2E test in legacy. It should remain as unchanged
-// as possible, to ensure the new client functionality matches the old one.
-describe('PersistAsync with string schema (basic)', () => {
-    const schema = {
-        $id: '#schema',
-        type: 'object',
-        title: 'Payment Details',
-        displayOrder: ['name', 'cardNumber'],
-        properties: {
-            name: {
-                title: 'Name on Card',
-                type: 'string',
-            },
-            cardNumber: {
-                type: 'string',
-                persistAsync: {
-                    method: 'POST',
-                    url: '/persist-async',
-                    param: 'card-number',
-                    idProperty: 'token',
-                    schema: {
-                        title: 'Card Number',
-                        type: 'string',
-                        minLength: 15,
-                        maxLength: 16,
-                    },
-                },
-            },
-        },
-    };
-    const model = {};
-    const initialStep = {
-        id: 'persist-async-string-test-step-id',
-        title: 'Persist Async Basic Test',
-        layout: [
-            { type: 'form', schemaId: '#schema' },
-            {
-                type: 'button',
-                title: 'Submit',
-                action: { url: '/submit', method: 'POST' },
-            },
-        ],
-        schemas: [schema],
-        model,
-    };
-    const getProps = (overrides = {}) => (Object.assign({ flowId: 'flow-id', initialStep, httpClient: vi.fn(), onCompletion: vi.fn(), onError: vi.fn(), onEvent: vi.fn(), onLog: vi.fn() }, overrides));
-    it('renders the controls for the schema inside of the persist async object', () => {
-        renderWithProviders(_jsx(DynamicFlowWise, Object.assign({}, getProps())));
-        expect(screen.getByLabelText('Name on Card')).toBeInTheDocument();
-        const input = screen.getByLabelText('Card Number');
-        expect(input).toBeInTheDocument();
-        expect(input).toHaveAttribute('type', 'text');
-    });
-    describe('when the field value is valid', () => {
-        it('triggers the persist async request on blur', async () => {
-            const props = getProps();
-            renderWithProviders(_jsx(DynamicFlowWise, Object.assign({}, props)));
-            const input = screen.getByLabelText('Card Number');
-            await user.type(input, '1234567890123456');
-            await user.tab();
-            await waitFor(() => {
-                expect(props.httpClient).toHaveBeenCalledWith('/persist-async', expect.anything());
-            });
-        });
-    });
-    describe('when the field is blurred a second time but the value doesnt change', () => {
-        it('only triggers the persist async request once', async () => {
-            const props = getProps();
-            const httpClient = vi
-                .fn()
-                .mockResolvedValue(new Response(JSON.stringify({ token: 'FIRST-TOKEN' })));
-            renderWithProviders(_jsx(DynamicFlowWise, Object.assign({}, props, { httpClient: httpClient })));
-            const input = screen.getByLabelText('Card Number');
-            await user.type(input, '1234567890123456');
-            await user.tab();
-            await waitFor(() => {
-                expect(httpClient).toHaveBeenCalledWith('/persist-async', expect.objectContaining({ body: '{"card-number":"1234567890123456"}' }));
-            });
-            await user.click(screen.getByLabelText('Card Number'));
-            await user.tab();
-            await waitFor(() => {
-                expect(httpClient).toHaveBeenCalledTimes(1);
-            });
-        });
-    });
-    describe('when the field value is changed a second time', () => {
-        describe('and the first request is resolved after the second request', () => {
-            it('updates the model with the value from the second response', async () => {
-                const props = getProps();
-                const httpClient = vi
-                    .fn()
-                    .mockResolvedValue(() => new Response(null, { status: 404 }))
-                    .mockImplementationOnce(async (_, init) => abortableDelay(10, init === null || init === void 0 ? void 0 : init.signal).then(() => new Response(JSON.stringify({ token: 'FIRST-TOKEN' }))))
-                    .mockImplementationOnce(async (_, init) => abortableDelay(5, init === null || init === void 0 ? void 0 : init.signal).then(() => new Response(JSON.stringify({ token: 'SECOND-TOKEN' }))));
-                renderWithProviders(_jsx(DynamicFlowWise, Object.assign({}, props, { httpClient: httpClient })));
-                const input = screen.getByLabelText('Card Number');
-                await user.type(input, '123456789012345');
-                await user.tab();
-                await waitFor(() => {
-                    expect(httpClient).toHaveBeenCalledWith('/persist-async', expect.objectContaining({ body: '{"card-number":"123456789012345"}' }));
-                });
-                await user.type(input, '6');
-                await user.tab();
-                await waitFor(() => {
-                    expect(httpClient).toHaveBeenCalledWith('/persist-async', expect.objectContaining({ body: '{"card-number":"1234567890123456"}' }));
-                });
-                const submitButton = screen.getByText('Submit');
-                await waitFor(() => {
-                    expect(submitButton).toBeEnabled();
-                });
-                await user.click(submitButton);
-                await waitFor(() => {
-                    expect(httpClient).toHaveBeenCalledWith('/submit', expect.objectContaining({
-                        body: '{"cardNumber":"SECOND-TOKEN"}',
-                    }));
-                });
-            });
-        });
-    });
-    describe('when the field value is NOT valid', () => {
-        it('does NOT trigger the persist async request on blur', async () => {
-            const props = getProps();
-            renderWithProviders(_jsx(DynamicFlowWise, Object.assign({}, props)));
-            const input = screen.getByLabelText('Card Number');
-            await user.type(input, '1234');
-            await user.tab();
-            await waitFor(() => {
-                expect(props.httpClient).not.toHaveBeenCalled();
-            });
-        });
-    });
-    describe('when the field value is null', () => {
-        it('does NOT trigger the persist async request on blur', async () => {
-            const props = getProps();
-            renderWithProviders(_jsx(DynamicFlowWise, Object.assign({}, props)));
-            const input = screen.getByLabelText('Card Number');
-            await user.type(input, '1234');
-            await user.clear(input);
-            await user.tab();
-            await waitFor(() => {
-                expect(props.httpClient).not.toHaveBeenCalled();
-            });
-        });
-    });
-    describe('Persist-async Responses', () => {
-        describe('when the persist async request is successful', () => {
-            it('updates the model with the value from the response', async () => {
-                const httpClient = vi
-                    .fn()
-                    .mockResolvedValue(new Response(JSON.stringify({ token: '9sowP4YdJy6LdgoVEvkGvcrcahYguaMn' })));
-                const props = getProps();
-                renderWithProviders(_jsx(DynamicFlowWise, Object.assign({}, props, { httpClient: httpClient })));
-                const input = screen.getByLabelText('Card Number');
-                await user.type(input, '1234567890123456');
-                await user.tab();
-                await waitFor(() => {
-                    expect(httpClient).toHaveBeenCalledWith('/persist-async', expect.anything());
-                });
-                // const submitButton = screen.getByText('Submit');
-                // await waitFor(() => {
-                //   expect(submitButton).toBeEnabled();
-                // });
-                // await user.click(screen.getByText('Submit'));
-                // await waitFor(() => {
-                //   expect(httpClient).toHaveBeenCalledWith(
-                //     '/submit',
-                //     expect.objectContaining({
-                //       body: '{"cardNumber":"9sowP4YdJy6LdgoVEvkGvcrcahYguaMn"}',
-                //     }),
-                //   );
-                // });
-            });
-        });
-        describe.each([[401], [422], [504]])('when the request fails with status %s', (errorStatusCode) => {
-            it('displays the error message from the response', async () => {
-                const httpClient = vi
-                    .fn()
-                    .mockResolvedValue(new Response(JSON.stringify({ validation: { 'card-number': 'Invalid card number' } }), { status: errorStatusCode }));
-                const props = getProps();
-                renderWithProviders(_jsx(DynamicFlowWise, Object.assign({}, props, { httpClient: httpClient })));
-                const input = screen.getByLabelText('Card Number');
-                await user.type(input, '1234567890123456');
-                await user.tab();
-                await waitFor(() => {
-                    expect(screen.getByText('Invalid card number')).toBeInTheDocument();
-                });
-            });
-        });
-        describe('when the request fails with any other status code', () => {
-            it('displays a fallback error message', async () => {
-                const httpClient = vi.fn().mockResolvedValue(new Response(null, { status: 500 }));
-                const props = getProps();
-                renderWithProviders(_jsx(DynamicFlowWise, Object.assign({}, props, { httpClient: httpClient })));
-                const input = screen.getByLabelText('Card Number');
-                await user.type(input, '1234567890123456');
-                await user.tab();
-                await waitFor(() => {
-                    expect(screen.getByText('Something went wrong.')).toBeInTheDocument();
-                });
-            });
-        });
-    });
-});

package/build/tests/legacy/RefreshStepOnChange.debouncing.test.js

@@ -1,209 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { act, screen, waitFor } from '@testing-library/react';
-import { userEvent } from '@testing-library/user-event';
-import { vi } from 'vitest';
-import { renderWithProviders } from '../../test-utils';
-import DynamicFlowWise from '../../test-utils/DynamicFlowWise';
-const user = userEvent.setup({ advanceTimers: vi.advanceTimersByTime });
-const mockHttpClient = vi.fn();
-const getProps = (step, overrides = {}) => (Object.assign({ flowId: 'debounced-refresh-flow-id', initialStep: step, httpClient: mockHttpClient, onCompletion: vi.fn(), onError: vi.fn(), onEvent: vi.fn(), onLog: vi.fn() }, overrides));
-beforeEach(() => mockHttpClient.mockClear());
-describe('useDebouncedRefresh', () => {
-    const debounceableSchema = {
-        $id: '#debounced-schema',
-        type: 'object',
-        title: 'Debounced Refresh',
-        description: 'debounced refresh',
-        displayOrder: ['name', 'terms'],
-        properties: {
-            name: {
-                title: 'Name',
-                type: 'string',
-                refreshStepOnChange: true,
-            },
-            terms: {
-                title: 'I accept the terms and conditions',
-                type: 'boolean',
-                refreshStepOnChange: true,
-            },
-        },
-    };
-    const debounceableDeprecatedSchema = {
-        $id: '#debounced-deprecated-schema',
-        type: 'object',
-        title: 'Debounced Deprecated Refresh',
-        description: 'debounced deprecated refresh',
-        displayOrder: ['name', 'address', 'terms'],
-        properties: {
-            name: {
-                title: 'Name',
-                type: 'string',
-                refreshStepOnChange: true,
-                refreshFormUrl: '/refresh1',
-            },
-            address: {
-                title: 'Address',
-                type: 'string',
-                refreshStepOnChange: true,
-                refreshFormUrl: '/refresh2',
-            },
-            terms: {
-                title: 'I accept the terms and conditions',
-                type: 'boolean',
-                refreshStepOnChange: true,
-                refreshFormUrl: '/refresh3',
-            },
-        },
-    };
-    const initialStep = {
-        id: 'debounced-refresh-initial-step',
-        title: 'debounced refresh test',
-        refreshUrl: '/refresh',
-        layout: [
-            { type: 'form', schemaId: '#debounced-schema' },
-            { type: 'button', title: 'Submit', action: { url: '/submit', method: 'POST' } },
-        ],
-        schemas: [debounceableSchema],
-        model: {},
-    };
-    const initialDeprecatedStep = {
-        id: 'debounced-refresh-initial-step',
-        title: 'debounced refresh test',
-        refreshUrl: '/refresh',
-        layout: [
-            { type: 'form', schemaId: '#debounced-deprecated-schema' },
-            { type: 'button', title: 'Submit', action: { url: '/submit', method: 'POST' } },
-        ],
-        schemas: [debounceableDeprecatedSchema],
-        model: {},
-    };
-    describe('when the schema is debounceable', () => {
-        describe(`and the url doesn't change`, () => {
-            it('triggers only once, after the interval, with the latest data', async () => {
-                const props = getProps(initialStep);
-                renderWithProviders(_jsx(DynamicFlowWise, Object.assign({}, props)));
-                await user.type(screen.getByLabelText('Name'), 'Colin');
-                vi.advanceTimersByTime(500);
-                await user.type(screen.getByLabelText('Name'), ' Robinson');
-                expect(props.httpClient).toHaveBeenCalledTimes(0);
-                await act(async () => vi.advanceTimersByTimeAsync(1000));
-                expect(props.httpClient).toHaveBeenCalledTimes(1);
-                expect(props.httpClient).toHaveBeenCalledWith('/refresh', expect.objectContaining({
-                    body: '{"name":"Colin Robinson","terms":false}',
-                }));
-            });
-        });
-        // currently deprecated, but will test anyway
-        describe(`and the url changes`, () => {
-            it('triggers once per url, after each interval', async () => {
-                const props = getProps(initialDeprecatedStep);
-                renderWithProviders(_jsx(DynamicFlowWise, Object.assign({}, props)));
-                expect(props.httpClient).toHaveBeenCalledTimes(0);
-                await user.type(screen.getByLabelText('Name'), 'Colin');
-                await act(async () => vi.advanceTimersByTimeAsync(500));
-                await user.type(screen.getByLabelText('Name'), ' Robinson');
-                await act(async () => vi.advanceTimersByTimeAsync(500));
-                await user.type(screen.getByLabelText('Address'), 'New');
-                await act(async () => vi.advanceTimersByTimeAsync(500));
-                await user.type(screen.getByLabelText('Address'), ' York');
-                await act(async () => vi.advanceTimersByTimeAsync(1000));
-                await waitFor(() => expect(props.httpClient).toHaveBeenCalledTimes(2));
-                expect(props.httpClient).toHaveBeenCalledWith('/refresh1', expect.objectContaining({
-                    body: '{"name":"Colin Robinson","terms":false}',
-                    // body: '{"terms":false,"name":"Colin Robinson"}',
-                }));
-                expect(props.httpClient).toHaveBeenCalledWith('/refresh2', expect.objectContaining({
-                    body: '{"name":"Colin Robinson","address":"New York","terms":false}',
-                }));
-            });
-        });
-    });
-    describe('when the schema is NON debounceable', () => {
-        it('triggers immediately for each call', async () => {
-            const props = getProps(initialStep);
-            renderWithProviders(_jsx(DynamicFlowWise, Object.assign({}, props)));
-            expect(props.httpClient).toHaveBeenCalledTimes(0);
-            await user.click(screen.getByRole('checkbox'));
-            await waitFor(() => expect(props.httpClient).toHaveBeenCalledWith('/refresh', expect.objectContaining({ body: '{"terms":true}' })));
-            await user.click(screen.getByRole('checkbox'));
-            await waitFor(() => expect(props.httpClient).toHaveBeenCalledWith('/refresh', expect.objectContaining({ body: '{"terms":false}' })));
-        });
-    });
-});
-describe('when the user types in a debounceable field, and then immediately submits the form', () => {
-    it('should suppress submission until the refresh is complete', async () => {
-        const initialStep = {
-            id: 'debounced-refresh-initial-step',
-            title: 'debounced refresh test',
-            refreshUrl: '/refresh',
-            layout: [
-                { type: 'form', schemaId: '#debounced-schema' },
-                { type: 'button', title: 'Submit', action: { url: '/submit', method: 'POST' } },
-            ],
-            schemas: [
-                {
-                    $id: '#debounced-schema',
-                    type: 'object',
-                    title: 'Debounced Refresh',
-                    description: 'debounced refresh',
-                    displayOrder: ['name'],
-                    properties: {
-                        name: {
-                            title: 'Name',
-                            type: 'string',
-                            refreshStepOnChange: true,
-                        },
-                    },
-                },
-            ],
-            model: {},
-        };
-        const secondStep = {
-            id: 'debounced-refresh-second-step',
-            title: 'second step',
-            layout: [{ type: 'paragraph', text: 'second step paragraph' }],
-            schemas: [],
-            model: {},
-        };
-        const props = getProps(initialStep);
-        const httpClient = vi.fn(async (input, init) => {
-            switch (input) {
-                case '/refresh': {
-                    const model = JSON.parse(init === null || init === void 0 ? void 0 : init.body);
-                    return Promise.resolve(new Response(JSON.stringify(Object.assign(Object.assign({}, initialStep), { model })), { status: 200 }));
-                }
-                case '/submit':
-                    return Promise.resolve(new Response(JSON.stringify(secondStep), { status: 200 }));
-                default:
-                    return Promise.resolve(new Response('', { status: 404 }));
-            }
-        });
-        renderWithProviders(_jsx(DynamicFlowWise, Object.assign({}, props, { httpClient: httpClient })));
-        // enter a value into a debounceable field
-        await user.type(screen.getByLabelText('Name'), 'Colin');
-        // then immediately submit the form
-        await user.click(screen.getByRole('button', { name: 'Submit' }));
-        await waitFor(() => {
-            expect(httpClient).not.toHaveBeenCalledWith('/submit', expect.anything());
-        });
-        await act(async () => {
-            vi.advanceTimersByTime(2000); // debounce delay
-        });
-        await waitFor(() => {
-            expect(httpClient).toHaveBeenCalledWith('/refresh', expect.objectContaining({ body: '{"name":"Colin"}' }));
-        });
-        await waitFor(() => {
-            expect(screen.getByText('debounced refresh test')).toBeInTheDocument();
-        });
-        await act(async () => {
-            vi.advanceTimersByTime(2000); // debounce delay
-        });
-        expect(httpClient).toHaveBeenCalledTimes(1);
-        // click submit a second time
-        await user.click(screen.getByRole('button', { name: 'Submit' }));
-        // this time the submission goes through
-        await waitFor(() => {
-            expect(httpClient).toHaveBeenCalledWith('/submit', expect.objectContaining({ body: '{"name":"Colin"}' }));
-        });
-    });
-});