add test for add nodes panel

interactive-computational-graph/src/components/AddNodesPanel.test.tsx

@@ -0,0 +1,90 @@
+import { fireEvent, render, screen } from "@testing-library/react";
+import Operation from "../core/Operation";
+import Port from "../core/Port";
+import { ADD_DFDX_CODE, ADD_F_CODE } from "../features/BuiltInCode";
+import type FeatureNodeType from "../features/FeatureNodeType";
+import type FeatureOperation from "../features/FeatureOperation";
+import AddNodesPanel from "./AddNodesPanel";
+
+test("should trigger event when clicking item in view mode", () => {
+  const featureOperations = getFeatureOperations();
+  const handleAddNode = jest.fn();
+  const handleAddOperation = jest.fn();
+  const handleEditOperation = jest.fn();
+  render(
+    <AddNodesPanel
+      featureOperations={featureOperations}
+      onAddNode={handleAddNode}
+      onAddOperation={handleAddOperation}
+      onEditOperation={handleEditOperation}
+    />,
+  );
+
+  const addItem = screen.getByText("Add");
+  fireEvent.click(addItem);
+  const expectedNodeType: FeatureNodeType = {
+    nodeType: "OPERATION",
+    operationId: "add",
+  };
+  expect(handleAddNode).toHaveBeenCalledWith(expectedNodeType);
+});
+
+test("should trigger event when clicking add operation button", () => {
+  const featureOperations = getFeatureOperations();
+  const handleAddNode = jest.fn();
+  const handleAddOperation = jest.fn();
+  const handleEditOperation = jest.fn();
+  render(
+    <AddNodesPanel
+      featureOperations={featureOperations}
+      onAddNode={handleAddNode}
+      onAddOperation={handleAddOperation}
+      onEditOperation={handleEditOperation}
+    />,
+  );
+
+  const addOperationButton = screen.getByText("Add Operation");
+  fireEvent.click(addOperationButton);
+  expect(handleAddOperation).toHaveBeenCalledWith();
+});
+
+test("should trigger event when clicking edit icon button", () => {
+  const featureOperations = getFeatureOperations();
+  const handleAddNode = jest.fn();
+  const handleAddOperation = jest.fn();
+  const handleEditOperation = jest.fn();
+  render(
+    <AddNodesPanel
+      featureOperations={featureOperations}
+      onAddNode={handleAddNode}
+      onAddOperation={handleAddOperation}
+      onEditOperation={handleEditOperation}
+    />,
+  );
+
+  const editButton = screen.getByText("Edit");
+  fireEvent.click(editButton);
+
+  const editAddButton = screen.getByLabelText("Edit Add");
+  fireEvent.click(editAddButton);
+
+  const expectedNodeType: FeatureNodeType = {
+    nodeType: "OPERATION",
+    operationId: "add",
+  };
+  expect(handleEditOperation).toHaveBeenCalledWith(expectedNodeType);
+});
+
+const getFeatureOperations = (): FeatureOperation[] => {
+  return [
+    {
+      id: "add",
+      text: "Add",
+      type: "SIMPLE",
+      namePrefix: "a",
+      operation: new Operation(ADD_F_CODE, ADD_DFDX_CODE),
+      inputPorts: [new Port("a", false), new Port("b", false)],
+      helpText: "Add two numbers $ a + b $",
+    },
+  ];
+};

interactive-computational-graph/src/components/AddNodesPanel.tsx

@@ -18,17 +18,17 @@ import type FeatureOperation from "../features/FeatureOperation";
 import DraggableItem from "./DraggableItem";
 
 interface AddNodesPanelProps {
+  featureOperations: FeatureOperation[];
   onAddNode: (featureNodeType: FeatureNodeType) => void;
   onAddOperation: () => void;
   onEditOperation: (featureNodeType: FeatureNodeType) => void;
-  featureOperations: FeatureOperation[];
 }
 
 const AddNodesPanel: FunctionComponent<AddNodesPanelProps> = ({
+  featureOperations,
   onAddNode,
   onAddOperation,
   onEditOperation,
-  featureOperations,
 }) => {
   const simpleOperations = featureOperations.filter(
     (operation) => operation.type === "SIMPLE",
@@ -144,7 +144,11 @@ const AddNodesPanel: FunctionComponent<AddNodesPanelProps> = ({
               />
             ))}
             {/* Add operation */}
-            <ListItem onClick={onAddOperation}>
+            <ListItem
+              onClick={() => {
+                onAddOperation();
+              }}
+            >
               <Button startIcon={<AddIcon />}>Add Operation</Button>
             </ListItem>
           </List>

interactive-computational-graph/src/components/DraggableItem.tsx

@@ -47,6 +47,7 @@ const DraggableItem: FunctionComponent<DraggableItemProps> = ({
             onClick={() => {
               onClickEditIcon(featureNodeType);
             }}
+            aria-label={`Edit ${text}`}
           >
             <EditIcon />
           </IconButton>