Generate notification error when up bad URL in remoteManfest.json files

CONTRIBUTING.md

@@ -9,11 +9,13 @@ npm install
 ```
 
 ## Compiles and hot-reloads for development
+
 ```
 npm run dev
 ```
 
 ## Compiles and minifies for production
+
 ```
 npm run build
 ```
@@ -27,6 +29,7 @@ npm run build:analyze
 ```
 
 ## Lints and fixes files
+
 ```
 npm run lint
 ```
@@ -45,28 +48,38 @@ When running end-to-end tests, baseline images are saved to `tests/baseline`. Ba
 
 When adding a new baseline image and test, the image should be pulled from GitHub Actions. Every test run will upload artifacts containing the snapshots taken, and those should be used when verifying and committing the baseline images.
 
+#### Run one e2e spec file
+
+```
+npm run test:e2e:dev -- -- --spec ./tests/specs/remote-manifest.e2e.ts
+```
+
 ## Developing with VTK.js
 
 Follow these steps to develop against a custom development branch of VTK.js:
 
 1. Build and package VTK.js:
+
 ```sh
 path/to/vtk-js > npm run build:esm
 ```
 
 2. Create a symbolic link to the VTK.js distribution folder on your local system:
+
 ```sh
 > cd path/to/vtk-js/dist/esm
 path/to/vtk-js/dist/esm > npm link
 ```
 
 3. Reference the symbolic link in your local VolView build:
+
 ```sh
 > cd path/to/VolView
 path/to/VolView > npm link --no-save @kitware/vtk.js
 ```
 
 4. Build and run VolView:
+
 ```sh
 path/to/VolView > npm run dev
 ```

package.json

@@ -10,7 +10,7 @@
     "build:analyze": "cross-env ANALYZE_BUNDLE=1 npm run build",
     "test": "vitest",
     "test:e2e:chrome": "npm run build && wdio run ./wdio.chrome.conf.ts",
-    "test:e2e:dev": "concurrently \"npm run dev\"  \"wdio run ./wdio.dev.conf.ts --watch\"",
+    "test:e2e:dev": "concurrently -P \"npm run dev\"  \"wdio run ./wdio.dev.conf.ts --watch {@}\"",
     "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 ",
@@ -82,7 +82,7 @@
     "chai-almost": "^1.0.1",
     "chai-as-promised": "7.1.1",
     "chai-subset": "^1.6.0",
-    "chromedriver": "117.0.0",
+    "chromedriver": "^117.0.0",
     "concurrently": "^8.2.2",
     "cross-env": "^7.0.3",
     "eslint": "^7.32.0",
@@ -128,4 +128,4 @@
       "eslint"
     ]
   }
-}
+}

src/components/App.vue

@@ -111,6 +111,7 @@
                 :content="messageCount"
                 :color="messageBadgeColor"
                 :model-value="messageCount > 0"
+                id="notifications"
               >
                 <tool-button
                   size="40"

src/io/import/processors/handleConfig.ts

@@ -12,6 +12,10 @@ const handleConfig: ImportHandler = async (dataSource, { done }) => {
   if (fileSrc?.fileType === 'application/json') {
     try {
       const manifest = await readConfigFile(fileSrc.file);
+      // Don't consume JSON if it has no known key
+      if (Object.keys(manifest).length === 0) {
+        return dataSource;
+      }
       return done({ dataSource, config: manifest });
     } catch (err) {
       throw new Error('Failed to parse config file', {

tests/pageobjects/volview.page.ts

@@ -64,6 +64,25 @@ class VolViewPage extends Page {
     );
   }
 
+  get notifications() {
+    return $('#notifications');
+  }
+
+  async waitForNotification() {
+    const this_ = this;
+    await browser.waitUntil(
+      async () => {
+        const badge = await this_.notifications.$('span[aria-label="Badge"]');
+        const innerText = await badge.getText();
+        const notificationCount = parseInt(innerText, 10);
+        return notificationCount >= 1;
+      },
+      {
+        timeoutMsg: `expected notification badge to display`,
+      }
+    );
+  }
+
   get rectangleButton() {
     return $('button span i[class~=mdi-vector-square]');
   }

tests/specs/remote-manifest.e2e.ts

@@ -0,0 +1,24 @@
+import * as path from 'path';
+import * as fs from 'fs';
+import { cleanuptotal } from 'wdio-cleanuptotal-service';
+import { TEMP_DIR } from '../../wdio.shared.conf';
+import { volViewPage } from '../pageobjects/volview.page';
+
+describe('VolView loading of remoteManifest.json', () => {
+  it('should show error when there is no name and URL is malformed', async () => {
+    const manifest = {
+      resources: [{ url: 'foo' }],
+    };
+    // write object as json to file
+    const fileName = 'remoteFilesBadUrl.json';
+    const filePath = path.join(TEMP_DIR, fileName);
+    await fs.promises.writeFile(filePath, JSON.stringify(manifest));
+    cleanuptotal.addCleanup(async () => {
+      fs.unlinkSync(filePath);
+    });
+
+    const urlParams = `?urls=[tmp/${fileName}]`;
+    await volViewPage.open(urlParams);
+    await volViewPage.waitForNotification();
+  });
+});