Merge pull request #270 from gradido/test-store

refactor: Test and Clean Up Store

.github/workflows/test.yml

@@ -212,7 +212,7 @@ jobs:
           report_name: Coverage Frontend
           type: lcov
           result_path: ./coverage/lcov.info
-          min_coverage: 13
+          min_coverage: 15
           token: ${{ github.token }}
   
   #test:

frontend/src/store/store.js

@@ -3,6 +3,30 @@ import Vuex from 'vuex'
 Vue.use(Vuex)
 import createPersistedState from 'vuex-persistedstate'
 
+export const mutations = {
+  language: (state, language) => {
+    state.language = language
+  },
+  email: (state, email) => {
+    state.email = email
+  },
+  session_id: (state, session_id) => {
+    state.session_id = session_id
+  },
+}
+
+export const actions = {
+  login: ({ dispatch, commit }, data) => {
+    commit('session_id', data.session_id)
+    commit('email', data.email)
+  },
+  logout: ({ commit, state }) => {
+    commit('session_id', null)
+    commit('email', null)
+    sessionStorage.clear()
+  },
+}
+
 export const store = new Vuex.Store({
   plugins: [
     createPersistedState({
@@ -13,49 +37,10 @@ export const store = new Vuex.Store({
     session_id: null,
     email: '',
     language: 'en',
-    user: {
-      name: '',
-      balance: 0,
-      balance_gdt: 0,
-    },
     modals: false,
   },
   getters: {},
   // Syncronous mutation of the state
-  mutations: {
-    language: (state, language) => {
-      state.language = language
-    },
-    email: (state, email) => {
-      state.email = email
-    },
-    session_id: (state, session_id) => {
-      state.session_id = session_id
-    },
-    user_balance: (state, balance) => {
-      state.user.balance = balance / 10000
-    },
-    user_balance_gdt: (state, balance) => {
-      state.user.balance_gdt = balance / 10000
-    },
-  },
-  actions: {
-    login: ({ dispatch, commit }, data) => {
-      commit('session_id', data.session_id)
-      commit('email', data.email)
-    },
-    passwordReset: (data) => {},
-    schoepfen: (data) => {
-      // http://localhost/transaction-creations/ajaxCreate
-    },
-    createUser: ({ commit, dispatch }, data) => {
-      commit('session_id', data.session_id)
-      commit('email', data.email)
-    },
-    logout: ({ commit, state }) => {
-      commit('session_id', null)
-      commit('email', null)
-      sessionStorage.clear()
-    },
-  },
+  mutations,
+  actions,
 })

frontend/src/store/store.test.js

@@ -0,0 +1,81 @@
+import { mutations, actions } from './store'
+
+const { language, email, session_id } = mutations
+const { login, logout } = actions
+
+describe('Vuex store', () => {
+  describe('mutations', () => {
+    describe('language', () => {
+      it('sets the state of language', () => {
+        const state = { language: 'en' }
+        language(state, 'de')
+        expect(state.language).toEqual('de')
+      })
+    })
+
+    describe('email', () => {
+      it('sets the state of email', () => {
+        const state = { email: 'nobody@knows.tv' }
+        email(state, 'someone@there.is')
+        expect(state.email).toEqual('someone@there.is')
+      })
+    })
+
+    describe('session_id', () => {
+      it('sets the state of session_id', () => {
+        const state = { session_id: null }
+        session_id(state, '1234')
+        expect(state.session_id).toEqual('1234')
+      })
+    })
+  })
+
+  describe('actions', () => {
+    describe('login', () => {
+      const commit = jest.fn()
+      const state = {}
+
+      it('calls two commits', () => {
+        login({ commit, state }, { session_id: 1234, email: 'someone@there.is' })
+        expect(commit).toHaveBeenCalledTimes(2)
+      })
+
+      it('commits session_id', () => {
+        login({ commit, state }, { session_id: 1234, email: 'someone@there.is' })
+        expect(commit).toHaveBeenNthCalledWith(1, 'session_id', 1234)
+      })
+
+      it('commits email', () => {
+        login({ commit, state }, { session_id: 1234, email: 'someone@there.is' })
+        expect(commit).toHaveBeenNthCalledWith(2, 'email', 'someone@there.is')
+      })
+    })
+
+    describe('logout', () => {
+      const commit = jest.fn()
+      const state = {}
+
+      it('calls two commits', () => {
+        logout({ commit, state })
+        expect(commit).toHaveBeenCalledTimes(2)
+      })
+
+      it('commits session_id', () => {
+        logout({ commit, state })
+        expect(commit).toHaveBeenNthCalledWith(1, 'session_id', null)
+      })
+
+      it('commits email', () => {
+        logout({ commit, state })
+        expect(commit).toHaveBeenNthCalledWith(2, 'email', null)
+      })
+
+      // how can I get this working?
+      it.skip('calls sessionStorage.clear()', () => {
+        logout({ commit, state })
+        const spy = jest.spyOn(sessionStorage, 'clear')
+        expect(spy).toHaveBeenCalledTimes(1)
+      })
+    })
+  })
+})

frontend/src/views/KontoOverview/GddStatus.spec.js

@@ -1,32 +1,22 @@
 import { mount } from '@vue/test-utils'
 import GddStatus from './GddStatus'
-import Vuex from 'vuex'
 
 const localVue = global.localVue
 
 describe('GddStatus', () => {
   let wrapper
 
-  let state = {
-    user: {
-      balance_gdt: 9876,
-    },
-  }
-
-  let store = new Vuex.Store({
-    state,
-  })
-
   let mocks = {
     $n: jest.fn((n) => n),
   }
 
   let propsData = {
     balance: 1234,
+    GdtBalance: 9876,
   }
 
   const Wrapper = () => {
-    return mount(GddStatus, { localVue, store, mocks, propsData })
+    return mount(GddStatus, { localVue, mocks, propsData })
   }
 
   describe('mount', () => {

frontend/src/views/KontoOverview/GddStatus.vue

@@ -18,7 +18,7 @@
           class="mb-4 h1"
           style="background-color: #ebebeba3 !important"
         >
-          {{ $n($store.state.user.balance_gdt) }} GDT
+          {{ $n(GdtBalance) }} GDT
         </stats-card>
       </b-col>
     </b-row>
@@ -31,6 +31,7 @@ export default {
   props: {
     showTransactionList: { type: Boolean, default: true },
     balance: { type: Number, default: 0 },
+    GdtBalance: { type: Number, default: 0 },
   },
 }
 </script>

frontend/src/views/KontoOverview/GddTable.vue

@@ -108,7 +108,6 @@ export default {
     const result = await communityAPI.transactions(this.$store.state.session_id)
 
     if (result.success) {
-      this.$store.state.user.balance_gdt = result.result.data.gdtSum
       this.items = result.result.data.transactions
       this.count = result.result.data.count
     } else {

frontend/src/views/Layout/DashboardLayout_gdd.vue

@@ -28,7 +28,11 @@
       <div @click="$sidebar.displaySidebar(false)">
         <fade-transition :duration="200" origin="center top" mode="out-in">
           <!-- your content here -->
-          <router-view :balance="balance" @update-balance="updateBalance"></router-view>
+          <router-view
+            :balance="balance"
+            :gdt-balance="GdtBalance"
+            @update-balance="updateBalance"
+          ></router-view>
         </fade-transition>
       </div>
       <content-footer v-if="!$route.meta.hideFooter"></content-footer>
@@ -71,6 +75,7 @@ export default {
   data() {
     return {
       balance: 0,
+      GdtBalance: 0,
     }
   },
   methods: {
@@ -94,6 +99,14 @@ export default {
         // what to do when loading balance fails?
       }
     },
+    async loadGDTBalance() {
+      const result = await communityAPI.transactions(this.$store.state.session_id)
+      if (result.success) {
+        this.GdtBalance = result.result.data.gdtSum / 10000
+      } else {
+        // what to do when loading balance fails?
+      }
+    },
     updateBalance(ammount) {
       this.balance -= ammount
     },
@@ -103,6 +116,7 @@ export default {
   },
   created() {
     this.loadBalance()
+    this.loadGDTBalance()
   },
 }
 </script>

frontend/src/views/Pages/KontoOverview.vue

@@ -2,7 +2,11 @@
   <div>
     <base-header class="pb-6 pb-8 pt-5 pt-md-8 bg-transparent"></base-header>
     <b-container fluid class="mt--7">
-      <gdd-status :balance="balance" :show-transaction-list="showTransactionList" />
+      <gdd-status
+        :balance="balance"
+        :gdt-balance="GdtBalance"
+        :show-transaction-list="showTransactionList"
+      />
       <br />
       <gdd-send
         :balance="balance"
@@ -34,6 +38,7 @@ export default {
   },
   props: {
     balance: { type: Number, default: 0 },
+    GdtBalance: { type: Number, default: 0 },
   },
   components: {
     GddStatus,

frontend/src/views/Pages/Register.vue

@@ -174,7 +174,7 @@ export default {
         this.password,
       )
       if (result.success) {
-        this.$store.dispatch('createUser', {
+        this.$store.dispatch('login', {
           session_id: result.result.data.session_id,
           email: this.model.email,
         })