#2369 fix tests

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

@@ -6,7 +6,7 @@ import {
   selectRectangleSelectionTool,
   selectSingleBondTool,
   selectTool,
-  takePageScreenshot,
+  takeEditorScreenshot,
   waitForPageInit,
 } from '@utils';
 import { turnOnMacromoleculesEditor } from '@utils/macromolecules';
@@ -31,29 +31,32 @@ test.describe('Zoom Tool', () => {
     );
   });
 
+  test.afterEach(async ({ page }) => {
+    await takeEditorScreenshot(page);
+  });
+
   test('Zoom In & Out monomer with menu buttons', async ({ page }) => {
     await selectTool(LeftPanelButton.ZoomIn, page);
     await selectTool(LeftPanelButton.ZoomIn, page);
     await selectTool(LeftPanelButton.ZoomIn, page);
-    await takePageScreenshot(page);
+    await takeEditorScreenshot(page);
 
     await selectTool(LeftPanelButton.ZoomReset, page);
-    await takePageScreenshot(page);
+    await takeEditorScreenshot(page);
 
     await selectTool(LeftPanelButton.ZoomOut, page);
     await selectTool(LeftPanelButton.ZoomOut, page);
-    await takePageScreenshot(page);
   });
 
-  test('Zoom In & Out monomer with mouse wheel', async ({ page }) => {
+  test('Zoom In & Out monomer with mouse wheel and CTRL', async ({ page }) => {
+    await page.keyboard.down('Control');
     await page.mouse.wheel(deltas.x, deltas.y);
-    await takePageScreenshot(page);
+    await takeEditorScreenshot(page);
 
     await page.mouse.wheel(deltas.x, -deltas.y);
-    await takePageScreenshot(page);
+    await takeEditorScreenshot(page);
 
     await page.mouse.wheel(deltas.x, -deltas.y);
-    await takePageScreenshot(page);
   });
 
   test('Zoom In & Out attachment points with menu buttons', async ({
@@ -63,31 +66,32 @@ test.describe('Zoom Tool', () => {
     await selectTool(LeftPanelButton.ZoomIn, page);
     await selectSingleBondTool(page);
     await peptide.hover();
-    await takePageScreenshot(page);
+    await takeEditorScreenshot(page);
 
     await selectTool(LeftPanelButton.ZoomReset, page);
     await peptide.hover();
-    await takePageScreenshot(page);
+    await takeEditorScreenshot(page);
 
     await selectTool(LeftPanelButton.ZoomOut, page);
     await selectTool(LeftPanelButton.ZoomOut, page);
     await peptide.hover();
-    await takePageScreenshot(page);
   });
 
-  test('Zoom In & Out attachment points with mouse wheel', async ({ page }) => {
+  test('Zoom In & Out attachment points with mouse wheel and CTRL', async ({
+    page,
+  }) => {
+    await page.keyboard.down('Control');
     await page.mouse.wheel(deltas.x, deltas.y);
     await selectSingleBondTool(page);
     await peptide.hover();
-    await takePageScreenshot(page);
+    await takeEditorScreenshot(page);
 
     await page.mouse.wheel(deltas.x, -deltas.y);
     await peptide.hover();
-    await takePageScreenshot(page);
+    await takeEditorScreenshot(page);
 
     await page.mouse.wheel(deltas.x, -deltas.y);
     await peptide.hover();
-    await takePageScreenshot(page);
   });
 
   test('Zoom In & Out bond with menu buttons', async ({ page }) => {
@@ -98,42 +102,41 @@ test.describe('Zoom Tool', () => {
     await peptide.hover();
     await page.mouse.down();
     await page.mouse.move(bondCoordinates.x, bondCoordinates.y);
-    await takePageScreenshot(page);
+    await takeEditorScreenshot(page);
 
     await selectTool(LeftPanelButton.ZoomReset, page);
     await peptide.hover();
     await page.mouse.down();
     await page.mouse.move(bondCoordinates.x, bondCoordinates.y);
-    await takePageScreenshot(page);
+    await takeEditorScreenshot(page);
 
     await selectTool(LeftPanelButton.ZoomOut, page);
     await selectTool(LeftPanelButton.ZoomOut, page);
     await peptide.hover();
     await page.mouse.down();
     await page.mouse.move(bondCoordinates.x, bondCoordinates.y);
-    await takePageScreenshot(page);
   });
 
-  test('Zoom In & Out bond with mouse wheel', async ({ page }) => {
+  test('Zoom In & Out bond with mouse wheel and CTRL', async ({ page }) => {
+    await page.keyboard.down('Control');
     const bondCoordinates = { x: 400, y: 400 };
     await page.mouse.wheel(deltas.x, deltas.y);
     await selectSingleBondTool(page);
     await peptide.hover();
     await page.mouse.down();
     await page.mouse.move(bondCoordinates.x, bondCoordinates.y);
-    await takePageScreenshot(page);
+    await takeEditorScreenshot(page);
 
     await page.mouse.wheel(deltas.x, -deltas.y);
     await peptide.hover();
     await page.mouse.down();
     await page.mouse.move(bondCoordinates.x, bondCoordinates.y);
-    await takePageScreenshot(page);
+    await takeEditorScreenshot(page);
 
     await page.mouse.wheel(deltas.x, -deltas.y);
     await peptide.hover();
     await page.mouse.down();
     await page.mouse.move(bondCoordinates.x, bondCoordinates.y);
-    await takePageScreenshot(page);
   });
 
   test('Zoom In & Out selection rectangle with menu buttons', async ({
@@ -151,7 +154,7 @@ test.describe('Zoom Tool', () => {
       selectionEnd.x,
       selectionEnd.y,
     );
-    await takePageScreenshot(page);
+    await takeEditorScreenshot(page);
 
     await selectTool(LeftPanelButton.ZoomReset, page);
     await selectRectangleArea(
@@ -161,7 +164,7 @@ test.describe('Zoom Tool', () => {
       selectionEnd.x,
       selectionEnd.y,
     );
-    await takePageScreenshot(page);
+    await takeEditorScreenshot(page);
 
     await selectTool(LeftPanelButton.ZoomOut, page);
     await selectTool(LeftPanelButton.ZoomOut, page);
@@ -172,12 +175,12 @@ test.describe('Zoom Tool', () => {
       selectionEnd.x,
       selectionEnd.y,
     );
-    await takePageScreenshot(page);
   });
 
-  test('Zoom In & Out selection rectangle with mouse wheel', async ({
+  test('Zoom In & Out selection rectangle with mouse wheel and CTRL', async ({
     page,
   }) => {
+    await page.keyboard.down('Control');
     const selectionStart = { x: 200, y: 200 };
     const selectionEnd = { x: 400, y: 400 };
     await page.mouse.wheel(deltas.x, deltas.y);
@@ -189,7 +192,7 @@ test.describe('Zoom Tool', () => {
       selectionEnd.x,
       selectionEnd.y,
     );
-    await takePageScreenshot(page);
+    await takeEditorScreenshot(page);
 
     await page.mouse.wheel(deltas.x, -deltas.y);
     await selectRectangleArea(
@@ -199,7 +202,7 @@ test.describe('Zoom Tool', () => {
       selectionEnd.x,
       selectionEnd.y,
     );
-    await takePageScreenshot(page);
+    await takeEditorScreenshot(page);
 
     await page.mouse.wheel(deltas.x, -deltas.y);
     await selectRectangleArea(
@@ -209,6 +212,21 @@ test.describe('Zoom Tool', () => {
       selectionEnd.x,
       selectionEnd.y,
     );
-    await takePageScreenshot(page);
+  });
+
+  test('Scroll canvas by mouse wheel', async ({ page }) => {
+    await takeEditorScreenshot(page);
+    const deltaX = 900;
+    const deltaY = 750;
+
+    await page.mouse.wheel(deltaX, deltaY);
+  });
+
+  test('Scroll canvas horizontally with `Shift` pressed', async ({ page }) => {
+    const wheelDelta = 100;
+
+    await page.keyboard.down('Shift');
+    await page.mouse.wheel(0, wheelDelta);
+    await page.keyboard.up('Shift');
   });
 });

packages/ketcher-core/__tests__/application/editor/shared/coordinates.test.ts

@@ -6,7 +6,7 @@ import { DrawingEntitiesManager } from 'domain/entities/DrawingEntitiesManager';
 
 describe('Coordinates', () => {
   const position = new Vec2(100, 100, 0);
-  ZoomTool.getInstance(new DrawingEntitiesManager());
+  ZoomTool.initInstance(new DrawingEntitiesManager());
   ZoomTool.instance.setZoomTransform(new ZoomTransform(1.2, 40, 40));
 
   it('should convert page coordinates to model coordinates', () => {

packages/ketcher-core/__tests__/application/editor/tools/ZoomTool.test.ts

@@ -15,39 +15,52 @@ describe('Zoom Tool', () => {
       height: 30,
     });
     canvas = createPolymerEditorCanvas();
+    Object.defineProperty(canvas, 'width', {
+      value: {
+        baseVal: {
+          value: 100,
+        },
+      },
+    });
+    Object.defineProperty(canvas, 'height', {
+      value: {
+        baseVal: {
+          value: 100,
+        },
+      },
+    });
     button = document.createElement('button');
     button.setAttribute('class', 'zoom-in');
     document.body.appendChild(button);
   });
 
   ['zoom-in', 'zoom-out', 'zoom-reset'].forEach((name) => {
     it(`should zoom in when press element with class name ${name}`, () => {
-      jest
-        .spyOn(ZoomTool.prototype, 'subscribeMenuZoom')
-        .mockImplementation(() => {
-          select(`.${name}`).on('click', zoomed);
-        });
-      const editor: CoreEditor = new CoreEditor({
+      jest.spyOn(ZoomTool.prototype, 'initMenuZoom').mockImplementation(() => {
+        select(`.${name}`).on('click', zoomed);
+      });
+      // eslint-disable-next-line no-new
+      new CoreEditor({
         theme: polymerEditorTheme,
         canvas,
       });
-      editor.zoomTool.subscribeMenuZoom();
       const zoomInBtn = document.getElementsByClassName(`${name}`)[0];
       zoomInBtn?.dispatchEvent(new MouseEvent('click'));
       expect(zoomed).toHaveBeenCalled();
     });
   });
 
-  it('should zoom in when scrool mouse wheel up', () => {
+  it('should zoom in when scroll mouse wheel up and press CTRL', () => {
     jest.spyOn(ZoomTool.prototype, 'zoomAction').mockImplementation(zoomed);
 
-    const editor: CoreEditor = new CoreEditor({
+    // eslint-disable-next-line no-new
+    new CoreEditor({
       theme: polymerEditorTheme,
       canvas,
     });
-    editor.zoomTool.subscribeMenuZoom();
-    window.dispatchEvent(new WheelEvent('wheel'));
-    window.dispatchEvent(new KeyboardEvent('keydown', { keyCode: 27 }));
+    canvas.dispatchEvent(
+      new WheelEvent('wheel', { deltaY: 60, ctrlKey: true }),
+    );
     expect(zoomed).toHaveBeenCalled();
   });
 });