Autotests: #5951 - autotests zoom in macromolecules mode should be in relation to the top left corner of the structures 1

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(