Merge branch 'master' of https://github.com/epam/ketcher into 2982-ig…

…nore-abbreviation-lookup-for-repetitive-keystrokes

.github/workflows/playwright.yml

@@ -16,6 +16,7 @@ env:
   KETCHER_URL: http://host.docker.internal:4002
   DOCKER: true
   IGNORE_UNSTABLE_TESTS: true
+  CI_ENVIRONMENT: true
 jobs:
   playwright_tests:
     timeout-minutes: 60
@@ -30,7 +31,7 @@ jobs:
       - name: Install dependencies
         run: npm ci
       - name: Build all packages
-        run: npm run build
+        run: npm run build:packages && npm run build:example:standalone
       - name: Run example in standalone mode
         run: cd example/ && nohup npm run serve:standalone &
       - name: Create env file
@@ -40,6 +41,7 @@ jobs:
           echo "KETCHER_URL=$KETCHER_URL" >> .env
           echo "MODE=$MODE" >> .env
           echo "IGNORE_UNSTABLE_TESTS=$IGNORE_UNSTABLE_TESTS" >> .env
+          echo "CI_ENVIRONMENT=$CI_ENVIRONMENT" >> .env
       - name: Build autotests for docker
         run: cd ketcher-autotests && npm run docker:build
       - name: Run playwright tests in docker

demo/src/components/FileInputForm.tsx

@@ -1,8 +1,8 @@
-import { useState } from 'react'
-import styled from '@emotion/styled'
+import { useState } from 'react';
+import styled from '@emotion/styled';
 
-import { PanelButton } from './shared/Buttons'
-import { Button } from '@mui/material'
+import { PanelButton } from './shared/Buttons';
+import { Button } from '@mui/material';
 
 const Form = styled('form')`
   margin-top: 10px;
@@ -15,61 +15,59 @@ const Form = styled('form')`
     font-size: 12px;
     text-transform: none;
   }
-`
+`;
 
 const FileNameBox = styled('div')`
   margin-top: 5px;
   min-height: 18px;
   color: rgba(0, 0, 0, 0.6);
   font-size: 13px;
   text-align: left;
-`
+`;
 
 const parseFile = (file): Promise<string> =>
   new Promise((resolve, reject) => {
-    const reader = new FileReader()
+    const reader = new FileReader();
 
-    reader.readAsText(file, 'UTF-8')
+    reader.readAsText(file, 'UTF-8');
 
     reader.onload = function (evt) {
-      const fileContent = evt?.target?.result
-      console.log('Parsed file:')
-      console.log(fileContent)
+      const fileContent = evt?.target?.result;
       if (typeof fileContent === 'string') {
-        resolve(fileContent)
+        resolve(fileContent);
       }
-      resolve('')
-    }
+      resolve('');
+    };
     reader.onerror = function (err) {
-      reject(err)
-    }
-  })
+      reject(err);
+    };
+  });
 
 const submitHandler = (event) => {
-  event.preventDefault()
-  let file = event.target[0].files[0]
+  event.preventDefault();
+  let file = event.target[0].files[0];
 
   parseFile(file).then((str) => {
-    KetcherFunctions.renderFromCtab(str)
-  })
-}
+    KetcherFunctions.renderFromCtab(str);
+  });
+};
 
 interface FileInputProps {
-  printToTerminal: (str: string) => void
+  printToTerminal: (str: string) => void;
 }
 
 export const FileInputForm = ({ printToTerminal }: FileInputProps) => {
-  const [chosenFile, setFile] = useState('')
+  const [chosenFile, setFile] = useState('');
 
   const chooseFileHandler = (event) => {
-    const file: File = event.target.files[0]
-    setFile(file.name)
+    const file: File = event.target.files[0];
+    setFile(file.name);
 
     parseFile(file).then((str) => {
-      let message = 'Selected file content:' + str
-      printToTerminal(message)
-    })
-  }
+      let message = 'Selected file content:' + str;
+      printToTerminal(message);
+    });
+  };
 
   return (
     <>
@@ -103,5 +101,5 @@ export const FileInputForm = ({ printToTerminal }: FileInputProps) => {
         <span>{chosenFile}</span>
       </FileNameBox>
     </>
-  )
-}
+  );
+};

demo/src/components/Panel.tsx

@@ -1,12 +1,12 @@
-import styled from '@emotion/styled'
+import styled from '@emotion/styled';
 
-import { PanelButton } from './shared/Buttons'
+import { PanelButton } from './shared/Buttons';
 
-import { InputSelect } from './InputSelect'
-import { Highlighting } from './Highlighting'
-import { ButtonsSelect } from './ButtonsSelect'
-import { FileInputForm } from './FileInputForm'
-import { ControlsCard } from './ControlsCard'
+import { InputSelect } from './InputSelect';
+import { Highlighting } from './Highlighting';
+import { ButtonsSelect } from './ButtonsSelect';
+import { FileInputForm } from './FileInputForm';
+import { ControlsCard } from './ControlsCard';
 
 const FlexBox = styled('div')`
   display: flex;
