Merge pull request #1499 from gradido/use-bv-toast

refactor: Use Bootstrap Vue Toast

frontend/package.json

@@ -62,7 +62,6 @@
     "vue-qrcode": "^0.3.5",
     "vue-qrcode-reader": "^2.3.16",
     "vue-router": "^3.0.6",
-    "vue-toasted": "^1.1.28",
     "vue2-transitions": "^0.2.3",
     "vuex": "^3.6.0",
     "vuex-persistedstate": "^4.0.0-beta.3"

frontend/src/App.vue

@@ -41,6 +41,15 @@ export default {
 }
 </script>
 <style>
+.gdd-toaster-title {
+  color: #ffffff !important;
+}
+.gdd-toaster-body {
+  color: #ffffff !important;
+}
+.gdd-toaster {
+  color: #ffffff;
+}
 .btn-primary pim {
   background-color: #5a7b02;
   border-color: #5e72e4;

frontend/src/locales/de.json

@@ -209,6 +209,7 @@
       "title": "Danke!"
     }
   },
+  "success": "Erfolg",
   "transaction": {
     "gdd-text": "Gradido Transaktionen",
     "gdt-text": "GradidoTransform Transaktionen",

frontend/src/locales/en.json

@@ -209,6 +209,7 @@
       "title": "Thank you!"
     }
   },
+  "success": "Success",
   "transaction": {
     "gdd-text": "Gradido Transactions",
     "gdt-text": "GradidoTransform Transactions",

frontend/src/main.js

@@ -3,6 +3,7 @@ import DashboardPlugin from './plugins/dashboard-plugin'
 import App from './App.vue'
 import i18n from './i18n.js'
 import { loadAllRules } from './validation-rules'
+import { toasters } from './mixins/toaster'
 
 import 'regenerator-runtime'
 
@@ -18,15 +19,7 @@ import { apolloProvider } from './plugins/apolloProvider'
 Vue.use(DashboardPlugin)
 Vue.config.productionTip = false
 
-Vue.toasted.register(
+Vue.mixin(toasters)
-  'error',
-  (payload) => {
-    return payload.replace(/^GraphQL error: /, '')
-  },
-  {
-    type: 'error',
-  },
-)
 
 loadAllRules(i18n)
 

frontend/src/mixins/getCommunityInfo.js

@@ -13,7 +13,7 @@ export const getCommunityInfoMixin = {
             return result.data.getCommunityInfo
           })
           .catch((error) => {
-            this.$toasted.global.error(error.message)
+            this.toastError(error.message)
           })
       }
     },

frontend/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.error'),
+        variant: 'danger',
+      })
+    },
+    toast(message, options) {
+      message = message.replace(/^GraphQL error: /, '')
+      this.$bvToast.toast(message, {
+        autoHideDelay: 5000,
+        appendToast: false,
+        solid: true,
+        toaster: 'b-toaster-top-right',
+        headerClass: 'gdd-toaster-title',
+        bodyClass: 'gdd-toaster-body',
+        toastClass: 'gdd-toaster',
+        ...options,
+      })
+    },
+  },
+}

frontend/src/plugins/dashboard-plugin.js

@@ -1,7 +1,6 @@
 import GlobalComponents from './globalComponents'
 import GlobalDirectives from './globalDirectives'
 
-import Toasted from 'vue-toasted'
 import PortalVue from 'portal-vue'
 
 // vue-bootstrap
@@ -30,16 +29,5 @@ export default {
     Vue.use(FlatPickr)
     Vue.use(Loading)
     Vue.use(VueApollo)
-    Vue.use(Toasted, {
-      position: 'top-center',
-      duration: 5000,
-      fullWidth: true,
-      action: {
-        text: 'x',
-        onClick: (e, toastObject) => {
-          toastObject.goAway(0)
-        },
-      },
-    })
   },
 }

frontend/src/plugins/dashboard-plugin.test.js

@@ -4,13 +4,10 @@ import Vue from 'vue'
 import GlobalComponents from './globalComponents'
 import GlobalDirectives from './globalDirectives'
 
-import Toasted from 'vue-toasted'
-
 import './assets/scss/app.scss'
 
 jest.mock('./globalComponents')
 jest.mock('./globalDirectives')
