chore(remote-manifest.e2e): add test for bad URL in manifest.json

src/components/App.vue

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

tests/pageobjects/volview.page.ts

@@ -64,6 +64,24 @@ 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 notificationCount = parseInt(await badge.getHTML(), 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();
+  });
+});