Hide alert if user clicks an a[target="_blank"]

src/components/app.vue

@@ -15,7 +15,7 @@ except according to the terms contained in the LICENSE file.
     will affect how the navbar is rendered. -->
     <navbar v-show="anyNavigationConfirmed"/>
     <alert id="app-alert"/>
-    <div class="container-fluid">
+    <div class="container-fluid" @click="hideAlertAfterClick">
       <router-view/>
     </div>
   </div>
@@ -41,6 +41,15 @@ export default {
   }),
   created() {
     this.$once('hook:beforeDestroy', useSessions(this.$router, this.$store));
+  },
+  methods: {
+    hideAlertAfterClick(event) {
+      const alert = this.$alert();
+      if (alert.state && event.target.closest('a[target="_blank"]') != null &&
+        !event.defaultPrevented) {
+        alert.blank();
+      }
+    }
   }
 };
 </script>

test/components/app.spec.js

@@ -0,0 +1,27 @@
+import DocLink from '../../src/components/doc-link.vue';
+import ProjectList from '../../src/components/project/list.vue';
+
+import { load } from '../util/http';
+import { mockLogin } from '../util/session';
+import { trigger } from '../util/event';
+
+describe('App', () => {
+  it('hides the alert if the user clicks an a[target="_blank"]', () => {
+    mockLogin();
+    const preventDefault = (event) => {
+      event.preventDefault();
+    };
+    return load('/', { attachToDocument: true })
+      .then(app => {
+        app.vm.$alert().info('Something happened!');
+        document.addEventListener('click', preventDefault);
+        return trigger.click(app.first(ProjectList).first(DocLink))
+          .then(() => {
+            app.should.not.alert();
+          });
+      })
+      .finally(() => {
+        document.removeEventListener('click', preventDefault);
+      });
+  });
+});

test/components/backup/status.spec.js

@@ -182,41 +182,47 @@ describe('BackupStatus', () => {
     });
 
     describe('after the link is clicked', () => {
+      let defaultPrevented;
+      const handler = (event) => {
+        defaultPrevented = event.defaultPrevented;
+        event.preventDefault();
+      };
+      before(() => {
+        document.addEventListener('click', handler);
+      });
+      after(() => {
+        document.removeEventListener('click', handler);
+      });
+
       it('shows a success alert', async () => {
-        const app = await load('/system/backups');
-        const a = app.first('#backup-status [href="/v1/backup"]');
-        // Needed for Karma.
-        a.element.setAttribute('target', '_blank');
-        await trigger.click(a);
+        const app = await load('/system/backups', { attachToDocument: true });
+        await trigger.click(app, '#backup-status [href="/v1/backup"]');
         app.should.alert('success');
       });
 
       it('disables the link', async () => {
-        const a = mountComponent().first('[href="/v1/backup"]');
-        a.element.setAttribute('target', '_blank');
+        const app = await load('/system/backups', { attachToDocument: true });
+        const a = app.first('#backup-status [href="/v1/backup"]');
         await trigger.click(a);
         a.hasClass('disabled').should.be.true();
       });
 
-      it('prevents default if it is clicked again', () => {
-        const a = mountComponent().first('[href="/v1/backup"]');
-        a.element.setAttribute('target', '_blank');
-        const click = () => a.element.dispatchEvent(new MouseEvent('click', {
-          bubbles: true,
-          cancelable: true
-        }));
-        click().should.be.true();
-        click().should.be.false();
+      it('prevents default if it is clicked again', async () => {
+        const app = await load('/system/backups', { attachToDocument: true });
+        const a = app.first('#backup-status [href="/v1/backup"]');
+        await trigger.click(a);
+        defaultPrevented.should.be.false();
+        trigger.click(a);
+        defaultPrevented.should.be.true();
       });
 
       it('shows a spinner', async () => {
-        const component = mountComponent();
+        const app = await load('/system/backups', { attachToDocument: true });
+        const component = app.first(BackupStatus);
         const spinners = component.find(Spinner);
         spinners.length.should.equal(1);
         spinners[0].getProp('state').should.be.false();
-        const a = component.first('[href="/v1/backup"]');
-        a.element.setAttribute('target', '_blank');
-        await trigger.click(a);
+        await trigger.click(component, '[href="/v1/backup"]');
         spinners[0].getProp('state').should.be.true();
       });
     });