-jest.mock('vue-toasted')
 
 jest.mock('vue')
 
@@ -27,21 +24,4 @@ describe('dashboard plugin', () => {
   it('installs the global directives', () => {
     expect(vueUseMock).toBeCalledWith(GlobalDirectives)
   })
-
-  describe('vue toasted', () => {
-    const toastedAction = vueUseMock.mock.calls[9][1].action.onClick
-    const goAwayMock = jest.fn()
-    const toastObject = {
-      goAway: goAwayMock,
-    }
-
-    it('installs vue toasted', () => {
-      expect(vueUseMock).toBeCalledWith(Toasted, expect.anything())
-    })
-
-    it('onClick calls goAway(0)', () => {
-      toastedAction({}, toastObject)
-      expect(goAwayMock).toBeCalledWith(0)
-    })
-  })
 })

frontend/src/views/Layout/DashboardLayout_gdd.spec.js

@@ -2,6 +2,8 @@ import { mount, RouterLinkStub } from '@vue/test-utils'
 import flushPromises from 'flush-promises'
 import DashboardLayoutGdd from './DashboardLayout_gdd'
 
+import { toastErrorSpy } from '../../../test/testSetup'
+
 jest.useFakeTimers()
 
 jest.setTimeout(30000)
@@ -16,7 +18,6 @@ const apolloMock = jest.fn().mockResolvedValue({
     logout: 'success',
   },
 })
-const toasterMock = jest.fn()
 
 describe('DashboardLayoutGdd', () => {
   let wrapper
@@ -38,11 +39,6 @@ describe('DashboardLayoutGdd', () => {
         path: '/overview',
       },
     },
-    $toasted: {
-      global: {
-        error: toasterMock,
-      },
-    },
     $apollo: {
       query: apolloMock,
     },
@@ -219,8 +215,8 @@ describe('DashboardLayoutGdd', () => {
           expect(wrapper.vm.pending).toBeTruthy()
         })
 
-        it('calls $toasted.global.error method', () => {
+        it('toasts the error message', () => {
-          expect(toasterMock).toBeCalledWith('Ouch!')
+          expect(toastErrorSpy).toBeCalledWith('Ouch!')
         })
       })
 

frontend/src/views/Layout/DashboardLayout_gdd.vue

@@ -102,7 +102,7 @@ export default {
         .catch((error) => {
           this.pending = true
           this.transactionCount = -1
-          this.$toasted.global.error(error.message)
+          this.toastError(error.message)
           // what to do when loading balance fails?
         })
     },

frontend/src/views/Pages/AccountOverview/GdtTransactionList.spec.js

@@ -2,6 +2,8 @@ import { mount } from '@vue/test-utils'
 import { GdtEntryType } from '../../../graphql/enums'
 import GdtTransactionList from './GdtTransactionList'
 
+import { toastErrorSpy } from '../../../../test/testSetup'
+
 const localVue = global.localVue
 
 const apolloMock = jest.fn().mockResolvedValue({
@@ -13,7 +15,6 @@ const apolloMock = jest.fn().mockResolvedValue({
   },
 })
 
-const toastErrorMock = jest.fn()
 const windowScrollToMock = jest.fn()
 
 window.scrollTo = windowScrollToMock
@@ -36,11 +37,6 @@ describe('GdtTransactionList ', () => {
     $t: jest.fn((t) => t),
     $n: jest.fn((n) => n),
     $d: jest.fn((d) => d),
-    $toasted: {
-      global: {
-        error: toastErrorMock,
-      },
-    },
     $apollo: {
       query: apolloMock,
     },
@@ -152,7 +148,7 @@ describe('GdtTransactionList ', () => {
       })
 
       it('toasts an error message', () => {
-        expect(toastErrorMock).toBeCalledWith('Ouch!')
+        expect(toastErrorSpy).toBeCalledWith('Ouch!')
       })
     })
 

frontend/src/views/Pages/AccountOverview/GdtTransactionList.vue

@@ -74,7 +74,7 @@ export default {
           window.scrollTo(0, 0)
         })
         .catch((error) => {
-          this.$toasted.global.error(error.message)
+          this.toastError(error.message)
         })
     },
   },

