define custom error toast, use this custom toast for all error toasts

2025-12-13 07:45:54 +00:00 · 2021-12-08 13:21:03 +01:00 · 2021-12-08 13:21:03 +01:00 · 88002a5209
commit 88002a5209
parent 8122f218a9
28 changed files with 90 additions and 27 deletions
--- a/frontend/src/main.js
+++ b/frontend/src/main.js
@ -16,6 +16,16 @@ import { apolloProvider } from './plugins/apolloProvider'
 Vue.use(DashboardPlugin)
 Vue.config.productionTip = false

+Vue.toasted.register(
+  'error',
+  (payload) => {
+    return payload.replace(/^GraphQL error: /, '')
+  },
+  {
+    type: 'error',
+  },
+)
+
 loadAllRules(i18n)

 addNavigationGuards(router, store, apolloProvider.defaultClient)
--- a/frontend/src/mixins/getCommunityInfo.js
+++ b/frontend/src/mixins/getCommunityInfo.js
@ -13,7 +13,7 @@ export const getCommunityInfoMixin = {
            return result.data.getCommunityInfo
          })
          .catch((error) => {
-            this.$toasted.error(error.message)
+            this.$toasted.global.error(error.message)
          })
      }
    },
--- a/frontend/src/plugins/dashboard-plugin.test.js
+++ b/frontend/src/plugins/dashboard-plugin.test.js
@ -4,8 +4,11 @@ import Vue from 'vue'
 import GlobalComponents from './globalComponents'
 import GlobalDirectives from './globalDirectives'

+import Toasted from 'vue-toasted'
+
 jest.mock('./globalComponents')
 jest.mock('./globalDirectives')
+jest.mock('vue-toasted')

 jest.mock('vue')

@ -22,4 +25,21 @@ describe('dashboard plugin', () => {
  it('installs the global directives', () => {
    expect(vueUseMock).toBeCalledWith(GlobalDirectives)
  })
+
+  describe('vue toasted', () => {
+    const toastedAction = vueUseMock.mock.calls[11][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)
+    })
+  })
 })
--- a/frontend/src/routes/router.test.js
+++ b/frontend/src/routes/router.test.js
@ -143,6 +143,13 @@ describe('router', () => {
        })
      })

