refactor: Bootstrap Vue Toast in Admin Interface

admin/src/components/ConfirmRegisterMailFormular.spec.js

@@ -1,21 +1,17 @@
 import { mount } from '@vue/test-utils'
 import ConfirmRegisterMailFormular from './ConfirmRegisterMailFormular.vue'
 
+import { toastErrorSpy, toastSuccessSpy } from '../../test/testSetup'
+
 const localVue = global.localVue
 
 const apolloMutateMock = jest.fn().mockResolvedValue()
-const toastSuccessMock = jest.fn()
-const toastErrorMock = jest.fn()
 
 const mocks = {
   $t: jest.fn((t) => t),
   $apollo: {
     mutate: apolloMutateMock,
   },
-  $toasted: {
-    success: toastSuccessMock,
-    error: toastErrorMock,
-  },
 }
 
 const propsData = {
@@ -54,7 +50,7 @@ describe('ConfirmRegisterMailFormular', () => {
       })
 
       it('toasts a success message', () => {
-        expect(toastSuccessMock).toBeCalledWith('unregister_mail.success')
+        expect(toastSuccessSpy).toBeCalledWith('unregister_mail.success')
       })
     })
 
@@ -66,7 +62,7 @@ describe('ConfirmRegisterMailFormular', () => {
       })
 
       it('toasts an error message', () => {
-        expect(toastErrorMock).toBeCalledWith('unregister_mail.error')
+        expect(toastErrorSpy).toBeCalledWith('unregister_mail.error')
       })
     })
   })

admin/src/components/ConfirmRegisterMailFormular.vue

@@ -48,10 +48,10 @@ export default {
           },
         })
         .then(() => {
-          this.$toasted.success(this.$t('unregister_mail.success', { email: this.email }))
+          this.toastSuccess(this.$t('unregister_mail.success', { email: this.email }))
         })
         .catch((error) => {
-          this.$toasted.error(this.$t('unregister_mail.error', { message: error.message }))
+          this.toastError(this.$t('unregister_mail.error', { message: error.message }))
         })
     },
   },

admin/src/locales/de.json

@@ -92,5 +92,7 @@
   "userIsDeleted": "Der Nutzer ist gelöscht. Es können keine GDD mehr geschöpft werden.",
   "user_deleted": "Nutzer ist gelöscht.",
   "user_recovered": "Nutzer ist wiederhergestellt.",
-  "user_search": "Nutzer-Suche"
+  "user_search": "Nutzer-Suche",
+  "error": "Fehler",
+  "success": "Erfolg"
 }

admin/src/locales/en.json

@@ -92,5 +92,7 @@
   "userIsDeleted": "The user is deleted. No more GDD can be created.",
   "user_deleted": "User is deleted.",
   "user_recovered": "User is recovered.",
-  "user_search": "User search"
+  "user_search": "User search",
+  "error": "Error",
+  "success": "Success"
 }

admin/src/main.js

@@ -17,7 +17,7 @@ import { BootstrapVue, IconsPlugin } from 'bootstrap-vue'
 import 'bootstrap/dist/css/bootstrap.css'
 import 'bootstrap-vue/dist/bootstrap-vue.css'
 
-import Toasted from 'vue-toasted'
+import { toasters } from './mixins/toaster'
 
 import { apolloProvider } from './plugins/apolloProvider'
 
@@ -27,17 +27,7 @@ Vue.use(IconsPlugin)
 
 Vue.use(VueApollo)
 
-Vue.use(Toasted, {
-  position: 'top-center',
-  duration: 5000,
-  fullWidth: true,
-  action: {
-    text: 'x',
-    onClick: (e, toastObject) => {
-      toastObject.goAway(0)
-    },
-  },
-})
+Vue.mixin(toasters)
 
 addNavigationGuards(router, store, apolloProvider.defaultClient, i18n)
 

admin/src/mixins/toaster.js

@@ -0,0 +1,29 @@
+export const toasters = {
+  methods: {
+    toastSuccess(message) {
+      this.toast(message, {
+        title: this.$t('success'),
+        variant: 'success',
+      })
+    },
+    toastError(message) {
+      this.toast(message, {
+        title: this.$t('error'),
+        variant: 'danger',
+      })
+    },
+    toast(message, options) {
+      message = message.replace(/^GraphQL error: /, '')
+      this.$bvToast.toast(message, {
+        autoHideDelay: 5000,
+        appendToast: true,
+        solid: true,
+        toaster: 'b-toaster-top-right',
+        headerClass: 'gdd-toaster-title',
+        bodyClass: 'gdd-toaster-body',
+        toastClass: 'gdd-toaster',
+        ...options,
+      })
+    },
+  },
+}

admin/test/testSetup.js

@@ -5,11 +5,18 @@ import { BootstrapVue, IconsPlugin } from 'bootstrap-vue'
 // without this async calls are not working
 import 'regenerator-runtime'
 
+import { toasters } from '../src/mixins/toaster'
+
+export const toastErrorSpy = jest.spyOn(toasters.methods, 'toastError')
+export const toastSuccessSpy = jest.spyOn(toasters.methods, 'toastSuccess')
+
 global.localVue = createLocalVue()
 
 global.localVue.use(BootstrapVue)
 global.localVue.use(IconsPlugin)
 
+global.localVue.mixin(toasters)
+
 // throw errors for vue warnings to force the programmers to take care about warnings
 Vue.config.warnHandler = (w) => {
   throw new Error(w)