@wise/dynamic-flow-client 5.12.0 → 5.12.1

package/build/tests/NoOp.test.js

@@ -0,0 +1,194 @@
+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, respondWith } from '../test-utils';
+import DynamicFlowWise from '../test-utils/DynamicFlowWise';
+const user = userEvent.setup({ advanceTimers: vi.advanceTimersByTime });
+const getProps = () => ({
+    flowId: 'flow-id',
+    onCompletion: vi.fn(),
+    onError: vi.fn(),
+    onEvent: vi.fn(),
+    onLog: vi.fn(),
+});
+const noOpHeaders = { 'X-Df-Response-Type': 'no-op' };
+describe('No-op responses', () => {
+    describe('Action submissions', () => {
+        const buildInitialStep = () => ({
+            id: 'no-op-action-step',
+            title: 'No-Op Action Demo',
+            model: { message: '' },
+            schemas: [
+                {
+                    $id: '#action-form',
+                    type: 'object',
+                    displayOrder: ['message'],
+                    required: ['message'],
+                    properties: {
+                        message: {
+                            title: 'Message',
+                            type: 'string',
+                        },
+                    },
+                },
+            ],
+            layout: [
+                { type: 'form', schemaId: '#action-form' },
+                {
+                    type: 'button',
+                    title: 'Submit',
+                    action: { id: 'noop-action-id', url: '/action', method: 'POST' },
+                },
+                {
+                    type: 'button',
+                    title: 'Submit elsewhere',
+                    action: { id: 'other-action-id', url: '/other-action', method: 'POST' },
+                },
+            ],
+        });
+        it('should keep the current step when an action responds with no-op', async () => {
+            const initialStep = buildInitialStep();
+            const httpClient = vi.fn().mockResolvedValue(respondWith({}, { headers: noOpHeaders }));
+            const props = Object.assign(Object.assign({}, getProps()), { initialStep, httpClient });
+            renderWithProviders(_jsx(DynamicFlowWise, Object.assign({}, props)));
+            await waitFor(() => {
+                expect(screen.getByText(initialStep.title)).toBeInTheDocument();
+            });
+            const input = screen.getByLabelText('Message');
+            await user.type(input, 'first attempt');
+            await user.click(screen.getByText('Submit'));
+            await waitFor(() => {
+                expect(httpClient).toHaveBeenCalledTimes(1);
+            });
+            expect(httpClient).toHaveBeenCalledWith('/action', expect.objectContaining({ body: '{"message":"first attempt"}' }));
+            expect(screen.getByText(initialStep.title)).toBeInTheDocument();
+            expect(props.onError).not.toHaveBeenCalled();
+            expect(props.onEvent).toHaveBeenCalledWith('Dynamic Flow - Action Succeeded', expect.objectContaining({ actionId: 'noop-action-id' }));
+        });
+        it('should allow submitting another action after a no-op response', async () => {
+            const initialStep = buildInitialStep();
+            const nextStep = {
+                id: 'post-no-op-step',
+                title: 'Step after No-Op',
+                layout: [],
+                schemas: [],
+            };
+            const httpClient = vi
+                .fn()
+                .mockResolvedValueOnce(respondWith({}, { headers: noOpHeaders }))
+                .mockResolvedValueOnce(respondWith(nextStep));
+            const props = Object.assign(Object.assign({}, getProps()), { initialStep, httpClient });
+            renderWithProviders(_jsx(DynamicFlowWise, Object.assign({}, props)));
+            await waitFor(() => {
+                expect(screen.getByText(initialStep.title)).toBeInTheDocument();
+            });
+            const input = screen.getByLabelText('Message');
+            await user.type(input, 'first attempt');
+            await user.click(screen.getByText('Submit'));
+            await waitFor(() => {
+                expect(httpClient).toHaveBeenCalledTimes(1);
+            });
+            await user.clear(input);
+            await user.type(input, 'second attempt');
+            await user.click(screen.getByText('Submit elsewhere'));
+            await waitFor(() => {
+                expect(screen.getByText('Step after No-Op')).toBeInTheDocument();
+            });
+            expect(httpClient).toHaveBeenCalledTimes(2);
+            expect(httpClient).toHaveBeenCalledWith('/other-action', expect.objectContaining({ body: '{"message":"second attempt"}' }));
+            expect(props.onError).not.toHaveBeenCalled();
+            expect(props.onEvent).toHaveBeenCalledWith('Dynamic Flow - Action Succeeded', expect.objectContaining({ actionId: 'other-action-id' }));
+        });
+    });
+    describe('Refresh requests', () => {
+        const buildInitialStep = () => ({
+            id: 'no-op-refresh-step',
+            title: 'No-Op Refresh Demo',
+            schemas: [
+                {
+                    $id: '#refresh-form',
+                    type: 'object',
+                    displayOrder: ['color'],
+                    properties: {
+                        color: {
+                            title: 'Color',
+                            control: 'radio',
+                            analyticsId: '#color-schema',
+                            oneOf: [
+                                { const: 'red', title: 'Red' },
+                                { const: 'blue', title: 'Blue' },
+                            ],
+                            onChange: { type: 'refresh' },
+                        },
+                    },
+                },
+            ],
+            layout: [
+                { type: 'form', schemaId: '#refresh-form' },
+                {
+                    type: 'button',
+                    title: 'Submit',
+                    action: { id: 'submit-id', url: '/submit', method: 'POST' },
+                },
+                {
+                    type: 'button',
+                    title: 'Submit step',
+                    action: { id: 'step-submit-id', url: '/step-submit', method: 'POST' },
+                },
+            ],
+            refreshUrl: '/refresh',
+        });
+        it('should treat a no-op refresh like a 304 response', async () => {
+            const initialStep = buildInitialStep();
+            const httpClient = vi.fn().mockResolvedValue(respondWith({}, { headers: noOpHeaders }));
+            const props = Object.assign(Object.assign({}, getProps()), { initialStep, httpClient });
+            renderWithProviders(_jsx(DynamicFlowWise, Object.assign({}, props)));
+            await waitFor(() => {
+                expect(screen.getByText(initialStep.title)).toBeInTheDocument();
+            });
+            await user.click(screen.getByText('Red'));
+            await waitFor(() => {
+                expect(httpClient).toHaveBeenCalledTimes(1);
+            });
+            expect(screen.getByText(initialStep.title)).toBeInTheDocument();
+            expect(httpClient).toHaveBeenNthCalledWith(1, '/refresh', expect.objectContaining({ body: '{"color":"red"}' }));
+            expect(props.onError).not.toHaveBeenCalled();
+            expect(props.onEvent).toHaveBeenCalledWith('Dynamic Flow - Refresh Succeeded', expect.objectContaining({
+                flowId: 'flow-id',
+                stepId: initialStep.id,
+                schema: '#color-schema',
+            }));
+        });
+        it('should allow refreshing again and submitting after a no-op response', async () => {
+            const initialStep = buildInitialStep();
+            const refreshedStep = Object.assign(Object.assign({}, initialStep), { id: 'refreshed-step', title: 'Refreshed after No-Op', model: { color: 'blue' } });
+            const httpClient = vi
+                .fn()
+                .mockResolvedValueOnce(respondWith({}, { headers: noOpHeaders }))
+                .mockResolvedValueOnce(respondWith(refreshedStep))
+                .mockResolvedValueOnce(respondWith(refreshedStep));
+            const props = Object.assign(Object.assign({}, getProps()), { initialStep, httpClient });
+            renderWithProviders(_jsx(DynamicFlowWise, Object.assign({}, props)));
+            await waitFor(() => {
+                expect(screen.getByText(initialStep.title)).toBeInTheDocument();
+            });
+            await user.click(screen.getByText('Red'));
+            await waitFor(() => {
+                expect(httpClient).toHaveBeenCalledTimes(1);
+            });
+            await user.click(screen.getByText('Blue'));
+            await waitFor(() => {
+                expect(screen.getByText('Refreshed after No-Op')).toBeInTheDocument();
+            });
+            expect(httpClient).toHaveBeenCalledTimes(2);
+            expect(httpClient).toHaveBeenCalledWith('/refresh', expect.objectContaining({ body: '{"color":"blue"}' }));
+            await user.click(screen.getByText('Submit step'));
+            await waitFor(() => {
+                expect(httpClient).toHaveBeenCalledTimes(3);
+            });
+            expect(httpClient).toHaveBeenCalledWith('/step-submit', expect.objectContaining({ body: '{"color":"blue"}' }));
+            expect(props.onError).not.toHaveBeenCalled();
+        });
+    });
+});