+      describe('password with param comingFrom', () => {
+        it('loads the "Password" component', async () => {
+          const component = await routes.find((r) => r.path === '/password/:comingFrom').component()
+          expect(component.default.name).toBe('password')
+        })
+      })
+
      describe('register-community', () => {
        it('loads the "registerCommunity" component', async () => {
          const component = await routes.find((r) => r.path === '/register-community').component()
--- a/frontend/src/views/Layout/DashboardLayout_gdd.spec.js
+++ b/frontend/src/views/Layout/DashboardLayout_gdd.spec.js
@ -39,7 +39,9 @@ describe('DashboardLayoutGdd', () => {
      },
    },
    $toasted: {
-      error: toasterMock,
+      global: {
+        error: toasterMock,
+      },
    },
    $apollo: {
      query: apolloMock,
@ -266,7 +268,7 @@ describe('DashboardLayoutGdd', () => {
          expect(wrapper.vm.pending).toBeTruthy()
        })

-        it('calls $toasted.error method', () => {
+        it('calls $toasted.global.error method', () => {
          expect(toasterMock).toBeCalledWith('Ouch!')
        })
      })
--- a/frontend/src/views/Layout/DashboardLayout_gdd.vue
+++ b/frontend/src/views/Layout/DashboardLayout_gdd.vue
@ -133,7 +133,7 @@ export default {
        })
        .catch((error) => {
          this.pending = true
-          this.$toasted.error(error.message)
+          this.$toasted.global.error(error.message)
          // what to do when loading balance fails?
        })
    },
--- a/frontend/src/views/Pages/AccountOverview/GdtTransactionList.spec.js
+++ b/frontend/src/views/Pages/AccountOverview/GdtTransactionList.spec.js
@ -37,7 +37,9 @@ describe('GdtTransactionList ', () => {
    $n: jest.fn((n) => n),
    $d: jest.fn((d) => d),
    $toasted: {
-      error: toastErrorMock,
+      global: {
+        error: toastErrorMock,
+      },
    },
    $apollo: {
      query: apolloMock,
--- a/frontend/src/views/Pages/AccountOverview/GdtTransactionList.vue
+++ b/frontend/src/views/Pages/AccountOverview/GdtTransactionList.vue
@ -71,7 +71,7 @@ export default {
          window.scrollTo(0, 0)
        })
        .catch((error) => {
-          this.$toasted.error(error.message)
+          this.$toasted.global.error(error.message)
        })
    },
  },
--- a/frontend/src/views/Pages/Login.spec.js
+++ b/frontend/src/views/Pages/Login.spec.js
@ -52,7 +52,9 @@ describe('Login', () => {
      push: mockRouterPush,
    },
    $toasted: {
-      error: toastErrorMock,
+      global: {
+        error: toastErrorMock,
+      },
    },
    $apollo: {
      query: apolloQueryMock,
--- a/frontend/src/views/Pages/Login.vue
+++ b/frontend/src/views/Pages/Login.vue
@ -106,7 +106,7 @@ export default {
        })
        .catch((error) => {
          if (error.message.includes('No user with this credentials')) {
-            this.$toasted.error(this.$t('error.no-account'))
+            this.$toasted.global.error(this.$t('error.no-account'))
          } else {
            // : this.$t('error.no-email-verify')
            this.$router.push('/reset/login')
--- a/frontend/src/views/Pages/Register.spec.js
+++ b/frontend/src/views/Pages/Register.spec.js
@ -49,7 +49,9 @@ describe('Register', () => {
      },
    },
    $toasted: {
-      error: toastErrorMock,
+      global: {
+        error: toastErrorMock,
+      },
    },
  }

--- a/frontend/src/views/Pages/RegisterCommunity.spec.js
+++ b/frontend/src/views/Pages/RegisterCommunity.spec.js
@ -37,7 +37,9 @@ describe('RegisterCommunity', () => {
      },
    },
    $toasted: {
-      error: toastErrorMock,
+      global: {
+        error: toastErrorMock,
+      },
    },
  }

--- a/frontend/src/views/Pages/RegisterSelectCommunity.spec.js
+++ b/frontend/src/views/Pages/RegisterSelectCommunity.spec.js
@ -79,7 +79,9 @@ describe('RegisterSelectCommunity', () => {
      show: spinnerMock,
    },
    $toasted: {
-      error: toasterMock,
+      global: {
+        error: toasterMock,
+      },
    },
  }

--- a/frontend/src/views/Pages/RegisterSelectCommunity.vue
+++ b/frontend/src/views/Pages/RegisterSelectCommunity.vue
@ -76,7 +76,7 @@ export default {
          )
        })
        .catch((error) => {
-          this.$toasted.error(error.message)
+          this.$toasted.global.error(error.message)
        })
      loader.hide()
      this.pending = false
--- a/frontend/src/views/Pages/ResetPassword.spec.js
+++ b/frontend/src/views/Pages/ResetPassword.spec.js
@ -30,7 +30,9 @@ const createMockObject = (comingFrom) => {
        },
      },
      $toasted: {
-        error: toasterMock,
+        global: {
+          error: toasterMock,
+        },
      },
      $router: {
        push: routerPushMock,
--- a/frontend/src/views/Pages/ResetPassword.vue
+++ b/frontend/src/views/Pages/ResetPassword.vue
@ -96,10 +96,10 @@ export default {
        })
        .catch((error) => {
          if (error.message.includes('Code is older than 10 minutes')) {
-            this.$toasted.error(error.message)
+            this.$toasted.global.error(error.message)
            this.$router.push('/password/reset')
          } else {
-            this.$toasted.error(error.message)
+            this.$toasted.global.error(error.message)
          }
        })
    },
--- a/frontend/src/views/Pages/UserProfile/UserCard_CoinAnimation.spec.js
+++ b/frontend/src/views/Pages/UserProfile/UserCard_CoinAnimation.spec.js
@ -24,7 +24,9 @@ describe('UserCard_CoinAnimation', () => {
    },
    $toasted: {
      success: toastSuccessMock,
-      error: toastErrorMock,
+      global: {
+        error: toastErrorMock,
+      },
    },
    $apollo: {
      mutate: mockAPIcall,
--- a/frontend/src/views/Pages/UserProfile/UserCard_CoinAnimation.vue
+++ b/frontend/src/views/Pages/UserProfile/UserCard_CoinAnimation.vue
@ -58,7 +58,7 @@ export default {
        })
        .catch((error) => {
          this.CoinAnimationStatus = this.$store.state.coinanimation
-          this.$toasted.error(error.message)
+          this.$toasted.global.error(error.message)
        })
    },
  },
