test

Author: paula-stacho

packages/compass-data-modeling/src/components/diagram-editor-toolbar.spec.tsx

@@ -12,9 +12,11 @@ function renderDiagramEditorToolbar(
       step="EDITING"
       hasUndo={true}
       hasRedo={true}
+      isInRelationshipDrawingMode={false}
       onUndoClick={() => {}}
       onRedoClick={() => {}}
       onExportClick={() => {}}
+      onRelationshipDrawingToggle={() => {}}
       {...props}
     />
   );
@@ -63,6 +65,36 @@ describe('DiagramEditorToolbar', function () {
     });
   });
 
+  context('add relationship button', function () {
+    it('renders it active if isInRelationshipDrawingMode is true', function () {
+      renderDiagramEditorToolbar({ isInRelationshipDrawingMode: true });
+      const addButton = screen.getByRole('button', {
+        name: 'Add Relationship',
+      });
+      expect(addButton).to.have.attribute('aria-pressed', 'true');
+    });
+
+    it('does not render it active if isInRelationshipDrawingMode is false', function () {
+      renderDiagramEditorToolbar({ isInRelationshipDrawingMode: false });
+      const addButton = screen.getByRole('button', {
+        name: 'Add Relationship',
+      });
+      expect(addButton).to.have.attribute('aria-pressed', 'false');
+    });
+
+    it('clicking on it calls onRelationshipDrawingToggle', function () {
+      const relationshipDrawingToggleSpy = sinon.spy();
+      renderDiagramEditorToolbar({
+        onRelationshipDrawingToggle: relationshipDrawingToggleSpy,
+      });
+      const addRelationshipButton = screen.getByRole('button', {
+        name: 'Add Relationship',
+      });
+      userEvent.click(addRelationshipButton);
+      expect(relationshipDrawingToggleSpy).to.have.been.calledOnce;
+    });
+  });
+
   it('renders export button and calls onExportClick', function () {
     const exportSpy = sinon.spy();
     renderDiagramEditorToolbar({ onExportClick: exportSpy });

packages/compass-data-modeling/src/components/diagram-editor-toolbar.tsx

@@ -49,7 +49,16 @@ export const DiagramEditorToolbar: React.FunctionComponent<{
   onRedoClick: () => void;
   onExportClick: () => void;
   onRelationshipDrawingToggle: () => void;
-}> = ({ step, hasUndo, onUndoClick, hasRedo, onRedoClick, onExportClick, onRelationshipDrawingToggle, isInRelationshipDrawingMode }) => {
+}> = ({
+  step,
+  hasUndo,
+  onUndoClick,
+  hasRedo,
+  onRedoClick,
+  onExportClick,
+  onRelationshipDrawingToggle,
+  isInRelationshipDrawingMode,
+}) => {
   const darkmode = useDarkMode();
   if (step !== 'EDITING') {
     return null;
@@ -64,6 +73,7 @@ export const DiagramEditorToolbar: React.FunctionComponent<{
           aria-label="Add Relationship"
           onClick={onRelationshipDrawingToggle}
           active={isInRelationshipDrawingMode}
+          aria-pressed={isInRelationshipDrawingMode}
         >
           <Icon glyph="Relationship"></Icon>
         </IconButton>

packages/compass-data-modeling/src/components/diagram-editor.tsx

@@ -232,7 +232,6 @@ const DiagramEditor: React.FunctionComponent<{
   onRelationshipSelect: (rId: string) => void;
   onDiagramBackgroundClicked: () => void;
   selectedItems: SelectedItems;
-  onNodesConnected: (source: string, target: string) => void;
   onRelationshipDrawn: (source: string, target: string) => void;
 }> = ({
   diagramLabel,
@@ -312,7 +311,12 @@ const DiagramEditor: React.FunctionComponent<{
         draggable: !isInRelationshipDrawingMode,
       })
     );
-  }, [model?.collections, model?.relationships, selectedItems, isInRelationshipDrawingMode]);
+  }, [
+    model?.collections,
+    model?.relationships,
+    selectedItems,
+    isInRelationshipDrawingMode,
+  ]);
 
   const handleNodesConnect = useCallback(
     (source: string, target: string) => {