frontend/src/views/Pages/Login.spec.js

@@ -2,6 +2,8 @@ import { RouterLinkStub, mount } from '@vue/test-utils'
 import flushPromises from 'flush-promises'
 import Login from './Login'
 
+import { toastErrorSpy } from '../../../test/testSetup'
+
 const localVue = global.localVue
 
 const apolloQueryMock = jest.fn().mockResolvedValue({
@@ -15,7 +17,6 @@ const apolloQueryMock = jest.fn().mockResolvedValue({
   },
 })
 
-const toastErrorMock = jest.fn()
 const mockStoreDispach = jest.fn()
 const mockStoreCommit = jest.fn()
 const mockRouterPush = jest.fn()
@@ -51,11 +52,6 @@ describe('Login', () => {
     $router: {
       push: mockRouterPush,
     },
-    $toasted: {
-      global: {
-        error: toastErrorMock,
-      },
-    },
     $apollo: {
       query: apolloQueryMock,
     },
@@ -96,7 +92,7 @@ describe('Login', () => {
       })
 
       it('toasts an error message', () => {
-        expect(toastErrorMock).toBeCalledWith('Failed to get communities')
+        expect(toastErrorSpy).toBeCalledWith('Failed to get communities')
       })
     })
 
@@ -249,7 +245,7 @@ describe('Login', () => {
           })
 
           it('toasts an error message', () => {
-            expect(toastErrorMock).toBeCalledWith('error.no-account')
+            expect(toastErrorSpy).toBeCalledWith('error.no-account')
           })
 
           describe('login fails with "User email not validated"', () => {

frontend/src/views/Pages/Login.vue

@@ -105,7 +105,7 @@ export default {
           loader.hide()
         })
         .catch((error) => {
-          this.$toasted.global.error(this.$t('error.no-account'))
+          this.toastError(this.$t('error.no-account'))
           if (error.message.includes('User email not validated')) {
             this.$router.push('/thx/login')
           } else if (error.message.includes('User has no password set yet')) {

frontend/src/views/Pages/Register.spec.js

@@ -1,8 +1,9 @@
 import { mount, RouterLinkStub } from '@vue/test-utils'
 import flushPromises from 'flush-promises'
-
 import Register from './Register'
 
+import { toastErrorSpy } from '../../../test/testSetup'
+
 const localVue = global.localVue
 
 const apolloQueryMock = jest.fn().mockResolvedValue({
@@ -16,7 +17,6 @@ const apolloQueryMock = jest.fn().mockResolvedValue({
   },
 })
 
-const toastErrorMock = jest.fn()
 const mockStoreCommit = jest.fn()
 const registerUserMutationMock = jest.fn()
 const routerPushMock = jest.fn()
@@ -48,11 +48,6 @@ describe('Register', () => {
         publisherId: 12345,
       },
     },
-    $toasted: {
-      global: {
-        error: toastErrorMock,
-      },
-    },
   }
 
   const stubs = {
@@ -96,7 +91,7 @@ describe('Register', () => {
       })
 
       it('toasts an error message', () => {
-        expect(toastErrorMock).toBeCalledWith('Failed to get communities')
+        expect(toastErrorSpy).toBeCalledWith('Failed to get communities')
       })
     })
 

frontend/src/views/Pages/RegisterCommunity.spec.js

@@ -1,6 +1,8 @@
 import { mount, RouterLinkStub } from '@vue/test-utils'
 import RegisterCommunity from './RegisterCommunity'
 
+import { toastErrorSpy } from '../../../test/testSetup'
+
 const localVue = global.localVue
 
 const apolloQueryMock = jest.fn().mockResolvedValue({
@@ -13,7 +15,7 @@ const apolloQueryMock = jest.fn().mockResolvedValue({
     },
   },
 })
-const toastErrorMock = jest.fn()
+
 const mockStoreCommit = jest.fn()
 
 describe('RegisterCommunity', () => {
@@ -36,11 +38,6 @@ describe('RegisterCommunity', () => {
         },
       },
     },
-    $toasted: {
-      global: {
-        error: toastErrorMock,
-      },
-    },
   }
 
   const stubs = {
@@ -78,7 +75,7 @@ describe('RegisterCommunity', () => {
       })
 
       it('toasts an error message', () => {
-        expect(toastErrorMock).toBeCalledWith('Failed to get communities')
+        expect(toastErrorSpy).toBeCalledWith('Failed to get communities')
       })
     })
 

frontend/src/views/Pages/RegisterSelectCommunity.spec.js

@@ -2,6 +2,8 @@ import { mount, RouterLinkStub } from '@vue/test-utils'
 import { communities, communityInfo } from '../../graphql/queries'
 import RegisterSelectCommunity from './RegisterSelectCommunity'
 
+import { toastErrorSpy } from '../../../test/testSetup'
+
 const localVue = global.localVue
 
 const spinnerHideMock = jest.fn()
@@ -52,7 +54,6 @@ const apolloQueryMock = jest
     },
   })
 
