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();
  });
  });