Destroy component after each test, hiding any modal

Author: matthew-white

lib/components/field-key/list.vue

@@ -58,6 +58,7 @@ import { deflate } from 'pako/lib/deflate';
 import FieldKeyNew from './new.vue';
 import alert from '../../mixins/alert';
 import highlight from '../../mixins/highlight';
+import modal from '../../mixins/modal';
 import request from '../../mixins/request';
 
 const QR_CODE_TYPE_NUMBER = 0;
@@ -123,7 +124,7 @@ const POPOVER_CONTENT_TEMPLATE = `
 export default {
   name: 'FieldKeyList',
   components: { FieldKeyNew },
-  mixins: [alert(), request(), highlight()],
+  mixins: [alert(), request(), modal('newFieldKey'), highlight()],
   data() {
     return {
       alert: alert.blank(),

lib/components/form/list.vue

@@ -77,12 +77,13 @@ import moment from 'moment';
 
 import FormNew from './new.vue';
 import alert from '../../mixins/alert';
+import modal from '../../mixins/modal';
 import request from '../../mixins/request';
 
 export default {
   name: 'FormList',
   components: { FormNew },
-  mixins: [alert(), request()],
+  mixins: [alert(), request(), modal('newForm')],
   data() {
     return {
       alert: alert.blank(),

lib/components/modal.vue

@@ -68,9 +68,10 @@ export default {
     $(this.$refs.modal)
       .on('shown.bs.modal', () => this.$emit('shown'))
       .on('hidden.bs.modal', () => this.$emit('hidden'));
-    this.toggle(this.state);
+    if (this.state) this.toggle(this.state);
   },
   beforeDestroy() {
+    this.toggle(false);
     $(this.$refs.modal).off();
   },
   methods: {
@@ -82,6 +83,10 @@ export default {
     modularity, because parent components can use this modal component without
     knowing that it uses Bootstrap. */
     toggle(state) {
+      // For tests in which the component is not attached to the document, we
+      // return immediately rather than calling modal(), because it has side
+      // effects on the document.
+      if (!$.contains(document.body, this.$refs.modal)) return;
       $(this.$refs.modal).modal(state ? 'show' : 'hide');
     },
     modalMousedown(e) {

lib/components/user/list.vue

@@ -68,12 +68,18 @@ import UserNew from './new.vue';
 import UserResetPassword from './reset-password.vue';
 import alert from '../../mixins/alert';
 import highlight from '../../mixins/highlight';
+import modal from '../../mixins/modal';
 import request from '../../mixins/request';
 
 export default {
   name: 'UserList',
   components: { UserNew, UserResetPassword },
-  mixins: [alert(), request(), highlight()],
+  mixins: [
+    alert(),
+    request(),
+    modal(['newUser', 'resetPassword']),
+    highlight()
+  ],
   data() {
     return {
       alert: alert.blank(),

lib/mixins/modal.js

@@ -0,0 +1,26 @@
+/*
+Copyright 2017 Super Adventure Developers
+See the NOTICE file at the top-level directory of this distribution and at
+https://github.com/nafundi/super-adventure/blob/master/NOTICE.
+
+This file is part of Super Adventure. It is subject to the license terms in
+the LICENSE file found in the top-level directory of this distribution and at
+https://www.apache.org/licenses/LICENSE-2.0. No part of Super Adventure,
+including this file, may be copied, modified, propagated, or distributed
+except according to the terms contained in the LICENSE file.
+*/
+export default (modalOrModals) => {
+  const modalNames = typeof modalOrModals === 'string'
+    ? [modalOrModals]
+    : modalOrModals;
+  const hideModals = function hideModals(to, from, next) {
+    for (const name of modalNames)
+      this[name].state = false;
+    this.$nextTick(next);
+  };
+  // @vue/component
+  return {
+    beforeRouteUpdate: hideModals,
+    beforeRouteLeave: hideModals
+  };
+};

test/components/user/new.spec.js

@@ -9,8 +9,6 @@ https://www.apache.org/licenses/LICENSE-2.0. No part of Super Adventure,
 including this file, may be copied, modified, propagated, or distributed
 except according to the terms contained in the LICENSE file.
 */
-import { mount } from 'avoriaz';
-
 import Alert from '../../../lib/components/alert.vue';
 import UserList from '../../../lib/components/user/list.vue';
 import UserNew from '../../../lib/components/user/new.vue';
@@ -68,11 +66,11 @@ describe('UserNew', () => {
     const newUser = { id: 2, email: '[email protected]' };
 
     beforeEach(() => mockHttp()
-      .request(() => {
-        page = mount(UserList);
-      })
+      .mount(UserList)
       .respondWithData([mockUser()])
-      .complete()
+      .afterResponse(component => {
+        page = component;
+      })
       .request(() => clickCreateButton(page).then(submitForm))
       .respondWithData(newUser)
       .respondWithData([mockUser(), newUser]));

test/components/user/reset-password.spec.js

@@ -9,8 +9,6 @@ https://www.apache.org/licenses/LICENSE-2.0. No part of Super Adventure,
 including this file, may be copied, modified, propagated, or distributed
 except according to the terms contained in the LICENSE file.
 */
-import { mount } from 'avoriaz';
-
 import Alert from '../../../lib/components/alert.vue';
 import UserList from '../../../lib/components/user/list.vue';
 import UserResetPassword from '../../../lib/components/user/reset-password.vue';
@@ -60,11 +58,11 @@ describe('UserResetPassword', () => {
   describe('after successful response', () => {
     let page;
     beforeEach(() => mockHttp()
-      .request(() => {
-        page = mount(UserList);
-      })
+      .mount(UserList)
       .respondWithData([mockUser()])
-      .complete()
+      .afterResponse(component => {
+        page = component;
+      })
       .request(() => openModal(page).then(confirmResetPassword))
       .respondWithSuccess());
 

test/destroy.js

@@ -0,0 +1,34 @@
+/*
+Copyright 2017 Super Adventure Developers
+See the NOTICE file at the top-level directory of this distribution and at
+https://github.com/nafundi/super-adventure/blob/master/NOTICE.
+
+This file is part of Super Adventure. It is subject to the license terms in
+the LICENSE file found in the top-level directory of this distribution and at
+https://www.apache.org/licenses/LICENSE-2.0. No part of Super Adventure,
+including this file, may be copied, modified, propagated, or distributed
+except according to the terms contained in the LICENSE file.
+*/
+import { mount } from 'avoriaz';
+
+let componentToDestroy = null;
+
+export const markComponentForDestruction = (component) => {
+  if (componentToDestroy != null)
+    throw new Error('another component has already been marked for destruction and has not been destroyed yet');
+  componentToDestroy = component;
+};
+
+export const destroyMarkedComponent = () => {
+  if (componentToDestroy == null) return;
+  componentToDestroy.vm.$destroy();
+  if (componentToDestroy.vm.$el.parentNode != null)
+    $(componentToDestroy.vm.$el).remove();
+  componentToDestroy = null;
+};
+
+export const mountAndMark = (component, mountOptions = {}) => {
+  const wrapper = mount(component, mountOptions);
+  markComponentForDestruction(wrapper);
+  return wrapper;
+};

test/http.js

@@ -10,10 +10,10 @@ including this file, may be copied, modified, propagated, or distributed
 except according to the terms contained in the LICENSE file.
 */
 import Vue from 'vue';
-import { mount as avoriazMount } from 'avoriaz';
 
 import Alert from '../lib/components/alert.vue';
 import Spinner from '../lib/components/spinner.vue';
+import { mountAndMark } from './destroy';
 
 const REQUEST_METHODS = ['get', 'post', 'delete'];
 
@@ -84,11 +84,15 @@ If you already have a mounted component, you can skip mockHttp().mount():
   ...
 
   mockHttp()
-    .request(component => {
+    .request(() => {
       mockLogin();
       component.vm.$router.push('/users');
     })
 
+  ...
+
+  // Destroy component.
+
 The important thing is that you call either mount() or request() (or both).
 
 After specifying the request, specify the response:
@@ -190,7 +194,7 @@ class MockHttp {
       throw new Error('cannot call mount() more than once in a single chain');
     if (this._previousPromise != null)
       throw new Error('cannot mount component after first series in chain');
-    const mount = () => avoriazMount(component, options);
+    const mount = () => mountAndMark(component, options);
     return new MockHttp(
       this._previousPromise,
       this._component,

test/setup.js

@@ -13,6 +13,7 @@ import Vue from 'vue';
 import 'should';
 
 import { MockLogger } from './util';
+import { destroyMarkedComponent } from './destroy';
 import { setHttp } from './http';
 import '../lib/setup';
 
@@ -24,6 +25,12 @@ setHttp((...args) => {
 });
 
 afterEach(() => {
-  // Remove a component attached to the document if there is one.
-  $('body > script:last-of-type + *').remove()
+  destroyMarkedComponent();
+
+  const afterScript = $('body > script:last-of-type + *');
+  if (afterScript.length > 0) {
+    // eslint-disable-next-line no-console
+    console.log(`Unexpected element: ${afterScript[0].outerHTML}`);
+    throw new Error('Unexpected element after last script element. Have all components and Bootstrap elements been destroyed?');
+  }
 });