diff --git a/frontend/src/store/store.js b/frontend/src/store/store.js index f9b40fd15..080b63a5f 100644 --- a/frontend/src/store/store.js +++ b/frontend/src/store/store.js @@ -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() }, diff --git a/frontend/src/store/store.test.js b/frontend/src/store/store.test.js index 7ae3344d9..e2c06095e 100644 --- a/frontend/src/store/store.test.js +++ b/frontend/src/store/store.test.js @@ -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) }) }) @@ -142,7 +157,7 @@ describe('Vuex store', () => { it('calls six 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? diff --git a/frontend/src/views/Pages/UserProfile/UserCard_CoinAnimation.spec.js b/frontend/src/views/Pages/UserProfile/UserCard_CoinAnimation.spec.js index 54132f423..d51800268 100644 --- a/frontend/src/views/Pages/UserProfile/UserCard_CoinAnimation.spec.js +++ b/frontend/src/views/Pages/UserProfile/UserCard_CoinAnimation.spec.js @@ -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 () => { + await wrapper.setData({ CoinAnimationStatus: 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: false, + }, + }) + }) + + it('updates the store', () => { + expect(storeCommitMock).toBeCalledWith('coinanimation', false) + }) + + it('toasts a success message', () => { + expect(toastSuccessMock).toBeCalledWith('settings.coinanimation.False') + }) + }) + + describe('disable with success', () => { + beforeEach(async () => { + await wrapper.setData({ CoinAnimationStatus: true }) + mockAPIcall.mockResolvedValue({ + data: { + updateUserInfos: { + validValues: 1, + }, + }, + }) + wrapper.find('input').trigger('change') + }) + + it('calls the subscribe 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 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') + }) + }) }) }) diff --git a/frontend/src/views/Pages/UserProfile/UserCard_CoinAnimation.vue b/frontend/src/views/Pages/UserProfile/UserCard_CoinAnimation.vue index 11c0fc823..21192af93 100644 --- a/frontend/src/views/Pages/UserProfile/UserCard_CoinAnimation.vue +++ b/frontend/src/views/Pages/UserProfile/UserCard_CoinAnimation.vue @@ -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) }) },