refactor tests

niivue/src/components/Menu.ts

@@ -4,8 +4,7 @@ import { Signal, computed, effect, useSignal } from '@preact/signals'
 import { addImagesEvent, addOverlayEvent, openImageFromURL } from '../events'
 import { SLICE_TYPE } from '@niivue/niivue'
 import { ScalingBox } from './ScalingBox'
-import { getMetadataString } from '../utility'
-import { getNumberOfPoints } from '../utility'
+import { getMetadataString, getNumberOfPoints } from '../utility'
 import {
   HeaderDialog,
   ImageSelect,

niivue/src/events.ts

@@ -52,6 +52,8 @@ export function listenToMessages(appProps: AppProps) {
 }
 
 function handleDebugMessage(body: any, appProps: AppProps) {
+  // sending arrays is fine, dataBuffer does not work
+  // sending objects only works with one element inside
   const { nvArray } = appProps
   switch (body) {
     case 'getNCanvas':
@@ -64,8 +66,6 @@ function handleDebugMessage(body: any, appProps: AppProps) {
       break
     case 'getMinMaxOfFirstImage':
       {
-        console.log('nv.volumes:')
-        console.log(nvArray.value[0].volumes[0])
         window.postMessage({
           type: 'debugAnswer',
           body: [nvArray.value[0].volumes[0].cal_min, nvArray.value[0].volumes[0].cal_max],
@@ -131,43 +131,37 @@ function addMeshOverlay(nv: Niivue, item: any, type: string) {
     mesh.layers.pop()
   }
   if (!item.data) {
-    console.log('Running loadFromURL');
     NVMesh.loadLayer(
-      {url: item.uri, 
-      opacity:a.opacity,
-      colormap:a.colormap,
-      colormapNegative:a.colormapNegative,
-      useNegativeCmap:a.useNegativeCmap,
-      cal_min:a.calMin,
-      cal_max:a.calMax,
+      {
+        url: item.uri,
+        opacity: a.opacity,
+        colormap: a.colormap,
+        colormapNegative: a.colormapNegative,
+        useNegativeCmap: a.useNegativeCmap,
+        cal_min: a.calMin,
+        cal_max: a.calMax,
       },
       mesh,
-      )
+    )
   } else {
-    console.log('Running readLayer');
     NVMesh.readLayer(
-    item.uri,
-    item.data,
-    mesh,
-    a.opacity,
-    a.colormap,
-    a.colormapNegative,
-    a.useNegativeCmap,
-    a.calMin,
-    a.calMax,
+      item.uri,
+      item.data,
+      mesh,
+      a.opacity,
+      a.colormap,
+      a.colormapNegative,
+      a.useNegativeCmap,
+      a.calMin,
+      a.calMax,
     )
   }
   mesh.updateMesh(nv.gl)
   nv.opts.isColorbar = true
   nv.updateGLVolume()
   const layerNumber = nv.meshes[0].layers.length - 1
   if (type === 'addMeshCurvature') {
-    nv.setMeshLayerProperty(
-      nv.meshes[0].id,
-      layerNumber,
-      'colorbarVisible',
-      false,
-    )
+    nv.setMeshLayerProperty(nv.meshes[0].id, layerNumber, 'colorbarVisible', false)
   }
 }
 

niivue/tests/Images.spec.ts

@@ -0,0 +1,19 @@
+import { test, expect } from '@playwright/test'
+import { BASE_URL, loadTestImage } from './utils'
+
+test.describe('Loading images', () => {
+  test('loads a test image', async ({ page }) => {
+    await page.goto(BASE_URL)
+
+    await loadTestImage(page)
+
+    expect(await page.waitForSelector('canvas')).toBeTruthy()
+    expect(await page.$$('canvas')).toHaveLength(1)
+    expect(
+      await page.textContent('text=/matrix size: 207 x 256 x 215, voxelsize: 0.74 x 0.74 x 0.74/i'),
+    ).toBeTruthy()
+
+    await loadTestImage(page)
+    expect(await page.$$('canvas')).toHaveLength(2)
+  })
+})

niivue/tests/Menu.spec.ts

@@ -0,0 +1,79 @@
+import { test, expect } from '@playwright/test'
+import { BASE_URL, loadTestImage } from './utils'
+
+test.describe('Menu', () => {
+  test('displays home screen', async ({ page }) => {
+    await page.goto(BASE_URL)
+
+    expect(await page.textContent('text=/Home/i')).toBeTruthy()
+    expect(await page.textContent('text=/Add Image/i')).toBeTruthy()
+    expect(await page.textContent('text=/View/i')).toBeTruthy()
+    expect(await page.textContent('text=/Bookmarklet/i')).toBeTruthy()
+    expect(await page.textContent('text=/Drop Files to load images/i')).toBeTruthy()
+  })
+
+  test('menubar updates with loading images', async ({ page }) => {
+    await page.goto(BASE_URL)
+
+    // initially only these menu items are visible
+    expect(await page.textContent('text=/Home/i')).toBeTruthy()
+    expect(await page.textContent('text=/Add Image/i')).toBeTruthy()
+    expect(await page.textContent('text=/View/i')).toBeTruthy()
+
+    // initially these menu items do not exist
+    expect(await page.$('text=/ColorScale/i')).toBeNull()
+    expect(await page.$('text=/Overlay/i')).toBeNull()
+    expect(await page.$('text=/Header/i')).toBeNull()
+    expect(await page.$('text=/Select/i')).toBeNull()
+
+    // load an image
+    await loadTestImage(page)
+    expect(await page.waitForSelector('canvas')).toBeTruthy()
+    expect(
+      await page.textContent('text=/matrix size: 207 x 256 x 215, voxelsize: 0.74 x 0.74 x 0.74/i'),
+    ).toBeTruthy()
+
+    // after loading an image these are visible
+    expect(await page.textContent('text=/Home/i')).toBeTruthy()
+    expect(await page.textContent('text=/Add Image/i')).toBeTruthy()
+    expect(await page.textContent('text=/View/i')).toBeTruthy()
+    expect(await page.textContent('text=/ColorScale/i')).toBeTruthy()
+    expect(await page.textContent('text=/Overlay/i')).toBeTruthy()
+    expect(await page.textContent('text=/Header/i')).toBeTruthy()
+
+    // the select menu item is only visible after loading 2 images
+    expect(await page.$('text=/Select/i')).toBeNull()
+    await loadTestImage(page)
+    expect(await page.textContent('text=/Select/i')).toBeTruthy()
+  })
+
+  test('loads an image and checks the menu bar', async ({ page }) => {
+    await page.goto(BASE_URL)
+
+    await loadTestImage(page)
+
+    expect(await page.waitForSelector('canvas')).toBeTruthy()
+    expect(await page.$$('canvas')).toHaveLength(1)
+    expect(
+      await page.textContent('text=/matrix size: 207 x 256 x 215, voxelsize: 0.74 x 0.74 x 0.74/i'),
+    ).toBeTruthy()
+
+    const menuBar = ['Home', 'Add Image', 'View', 'ColorScale', 'Overlay', 'Header']
+    for (const item of menuBar) {
+      expect(await page.textContent(`text=/${item}/i`)).toBeTruthy()
+    }
+  })
+
+  test('opens the example image via the menu bar', async ({ page }) => {
+    await page.goto(BASE_URL)
+
+    await page.click('data-testid=menu-item-dropdown-Add Image')
+    await page.click('text=/Example Image/i')
+
+    expect(await page.waitForSelector('canvas')).toBeTruthy()
+    expect(await page.$$('canvas')).toHaveLength(1)
+    expect(
+      await page.textContent('text=/matrix size: 207 x 256 x 215, voxelsize: 0.74 x 0.74 x 0.74/i'),
+    ).toBeTruthy()
+  })
+})

niivue/tests/Meshes.spec.ts

@@ -0,0 +1,33 @@
+import { test, expect } from '@playwright/test'
+import { BASE_URL, loadTestSurfImage, loadTestSurfOverlay } from './utils'
+
+test.describe('Loading meshes', () => {
+  test('loads a test surface', async ({ page }) => {
+    await page.goto(BASE_URL)
+
+    await loadTestSurfImage(page)
+    await page.waitForTimeout(1000) // wait time to work around a bug
+
+    expect(await page.waitForSelector('canvas')).toBeTruthy()
+    expect(await page.$$('canvas')).toHaveLength(1)
+
+    await loadTestSurfImage(page)
+    expect(await page.$$('canvas')).toHaveLength(2)
+
+    expect(await page.textContent('text=/Number of Points: 40962/i')).toBeTruthy()
+  })
+
+  test('loads a test surface and overlay', async ({ page }) => {
+    await page.goto(BASE_URL)
+
+    await loadTestSurfImage(page)
+
+    await page.waitForTimeout(1000) // duplicated code to work around a bug
+    await loadTestSurfImage(page) // duplicated code to work around a bug
+
+    await loadTestSurfOverlay(page, 'curv')
+
+    await page.waitForTimeout(1000) // duplicated code to work around a bug
+    await loadTestSurfOverlay(page, 'curv') // duplicated code to work around a bug
+  })
+})

niivue/tests/LoadingTests.spec.ts → niivue/tests/WithMessage.spec.ts

@@ -1,7 +1,5 @@
 import { test, expect } from '@playwright/test'
-import { waitForDebugger } from 'inspector'
-
-const BASE_URL = 'http://localhost:4000/'
+import { BASE_URL, loadTestImage } from './utils'
 
 test.describe('app', () => {
   test('that there are 0 canvases when no image is loaded', async ({ page }) => {
@@ -66,25 +64,10 @@ test.describe('app', () => {
   })
 })
 
-async function loadTestImage(page) {
-  const testLink = 'https://niivue.github.io/niivue-demo-images/mni152.nii.gz'
-  // send a message to the app to load the test image
-  const message = {
-    type: 'addImage',
-    body: {
-      data: '',
-      uri: testLink,
-    },
-  }
-  await page.evaluate((m) => window.postMessage(m, '*'), message)
-}
-
 function listenForMessage(page) {
   const message = page.evaluate(() => {
     return new Promise((resolve) => {
       window.addEventListener('message', (event) => {
-        console.log(event)
-        console.log(event.data)
         if (event.data?.type == 'debugAnswer') resolve(event.data.body)
       })
     })