fix UserCard_CoinAnimation to properly use the store, have 100% coverage and other minor fixes & simplifications

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

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?

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

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