--- a/frontend/src/views/Pages/UserProfile/UserCard_FormUserData.spec.js
+++ b/frontend/src/views/Pages/UserProfile/UserCard_FormUserData.spec.js
@ -25,7 +25,9 @@ describe('UserCard_FormUserData', () => {
    },
    $toasted: {
      success: toastSuccessMock,
-      error: toastErrorMock,
+      global: {
+        error: toastErrorMock,
+      },
    },
    $apollo: {
      mutate: mockAPIcall,
--- a/frontend/src/views/Pages/UserProfile/UserCard_FormUserData.vue
+++ b/frontend/src/views/Pages/UserProfile/UserCard_FormUserData.vue
@ -124,7 +124,7 @@ export default {
          this.$toasted.success(this.$t('settings.name.change-success'))
        })
        .catch((error) => {
-          this.$toasted.error(error.message)
+          this.$toasted.global.error(error.message)
        })
    },
  },
--- a/frontend/src/views/Pages/UserProfile/UserCard_FormUserPasswort.spec.js
+++ b/frontend/src/views/Pages/UserProfile/UserCard_FormUserPasswort.spec.js
@ -17,7 +17,9 @@ describe('UserCard_FormUserPasswort', () => {
    $t: jest.fn((t) => t),
    $toasted: {
      success: toastSuccessMock,
-      error: toastErrorMock,
+      global: {
+        error: toastErrorMock,
+      },
    },
    $apollo: {
      mutate: changePasswordProfileMock,
--- a/frontend/src/views/Pages/UserProfile/UserCard_FormUserPasswort.vue
+++ b/frontend/src/views/Pages/UserProfile/UserCard_FormUserPasswort.vue
@ -85,7 +85,7 @@ export default {
          this.cancelEdit()
        })
        .catch((error) => {
-          this.$toasted.error(error.message)
+          this.$toasted.global.error(error.message)
        })
    },
  },
--- a/frontend/src/views/Pages/UserProfile/UserCard_FormUsername.spec.js
+++ b/frontend/src/views/Pages/UserProfile/UserCard_FormUsername.spec.js
@ -31,7 +31,9 @@ describe('UserCard_FormUsername', () => {
    },
    $toasted: {
      success: toastSuccessMock,
-      error: toastErrorMock,
+      global: {
+        error: toastErrorMock,
+      },
    },
    $apollo: {
      mutate: mockAPIcall,
--- a/frontend/src/views/Pages/UserProfile/UserCard_FormUsername.vue
+++ b/frontend/src/views/Pages/UserProfile/UserCard_FormUsername.vue
@ -100,7 +100,7 @@ export default {
          this.$toasted.success(this.$t('settings.name.change-success'))
        })
        .catch((error) => {
-          this.$toasted.error(error.message)
+          this.$toasted.global.error(error.message)
          this.showUsername = true
          this.username = this.$store.state.username
          this.form.username = this.$store.state.username
--- a/frontend/src/views/Pages/UserProfile/UserCard_Language.spec.js
+++ b/frontend/src/views/Pages/UserProfile/UserCard_Language.spec.js
@ -28,7 +28,9 @@ describe('UserCard_Language', () => {
    },
    $toasted: {
      success: toastSuccessMock,
-      error: toastErrorMock,
+      global: {
+        error: toastErrorMock,
+      },
    },
    $apollo: {
      mutate: mockAPIcall,
--- a/frontend/src/views/Pages/UserProfile/UserCard_Language.vue
+++ b/frontend/src/views/Pages/UserProfile/UserCard_Language.vue
@ -101,7 +101,7 @@ export default {
        })
        .catch((error) => {
          this.language = this.$store.state.language
-          this.$toasted.error(error.message)
+          this.$toasted.global.error(error.message)
        })
    },
    buildTagFromLanguageString() {
--- a/frontend/src/views/Pages/UserProfile/UserCard_Newsletter.spec.js
+++ b/frontend/src/views/Pages/UserProfile/UserCard_Newsletter.spec.js
@ -25,7 +25,9 @@ describe('UserCard_Newsletter', () => {
    },
    $toasted: {
      success: toastSuccessMock,
-      error: toastErrorMock,
+      global: {
+        error: toastErrorMock,
+      },
    },
    $apollo: {
      mutate: mockAPIcall,
--- a/frontend/src/views/Pages/UserProfile/UserCard_Newsletter.vue
+++ b/frontend/src/views/Pages/UserProfile/UserCard_Newsletter.vue
@ -56,7 +56,7 @@ export default {
        })
        .catch((error) => {
          this.newsletterState = this.$store.state.newsletterState
-          this.$toasted.error(error.message)
+          this.$toasted.global.error(error.message)
        })
    },
  },