diff --git a/package-lock.json b/package-lock.json index 5f5964378..eaed6d749 100644 --- a/package-lock.json +++ b/package-lock.json @@ -31,7 +31,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", @@ -68,7 +68,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", @@ -2370,9 +2370,9 @@ "integrity": "sha512-eHcVlLXP0c2FlMPm56ITode2AgLMSa6aJ05JTTbYbI+7EMkCEE5qk2E41d5g2lCVTqRe0GnnRFurmlCsDODrPw==" }, "node_modules/@types/node": { - "version": "18.8.1", - "resolved": "https://registry.npmjs.org/@types/node/-/node-18.8.1.tgz", - "integrity": "sha512-vuYaNuEIbOYLTLUAJh50ezEbvxrD43iby+lpUA2aa148Nh5kX/AVO/9m1Ahmbux2iU5uxJTNF9g2Y+31uml7RQ==", + "version": "18.8.2", + "resolved": "https://registry.npmjs.org/@types/node/-/node-18.8.2.tgz", + "integrity": "sha512-cRMwIgdDN43GO4xMWAfJAecYn8wV4JbsOGHNfNUIDiuYkUYAR5ec4Rj7IO2SAhFPEfpPtLtUTbbny/TCT7aDwA==", "dev": true }, "node_modules/@types/parse-json": { @@ -8955,9 +8955,9 @@ } }, "node_modules/ml-spectra-processing": { - "version": "11.12.0", - "resolved": "https://registry.npmjs.org/ml-spectra-processing/-/ml-spectra-processing-11.12.0.tgz", - "integrity": "sha512-psqE97HO4BTpdCK8NIdLynds5WL5kBeL2wWBsqGyBiT10eaT13o5RAwbudg7WVm/oQKZrivfZxJJs25EKhajFw==", + "version": "11.13.0", + "resolved": "https://registry.npmjs.org/ml-spectra-processing/-/ml-spectra-processing-11.13.0.tgz", + "integrity": "sha512-4yO+rlNxtYF2taUwF0mGXDe5i1ZMb2N5E/Uj4orcfYGuZJZcN2b5ZggR+8PtxVZYT2GYHKXlxs65nlihiqCujA==", "dependencies": { "binary-search": "^1.3.6", "cheminfo-types": "^1.4.0", diff --git a/package.json b/package.json index f93f6b864..531540bb9 100644 --- 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 index 672c446fa..406ed388b 100644 --- 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(); + 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} />
- Data Change: + {dataCount} - Data Change:

- View Change: + {viewCount} - View Change:

diff --git a/test-e2e/NmriumPage.ts b/test-e2e/NmriumPage.ts index 48eed121e..86047d959 100644 --- 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 index 9e3a0da8f..4dba1d2a4 100644 --- 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 index e29accfe2..94c6f6f48 100644 --- 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'); + }); +});