Autotests: #5951 - autotests zoom in macromolecules mode should be in…

… relation to the top left corner of the structures 1 (#6016)

* first test

* Verify that when zooming in/zooming out by buttons, the zoom is relative to the top left corner of the most top and left monomer in the sequence

* Verify that when zooming in/zooming out by buttons, the zoom is relative to the top left corner of the most top and left monomer in the sequence (Flex mode)
Verify that when zooming in/zooming out by buttons, the zoom is relative to the top left corner of the most top and left monomer in the sequence(Snake mode)
Verify that when zooming in/zooming out by buttons, the zoom is relative to the top left corner of the most top and left monomer in the sequence(Sequence m)
Ensure that the zoom behavior works correctly with large sequences where the top left monomer is off-screen before zooming

* Test the zoom-in/zoom-out function using hotkeys (Ctrl+ for zoom in and Ctrl- for zoom out ) and ensure that the zoom focus is correct (Flex mode)
Test the zoom-in/zoom-out function using hotkeys (Ctrl+ for zoom in and Ctrl- for zoom out ) and ensure that the zoom focus is correct (Snake mode)
Test the zoom-in/zoom-out function using hotkeys (Ctrl+ for zoom in and Ctrl- for zoom out ) and ensure that the zoom focus is correct (Sequence mode)

* Last fix

* Autotests: #5951 - Zoom in macromolecules mode should be in relation to the top left corner of the structures

ketcher-autotests/tests/Macromolecule-editor/Zoom-Tool/zoom-tool.spec.ts

@@ -12,6 +12,11 @@ import {
   MacromoleculesTopPanelButton,
   moveMouseAway,
   selectMacroBond,
+  pasteFromClipboardAndAddToMacromoleculesCanvas,
+  MacroFileType,
+  selectSequenceLayoutModeTool,
+  selectSnakeLayoutModeTool,
+  selectFlexLayoutModeTool,
 } from '@utils';
 import { MacroBondTool } from '@utils/canvas/tools/selectNestedTool/types';
 import {
@@ -40,7 +45,6 @@ test.beforeAll(async ({ browser }) => {
 });
 
 test.afterEach(async () => {
-  await takeEditorScreenshot(page);
   await page.keyboard.press('Control+0');
   await selectClearCanvasTool(page);
 });
@@ -97,6 +101,7 @@ test.describe('Zoom Tool', () => {
     await selectTool(MacromoleculesTopPanelButton.ZoomOut, page);
     await clickInTheMiddleOfTheScreen(page);
     await moveMouseAway(page);
+    await takeEditorScreenshot(page);
   });
 
   test('Zoom In & Out monomer with mouse wheel and CTRL', async () => {
@@ -108,6 +113,8 @@ test.describe('Zoom Tool', () => {
     await takeEditorScreenshot(page);
 
     await page.mouse.wheel(deltas.x, -deltas.y);
+
+    await takeEditorScreenshot(page);
   });
 
   test('Zoom In & Out attachment points with menu buttons', async () => {
@@ -130,6 +137,8 @@ test.describe('Zoom Tool', () => {
     await selectTool(MacromoleculesTopPanelButton.ZoomOut, page);
     await clickInTheMiddleOfTheScreen(page);
     await peptide.hover();
+
+    await takeEditorScreenshot(page);
   });
 
   test('Zoom In & Out attachment points with mouse wheel and CTRL', async () => {
@@ -145,6 +154,8 @@ test.describe('Zoom Tool', () => {
 
     await page.mouse.wheel(deltas.x, -deltas.y);
     await peptide.hover();
+
+    await takeEditorScreenshot(page);
   });
 
   test('Zoom In & Out bond with menu buttons', async () => {
@@ -174,6 +185,8 @@ test.describe('Zoom Tool', () => {
     await peptide.hover();
     await page.mouse.down();
     await page.mouse.move(bondCoordinates.x, bondCoordinates.y);
+
+    await takeEditorScreenshot(page);
   });
 
   test('Zoom In & Out bond with mouse wheel and CTRL', async () => {
@@ -196,6 +209,8 @@ test.describe('Zoom Tool', () => {
     await peptide.hover();
     await page.mouse.down();
     await page.mouse.move(bondCoordinates.x, bondCoordinates.y);
+
+    await takeEditorScreenshot(page);
   });
 
   test('Zoom In & Out selection rectangle with menu buttons', async () => {
@@ -238,6 +253,8 @@ test.describe('Zoom Tool', () => {
       selectionEnd.x,
       selectionEnd.y,
     );
+
+    await takeEditorScreenshot(page);
   });
 
   test('Zoom In & Out selection rectangle with mouse wheel and CTRL', async () => {
@@ -258,6 +275,8 @@ test.describe('Zoom Tool', () => {
     await takeEditorScreenshot(page);
 
     await zoomWithMouseWheel(page, -ZOOM_STEP);
+
+    await takeEditorScreenshot(page);
   });
 
   test('Scroll canvas by mouse wheel', async () => {
@@ -266,6 +285,8 @@ test.describe('Zoom Tool', () => {
     const deltaY = 750;
 
     await page.mouse.wheel(deltaX, deltaY);
+
+    await takeEditorScreenshot(page);
   });
 
   test('Scroll canvas horizontally with Shift pressed', async () => {
@@ -274,5 +295,275 @@ test.describe('Zoom Tool', () => {
     await page.keyboard.down('Shift');
     await page.mouse.wheel(0, wheelDelta);
     await page.keyboard.up('Shift');
+
+    await takeEditorScreenshot(page);
+  });
+
+  test('Verify that when zooming in/zooming out by buttons, the zoom is relative to the top left corner of the most top and left monomer in the sequence (Flex mode)', async () => {
+    /*
+     *  Test case: https://github.com/epam/ketcher/issues/5590
+     *  Description: Verify that when zooming in/zooming out by buttons, the zoom is relative to the top left
+     *               corner of the most top and left monomer in the sequence (in Flex mode)
+     *  Case:
+     *        1. Load canvas with monomer chains
+     *        2. Take screenshot to witness initial state
+     *        3. Zoom In using button 5 times
+     *        4. Take screenshot to witness the result
+     *        5. Reset Zoom to initial
+     *        6. Zoom Out using button 5 times
+     *        7. Take screenshot to witness the result
+     */
+    await selectClearCanvasTool(page);
+    await pasteFromClipboardAndAddToMacromoleculesCanvas(
+      page,
+      MacroFileType.HELM,
+      'PEPTIDE1{G.F.E.D.C.A}|PEPTIDE2{M.L.K.I.H}|PEPTIDE3{Q.P.O.N}|PEPTIDE4{T.S.R}|PEPTIDE5{V.U}|PEPTIDE6{W}$$$$V2.0',
+    );
+    await takeEditorScreenshot(page);
+
+    const numberOfZooms = 5;
+    await page.getByTestId('zoom-selector').click();
+    for (let i = 0; i < numberOfZooms; i++) {
+      await selectTool(MacromoleculesTopPanelButton.ZoomIn, page);
+    }
+    await takeEditorScreenshot(page);
+
+    await selectTool(MacromoleculesTopPanelButton.ZoomReset, page);
+    for (let i = 0; i < numberOfZooms; i++) {
+      await selectTool(MacromoleculesTopPanelButton.ZoomOut, page);
+    }
+    await takeEditorScreenshot(page);
+  });
+
+  test('Verify that when zooming in/zooming out by buttons, the zoom is relative to the top left corner of the most top and left monomer in the sequence(Snake mode)', async () => {
+    /*
+     *  Test case: https://github.com/epam/ketcher/issues/5590
+     *  Description: Verify that when zooming in/zooming out by buttons, the zoom is relative to the top left
+     *               corner of the most top and left monomer in the sequence (in Snake mode)
+     *  Case:
+     *        1. Load canvas with monomer chains
+     *        2. Switch to Snake mode
+     *        2. Take screenshot to witness initial state
+     *        3. Zoom In using button 5 times
+     *        4. Take screenshot to witness the result
+     *        5. Reset Zoom to initial
+     *        6. Zoom out using button 5 times
+     *        7. Take screenshot to witness the result
+     */
+    await selectClearCanvasTool(page);
+    await selectSnakeLayoutModeTool(page);
+    await pasteFromClipboardAndAddToMacromoleculesCanvas(
+      page,
+      MacroFileType.HELM,
+      'PEPTIDE1{G.F.E.D.C.A}|PEPTIDE2{M.L.K.I.H}|PEPTIDE3{Q.P.O.N}|PEPTIDE4{T.S.R}|PEPTIDE5{V.U}|PEPTIDE6{W}$$$$V2.0',
+    );
+    await takeEditorScreenshot(page);
+
+    const numberOfZooms = 5;
+    await page.getByTestId('zoom-selector').click();
+    for (let i = 0; i < numberOfZooms; i++) {
+      await selectTool(MacromoleculesTopPanelButton.ZoomIn, page);
+    }
+    await takeEditorScreenshot(page);
+
+    await selectTool(MacromoleculesTopPanelButton.ZoomReset, page);
+    for (let i = 0; i < numberOfZooms; i++) {
+      await selectTool(MacromoleculesTopPanelButton.ZoomOut, page);
+    }
+    await takeEditorScreenshot(page);
+
+    // await page.getByTestId('zoom-selector').click();
+    // await selectFlexLayoutModeTool(page);
+  });
+
+  test('Verify that when zooming in/zooming out by buttons, the zoom is relative to the top left corner of the most top and left monomer in the sequence(Sequence m)', async () => {
+    /*
+     *  Test case: https://github.com/epam/ketcher/issues/5590
+     *  Description: Verify that when zooming in/zooming out by buttons, the zoom is relative to the top left
+     *               corner of the most top and left monomer in the sequence (in Sequence mode)
+     *  Case:
+     *        1. Load canvas with monomer chains
+     *        2. Switch to Sequence mode
+     *        2. Take screenshot to witness initial state
+     *        3. Zoom In using button 5 times
+     *        4. Take screenshot to witness the result
+     *        5. Reset Zoom to initial
+     *        6. Zoom out using button 5 times
+     *        7. Take screenshot to witness the result
+     */
+    await selectClearCanvasTool(page);
+    await selectSequenceLayoutModeTool(page);
+    await pasteFromClipboardAndAddToMacromoleculesCanvas(
+      page,
+      MacroFileType.HELM,
+      'PEPTIDE1{G.F.E.D.C.A}|PEPTIDE2{M.L.K.I.H}|PEPTIDE3{Q.P.O.N}|PEPTIDE4{T.S.R}|PEPTIDE5{V.U}|PEPTIDE6{W}$$$$V2.0',
+    );
+    await takeEditorScreenshot(page);
+
+    const numberOfZooms = 5;
+    await page.getByTestId('zoom-selector').click();
+    for (let i = 0; i < numberOfZooms; i++) {
+      await selectTool(MacromoleculesTopPanelButton.ZoomIn, page);
+    }
+    await takeEditorScreenshot(page);
+
+    await selectTool(MacromoleculesTopPanelButton.ZoomReset, page);
+    for (let i = 0; i < numberOfZooms; i++) {
+      await selectTool(MacromoleculesTopPanelButton.ZoomOut, page);
+    }
+    await takeEditorScreenshot(page);
+
+    await page.keyboard.press('Escape');
+    await selectFlexLayoutModeTool(page);
   });
+
+  test('Ensure that the zoom behavior works correctly with large sequences where the top left monomer is off-screen before zooming', async () => {
+    /*
+     *  Test case: https://github.com/epam/ketcher/issues/5590
+     *  Description: Ensure that the zoom behavior works correctly with large sequences where
+     *               the top left monomer is off-screen before zooming (in Flex mode)
+     *  Case:
+     *        1. Load canvas with very long monomer chain
+     *        2. Take screenshot to witness initial state
+     *        3. Zoom In using button 5 times
+     *        4. Take screenshot to witness the result
+     *        5. Reset Zoom to initial
+     *        6. Zoom Out using button 5 times
+     *        7. Take screenshot to witness the result
+     */
+    await selectClearCanvasTool(page);
+    await pasteFromClipboardAndAddToMacromoleculesCanvas(
+      page,
+      MacroFileType.HELM,
+      'PEPTIDE1{G.F.E.D.C.A.M.L.K.I.H.Q.P.O.N.T.S.R.V.U.W.G.F.E.D.C.A.M.L.K.I.H.Q.P.O.N.T.S.R.V.U.W}$$$$V2.0',
+    );
+    await takeEditorScreenshot(page);
+
+    const numberOfZooms = 5;
+    await page.getByTestId('zoom-selector').click();
+    for (let i = 0; i < numberOfZooms; i++) {
+      await selectTool(MacromoleculesTopPanelButton.ZoomIn, page);
+    }
+    await takeEditorScreenshot(page);
+
+    await selectTool(MacromoleculesTopPanelButton.ZoomReset, page);
+    for (let i = 0; i < numberOfZooms; i++) {
+      await selectTool(MacromoleculesTopPanelButton.ZoomOut, page);
+    }
+    await takeEditorScreenshot(page);
+
+    await page.keyboard.press('Escape');
+    await selectFlexLayoutModeTool(page);
+  });
+});
+
+test('Test the zoom-in/zoom-out function using hotkeys (Ctrl+ for zoom in and Ctrl- for zoom out ) and ensure that the zoom focus is correct (Flex mode)', async () => {
+  /*
+   *  Test case: https://github.com/epam/ketcher/issues/5590
+   *  Description: Test the zoom-in/zoom-out function using hotkeys (Ctrl+ for zoom in and Ctrl- for zoom out )
+   *               and ensure that the zoom focus is correct (in Flex mode)
+   *  Case:
+   *        1. Load canvas with monomer chains
+   *        2. Take screenshot to witness initial state
+   *        3. Zoom In using keyboard shortcut "Ctrl+=" 5 times
+   *        4. Take screenshot to witness the result
+   *        5. Reset Zoom to initial using keyboard shortcut "Ctrl+0"
+   *        6. Zoom Out using keyboard shortcut "Ctrl+-" 5 times
+   *        7. Take screenshot to witness the result
+   */
+  await selectClearCanvasTool(page);
+  await pasteFromClipboardAndAddToMacromoleculesCanvas(
+    page,
+    MacroFileType.HELM,
+    'PEPTIDE1{G.F.E.D.C.A}|PEPTIDE2{M.L.K.I.H}|PEPTIDE3{Q.P.O.N}|PEPTIDE4{T.S.R}|PEPTIDE5{V.U}|PEPTIDE6{W}$$$$V2.0',
+  );
+  await takeEditorScreenshot(page);
+
+  const numberOfZooms = 5;
+  for (let i = 0; i < numberOfZooms; i++) {
+    await page.keyboard.press('Control+=');
+  }
+  await takeEditorScreenshot(page);
+
+  await page.keyboard.press('Control+0');
+  for (let i = 0; i < numberOfZooms; i++) {
+    await page.keyboard.press('Control+-');
+  }
+  await takeEditorScreenshot(page);
+});
+
+test('Test the zoom-in/zoom-out function using hotkeys (Ctrl+ for zoom in and Ctrl- for zoom out ) and ensure that the zoom focus is correct (Snake mode)', async () => {
+  /*
+   *  Test case: https://github.com/epam/ketcher/issues/5590
+   *  Description: Test the zoom-in/zoom-out function using hotkeys (Ctrl+ for zoom in and Ctrl- for zoom out )
+   *               and ensure that the zoom focus is correct (in Snake mode)
+   *  Case:
+   *        1. Load canvas with monomer chains
+   *        2. Switch to Snake mode
+   *        3. Take screenshot to witness initial state
+   *        4. Zoom In using keyboard shortcut "Ctrl+=" 5 times
+   *        5. Take screenshot to witness the result
+   *        6. Reset Zoom to initial using keyboard shortcut "Ctrl+0"
+   *        7. Zoom Out using keyboard shortcut "Ctrl+-" 5 times
+   *        8. Take screenshot to witness the result
+   */
+  await selectClearCanvasTool(page);
+  await selectSnakeLayoutModeTool(page);
+  await pasteFromClipboardAndAddToMacromoleculesCanvas(
+    page,
+    MacroFileType.HELM,
+    'PEPTIDE1{G.F.E.D.C.A}|PEPTIDE2{M.L.K.I.H}|PEPTIDE3{Q.P.O.N}|PEPTIDE4{T.S.R}|PEPTIDE5{V.U}|PEPTIDE6{W}$$$$V2.0',
+  );
+  await takeEditorScreenshot(page);
+
+  const numberOfZooms = 5;
+  for (let i = 0; i < numberOfZooms; i++) {
+    await page.keyboard.press('Control+=');
+  }
+  await takeEditorScreenshot(page);
+
+  await page.keyboard.press('Control+0');
+  for (let i = 0; i < numberOfZooms; i++) {
+    await page.keyboard.press('Control+-');
+  }
+  await takeEditorScreenshot(page);
+  await selectFlexLayoutModeTool(page);
+});
+
+test('Test the zoom-in/zoom-out function using hotkeys (Ctrl+ for zoom in and Ctrl- for zoom out ) and ensure that the zoom focus is correct (Sequence mode)', async () => {
+  /*
+   *  Test case: https://github.com/epam/ketcher/issues/5590
+   *  Description: Test the zoom-in/zoom-out function using hotkeys (Ctrl+ for zoom in and Ctrl- for zoom out )
+   *               and ensure that the zoom focus is correct (in Sequence mode)
+   *  Case:
+   *        1. Load canvas with monomer chains
+   *        2. Switch to Sequence mode
+   *        3. Take screenshot to witness initial state
+   *        4. Zoom In using keyboard shortcut "Ctrl+=" 5 times
+   *        5. Take screenshot to witness the result
+   *        6. Reset Zoom to initial using keyboard shortcut "Ctrl+0"
+   *        7. Zoom Out using keyboard shortcut "Ctrl+-" 5 times
+   *        8. Take screenshot to witness the result
+   */
+  await selectClearCanvasTool(page);
+  await selectSequenceLayoutModeTool(page);
+  await pasteFromClipboardAndAddToMacromoleculesCanvas(
+    page,
+    MacroFileType.HELM,
+    'PEPTIDE1{G.F.E.D.C.A}|PEPTIDE2{M.L.K.I.H}|PEPTIDE3{Q.P.O.N}|PEPTIDE4{T.S.R}|PEPTIDE5{V.U}|PEPTIDE6{W}$$$$V2.0',
+  );
+  await takeEditorScreenshot(page);
+
+  const numberOfZooms = 5;
+  for (let i = 0; i < numberOfZooms; i++) {
+    await page.keyboard.press('Control+=');
+  }
+  await takeEditorScreenshot(page);
+
+  await page.keyboard.press('Control+0');
+  for (let i = 0; i < numberOfZooms; i++) {
+    await page.keyboard.press('Control+-');
+  }
+  await takeEditorScreenshot(page);
+  await selectFlexLayoutModeTool(page);
 });

ketcher-autotests/tests/utils/files/readFile.ts

@@ -342,16 +342,16 @@ export async function pasteFromClipboardAndAddToMacromoleculesCanvas(
         .click();
       await page.getByText(PeptideType.threeLetterCode).click();
     }
+  }
 
-    await page.getByRole('dialog').getByRole('textbox').fill(fillStructure);
+  await page.getByRole('dialog').getByRole('textbox').fill(fillStructure);
 
-    if (!errorExpected) {
-      await waitForLoad(page, async () => {
-        await pressButton(page, 'Add to Canvas');
-      });
-    } else {
+  if (!errorExpected) {
+    await waitForLoad(page, async () => {
       await pressButton(page, 'Add to Canvas');
-    }
+    });
+  } else {
+    await pressButton(page, 'Add to Canvas');
   }
 }
 // export async function pasteFromClipboardAndAddToMacromoleculesCanvas2(