-const toasterMock = jest.fn()
 const mockStoreCommit = jest.fn()
 
 describe('RegisterSelectCommunity', () => {
@@ -78,11 +79,6 @@ describe('RegisterSelectCommunity', () => {
     $loading: {
       show: spinnerMock,
     },
-    $toasted: {
-      global: {
-        error: toasterMock,
-      },
-    },
   }
 
   const stubs = {
@@ -129,7 +125,7 @@ describe('RegisterSelectCommunity', () => {
       })
 
       it('toasts an error message', () => {
-        expect(toasterMock).toBeCalledWith('Failed to get communities')
+        expect(toastErrorSpy).toBeCalledWith('Failed to get communities')
       })
     })
 
@@ -208,7 +204,7 @@ describe('RegisterSelectCommunity', () => {
         })
 
         it('toast an error', () => {
-          expect(toasterMock).toBeCalledWith('Wrong thing')
+          expect(toastErrorSpy).toBeCalledWith('Wrong thing')
         })
 
         it('hides the spinner', () => {

frontend/src/views/Pages/RegisterSelectCommunity.vue

@@ -76,7 +76,7 @@ export default {
           )
         })
         .catch((error) => {
-          this.$toasted.global.error(error.message)
+          this.toastError(error.message)
         })
       loader.hide()
       this.pending = false

frontend/src/views/Pages/ResetPassword.spec.js

@@ -2,13 +2,14 @@ import { mount, RouterLinkStub } from '@vue/test-utils'
 import ResetPassword from './ResetPassword'
 import flushPromises from 'flush-promises'
 
+import { toastErrorSpy } from '../../../test/testSetup'
+
 // validation is tested in src/views/Pages/UserProfile/UserCard_FormUserPasswort.spec.js
 
 const localVue = global.localVue
 
 const apolloMutationMock = jest.fn()
 
-const toasterMock = jest.fn()
 const routerPushMock = jest.fn()
 
 const stubs = {
@@ -29,11 +30,6 @@ const mocks = {
       includes: jest.fn((t) => t === mocks.$route.path.mock),
     },
   },
-  $toasted: {
-    global: {
-      error: toasterMock,
-    },
-  },
   $router: {
     push: routerPushMock,
   },
@@ -65,7 +61,7 @@ describe('ResetPassword', () => {
       })
 
       it.skip('toasts an error when no valid optin is given', () => {
-        expect(toasterMock).toHaveBeenCalledWith('error')
+        expect(toastErrorSpy).toHaveBeenCalledWith('error')
       })
 
       it.skip('has a message suggesting to contact the support', () => {
@@ -157,7 +153,7 @@ describe('ResetPassword', () => {
           })
 
           it('toasts an error message', () => {
-            expect(toasterMock).toHaveBeenCalledWith('...Code is older than 10 minutes')
+            expect(toastErrorSpy).toHaveBeenCalledWith('...Code is older than 10 minutes')
           })
 
           it('router pushes to /password/reset', () => {
@@ -174,7 +170,7 @@ describe('ResetPassword', () => {
           })
 
           it('toasts an error message', () => {
-            expect(toasterMock).toHaveBeenCalledWith('Error')
+            expect(toastErrorSpy).toHaveBeenCalledWith('Error')
           })
         })
 

frontend/src/views/Pages/ResetPassword.vue

@@ -99,7 +99,7 @@ export default {
           }
         })
         .catch((error) => {
-          this.$toasted.global.error(error.message)
+          this.toastError(error.message)
           if (error.message.includes('Code is older than 10 minutes'))
             this.$router.push('/password/reset')
         })

frontend/src/views/Pages/UserProfile/UserCard_CoinAnimation.spec.js

@@ -2,12 +2,12 @@ import { mount } from '@vue/test-utils'
 import UserCardCoinAnimation from './UserCard_CoinAnimation'
 import { updateUserInfos } from '../../../graphql/mutations'
 
+import { toastErrorSpy, toastSuccessSpy } from '../../../../test/testSetup'
+
 const localVue = global.localVue
 
 const mockAPIcall = jest.fn()
 
-const toastErrorMock = jest.fn()
-const toastSuccessMock = jest.fn()
 const storeCommitMock = jest.fn()
 
 describe('UserCard_CoinAnimation', () => {
@@ -22,12 +22,6 @@ describe('UserCard_CoinAnimation', () => {
       },
       commit: storeCommitMock,
     },
-    $toasted: {
-      success: toastSuccessMock,
-      global: {
-        error: toastErrorMock,
-      },
-    },
     $apollo: {
       mutate: mockAPIcall,
     },
@@ -78,7 +72,7 @@ describe('UserCard_CoinAnimation', () => {
       })
 
       it('toasts a success message', () => {
-        expect(toastSuccessMock).toBeCalledWith('settings.coinanimation.True')
+        expect(toastSuccessSpy).toBeCalledWith('settings.coinanimation.True')
       })
     })
 
@@ -109,7 +103,7 @@ describe('UserCard_CoinAnimation', () => {
       })
 
       it('toasts a success message', () => {
-        expect(toastSuccessMock).toBeCalledWith('settings.coinanimation.False')
+        expect(toastSuccessSpy).toBeCalledWith('settings.coinanimation.False')
       })
     })
 
