From ca1acc5b7b03ca1c86563986fbca6d61a8d3daaa Mon Sep 17 00:00:00 2001 From: "Ricardo M." Date: Fri, 30 Aug 2024 14:32:46 +0200 Subject: [PATCH] chore(CanvasSideBar): Cleanup and add missing tests --- .../Canvas/CanvasSideBar.test.tsx | 54 ++++ .../Visualization/Canvas/CanvasSideBar.tsx | 18 +- .../Visualization/Canvas/Form/CanvasForm.tsx | 28 +- .../__snapshots__/CanvasSideBar.test.tsx.snap | 279 ++++++++++++++++++ 4 files changed, 355 insertions(+), 24 deletions(-) create mode 100644 packages/ui/src/components/Visualization/Canvas/CanvasSideBar.test.tsx create mode 100644 packages/ui/src/components/Visualization/Canvas/__snapshots__/CanvasSideBar.test.tsx.snap diff --git a/packages/ui/src/components/Visualization/Canvas/CanvasSideBar.test.tsx b/packages/ui/src/components/Visualization/Canvas/CanvasSideBar.test.tsx new file mode 100644 index 000000000..f2cb9f78d --- /dev/null +++ b/packages/ui/src/components/Visualization/Canvas/CanvasSideBar.test.tsx @@ -0,0 +1,54 @@ +import { act, fireEvent, render } from '@testing-library/react'; +import { FunctionComponent, PropsWithChildren } from 'react'; +import { CamelRouteResource } from '../../../models/camel'; +import { EntityType } from '../../../models/camel/entities'; +import { TestProvidersWrapper } from '../../../stubs/TestProvidersWrapper'; +import { CanvasNode } from './canvas.models'; +import { CanvasSideBar } from './CanvasSideBar'; +import { FlowService } from './flow.service'; + +describe('CanvasSideBar', () => { + let selectedNode: CanvasNode; + let Provider: FunctionComponent; + + beforeAll(() => { + const camelResource = new CamelRouteResource(); + camelResource.addNewEntity(EntityType.Route); + const visualEntity = camelResource.getVisualEntities()[0]; + selectedNode = FlowService.getFlowDiagram(visualEntity.toVizNode()).nodes[0]; + Provider = TestProvidersWrapper({ camelResource }).Provider; + }); + + it('does not render anything if there is no selectedNode', () => { + const wrapper = render( {}} />); + + expect(wrapper.container).toBeEmptyDOMElement(); + }); + + it('displays selected node information', () => { + const wrapper = render( + + {}} /> + , + ); + + expect(wrapper.asFragment()).toMatchSnapshot(); + }); + + it('should propagate onClose callback', () => { + const onCloseSpy = jest.fn(); + + const wrapper = render( + + + , + ); + + act(() => { + const closeButton = wrapper.getByTestId('close-side-bar'); + fireEvent.click(closeButton); + }); + + expect(onCloseSpy).toHaveBeenCalledTimes(1); + }); +}); diff --git a/packages/ui/src/components/Visualization/Canvas/CanvasSideBar.tsx b/packages/ui/src/components/Visualization/Canvas/CanvasSideBar.tsx index 2f60c8de9..8209bf8f7 100644 --- a/packages/ui/src/components/Visualization/Canvas/CanvasSideBar.tsx +++ b/packages/ui/src/components/Visualization/Canvas/CanvasSideBar.tsx @@ -12,19 +12,21 @@ interface CanvasSideBarProps { } export const CanvasSideBar: FunctionComponent = (props) => { + if (props.selectedNode === undefined) { + return null; + } + return ( /** * We cannot use the onClose property since the button has 'position: absolute' * and doesn't take into account the sidebar children. */ - - {props.selectedNode === undefined ? null : ( - Something didn't work as expected

}> - - - - - )} + + Something didn't work as expected

}> + + + + ); }; diff --git a/packages/ui/src/components/Visualization/Canvas/Form/CanvasForm.tsx b/packages/ui/src/components/Visualization/Canvas/Form/CanvasForm.tsx index 1fdd13af0..bc0c8c7c7 100644 --- a/packages/ui/src/components/Visualization/Canvas/Form/CanvasForm.tsx +++ b/packages/ui/src/components/Visualization/Canvas/Form/CanvasForm.tsx @@ -12,48 +12,44 @@ interface CanvasFormProps { onClose?: () => void; } -export const CanvasForm: FunctionComponent = (props) => { +export const CanvasForm: FunctionComponent = ({ selectedNode, onClose }) => { const { visualFlowsApi } = useContext(VisibleFlowsContext)!; const flowIdRef = useRef(undefined); + const vizNode = selectedNode.data?.vizNode; const visualComponentSchema = useMemo(() => { - const answer = props.selectedNode.data?.vizNode?.getComponentSchema(); + const answer = vizNode?.getComponentSchema(); // Overriding parameters with an empty object When the parameters property is mistakenly set to null if (answer?.definition?.parameters === null) { answer!.definition.parameters = {}; } return answer; - }, [props.selectedNode.data?.vizNode]); + }, [vizNode]); const title = visualComponentSchema?.title; /** Store the flow's initial Id */ useEffect(() => { - flowIdRef.current = props.selectedNode.data?.vizNode?.getId(); + flowIdRef.current = vizNode?.getId(); // eslint-disable-next-line react-hooks/exhaustive-deps }, []); - const onClose = useCallback(() => { - props.onClose?.(); - const newId = props.selectedNode.data?.vizNode?.getId(); + const onCloseFn = useCallback(() => { + onClose?.(); + const newId = vizNode?.getId(); if (typeof flowIdRef.current === 'string' && typeof newId === 'string' && flowIdRef.current !== newId) { visualFlowsApi.renameFlow(flowIdRef.current, newId); } - }, [props, visualFlowsApi]); + }, [onClose, visualFlowsApi, vizNode]); return ( - This node cannot be configured yet

}> + This node cannot be configured yet

}> - + - + diff --git a/packages/ui/src/components/Visualization/Canvas/__snapshots__/CanvasSideBar.test.tsx.snap b/packages/ui/src/components/Visualization/Canvas/__snapshots__/CanvasSideBar.test.tsx.snap new file mode 100644 index 000000000..3ebd083bc --- /dev/null +++ b/packages/ui/src/components/Visualization/Canvas/__snapshots__/CanvasSideBar.test.tsx.snap @@ -0,0 +1,279 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`CanvasSideBar displays selected node information 1`] = ` + + + +`;