Macro: #2414 - macro undo and redo tool

ketcher-autotests/tests/Macromolecule-editor/Rectangle-Selection-Tool/rectangle-selection-tool.spec.ts

@@ -1,7 +1,6 @@
 import { test } from '@playwright/test';
 import {
   addMonomerToCanvas,
-  dragMouseTo,
   selectEraseTool,
   selectRectangleArea,
   selectRectangleSelectionTool,
@@ -11,6 +10,7 @@ import {
 } from '@utils';
 import { turnOnMacromoleculesEditor } from '@utils/macromolecules';
 import { bondTwoMonomers } from '@utils/macromolecules/polymerBond';
+import { moveMonomer } from '@utils/macromolecules/monomer';
 /* eslint-disable no-magic-numbers */
 
 test.describe('Rectangle Selection Tool', () => {
@@ -129,10 +129,7 @@ test.describe('Rectangle Selection Tool', () => {
 
     await takeEditorScreenshot(page);
 
-    // Move selected monomer
-    await selectRectangleSelectionTool(page);
-    await page.mouse.click(400, 400);
-    await dragMouseTo(200, 400, page);
+    await moveMonomer(page, peptide2, 200, 400);
 
     await takeEditorScreenshot(page);
   });

ketcher-autotests/tests/Macromolecule-editor/Undo-Redo/undo-redo.spec.ts

@@ -0,0 +1,113 @@
+import { Locator, test } from '@playwright/test';
+import {
+  addMonomerToCanvas,
+  clickRedo,
+  clickUndo,
+  selectSingleBondTool,
+  selectSnakeBondTool,
+  takeEditorScreenshot,
+  waitForPageInit,
+} from '@utils';
+import {
+  hideMonomerPreview,
+  turnOnMacromoleculesEditor,
+} from '@utils/macromolecules';
+import { bondTwoMonomers } from '@utils/macromolecules/polymerBond';
+import { moveMonomer } from '@utils/macromolecules/monomer';
+/* eslint-disable no-magic-numbers */
+
+test.describe('Undo Redo', () => {
+  let peptide1: Locator;
+  let peptide2: Locator;
+  test.beforeEach(async ({ page }) => {
+    await waitForPageInit(page);
+    await turnOnMacromoleculesEditor(page);
+    const MONOMER_NAME = 'Tza___3-thiazolylalanine';
+    const MONOMER_ALIAS = 'Tza';
+
+    peptide1 = await addMonomerToCanvas(
+      page,
+      MONOMER_NAME,
+      MONOMER_ALIAS,
+      300,
+      300,
+      0,
+    );
+    peptide2 = await addMonomerToCanvas(
+      page,
+      MONOMER_NAME,
+      MONOMER_ALIAS,
+      400,
+      300,
+      1,
+    );
+    const peptide3 = await addMonomerToCanvas(
+      page,
+      MONOMER_NAME,
+      MONOMER_ALIAS,
+      500,
+      300,
+      2,
+    );
+
+    // Select bond tool
+    await selectSingleBondTool(page);
+
+    // Create bonds between peptides
+    await bondTwoMonomers(page, peptide1, peptide2);
+    await bondTwoMonomers(page, peptide3, peptide2);
+
+    await hideMonomerPreview(page);
+  });
+
+  test('Undo redo for monomers and bonds addition', async ({ page }) => {
+    /*
+    Description: Add monomers and bonds and do undo redo
+    */
+
+    // check that history pointer stops on last operation
+    await clickRedo(page);
+    await clickRedo(page);
+
+    // check undo
+    await clickUndo(page);
+    await clickUndo(page);
+    await takeEditorScreenshot(page);
+
+    // check that history pointer stops on first operation
+    await clickUndo(page);
+    await clickUndo(page);
+    await clickUndo(page);
+    await clickUndo(page);
+    await clickUndo(page);
+
+    // check redo
+    await clickRedo(page);
+    await takeEditorScreenshot(page);
+  });
+
+  test('Undo redo for snake mode layout', async ({ page }) => {
+    /*
+    Description: Add monomers and bonds, activate snake mode and do undo redo
+    */
+
+    await selectSnakeBondTool(page);
+    await clickUndo(page);
+    await takeEditorScreenshot(page);
+  });
+
+  test('Undo redo for monomers movement', async ({ page }) => {
+    /*
+    Description: Move monomers and do undo redo
+    */
+
+    await moveMonomer(page, peptide1, 500, 500);
+    await moveMonomer(page, peptide2, 600, 600);
+    await moveMonomer(page, peptide2, 400, 400);
+    await clickUndo(page);
+    await clickUndo(page);
+    await takeEditorScreenshot(page);
+    await clickRedo(page);
+    await takeEditorScreenshot(page);
+  });
+});

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

@@ -1,5 +1,5 @@
 import { Page } from '@playwright/test';
-import { pressButton, selectOption } from '@utils';
+import { selectOption } from '@utils';
 import { selectButtonByTitle } from '@utils/clicks/selectButtonByTitle';
 import { clickOnFileFormatDropdown } from '@utils/formats';
 import {
@@ -68,6 +68,17 @@ export async function selectRectangleSelectionTool(page: Page) {
   await bondToolButton.click();
 }
 
+// undo/redo heplers currently used for macromolecules editor because buttons are in different panel
+export async function clickUndo(page: Page) {
+  const undoButton = page.getByTestId('undo-button');
+  await undoButton.click();
+}
+
+export async function clickRedo(page: Page) {
+  const redoButton = page.getByTestId('redo-button');
+  await redoButton.click();
+}
+
 export async function selectRectangleArea(
   page: Page,
   startX: number,

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

@@ -0,0 +1,13 @@
+import { Locator, Page } from '@playwright/test';
+import { dragMouseTo, selectRectangleSelectionTool } from '@utils';
+
+export async function moveMonomer(
+  page: Page,
+  monomer: Locator,
+  x: number,
+  y: number,
+) {
+  await selectRectangleSelectionTool(page);
+  await monomer.click();
+  await dragMouseTo(x, y, page);
+}

ketcher-autotests/tests/utils/scrollSettingBar.ts

@@ -1,10 +1,10 @@
-import { Page } from "@playwright/test";
+import { Page } from '@playwright/test';
 
 // It's a temporary workaround and will be eventually refactored to locator
-export async function scrollSettingBar (page: Page, scrollLength: number){ 
-    const deltaX = 0;
-    const scrollBarCoordinatesX = 638;
-    const scrollBarCoordinatesY = 524;
-    await page.mouse.move(scrollBarCoordinatesX, scrollBarCoordinatesY);
-    await page.mouse.wheel(deltaX, scrollLength);
-  }
+export async function scrollSettingBar(page: Page, scrollLength: number) {
+  const deltaX = 0;
+  const scrollBarCoordinatesX = 638;
+  const scrollBarCoordinatesY = 524;
+  await page.mouse.move(scrollBarCoordinatesX, scrollBarCoordinatesY);
+  await page.mouse.wheel(deltaX, scrollLength);
+}

packages/ketcher-core/__tests__/application/editor/EditorHistory.test.ts

@@ -0,0 +1,59 @@
+import { CoreEditor, EditorHistory } from 'application/editor';
+import { createPolymerEditorCanvas } from '../../helpers/dom';
+import { Command } from 'domain/entities/Command';
+
+describe('EditorHistory', () => {
+  let canvas;
+  let editor: CoreEditor;
+  let history: EditorHistory;
+  beforeEach(() => {
+    canvas = createPolymerEditorCanvas();
+    editor = new CoreEditor({ theme: {}, canvas });
+    history = new EditorHistory(editor);
+  });
+
+  afterEach(() => {
+    history.destroy();
+  });
+
+  it('should be a singletone', () => {
+    const historyInstance2 = new EditorHistory(editor);
+    expect(history).toBe(historyInstance2);
+  });
+
+  it('should create another instance after destroy', () => {
+    history.destroy();
+    const historyInstance2 = new EditorHistory(editor);
+    expect(history).not.toBe(historyInstance2);
+  });
+
+  it('should add commands into history stack', () => {
+    history.update(new Command());
+    history.update(new Command());
+    expect(history.historyStack.length).toEqual(2);
+  });
+
+  it('should move pointer when undo/redo methods called', () => {
+    history.update(new Command());
+    history.update(new Command());
+    expect(history.historyPointer).toEqual(2);
+    history.redo();
+    expect(history.historyPointer).toEqual(2);
+    history.undo();
+    expect(history.historyPointer).toEqual(1);
+    history.undo();
+    expect(history.historyPointer).toEqual(0);
+    history.undo();
+    expect(history.historyPointer).toEqual(0);
+    history.redo();
+    expect(history.historyPointer).toEqual(1);
+  });
+
+  it('should have stack maximum size equal 32 commands', () => {
+    for (let i = 0; i < 40; i++) {
+      history.update(new Command());
+    }
+    expect(history.historyStack.length).toEqual(32);
+    expect(history.historyPointer).toEqual(32);
+  });
+});

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

@@ -34,7 +34,28 @@ jest.mock('d3', () => {
         style() {
           return this;
         },
-        on() {},
+        on() {
+          return this;
+        },
+        append() {
+          return this;
+        },
+        data() {
+          return this;
+        },
+        text() {
+          return this;
+        },
+        node() {
+          return {
+            getBBox() {
+              return {};
+            },
+            getBoundingClientRect() {
+              return {};
+            },
+          };
+        },
       };
     },
     ZoomTransform: jest.fn().mockImplementation(() => {
@@ -67,6 +88,10 @@ global.ResizeObserver = jest.fn().mockImplementation(() => ({
 }));
 
 describe('Select Rectangle Tool', () => {
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+
   it('should select drawing entity on mousedown', () => {
     const polymerBond = getFinishedPolymerBond(0, 0, 10, 10);
     const event = {
@@ -111,11 +136,15 @@ describe('Select Rectangle Tool', () => {
       new Vec2(0, 0),
     );
     editor.renderersContainer.update(modelChanges);
+
     const peptide = Array.from(editor.drawingEntitiesManager.monomers)[0][1];
     const onMove = jest.fn();
     jest
       .spyOn(BaseMonomerRenderer.prototype, 'moveSelection')
       .mockImplementation(onMove);
+    jest
+      .spyOn(PeptideRenderer.prototype, 'drawSelection')
+      .mockImplementation(() => {});
 
     const selectRectangleTool = new SelectRectangle(editor);