#4876 - Take care of unstable tests, switch to Flex mode by default (#…

…4877)

* Few fixes for unstable tests
* Operation that comes before copy/cut operations wrapped onto waitForSpinnerWork

ketcher-autotests/constants/testIdConstants.ts

@@ -9,6 +9,7 @@ const SUGAR = 'rna-builder-slot--sugar';
 const BASE = 'rna-builder-slot--base';
 const PHOSPHATE = 'rna-builder-slot--phosphate';
 const BUTTON__ADD_TO_PRESETS = 'add-to-presets-btn';
+const LAYOUT_TOGGLER = 'layout-mode';
 
 export {
   PEPTIDES_TAB,
@@ -22,4 +23,5 @@ export {
   BASE,
   PHOSPHATE,
   BUTTON__ADD_TO_PRESETS,
+  LAYOUT_TOGGLER,
 };

ketcher-autotests/tests/Macromolecule-editor/Import-Saving-Files/import-saving-mol.spec.ts

@@ -21,6 +21,7 @@ import {
   selectSnakeLayoutModeTool,
   turnOnMicromoleculesEditor,
   selectClearCanvasTool,
+  delay,
 } from '@utils';
 import {
   chooseFileFormat,
@@ -334,6 +335,8 @@ test.describe('Import-Saving .mol Files', () => {
     await openFile(filename, page);
     await selectOptionInDropdown(filename, page);
     await pressButton(page, 'Add to Canvas');
+    // Experimental delay - must be removed after waitForSpinnerFinishedWork refactor
+    await delay(2);
     await takeEditorScreenshot(page);
 
     // Closing page since test expects it to have closed at the end

ketcher-autotests/tests/Structure-Creating-&-Editing/Bond-Tool/all-bonds.spec.ts

@@ -42,7 +42,6 @@ import {
   cutToClipboardByKeyboard,
   copyToClipboardByKeyboard,
   pasteFromClipboardByKeyboard,
-  delay,
 } from '@utils';
 import { getAtomByIndex } from '@utils/canvas/atoms';
 import {
@@ -269,6 +268,67 @@ test.describe(`Bond tool:`, () => {
       expect(editedChainRedoTwice).toEqual(chainSizeAfterMultipleEditing);
     });
 
+    test(`Check highlight absence after ${bondToolKey} Bond creation`, async () => {
+      /**
+       *  Test cases: EPMLSOPKET-1374, 1382, 1391, 1397, 1405, 1411, 1417, 1423, 1429, 1438, 1445, 1452, 2239, 2245
+       */
+      await selectNestedTool(page, BondTool[bondToolKey]);
+      await clickInTheMiddleOfTheScreen(page);
+    });
+
+    test.describe('Saving and rendering', () => {
+      /**
+       *   Test cases: EPMLSOPKET-1378, 1386, 1395, 1401, 1409, 1415, 1421, 1427, 1433, 1442, 1449, 1456, 2243, 2249
+       */
+      const fileName = `Molfiles-V2000/saving-and-rendering-${bondToolKey}-bond.mol`;
+      test(`${bondToolKey}: Save to file`, async () => {
+        await selectDropdownTool(page, 'bonds', BondTool[bondToolKey][1]);
+        await clickOnTheCanvas(page, -200, 0);
+        await clickInTheMiddleOfTheScreen(page);
+        await selectTopPanelButton(TopPanelButton.Save, page);
+        await page.getByRole('button', { name: 'Save', exact: true }).click();
+      });
+
+      test(`${bondToolKey}: Open and edit`, async () => {
+        await openFileAndAddToCanvas(fileName, page);
+        await selectLeftPanelButton(LeftPanelButton.ReactionPlusTool, page);
+        await clickOnTheCanvas(page, 200, 0);
+      });
+    });
+
+    test(`Check that ${bondToolKey} bond between atoms are centered and drawn symmetrically`, async () => {
+      /**
+       *Test case: EPMLSOPKET-16931
+       *Description: Check that Bonds between atoms are centered and drawn symmetrically
+       */
+      await selectNestedTool(page, BondTool[bondToolKey]);
+      await clickInTheMiddleOfTheScreen(page);
+    });
+  }
+});
+
+test.describe(`Bond tool (copy-paste):`, () => {
+  test.describe.configure({ mode: 'serial' });
+  let page: Page;
+
+  test.beforeAll(async ({ browser }) => {
+    page = await browser.newPage();
+    await page.goto('', { waitUntil: 'domcontentloaded' });
+    await waitForKetcherInit(page);
+    await waitForIndigoToLoad(page);
+  });
+
+  test.beforeEach(async () => {
+    await selectAction(TopPanelButton.Clear, page);
+  });
+
+  test.afterAll(async () => {
+    await page.close();
+  });
+
+  for (const bondToolKey of Object.keys(BondTool)) {
+    let point: { x: number; y: number };
+
     // TODO:
     test(
       `Manipulations with ${bondToolKey}`,
@@ -299,11 +359,11 @@ test.describe(`Bond tool:`, () => {
           reactingCenterStatus: 0,
         });
 
-        await page.mouse.click(point.x, point.y);
+        await waitForRender(page, async () => {
+          await page.mouse.click(point.x, point.y);
+        });
 
         await copyToClipboardByKeyboard(page);
-        // Experimental delay - must be removed after waitForSpinnerFinishedWork refactor
-        delay(2);
         await pasteFromClipboardByKeyboard(page);
 
         await waitForRender(page, async () => {
@@ -315,8 +375,6 @@ test.describe(`Bond tool:`, () => {
 
         await clickInTheMiddleOfTheScreen(page);
         await cutToClipboardByKeyboard(page);
-        // Experimental delay - must be removed after waitForSpinnerFinishedWork refactor
-        delay(2);
         await pasteFromClipboardByKeyboard(page);
         await page.mouse.click(point.x + DELTA_X, point.y);
         await waitForRender(page, async () => {
@@ -345,45 +403,10 @@ test.describe(`Bond tool:`, () => {
         await waitForRender(page, async () => {
           await page.mouse.click(point.x, point.y);
         });
+
+        await takeEditorScreenshot(page);
       },
     );
-
-    test(`Check highlight absence after ${bondToolKey} Bond creation`, async () => {
-      /**
-       *  Test cases: EPMLSOPKET-1374, 1382, 1391, 1397, 1405, 1411, 1417, 1423, 1429, 1438, 1445, 1452, 2239, 2245
-       */
-      await selectNestedTool(page, BondTool[bondToolKey]);
-      await clickInTheMiddleOfTheScreen(page);
-    });
-
-    test.describe('Saving and rendering', () => {
-      /**
-       *   Test cases: EPMLSOPKET-1378, 1386, 1395, 1401, 1409, 1415, 1421, 1427, 1433, 1442, 1449, 1456, 2243, 2249
-       */
-      const fileName = `Molfiles-V2000/saving-and-rendering-${bondToolKey}-bond.mol`;
-      test(`${bondToolKey}: Save to file`, async () => {
-        await selectDropdownTool(page, 'bonds', BondTool[bondToolKey][1]);
-        await clickOnTheCanvas(page, -200, 0);
-        await clickInTheMiddleOfTheScreen(page);
-        await selectTopPanelButton(TopPanelButton.Save, page);
-        await page.getByRole('button', { name: 'Save', exact: true }).click();
-      });
-
-      test(`${bondToolKey}: Open and edit`, async () => {
-        await openFileAndAddToCanvas(fileName, page);
-        await selectLeftPanelButton(LeftPanelButton.ReactionPlusTool, page);
-        await clickOnTheCanvas(page, 200, 0);
-      });
-    });
-
-    test(`Check that ${bondToolKey} bond between atoms are centered and drawn symmetrically`, async () => {
-      /**
-       *Test case: EPMLSOPKET-16931
-       *Description: Check that Bonds between atoms are centered and drawn symmetrically
-       */
-      await selectNestedTool(page, BondTool[bondToolKey]);
-      await clickInTheMiddleOfTheScreen(page);
-    });
   }
 });
 

ketcher-autotests/tests/Templates/Template-Manipulations/Template-manipulations.spec.ts

@@ -47,6 +47,8 @@ import {
   cutToClipboardByKeyboard,
   pasteFromClipboardByKeyboard,
   copyToClipboardByKeyboard,
+  waitForRender,
+  selectRingButton,
 } from '@utils';
 import { getRotationHandleCoordinates } from '@utils/clicks/selectButtonByTitle';
 import { getMolfile, getRxn } from '@utils/formats';
@@ -612,20 +614,20 @@ test.describe('Open Ketcher', () => {
     Verify if merging these Templates after clicking matches the full preview of merging these Templates"
     */
       const xOffsetFromCenter = 40;
-      await page.getByTestId('template-0').hover();
-      await page.getByTestId('template-0').click();
-      await moveMouseToTheMiddleOfTheScreen(page);
+      await selectRingButton(RingButton.Benzene, page);
       await clickOnTheCanvas(page, xOffsetFromCenter, 0);
-      await page.getByTestId('select-rectangle').click();
+      await selectLeftPanelButton(LeftPanelButton.RectangleSelection, page);
       await takePageScreenshot(page);
-      await page.getByTestId('select-rectangle').click();
-      await page.keyboard.press('Control+a');
+
+      await waitForRender(page, async () => {
+        await page.keyboard.press('Control+a');
+      });
       await cutToClipboardByKeyboard(page);
       await pasteFromClipboardByKeyboard(page);
+      await clickOnTheCanvas(page, xOffsetFromCenter, 0);
+      await selectRingButton(RingButton.Benzene, page);
       await clickInTheMiddleOfTheScreen(page);
-      await page.getByTestId('template-0').click();
-      await page.getByTestId('canvas').click();
-      await page.getByTestId('template-0').click();
+      await selectRingButton(RingButton.Benzene, page);
       await takePageScreenshot(page);
     },
   );

ketcher-autotests/tests/utils/canvas/helpers.ts

@@ -409,7 +409,9 @@ export async function copyToClipboardByKeyboard(
       }
     | undefined,
 ) {
-  const modifier = getControlModifier();
+  const modifier = await getControlModifier();
+  // await delay(10);
+  // await page.keyboard.press(`${modifier}+KeyC`, options);
   await waitForSpinnerFinishedWork(
     page,
     async () => await page.keyboard.press(`${modifier}+KeyC`, options),

ketcher-autotests/tests/utils/canvas/tools/helpers.ts

@@ -98,7 +98,7 @@ export async function switchSequenceEnteringType(
 
 export async function selectFlexLayoutModeTool(page: Page) {
   await openLayoutModeMenu(page);
-  const flexModeButton = page.getByTestId('flex-layout-mode');
+  const flexModeButton = page.getByTestId('flex-layout-mode').first();
 
   await flexModeButton.waitFor({ state: 'visible' });
   await flexModeButton.click();

ketcher-autotests/tests/utils/macromolecules/index.ts

@@ -3,9 +3,11 @@ import {
   MACROMOLECULES_MODE,
   MOLECULES_MODE,
   POLYMER_TOGGLER,
+  LAYOUT_TOGGLER,
 } from '@constants/testIdConstants';
 import {
   moveMouseToTheMiddleOfTheScreen,
+  selectFlexLayoutModeTool,
   waitForSpinnerFinishedWork,
 } from '@utils';
 
@@ -14,6 +16,8 @@ export async function turnOnMacromoleculesEditor(page: Page) {
   await page.getByTestId(POLYMER_TOGGLER).click();
   await expect(page.getByTestId(MACROMOLECULES_MODE)).toBeVisible();
   await page.getByTestId(MACROMOLECULES_MODE).click();
+  await expect(page.getByTestId(LAYOUT_TOGGLER)).toBeVisible();
+  await selectFlexLayoutModeTool(page);
 }
 
 export async function turnOnMicromoleculesEditor(page: Page) {