@@ -15,42 +15,40 @@ const FlexBox = styled('div')`
   flex-wrap: wrap;
   justify-content: flex-start;
   gap: 10px;
-`
+`;
 
-const clearSelection = () => KetcherFunctions.clearSelection()
+const clearSelection = () => KetcherFunctions.clearSelection();
 
-const selectAll = () => KetcherFunctions.selectAll()
+const selectAll = () => KetcherFunctions.selectAll();
 
 interface Props {
-  printToTerminal: (string) => void
-  hiddenButtons: string[]
-  buttonsHideHandler: (arg: string[]) => void
+  printToTerminal: (string) => void;
+  hiddenButtons: string[];
+  buttonsHideHandler: (arg: string[]) => void;
 }
 
 export const Panel = ({
   printToTerminal,
   hiddenButtons,
-  buttonsHideHandler
+  buttonsHideHandler,
 }: Props) => {
   const exportHandler = () => {
     KetcherFunctions.exportCtab().then((str) => {
-      let message = 'Export content:' + str
-      console.log(message)
-      printToTerminal(message)
-    })
-  }
+      let message = 'Export content:' + str;
+      console.log(message);
+      printToTerminal(message);
+    });
+  };
 
   const showAtomIds = () => {
-    const atoms = KetcherFunctions.getSelectedAtomId()
-    console.log('Selected atoms:')
-    console.log(atoms)
+    const atoms = KetcherFunctions.getSelectedAtomId();
 
     if (!atoms) {
-      printToTerminal('No atoms selected')
+      printToTerminal('No atoms selected');
     } else {
-      printToTerminal('Selected atoms: ' + atoms)
+      printToTerminal('Selected atoms: ' + atoms);
     }
-  }
+  };
 
   return (
     <FlexBox>
@@ -105,5 +103,5 @@ export const Panel = ({
         </PanelButton>
       </ControlsCard>
     </FlexBox>
-  )
-}
+  );
+};

example/config/webpack.config.js

@@ -10,8 +10,9 @@ const GitRevisionPlugin = require('git-revision-webpack-plugin');
 
 const gitRevisionPlugin = new GitRevisionPlugin();
 const applicationVersion = gitRevisionPlugin.version().split('-')[0];
+
 const envVariables = {
-  MODE: process.env.MODE,
+  MODE: process.env.MODE || 'standalone',
   API_PATH: process.env.REACT_APP_API_PATH,
   ENABLE_POLYMER_EDITOR: !!process.env.ENABLE_POLYMER_EDITOR,
   KETCHER_ENABLE_REDUX_LOGGER: JSON.stringify(false),

example/package.json

@@ -13,9 +13,9 @@
     "copy:build": "cross-env-shell shx cp -r build/. dist/$MODE",
     "prebuild": "cross-env-shell run-s init:build delete:dist init:dist",
     "postbuild": "cross-env-shell npm run copy:build",
-    "build:remote": "cross-env MODE=remote run-s prebuild build:react postbuild",
-    "build:standalone": "cross-env MODE=standalone run-s prebuild build:react postbuild",
-    "build:react": "react-app-rewired build",
+    "build:remote": "cross-env-shell MODE=remote run-s prebuild build:react postbuild",
+    "build:standalone": "cross-env-shell MODE=standalone run-s prebuild build:react postbuild",
+    "build:react": "cross-env-shell MODE=$MODE react-app-rewired build && echo $MODE",
     "build:react:analyze": "react-app-rewired build --analyze",
     "build": "npm run build:standalone && npm run build:remote",
     "build:standalone:analyze": "cross-env MODE=standalone run-s prebuild build:react:analyze postbuild",

example/src/PolymerToggler/PolymerToggler.tsx

@@ -22,7 +22,7 @@ export interface PolymerTogglerProps {
 
 const PolymerToggler = ({ toggle }: PolymerTogglerProps): JSX.Element => {
   return (
-    <label className={styles.switch}>
+    <label className={styles.switch} data-testid="PolymerToggler">
       <input type="checkbox" onChange={(e) => toggle(e.target.checked)} />
       <span className={styles.slider} />
     </label>

ketcher-autotests/.env.example

@@ -2,4 +2,5 @@ KETCHER_URL=""
 MODE="standalone"
 DOCKER=true
 IGNORE_UNSTABLE_TESTS=true
-GENERATE_DATA=false
+GENERATE_DATA=false
+CI_ENVIRONMENT=false

ketcher-autotests/README.md

@@ -97,9 +97,26 @@ selectNestedTool - select specific tool that has sub / nested levels.
     - Local frontend: KETCHER_URL=http://host.docker.internal:port (port where you run application)
   - OPTIONAL: IGNORE_UNSTABLE_TESTS=true (if you want to ignore unstable tests)
 - **OPTIONAL: Build frontend**:
-  if you want to run tests based on the localhost:4002, build and run frontend:
+  if you want to run tests based on the localhost:4002, you can put KETCHER_URL=http://localhost:4002
 
-  Directory "ketcher": - `npm ci` - `npm run build:example` - `npm run serve:standalone`
+### Run tests:
+
+- **OPTIONAL: Test Polymer Editor **:
+  If you want to run tests from Polymer Editor, add `ENABLE_POLYMER_EDITOR=true` in scripts:
+
+  - Root package.json: "build": "ENABLE_POLYMER_EDITOR=true npm run build -w example";
+
+- **Run app in browser: from root directory "ketcher"**:
+
+- `npm ci`
+- `npm run build`
+- `npm run serve`
+
+- **Run docker**:
+
+  - `cd ketcher-autotests`
+  - `npm run docker:build`
+  - `npm run docker:test`
 
 ### How to use?
 

ketcher-autotests/package.json

@@ -8,6 +8,7 @@
     "test": "npx playwright test",
     "test:debug": "npx playwright test --debug",
     "test:update": "npx playwright test --update-snapshots",
+    "test:trace": "npx playwright test --trace on --grep @check",
     "check:code": "npm run check:types && npm run check:lint",
     "check:types": "tsc --noEmit",
     "check:lint": "eslint .",
@@ -16,6 +17,7 @@
     "docker": "docker-compose run --rm autotests",
     "docker:build": "docker-compose build autotests",
     "docker:test": "npm run docker npx playwright test",
+    "docker:trace": "npm run docker npm run test:trace",
     "docker:update": "npm run docker npm run test:update",
     "docker:update:test": "npm run docker -- npx playwright test --update-snapshots -g"
   },

ketcher-autotests/playwright.config.ts

@@ -1,4 +1,5 @@
 import * as dotenv from 'dotenv';
+import * as os from 'os';
 import { PlaywrightTestConfig, devices } from '@playwright/test';
 import {
   REMOTE_URL,
@@ -14,18 +15,16 @@ dotenv.config();
 
 const ignoredTests = [
   'API/**',
+  'File-Management/Smile-Files/smile-files.spec.ts',
   'Examples/**',
-  'File-Management/**',
   'Indigo-Tools/**',
   'R-group-tool/**',
   'Reagents/**',
   'Structure-Creating-&-Editing/**',
-  'Templates/Functional-Groups/click-and-drag-fg-on-canvas.spec.ts',
   'Templates/Functional-Groups/functional-groups.spec.ts',
   'Templates/Functional-Groups/Functional-Group-Tools/functional-group-tools.spec.ts',
   'Templates/Salts-and-Solvents/**',
   'Templates/User-Templates/**',
-  'User-Interface/**',
   'utils/**',
 ];
 
@@ -65,9 +64,10 @@ const config: PlaywrightTestConfig = {
   /* Fail the build on CI if you accidentally left test.only in the source code. */
   forbidOnly: Boolean(process.env.CI),
   /* Retry on CI only */
-  retries: process.env.CI ? MAX_NUMBER_OF_RETRIES : 0,
+  retries: process.env.CI_ENVIRONMENT === 'true' ? MAX_NUMBER_OF_RETRIES : 0,
   /* Opt out of parallel tests on CI. */
-  workers: process.env.CI ? 1 : undefined,
+  // eslint-disable-next-line no-magic-numbers
+  workers: process.env.CI ? 2 : os.cpus().length,
   /* Reporter to use. See https://playwright.dev/docs/test-reporters */
   reporter: [
     [

ketcher-autotests/tests/File-Management/Open-And-Save-Files/CDX-Files/cdx-files.spec.ts

@@ -36,7 +36,7 @@ test.describe('CDX files', () => {
     await openFileAndAddToCanvas('cdx_file.cdx', page);
   });
 
-  test('opening cdx files from clickboard', async ({ page }) => {
+  test.fixme('opening cdx files from clipboard', async ({ page }) => {
     /* 
   Test case: EPMLSOPKET-6972
   Description: Open structure created in ChemDraw from clickboard