Macro: #3041 – RNA Builder. Delete presets.

ketcher-autotests/README.md

@@ -112,7 +112,7 @@ If you want to run tests from Polymer Editor, add `ENABLE_POLYMER_EDITOR=true` i
 
 Also make sure, that test is not skipped! Check if test starts with
 `test.skip('We test something', async ({ page }) => {`
-Remove "skip" before running. Than add it back before push - we do not test Polymer Editor on ci/cd for now (will be changed in the future).
+Remove "skip" before running.
 
 - **Run app in browser: from root directory "ketcher"**:
 

ketcher-autotests/tests/Macromolecule-editor/RNAEditor/delete-preset.spec.ts

@@ -0,0 +1,43 @@
+import { Page, test } from '@playwright/test';
+import { POLYMER_TOGGLER, RNA_TAB } from '../../../constants/testIdConstants';
+import { waitForPageInit } from '@utils/common';
+import { takePageScreenshot } from '@utils';
+
+async function gotoRNA(page: Page) {
+  await page.getByTestId(POLYMER_TOGGLER).click();
+  await page.getByTestId(RNA_TAB).click();
+}
+
+test.describe('Macromolecules delete RNA presets', () => {
+  test.beforeEach(async ({ page }) => {
+    await waitForPageInit(page);
+    await gotoRNA(page);
+  });
+
+  test.afterEach(async ({ page }) => {
+    await takePageScreenshot(page);
+  });
+
+  test('Should not delete default RNA preset', async ({ page }) => {
+    await page.getByTestId('cancel-btn').click();
+
+    await page.getByTestId('A_A_R_P').click({ button: 'right' });
+  });
+
+  test('Delete copy RNA preset', async ({ page }) => {
+    await page.getByTestId('cancel-btn').click();
+
+    await page.getByTestId('A_A_R_P').click({ button: 'right' });
+
+    await page.getByTestId('duplicateandedit').click();
+
+    await page.getByTestId('A_Copy_A_R_P').click();
+    await page.getByTestId('A_Copy_A_R_P').click({ button: 'right' });
+
+    await page.getByTestId('deletepreset').click();
+
+    await takePageScreenshot(page);
+
+    await page.getByTitle('Delete').click();
+  });
+});

packages/ketcher-polymer-editor-react/package.json

@@ -59,6 +59,7 @@
     "ketcher-core": "*",
     "ketcher-react": "*",
     "lodash": "^4.17.21",
+    "react-contexify": "^6.0.0",
     "react-dropzone": "^11.7.1",
     "react-redux": "^7.2.1",
     "redux": "^4.0.5",

packages/ketcher-polymer-editor-react/src/components/contextMenu/RNAContextMenu.test.tsx

@@ -0,0 +1,137 @@
+/****************************************************************************
+ * Copyright 2021 EPAM Systems
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ ***************************************************************************/
+
+import { fireEvent, render, screen } from '@testing-library/react';
+import { ModalContainer } from 'components/modal/modalContainer';
+import { RnaBuilder } from 'components/monomerLibrary/RnaBuilder';
+import { MONOMER_TYPES } from 'src/constants';
+
+jest.mock('../../../src/helpers/dom.ts', () => {
+  return {
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
+    scrollToElement: () => {},
+  };
+});
+const monomerData = [
+  {
+    struct: {},
+    props: {
+      Name: 'Ribose',
+      MonomerType: 'RNA',
+      MonomerName: 'R',
+      MonomerCode: 'R',
+      MonomerNaturalAnalogCode: 'R',
+      BranchMonomer: 'false',
+      MonomerCaps: '[R1]H',
+    },
+  },
+  {
+    struct: {},
+    props: {
+      Name: 'Phosphate',
+      MonomerType: 'RNA',
+      MonomerName: 'P',
+      MonomerCode: 'P',
+      MonomerNaturalAnalogCode: 'P',
+      BranchMonomer: 'false',
+      MonomerCaps: '[R1]O',
+    },
+  },
+  {
+    props: {
+      Name: 'Adenine',
+      MonomerType: 'RNA',
+      MonomerName: 'A',
+      MonomerCode: 'A',
+      MonomerNaturalAnalogCode: 'A',
+      BranchMonomer: 'true',
+      MonomerCaps: '[R1]H',
+    },
+  },
+];
+describe('RNA ContextMenu', () => {
+  it('should render contextMenu correctly', () => {
+    render(
+      withThemeAndStoreProvider(
+        <RnaBuilder libraryName={MONOMER_TYPES.RNA} />,
+        {
+          library: {
+            searchFilter: '',
+            favorites: {},
+            monomers: monomerData,
+          },
+        },
+      ),
+    );
+    const cancelButton = screen.getByTestId('cancel-btn');
+    fireEvent.click(cancelButton);
+    const presetCard = screen.getByTestId('A_A_R_P');
+    fireEvent.contextMenu(presetCard);
+    expect(screen.getByTestId('deletepreset')).toBeInTheDocument();
+  });
+
+  it("should disable 'Delete Preset' menu when trying to delete default preset", () => {
+    render(
+      withThemeAndStoreProvider(
+        <RnaBuilder libraryName={MONOMER_TYPES.RNA} />,
+        {
+          library: {
+            searchFilter: '',
+            favorites: {},
+            monomers: monomerData,
+          },
+        },
+      ),
+    );
+    const cancelButton = screen.getByTestId('cancel-btn');
+    fireEvent.click(cancelButton);
+    const preset = screen.getByTestId('A_A_R_P');
+    fireEvent.contextMenu(preset);
+    const deleteMenu = screen.getByTestId('deletepreset');
+    expect(deleteMenu.className).toContain('disabled');
+  });
+
+  it("should delete preset correctly when click menu 'Delete Preset'", () => {
+    render(
+      withThemeAndStoreProvider(
+        <div>
+          <RnaBuilder libraryName={MONOMER_TYPES.RNA} />
+          <ModalContainer />
+        </div>,
+        {
+          library: {
+            searchFilter: '',
+            favorites: {},
+            monomers: monomerData,
+          },
+        },
+      ),
+    );
+    const cancelButton = screen.getByTestId('cancel-btn');
+    fireEvent.click(cancelButton);
+    const preset = screen.getByTestId('A_A_R_P');
+    fireEvent.contextMenu(preset);
+    const duplicateMenu = screen.getByTestId('duplicateandedit');
+    fireEvent.click(duplicateMenu);
+    const presetCopyCard = screen.getByTestId('A_Copy_A_R_P');
+    fireEvent.contextMenu(presetCopyCard);
+    const deleteMenu = screen.getByTestId('deletepreset');
+    fireEvent.click(deleteMenu);
+    const deleteBtn = screen.getByTitle('Delete');
+    fireEvent.click(deleteBtn);
+    expect(presetCopyCard).not.toBeInTheDocument();
+  });
+});

