From bfaa77482ce130f11061856c15d1edb1371e6986 Mon Sep 17 00:00:00 2001 From: Moriz Wahl Date: Thu, 3 Mar 2022 12:07:35 +0100 Subject: [PATCH] refactor: Bootstrap Vue Toast in Admin Interface --- .../ConfirmRegisterMailFormular.spec.js | 12 +++----- .../ConfirmRegisterMailFormular.vue | 4 +-- admin/src/locales/de.json | 4 ++- admin/src/locales/en.json | 4 ++- admin/src/main.js | 14 ++------- admin/src/mixins/toaster.js | 29 +++++++++++++++++++ admin/test/testSetup.js | 7 +++++ 7 files changed, 50 insertions(+), 24 deletions(-) create mode 100644 admin/src/mixins/toaster.js diff --git a/admin/src/components/ConfirmRegisterMailFormular.spec.js b/admin/src/components/ConfirmRegisterMailFormular.spec.js index 78f5791dc..e9e21b31e 100644 --- a/admin/src/components/ConfirmRegisterMailFormular.spec.js +++ b/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') }) }) }) diff --git a/admin/src/components/ConfirmRegisterMailFormular.vue b/admin/src/components/ConfirmRegisterMailFormular.vue index 067e95c67..1b72f55d0 100644 --- a/admin/src/components/ConfirmRegisterMailFormular.vue +++ b/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 })) }) }, }, diff --git a/admin/src/locales/de.json b/admin/src/locales/de.json index e5f4bf4ca..e9bc6ec51 100644 --- a/admin/src/locales/de.json +++ b/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" } diff --git a/admin/src/locales/en.json b/admin/src/locales/en.json index d772d638f..36b37e609 100644 --- a/admin/src/locales/en.json +++ b/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" } diff --git a/admin/src/main.js b/admin/src/main.js index f4a8dfb3c..fb6de5f17 100644 --- a/admin/src/main.js +++ b/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) diff --git a/admin/src/mixins/toaster.js b/admin/src/mixins/toaster.js new file mode 100644 index 000000000..b9ce02db2 --- /dev/null +++ b/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, + }) + }, + }, +} diff --git a/admin/test/testSetup.js b/admin/test/testSetup.js index caaa3c19c..df3a025da 100644 --- a/admin/test/testSetup.js +++ b/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)