@wise/dynamic-flow-client-internal 5.32.0 → 5.33.0

package/build/tests/renderers/ReviewRenderer.test.js

@@ -0,0 +1,41 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import ReviewRenderer from '@wise/dynamic-flow-renderers/src/ReviewRenderer';
+import { vi } from 'vitest';
+import { renderWithProviders } from '../../test-utils/rtl-utils';
+const user = userEvent.setup({ advanceTimers: vi.advanceTimersByTime });
+const ReviewRendererComponent = ReviewRenderer.render;
+describe('ReviewRenderer', () => {
+    const getProps = (fields) => ({
+        type: 'review',
+        uid: 'uid',
+        fields,
+        margin: 'md',
+        render: () => null,
+        stepLoadingState: 'idle',
+        features: {},
+        trackEvent: vi.fn(),
+        httpClient: vi.fn(),
+    });
+    describe('when help is provided in a field', () => {
+        const props = getProps([
+            {
+                label: 'Field Label',
+                value: 'Field Value',
+                help: 'Field Help',
+                analyticsId: 'review-field-aid',
+            },
+        ]);
+        describe('when clicking the help icon', () => {
+            it('should call trackEvent with the correct parameters', async () => {
+                renderWithProviders(_jsx(ReviewRendererComponent, Object.assign({}, props)));
+                const infoButton = screen.getByRole('button', { name: 'Click here for more info.' });
+                await user.click(infoButton);
+                expect(props.trackEvent).toHaveBeenCalledWith('Help Pressed', {
+                    layoutItemId: 'review-field-aid',
+                });
+            });
+        });
+    });
+});

package/build/tests/renderers/TextInputRenderer.test.js

