Merge branch 'main' of https://github.com/cheminfo/nmr-displayer into…

… main
cheminfo · Oct 11, 2022 · 6717e36 · 6717e36
2 parents acd1ab3 + 2d69b50
commit 6717e36
Show file tree

Hide file tree

Showing 6 changed files with 174 additions and 27 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -71,7 +71,7 @@
     "ml-baseline-correction-regression": "^1.0.0",
     "ml-conrec": "^3.2.1",
     "ml-gsd": "^12.1.2",
-    "ml-spectra-processing": "^11.12.0",
+    "ml-spectra-processing": "^11.13.0",
     "ml-stat": "^1.3.3",
     "multiplet-analysis": "^2.0.0",
     "nmr-correlation": "^2.3.3",
@@ -108,7 +108,7 @@
     "@simbathesailor/use-what-changed": "^2.0.0",
     "@types/d3": "^7.4.0",
     "@types/jest": "^29.1.1",
-    "@types/node": "^18.8.1",
+    "@types/node": "^18.8.2",
     "@types/react": "^18.0.21",
     "@types/react-dom": "^18.0.6",
     "@vitejs/plugin-react": "^2.1.0",

diff --git a/src/demo/views/Test.tsx b/src/demo/views/Test.tsx
@@ -1,6 +1,6 @@
 import { DropZone } from 'analysis-ui-components';
 import debounce from 'lodash/debounce';
-import { useState, useEffect, useCallback } from 'react';
+import { useState, useEffect, useCallback, useReducer } from 'react';
 import { ObjectInspector } from 'react-inspector';
 
 import NMRium from '../../component/NMRium';
