Merge pull request #585 from InsightSoftwareConsortium/cypress-init

Cypress init

.github/workflows/cypress.yml

@@ -0,0 +1,51 @@
+name: Cypress Tests
+
+on: [push,pull_request]
+
+jobs:
+
+  test-cypress:
+    name: itk-wasm browser tests
+    runs-on: ubuntu-20.04
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+
+      - name: Install
+        run: |
+          npm ci
+
+      - name: Build
+        run: |
+          npm run build
+
+      - name: Test with Chrome
+        uses: cypress-io/github-action@v4
+        with:
+          browser: chrome
+          command: npm run test:chrome
+
+      - uses: actions/upload-artifact@v2
+        if: failure()
+        with:
+          name: cypress-screenshots
+          path: cypress/screenshots
+
+      - uses: actions/upload-artifact@v2
+        if: always()
+        with:
+          name: cypress-videos
+          path: cypress/videos
+
+      - name: Test with Firefox
+        uses: cypress-io/github-action@v4
+        with:
+          browser: firefox
+          command: npm run test:firefox
+
+      - uses: actions/upload-artifact@v2
+        if: failure()
+        with:
+          name: cypress-screenshots
+          path: cypress/screenshots

.gitignore

@@ -27,6 +27,7 @@ examples/HelloWorld/wasi-build
 examples/HelloWorld/package-lock.json
 examples/UMD/package-lock.json
 examples/Webpack/package-lock.json
+examples/Webpack/cypress/videos/
 
 test/MedianFilterPipeline/itk-wasm
 test/pipelines/MedianFilterPipeline/web-build
@@ -41,3 +42,6 @@ test/pipelines/MeshReadWritePipeline/web-build/
 test/pipelines/StdoutStderrPipeline/wasi-build/
 test/pipelines/InputOutputFilesPipeline/wasi-build/
 test/pipelines/MeshReadWritePipeline/wasi-build/
+
+cypress/screenshots/
+cypress/videos/

cypress.config.ts

@@ -0,0 +1,11 @@
+import { defineConfig } from "cypress";
+
+export default defineConfig({
+  projectId: '3ow3bt',
+  e2e: {
+    baseUrl: "http://localhost:8083",
+    setupNodeEvents(on, config) {
+      // implement node event listeners here
+    },
+  },
+});

cypress/e2e/core/web_worker_pool.cy.ts

@@ -0,0 +1,65 @@
+import compareImageToBaseline from "../../support/compareImageToBaseline"
+
+describe('WebWorkerPool', () => {
+  beforeEach(() => {
+    cy.visit('/')
+  })
+
+  it('runs and reports progress', () => {
+    cy.window().then((win) => {
+      const itk = win.itk
+      const progressUpdates = []
+      let reportedTotalSplits = null
+      function progressLogger (split, totalSplits) {
+        progressUpdates.push(split)
+        reportedTotalSplits = totalSplits
+      }
+
+      const poolSize = 2
+      const maxTotalSplits = 4
+      const workerPool = new itk.WorkerPool(poolSize, itk.runPipeline)
+
+      const fileName = 'cthead1.png'
+      const testFilePath = 'build-emscripten/ExternalData/test/Input/' + fileName
+      cy.readFile(testFilePath, null).then(async (data) => {
+        const jsFile = await new win.File([data.buffer], fileName)
+
+        const { image, webWorker } = await itk.readImageFile(null, jsFile)
+
+        const taskArgsArray = []
+        for (let index = 0; index < maxTotalSplits; index++) {
+          const pipelinePath = 'MedianFilterTest'
+          const args = ['--memory-io', '0', '0', '--radius', '4', '-m', '' + maxTotalSplits, '-s', '' + index]
+          const desiredOutputs = [
+            { type: itk.InterfaceTypes.Image }
+          ]
+          const data = itk.imageSharedBufferOrCopy(image)
+          const inputs = [
+            { type: itk.InterfaceTypes.Image, data }
+          ]
+          taskArgsArray.push([pipelinePath, args, desiredOutputs, inputs])
+        }
+
+        const results = await workerPool.runTasks(taskArgsArray, progressLogger).promise
+        workerPool.terminateWorkers()
+
+        expect(reportedTotalSplits, 'reported total splits', maxTotalSplits)
+        const imageSplits = results.map(({ outputs }) => outputs[0].data)
+        const stackedImage = itk.stackImages(imageSplits)
+
+        // const { arrayBuffer, webWorker: ww } = await itk.writeImageArrayBuffer(null, stackedImage, 'median.png')
+        // ww.terminate()
+        // const buf = Cypress.Buffer.from(Array.from(new Uint8Array(arrayBuffer)))
+        // cy.writeFile('median.png', buf, null)
+        const baselineFileName = 'web_worker_pool.cy.png'
+        cy.readFile(`build-emscripten/ExternalData/test/Baseline/${baselineFileName}`, null).then(async (baselineArrayBuffer) => {
+          const { image: baseline } = await itk.readImageArrayBuffer(webWorker, baselineArrayBuffer.buffer, baselineFileName)
+          webWorker.terminate()
+
+          compareImageToBaseline(itk, stackedImage, baseline)
+        })
+
+      })
+    })
+  })
+})

