Autotests: #6182 - autotests tests for highlight atoms and bonds (#6220)

* - add tests;
- add expected snapshots;

* - refactor

* Update right-click menu tests with color annotations for highlights

* Add test for displaying informational message on adjusting reaction component margin size

ketcher-autotests/tests/File-Management/Open-And-Save-Files/KET-Files/ket-files-properties.spec.ts

@@ -342,4 +342,22 @@ test.describe('Ket files', () => {
 
     expect(ketFile).toEqual(ketFileExpected);
   });
+
+  test('When the user adjusts the "Reaction component margin size" settings and clicks the "Apply" button, an informational message should be displayed: "To fully apply these changes, you need to apply the layout."', async ({
+    page,
+  }) => {
+    /*
+  Test case: https://github.com/epam/Indigo/issues/2176
+  Description: When the user adjusts the "Reaction component margin size" settings and clicks the "Apply" button, an 
+  informational message displayed: "To fully apply these changes, you need to apply the layout."
+  */
+    await openFileAndAddToCanvas('KET/layout-with-catalyst.ket', page);
+    await openSettings(page);
+    await bondsSettings(page);
+    await scrollToDownInSetting(page);
+    await setReactionMarginSizeOptionUnit(page, 'px-option');
+    await setReactionMarginSizeValue(page, '47.8');
+    await pressButton(page, 'Apply');
+    await takeEditorScreenshot(page);
+  });
 });

ketcher-autotests/tests/User-Interface/Right-Click-Menu/right-click.spec.ts