@@ -0,0 +1,245 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { fireEvent, screen } from '@testing-library/react';
+import { userEvent } from '@testing-library/user-event';
+import TextInputRenderer from '@wise/dynamic-flow-renderers/src/TextInputRenderer';
+import { useState } from 'react';
+import { vi } from 'vitest';
+import { renderWithProviders } from '../../test-utils/rtl-utils';
+const user = userEvent.setup({ advanceTimers: vi.advanceTimersByTime });
+const TextInputRendererFunction = TextInputRenderer.render;
+describe('TextInputRenderer', () => {
+    const props = {
+        type: 'input-text',
+        autoComplete: 'off',
+        control: 'numeric',
+        disabled: false,
+        uid: 'uid',
+        id: 'uid',
+        title: 'UK sort code',
+        placeholder: '40-30-20',
+        required: true,
+        value: null,
+        displayFormat: '**-**-**',
+        maxLength: 8,
+        minLength: 6,
+        render: () => null,
+        trackEvent: vi.fn(),
+        stepLoadingState: 'idle',
+        httpClient: vi.fn(),
+        validationState: undefined,
+        fieldLoadingState: 'idle',
+        features: {},
+        onBlur: vi.fn(),
+        onFocus: vi.fn(),
+        onChange: vi.fn(),
+    };
+    describe('when focused', () => {
+        it('does not trigger onChange', async () => {
+            const onChange = vi.fn();
+            renderWithProviders(_jsx(TextInputRendererFunction, Object.assign({}, props, { onChange: onChange })));
+            const input = screen.getByLabelText('UK sort code');
+            await user.click(input);
+            expect(onChange).not.toHaveBeenCalled();
+        });
+    });
+    it('masks the ssn-input value using its display format', async () => {
+        const onChange = vi.fn();
+        function ControlledInput() {
+            const [value, setValue] = useState('');
+            return (_jsx(TextInputRendererFunction, Object.assign({}, props, { value: value, control: "ssn-input", displayFormat: "***-***-***", onChange: (newValue) => {
+                    onChange(newValue);
+                    setValue(newValue !== null && newValue !== void 0 ? newValue : '');
+                } })));
+        }
+        renderWithProviders(_jsx(ControlledInput, {}));
+        const input = screen.getByLabelText('UK sort code');
+        await user.type(input, '123456789');
+        expect(input).toHaveAttribute('type', 'text');
+        expect(input).toHaveValue('•••-•••-•••');
+    });
+    it('masks an SSN using the US display format', async () => {
+        function ControlledInput() {
+            const [value, setValue] = useState('');
+            return (_jsx(TextInputRendererFunction, Object.assign({}, props, { value: value, control: "ssn-input", displayFormat: "***-**-****", onChange: (newValue) => setValue(newValue !== null && newValue !== void 0 ? newValue : '') })));
+        }
+        renderWithProviders(_jsx(ControlledInput, {}));
+        const input = screen.getByLabelText('UK sort code');
+        await user.type(input, '123456789');
+        expect(input).toHaveValue('•••-••-••••');
+    });
+    it('can temporarily show the ssn-input value', async () => {
+        function ControlledInput() {
+            const [value, setValue] = useState('123456789');
+            return (_jsx(TextInputRendererFunction, Object.assign({}, props, { value: value, control: "ssn-input", displayFormat: "***-***-***", onChange: (newValue) => setValue(newValue !== null && newValue !== void 0 ? newValue : '') })));
+        }
+        renderWithProviders(_jsx(ControlledInput, {}));
+        const input = screen.getByLabelText('UK sort code');
+        const toggle = screen.getByRole('button', { name: 'Show value' });
+        expect(input).toHaveValue('•••-•••-•••');
+        await user.click(toggle);
+        expect(input).toHaveValue('123-456-789');
+        expect(screen.getByRole('button', { name: 'Hide value' })).toBeInTheDocument();
+        await user.click(screen.getByRole('button', { name: 'Hide value' }));
+        expect(input).toHaveValue('•••-•••-•••');
+    });
+    it('does not treat a formatted non-ssn input as a masked numeric input', async () => {
+        function ControlledInput() {
+            const [value, setValue] = useState('');
+            return (_jsx(TextInputRendererFunction, Object.assign({}, props, { value: value, control: undefined, displayFormat: "**** ****", onChange: (newValue) => setValue(newValue !== null && newValue !== void 0 ? newValue : '') })));
+        }
+        renderWithProviders(_jsx(ControlledInput, {}));
+        await user.type(screen.getByLabelText('UK sort code'), 'DE12');
+        expect(screen.getByLabelText('UK sort code')).toHaveValue('DE12');
+    });
+    it('handles a native value change for ssn-input', () => {
+        function ControlledInput() {
+            const [value, setValue] = useState('');
+            return (_jsx(TextInputRendererFunction, Object.assign({}, props, { value: value, control: "ssn-input", displayFormat: "***-***-***", onChange: (newValue) => setValue(newValue !== null && newValue !== void 0 ? newValue : '') })));
+        }
+        renderWithProviders(_jsx(ControlledInput, {}));
+        const input = screen.getByLabelText('UK sort code');
+        fireEvent.change(input, { target: { value: '123456789' } });
+        expect(input).toHaveValue('•••-•••-•••');
+    });
+    it('replaces a selected ssn-input value when typing', async () => {
+        const onChange = vi.fn();
+        function ControlledInput() {
+            const [value, setValue] = useState('123456789');
+            return (_jsx(TextInputRendererFunction, Object.assign({}, props, { value: value, control: "ssn-input", displayFormat: "***-***-***", onChange: (newValue) => {
+                    onChange(newValue);
+                    setValue(newValue !== null && newValue !== void 0 ? newValue : '');
+                } })));
+        }
+        renderWithProviders(_jsx(ControlledInput, {}));
+        const input = screen.getByLabelText('UK sort code');
+        input.setSelectionRange(0, input.value.length);
+        input.focus();
+        await user.keyboard('987654321');
+        expect(onChange).toHaveBeenLastCalledWith('987654321');
+        expect(input).toHaveValue('•••-•••-•••');
+    });
+    it('replaces a selected ssn-input value when pasting', () => {
+        const onChange = vi.fn();
+        function ControlledInput() {
+            const [value, setValue] = useState('123456789');
+            return (_jsx(TextInputRendererFunction, Object.assign({}, props, { value: value, control: "ssn-input", displayFormat: "***-***-***", onChange: (newValue) => {
+                    onChange(newValue);
+                    setValue(newValue !== null && newValue !== void 0 ? newValue : '');
+                } })));
+        }
+        renderWithProviders(_jsx(ControlledInput, {}));
+        const input = screen.getByLabelText('UK sort code');
+        input.setSelectionRange(0, input.value.length);
+        fireEvent.paste(input, {
+            clipboardData: { getData: () => '987654321' },
+        });
+        expect(onChange).toHaveBeenLastCalledWith('987654321');
+        expect(input).toHaveValue('•••-•••-•••');
+    });
+    it('allows typing beyond the display format without dropping trailing digits', async () => {
+        const onChange = vi.fn();
+        function ControlledInput() {
+            const [value, setValue] = useState('123456789');
+            return (_jsx(TextInputRendererFunction, Object.assign({}, props, { value: value, control: "ssn-input", displayFormat: "***-***-***", onChange: (newValue) => {
+                    onChange(newValue);
+                    setValue(newValue !== null && newValue !== void 0 ? newValue : '');
+                } })));
+        }
+        renderWithProviders(_jsx(ControlledInput, {}));
+        const input = screen.getByLabelText('UK sort code');
+        input.setSelectionRange(1, 1);
+        input.focus();
+        await user.keyboard('0');
+        expect(onChange).toHaveBeenLastCalledWith('1023456789');
+        expect(input).toHaveValue('•••-•••-••••');
+    });
+    it('preserves the suffix when pasting beyond the display format', () => {
+        const onChange = vi.fn();
+        function ControlledInput() {
+            const [value, setValue] = useState('123456');
+            return (_jsx(TextInputRendererFunction, Object.assign({}, props, { value: value, control: "ssn-input", displayFormat: "***-***-***", onChange: (newValue) => {
+                    onChange(newValue);
+                    setValue(newValue !== null && newValue !== void 0 ? newValue : '');
+                } })));
+        }
+        renderWithProviders(_jsx(ControlledInput, {}));
+        const input = screen.getByLabelText('UK sort code');
+        input.setSelectionRange(1, 1);
+        fireEvent.paste(input, {
+            clipboardData: { getData: () => '987654321' },
+        });
+        expect(onChange).toHaveBeenLastCalledWith('198765432123456');
+        expect(input.value).toHaveLength(17);
+    });
+    it('restores the caret after a partial keyboard replacement', async () => {
+        const onChange = vi.fn();
+        function ControlledInput() {
+            const [value, setValue] = useState('12345');
+            return (_jsx(TextInputRendererFunction, Object.assign({}, props, { value: value, control: "ssn-input", displayFormat: "***-***-***", onChange: (newValue) => {
+                    onChange(newValue);
+                    setValue(newValue !== null && newValue !== void 0 ? newValue : '');
+                } })));
+        }
+        renderWithProviders(_jsx(ControlledInput, {}));
+        const input = screen.getByLabelText('UK sort code');
+        input.setSelectionRange(2, 3);
+        input.focus();
+        await user.keyboard('98');
+        expect(onChange).toHaveBeenLastCalledWith('129845');
+        expect(input).toHaveValue('•••-•••');
+        expect(input.selectionStart).toBe(5);
+        expect(input.selectionEnd).toBe(5);
+    });
+    it('restores the caret after a same-length paste', () => {
+        const onChange = vi.fn();
+        function ControlledInput() {
+            const [value, setValue] = useState('12345');
+            return (_jsx(TextInputRendererFunction, Object.assign({}, props, { value: value, control: "ssn-input", displayFormat: "***-***-***", onChange: (newValue) => {
+                    onChange(newValue);
+                    setValue(newValue !== null && newValue !== void 0 ? newValue : '');
+                } })));
+        }
+        renderWithProviders(_jsx(ControlledInput, {}));
+        const input = screen.getByLabelText('UK sort code');
+        input.setSelectionRange(2, 3);
+        fireEvent.paste(input, {
+            clipboardData: { getData: () => '9' },
+        });
+        expect(onChange).toHaveBeenLastCalledWith('12945');
+        expect(input.selectionStart).toBe(3);
+        expect(input.selectionEnd).toBe(3);
+    });
+    it('restores the caret when a paste leaves the raw value unchanged', () => {
+        const onChange = vi.fn();
+        function ControlledInput() {
+            const [value, setValue] = useState('12345');
+            return (_jsx(TextInputRendererFunction, Object.assign({}, props, { value: value, control: "ssn-input", displayFormat: "***-***-***", onChange: (newValue) => {
+                    onChange(newValue);
+                    setValue(newValue !== null && newValue !== void 0 ? newValue : '');
+                } })));
+        }
+        renderWithProviders(_jsx(ControlledInput, {}));
+        const input = screen.getByLabelText('UK sort code');
+        input.setSelectionRange(2, 3);
+        fireEvent.paste(input, {
+            clipboardData: { getData: () => '3' },
+        });
+        expect(input.selectionStart).toBe(3);
+        expect(input.selectionEnd).toBe(3);
+        fireEvent.keyDown(input, { key: 'Backspace' });
+        expect(onChange).toHaveBeenLastCalledWith('1245');
+    });
+    it('submits the unformatted value for the ssn-input control', async () => {
+        const onChange = vi.fn();
+        function ControlledInput() {
+            const [value, setValue] = useState('');
+            return (_jsx(TextInputRendererFunction, Object.assign({}, props, { value: value, control: "ssn-input", onChange: (newValue) => {
+                    onChange(newValue);
+                    setValue(newValue !== null && newValue !== void 0 ? newValue : '');
+                } })));
+        }
+        renderWithProviders(_jsx(ControlledInput, {}));
+        await user.type(screen.getByLabelText('UK sort code'), '123456');
+        expect(onChange).toHaveBeenLastCalledWith('123456');
+    });
+});