packages/ketcher-polymer-editor-react/src/components/contextMenu/RNAContextMenu.tsx

@@ -0,0 +1,65 @@
+import { Item, ItemParams, Menu, Separator } from 'react-contexify';
+import { openModal } from 'state/modal';
+import { useAppDispatch, useAppSelector } from 'hooks';
+import { ReactElement } from 'react';
+import { CONTEXT_MENU_ID } from './types';
+import { selectActivePreset } from 'state/rna-builder';
+
+export const RNAContextMenu = () => {
+  const dispatch = useAppDispatch();
+  const activePreset = useAppSelector(selectActivePreset);
+  const RNAMenus = [
+    { name: 'duplicateandedit', title: 'Duplicate and Edit...' },
+    { name: 'edit', title: 'Edit...', seperator: true },
+    { name: 'deletepreset', title: 'Delete Preset' },
+  ];
+
+  const isItemDisabled = (name: string) => {
+    if (name === 'deletepreset' && activePreset?.default) {
+      return true;
+    }
+    return false;
+  };
+
+  const handleMenuChange = ({ id, props }: ItemParams) => {
+    switch (id) {
+      case 'duplicateandedit':
+        props.duplicatePreset();
+        break;
+      case 'edit':
+        props.activateEditMode();
+        break;
+      case 'deletepreset':
+        dispatch(openModal('delete'));
+        break;
+    }
+  };
+
+  const assembleMenuItems = () => {
+    const items: ReactElement[] = [];
+    RNAMenus.forEach(({ name, title, seperator }, index) => {
+      const item = (
+        <Item
+          id={name}
+          onClick={handleMenuChange}
+          key={name}
+          disabled={isItemDisabled(name)}
+          data-testid={name}
+        >
+          <span>{title}</span>
+        </Item>
+      );
+      items.push(item);
+      if (seperator) {
+        items.push(<Separator key={index} />);
+      }
+    });
+    return items;
+  };
+
+  return (
+    <Menu style={{ minWidth: '160px' }} id={CONTEXT_MENU_ID.FOR_RNA}>
+      {assembleMenuItems()}
+    </Menu>
+  );
+};

packages/ketcher-polymer-editor-react/src/components/contextMenu/types.ts

@@ -0,0 +1,3 @@
+export enum CONTEXT_MENU_ID {
+  FOR_RNA = 'context-menu-for-RNA',
+}

packages/ketcher-polymer-editor-react/src/components/modal/Delete/Delete.test.tsx

@@ -0,0 +1,79 @@
+/****************************************************************************
+ * Copyright 2021 EPAM Systems
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ ***************************************************************************/
+
+import { fireEvent, render, screen } from '@testing-library/react';
+
+import { Delete } from './Delete';
+
+const mockProps = {
+  isModalOpen: true,
+  onClose: jest.fn(),
+};
+
+describe('Delete component', () => {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const preset: any = {
+    base: {
+      label: 'A',
+    },
+    phosphate: {
+      label: 'P',
+    },
+    sugar: {
+      label: 'R',
+    },
+    name: 'A',
+  };
+  it('should render correctly', () => {
+    expect(
+      render(
+        withThemeAndStoreProvider(<Delete {...mockProps} />, {
+          rnaBuilder: {
+            activePreset: { presetInList: preset, name: 'name' },
+            presets: [preset],
+          },
+        }),
+      ),
+    ).toMatchSnapshot();
+  });
+  it('should cancel delete', () => {
+    render(
+      withThemeAndStoreProvider(<Delete {...mockProps} />, {
+        rnaBuilder: {
+          activePreset: { presetInList: preset, name: 'name' },
+          presets: [preset],
+        },
+      }),
+    );
+    const cancelButton = screen.getByTitle('Cancel');
+    fireEvent.click(cancelButton);
+    expect(mockProps.onClose).toHaveBeenCalled();
+  });
+
+  it('should execute delete', () => {
+    render(
+      withThemeAndStoreProvider(<Delete {...mockProps} />, {
+        rnaBuilder: {
+          activePreset: { presetInList: preset, name: 'name' },
+          presets: [preset],
+        },
+      }),
+    );
+    const deleteButton = screen.getByTitle('Delete');
+    fireEvent.click(deleteButton);
+    expect(mockProps.onClose).toHaveBeenCalled();
+  });
+});