Macro: #3385 - Overlapping of bonds between 2 monomers

ketcher-autotests/tests/Macromolecule-editor/Polymer-Bond-Tool/polymer-bond-tool.spec.ts

@@ -1,10 +1,12 @@
-import { test } from '@playwright/test';
+import { test, expect } from '@playwright/test';
 import {
   selectSingleBondTool,
   waitForPageInit,
   takePageScreenshot,
+  addMonomerToCanvas,
 } from '@utils';
 import { turnOnMacromoleculesEditor } from '@utils/macromolecules';
+import { bondTwoMonomers } from '@utils/macromolecules/polymerBond';
 /* eslint-disable no-magic-numbers */
 
 test.describe('Polymer Bond Tool', () => {
@@ -89,3 +91,44 @@ test.describe('Polymer Bond Tool', () => {
     await page.mouse.up();
   });
 });
+
+test.describe('Signle Bond Tool', () => {
+  test.beforeEach(async ({ page }) => {
+    await waitForPageInit(page);
+    await turnOnMacromoleculesEditor(page);
+  });
+  test('Select monomers and pass a bond', async ({ page }) => {
+    /* 
+      Test case: Macro: #3385 - Overlapping of bonds between 2 monomers
+      https://github.com/epam/ketcher/issues/3385 
+      Description: The system shall unable user to create more
+      than 1 bond between the first and the second monomer
+      */
+    const MONOMER_NAME = 'Tza___3-thiazolylalanine';
+    const MONOMER_ALIAS = 'Tza';
+    const peptide1 = await addMonomerToCanvas(
+      page,
+      MONOMER_NAME,
+      MONOMER_ALIAS,
+      300,
+      300,
+      0,
+    );
+    const peptide2 = await addMonomerToCanvas(
+      page,
+      MONOMER_NAME,
+      MONOMER_ALIAS,
+      400,
+      400,
+      1,
+    );
+    await selectSingleBondTool(page);
+    await bondTwoMonomers(page, peptide1, peptide2);
+    await bondTwoMonomers(page, peptide2, peptide1);
+    await page.waitForSelector('#error-tooltip');
+    const errorTooltip = await page.getByTestId('error-tooltip').innerText();
+    const errorMessage =
+      "There can't be more than 1 bond between the first and the second monomer";
+    expect(errorTooltip).toEqual(errorMessage);
+  });
+});

package.json

@@ -49,7 +49,7 @@
     "npm-run-all": "^4.1.5",
     "prettier": "2.8.0",
     "prettier-config-standard": "^5.0.0",
-    "stylelint": "13.13.1",
+    "stylelint": "^13.13.1",
     "stylelint-config-prettier": "^9.0.3",
     "stylelint-config-standard": "22.0.0"
   },

packages/ketcher-core/src/application/editor/tools/Bond.ts

@@ -168,6 +168,27 @@ class PolymerBond implements BaseTool {
       renderer === this.bondRenderer?.polymerBond?.firstMonomer?.renderer;
 
     if (this.bondRenderer && !isFirstMonomerHovered) {
+      const firstMonomer = this.bondRenderer?.polymerBond?.firstMonomer;
+      const secondMonomer = renderer.monomer;
+
+      for (const attachmentPoint in secondMonomer.attachmentPointsToBonds) {
+        const bond = secondMonomer.attachmentPointsToBonds[attachmentPoint];
+        if (!bond) {
+          continue;
+        }
+        const alreadyHasBond =
+          (bond.firstMonomer === firstMonomer &&
+            bond.secondMonomer === secondMonomer) ||
+          (bond.firstMonomer === secondMonomer &&
+            bond.secondMonomer === firstMonomer);
+        if (alreadyHasBond) {
+          this.editor.events.error.dispatch(
+            "There can't be more than 1 bond between the first and the second monomer",
+          );
+          return;
+        }
+      }
+
       const modelChanges = this.finishBondCreation(renderer.monomer);
       this.editor.renderersContainer.update(modelChanges);
       this.bondRenderer = undefined;

packages/ketcher-polymer-editor-react/src/Editor.tsx

@@ -204,7 +204,9 @@ function Editor({ theme }: EditorProps) {
         autoHideDuration={6000}
       >
         <StyledToast id="error-tooltip">
-          <StyledToastContent>{errorTooltipText}</StyledToastContent>
+          <StyledToastContent data-testid="error-tooltip">
+            {errorTooltipText}
+          </StyledToastContent>
           <StyledIconButton
             iconName="close"
             onClick={handleCloseErrorTooltip}