package/build/tests/renderers/TimeZoneHeader.test.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { vi } from 'vitest';
+import { DynamicFlow } from '../../dynamicFlow/DynamicFlow';
+import { renderWithProviders } from '../../test-utils/rtl-utils';
+describe('TimeZoneHeader', () => {
+    it('includes a time-zone header in all requests', () => {
+        const props = {
+            flowId: 'test',
+            initialAction: { url: '/api/test', method: 'GET' },
+            customFetch: vi.fn(),
+            onCompletion: vi.fn(),
+            onError: vi.fn(),
+        };
+        renderWithProviders(_jsx(DynamicFlow, Object.assign({}, props)));
+        expect(props.customFetch).toHaveBeenCalledWith('/api/test', expect.anything());
+        const requestHeaders = new Headers(props.customFetch.mock.calls[0][1].headers);
+        expect(requestHeaders.get('Time-Zone')).toBeDefined();
+    });
+});

package/build/tests/renderers/UploadInputRenderer.maxSize.test.js

@@ -0,0 +1,22 @@
+import { UploadInputRenderer } from '@wise/dynamic-flow-renderers/src/UploadInputRenderer';
+import { vi } from 'vitest';
+const rendererFunction = UploadInputRenderer.render;
+const getProps = (overrides = {}) => (Object.assign({ type: 'input-upload', uid: 'test-upload', id: 'test-upload', title: 'Upload File', description: 'Please upload your file', disabled: false, source: 'file', accepts: ['image/*'], maxSize: undefined, value: null, required: false, stepLoadingState: 'idle', validationState: { status: 'valid' }, fieldLoadingState: 'idle', features: {}, onUpload: vi.fn(), render: vi.fn(), httpClient: vi.fn(), trackEvent: vi.fn(), onBlur: vi.fn(), onFocus: vi.fn() }, overrides));
+describe('UploadInputRenderer maxSize', () => {
+    describe('when maxSize is set', () => {
+        it('should pass maxSize to UploadInput', () => {
+            const props = getProps({ maxSize: 5120000 }); // 5 MB
+            const renderedComponent = rendererFunction(props);
+            // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
+            expect(renderedComponent === null || renderedComponent === void 0 ? void 0 : renderedComponent.props.children.props.sizeLimit).toBe(5000); // 5 MB in KB
+        });
+    });
+    describe('when maxSize is not set', () => {
+        it('should pass null to UploadInput', () => {
+            const props = getProps();
+            const renderedComponent = rendererFunction(props);
+            // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
+            expect(renderedComponent === null || renderedComponent === void 0 ? void 0 : renderedComponent.props.children.props.sizeLimit).toBeNull();
+        });
+    });
+});

