@wise/dynamic-flow-client 5.8.1 → 5.9.0

package/build/tests/Submission.merging.test.js

@@ -0,0 +1,202 @@
+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 { vi } from 'vitest';
+const user = userEvent.setup({ advanceTimers: vi.advanceTimersByTime });
+const getDefaultProps = () => ({
+    flowId: 'flow-id',
+    onCompletion: vi.fn(),
+    onError: vi.fn(),
+    onEvent: vi.fn(),
+    onLog: vi.fn(),
+});
+const getStep = (overrides) => (Object.assign({ id: 'step-id', title: 'Submission merging test', layout: [], schemas: [], model: null }, overrides));
+describe('Data submission (merging)', () => {
+    const getLayoutWithActionButton = (actionData) => [
+        {
+            type: 'form',
+            schemaId: '#schema',
+        },
+        {
+            type: 'button',
+            title: 'Submit',
+            action: {
+                url: '/submit',
+                method: 'POST',
+                data: actionData,
+            },
+        },
+    ];
+    describe('Merging nested data from const schema, object schema, and action data', () => {
+        const schemas = [
+            {
+                $id: '#hidden-string-schema',
+                type: 'object',
+                displayOrder: ['details'],
+                properties: {
+                    details: {
+                        type: 'object',
+                        displayOrder: ['city'],
+                        properties: {
+                            city: {
+                                title: 'City',
+                                type: 'string',
+                            },
+                        },
+                    },
+                },
+                hidden: true,
+            },
+            {
+                $id: '#const-schema',
+                const: {
+                    details: {
+                        currency: 'EUR',
+                    },
+                },
+            },
+            {
+                $id: '#schema',
+                type: 'object',
+                displayOrder: ['details'],
+                properties: {
+                    details: {
+                        type: 'object',
+                        displayOrder: ['name'],
+                        properties: {
+                            name: {
+                                title: 'Name',
+                                type: 'string',
+                            },
+                        },
+                    },
+                },
+            },
+        ];
+        it('should merge the models recursively', async () => {
+            const model = { details: { city: 'Paris' } };
+            const layout = getLayoutWithActionButton({ details: { country: 'FR' } });
+            const step = getStep({ model, layout, schemas });
+            const httpClient = vi.fn();
+            const props = getDefaultProps();
+            renderWithProviders(_jsx(DynamicFlowWise, Object.assign({ httpClient: httpClient, initialStep: step }, props)));
+            const nameInput = screen.getByLabelText('Name');
+            await user.type(nameInput, 'Bob Loblaw');
+            const submitButton = screen.getByText('Submit');
+            await user.click(submitButton);
+            await waitFor(() => {
+                expect(httpClient).toHaveBeenCalledWith('/submit', expect.anything());
+            });
+            // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
+            const requestBody = httpClient.mock.calls[0][1].body;
+            const parsedBody = JSON.parse(requestBody);
+            expect(parsedBody).toEqual({
+                details: {
+                    currency: 'EUR',
+                    name: 'Bob Loblaw',
+                    city: 'Paris',
+                    country: 'FR',
+                },
+            });
+        });
+        it('should merge the models recursively, overriding properties when they are identical', async () => {
+            const model = { details: { city: 'Paris' } };
+            const layout = getLayoutWithActionButton({ details: { country: 'FR', city: 'Lyon' } });
+            const step = getStep({ model, layout, schemas });
+            const httpClient = vi.fn();
+            const props = getDefaultProps();
+            renderWithProviders(_jsx(DynamicFlowWise, Object.assign({ httpClient: httpClient, initialStep: step }, props)));
+            const nameInput = screen.getByLabelText('Name');
+            await user.type(nameInput, 'Bob Loblaw');
+            const submitButton = screen.getByText('Submit');
+            await user.click(submitButton);
+            await waitFor(() => {
+                expect(httpClient).toHaveBeenCalledWith('/submit', expect.anything());
+            });
+            // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
+            const requestBody = httpClient.mock.calls[0][1].body;
+            const parsedBody = JSON.parse(requestBody);
+            expect(parsedBody).toEqual({
+                details: {
+                    currency: 'EUR',
+                    name: 'Bob Loblaw',
+                    city: 'Lyon',
+                    country: 'FR',
+                },
+            });
+        });
+    });
+    describe('Merging nested data from const schema, tuple schema, and action data with hidden schema', () => {
+        const schemas = [
+            {
+                $id: '#schema',
+                type: 'object',
+                displayOrder: ['details'],
+                properties: {
+                    details: {
+                        type: 'object',
+                        displayOrder: ['nested'],
+                        properties: {
+                            nested: {
+                                type: 'array',
+                                items: [
+                                    {
+                                        title: 'Nested One',
+                                        type: 'string',
+                                    },
+                                    {
+                                        title: 'Nested Two',
+                                        type: 'string',
+                                    },
+                                    {
+                                        title: 'Nested Three',
+                                        type: 'string',
+                                    },
+                                ],
+                            },
+                        },
+                    },
+                },
+            },
+            {
+                const: {
+                    details: {
+                        nested: ['Const Nested One', 'Const Nested Two'],
+                    },
+                },
+            },
+        ];
+        it('should merge the models recursively', async () => {
+            const model = { details: { nested: ['Model Nested One'] } };
+            const layout = getLayoutWithActionButton({
+                details: { nested: [null, null, null, 'Action Nested Four'] },
+            });
+            const step = getStep({ model, layout, schemas });
+            const httpClient = vi.fn();
+            const props = getDefaultProps();
+            renderWithProviders(_jsx(DynamicFlowWise, Object.assign({ httpClient: httpClient, initialStep: step }, props)));
+            const nameInput = screen.getByLabelText('Nested Three');
+            await user.type(nameInput, 'User Input Three');
+            const submitButton = screen.getByText('Submit');
+            await user.click(submitButton);
+            await waitFor(() => {
+                expect(httpClient).toHaveBeenCalledWith('/submit', expect.anything());
+            });
+            // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
+            const requestBody = httpClient.mock.calls[0][1].body;
+            const parsedBody = JSON.parse(requestBody);
+            expect(parsedBody).toEqual({
+                details: {
+                    nested: [
+                        'Const Nested One',
+                        'Const Nested Two',
+                        'User Input Three',
+                        'Action Nested Four',
+                    ],
+                },
+            });
+        });
+    });
+});