Backmerge: #3208 - structure disappearance by pressing layout

* #3208 - Remove unused 'openFile' variable declaration * #3208 - simplify 'Stereo flag' test by using a loop and refactor 'Center molecule after layout' test * #3208 - Refactor code to ensure 'label' object is properly initialized * #3208 – fix tests --------- Co-authored-by: Gayane Chilingaryan <[email protected]> Co-authored-by: Nikita_Vozisov <[email protected]>
epam · Sep 8, 2023 · cfc2e8e · cfc2e8e
1 parent cbd61f2
commit cfc2e8e
Show file tree

Hide file tree

Showing 10 changed files with 192 additions and 22 deletions.
diff --git a/ketcher-autotests/tests/Indigo-Tools/Layout/layout.spec.ts b/ketcher-autotests/tests/Indigo-Tools/Layout/layout.spec.ts
@@ -7,6 +7,7 @@ import {
   pressButton,
   waitForLoad,
   getCoordinatesOfTheMiddleOfTheScreen,
+  openFileAndAddToCanvas,
 } from '@utils';
 
 async function openFileWithShift(filename: string, page: Page) {
@@ -27,8 +28,7 @@ test.describe('Indigo Tools - Layout', () => {
 
   test('Center molecule after layout', async ({ page }) => {
     // Related Github issue: https://github.com/epam/ketcher/issues/2078
-    const anyStructure = 'Molfiles-V2000/benzene-rings.mol';
-    await openFileWithShift(anyStructure, page);
+    await openFileAndAddToCanvas('Molfiles-V2000/benzene-rings.mol', page);
     await selectTopPanelButton(TopPanelButton.Layout, page);
     await takeEditorScreenshot(page);
   });
@@ -38,9 +38,22 @@ test.describe('Indigo Tools - Layout', () => {
   }) => {
     // Related Github issue: https://github.com/epam/ketcher/issues/3025
     const structureWithStereoFlags = 'KET/structure-with-stereo-flags.ket';
+    const numberOfIterations = 3;
     await openFileWithShift(structureWithStereoFlags, page);
-    await selectTopPanelButton(TopPanelButton.Layout, page);
-    await selectTopPanelButton(TopPanelButton.Layout, page);
+    for (let i = 0; i < numberOfIterations; i++) {
+      await selectTopPanelButton(TopPanelButton.Layout, page);
+    }
+    await takeEditorScreenshot(page);
+  });
+
+  test('After applying Layout, the structure does not disappear and can be interacted with', async ({
+    page,
+  }) => {
+    // Related Github issue: https://github.com/epam/ketcher/issues/3208
+    await openFileAndAddToCanvas(
+      'Molfiles-V2000/chloro-ethylamino-dimethyl-propoxy-propan-ol.mol',
+      page,
+    );
     await selectTopPanelButton(TopPanelButton.Layout, page);
     await takeEditorScreenshot(page);
   });

diff --git a/...yout-t-a20ba-does-not-disappear-and-can-be-interacted-with-1-chromium-linux.png b/...yout-t-a20ba-does-not-disappear-and-can-be-interacted-with-1-chromium-linux.png
diff --git a/...ture-Creating-&-Editing/Actions-With-Structures/R-group-tool/r-group-label-dialog.spec.ts b/...ture-Creating-&-Editing/Actions-With-Structures/R-group-tool/r-group-label-dialog.spec.ts
@@ -19,6 +19,7 @@ import {
   saveToFile,
   BondTypeName,
   selectBond,
+  waitForRender,
 } from '@utils';
 import { getAtomByIndex } from '@utils/canvas/atoms';
 import { getRxn, getSmiles } from '@utils/formats';
@@ -65,7 +66,9 @@ test.describe('R-Group Label Tool', () => {
     const { x, y } = await getCoordinatesTopAtomOfBenzeneRing(page);
     await page.mouse.click(x, y);
     await pressButton(page, 'R5');
-    await pressButton(page, 'Apply');
+    await waitForRender(page, async () => {
+      await pressButton(page, 'Apply');
+    });
   });
 
   test('Multiple R-Group label', async ({ page }) => {
@@ -82,7 +85,9 @@ test.describe('R-Group Label Tool', () => {
     await pressButton(page, 'R4');
     await pressButton(page, 'R5');
     await pressButton(page, 'R6');
-    await pressButton(page, 'Apply');
+    await waitForRender(page, async () => {
+      await pressButton(page, 'Apply');
+    });
   });
 
   test('Delete R-Group label using Erase tool', async ({ page }) => {
@@ -100,7 +105,9 @@ test.describe('R-Group Label Tool', () => {
     await pressButton(page, 'Apply');
 
     await selectLeftPanelButton(LeftPanelButton.Erase, page);
-    await page.getByText('R5').click();
+    await waitForRender(page, async () => {
+      await page.getByText('R5').click();
+    });
   });
 
   test('Edit R-Group label', async ({ page }) => {
@@ -120,7 +127,9 @@ test.describe('R-Group Label Tool', () => {
     await page.getByText('R5').click();
     await pressButton(page, 'R5');
     await pressButton(page, 'R8');
-    await pressButton(page, 'Apply');
+    await waitForRender(page, async () => {
+      await pressButton(page, 'Apply');
+    });
   });
 
   test('Create S-Group with R-Group', async ({ page }) => {
@@ -147,7 +156,9 @@ test.describe('R-Group Label Tool', () => {
     point = await getAtomByIndex(page, { label: 'C' }, 2);
     await page.mouse.click(point.x, point.y);
     await pressButton(page, 'R5');
-    await pressButton(page, 'Apply');
+    await waitForRender(page, async () => {
+      await pressButton(page, 'Apply');
+    });
   });
 
   test('Rotate R-group', async ({ page }) => {
@@ -165,7 +176,9 @@ test.describe('R-Group Label Tool', () => {
     await pressButton(page, 'Apply');
 
     await page.keyboard.press('Control+a');
-    await pressButton(page, 'Vertical Flip (Alt+V)');
+    await waitForRender(page, async () => {
+      await pressButton(page, 'Vertical Flip (Alt+V)');
+    });
   });
 
   test('Undo-Redo with R-group label', async ({ page }) => {
@@ -187,9 +200,13 @@ test.describe('R-Group Label Tool', () => {
     await pressButton(page, 'R7');
     await pressButton(page, 'R8');
     await pressButton(page, 'Apply');
-    await selectTopPanelButton(TopPanelButton.Undo, page);
+    await waitForRender(page, async () => {
+      await selectTopPanelButton(TopPanelButton.Undo, page);
+    });
     await takeEditorScreenshot(page);
-    await selectTopPanelButton(TopPanelButton.Redo, page);
+    await waitForRender(page, async () => {
+      await selectTopPanelButton(TopPanelButton.Redo, page);
+    });
   });
 
   test('Create the same R-Group label as existing', async ({ page }) => {
@@ -212,7 +229,10 @@ test.describe('R-Group Label Tool', () => {
     point = await getAtomByIndex(page, { label: 'C' }, 2);
     await page.mouse.click(point.x, point.y);
     await pressButton(page, 'R5');
-    await pressButton(page, 'Apply');
+
+    await waitForRender(page, async () => {
+      await pressButton(page, 'Apply');
+    });
   });
 
   test('Zoom In/Zoom Out', async ({ page }) => {
@@ -231,13 +251,17 @@ test.describe('R-Group Label Tool', () => {
 
     // eslint-disable-next-line no-magic-numbers
     for (let i = 0; i < 5; i++) {
-      await page.keyboard.press('Control+_');
+      await waitForRender(page, async () => {
+        await page.keyboard.press('Control+_');
+      });
     }
     await takeEditorScreenshot(page);
 
     // eslint-disable-next-line no-magic-numbers
     for (let i = 0; i < 5; i++) {
-      await page.keyboard.press('Control+=');
+      await waitForRender(page, async () => {
+        await page.keyboard.press('Control+=');
+      });
     }
   });
 
@@ -257,7 +281,9 @@ test.describe('R-Group Label Tool', () => {
 
     await selectLeftPanelButton(LeftPanelButton.RectangleSelection, page);
     await page.getByText('R5').click();
-    await page.keyboard.press('Delete');
+    await waitForRender(page, async () => {
+      await page.keyboard.press('Delete');
+    });
   });
 
   test('Move Structure with R-Group label', async ({ page }) => {
@@ -364,7 +390,9 @@ test.describe('R-Group Label Tool', () => {
     await selectLeftPanelButton(LeftPanelButton.ChargePlus, page);
     await page.getByText('R8').click();
     await selectLeftPanelButton(LeftPanelButton.ChargeMinus, page);
-    await page.getByText('R13').click();
+    await waitForRender(page, async () => {
+      await page.getByText('R13').click();
+    });
   });
 
   test('Add Bond to the R-Group Label', async ({ page }) => {

diff --git a/...autotests/tests/test-data/Molfiles-V2000/chloro-ethylamino-dimethyl-propoxy-propan-ol.mol b/...autotests/tests/test-data/Molfiles-V2000/chloro-ethylamino-dimethyl-propoxy-propan-ol.mol
@@ -0,0 +1,81 @@
+
+  Ketcher  7102316352D 1   1.00000     0.00000     0
+
+ 36 40  0  0  0  0  0  0  0  0999 V2000
+    3.3523    1.9354    0.0000 C   0  0  0  0  0  0  0  0  0  0  0  0
+    3.3523    1.1104    0.0000 C   0  0  0  0  0  0  0  0  0  0  0  0
+    2.6378    0.6979    0.0000 C   0  0  0  0  0  0  0  0  0  0  0  0
+    1.9233    1.1104    0.0000 C   0  0  0  0  0  0  0  0  0  0  0  0
+    1.1387    0.8555    0.0000 N   0  0  0  0  0  0  0  0  0  0  0  0
+    0.6538    1.5229    0.0000 C   0  0  0  0  0  0  0  0  0  0  0  0
+    1.1387    2.1904    0.0000 C   0  0  0  0  0  0  0  0  0  0  0  0
+    0.8838    2.9750    0.0000 C   0  0  0  0  0  0  0  0  0  0  0  0
+    0.0768    3.1465    0.0000 C   0  0  0  0  0  0  0  0  0  0  0  0
+   -0.1781    3.9312    0.0000 C   0  0  0  0  0  0  0  0  0  0  0  0
+    0.3739    4.5442    0.0000 N   0  0  0  0  0  0  0  0  0  0  0  0
+    0.1190    5.3289    0.0000 C   0  0  0  0  0  0  0  0  0  0  0  0
+    0.6710    5.9420    0.0000 C   0  0  0  0  0  0  0  0  0  0  0  0
+    0.4161    6.7266    0.0000 C   0  0  0  0  0  0  0  0  0  0  0  0
+    0.9681    7.3397    0.0000 C   0  0  0  0  0  0  0  0  0  0  0  0
+    1.7751    7.1682    0.0000 C   0  0  0  0  0  0  0  0  0  0  0  0
+    2.0300    6.3835    0.0000 C   0  0  0  0  0  0  0  0  0  0  0  0
+    1.4780    5.7704    0.0000 C   0  0  0  0  0  0  0  0  0  0  0  0
+    2.3271    7.7812    0.0000 N   0  0  0  0  0  0  0  0  0  0  0  0
+    2.0722    8.5659    0.0000 C   0  0  0  0  0  0  0  0  0  0  0  0
+    1.2652    8.7374    0.0000 O   0  0  0  0  0  0  0  0  0  0  0  0
+    2.6242    9.1790    0.0000 C   0  0  0  0  0  0  0  0  0  0  0  0
+    2.3693    9.9636    0.0000 C   0  0  0  0  0  0  0  0  0  0  0  0
+    2.9213   10.5767    0.0000 C   0  0  0  0  0  0  0  0  0  0  0  0
+    2.6663   11.3613    0.0000 C   0  0  0  0  0  0  0  0  0  0  0  0
+    3.2184   11.9744    0.0000 C   0  0  0  0  0  0  0  0  0  0  0  0
+    4.0253   11.8029    0.0000 C   0  0  0  0  0  0  0  0  0  0  0  0
+    4.5774   12.4160    0.0000 Cl  0  0  0  0  0  0  0  0  0  0  0  0
+    4.2803   11.0182    0.0000 C   0  0  0  0  0  0  0  0  0  0  0  0
+    5.0873   10.8467    0.0000 Cl  0  0  0  0  0  0  0  0  0  0  0  0
+    3.7283   10.4052    0.0000 C   0  0  0  0  0  0  0  0  0  0  0  0
+    1.1809    4.3727    0.0000 C   0  0  0  0  0  0  0  0  0  0  0  0
+    1.4358    3.5881    0.0000 C   0  0  0  0  0  0  0  0  0  0  0  0
+    1.9233    1.9354    0.0000 C   0  0  0  0  0  0  0  0  0  0  0  0
+    2.6378    2.3479    0.0000 C   0  0  0  0  0  0  0  0  0  0  0  0
+    4.0668    2.3479    0.0000 R   0  0  0  0  0  0  0  0  0  0  0  0
+  1  2  2  0     0  0
+  2  3  1  0     0  0
+  3  4  2  0     0  0
+  4  5  1  0     0  0
+  5  6  1  0     0  0
+  6  7  2  0     0  0
+  7  8  1  0     0  0
+  8  9  1  0     0  0
+  9 10  1  0     0  0
+ 10 11  1  0     0  0
+ 11 12  1  0     0  0
+ 12 13  1  0     0  0
+ 13 14  1  0     0  0
+ 14 15  1  0     0  0
+ 15 16  1  0     0  0
+ 16 17  1  0     0  0
+ 17 18  1  0     0  0
+ 13 18  1  0     0  0
+ 16 19  1  0     0  0
+ 19 20  1  0     0  0
+ 20 21  2  0     0  0
+ 20 22  1  0     0  0
+ 22 23  2  0     0  0
+ 23 24  1  0     0  0
+ 24 25  2  0     0  0
+ 25 26  1  0     0  0
+ 26 27  2  0     0  0
+ 27 28  1  0     0  0
+ 27 29  1  0     0  0
+ 29 30  1  0     0  0
+ 29 31  2  0     0  0
+ 24 31  1  0     0  0
+ 11 32  1  0     0  0
+ 32 33  1  0     0  0
+  8 33  1  0     0  0
+  7 34  1  0     0  0
+  4 34  1  0     0  0
+ 34 35  2  0     0  0
+  1 35  1  0     0  0
+ 36  1  1  0     0  0
+M  END
diff --git a/ketcher-autotests/tests/utils/canvas/helpers.ts b/ketcher-autotests/tests/utils/canvas/helpers.ts
@@ -6,9 +6,10 @@ import {
 } from '@playwright/test';
 import { clickInTheMiddleOfTheScreen, pressButton } from '@utils/clicks';
 import { ELEMENT_TITLE } from './types';
-import { DELAY_IN_SECONDS, TopPanelButton } from '..';
+import { DELAY_IN_SECONDS, TopPanelButton, waitForRender } from '..';
 import { selectTopPanelButton } from './tools';
 import { getLeftTopBarSize } from './common/getLeftTopBarSize';
+import { emptyFunction } from '@utils/common/helpers';
 
 export async function drawBenzeneRing(page: Page) {
   await page.getByRole('button', { name: 'Benzene (T)' }).click();
@@ -80,8 +81,9 @@ export async function takeEditorScreenshot(
   page: Page,
   options?: { masks?: Locator[] },
 ) {
+  const maxTimeout = 3000;
   const editor = page.getByTestId('ketcher-canvas').first();
-  await delay(DELAY_IN_SECONDS.THREE);
+  await waitForRender(page, emptyFunction, maxTimeout);
   await expect(editor).toHaveScreenshot({ mask: options?.masks });
 }
 

diff --git a/ketcher-autotests/tests/utils/common/helpers.ts b/ketcher-autotests/tests/utils/common/helpers.ts
@@ -0,0 +1,2 @@
+// eslint-disable-next-line @typescript-eslint/no-empty-function
+export async function emptyFunction() {}
diff --git a/ketcher-autotests/tests/utils/common/loaders/index.ts b/ketcher-autotests/tests/utils/common/loaders/index.ts
@@ -2,3 +2,4 @@ export { waitForLoad } from './waitForLoad/waitForLoad';
 export { waitForKetcherInit } from './waitForKetcherInit/waitForKetcherInit';
 export { waitForSpinnerFinishedWork } from './waitForSpinnerFinishedWork/waitForSpinnerFinishedWork';
 export { waitForIndigoToLoad } from './waitForIndigoToLoad';
+export { waitForRender } from './waitForRender';
diff --git a/ketcher-autotests/tests/utils/common/loaders/waitForRender.ts b/ketcher-autotests/tests/utils/common/loaders/waitForRender.ts
@@ -0,0 +1,38 @@
+import { Page } from '@playwright/test';
+
+type AnyFunction = (...args: any) => Promise<any>;
+
+export const waitForRender = async (
+  page: Page,
+  callback: AnyFunction,
+  timeout?: number,
+) => {
+  await Promise.all([
+    waitForCustomEvent(page, 'renderComplete', timeout),
+    callback(),
+  ]);
+};
+
+async function waitForCustomEvent(
+  page: Page,
+  eventName: string,
+  timeout?: number,
+) {
+  return page.evaluate(
+    async ({ eventName, timeout }: { eventName: string; timeout?: number }) => {
+      return new Promise((resolve) => {
+        window.addEventListener(
+          eventName,
+          () => {
+            resolve(true);
+          },
+          { once: true },
+        );
+        if (timeout) {
+          setTimeout(() => resolve(true), timeout);
+        }
+      });
+    },
+    { eventName, timeout },
+  );
+}
diff --git a/ketcher-autotests/tests/utils/files/readFile.ts b/ketcher-autotests/tests/utils/files/readFile.ts
@@ -9,6 +9,7 @@ import {
   waitForLoad,
   delay,
   takeEditorScreenshot,
+  waitForRender,
 } from '@utils';
 import { MolfileFormat } from 'ketcher-core';
 import { getSmiles, getInchi } from '@utils/formats';
@@ -40,7 +41,9 @@ export async function openFileAndAddToCanvas(filename: string, page: Page) {
   await waitForLoad(page, async () => {
     await pressButton(page, 'Add to Canvas');
   });
-  await clickInTheMiddleOfTheScreen(page);
+  await waitForRender(page, async () => {
+    await clickInTheMiddleOfTheScreen(page);
+  });
 }
 
 export async function pasteFromClipboardAndAddToCanvas(

diff --git a/packages/ketcher-core/src/application/render/restruct/reatom.ts b/packages/ketcher-core/src/application/render/restruct/reatom.ts
@@ -705,10 +705,12 @@ function buildLabel(
   options: any,
 ): ElemAttr {
   // eslint-disable-line max-statements
-  let label: any = {};
+  const label: any = {};
   label.text = getLabelText(atom.a);
 
-  if (label.text === '') label = 'R#'; // for structures that missed 'M  RGP' tag in molfile
+  if (!label.text) {
+    label.text = 'R#';
+  }
 
   if (label.text === atom.a.label) {
     const element = Elements.get(label.text);
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		// eslint-disable-next-line @typescript-eslint/no-empty-function
		export async function emptyFunction() {}