package/build/tests/renderers/value-utils.test.js

@@ -0,0 +1,24 @@
+import { dateStringToDateOrNull, dateToDateString } from '@wise/dynamic-flow-renderers/src/utils/value-utils';
+describe('dateStringToDateOrNull', () => {
+    it('should return null if the input is nullish', () => {
+        expect(dateStringToDateOrNull(undefined)).toBeNull();
+        expect(dateStringToDateOrNull('')).toBeNull();
+        expect(dateStringToDateOrNull(null)).toBeNull();
+    });
+    it('should return null if the input is not a valid date', () => {
+        expect(dateStringToDateOrNull('Jan-06-2022')).toBeNull();
+        expect(dateStringToDateOrNull('Jan 06 2022')).toBeNull();
+    });
+    it('should return a Date object if the input is a valid date string', () => {
+        const date = dateStringToDateOrNull('2022-01-31');
+        expect(date === null || date === void 0 ? void 0 : date.getFullYear()).toBe(2022);
+        expect(date === null || date === void 0 ? void 0 : date.getMonth()).toBe(0);
+        expect(date === null || date === void 0 ? void 0 : date.getDate()).toBe(31);
+    });
+});
+describe('dateToDateString', () => {
+    it('should return a formatted date string when passed a date', () => {
+        const date = new Date('2022-01-01');
+        expect(dateToDateString(date)).toBe('2022-01-01');
+    });
+});