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 #936 from gradido/frontend_test_coinanimatin_fixes

Browse Source 
Frontend tests & coinanimation fixes
This commit is contained in:
Ulf Gebhardt 2021-10-07 13:58:29 +02:00 committed by GitHub
commit 4fc30e5faa
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
23 changed files with 137 additions and 52 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.github/workflows/test.yml vendored
View File

@ -344,7 +344,7 @@ jobs:
report_name: Coverage Frontend
type: lcov
result_path: ./coverage/lcov.info
min_coverage: 73
min_coverage: 75
token: ${{ github.token }}
##############################################################################

2
frontend/src/components/LanguageSwitch.spec.js
View File

@ -122,7 +122,6 @@ describe('LanguageSwitch', () => {
expect(updateUserInfosMutationMock).toBeCalledWith(
expect.objectContaining({
variables: {
email: 'he@ho.he',
locale: 'en',
},
}),
@ -134,7 +133,6 @@ describe('LanguageSwitch', () => {
expect(updateUserInfosMutationMock).toBeCalledWith(
expect.objectContaining({
variables: {
email: 'he@ho.he',
locale: 'de',
},
}),

1
frontend/src/components/LanguageSwitch.vue
View File

@ -39,7 +39,6 @@ export default {
.mutate({
mutation: updateUserInfos,
variables: {
email: this.$store.state.email,
locale: locale,
},
})

0
frontend/src/directives/click-ouside.js → frontend/src/directives/click-ouside.js.unused
View File

4
frontend/src/plugins/globalDirectives.js
View File

@ -1,4 +1,4 @@
import clickOutside from '@/directives/click-ouside.js'
// import clickOutside from '@/directives/click-ouside.js'
import { focus } from 'vue-focus'
/**
@ -7,7 +7,7 @@ import { focus } from 'vue-focus'
const GlobalDirectives = {
install(Vue) {
Vue.directive('click-outside', clickOutside)
// Vue.directive('click-outside', clickOutside)
Vue.directive('focus', focus)
},
}

4
frontend/src/routes/router.test.js
View File

@ -55,8 +55,8 @@ describe('router', () => {
expect(routes.find((r) => r.path === '/').redirect()).toEqual({ path: '/login' })
})
it('has ten routes defined', () => {
expect(routes).toHaveLength(10)
it('has twelve routes defined', () => {
expect(routes).toHaveLength(12)
})
describe('overview', () => {

5
frontend/src/store/store.js
View File

@ -32,6 +32,9 @@ export const mutations = {
community: (state, community) => {
state.community = community
},
coinanimation: (state, coinanimation) => {
state.coinanimation = coinanimation
},
}
export const actions = {
@ -42,6 +45,7 @@ export const actions = {
commit('firstName', data.firstName)
commit('lastName', data.lastName)
commit('description', data.description)
commit('coinanimation', data.coinanimation)
commit('newsletterState', data.klickTipp.newsletterState)
},
logout: ({ commit, state }) => {
@ -51,6 +55,7 @@ export const actions = {
commit('firstName', '')
commit('lastName', '')
commit('description', '')
commit('coinanimation', true)
commit('newsletterState', null)
localStorage.clear()
},

32
frontend/src/store/store.test.js
View File

@ -8,6 +8,7 @@ const {
firstName,
lastName,
description,
coinanimation,
newsletterState,
} = mutations
const { login, logout } = actions
@ -70,6 +71,14 @@ describe('Vuex store', () => {
})
})
describe('coinanimation', () => {
it('sets the state of coinanimation', () => {
const state = { coinanimation: true }
coinanimation(state, false)
expect(state.coinanimation).toEqual(false)
})
})
describe('newsletterState', () => {
it('sets the state of newsletterState', () => {
const state = { newsletterState: null }
@ -90,14 +99,15 @@ describe('Vuex store', () => {
firstName: 'Peter',
lastName: 'Lustig',
description: 'Nickelbrille',
coinanimation: false,
klickTipp: {
newsletterState: true,
},
}
it('calls seven commits', () => {
it('calls eight commits', () => {
login({ commit, state }, commitedData)
expect(commit).toHaveBeenCalledTimes(7)
expect(commit).toHaveBeenCalledTimes(8)
})
it('commits email', () => {
@ -130,9 +140,14 @@ describe('Vuex store', () => {
expect(commit).toHaveBeenNthCalledWith(6, 'description', 'Nickelbrille')
})
it('commits coinanimation', () => {
login({ commit, state }, commitedData)
expect(commit).toHaveBeenNthCalledWith(7, 'coinanimation', false)
})
it('commits newsletterState', () => {
login({ commit, state }, commitedData)
expect(commit).toHaveBeenNthCalledWith(7, 'newsletterState', true)
expect(commit).toHaveBeenNthCalledWith(8, 'newsletterState', true)
})
})
@ -140,9 +155,9 @@ describe('Vuex store', () => {
const commit = jest.fn()
const state = {}
it('calls six commits', () => {
it('calls eight commits', () => {
logout({ commit, state })
expect(commit).toHaveBeenCalledTimes(7)
expect(commit).toHaveBeenCalledTimes(8)
})
it('commits token', () => {
@ -175,9 +190,14 @@ describe('Vuex store', () => {
expect(commit).toHaveBeenNthCalledWith(6, 'description', '')
})
it('commits coinanimation', () => {
logout({ commit, state })
expect(commit).toHaveBeenNthCalledWith(7, 'coinanimation', true)
})
it('commits newsletterState', () => {
logout({ commit, state })
expect(commit).toHaveBeenNthCalledWith(7, 'newsletterState', null)
expect(commit).toHaveBeenNthCalledWith(8, 'newsletterState', null)
})
// how to get this working?

18
frontend/src/views/Pages/AccountOverview/GddSend/TransactionForm.spec.js
View File

@ -67,12 +67,13 @@ describe('GddSend', () => {
it('trims the email after blur', async () => {
await wrapper.find('#input-group-1').find('input').setValue(' valid@email.com ')
await wrapper.find('#input-group-1').find('input').trigger('blur')
await flushPromises()
expect(wrapper.vm.form.email).toBe('valid@email.com')
})
})
describe('ammount field', () => {
describe('amount field', () => {
it('has an input field of type text', () => {
expect(wrapper.find('#input-group-2').find('input').attributes('type')).toBe('text')
})
@ -91,6 +92,13 @@ describe('GddSend', () => {
)
})
it('does not update form amount when invalid', async () => {
await wrapper.find('#input-group-2').find('input').setValue('invalid')
await wrapper.find('#input-group-2').find('input').trigger('blur')
await flushPromises()
expect(wrapper.vm.form.amountValue).toBe(0)
})
it('flushes an error message when no valid amount is given', async () => {
await wrapper.find('#input-group-2').find('input').setValue('a')
await flushPromises()
@ -150,11 +158,11 @@ describe('GddSend', () => {
it('clears all fields on click', async () => {
await wrapper.find('#input-group-1').find('input').setValue('someone@watches.tv')
await wrapper.find('#input-group-2').find('input').setValue('87.23')
await wrapper.find('#input-group-3').find('textarea').setValue('Long enugh')
await wrapper.find('#input-group-3').find('textarea').setValue('Long enough')
await flushPromises()
expect(wrapper.vm.form.email).toBe('someone@watches.tv')
expect(wrapper.vm.form.amount).toBe('87.23')
expect(wrapper.vm.form.memo).toBe('Long enugh')
expect(wrapper.vm.form.memo).toBe('Long enough')
await wrapper.find('button[type="reset"]').trigger('click')
await flushPromises()
expect(wrapper.vm.form.email).toBe('')
@ -167,7 +175,7 @@ describe('GddSend', () => {
beforeEach(async () => {
await wrapper.find('#input-group-1').find('input').setValue('someone@watches.tv')
await wrapper.find('#input-group-2').find('input').setValue('87.23')
await wrapper.find('#input-group-3').find('textarea').setValue('Long enugh')
await wrapper.find('#input-group-3').find('textarea').setValue('Long enough')
await wrapper.find('form').trigger('submit')
await flushPromises()
})
@ -179,7 +187,7 @@ describe('GddSend', () => {
{
email: 'someone@watches.tv',
amount: 87.23,
memo: 'Long enugh',
memo: 'Long enough',
},
],
])

5
frontend/src/views/Pages/Register.vue
View File

@ -129,7 +129,7 @@
</b-button>
<b-button
:disabled="!(namesFilled && emailFilled && form.agree && languageFilled)"
:disabled="!(namesFilled && emailFilled && form.agree && !!language)"
type="submit"
variant="primary"
>
@ -239,9 +239,6 @@ export default {
emailFilled() {
return this.form.email !== ''
},
languageFilled() {
return !!this.language
},
},
}
</script>

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

@ -1,5 +1,6 @@
import { mount } from '@vue/test-utils'
import UserCardCoinAnimation from './UserCard_CoinAnimation'
import { updateUserInfos } from '../../../graphql/mutations'
const localVue = global.localVue
@ -17,6 +18,7 @@ describe('UserCard_CoinAnimation', () => {
$store: {
state: {
language: 'de',
coinanimation: true,
},
commit: storeCommitMock,
},
@ -25,7 +27,7 @@ describe('UserCard_CoinAnimation', () => {
error: toastErrorMock,
},
$apollo: {
query: mockAPIcall,
mutate: mockAPIcall,
},
}
@ -45,5 +47,84 @@ describe('UserCard_CoinAnimation', () => {
it('has an edit BFormCheckbox switch', () => {
expect(wrapper.find('.Test-BFormCheckbox').exists()).toBeTruthy()
})
describe('enable with success', () => {
beforeEach(async () => {
mocks.$store.state.coinanimation = false
mockAPIcall.mockResolvedValue({
data: {
updateUserInfos: {
validValues: 1,
},
},
})
await wrapper.find('input').trigger('change')
})
it('calls the updateUserInfos mutation', () => {
expect(mockAPIcall).toBeCalledWith({
mutation: updateUserInfos,
variables: {
coinanimation: true,
},
})
})
it('updates the store', () => {
expect(storeCommitMock).toBeCalledWith('coinanimation', true)
})
it('toasts a success message', () => {
expect(toastSuccessMock).toBeCalledWith('settings.coinanimation.True')
})
})
describe('disable with success', () => {
beforeEach(async () => {
mocks.$store.state.coinanimation = true
mockAPIcall.mockResolvedValue({
data: {
updateUserInfos: {
validValues: 1,
},
},
})
wrapper.find('input').trigger('change')
})
it('calls the subscribe mutation', () => {
expect(mockAPIcall).toBeCalledWith({
mutation: updateUserInfos,
variables: {
coinanimation: false,
},
})
})
it('updates the store', () => {
expect(storeCommitMock).toBeCalledWith('coinanimation', false)
})
it('toasts a success message', () => {
expect(toastSuccessMock).toBeCalledWith('settings.coinanimation.False')
})
})
describe('disable with server error', () => {
beforeEach(() => {
mockAPIcall.mockRejectedValue({
message: 'Ouch',
})
wrapper.find('input').trigger('change')
})
it('resets the CoinAnimationStatus', () => {
expect(wrapper.vm.CoinAnimationStatus).toBeTruthy()
})
it('toasts an error message', () => {
expect(toastErrorMock).toBeCalledWith('Ouch')
})
})
})
})

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

@ -36,12 +36,9 @@ export default {
name: 'FormUserCoinAnimation',
data() {
return {
CoinAnimationStatus: true,
CoinAnimationStatus: this.$store.state.coinanimation,
}
},
created() {
this.CoinAnimationStatus = this.$store.state.coinanimation /* existiert noch nicht im store */
},
methods: {
async onSubmit() {
this.$apollo
@ -52,7 +49,7 @@ export default {
},
})
.then(() => {
this.$store.state.coinanimation = this.CoinAnimationStatus
this.$store.commit('coinanimation', this.CoinAnimationStatus)
this.$toasted.success(
this.CoinAnimationStatus
? this.$t('settings.coinanimation.True')
@ -60,6 +57,7 @@ export default {
)
})
.catch((error) => {
this.CoinAnimationStatus = this.$store.state.coinanimation
this.$toasted.error(error.message)
})
},

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

@ -17,7 +17,6 @@ describe('UserCard_FormUserData', () => {
$t: jest.fn((t) => t),
$store: {
state: {
email: 'user@example.org',
firstName: 'Peter',
lastName: 'Lustig',
description: '',
@ -117,7 +116,6 @@ describe('UserCard_FormUserData', () => {
expect(mockAPIcall).toBeCalledWith(
expect.objectContaining({
variables: {
email: 'user@example.org',
firstName: 'Petra',
lastName: 'Lustiger',
description: 'Keine Nickelbrille',
@ -165,7 +163,6 @@ describe('UserCard_FormUserData', () => {
expect(mockAPIcall).toBeCalledWith(
expect.objectContaining({
variables: {
email: 'user@example.org',
firstName: 'Petra',
lastName: 'Lustiger',
description: 'Keine Nickelbrille',

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

@ -111,7 +111,6 @@ export default {
.mutate({
mutation: updateUserInfos,
variables: {
email: this.$store.state.email,
firstName: this.form.firstName,
lastName: this.form.lastName,
description: this.form.description,

2
frontend/src/views/Pages/UserProfile/UserCard_FormUserMail.spec.js
View File

@ -75,7 +75,6 @@ describe('UserCard_FormUserMail', () => {
expect(mockAPIcall).toHaveBeenCalledWith(
expect.objectContaining({
variables: {
email: 'user@example.org',
newEmail: 'test@example.org',
},
}),
@ -104,7 +103,6 @@ describe('UserCard_FormUserMail', () => {
expect(mockAPIcall).toHaveBeenCalledWith(
expect.objectContaining({
variables: {
email: 'user@example.org',
newEmail: 'test@example.org',
},
}),

1
frontend/src/views/Pages/UserProfile/UserCard_FormUserMail.vue
View File

@ -48,7 +48,6 @@ export default {
.mutate({
mutation: updateUserInfos,
variables: {
email: this.$store.state.email,
newEmail: this.newEmail,
},
})

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

@ -15,11 +15,6 @@ describe('UserCard_FormUserPasswort', () => {
const mocks = {
$t: jest.fn((t) => t),
$store: {
state: {
email: 'user@example.org',
},
},
$toasted: {
success: toastSuccessMock,
error: toastErrorMock,
@ -191,7 +186,6 @@ describe('UserCard_FormUserPasswort', () => {
expect(changePasswordProfileMock).toHaveBeenCalledWith(
expect.objectContaining({
variables: {
email: 'user@example.org',
password: '1234',
passwordNew: 'Aa123456_',
},

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

@ -76,7 +76,6 @@ export default {
.mutate({
mutation: updateUserInfos,
variables: {
email: this.$store.state.email,
password: this.form.password,
passwordNew: this.form.newPassword.password,
},

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

@ -25,7 +25,6 @@ describe('UserCard_FormUsername', () => {
$t: jest.fn((t) => t),
$store: {
state: {
email: 'user@example.org',
username: '',
},
commit: storeCommitMock,
@ -109,7 +108,6 @@ describe('UserCard_FormUsername', () => {
expect(mockAPIcall).toHaveBeenCalledWith(
expect.objectContaining({
variables: {
email: 'user@example.org',
username: 'username',
},
}),
@ -148,7 +146,6 @@ describe('UserCard_FormUsername', () => {
expect(mockAPIcall).toHaveBeenCalledWith(
expect.objectContaining({
variables: {
email: 'user@example.org',
username: 'username',
},
}),

1
frontend/src/views/Pages/UserProfile/UserCard_FormUsername.vue
View File

@ -90,7 +90,6 @@ export default {
.mutate({
mutation: updateUserInfos,
variables: {
email: this.$store.state.email,
username: this.form.username,
},
})

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

@ -23,7 +23,6 @@ describe('UserCard_Language', () => {
$store: {
state: {
language: 'de',
email: 'peter@lustig.de',
},
commit: storeCommitMock,
},
@ -127,7 +126,6 @@ describe('UserCard_Language', () => {
expect(mockAPIcall).toBeCalledWith(
expect.objectContaining({
variables: {
email: 'peter@lustig.de',
locale: 'en',
},
}),

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

@ -89,7 +89,6 @@ export default {
.mutate({
mutation: updateUserInfos,
variables: {
email: this.$store.state.email,
locale: this.language,
},
})

4
frontend/test/testSetup.js
View File

@ -13,7 +13,7 @@ import VueQrcode from 'vue-qrcode'
import VueMoment from 'vue-moment'
import clickOutside from '@/directives/click-ouside.js'
// import clickOutside from '@/directives/click-ouside.js'
import { focus } from 'vue-focus'
import { loadAllRules } from '../src/validation-rules'
@ -46,7 +46,7 @@ global.localVue.use(VueQrcode)
global.localVue.use(VueMoment)
global.localVue.component('validation-provider', ValidationProvider)
global.localVue.component('validation-observer', ValidationObserver)
global.localVue.directive('click-outside', clickOutside)
// global.localVue.directive('click-outside', clickOutside)
global.localVue.directive('focus', focus)
// throw errors for vue warnings to force the programmers to take care about warnings