IT4Change/gradido
3
0
Fork 0
mirror of https://github.com/IT4Change/gradido.git synced 2025-12-13 07:45:54 +00:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
refactor: Use Bootstrap Vue Toast
This commit is contained in:
Moriz Wahl 2022-02-16 11:34:35 +01:00 committed by GitHub
commit 528d1f64f0
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
35 changed files with 129 additions and 183 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
frontend/package.json
View File

@ -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"

9
frontend/src/App.vue
View File

@ -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;

1
frontend/src/locales/de.json
View File

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

1
frontend/src/locales/en.json
View File

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

11
frontend/src/main.js
View File

@ -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(
'error',
(payload) => {
return payload.replace(/^GraphQL error: /, '')
},
{
type: 'error',
},
)
Vue.mixin(toasters)
loadAllRules(i18n)

2
frontend/src/mixins/getCommunityInfo.js
View File

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

29
frontend/src/mixins/toaster.js Normal file
View File

@ -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,
})
},
},
}

12
frontend/src/plugins/dashboard-plugin.js
View File

@ -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)
},
},
})
},
}

20
frontend/src/plugins/dashboard-plugin.test.js
View File

@ -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)
})
})
})

12
frontend/src/views/Layout/DashboardLayout_gdd.spec.js
View File

@ -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', () => {
expect(toasterMock).toBeCalledWith('Ouch!')
it('toasts the error message', () => {
expect(toastErrorSpy).toBeCalledWith('Ouch!')
})
})

2
frontend/src/views/Layout/DashboardLayout_gdd.vue
View File

@ -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?
})
},

10
frontend/src/views/Pages/AccountOverview/GdtTransactionList.spec.js
View File

@ -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!')
})
})

2
frontend/src/views/Pages/AccountOverview/GdtTransactionList.vue
View File

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

12
frontend/src/views/Pages/Login.spec.js
View File

@ -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"', () => {

2
frontend/src/views/Pages/Login.vue
View File

@ -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')) {

11
frontend/src/views/Pages/Register.spec.js
View File

@ -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')
})
})

11
frontend/src/views/Pages/RegisterCommunity.spec.js
View File

@ -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')
})
})

12
frontend/src/views/Pages/RegisterSelectCommunity.spec.js
View File

@ -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', () => {

2
frontend/src/views/Pages/RegisterSelectCommunity.vue
View File

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

14
frontend/src/views/Pages/ResetPassword.spec.js
View File

@ -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')
})
})

2
frontend/src/views/Pages/ResetPassword.vue
View File

@ -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')
})

16
frontend/src/views/Pages/UserProfile/UserCard_CoinAnimation.spec.js
View File

@ -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')
})
})
})

4
frontend/src/views/Pages/UserProfile/UserCard_CoinAnimation.vue
View File

@ -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)
})
},
},

14
frontend/src/views/Pages/UserProfile/UserCard_FormUserData.spec.js
View File

@ -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')
})
})
})

4
frontend/src/views/Pages/UserProfile/UserCard_FormUserData.vue
View File

@ -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)
})
},
},

15
frontend/src/views/Pages/UserProfile/UserCard_FormUserPasswort.spec.js
View File

@ -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')
})
})
})

4
frontend/src/views/Pages/UserProfile/UserCard_FormUserPasswort.vue
View File

@ -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)
})
},
},

14
frontend/src/views/Pages/UserProfile/UserCard_FormUsername.spec.js.old
View File

@ -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', () => {

4
frontend/src/views/Pages/UserProfile/UserCard_FormUsername.vue.old
View File

@ -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

14
frontend/src/views/Pages/UserProfile/UserCard_Language.spec.js
View File

@ -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!')
})
})
})

4
frontend/src/views/Pages/UserProfile/UserCard_Language.vue
View File

@ -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() {

16
frontend/src/views/Pages/UserProfile/UserCard_Newsletter.spec.js
View File

@ -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')
})
})
})

4
frontend/src/views/Pages/UserProfile/UserCard_Newsletter.vue
View File

@ -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)
})
},
},

16
frontend/test/testSetup.js
View File

@ -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)

5
frontend/yarn.lock
View File

@ -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"