conductor/frontend/src/components/Preview/buttonEvent.test.tsx

58 lines
2.0 KiB
TypeScript

import React, { act } from 'react';
import { createRoot } from 'react-dom/client';
import type { Root } from 'react-dom/client';
import type { ProjectDocument } from '../../types/project';
import { executeAction } from '../../api/proxyApi';
import { usePreviewRuntime } from './usePreviewRuntime';
jest.mock('../../api/proxyApi', () => ({ executeAction: jest.fn() }));
(globalThis as { IS_REACT_ACT_ENVIRONMENT?: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
const doc: ProjectDocument = {
schemaVersion: '0.1.0',
project: {
id: 'project', name: 'Project', variables: {}, bindings: [],
settings: {},
actions: [{ id: 'action_a', name: 'Action A', method: 'GET', url: 'https://example.com', authenticationType: 'anonymous' }],
pages: [{
id: 'page', name: 'Page', order: 0,
components: [{
id: 'button', name: 'runButton', type: 'Button',
position: { x: 0, y: 0 }, size: { width: 100, height: 40 },
properties: { label: 'Run' },
events: [{ event: 'onClick', actionId: 'action_a' }],
}],
}],
},
};
describe('Preview Button event dispatch', () => {
let container: HTMLDivElement;
let root: Root;
let runtime: ReturnType<typeof usePreviewRuntime>;
function Harness(): React.ReactElement {
runtime = usePreviewRuntime(doc);
return <div>{runtime.componentState.button?.error ?? ''}</div>;
}
beforeEach(() => {
container = document.createElement('div');
root = createRoot(container);
(executeAction as jest.Mock).mockResolvedValue({ ok: true, status: 200, headers: {}, body: { ran: true } });
act(() => root.render(<Harness />));
});
afterEach(() => {
act(() => root.unmount());
jest.clearAllMocks();
});
test('executes the REST action selected by canonical onClick configuration', async () => {
await act(async () => {
runtime.handleButtonClick('button');
await Promise.resolve();
await Promise.resolve();
});
expect(executeAction).toHaveBeenCalledWith(expect.objectContaining({ id: 'action_a' }));
});
});