use bv toaster on login and test it. Hack console warn to filter portal vue warnings

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

@@ -14,7 +14,7 @@ export const toasters = {
     },
     toast(message, options) {
       this.$bvToast.toast(message, {
-        autoHideDelay: 50000,
+        autoHideDelay: 5000,
         appendToast: false,
         solid: true,
         toaster: 'b-toaster-top-right',

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 { toasters } from '../../mixins/toaster'
+
 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()
@@ -26,6 +27,8 @@ const spinnerMock = jest.fn(() => {
   }
 })
 
+const toastErrorSpy = jest.spyOn(toasters.methods, 'toastError')
+
 describe('Login', () => {
   let wrapper
 
@@ -51,11 +54,6 @@ describe('Login', () => {
     $router: {
       push: mockRouterPush,
     },
-    $toasted: {
-      global: {
-        error: toastErrorMock,
-      },
-    },
     $apollo: {
       query: apolloQueryMock,
     },
@@ -96,7 +94,7 @@ describe('Login', () => {
       })
 
       it('toasts an error message', () => {
-        expect(toastErrorMock).toBeCalledWith('Failed to get communities')
+        expect(toastErrorSpy).toBeCalledWith('Failed to get communities')
       })
     })
 
@@ -249,7 +247,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/test/testSetup.js

@@ -17,6 +17,8 @@ import { focus } from 'vue-focus'
 
 import { loadAllRules } from '../src/validation-rules'
 
+import { toasters } from '../src/mixins/toaster'
+
 Object.keys(rules).forEach((rule) => {
   extend(rule, {
     ...rules[rule], // copies rule configuration
@@ -47,6 +49,17 @@ 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
+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)