#2369 update tests

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

@@ -14,6 +14,7 @@ const MONOMER_NAME_TZA = 'C___Cysteine';
 const MONOMER_ALIAS_TZA = 'C';
 
 test.describe('Zoom Tool', () => {
+  const deltas = { x: 0, y: 200 };
   const peptideCoordinates = { x: 300, y: 300 };
   let peptide: Locator;
   test.beforeEach(async ({ page }) => {
@@ -29,34 +30,66 @@ test.describe('Zoom Tool', () => {
     );
   });
 
-  test('Zoom In & Out monomer', async ({ 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 selectTool(LeftPanelButton.ZoomReset, page);
+    await takePageScreenshot(page);
+
+    await selectTool(LeftPanelButton.ZoomOut, page);
     await selectTool(LeftPanelButton.ZoomOut, page);
     await takePageScreenshot(page);
+  });
 
-    await selectTool(LeftPanelButton.ZoomReset, page);
+  test('Zoom In & Out monomer with mouse wheel', async ({ page }) => {
+    await page.mouse.wheel(deltas.x, deltas.y);
+    await takePageScreenshot(page);
+
+    await page.mouse.wheel(deltas.x, -deltas.y);
+    await takePageScreenshot(page);
+
+    await page.mouse.wheel(deltas.x, -deltas.y);
     await takePageScreenshot(page);
   });
 
-  test('Zoom In & Out attachment points', async ({ page }) => {
+  test('Zoom In & Out attachment points with menu buttons', async ({
+    page,
+  }) => {
     await selectTool(LeftPanelButton.ZoomIn, page);
     await selectTool(LeftPanelButton.ZoomIn, page);
     await selectSingleBondTool(page);
     await peptide.hover();
     await takePageScreenshot(page);
 
     await selectTool(LeftPanelButton.ZoomReset, page);
+    await peptide.hover();
+    await takePageScreenshot(page);
+
     await selectTool(LeftPanelButton.ZoomOut, page);
     await selectTool(LeftPanelButton.ZoomOut, page);
     await peptide.hover();
     await takePageScreenshot(page);
   });
 
-  test('Zoom In & Out bond', async ({ page }) => {
+  test('Zoom In & Out attachment points with mouse wheel', async ({ page }) => {
+    await page.mouse.wheel(deltas.x, deltas.y);
+    await selectSingleBondTool(page);
+    await peptide.hover();
+    await takePageScreenshot(page);
+
+    await page.mouse.wheel(deltas.x, -deltas.y);
+    await peptide.hover();
+    await takePageScreenshot(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 }) => {
     const bondCoordinates = { x: 400, y: 400 };
     await selectTool(LeftPanelButton.ZoomIn, page);
     await selectTool(LeftPanelButton.ZoomIn, page);
@@ -67,6 +100,11 @@ test.describe('Zoom Tool', () => {
     await takePageScreenshot(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 selectTool(LeftPanelButton.ZoomOut, page);
     await selectTool(LeftPanelButton.ZoomOut, page);
     await peptide.hover();
@@ -75,7 +113,31 @@ test.describe('Zoom Tool', () => {
     await takePageScreenshot(page);
   });
 
-  test('Zoom In & Out selection rectangle', async ({ page }) => {
+  test('Zoom In & Out bond with mouse wheel', async ({ page }) => {
+    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 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 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 ({
+    page,
+  }) => {
     const selectionStart = { x: 200, y: 200 };
     const selectionEnd = { x: 400, y: 400 };
     await selectTool(LeftPanelButton.ZoomIn, page);
@@ -87,11 +149,41 @@ test.describe('Zoom Tool', () => {
     await takePageScreenshot(page);
 
     await selectTool(LeftPanelButton.ZoomReset, page);
+    await page.mouse.move(selectionStart.x, selectionStart.y);
+    await page.mouse.down();
+    await page.mouse.move(selectionEnd.x, selectionEnd.y);
+    await takePageScreenshot(page);
+
     await selectTool(LeftPanelButton.ZoomOut, page);
     await selectTool(LeftPanelButton.ZoomOut, page);
     await page.mouse.move(selectionStart.x, selectionStart.y);
     await page.mouse.down();
     await page.mouse.move(selectionEnd.x, selectionEnd.y);
     await takePageScreenshot(page);
   });
+
+  test('Zoom In & Out selection rectangle with mouse wheel', async ({
+    page,
+  }) => {
+    const selectionStart = { x: 200, y: 200 };
+    const selectionEnd = { x: 400, y: 400 };
+    await page.mouse.wheel(deltas.x, deltas.y);
+    await selectRectangleSelectionTool(page);
+    await page.mouse.move(selectionStart.x, selectionStart.y);
+    await page.mouse.down();
+    await page.mouse.move(selectionEnd.x, selectionEnd.y);
+    await takePageScreenshot(page);
+
+    await page.mouse.wheel(deltas.x, -deltas.y);
+    await page.mouse.move(selectionStart.x, selectionStart.y);
+    await page.mouse.down();
+    await page.mouse.move(selectionEnd.x, selectionEnd.y);
+    await takePageScreenshot(page);
+
+    await page.mouse.wheel(deltas.x, -deltas.y);
+    await page.mouse.move(selectionStart.x, selectionStart.y);
+    await page.mouse.down();
+    await page.mouse.move(selectionEnd.x, selectionEnd.y);
+    await takePageScreenshot(page);
+  });
 });

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

@@ -0,0 +1,47 @@
+import Coordinates from 'application/editor/shared/coordinates';
+import ZoomTool from 'application/editor/tools/Zoom';
+import { ZoomTransform } from 'd3';
+import { Vec2 } from 'domain/entities';
+import { DrawingEntitiesManager } from 'domain/entities/DrawingEntitiesManager';
+
+describe('Coordinates', () => {
+  const position = new Vec2(100, 100, 0);
+  ZoomTool.getInstance(new DrawingEntitiesManager());
+  ZoomTool.instance.setZoomTransform(new ZoomTransform(1.2, 40, 40));
+
+  it('should convert page coordinates to model coordinates', () => {
+    const converted = Coordinates.pageToModel(position);
+    const coordinates = new Vec2(2.5, 2.5, 0);
+    expect(converted).toEqual(coordinates);
+  });
+
+  it('should convert view coordinates to model coordinates', () => {
+    const converted = Coordinates.viewToModel(position);
+    const coordinates = new Vec2(1.25, 1.25, 0);
+    expect(converted).toEqual(coordinates);
+  });
+
+  it('should convert modal coordinates to view coordinates', () => {
+    const coordinates = Coordinates.modelToView(position);
+    const converted = new Vec2(4840, 4840, 0);
+    expect(coordinates).toEqual(converted);
+  });
+
+  it('should convert modal coordinates to page coordinates', () => {
+    const coordinates = Coordinates.modelToPage(position);
+    const converted = new Vec2(4000, 4000, 0);
+    expect(coordinates).toEqual(converted);
+  });
+
+  it('should convert page coordinates to view coordinates', () => {
+    const coordinates = Coordinates.pageToView(position);
+    const converted = new Vec2(160, 160, 0);
+    expect(coordinates).toEqual(converted);
+  });
+
+  it('should convert view coordinates to page coordinates', () => {
+    const coordinates = Coordinates.viewToPage(position);
+    const converted = new Vec2(50, 50, 0);
+    expect(coordinates).toEqual(converted);
+  });
+});

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

@@ -34,6 +34,27 @@ jest.mock('d3', () => {
         style() {
           return this;
         },
+        on() {},
+      };
+    },
+    ZoomTransform: jest.fn().mockImplementation(() => {
+      return {};
+    }),
+    zoom() {
+      return {
+        scaleExtent() {
+          return {
+            on() {
+              return {
+                filter() {
+                  return {
+                    on() {},
+                  };
+                },
+              };
+            },
+          };
+        },
       };
     },
   };

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

@@ -0,0 +1,53 @@
+import { CoreEditor } from 'application/editor';
+import { polymerEditorTheme } from '../../../mock-data';
+import { createPolymerEditorCanvas } from '../../../helpers/dom';
+import ZoomTool from 'application/editor/tools/Zoom';
+import { select } from 'd3';
+
+describe('Zoom Tool', () => {
+  let canvas: SVGSVGElement;
+  let button;
+  const zoomed = jest.fn();
+
+  beforeEach(() => {
+    window.SVGElement.prototype.getBBox = () => ({
+      width: 20,
+      height: 30,
+    });
+    canvas = createPolymerEditorCanvas();
+    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);
+        });
+      // eslint-disable-next-line no-new
+      new CoreEditor({
+        theme: polymerEditorTheme,
+        canvas,
+      });
+
+      const zoomInBtn = document.getElementsByClassName(`${name}`)[0];
+      zoomInBtn?.dispatchEvent(new MouseEvent('click'));
+      expect(zoomed).toHaveBeenCalled();
+    });
+  });
+
+  it('should zoom in when scrool mouse wheel up', () => {
+    jest.spyOn(ZoomTool.prototype, 'zoomAction').mockImplementation(zoomed);
+
+    // eslint-disable-next-line no-new
+    new CoreEditor({
+      theme: polymerEditorTheme,
+      canvas,
+    });
+    window.dispatchEvent(new WheelEvent('wheel'));
+    expect(zoomed).toHaveBeenCalled();
+  });
+});

packages/ketcher-core/src/application/editor/shared/coordinates.ts

@@ -1,7 +1,11 @@
 import { Vec2 } from 'domain/entities';
 import { provideEditorSettings } from '../editorSettings';
 import ZoomTool from '../tools/Zoom';
-
+/**
+ * page coordinates refers to the origional Coordinates
+ * view coordinates refers to the zoomed Coordinates
+ * modal refers to the angstroms
+ */
 class Coordinates {
   static pageToModel(position: Vec2) {
     const settings = provideEditorSettings();