chore: extend unit tests for editing

Author: CarstenWickner

src/component/EditMenu.tsx

@@ -1,14 +1,15 @@
 import * as React from "react";
 
+import { EditMenuItem } from "./EditMenuItem";
 import { FlowElementReference } from "../model/FlowElement";
 import { addContentElement, addDivergingGateway } from "../model/action/addElement";
 import { addBranch } from "../model/action/addBranch";
-import { removeElement } from "../model/action/removeElement";
+import { isChangeNextElementAllowed } from "../model/action/changeNextElement";
+import { removeElement, isRemoveElementAllowed } from "../model/action/removeElement";
 
 import { SelectableElementType, EditActionResult, DraggableType } from "../types/EditAction";
 import { FlowModelerProps, MenuOptions } from "../types/FlowModelerProps";
 import { ElementType } from "../types/GridCellData";
-import { EditMenuItem } from "./EditMenuItem";
 
 const onClickStopPropagation = (event: React.MouseEvent): void => event.stopPropagation();
 
@@ -17,7 +18,7 @@ export class EditMenu extends React.Component<{
     referenceElement?: FlowElementReference;
     branchIndex?: number;
     menuOptions?: FlowModelerProps["options"]["editActions"];
-    onChange?: (change: (originalFlow: FlowModelerProps["flow"]) => EditActionResult) => void;
+    onChange: (change: (originalFlow: FlowModelerProps["flow"]) => EditActionResult) => void;
 }> {
     isNextElementReferencedByOthers = (): boolean => {
         const { referenceElement, branchIndex } = this.props;
@@ -43,7 +44,7 @@ export class EditMenu extends React.Component<{
             this.isNextElementReferencedByOthers()
                 ? { type: dragType, originType: targetType, originElement: referenceElement, originBranchIndex: branchIndex }
                 : undefined;
-        return <EditMenuItem options={options} defaultClassName={defaultClassName} onClick={onClick} dragItem={dragItem} />;
+        return <EditMenuItem key={defaultClassName} options={options} defaultClassName={defaultClassName} onClick={onClick} dragItem={dragItem} />;
     }
 
     onAddContentElementClick = (): void => {
@@ -96,11 +97,11 @@ export class EditMenu extends React.Component<{
     }
 
     renderChangeNextElementItem(): React.ReactNode {
-        const { targetType, menuOptions } = this.props;
-        if (targetType !== ElementType.Content && targetType !== ElementType.ConnectGatewayToElement) {
-            return null;
+        const { targetType, referenceElement, branchIndex, menuOptions } = this.props;
+        if (isChangeNextElementAllowed(targetType, referenceElement, branchIndex)) {
+            return this.renderMenuItem(menuOptions ? menuOptions.changeNextElement : undefined, "change-next", undefined, DraggableType.LINK);
         }
-        return this.renderMenuItem(menuOptions ? menuOptions.changeNextElement : undefined, "change-next", undefined, DraggableType.LINK);
+        return null;
     }
 
     onRemoveClick = (): void => {
@@ -111,18 +112,14 @@ export class EditMenu extends React.Component<{
     };
 
     renderRemoveItem(): React.ReactNode {
-        const { targetType, menuOptions } = this.props;
-        if (targetType !== ElementType.Content && targetType !== ElementType.ConnectGatewayToElement) {
-            return null;
+        const { targetType, referenceElement, branchIndex, menuOptions } = this.props;
+        if (isRemoveElementAllowed(targetType, referenceElement, branchIndex)) {
+            return this.renderMenuItem(menuOptions ? menuOptions.removeElement : undefined, "remove", this.onRemoveClick);
         }
-        return this.renderMenuItem(menuOptions ? menuOptions.removeElement : undefined, "remove", this.onRemoveClick);
+        return null;
     }
 
     render(): React.ReactNode {
-        const { onChange } = this.props;
-        if (!onChange) {
-            return null;
-        }
         const menuItems = [
             this.renderAddContentElementItem(),
             this.renderAddDivergingGatewayItem(),

src/component/EditMenuItem.tsx

@@ -2,12 +2,11 @@ import * as React from "react";
 import { useDrag } from "react-dnd";
 
 import { DraggedLinkContext } from "../types/EditAction";
-import { MenuOptions } from "../types/FlowModelerProps";
 
 const disabledDragging: [{ isDragging: boolean }, React.LegacyRef<HTMLSpanElement>] = [{ isDragging: false }, undefined];
 
 export const EditMenuItem: React.FC<{
-    options: MenuOptions;
+    options: { className?: string; title?: string };
     defaultClassName: string;
     onClick?: (event: React.MouseEvent) => void;
     dragItem?: DraggedLinkContext;
@@ -24,10 +23,8 @@ export const EditMenuItem: React.FC<{
     const baseClassName = (options && options.className) || `menu-item ${defaultClassName}`;
     return (
         <span
-            key={defaultClassName}
-            title={options && options.title}
             className={`${baseClassName}${isDragging ? " dragging" : ""}`}
-            {...{ ref: drag, onClick }}
+            {...{ title: options ? options.title : undefined, ref: drag, onClick }}
         />
     );
 };

src/model/action/addBranch.ts

@@ -16,6 +16,6 @@ export const addBranch = (
         const followings = nextConvergingGateway.getFollowingElements();
         nextConvergingGateway = followings[followings.length - 1];
     } while (nextConvergingGateway.getPrecedingElements().length < 2);
-    gatewayInFlow.nextElements.push({ id: nextConvergingGateway.getId() });
+    gatewayInFlow.nextElements.push({ id: nextConvergingGateway.getId(), conditionData: data });
     return { changedFlow };
 };

src/model/action/changeNextElement.ts

@@ -6,6 +6,10 @@ import { EditActionResult } from "../../types/EditAction";
 import { FlowModelerProps, FlowContent, FlowGatewayDiverging } from "../../types/FlowModelerProps";
 import { ElementType } from "../../types/GridCellData";
 
+export const isChangeNextElementAllowed = (targetType: ElementType, referenceElement: FlowElementReference, branchIndex?: number): boolean =>
+    (targetType === ElementType.Content || targetType === ElementType.ConnectGatewayToElement) &&
+    referenceElement.getFollowingElements()[branchIndex || 0].getPrecedingElements().length > 1;
+
 export const changeNextElement = (
     originalFlow: FlowModelerProps["flow"],
     newNextElement: FlowElementReference,

src/model/action/removeElement.ts

@@ -2,37 +2,26 @@ import cloneDeep from "lodash.clonedeep";
 
 import { replaceAllLinks } from "./editUtils";
 import { FlowElementReference } from "../FlowElement";
-import { isDivergingGateway } from "../modelUtils";
 
 import { EditActionResult } from "../../types/EditAction";
 import { FlowModelerProps, FlowContent, FlowGatewayDiverging } from "../../types/FlowModelerProps";
 import { ElementType } from "../../types/GridCellData";
 
-const isElementReferencing = (elementId: string) => (element: FlowContent | FlowGatewayDiverging): boolean => {
-    if (isDivergingGateway(element)) {
-        return element.nextElements.some(({ id }) => id === elementId);
-    }
-    return element.nextElementId === elementId;
-};
-
-const isElementReferenced = (flow: FlowModelerProps["flow"], elementId: string): boolean =>
-    Object.values(flow.elements).some(isElementReferencing(elementId));
-
-const removeOrphanElement = (flow: FlowModelerProps["flow"], elementId: string): void => {
-    if (elementId in flow.elements && !isElementReferenced(flow, elementId)) {
-        const orphan = flow.elements[elementId];
-        delete flow.elements[elementId];
-        if (isDivergingGateway(orphan)) {
-            orphan.nextElements.forEach(({ id }) => removeOrphanElement(flow, id));
-        } else {
-            removeOrphanElement(flow, orphan.nextElementId);
-        }
-    }
-};
+/**
+ * Only content elements may be removed or gateway branches that point to converging gateways (to not remove other elements implicitly).
+ *
+ * @param {ElementType} targetType - indication of type of element being target for removal
+ * @param {FlowElementReference} referenceElement - content or diverging gateway element
+ * @param {?number} branchIndex - index in reference gateway identifying the targeted ConnectGatewayToElement
+ * @returns {boolean} whether removeElement() is allowed to be called for the targeted element
+ */
+export const isRemoveElementAllowed = (targetType: ElementType, referenceElement: FlowElementReference, branchIndex?: number): boolean =>
+    targetType === ElementType.Content ||
+    (targetType === ElementType.ConnectGatewayToElement && referenceElement.getFollowingElements()[branchIndex].getPrecedingElements().length > 1);
 
 export const removeElement = (
     originalFlow: FlowModelerProps["flow"],
-    targetType: ElementType.Content | ElementType.GatewayDiverging | ElementType.ConnectGatewayToElement,
+    targetType: ElementType.Content | ElementType.ConnectGatewayToElement,
     referenceElement: FlowElementReference,
     branchIndex?: number
 ): EditActionResult => {
@@ -46,9 +35,7 @@ export const removeElement = (
             break;
         case ElementType.ConnectGatewayToElement:
             const precedingGatewayElement = (changedFlow.elements[targetId] as unknown) as FlowGatewayDiverging;
-            const nextElementId = precedingGatewayElement.nextElements[branchIndex].id;
             precedingGatewayElement.nextElements.splice(branchIndex, 1);
-            removeOrphanElement(changedFlow, nextElementId);
             if (precedingGatewayElement.nextElements.length === 1) {
                 // remove gateway as well, now that there is only one path left
                 replaceAllLinks(changedFlow, targetId, precedingGatewayElement.nextElements[0].id);

src/model/pathValidationUtils.ts

@@ -119,10 +119,15 @@ export const createValidatedElementTree = (flow: FlowModelerProps["flow"], verti
     return treeRootElement;
 };
 
+export const validateFlow = (flow: FlowModelerProps["flow"]): void => {
+    checkForCircularReference(flow.firstElementId, flow.elements);
+    const treeRootElement = createMinimalElementTreeStructure(flow).firstElement;
+    validatePaths(treeRootElement);
+};
+
 export const isFlowValid = (flow: FlowModelerProps["flow"]): boolean => {
     try {
-        checkForCircularReference(flow.firstElementId, flow.elements);
-        validatePaths(createMinimalElementTreeStructure(flow).firstElement);
+        validateFlow(flow);
         return true;
     } catch (error) {
         return false;

src/types/EditAction.ts

@@ -9,9 +9,9 @@ export type SelectableElementType =
     | ElementType.GatewayConverging
     | ElementType.ConnectGatewayToElement;
 
-export type EditActionResult = {
+export interface EditActionResult {
     changedFlow: FlowModelerProps["flow"];
-};
+}
 
 export enum DraggableType {
     LINK = "link"
@@ -20,7 +20,7 @@ export enum DraggableType {
 export interface DraggedLinkContext {
     type: DraggableType.LINK;
     originType: ElementType.Content | ElementType.ConnectGatewayToElement;
-    originElement?: FlowElementReference;
+    originElement: FlowElementReference;
     originBranchIndex?: number;
 }
 

test/component/ContentElement.test.tsx

@@ -1,21 +1,33 @@
 import * as React from "react";
-import { shallow } from "enzyme";
+import { mount, shallow } from "enzyme";
 
 import { ContentElement } from "../../src/component/ContentElement";
+import { FlowElementReference } from "../../src/model/FlowElement";
+
+const mockFlowElementReference = (id: string): FlowElementReference => ({
+    getId: (): string => id,
+    getPrecedingElements: (): Array<FlowElementReference> => [],
+    getFollowingElements: (): Array<FlowElementReference> => []
+});
 
 describe("renders correctly", () => {
     const onSelect = (): void => {};
     it("with minimal props", () => {
         const component = shallow(
-            <ContentElement elementId="element-id" editMenu={(): React.ReactNode => <div className="edit-menu-placeholder" />} onSelect={onSelect}>
+            <ContentElement
+                referenceElement={mockFlowElementReference("element-id")}
+                editMenu={(): React.ReactNode => <div className="edit-menu-placeholder" />}
+                onLinkDrop={undefined}
+                onSelect={onSelect}
+            >
                 {"text"}
             </ContentElement>
         );
         expect(component).toMatchSnapshot();
     });
     it("when not selected", () => {
-        const component = shallow(
-            <ContentElement elementId="element-id" editMenu={undefined} onSelect={onSelect}>
+        const component = mount(
+            <ContentElement referenceElement={mockFlowElementReference("element-id")} editMenu={undefined} onLinkDrop={undefined} onSelect={onSelect}>
                 {"text"}
             </ContentElement>
         );
@@ -28,8 +40,8 @@ describe("calls onSelect", () => {
     const onSelect = jest.fn(() => {});
     const event = ({ stopPropagation: jest.fn(() => {}) } as unknown) as React.MouseEvent;
     it("on click event", () => {
-        const component = shallow(
-            <ContentElement elementId={"element-id"} editMenu={undefined} onSelect={onSelect}>
+        const component = mount(
+            <ContentElement referenceElement={mockFlowElementReference("element-id")} editMenu={undefined} onLinkDrop={undefined} onSelect={onSelect}>
                 {"text"}
             </ContentElement>
         );

test/component/EditMenu.test.tsx

@@ -0,0 +1,45 @@
+import * as React from "react";
+import { shallow } from "enzyme";
+
+import { EditMenu } from "../../src/component/EditMenu";
+import { ElementType } from "../../src/types/GridCellData";
+import { createMinimalElementTreeStructure } from "../../src/model/modelUtils";
+import { FlowElement } from "../../src/model/FlowElement";
+
+describe("renders correctly", () => {
+    const { elementsInTree }: { elementsInTree: Map<string, FlowElement> } = createMinimalElementTreeStructure({
+        firstElementId: "a",
+        elements: {
+            a: { nextElements: [{ id: "b" }, { id: "c" }, {}] },
+            b: { nextElementId: "c" },
+            c: {}
+        }
+    });
+    const onChange = (): void => {};
+    it("for start element", () => {
+        const component = shallow(<EditMenu targetType={ElementType.Start} onChange={onChange} />);
+        expect(component).toMatchSnapshot();
+    });
+    it("for content element", () => {
+        const component = shallow(<EditMenu targetType={ElementType.Content} referenceElement={elementsInTree.get("b")} onChange={onChange} />);
+        expect(component).toMatchSnapshot();
+    });
+    it("for diverging gateway", () => {
+        const component = shallow(
+            <EditMenu targetType={ElementType.GatewayDiverging} referenceElement={elementsInTree.get("a")} onChange={onChange} />
+        );
+        expect(component).toMatchSnapshot();
+    });
+    it("for converging gateway", () => {
+        const component = shallow(
+            <EditMenu targetType={ElementType.GatewayConverging} referenceElement={elementsInTree.get("c")} onChange={onChange} />
+        );
+        expect(component).toMatchSnapshot();
+    });
+    it("for diverging gateway branch", () => {
+        const component = shallow(
+            <EditMenu targetType={ElementType.GatewayConverging} referenceElement={elementsInTree.get("a")} branchIndex={1} onChange={onChange} />
+        );
+        expect(component).toMatchSnapshot();
+    });
+});

test/component/EditMenuItem.test.tsx

@@ -0,0 +1,55 @@
+import * as React from "react";
+import { DndProvider } from "react-dnd";
+import Backend from "react-dnd-html5-backend";
+import { mount, shallow } from "enzyme";
+
+import { EditMenuItem } from "../../src/component/EditMenuItem";
+import { DraggableType } from "../../src/types/EditAction";
+import { ElementType } from "../../src/types/GridCellData";
+import { FlowElementReference } from "../../src/model/FlowElement";
+
+describe("renders correctly", () => {
+    it("for clicking", () => {
+        const onClick = (): void => {};
+        const component = shallow(<EditMenuItem options={undefined} defaultClassName="for-clicking" onClick={onClick} />);
+        const element = component.find(".menu-item.for-clicking");
+        expect(element.exists()).toBe(true);
+        expect(element.prop("title")).toBeUndefined();
+        expect(element.prop("onClick")).toBe(onClick);
+    });
+    it("for dragging", () => {
+        const dragItem = {
+            type: DraggableType.LINK,
+            originType: ElementType.Content,
+            originElement: {
+                getId: (): string => "id",
+                getPrecedingElements: (): Array<FlowElementReference> => [],
+                getFollowingElements: (): Array<FlowElementReference> => []
+            }
+        };
+        const component = mount(
+            <DndProvider backend={Backend}>
+                <EditMenuItem options={undefined} defaultClassName="for-dragging" dragItem={dragItem} />
+            </DndProvider>
+        );
+        const element = component.find(".menu-item.for-dragging");
+        expect(element.exists()).toBe(true);
+        expect(element.prop("title")).toBeUndefined();
+        expect(element.prop("onClick")).toBeUndefined();
+    });
+    it("considering given options", () => {
+        const options = { className: "clickable", title: "Click me!" };
+        const onClick = (): void => {};
+        const component = shallow(<EditMenuItem options={options} defaultClassName="for-clicking" onClick={onClick} />);
+        const element = component.find(".clickable");
+        expect(element.exists()).toBe(true);
+        expect(element.hasClass("menu-item")).toBe(false);
+        expect(element.hasClass("for-clicking")).toBe(false);
+        expect(element.prop("title")).toEqual("Click me!");
+        expect(element.prop("onClick")).toBe(onClick);
+    });
+});
+it("not rendered without dragging or clicking enabled", () => {
+    const wrapper = shallow(<EditMenuItem options={undefined} defaultClassName="something" />);
+    expect(wrapper).toEqual({});
+});