cypress/support/commands.ts

@@ -0,0 +1,37 @@
+/// <reference types="cypress" />
+// ***********************************************
+// This example commands.ts shows you how to
+// create various custom commands and overwrite
+// existing commands.
+//
+// For more comprehensive examples of custom
+// commands please read more here:
+// https://on.cypress.io/custom-commands
+// ***********************************************
+//
+//
+// -- This is a parent command --
+// Cypress.Commands.add('login', (email, password) => { ... })
+//
+//
+// -- This is a child command --
+// Cypress.Commands.add('drag', { prevSubject: 'element'}, (subject, options) => { ... })
+//
+//
+// -- This is a dual command --
+// Cypress.Commands.add('dismiss', { prevSubject: 'optional'}, (subject, options) => { ... })
+//
+//
+// -- This will overwrite an existing command --
+// Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... })
+//
+// declare global {
+//   namespace Cypress {
+//     interface Chainable {
+//       login(email: string, password: string): Chainable<void>
+//       drag(subject: string, options?: Partial<TypeOptions>): Chainable<Element>
+//       dismiss(subject: string, options?: Partial<TypeOptions>): Chainable<Element>
+//       visit(originalFn: CommandOriginalFn, url: string, options: Partial<VisitOptions>): Chainable<Element>
+//     }
+//   }
+// }

cypress/support/compareImageToBaseline.ts

@@ -0,0 +1,9 @@
+const compareImageToBaseline = (itk, testImage, baselineImage) => {
+  expect(testImage.imageType, 'imageType').to.deep.equal(baselineImage.imageType)
+  expect(testImage.origin, 'origin').to.deep.equal(baselineImage.origin)
+  expect(testImage.spacing, 'spacing').to.deep.equal(baselineImage.spacing)
+  expect(testImage.size, 'size').to.deep.equal(baselineImage.size)
+  expect(testImage.data, 'data').to.deep.equal(baselineImage.data)
+}
+
+export default compareImageToBaseline

cypress/support/e2e.ts

@@ -0,0 +1,20 @@
+// ***********************************************************
+// This example support/e2e.ts is processed and
+// loaded automatically before your test files.
+//
+// This is a great place to put global configuration and
+// behavior that modifies Cypress.
+//
+// You can change the location of this file or turn off
+// automatically serving support files with the
+// 'supportFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/configuration
+// ***********************************************************
+
+// Import commands.js using ES2015 syntax:
+import './commands'
+
+// Alternatively you can use CommonJS syntax:
+// require('./commands')

dist/umd/index.html

@@ -3,6 +3,7 @@
   <head>
     <meta http-equiv="Content-type" content="text/html; charset=utf-8"/>
     <title>itk-wasm</title>
+    <script src="./itk-wasm.js"></script>
   </head>
   <body>
     <div>
@@ -14,7 +15,6 @@
       <textarea name="fileInformation" rows="200" cols="80">File information...</textarea>
     </div>
 
-    <script src="./itk-wasm.min.js"></script>
     <script>
       function outputFileInformation (event) {
         var dataTransfer = event.dataTransfer

doc/RELEASE.md

@@ -21,10 +21,10 @@ git add -- src/itk-wasm-cli.js
 git commit -m "feat(itk-wasm-cli): Update default Docker image for ${version}"
 ```
 
-Bump `version` in `package.json`, `package-lock.json`, `src/itkConfig.ts`.
+Bump `version` in `package.json`, `package-lock.json`, `src/itkConfig.ts`. `itkConfigDevelopment.ts`
 
 ```
-git add -- package.json package-lock.json src/itkConfig.ts
+git add -- package.json package-lock.json src/itkConfig.ts webpack.config.cjs
 git commit -m "feat(version): Bump version to ${version}"
 npm run build
 npm run test

examples/UMD/dist/index.html

@@ -4,7 +4,7 @@
     <title>itk-wasm UMD Example</title>
     <meta charset="UTF-8" />
     <link rel="stylesheet" href="styles.css">
-    <script src="https://cdn.jsdelivr.net/npm/itk-wasm@1.0.0-b.8/dist/umd/itk-wasm.min.js"></script>
+    <script src="./itk-wasm.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/itk-vtk-viewer@11.12.3/dist/itkVtkViewer.js"></script>
   </head>
 

index.html

@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/src/favicon.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Custom itk-viewer Material UI Demo</title>
+  </head>
+  <body>
+    <div class="content" style="position: absolute; width: 100vw; height: 100vh; top: 0; left: 0; overflow: hidden; background: black; margin: 0; padding: 0;"></div>
+    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/itk-vtk-viewer@11.12.4/dist/itkVtkViewer.js"></script>
+    <script>
+      const container = document.querySelector('.content')
+      const ipfsImage = new URL("https://data.kitware.com/api/v1/file/5b843d468d777f43cc8d4f6b/download/engine.nrrd")
+      const uiMachineOptions = { href: new URL("/src/materialUIMachineOptions.js", document.location.origin).href }
+      itkVtkViewer.createViewer(container,
+        {
+        image: ipfsImage,
+        rotate: false,
+        config: { uiMachineOptions },
+        })
+    </script>
+  </body>
+</html>