@wise/dynamic-flow-client 5.8.1 → 5.9.0

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

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

@@ -0,0 +1,209 @@
+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"}' }));
+        });
+    });
+});