Merge pull request #470 from gradido/test-transaction-list

feat: Test Transaction List

.github/workflows/test.yml

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

CHANGELOG.md

@@ -4,8 +4,36 @@ All notable changes to this project will be documented in this file. Dates are d
 
 Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
+#### [1.0.2](https://github.com/gradido/gradido/compare/1.0.1...1.0.2)
+
+- fix: GDD Amount is Always Displayed with Two Digits [`#468`](https://github.com/gradido/gradido/pull/468)
+- fix: Date Time Formats [`#469`](https://github.com/gradido/gradido/pull/469)
+- Community ipv6 localhost [`#466`](https://github.com/gradido/gradido/pull/466)
+- Login html pages autoparse [`#464`](https://github.com/gradido/gradido/pull/464)
+- everything I find and fix crash related in login server this week (kw 20) [`#448`](https://github.com/gradido/gradido/pull/448)
+- 437 bug mobile transaction list is not easy to read [`#462`](https://github.com/gradido/gradido/pull/462)
+- Require memo in send [`#455`](https://github.com/gradido/gradido/pull/455)
+- bug: Thx Page Shows Content Dependent of Route From [`#459`](https://github.com/gradido/gradido/pull/459)
+- bug: responsive display error on pads fixed [`#461`](https://github.com/gradido/gradido/pull/461)
+-  [Bug] German "Dir" is written with capital D in send validation bug [`#460`](https://github.com/gradido/gradido/pull/460)
+- feat: Save Locale in Database [`#450`](https://github.com/gradido/gradido/pull/450)
+- attention! notice in send area removed [`#458`](https://github.com/gradido/gradido/pull/458)
+- Remove Error Message encoding [`#456`](https://github.com/gradido/gradido/pull/456)
+- bug fix:mobile menu closes on logout, probs value problem on logout f… [`#454`](https://github.com/gradido/gradido/pull/454)
+- bug-login password change show hide inserted [`#453`](https://github.com/gradido/gradido/pull/453)
+- fix sorting and use total count [`#451`](https://github.com/gradido/gradido/pull/451)
+- add dynamic error email if transaction failed [`#452`](https://github.com/gradido/gradido/pull/452)
+- ceil the last decay [`#449`](https://github.com/gradido/gradido/pull/449)
+- feat: Raise Coverage of Frontend Unit Tets to 18% [`#447`](https://github.com/gradido/gradido/pull/447)
+- parse cpsp files automatic in build [`a4a12bb`](https://github.com/gradido/gradido/commit/a4a12bb62b4000e035ff15e17c5a5f5861653ff6)
+- translate german html encoded error messages to english and use gettext for automatic translation [`d339627`](https://github.com/gradido/gradido/commit/d33962736d94c1cb7a12ff775bc2c8d7505d646e)
+- 100% coverage of GddTransactionList [`96fb245`](https://github.com/gradido/gradido/commit/96fb245821c69f4d321204a663247d5eee60d92f)
+
 #### [1.0.1](https://github.com/gradido/gradido/compare/1.0.0...1.0.1)
 
+> 14 May 2021
+
+- Login crash fix [`#444`](https://github.com/gradido/gradido/pull/444)
 - add try catch blocks to prevent login-server from crashing [`22ff220`](https://github.com/gradido/gradido/commit/22ff22072956f8b843037c75c5b16b7ff5d6a2a3)
 - fix [`14a4243`](https://github.com/gradido/gradido/commit/14a424347817b1fe6912a113bffd70e55d688112)
 

frontend/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bootstrap-vue-gradido-wallet",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "private": true,
   "scripts": {
     "start": "node run/server.js",

frontend/src/views/Pages/AccountOverview/GddSend/TransactionForm.spec.js

@@ -8,9 +8,6 @@ describe('GddSend', () => {
 
   const mocks = {
     $t: jest.fn((t) => t),
-    $moment: jest.fn((m) => ({
-      format: () => m,
-    })),
     $i18n: {
       locale: jest.fn(() => 'en'),
     },

frontend/src/views/Pages/AccountOverview/GddTransactionList.spec.js

@@ -0,0 +1,238 @@
+import { mount } from '@vue/test-utils'
+import GddTransactionList from './GddTransactionList'
+
+const localVue = global.localVue
+
+const errorHandler = jest.fn()
+
+localVue.config.errorHandler = errorHandler
+
+describe('GddTransactionList', () => {
+  let wrapper
+
+  const mocks = {
+    $n: jest.fn((n) => n),
+    $t: jest.fn((t) => t),
+    $d: jest.fn((d) => d),
+  }
+
+  const Wrapper = () => {
+    return mount(GddTransactionList, { localVue, mocks })
+  }
+
+  describe('mount', () => {
+    beforeEach(() => {
+      wrapper = Wrapper()
+    })
+
+    it('renders the component', () => {
+      expect(wrapper.find('div.gdd-transaction-list').exists()).toBeTruthy()
+    })
+
+    describe('without any properties', () => {
+      it('renders text saying that there are no transactions', () => {
+        expect(wrapper.find('div.gdd-transaction-list').text()).toBe('transaction.nullTransactions')
+      })
+    })
+
+    describe('timestamp property', () => {
+      it('emits update-transactions when timestamp changes', async () => {
+        await wrapper.setProps({ timestamp: 0 })
+        expect(wrapper.emitted('update-transactions')).toBeTruthy()
+      })
+    })
+
+    describe('with transactions', () => {
+      beforeEach(async () => {
+        await wrapper.setProps({
+          transactions: [
+            {
+              balance: '19.93',
+              date: '2021-05-25T17:38:13+00:00',
+              memo: 'Alles Gute zum Geburtstag',
+              name: 'Bob der Baumeister',
+              transaction_id: 29,
+              type: 'send',
+            },
+            {
+              balance: '1000',
+              date: '2021-04-29T15:34:49+00:00',
+              memo: 'Gut das du da bist!',
+              name: 'Gradido Akademie',
+              transaction_id: 3,
+              type: 'creation',
+            },
+            {
+              balance: '314.98',
+              date: '2021-04-29T17:26:40+00:00',
+              memo: 'Für das Fahrrad!',
+              name: 'Jan Ulrich',
+              transaction_id: 8,
+              type: 'receive',
+            },
+            {
+              balance: '1.07',
+              type: 'decay',
+            },
+          ],
+          transactionCount: 12,
+        })
+      })
+
+      it('renders 4 transactions', () => {
+        expect(wrapper.findAll('div.gdd-transaction-list-item')).toHaveLength(4)
+      })
+
+      describe('send transactions', () => {
+        let transaction
+        beforeEach(() => {
+          transaction = wrapper.findAll('div.gdd-transaction-list-item').at(0)
+        })
+
+        it('has a bi-arrow-left-circle icon', () => {
+          expect(transaction.find('svg').classes()).toContain('bi-arrow-left-circle')
+        })
+
+        it('has text-danger color', () => {
+          expect(transaction.find('svg').classes()).toContain('text-danger')
+        })
+
+        it('shows the amount of transaction', () => {
+          expect(transaction.findAll('div').at(2).text()).toContain('19.93')
+        })
+
+        it('has a minus operator', () => {
+          expect(transaction.findAll('div').at(2).text()).toContain('-')
+        })
+
+        it('shows the name of the receiver', () => {
+          expect(transaction.findAll('div').at(3).text()).toContain('Bob der Baumeister')
+        })
+
+        it('shows the date of the transaction', () => {
+          expect(transaction.findAll('div').at(3).text()).toContain('Tue May 25 2021')
+        })
+      })
+
+      describe('creation transactions', () => {
+        let transaction
+        beforeEach(() => {
+          transaction = wrapper.findAll('div.gdd-transaction-list-item').at(1)
+        })
+
+        it('has a bi-gift icon', () => {
+          expect(transaction.find('svg').classes()).toContain('bi-gift')
+        })
+
+        it('has gradido-global-color-accent color', () => {
+          expect(transaction.find('svg').classes()).toContain('gradido-global-color-accent')
+        })
+
+        it('shows the amount of transaction', () => {
+          expect(transaction.findAll('div').at(2).text()).toContain('1000')
+        })
+
+        it('has a plus operator', () => {
+          expect(transaction.findAll('div').at(2).text()).toContain('+')
+        })
+
+        it('shows the name of the receiver', () => {
+          expect(transaction.findAll('div').at(3).text()).toContain('Gradido Akademie')
+        })
+
+        it('shows the date of the transaction', () => {
+          expect(transaction.findAll('div').at(3).text()).toContain('Thu Apr 29 2021')
+        })
+      })
+
+      describe('receive transactions', () => {
+        let transaction
+        beforeEach(() => {
+          transaction = wrapper.findAll('div.gdd-transaction-list-item').at(2)
+        })
+
+        it('has a bi-arrow-right-circle icon', () => {
+          expect(transaction.find('svg').classes()).toContain('bi-arrow-right-circle')
+        })
+
+        it('has gradido-global-color-accent color', () => {
+          expect(transaction.find('svg').classes()).toContain('gradido-global-color-accent')
+        })
+
+        it('shows the amount of transaction', () => {
+          expect(transaction.findAll('div').at(2).text()).toContain('314.98')
+        })
+
+        it('has a plus operator', () => {
+          expect(transaction.findAll('div').at(2).text()).toContain('+')
+        })
+
+        it('shows the name of the receiver', () => {
+          expect(transaction.findAll('div').at(3).text()).toContain('Jan Ulrich')
+        })
+
+        it('shows the date of the transaction', () => {
+          expect(transaction.findAll('div').at(3).text()).toContain('Thu Apr 29 2021')
+        })
+      })
+
+      describe('decay transactions', () => {
+        let transaction
+        beforeEach(() => {
+          transaction = wrapper.findAll('div.gdd-transaction-list-item').at(3)
+        })
+
+        it('has a bi-droplet-half icon', () => {
+          expect(transaction.find('svg').classes()).toContain('bi-droplet-half')
+        })
+
+        it('has gradido-global-color-gray color', () => {
+          expect(transaction.find('svg').classes()).toContain('gradido-global-color-gray')
+        })
+
+        it('shows the amount of transaction', () => {
+          expect(transaction.findAll('div').at(2).text()).toContain('1.07')
+        })
+
+        it('has a minus operator', () => {
+          expect(transaction.findAll('div').at(2).text()).toContain('-')
+        })
+
+        it('shows the name of the receiver', () => {
+          expect(transaction.findAll('div').at(3).text()).toBe('decay')
+        })
+      })
+
+      describe('max property set to 2', () => {
+        beforeEach(async () => {
+          await wrapper.setProps({ max: 2 })
+        })
+
+        it('shows only 2 transactions', () => {
+          expect(wrapper.findAll('div.gdd-transaction-list-item')).toHaveLength(2)
+        })
+      })
+    })
+
+    describe('with invalid transaction type', () => {
+      beforeEach(async () => {
+        await wrapper.setProps({
+          transactions: [
+            {
+              balance: '19.93',
+              date: '2021-05-25T17:38:13+00:00',
+              memo: 'Alles Gute zum Geburtstag',
+              name: 'Bob der Baumeister',
+              transaction_id: 29,
+              type: 'invalid',
+            },
+          ],
+        })
+      })
+
+      it('throws an error', () => {
+        expect(errorHandler).toHaveBeenCalled()
+      })
+    })
+  })
+})

frontend/src/views/Pages/AccountOverview/GddTransactionList.vue

@@ -1,22 +1,21 @@
 <template>
-  <div>
+  <div class="gdd-transaction-list">
     <b-list-group>
       <b-list-group-item
         v-for="item in transactions.slice(0, max)"
         :key="item.id"
         style="background-color: #ebebeba3 !important"
       >
-        <div class="d-flex" v-b-toggle="'a' + item.date + ''">
+        <div class="d-flex gdd-transaction-list-item" v-b-toggle="'a' + item.date + ''">
           <div style="width: 8%">
-            <b-icon :icon="getIcon(item)" :class="getClass(item)" />
+            <b-icon :icon="getProperties(item).icon" :class="getProperties(item).class" />
           </div>
           <div class="font1_2em pr-2 text-right" style="width: 32%">
-            <span>{{ getOperator(item) }}</span>
+            <span>{{ getProperties(item).operator }}</span>
             {{ $n(item.balance, 'decimal') }}
           </div>
           <div class="font1_2em text-left pl-2" style="width: 55%">
-            {{ item.name }}
-            <small>{{ item.name ? '' : $t('decay') }}</small>
+            {{ item.name ? item.name : $t('decay') }}
             <div v-if="item.date" class="text-sm">{{ $d($moment(item.date), 'long') }}</div>
           </div>
           <div class="text-right" style="width: 5%">
@@ -85,18 +84,11 @@ const iconsByType = {
 export default {
   name: 'gdd-transaction-list',
   props: {
-    transactions: { default: [] },
+    transactions: { default: () => [] },
     max: { type: Number, default: 1000 },
     timestamp: { type: Number, default: 0 },
     transactionCount: { type: Number, default: 0 },
   },
-  data() {
-    return {
-      form: [],
-      fields: ['balance', 'date', 'memo', 'name', 'transaction_id', 'type', 'details'],
-      items: [],
-    }
-  },
   watch: {
     timestamp: {
       immediate: true,
@@ -107,23 +99,18 @@ export default {
     updateTransactions() {
       this.$emit('update-transactions')
     },
-    getIcon(item) {
-      const icon = iconsByType[item.type]
-      if (icon) return icon.icon
-      const thing = new Error('no item to given type')
-      thing()
+    getProperties(item) {
+      const type = iconsByType[item.type]
+      if (type)
+        return {
+          icon: type.icon,
+          class: type.classes + ' m-mb-1 font2em',
+          operator: type.operator,
+        }
+      this.throwError('no icon to given type')
     },
-    getClass(item) {
-      const icon = iconsByType[item.type]
-      if (icon) return icon.classes + ' m-mb-1 font2em'
-      const thing = new Error('no item to given type')
-      thing()
-    },
-    getOperator(item) {
-      const icon = iconsByType[item.type]
-      if (icon) return icon.operator
-      const thing = new Error('no item to given type')
-      thing()
+    throwError(msg) {
+      throw new Error(msg)
     },
   },
 }

frontend/src/views/Pages/AccountOverview/GddTransactionListFooter.spec.js

@@ -0,0 +1,48 @@
+import { mount, RouterLinkStub } from '@vue/test-utils'
+import GddTransactionListFooter from './GddTransactionListFooter'
+
+const localVue = global.localVue
+
+describe('GddTransactionListFooter', () => {
+  let wrapper
+
+  const mocks = {
+    $t: jest.fn((t) => t),
+  }
+
+  const stubs = {
+    RouterLink: RouterLinkStub,
+  }
+
+  const Wrapper = () => {
+    return mount(GddTransactionListFooter, { localVue, mocks, stubs })
+  }
+
+  describe('mount', () => {
+    beforeEach(() => {
+      wrapper = Wrapper()
+    })
+
+    it('renders the component', () => {
+      expect(wrapper.find('div.list-group').exists()).toBeTruthy()
+    })
+
+    it('contains no text', () => {
+      expect(wrapper.text()).toBe('')
+    })
+  })
+
+  describe('count property is greater than 5', () => {
+    beforeEach(async () => {
+      wrapper.setProps({ count: 6 })
+    })
+
+    it('renders a link to show all', () => {
+      expect(wrapper.text()).toBe('transaction.show_all')
+    })
+
+    it('links to /transactions', () => {
+      expect(wrapper.findComponent(RouterLinkStub).props().to).toBe('/transactions')
+    })
+  })
+})

frontend/test/testSetup.js

@@ -17,6 +17,8 @@ import VueQrcode from 'vue-qrcode'
 import BaseHeader from '@/components/BaseHeader'
 import StatsCard from '@/components/Cards/StatsCard.vue'
 
+import VueMoment from 'vue-moment'
+
 import clickOutside from '@/directives/click-ouside.js'
 
 global.localVue = createLocalVue()
@@ -37,6 +39,7 @@ global.localVue.use(Notifications)
 global.localVue.use(SideBar)
 global.localVue.use(VueRouter)
 global.localVue.use(VueQrcode)
+global.localVue.use(VueMoment)
 global.localVue.component(BaseInput.name, BaseInput)
 global.localVue.component('validation-provider', ValidationProvider)
 global.localVue.component('validation-observer', ValidationObserver)

package.json

@@ -1,6 +1,6 @@
 {
   "name": "gradido",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "description": "Gradido",
   "main": "index.js",
   "repository": "git@github.com:gradido/gradido.git",