setup tests for transaction list

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

@@ -0,0 +1,84 @@
+import { mount } from '@vue/test-utils'
+import GddTransactionList from './GddTransactionList'
+
+const localVue = global.localVue
+
+describe('GddTransactionList', () => {
+  let wrapper
+
+  const mocks = {
+    $n: jest.fn((n) => n),
+    $t: jest.fn((t) => t),
+    $moment: jest.fn((m) => m),
+  }
+
+  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 transacrions', () => {
+      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', () => {
+        console.log(wrapper.html())
+        expect(true).toBeThruthy()
+      })
+    })
+  })
+})

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

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="gdd-transaction-list">
     <b-list-group>
       <b-list-group-item
         v-for="item in transactions.slice(0, max)"
@@ -85,18 +85,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,
@@ -110,20 +103,20 @@ export default {
     getIcon(item) {
       const icon = iconsByType[item.type]
       if (icon) return icon.icon
-      const thing = new Error('no item to given type')
-      thing()
+      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()
+      this.throwError('no class to given type')
     },
     getOperator(item) {
       const icon = iconsByType[item.type]
       if (icon) return icon.operator
-      const thing = new Error('no item to given type')
-      thing()
+      this.throwError('no operator to given type')
+    },
+    throwError(msg) {
+      throw new Error(msg)
     },
   },
 }