@@ -126,7 +120,7 @@ describe('UserCard_CoinAnimation', () => {
       })
 
       it('toasts an error message', () => {
-        expect(toastErrorMock).toBeCalledWith('Ouch')
+        expect(toastErrorSpy).toBeCalledWith('Ouch')
       })
     })
   })

frontend/src/views/Pages/UserProfile/UserCard_CoinAnimation.vue

@@ -50,7 +50,7 @@ export default {
         })
         .then(() => {
           this.$store.commit('coinanimation', this.CoinAnimationStatus)
-          this.$toasted.success(
+          this.toastSuccess(
             this.CoinAnimationStatus
               ? this.$t('settings.coinanimation.True')
               : this.$t('settings.coinanimation.False'),
@@ -58,7 +58,7 @@ export default {
         })
         .catch((error) => {
           this.CoinAnimationStatus = this.$store.state.coinanimation
-          this.$toasted.global.error(error.message)
+          this.toastError(error.message)
         })
     },
   },

frontend/src/views/Pages/UserProfile/UserCard_FormUserData.spec.js

@@ -2,12 +2,12 @@ import { mount } from '@vue/test-utils'
 import UserCardFormUserData from './UserCard_FormUserData'
 import flushPromises from 'flush-promises'
 
+import { toastErrorSpy, toastSuccessSpy } from '../../../../test/testSetup'
+
 const localVue = global.localVue
 
 const mockAPIcall = jest.fn()
 
-const toastErrorMock = jest.fn()
-const toastSuccessMock = jest.fn()
 const storeCommitMock = jest.fn()
 
 describe('UserCard_FormUserData', () => {
@@ -22,12 +22,6 @@ describe('UserCard_FormUserData', () => {
       },
       commit: storeCommitMock,
     },
-    $toasted: {
-      success: toastSuccessMock,
-      global: {
-        error: toastErrorMock,
-      },
-    },
     $apollo: {
       mutate: mockAPIcall,
     },
@@ -126,7 +120,7 @@ describe('UserCard_FormUserData', () => {
         })
 
         it('toasts a success message', () => {
-          expect(toastSuccessMock).toBeCalledWith('settings.name.change-success')
+          expect(toastSuccessSpy).toBeCalledWith('settings.name.change-success')
         })
 
         it('has an edit button again', () => {
@@ -159,7 +153,7 @@ describe('UserCard_FormUserData', () => {
         })
 
         it('toasts an error message', () => {
-          expect(toastErrorMock).toBeCalledWith('Error')
+          expect(toastErrorSpy).toBeCalledWith('Error')
         })
       })
     })

frontend/src/views/Pages/UserProfile/UserCard_FormUserData.vue

@@ -108,10 +108,10 @@ export default {
           this.$store.commit('firstName', this.form.firstName)
           this.$store.commit('lastName', this.form.lastName)
           this.showUserData = true
-          this.$toasted.success(this.$t('settings.name.change-success'))
+          this.toastSuccess(this.$t('settings.name.change-success'))
         })
         .catch((error) => {
-          this.$toasted.global.error(error.message)
+          this.toastError(error.message)
         })
     },
   },

