@wise/dynamic-flow-client 5.25.2-experimental-a8a898e → 5.25.2

package/build/tests/ButtonLayout.test.js

@@ -0,0 +1,356 @@
+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 } from '../test-utils';
+import DynamicFlowWise from '../test-utils/DynamicFlowWise';
+const user = userEvent.setup({ advanceTimers: vi.advanceTimersByTime });
+const getDefaultProps = () => ({
+    flowId: 'flow-id',
+    httpClient: vi.fn(),
+    onCompletion: vi.fn(),
+    onError: vi.fn(),
+    onEvent: vi.fn(),
+    onLog: vi.fn(),
+});
+describe('ButtonLayout component', () => {
+    describe('Given a button layout component with a referenced action', () => {
+        it('should render a button that triggers the action on click', async () => {
+            const props = Object.assign(Object.assign({}, getDefaultProps()), { initialStep: {
+                    id: 'step-id',
+                    title: 'Step with button',
+                    actions: [
+                        {
+                            $id: '#action-id',
+                            url: '/referenced-action-url',
+                        },
+                    ],
+                    layout: [
+                        {
+                            type: 'button',
+                            title: 'My Button',
+                            action: { $ref: '#action-id' },
+                        },
+                    ],
+                    schemas: [],
+                } });
+            renderWithProviders(_jsx(DynamicFlowWise, Object.assign({}, props)));
+            await waitFor(() => {
+                expect(screen.getByRole('button')).toHaveTextContent('My Button');
+            });
+            await user.click(screen.getByRole('button'));
+            expect(props.httpClient).toHaveBeenCalledWith('/referenced-action-url', expect.any(Object));
+        });
+    });
+    describe('Given a button layout component which is missing both action and behavior', () => {
+        it('when the strict feature is not set, it just render a button that does nothing', async () => {
+            const props = Object.assign(Object.assign({}, getDefaultProps()), { initialStep: {
+                    id: 'step-id',
+                    title: 'Step with button',
+                    layout: [{ type: 'button', title: 'My Button' }],
+                    schemas: [],
+                } });
+            renderWithProviders(_jsx(DynamicFlowWise, Object.assign({}, props)));
+            await waitFor(() => {
+                expect(screen.getByRole('button')).toHaveTextContent('My Button');
+            });
+            await user.click(screen.getByRole('button'));
+            expect(props.httpClient).not.toHaveBeenCalled();
+        });
+        it('when the strict feature is set, it should call onError', async () => {
+            const props = Object.assign(Object.assign({}, getDefaultProps()), { initialStep: {
+                    id: 'step-id',
+                    title: 'Step with button',
+                    layout: [{ type: 'button', title: 'My Button' }],
+                    schemas: [],
+                } });
+            renderWithProviders(_jsx(DynamicFlowWise, Object.assign({}, props, { features: { strictButtonOperations: true } })));
+            await waitFor(() => {
+                expect(props.onError).toHaveBeenCalled();
+            });
+            // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
+            expect(props.onError.mock.calls[0][0].message).toBe('ButtonLayout must have either a behavior or an action');
+        });
+    });
+    describe('New "discriminated union" behavior type', () => {
+        describe('Given a button component with an action behaviour', () => {
+            it('should render a button that triggers the action on click', async () => {
+                const props = Object.assign(Object.assign({}, getDefaultProps()), { initialStep: {
+                        id: 'step-id',
+                        title: 'Step with button',
+                        layout: [
+                            {
+                                type: 'button',
+                                title: 'My Button',
+                                behavior: { type: 'action', action: { url: '/behaviour-action-url' } },
+                            },
+                        ],
+                        schemas: [],
+                    } });
+                renderWithProviders(_jsx(DynamicFlowWise, Object.assign({}, props)));
+                await waitFor(() => {
+                    expect(screen.getByRole('button')).toHaveTextContent('My Button');
+                });
+                await user.click(screen.getByRole('button'));
+                expect(props.httpClient).toHaveBeenCalledWith('/behaviour-action-url', expect.any(Object));
+            });
+        });
+        describe('Given a button component with an link behaviour', () => {
+            const getProps = () => (Object.assign(Object.assign({}, getDefaultProps()), { initialStep: {
+                    id: 'step-id',
+                    title: 'Step with button',
+                    layout: [
+                        {
+                            type: 'button',
+                            title: 'Open in new tab',
+                            behavior: {
+                                type: 'link',
+                                url: 'http://foo.bar',
+                            },
+                        },
+                    ],
+                    schemas: [],
+                } }));
+            describe('when onLink prop is provided', () => {
+                it('should render a button that triggers onLink on click', async () => {
+                    const onLink = vi.fn();
+                    const props = Object.assign(Object.assign({}, getProps()), { onLink });
+                    renderWithProviders(_jsx(DynamicFlowWise, Object.assign({}, props)));
+                    await waitFor(() => {
+                        expect(screen.getByRole('button')).toHaveTextContent('Open in new tab');
+                    });
+                    await user.click(screen.getByRole('button'));
+                    expect(props.httpClient).not.toHaveBeenCalled();
+                    expect(onLink).toHaveBeenCalledWith('http://foo.bar');
+                });
+            });
+            describe('when the onLink prop is NOT provided', () => {
+                it('should render a button that calls window.open on click', async () => {
+                    const props = getProps();
+                    renderWithProviders(_jsx(DynamicFlowWise, Object.assign({}, props)));
+                    await waitFor(() => {
+                        expect(screen.getByRole('button')).toHaveTextContent('Open in new tab');
+                    });
+                    // Mock window.open
+                    const originalWindowOpenFn = window.open;
+                    window.open = vi.fn();
+                    await user.click(screen.getByRole('button'));
+                    expect(props.httpClient).not.toHaveBeenCalled();
+                    expect(window.open).toHaveBeenCalledWith('http://foo.bar', '_blank');
+                    // Restore mocked window.open
+                    window.open = originalWindowOpenFn;
+                });
+            });
+        });
+    });
+    describe('Deprecated "container" behavior type', () => {
+        describe('Given a button component with an link behaviour', () => {
+            const getProps = () => (Object.assign(Object.assign({}, getDefaultProps()), { initialStep: {
+                    id: 'step-id',
+                    title: 'Step with button',
+                    layout: [
+                        {
+                            type: 'button',
+                            title: 'Open in new tab',
+                            behavior: {
+                                link: { url: 'http://foo.bar' },
+                            },
+                        },
+                    ],
+                    schemas: [],
+                } }));
+            describe('when onLink prop is provided', () => {
+                it('should render a button that triggers onLink on click', async () => {
+                    const onLink = vi.fn();
+                    const props = Object.assign(Object.assign({}, getProps()), { onLink });
+                    renderWithProviders(_jsx(DynamicFlowWise, Object.assign({}, props)));
+                    await waitFor(() => {
+                        expect(screen.getByRole('button')).toHaveTextContent('Open in new tab');
+                    });
+                    await user.click(screen.getByRole('button'));
+                    expect(props.httpClient).not.toHaveBeenCalled();
+                    expect(onLink).toHaveBeenCalledWith('http://foo.bar');
+                });
+            });
+            describe('when the onLink prop is NOT provided', () => {
+                it('should render a button that calls window.open on click', async () => {
+                    const props = getProps();
+                    renderWithProviders(_jsx(DynamicFlowWise, Object.assign({}, props)));
+                    await waitFor(() => {
+                        expect(screen.getByRole('button')).toHaveTextContent('Open in new tab');
+                    });
+                    // Mock window.open
+                    const originalWindowOpenFn = window.open;
+                    window.open = vi.fn();
+                    await user.click(screen.getByRole('button'));
+                    expect(props.httpClient).not.toHaveBeenCalled();
+                    expect(window.open).toHaveBeenCalledWith('http://foo.bar', '_blank');
+                    // Restore mocked window.open
+                    window.open = originalWindowOpenFn;
+                });
+            });
+        });
+        describe('Given a button component with an action behaviour', () => {
+            it('should render a button that triggers the action on click', async () => {
+                const props = Object.assign(Object.assign({}, getDefaultProps()), { initialStep: {
+                        id: 'step-id',
+                        title: 'Step with button',
+                        layout: [
+                            {
+                                type: 'button',
+                                title: 'My Button',
+                                behavior: { action: { url: '/behaviour-action-url' } },
+                            },
+                        ],
+                        schemas: [],
+                    } });
+                renderWithProviders(_jsx(DynamicFlowWise, Object.assign({}, props)));
+                await waitFor(() => {
+                    expect(screen.getByRole('button')).toHaveTextContent('My Button');
+                });
+                await user.click(screen.getByRole('button'));
+                expect(props.httpClient).toHaveBeenCalledWith('/behaviour-action-url', expect.any(Object));
+            });
+        });
+    });
+    describe('Loading states', () => {
+        describe('When a button is clicked and submission triggers', () => {
+            it('that button shows a loading state', async () => {
+                const mockHttpClient = vi.fn().mockImplementation(async () => {
+                    return new Response(JSON.stringify({
+                        id: 'step-id',
+                        title: 'Second step',
+                        layout: [
+                            {
+                                type: 'button',
+                                title: 'My Button',
+                                behavior: { action: { url: '/behaviour-action-url' } },
+                            },
+                            {
+                                type: 'button',
+                                title: 'My Other Button',
+                                behavior: { action: { url: '/behaviour-action-url' } },
+                            },
+                        ],
+                        schemas: [],
+                    }));
+                });
+                const props = Object.assign(Object.assign({}, getDefaultProps()), { httpClient: mockHttpClient, initialStep: {
+                        id: 'step-id',
+                        title: 'Step with button',
+                        layout: [
+                            {
+                                type: 'button',
+                                title: 'My Button',
+                                behavior: { action: { url: '/behaviour-action-url' } },
+                            },
+                            {
+                                type: 'button',
+                                title: 'My Other Button',
+                                behavior: { action: { url: '/behaviour-action-url' } },
+                            },
+                        ],
+                        schemas: [],
+                    } });
+                renderWithProviders(_jsx(DynamicFlowWise, Object.assign({}, props)));
+                const button = screen.getByRole('button', { name: 'My Button' });
+                const otherButton = screen.getByRole('button', { name: 'My Other Button' });
+                expect(button).toBeInTheDocument();
+                await user.click(button);
+                expect(button).toHaveAttribute('aria-busy', 'true');
+                expect(otherButton).not.toHaveAttribute('aria-busy', 'true');
+                await waitFor(() => {
+                    expect(screen.getByText('Second step')).toBeInTheDocument();
+                });
+                const step2button = screen.getByRole('button', { name: 'My Button' });
+                const step2otherButton = screen.getByRole('button', { name: 'My Other Button' });
+                await user.click(step2otherButton);
+                expect(step2otherButton).toHaveAttribute('aria-busy', 'true');
+                expect(step2button).not.toHaveAttribute('aria-busy', 'true');
+            });
+        });
+        describe('When a button is clicked and submission does not trigger', () => {
+            it('shows no loading state', async () => {
+                const props = Object.assign(Object.assign({}, getDefaultProps()), { initialStep: {
+                        id: 'step-id',
+                        title: 'Step with button',
+                        layout: [
+                            {
+                                type: 'form',
+                                schemaId: '#form',
+                            },
+                            {
+                                type: 'button',
+                                title: 'My Button',
+                                behavior: { action: { url: '/behaviour-action-url' } },
+                            },
+                            {
+                                type: 'button',
+                                title: 'My Other Button',
+                                behavior: { action: { url: '/behaviour-action-url' } },
+                            },
+                        ],
+                        schemas: [
+                            {
+                                $id: '#form',
+                                type: 'string',
+                            },
+                        ],
+                    } });
+                renderWithProviders(_jsx(DynamicFlowWise, Object.assign({}, props)));
+                const button = screen.getByText('My Button');
+                expect(button).toBeInTheDocument();
+                await user.click(button);
+                expect(screen.getByText('My Button')).not.toHaveAttribute('aria-busy', 'true');
+            });
+        });
+    });
+    describe('when the flow ends', () => {
+        it('the button remains disabled', async () => {
+            const onCompletion = vi.fn();
+            const props = Object.assign(Object.assign({}, getDefaultProps()), { onCompletion, initialStep: {
+                    id: 'step-id',
+                    title: 'Step with button',
+                    schemas: [],
+                    layout: [
+                        {
+                            type: 'button',
+                            title: 'Complete',
+                            behavior: { type: 'action', action: { exit: true } },
+                        },
+                    ],
+                } });
+            renderWithProviders(_jsx(DynamicFlowWise, Object.assign({}, props)));
+            const button = screen.getByRole('button', { name: 'Complete' });
+            await user.click(button);
+            await waitFor(() => {
+                expect(onCompletion).toHaveBeenCalled();
+            });
+            expect(button).toBeDisabled();
+        });
+        describe('when the continueAfterCompletion feature is enabled', () => {
+            it('the button becomes enabled again', async () => {
+                const onCompletion = vi.fn();
+                const props = Object.assign(Object.assign({}, getDefaultProps()), { onCompletion, features: { continueAfterCompletion: true }, initialStep: {
+                        id: 'step-id',
+                        title: 'Step with button',
+                        schemas: [],
+                        layout: [
+                            {
+                                type: 'button',
+                                title: 'Complete',
+                                behavior: { type: 'action', action: { exit: true } },
+                            },
+                        ],
+                    } });
+                renderWithProviders(_jsx(DynamicFlowWise, Object.assign({}, props)));
+                const button = screen.getByRole('button', { name: 'Complete' });
+                await user.click(button);
+                await waitFor(() => {
+                    expect(onCompletion).toHaveBeenCalled();
+                });
+                expect(button).toBeEnabled();
+            });
+        });
+    });
+});