chore(test): try running in github actions

.github/workflows/checks.yml

@@ -15,6 +15,6 @@ jobs:
           node-version: 16
       - run: npm ci
       - name: Enforce code style
-        run: npx prettier --config ./prettier.config.js --list-different "src/**/*.[jt]s" "tests/**/*.[jt]s" "src/**/*.vue"
+        run: npx prettier --config ./prettier.config.cjs --list-different "src/**/*.[jt]s" "tests/**/*.[jt]s" "src/**/*.vue"
       - name: Tests
         run: npm test

.github/workflows/e2e.yml

@@ -0,0 +1,20 @@
+name: E2E Testing
+on:
+  pull_request:
+
+jobs:
+  test:
+    name: E2E Testing
+    runs-on: ubuntu-20.04
+    steps:
+      - uses: actions/checkout@v3
+        with:
+          fetch-depth: 0
+      - name: Install dependencies
+        run: |
+          npm ci
+          sudo apt-get install xvfb
+      - name: Build for testing
+        run: npm run build
+      - name: Run E2E on chrome
+        run: xvfb-run --auto-servernum npm run test:e2e:chrome

package.json

@@ -9,16 +9,14 @@
     "build": "vue-tsc --noEmit && vite build",
     "build:analyze": "cross-env ANALYZE_BUNDLE=1 npm run build",
     "test": "vitest",
-    "test:e2e": "npm run build:testing && wdio run ./wdio.conf.ts",
-    "test:e2e:skip-build": "wdio run ./wdio.conf.ts",
+    "test:e2e:chrome": "wdio run ./wdio.chrome.conf.ts",
     "lint": "eslint",
     "build:all": "npm run build:dicom && npm run build:resample && npm run build",
     "build:dicom": "itk-wasm -s src/io/itk-dicom/ build ",
     "build:dicom:debug": "itk-wasm -s src/io/itk-dicom/ build -- -DCMAKE_BUILD_TYPE=Debug",
     "build:resample": "itk-wasm -s src/io/resample/ build ",
     "build:resample:debug": "itk-wasm -s src/io/resample/ build -- -DCMAKE_BUILD_TYPE=Debug",
     "build:watch": "npm run build -- --watch",
-    "build:testing": "cross-env BUILD_MODE=test npm run build",
     "postinstall": "patch-package",
     "prettify": "prettier --write src tests",
     "doc": "kw-doc -c ./documentation/config.js",

tests/pageobjects/volview.page.ts

@@ -1,8 +1,4 @@
-import * as path from 'path';
 import Page from './page';