frontend/src/views/Pages/UserProfile/UserCard_FormUserPasswort.spec.js

@@ -2,25 +2,18 @@ import { mount } from '@vue/test-utils'
 import UserCardFormPasswort from './UserCard_FormUserPasswort'
 import flushPromises from 'flush-promises'
 
+import { toastErrorSpy, toastSuccessSpy } from '../../../../test/testSetup'
+
 const localVue = global.localVue
 
 const changePasswordProfileMock = jest.fn()
 changePasswordProfileMock.mockReturnValue({ success: true })
 
-const toastSuccessMock = jest.fn()
-const toastErrorMock = jest.fn()
-
 describe('UserCard_FormUserPasswort', () => {
   let wrapper
 
   const mocks = {
     $t: jest.fn((t) => t),
-    $toasted: {
-      success: toastSuccessMock,
-      global: {
-        error: toastErrorMock,
-      },
-    },
     $apollo: {
       mutate: changePasswordProfileMock,
     },
@@ -196,7 +189,7 @@ describe('UserCard_FormUserPasswort', () => {
           })
 
           it('toasts a success message', () => {
-            expect(toastSuccessMock).toBeCalledWith('site.thx.reset')
+            expect(toastSuccessSpy).toBeCalledWith('site.thx.reset')
           })
 
           it('cancels the edit process', () => {
@@ -217,7 +210,7 @@ describe('UserCard_FormUserPasswort', () => {
           })
 
           it('toasts an error message', () => {
-            expect(toastErrorMock).toBeCalledWith('error')
+            expect(toastErrorSpy).toBeCalledWith('error')
           })
         })
       })

frontend/src/views/Pages/UserProfile/UserCard_FormUserPasswort.vue

@@ -89,11 +89,11 @@ export default {
           },
         })
         .then(() => {
-          this.$toasted.success(this.$t('site.thx.reset'))
+          this.toastSuccess(this.$t('site.thx.reset'))
           this.cancelEdit()
         })
         .catch((error) => {
-          this.$toasted.global.error(error.message)
+          this.toastError(error.message)
         })
     },
   },

frontend/src/views/Pages/UserProfile/UserCard_FormUsername.spec.js.old

@@ -3,6 +3,8 @@ import UserCardFormUsername from './UserCard_FormUsername'
 import flushPromises from 'flush-promises'
 import { extend } from 'vee-validate'
 
+import { toastErrorSpy, toastSuccessSpy } from '../../../../test/testSetup'
+
 const localVue = global.localVue
 
 const mockAPIcall = jest.fn()
@@ -14,8 +16,6 @@ extend('gddUsernameUnique', {
   },
 })
 
