Merge pull request #280 from CoderDojo/error-notify

Global error display query param

Author: Jeddf

package.json

@@ -46,6 +46,7 @@
     "vue-router": "^2.5.3",
     "vue-router-multiguard": "^1.0.3",
     "vue-static-map": "^2.0.0",
+    "vue-toasted": "^1.1.27",
     "vue-trix": "^1.1.0",
     "vue2-google-maps": "^0.7.9",
     "vuex": "^2.3.1"

src/common/base.less

@@ -14,3 +14,7 @@ body {
 .flow {
   margin-bottom: @margin;
 }
+
+.toasted-container .toasted .action {
+  font-size: unset !important;
+}

src/main.js

@@ -5,6 +5,7 @@ import VueResource from 'vue-resource';
 import VeeValidate from 'vee-validate';
 import * as VueGoogleMaps from 'vue2-google-maps';
 import VueAnalytics from 'vue-analytics';
+import VueToasted from 'vue-toasted';
 import PasswordValidator from '@/common/directives/cd-password-validator';
 import titleDirective from '@/common/directives/title';
 import gaTrackClickDirective from '@/common/directives/cd-ga-track-click';
@@ -26,6 +27,7 @@ Vue.config.projectsUrlBase = process.env.PROJECTS_URL_BASE;
 
 Vue.use(VueResource);
 Vue.use(VeeValidate);
+Vue.use(VueToasted);
 Vue.use(VueGoogleMaps, {
   load: {
     key: Vue.config.googleMapsApiKey,

src/router/errorDisplayGuard.js

@@ -0,0 +1,25 @@
+import Vue from 'vue';
+
+function notifyError(error) {
+  Vue.toasted.show(error, {
+    duration: 10000,
+    type: 'error',
+    keepOnHover: true,
+    action: {
+      text: 'X',
+      onClick: (e, toastObject) => {
+        toastObject.goAway(0);
+      },
+    },
+  });
+}
+
+export default function errorDisplayGuard(to, from, next) {
+  const { error, ...queryWithoutError } = to.query;
+  if (error) {
+    notifyError(error);
+    next({ ...to, query: queryWithoutError || {} });
+  } else {
+    next();
+  }
+}

src/router/index.js

@@ -1,6 +1,6 @@
 import Vue from 'vue';
 import Router from 'vue-router';
-import MultiGuard from 'vue-router-multiguard';
+import multiguard from 'vue-router-multiguard';
 import DojoDetails from '@/dojos/cd-dojo-details';
 import FindDojo from '@/dojos/cd-find-dojo';
 import UserTickets from '@/users/cd-tickets';
@@ -20,9 +20,9 @@ import loggedInNavGuard from './loggedInNavGuard';
 import loggedInCDFNavGuard from './loggedInCDFNavGuard';
 import profileAuthRedirect from './profileAuthRedirect';
 import orderExistsNavGuard from './orderExistsNavGuard';
+import errorDisplayGuard from './errorDisplayGuard';
 import ticketingAdminNavGuard from './ticketingAdminNavGuard';
 
-
 Vue.use(Router);
 
 const router = new Router({
@@ -43,10 +43,12 @@ const router = new Router({
       component: {
         template: '<router-view :key="$route.fullPath"></router-view>',
       },
-      async beforeEnter(to, from, next) {
-        await store.dispatch('getLoggedInUser');
-        next();
-      },
+      beforeEnter: multiguard([
+        errorDisplayGuard,
+        (to, from, next) => {
+          store.dispatch('getLoggedInUser').then(() => next());
+        },
+      ]),
       children: [
         {
           path: '',
@@ -91,13 +93,13 @@ const router = new Router({
           path: '/dashboard/dojos/:dojoId/events/new',
           name: 'NewEventForm',
           component: EventForm,
-          beforeEnter: MultiGuard([loggedInNavGuard, ticketingAdminNavGuard]),
+          beforeEnter: multiguard([loggedInNavGuard, ticketingAdminNavGuard]),
         },
         {
           path: '/dashboard/dojos/:dojoId/events/:eventId/edit',
           name: 'EditEventForm',
           component: EventForm,
-          beforeEnter: MultiGuard([loggedInNavGuard, ticketingAdminNavGuard]),
+          beforeEnter: multiguard([loggedInNavGuard, ticketingAdminNavGuard]),
         },
         {
           path: '/dashboard/dojos/:dojoId/join-requests/:requestId/status/:status',
@@ -152,7 +154,7 @@ const router = new Router({
           path: 'events/:eventId/confirmation',
           name: 'EventBookingConfirmation',
           component: BookingConfirmation,
-          beforeEnter: MultiGuard([loggedInNavGuard, orderExistsNavGuard]),
+          beforeEnter: multiguard([loggedInNavGuard, orderExistsNavGuard]),
           props: true,
         },
         {
@@ -183,3 +185,4 @@ const router = new Router({
 });
 
 export default router;
+

test/unit/specs/router/errorDisplayGuard.spec.js

@@ -0,0 +1,58 @@
+import errorDisplayGuard from 'inject-loader!@/router/errorDisplayGuard';
+
+describe('errorDisplayGuard', () => {
+  let MockVue;
+  let errorDisplayGuardWithMock;
+  let nextMock;
+
+  beforeEach(() => {
+    MockVue = {
+      toasted: { show: sinon.stub() },
+    };
+    nextMock = sinon.stub();
+    errorDisplayGuardWithMock = errorDisplayGuard({
+      vue: MockVue,
+    }).default;
+  });
+
+  describe('with no error query param', () => {
+    it('should continue if no error query param', async () => {
+      // ACT
+      await errorDisplayGuardWithMock({ query: {} }, {}, nextMock);
+
+      // ASSERT
+      expect(nextMock).to.have.been.calledOnce;
+      expect(nextMock).to.have.been.calledWith();
+      expect(MockVue.toasted.show).not.to.have.been.called;
+    });
+  });
+
+  describe('with error query param', () => {
+    // ARRANGE
+    const mockTo = {
+      path: '/mockPath',
+      query: {
+        otherQuery: 'mockValue',
+        error: 'Mock Error Message',
+      },
+    };
+    it('should call toast show with error query param', async () => {
+      // ACT
+      await errorDisplayGuardWithMock(mockTo, {}, nextMock);
+
+      // ASSERT
+      expect(MockVue.toasted.show).to.have.been.calledWith(mockTo.query.error);
+    });
+    it('should call next with same to object but with the query excluding error', async () => {
+      // ACT
+      await errorDisplayGuardWithMock(mockTo, {}, nextMock);
+
+      // ASSERT
+      expect(nextMock).to.have.been.calledOnce;
+      const calledTo = nextMock.firstCall.args[0];
+      expect(calledTo.path).to.equal(mockTo.path);
+      expect(calledTo.query).to.have.property('otherQuery', mockTo.query.otherQuery);
+      expect(calledTo.query).not.to.have.property('error');
+    });
+  });
+});

yarn.lock

@@ -8761,6 +8761,11 @@ vue-template-es2015-compiler@^1.2.2:
   version "1.5.3"
   resolved "https://registry.yarnpkg.com/vue-template-es2015-compiler/-/vue-template-es2015-compiler-1.5.3.tgz#22787de4e37ebd9339b74223bc467d1adee30545"
 
+vue-toasted@^1.1.27:
+  version "1.1.27"
+  resolved "https://registry.yarnpkg.com/vue-toasted/-/vue-toasted-1.1.27.tgz#ce0a74b875f90c2e4a9e163cce6d5fc37d78a07c"
+  integrity sha512-GVbwInwnqkVxQ4GU/XYeQt1e0dAXL8sF5Hr1H/coCBbYUan5xP0G2mEz/HRDf1lt73rFQAN/bJcLTOKkqiM6tg==
+
 vue-trix@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/vue-trix/-/vue-trix-1.1.0.tgz#62468fcc8dce7269fd5662b95588b8bd6bd06bc2"