@@ -1,3 +1,4 @@
+/* eslint-disable no-inline-comments */
 /* eslint-disable no-magic-numbers */
 import { test } from '@playwright/test';
 import {
@@ -15,6 +16,10 @@ import {
   clickOnBond,
   clickOnAtom,
   clickOnCanvas,
+  drawBenzeneRing,
+  selectRectangleSelection,
+  selectAllStructuresOnCanvas,
+  screenshotBetweenUndoRedo,
 } from '@utils';
 import { getAtomByIndex } from '@utils/canvas/atoms';
 import { getBondByIndex } from '@utils/canvas/bonds';
@@ -381,4 +386,255 @@ test.describe('Right-click menu', () => {
     await page.getByText('Double', { exact: true }).click();
     await takeEditorScreenshot(page);
   });
+
+  test('Verify that the "Highlight" option appears below "Add attachment point." for selected atom', async ({
+    page,
+  }) => {
+    /*
+    Test case: https://github.com/epam/ketcher/issues/4984
+    Description: "Highlight" option appears below "Add attachment point." for selected atom.
+    Case:
+      1. Add Benzene ring on canvas
+      2. Right-click on the atom
+      3. Observes the "Highlight" option
+    */
+    await drawBenzeneRing(page);
+    await clickOnAtom(page, 'C', 0, 'right');
+    await takeEditorScreenshot(page);
+  });
+
+  test('Verify that the "Highlight" option appears below "Attach S-Group." for selected bond', async ({
+    page,
+  }) => {
+    /*
+    Test case: https://github.com/epam/ketcher/issues/4984
+    Description: "Highlight" option appears below "Attach S-Group." for selected bond.
+    Case:
+      1. Add Benzene ring on canvas
+      2. Right-click on the bond
+      3. Observes the "Highlight" option
+    */
+    await drawBenzeneRing(page);
+    await clickOnBond(page, BondType.SINGLE, 1, 'right');
+    await takeEditorScreenshot(page);
+  });
+
+  test('Verify that the "Highlight" option appears below "Enhanced stereochemistry," separated by a horizontal delimiter line for selected multiple atoms and bonds', async ({
+    page,
+  }) => {
+    /*
+    Test case: https://github.com/epam/ketcher/issues/4984
+    Description: "Highlight" option appears below "Enhanced stereochemistry," separated by a horizontal delimiter line for selected multiple atoms and bonds.
+    Case:
+      1. Add Benzene ring on canvas
+      2. Select multiple atoms and bonds
+      2. Right-click on the atom
+      3. Observes the "Highlight" option
+    */
+    await drawBenzeneRing(page);
+    await selectRectangleSelection(page);
+    await page.keyboard.down('Shift');
+    await clickOnBond(page, BondType.DOUBLE, 1);
+    await clickOnAtom(page, 'C', 2);
+    await page.keyboard.up('Shift');
+    await clickOnAtom(page, 'C', 2, 'right');
+    await takeEditorScreenshot(page);
+  });
+
+  test('Click on the "Highlight" option and confirm that the standard colors are displayed (eight colors and a "No highlight" option)', async ({
+    page,
+  }) => {
+    /*
+    Test case: https://github.com/epam/ketcher/issues/4984
+    Description: "Highlight" option standard colors are displayed (eight colors and a "No highlight" option).
+    Case:
+      1. Add Benzene ring on canvas
+      2. Right-click on the atom
+      3. Click on the "Highlight" option
+    */
+    await drawBenzeneRing(page);
+    await clickOnAtom(page, 'C', 0, 'right');
+    await page.getByText('Highlight', { exact: true }).click();
+    await takeEditorScreenshot(page);
+  });
+
+  test('Select each color individually and verify that the selected atoms are highlighted with the chosen color', async ({
+    page,
+  }) => {
+    /*
+      Test case: https://github.com/epam/ketcher/issues/4984
+      Description: The selected atoms are highlighted with the chosen color.
+      Steps:
+        1. Add Benzene ring on the canvas.
+        2. Right-click on an atom.
+        3. Click on the "Highlight" option.
+        4. Select each color individually and verify the highlights.
+    */
+    await drawBenzeneRing(page);
+    await selectRectangleSelection(page);
+    const colors = [
+      '.css-cyxjjb', // Red
+      '.css-55t14h', // Orange
+      '.css-q0qzfh', // Yellow
+      '.css-1pz88a0', // Green
+      '.css-d1acvy', // Blue
+      '.css-1jrzwzn', // Pink
+      '.css-1kxl817', // Burgundy
+      '.css-1j267jk', // Purple
+    ];
+
+    for (const color of colors) {
+      await clickOnAtom(page, 'C', 0, 'right');
+      await page.getByText('Highlight', { exact: true }).click();
+      await page.locator(color).click();
+      await takeEditorScreenshot(page);
+    }
+  });
+
+  test('Select each color individually and verify that the selected bonds are highlighted with the chosen color', async ({
+    page,
+  }) => {
+    /*
+      Test case: https://github.com/epam/ketcher/issues/4984
+      Description: The selected bonds are highlighted with the chosen color.
+      Steps:
+        1. Add Benzene ring on the canvas.
+        2. Right-click on an bond.
+        3. Click on the "Highlight" option.
+        4. Select each color individually and verify the highlights.
+    */
+    await drawBenzeneRing(page);
+    await selectRectangleSelection(page);
+    const colors = [
+      '.css-cyxjjb', // Red
+      '.css-55t14h', // Orange
+      '.css-q0qzfh', // Yellow
+      '.css-1pz88a0', // Green
+      '.css-d1acvy', // Blue
+      '.css-1jrzwzn', // Pink
+      '.css-1kxl817', // Burgundy
+      '.css-1j267jk', // Purple
+    ];
+
+    for (const color of colors) {
+      await clickOnBond(page, BondType.SINGLE, 1, 'right');
+      await page.getByText('Highlight', { exact: true }).click();
+      await page.locator(color).click();
+      await takeEditorScreenshot(page);
+    }
+  });
+
+  test('Select the "No highlight" option and confirm that the highlight is removed from the selected elements', async ({
+    page,
+  }) => {
+    /*
+    Test case: https://github.com/epam/ketcher/issues/4984
+    Description: The highlight is removed from the selected elements.
+    Case:
+      1. Add Benzene ring on canvas
+      2. Select all structure
+      3. Right-click on the atom
+      4. Higlight all structure
+      5. Select all structure
+      6. Right-click on the atom
+      7. Select the "No highlight" option
+    */
+    await drawBenzeneRing(page);
+    await selectAllStructuresOnCanvas(page);
+    await clickOnAtom(page, 'C', 0, 'right');
+    await page.getByText('Highlight', { exact: true }).click();
+    await page.locator('.css-d1acvy').click(); // Blue
+    await clickOnCanvas(page, 100, 100);
+    await takeEditorScreenshot(page);
+    await selectAllStructuresOnCanvas(page);
+    await clickOnAtom(page, 'C', 0, 'right');
+    await page.getByText('Highlight', { exact: true }).click();
+    await page.getByText('No highlight').click();
+    await clickOnCanvas(page, 100, 100);
+    await takeEditorScreenshot(page);
+  });
+
+  test('Perform undo and redo operations after applying a highlight and verify that the highlight state is accurately restored', async ({
+    page,
+  }) => {
+    /*
+    Test case: https://github.com/epam/ketcher/issues/4984
+    Description: The highlight state is accurately restored.
+    Case:
+      1. Add Benzene ring on canvas
+      2. Select all structure
+      3. Right-click on the atom
+      4. Higlight all structure
+      5. Perform Undo/Redo actions
+    */
+    await drawBenzeneRing(page);
+    await selectAllStructuresOnCanvas(page);
+    await clickOnAtom(page, 'C', 0, 'right');
+    await page.getByText('Highlight', { exact: true }).click();
+    await page.locator('.css-d1acvy').click(); // Blue
+    await clickOnCanvas(page, 100, 100);
+    await takeEditorScreenshot(page);
+    await screenshotBetweenUndoRedo(page);
+    await takeEditorScreenshot(page);
+  });
+
+  test('Apply different highlights to different atoms/bonds and ensure that the highlights do not interfere with each other', async ({
+    page,
+  }) => {
+    /*
+    Test case: https://github.com/epam/ketcher/issues/4984
+    Description: The highlights do not interfere with each other.
+    Case:
+      1. Add Benzene ring on canvas
+      2. Highlight different atoms/bonds
+      3. Verify that the highlights do not interfere with each other
+    */
+    const highlights = [
+      { type: 'atom', index: 0, colorClass: '.css-cyxjjb' }, // Red
+      {
+        type: 'bond',
+        index: 0,
+        bondType: BondType.SINGLE,
+        colorClass: '.css-d1acvy', // Blue
+      },
+      { type: 'atom', index: 1, colorClass: '.css-1pz88a0' }, // Green
+      {
+        type: 'bond',
+        index: 1,
+        bondType: BondType.SINGLE,
+        colorClass: '.css-q0qzfh', // Yellow
+      },
+      { type: 'atom', index: 2, colorClass: '.css-1pz88a0' }, // Green
+      {
+        type: 'bond',
+        index: 2,
+        bondType: BondType.SINGLE,
+        colorClass: '.css-1j267jk', // Purple
+      },
+      { type: 'atom', index: 3, colorClass: '.css-55t14h' }, // Orange
+      {
+        type: 'bond',
+        index: 0,
+        bondType: BondType.DOUBLE,
+        colorClass: '.css-1jrzwzn', // Pink
+      },
+    ];
+
+    await drawBenzeneRing(page);
+
+    for (const highlight of highlights) {
+      if (highlight.type === 'atom') {
+        await clickOnAtom(page, 'C', highlight.index, 'right');
+      } else if (
+        highlight.type === 'bond' &&
+        highlight.bondType !== undefined
+      ) {
+        await clickOnBond(page, highlight.bondType, highlight.index, 'right');
+      }
+      await page.getByText('Highlight', { exact: true }).click();
+      await page.locator(highlight.colorClass).click();
+      await clickOnCanvas(page, 100, 100);
+    }
+    await takeEditorScreenshot(page);
+  });
 });