-const toastErrorMock = jest.fn()
-const toastSuccessMock = jest.fn()
 const storeCommitMock = jest.fn()
 
 describe('UserCard_FormUsername', () => {
@@ -29,12 +29,6 @@ describe('UserCard_FormUsername', () => {
       },
       commit: storeCommitMock,
     },
-    $toasted: {
-      success: toastSuccessMock,
-      global: {
-        error: toastErrorMock,
-      },
-    },
     $apollo: {
       mutate: mockAPIcall,
     },
@@ -125,7 +119,7 @@ describe('UserCard_FormUsername', () => {
           })
 
           it('toasts an success message', () => {
-            expect(toastSuccessMock).toBeCalledWith('settings.name.change-success')
+            expect(toastSuccessSpy).toBeCalledWith('settings.name.change-success')
           })
 
           it('has no edit button anymore', () => {
@@ -155,7 +149,7 @@ describe('UserCard_FormUsername', () => {
           })
 
           it('toasts an error message', () => {
-            expect(toastErrorMock).toBeCalledWith('Ouch!')
+            expect(toastErrorSpy).toBeCalledWith('Ouch!')
           })
 
           it('renders an empty username', () => {

frontend/src/views/Pages/UserProfile/UserCard_FormUsername.vue.old

@@ -97,10 +97,10 @@ export default {
           this.$store.commit('username', this.form.username)
           this.username = this.form.username
           this.showUsername = true
-          this.$toasted.success(this.$t('settings.name.change-success'))
+          this.toastSuccess(this.$t('settings.name.change-success'))
         })
         .catch((error) => {
-          this.$toasted.global.error(error.message)
+          this.toastError(error.message)
           this.showUsername = true
           this.username = this.$store.state.username
           this.form.username = this.$store.state.username

frontend/src/views/Pages/UserProfile/UserCard_Language.spec.js

@@ -1,6 +1,8 @@
 import { mount } from '@vue/test-utils'
 import UserCardLanguage from './UserCard_Language'
 
+import { toastErrorSpy, toastSuccessSpy } from '../../../../test/testSetup'
+
 const localVue = global.localVue
 
 const mockAPIcall = jest.fn().mockResolvedValue({
@@ -11,8 +13,6 @@ const mockAPIcall = jest.fn().mockResolvedValue({
   },
 })
 
-const toastErrorMock = jest.fn()
-const toastSuccessMock = jest.fn()
 const storeCommitMock = jest.fn()
 
 describe('UserCard_Language', () => {
@@ -26,12 +26,6 @@ describe('UserCard_Language', () => {
       },
       commit: storeCommitMock,
     },
-    $toasted: {
-      success: toastSuccessMock,
-      global: {
-        error: toastErrorMock,
-      },
-    },
     $apollo: {
       mutate: mockAPIcall,
     },
@@ -143,7 +137,7 @@ describe('UserCard_Language', () => {
             })
 
             it('toasts a success message', () => {
-              expect(toastSuccessMock).toBeCalledWith('settings.language.success')
+              expect(toastSuccessSpy).toBeCalledWith('settings.language.success')
             })
           })
 
@@ -159,7 +153,7 @@ describe('UserCard_Language', () => {
             })
 
             it('toasts an error message', () => {
-              expect(toastErrorMock).toBeCalledWith('Ouch!')
+              expect(toastErrorSpy).toBeCalledWith('Ouch!')
             })
           })
         })

frontend/src/views/Pages/UserProfile/UserCard_Language.vue

@@ -97,11 +97,11 @@ export default {
         .then(() => {
           this.$store.commit('language', this.language)
           this.cancelEdit()
-          this.$toasted.success(this.$t('settings.language.success'))
+          this.toastSuccess(this.$t('settings.language.success'))
         })
         .catch((error) => {
           this.language = this.$store.state.language
-          this.$toasted.global.error(error.message)
+          this.toastError(error.message)
         })
     },
     buildTagFromLanguageString() {

frontend/src/views/Pages/UserProfile/UserCard_Newsletter.spec.js

@@ -2,12 +2,12 @@ import { mount } from '@vue/test-utils'
 import UserCardNewsletter from './UserCard_Newsletter'
 import { unsubscribeNewsletter, subscribeNewsletter } from '../../../graphql/mutations'
 
+import { toastErrorSpy, toastSuccessSpy } from '../../../../test/testSetup'
+
 const localVue = global.localVue
 
 const mockAPIcall = jest.fn()
 
-const toastErrorMock = jest.fn()
-const toastSuccessMock = jest.fn()
 const storeCommitMock = jest.fn()
 
 describe('UserCard_Newsletter', () => {
@@ -23,12 +23,6 @@ describe('UserCard_Newsletter', () => {
       },
       commit: storeCommitMock,
     },
-    $toasted: {
-      success: toastSuccessMock,
-      global: {
-        error: toastErrorMock,
-      },
-    },
     $apollo: {
       mutate: mockAPIcall,
     },
@@ -77,7 +71,7 @@ describe('UserCard_Newsletter', () => {
       })
 
       it('toasts a success message', () => {
-        expect(toastSuccessMock).toBeCalledWith('settings.newsletter.newsletterFalse')
+        expect(toastSuccessSpy).toBeCalledWith('settings.newsletter.newsletterFalse')
       })
     })
 
@@ -107,7 +101,7 @@ describe('UserCard_Newsletter', () => {
       })
 
       it('toasts a success message', () => {
-        expect(toastSuccessMock).toBeCalledWith('settings.newsletter.newsletterTrue')
+        expect(toastSuccessSpy).toBeCalledWith('settings.newsletter.newsletterTrue')
       })
     })
 
@@ -124,7 +118,7 @@ describe('UserCard_Newsletter', () => {
       })
 
       it('toasts an error message', () => {
-        expect(toastErrorMock).toBeCalledWith('Ouch')
+        expect(toastErrorSpy).toBeCalledWith('Ouch')
       })
     })
   })