@@ -63,6 +63,8 @@ function Inspector(data: any) {
 export default function Test(props) {
   const { file, title, baseURL } = props;
   const [data, setData] = useState<any>();
+  const [viewCount, incrementViewCount] = useReducer((a) => a + 1, 0);
+  const [dataCount, incrementDataCount] = useReducer((a) => a + 1, 0);
   useEffect(() => {
     if (file) {
       void loadData(file).then((d) => {
@@ -92,12 +94,14 @@ export default function Test(props) {
     })();
   }, []);
   const viewChangeHandler = (data) => {
+    incrementViewCount();
     setViewCallBack({ activate: true, data });
     setTimeout(() => {
       setViewCallBack(({ data }) => ({ data, activate: false }));
     }, 500);
   };
   const dataChangeHandler = useCallback((data) => {
+    incrementDataCount();
     setDataCallBack({ activate: true, data });
     setTimeout(() => {
       setDataCallBack(({ data }) => ({ data, activate: false }));
@@ -155,6 +159,7 @@ export default function Test(props) {
             data={data}
             onViewChange={viewChangeHandler}
             onDataChange={dataChangeHandler}
+            workspace={props.workspace || null}
           />
         </div>
         <div
@@ -176,7 +181,7 @@ export default function Test(props) {
                   : {}
               }
             >
-              Data Change:
+              <span data-test-id="data-count">{dataCount}</span> - Data Change:
             </h3>
             <Inspector data={dataCallBack.data} />
             <h3
@@ -186,7 +191,7 @@ export default function Test(props) {
                   : {}
               }
             >
-              View Change:
+              <span data-test-id="view-count">{viewCount}</span> - View Change:
             </h3>
             <Inspector data={viewCallBack.data} />
           </div>

diff --git a/test-e2e/NmriumPage.ts b/test-e2e/NmriumPage.ts
@@ -86,28 +86,31 @@ export default class NmriumPage {
     expect(svgLength).toBeLessThan(length * 1.2);
   }
   public async dropFile(file: string | string[]) {
-    const bufferData: string[] = [];
+    const filename: string[] = [];
+
     if (typeof file === 'string') {
+      filename.push(file);
+    } else {
+      filename.push(...file);
+    }
+
+    const bufferData: string[] = [];
+    filename.forEach((f) => {
       const data = `data:application/octet-stream;base64,${readFileSync(
-        `test-e2e/data/${file}`,
+        `test-e2e/data/${f}`,
       ).toString('base64')}`;
+
       bufferData.push(data);
-    } else {
-      file.forEach((f) => {
-        const data = `data:application/octet-stream;base64,${readFileSync(
-          `test-e2e/data/${f}`,
-        ).toString('base64')}`;
-        bufferData.push(data);
-      });
-    }
+    });
+
     const dataTransfer = await this.page.evaluateHandle(
-      async ({ bufferData, fileName }) => {
+      async ({ bufferData, filename }) => {
         const dt = new DataTransfer();
 
         await Promise.all(
-          bufferData.map(async (buffer) => {
+          bufferData.map(async (buffer, i) => {
             const blobData = await fetch(buffer).then((res) => res.blob());
-            const file = new File([blobData], fileName);
+            const file = new File([blobData], filename[i]);
             dt.items.add(file);
           }),
         );
@@ -116,7 +119,7 @@ export default class NmriumPage {
       },
       {
         bufferData,
-        fileName: file,
+        filename,
       },
     );
 

diff --git a/test-e2e/core/basic.test.ts b/test-e2e/core/basic.test.ts
@@ -28,3 +28,39 @@ test('should load and display the 1D and 2D spectrum', async ({ page }) => {
 
   await expect(spectrumLineLocator).toBeVisible();
 });
+
+test('check callbacks count', async ({ page }) => {
+  const nmrium = await NmriumPage.create(page);
+
+  await nmrium.page.click('li >> text=Test');
+  await nmrium.page.click('li >> text=Full cytisine');
+
+  // wait the spectrum to load
+  await expect(nmrium.page.locator('#nmrSVG')).toBeVisible({ timeout: 10000 });
+
+  const dataCount = nmrium.page.locator('[data-test-id="data-count"]');
+  const viewCount = nmrium.page.locator('[data-test-id="view-count"]');
+
+  await expect(dataCount).toContainText('3');
+  await expect(viewCount).toContainText('3');
+
+  //test to 1d
+  const path = (await nmrium.page.getAttribute(
+    '#nmrSVG path.line ',
+    'd',
+  )) as string;
+  expect(path.length).toBeGreaterThan(1000);
+  expect(path).not.toContain('NaN');
+
+  //switch to 2d
+  await nmrium.page.click('_react=InternalTab[tabid="1H,1H"]');
+
+  await expect(dataCount).toContainText('3');
+  await expect(viewCount).toContainText('5');
+
+  const spectrumLineLocator = nmrium.page.locator(
+    'data-test-id=spectrum-line >> nth=0',
+  );
+
+  await expect(spectrumLineLocator).toBeVisible();
+});
diff --git a/test-e2e/panels/structures.test.ts b/test-e2e/panels/structures.test.ts
@@ -474,3 +474,106 @@ test('molecules 1H spectrum', async ({ page, browserName }) => {
     await expect(nmrium.page.locator('.mol-svg-container ')).toBeHidden();
   });
 });
+
+test('check callbacks count on changing structures', async ({ page }) => {
+  const nmrium = await NmriumPage.create(page);
+  const dataCount = nmrium.page.locator('[data-test-id="data-count"]');
+  const viewCount = nmrium.page.locator('[data-test-id="view-count"]');
+  await test.step('open test page', async () => {
+    await nmrium.page.click('li >> text=Test');
+    await nmrium.page.click('li >> text=1H spectrum test');
+    // wait the spectrum to load
+    await expect(
+      nmrium.page.locator('data-test-id=spectrum-line'),
+    ).toBeVisible();
+
+    await expect(dataCount).toContainText('3');
+    await expect(viewCount).toContainText('3');
+  });
+
+  await test.step('Check the visibly of molecule', async () => {
+    // Open the "Structures" panel.
+    await nmrium.clickPanel('Chemical structures');
+    // The molecule SVG rendering should now be visible in the panel.
+    await expect(
+      nmrium.page.locator('.mol-svg-container #molSVG0'),
+    ).toHaveAttribute('xmlns', 'http://www.w3.org/2000/svg');
+    await expect(
+      nmrium.page.locator('.mol-svg-container #molSVG0'),
+    ).toBeVisible();
+
+    // The molecular formula should now be visible in the panel.
+    await expect(nmrium.page.locator('text=C11H14N2O - 190.25')).toBeVisible();
+
+    // The number of molecules should now be visible in the panel.
+    await expect(nmrium.page.locator('text=1 / 1')).toBeVisible();
+  });
+
+  await test.step('Add a second molecule and check the visibility', async () => {
+    // Click on the "Add Molecule" button.
+    await nmrium.page.click('_react=ToolTip[title="Add Molecule"] >>  button');
+
+    // Select the "aromatic ring" tool.
+    await nmrium.page.click('canvas >> nth=0', {
+      position: {
+        x: 35,
+        y: 180,
+      },
+    });
+    // Draw the aromatic ring.
+    await nmrium.page.click('canvas >> nth=1', {
+      position: {
+        x: 50,
+        y: 50,
+      },
+    });
+    // Save the molecule.
+    await nmrium.page.click('text=Save');
+
+    await expect(dataCount).toContainText('4');
+    await expect(viewCount).toContainText('3');
+    // Check the visibility.
+
+    // The molecule SVG rendering should now be visible in the panel.
+    await expect(
+      nmrium.page.locator('.mol-svg-container #molSVG1'),
+    ).toHaveAttribute('xmlns', 'http://www.w3.org/2000/svg');
+    await expect(
+      nmrium.page.locator('.mol-svg-container #molSVG1'),
+    ).toBeVisible();
+
+    // The molecular formula should now be visible in the panel.
+    await expect(nmrium.page.locator('text=C6H12 - 84.16')).toBeVisible();
+
+    // The number of molecules should now be visible in the panel.
+    await expect(nmrium.page.locator('text=2 / 2')).toBeVisible();
+  });
+  await test.step('Check float molecule', async () => {
+    // Check float molecule btn is off.
+    await expect(
+      nmrium.page.locator(
+        '_react=ToolTip[title="Float Molecule"] >> .toggle-active',
+      ),
+    ).toBeHidden();
+    // Click on float molecule button.
+    await nmrium.page.click('_react=ToolTip[title="Float Molecule"] >> button');
+    // Check floated molecule.
+    await expect(nmrium.page.locator('#molSVG')).toBeVisible();
+    // Check float molecule btn is on.
+    await expect(
+      nmrium.page.locator(
+        '_react=ToolTip[title="Float Molecule"] >> .toggle-active',
+      ),
+    ).toBeVisible();
+
+    await expect(dataCount).toContainText('5');
+    await expect(viewCount).toContainText('4');
+  });
+  await test.step('change float position molecule', async () => {
+    await nmrium.page
+      .locator('_react=DraggableStructure >> _react=ButtonAction')
+      .dragTo(nmrium.page.locator('_react=XAxis >> nth=1'), { force: true });
+    await expect(dataCount).toContainText('5');
+    await expect(viewCount).toContainText('5');
+  });
+});