-import { projectRoot } from '../e2eTestUtils';
-
-const ROOT = projectRoot();
 
 async function waitUntilDownloaded(sample: WebdriverIO.Element, name: string) {
   return sample.$('i[class~="mdi-check"]').waitForExist({
@@ -16,16 +12,16 @@ class VolViewPage extends Page {
     return $('div[data-testid="samples-list"]');
   }
 
-  get ctaHeadAndNeckSample() {
-    return this.samplesList.$('div[title="CTA Head and Neck"]');
+  get prostateSample() {
+    return this.samplesList.$('div[title="MRI PROSTATEx"]');
   }
 
   get layoutGrid() {
     return $('div[data-testid="layout-grid"]');
   }
 
-  async downloadHeadAndNeckSample() {
-    const sample = await this.ctaHeadAndNeckSample;
+  async downloadProstateSample() {
+    const sample = await this.prostateSample;
     await sample.click();
 
     await waitUntilDownloaded(sample, 'CTA Head and Neck');
@@ -43,16 +39,6 @@ class VolViewPage extends Page {
         views.length > 0 && views.every((view) => view.isDisplayedInViewport())
       );
     });
-
-    // This ensures the elements have been painted. No image comparison
-    // is done here.
-    await Promise.all(
-      (
-        await this.views
-      ).map(async (el, idx) => {
-        return el.saveScreenshot(path.join(ROOT, `.tmp/views-${idx}.png`));
-      })
-    );
   }
 }
 

tests/specs/sample-rendering.e2e.ts

@@ -1,16 +1,20 @@
 import AppPage from '../pageobjects/volview.page';
 
+// handle pixel jitter
+const THRESHOLD = 15; // percent
+
 describe('VolView', () => {
-  it('should load', async () => {
+  it('should load and render a sample dataset', async () => {
     await AppPage.open();
-    await AppPage.downloadHeadAndNeckSample();
+    await AppPage.downloadProstateSample();
     await AppPage.waitForViews();
+    await browser.pause(20000);
 
-    const misMatchPercentage = await browser.checkElement(
-      await $('div[data-testid~="vtk-three-view"] > canvas'),
-      'neck_sample_three_view'
-    );
-
-    expect(misMatchPercentage).toBeLessThan(10);
+    expect(
+      await browser.checkElement(
+        await $('div[data-testid~="vtk-three-view"] > canvas'),
+        'prostate_sample_three_view'
+      )
+    ).toBeLessThan(THRESHOLD);
   });
 });

vite.config.ts

@@ -8,29 +8,13 @@ import { viteStaticCopy } from 'vite-plugin-static-copy';
 import { visualizer } from 'rollup-plugin-visualizer';
 import { sentryVitePlugin } from '@sentry/vite-plugin';
 import replace from '@rollup/plugin-replace';
-import { NodeTransform } from '@vue/compiler-dom';
 
 import pkgLock from './package-lock.json';
 
-const IS_TESTING = process.env.BUILD_MODE === 'test';
-
 function resolve(...args) {
   return normalizePath(resolvePath(...args));
 }
 
-const TEST_ID_ATTR = 'data-testid';
-
-const removeTestIdAttrs: NodeTransform = (node) => {
-  if (node.type === 1 /* NodeTypes.ELEMENT */) {
-    // eslint-disable-next-line no-param-reassign
-    node.props = node.props.filter((prop) => {
-      return (
-        prop.type !== 6 /* NodeTypes.ATTRIBUTE */ || prop.name !== TEST_ID_ATTR
-      );
-    });
-  }
-};
-
 const rootDir = resolve(__dirname);
 const nodeModulesDir = resolve(rootDir, 'node_modules');
 const distDir = resolve(rootDir, 'dist');
@@ -119,14 +103,7 @@ export default defineConfig({
       __SENTRY_DEBUG__: false,
       __SENTRY_TRACING__: false,
     }),
-    vue({
-      template: {
-        transformAssetUrls,
-        compilerOptions: {
-          nodeTransforms: !IS_TESTING ? [removeTestIdAttrs] : [],
-        },
-      },
-    }),
+    vue({ template: { transformAssetUrls } }),
     vuetify({
       autoImport: true,
     }),

wdio.chrome.conf.ts

@@ -0,0 +1,11 @@
+import { config } from './wdio.shared.conf';
+
+config.capabilities = [
+  {
+    browserName: 'chrome',
+  },
+];
+
+config.services?.push('chromedriver');
+
+export { config };

wdio.conf.ts → wdio.shared.conf.ts

@@ -3,12 +3,13 @@ import * as fs from 'fs';
 import type { Options } from '@wdio/types';
 import { projectRoot } from './tests/e2eTestUtils';
 
-const TEST_PORT = 4567;
-const WINDOW_SIZE = [1280, 800] as const;
+export const WINDOW_SIZE = [1200, 800] as const;
+export const TEST_PORT = 4567;
+
 const ROOT = projectRoot();
 
 export const config: Options.Testrunner = {
-  //
+  baseUrl: `http://localhost:${TEST_PORT}`,
   // ====================
   // Runner Configuration
   // ====================
@@ -30,51 +31,18 @@ export const config: Options.Testrunner = {
   // ============
   // Capabilities
   // ============
-  maxInstances: 10,
-  capabilities: [
-    {
-      browserName: 'chrome',
-    },
-    {
-      browserName: 'firefox',
-    },
-    // {
-    //   browserName: 'microsoftedge',
-    // },
-    // {
-    //   browserName: 'safari',
-    // },
-  ],
+  maxInstances: 3,
+  capabilities: [],
   //
   // ===================
   // Test Configurations
   // ===================
-  // Level of logging verbosity: trace | debug | info | warn | error | silent
   logLevel: 'info',
-  // If you only want to run your tests until a specific amount of tests have failed use
-  // bail (default is 0 - don't bail, run all tests).
   bail: 0,
-  //
-  // Set a base URL in order to shorten url command calls. If your `url` parameter starts
-  // with `/`, the base url gets prepended, not including the path portion of your baseUrl.
-  // If your `url` parameter starts without a scheme or `/` (like `some/path`), the base url
-  // gets prepended directly.
-  baseUrl: `http://localhost:${TEST_PORT}`,
-  //
-  // Default timeout for all waitFor* commands.
-  waitforTimeout: 10000,
-  //
-  // Default timeout in milliseconds for request
-  // if browser driver or grid doesn't send response
+  waitforTimeout: 30000,
   connectionRetryTimeout: 120000,
-  //
-  // Default request retries count
   connectionRetryCount: 3,
-  //
-  // Test runner services
   services: [
-    'chromedriver',
-    'geckodriver',
     [
       'static-server',
       {
@@ -95,22 +63,16 @@ export const config: Options.Testrunner = {
       },
     ],
   ],
-
-  // Framework you want to run your specs with.
-  // The following are supported: Mocha, Jasmine, and Cucumber
   framework: 'mocha',
-
   reporters: ['spec', 'html-nice'],
-
-  //
-  // Options to be passed to Mocha.
   mochaOpts: {
     ui: 'bdd',
-    timeout: 60000,
+    timeout: 90 * 1000,
   },
 
   //
-  // hooks
+  // Hooks
+  //
 
   onPrepare() {
     fs.mkdirSync(path.resolve(ROOT, '.tmp/'), { recursive: true });