frontend/src/views/Pages/UserProfile/UserCard_Newsletter.vue

@@ -48,7 +48,7 @@ export default {
         })
         .then(() => {
           this.$store.commit('newsletterState', this.newsletterState)
-          this.$toasted.success(
+          this.toastSuccess(
             this.newsletterState
               ? this.$t('settings.newsletter.newsletterTrue')
               : this.$t('settings.newsletter.newsletterFalse'),
@@ -56,7 +56,7 @@ export default {
         })
         .catch((error) => {
           this.newsletterState = this.$store.state.newsletterState
-          this.$toasted.global.error(error.message)
+          this.toastError(error.message)
         })
     },
   },

frontend/test/testSetup.js

@@ -17,6 +17,10 @@ import { focus } from 'vue-focus'
 
 import { loadAllRules } from '../src/validation-rules'
 
+import { toasters } from '../src/mixins/toaster'
+export const toastErrorSpy = jest.spyOn(toasters.methods, 'toastError')
+export const toastSuccessSpy = jest.spyOn(toasters.methods, 'toastSuccess')
+
 Object.keys(rules).forEach((rule) => {
   extend(rule, {
     ...rules[rule], // copies rule configuration
@@ -47,6 +51,18 @@ global.localVue.component('validation-observer', ValidationObserver)
 // global.localVue.directive('click-outside', clickOutside)
 global.localVue.directive('focus', focus)
 
+global.localVue.mixin(toasters)
+
+// Filter the warnings for portal vue
+// https://github.com/BeniRupp/bug_portal-vue-target-already-exists
+const consoleWarn = global.console.warn
+// eslint-disable-next-line no-console
+delete console.warn
+// eslint-disable-next-line no-console
+console.warn = (m) => {
+  if (!m.match(/^\[portal-vue\]: Target .+ already exists$/)) consoleWarn(m)
+}
+
 // throw errors for vue warnings to force the programmers to take care about warnings
 Vue.config.warnHandler = (w) => {
   throw new Error(w)

frontend/yarn.lock

@@ -14256,11 +14256,6 @@ vue-template-es2015-compiler@^1.6.0, vue-template-es2015-compiler@^1.9.0:
   resolved "https://registry.yarnpkg.com/vue-template-es2015-compiler/-/vue-template-es2015-compiler-1.9.1.tgz#1ee3bc9a16ecbf5118be334bb15f9c46f82f5825"
   integrity sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw==
 
-vue-toasted@^1.1.28:
-  version "1.1.28"
-  resolved "https://registry.yarnpkg.com/vue-toasted/-/vue-toasted-1.1.28.tgz#dbabb83acc89f7a9e8765815e491d79f0dc65c26"
-  integrity sha512-UUzr5LX51UbbiROSGZ49GOgSzFxaMHK6L00JV8fir/CYNJCpIIvNZ5YmS4Qc8Y2+Z/4VVYRpeQL2UO0G800Raw==
-
 vue2-transitions@^0.2.3:
   version "0.2.3"
   resolved "https://registry.yarnpkg.com/vue2-transitions/-/vue2-transitions-0.2.3.tgz#69c9d75b1db05f231b80980c03459d68490ba27d"