From 00e32036a5c3e84100ce6326deab0b9e87483b1a Mon Sep 17 00:00:00 2001
From: Moriz Wahl <moriz.wahl@gmx.de>
Date: Wed, 20 Jul 2022 15:14:51 +0200
Subject: [PATCH] test commmunity page

---
 .../Contributions/ContributionForm.vue        |   2 +-
 .../Contributions/ContributionList.vue        |   1 +
 frontend/src/pages/Community.spec.js          | 302 ++++++++++++++++--
 frontend/src/pages/Community.vue              |   8 -
 4 files changed, 286 insertions(+), 27 deletions(-)

diff --git a/frontend/src/components/Contributions/ContributionForm.vue b/frontend/src/components/Contributions/ContributionForm.vue
index 8a52146a1..ecacfcafc 100644
--- a/frontend/src/components/Contributions/ContributionForm.vue
+++ b/frontend/src/components/Contributions/ContributionForm.vue
@@ -103,7 +103,7 @@ export default {
       if (this.id === null) {
         this.$emit('set-contribution', this.form)
       } else {
-        this.$emit('edit-contribution', this.value)
+        this.$emit('edit-contribution', this.form)
       }
       this.reset()
     },
diff --git a/frontend/src/components/Contributions/ContributionList.vue b/frontend/src/components/Contributions/ContributionList.vue
index b34c2cb67..64fb61450 100644
--- a/frontend/src/components/Contributions/ContributionList.vue
+++ b/frontend/src/components/Contributions/ContributionList.vue
@@ -18,6 +18,7 @@
 <script>
 import ContributionListItem from '@/components/Contributions/ContributionListItem.vue'
 export default {
+  name: 'ContributionList',
   components: {
     ContributionListItem,
   },
diff --git a/frontend/src/pages/Community.spec.js b/frontend/src/pages/Community.spec.js
index 5b8fc2323..7c19ec102 100644
--- a/frontend/src/pages/Community.spec.js
+++ b/frontend/src/pages/Community.spec.js
@@ -1,29 +1,14 @@
 import { mount } from '@vue/test-utils'
 import Community from './Community'
+import { toastErrorSpy, toastSuccessSpy } from '@test/testSetup'
+import { createContribution, updateContribution } from '@/graphql/mutations'
+import { listContributions, listAllContributions, verifyLogin } from '@/graphql/queries'
 
 const localVue = global.localVue
 
 const mockStoreDispach = jest.fn()
 const apolloQueryMock = jest.fn()
 const apolloMutationMock = jest.fn()
-apolloQueryMock.mockResolvedValue({
-  data: {
-    listContributions: {
-      contributionList: [
-        {
-          id: 1555,
-          amount: '200',
-          memo: 'Fleisig, fleisig am Arbeiten mein Lieber Freund, 50 Zeichen sind viel',
-          createdAt: '2022-07-15T08:47:06.000Z',
-          deletedAt: null,
-          confirmedBy: null,
-          confirmedAt: null,
-        },
-      ],
-      contributionCount: 1,
-    },
-  },
-})
 
 describe('Community', () => {
   let wrapper
@@ -52,11 +37,292 @@ describe('Community', () => {
 
   describe('mount', () => {
     beforeEach(() => {
+      apolloQueryMock.mockResolvedValue({
+        data: {
+          listContributions: {
+            contributionList: [
+              {
+                id: 1555,
+                amount: '200',
+                memo: 'Fleisig, fleisig am Arbeiten mein lieber Freund, 50 Zeichen sind viel',
+                createdAt: '2022-07-15T08:47:06.000Z',
+                deletedAt: null,
+                confirmedBy: null,
+                confirmedAt: null,
+              },
+            ],
+            contributionCount: 1,
+          },
+          listAllContributions: {
+            contributionList: [
+              {
+                id: 1555,
+                amount: '200',
+                memo: 'Fleisig, fleisig am Arbeiten mein lieber Freund, 50 Zeichen sind viel',
+                createdAt: '2022-07-15T08:47:06.000Z',
+                deletedAt: null,
+                confirmedBy: null,
+                confirmedAt: null,
+              },
+              {
+                id: 1556,
+                amount: '400',
+                memo: 'Ein anderer lieber Freund ist auch sehr felißig am Arbeiten!!!!',
+                createdAt: '2022-07-16T08:47:06.000Z',
+                deletedAt: null,
+                confirmedBy: null,
+                confirmedAt: null,
+              },
+            ],
+            contributionCount: 2,
+          },
+        },
+      })
       wrapper = Wrapper()
     })
 
     it('has a DIV .community-page', () => {
       expect(wrapper.find('div.community-page').exists()).toBe(true)
     })
+
+    describe('tabs', () => {
+      it('has three tabs', () => {
+        expect(wrapper.findAll('div[role="tabpanel"]')).toHaveLength(3)
+      })
+
+      it('has first tab active by default', () => {
+        expect(wrapper.findAll('div[role="tabpanel"]').at(0).classes('active')).toBe(true)
+      })
+    })
+
+    describe('API calls after creation', () => {
+      it('emits update transactions', () => {
+        expect(wrapper.emitted('update-transactions')).toEqual([[0]])
+      })
+
+      it('queries list of own contributions', () => {
+        expect(apolloQueryMock).toBeCalledWith({
+          fetchPolicy: 'no-cache',
+          query: listContributions,
+          variables: {
+            currentPage: 1,
+            pageSize: 25,
+          },
+        })
+      })
+
+      it('queries list of all contributions', () => {
+        expect(apolloQueryMock).toBeCalledWith({
+          fetchPolicy: 'no-cache',
+          query: listAllContributions,
+          variables: {
+            currentPage: 1,
+            pageSize: 25,
+          },
+        })
+      })
+
+      describe('server response is error', () => {
+        beforeEach(() => {
+          jest.clearAllMocks()
+          apolloQueryMock.mockRejectedValue({ message: 'Ups' })
+          wrapper = Wrapper()
+        })
+
+        it('toasts two errors', () => {
+          expect(toastErrorSpy).toBeCalledTimes(2)
+          expect(toastErrorSpy).toBeCalledWith('Ups')
+        })
+      })
+    })
+
+    describe('set contrubtion', () => {
+      describe('with success', () => {
+        const now = new Date().toISOString()
+        beforeEach(async () => {
+          jest.clearAllMocks()
+          apolloMutationMock.mockResolvedValue({
+            data: {
+              createContribution: true,
+            },
+          })
+          await wrapper.setData({
+            form: {
+              id: null,
+              date: now,
+              memo: 'Mein Beitrag zur Gemeinschaft für diesen Monat ...',
+              amount: '200',
+            },
+          })
+          await wrapper.find('form').trigger('submit')
+        })
+
+        it('calls the create contribution mutation', () => {
+          expect(apolloMutationMock).toBeCalledWith({
+            fetchPolicy: 'no-cache',
+            mutation: createContribution,
+            variables: {
+              creationDate: now,
+              memo: 'Mein Beitrag zur Gemeinschaft für diesen Monat ...',
+              amount: '200',
+            },
+          })
+        })
+
+        it('toasts a success message', () => {
+          expect(toastSuccessSpy).toBeCalledWith({
+            createContribution: true,
+          })
+        })
+
+        it('updates the contribution list', () => {
+          expect(apolloQueryMock).toBeCalledWith({
+            fetchPolicy: 'no-cache',
+            query: listContributions,
+            variables: {
+              currentPage: 1,
+              pageSize: 25,
+            },
+          })
+        })
+
+        it('verifies the login (to get the new creations available)', () => {
+          expect(apolloQueryMock).toBeCalledWith({
+            query: verifyLogin,
+            fetchPolicy: 'network-only',
+          })
+        })
+      })
+
+      describe('with error', () => {
+        const now = new Date().toISOString()
+        beforeEach(async () => {
+          jest.clearAllMocks()
+          apolloMutationMock.mockRejectedValue({
+            message: 'Ouch!',
+          })
+          await wrapper.setData({
+            form: {
+              id: null,
+              date: now,
+              memo: 'Mein Beitrag zur Gemeinschaft für diesen Monat ...',
+              amount: '200',
+            },
+          })
+          await wrapper.find('form').trigger('submit')
+        })
+
+        it('toasts the error message', () => {
+          expect(toastErrorSpy).toBeCalledWith('Ouch!')
+        })
+      })
+    })
+
+    describe('update contrubtion', () => {
+      describe('with success', () => {
+        const now = new Date().toISOString()
+        beforeEach(async () => {
+          jest.clearAllMocks()
+          apolloMutationMock.mockResolvedValue({
+            data: {
+              updateContribution: true,
+            },
+          })
+          await wrapper
+            .findComponent({ name: 'ContributionForm' })
+            .vm.$emit('update-contribution', {
+              id: 2,
+              date: now,
+              memo: 'Mein Beitrag zur Gemeinschaft für diesen Monat ...',
+              amount: '400',
+            })
+        })
+
+        it('calls the update contribution mutation', () => {
+          expect(apolloMutationMock).toBeCalledWith({
+            fetchPolicy: 'no-cache',
+            mutation: updateContribution,
+            variables: {
+              contributionId: 2,
+              creationDate: now,
+              memo: 'Mein Beitrag zur Gemeinschaft für diesen Monat ...',
+              amount: '400',
+            },
+          })
+        })
+
+        it('toasts a success message', () => {
+          expect(toastSuccessSpy).toBeCalledWith({
+            updateContribution: true,
+          })
+        })
+
+        it('updates the contribution list', () => {
+          expect(apolloQueryMock).toBeCalledWith({
+            fetchPolicy: 'no-cache',
+            query: listContributions,
+            variables: {
+              currentPage: 1,
+              pageSize: 25,
+            },
+          })
+        })
+
+        it('verifies the login (to get the new creations available)', () => {
+          expect(apolloQueryMock).toBeCalledWith({
+            query: verifyLogin,
+            fetchPolicy: 'network-only',
+          })
+        })
+      })
+
+      describe('with error', () => {
+        const now = new Date().toISOString()
+        beforeEach(async () => {
+          jest.clearAllMocks()
+          apolloMutationMock.mockRejectedValue({
+            message: 'Oh No!',
+          })
+          await wrapper
+            .findComponent({ name: 'ContributionForm' })
+            .vm.$emit('update-contribution', {
+              id: 2,
+              date: now,
+              memo: 'Mein Beitrag zur Gemeinschaft für diesen Monat ...',
+              amount: '400',
+            })
+        })
+
+        it('toasts the error message', () => {
+          expect(toastErrorSpy).toBeCalledWith('Oh No!')
+        })
+      })
+    })
+
+    describe('update contribution form', () => {
+      const now = new Date().toISOString()
+      beforeEach(async () => {
+        await wrapper.setData({ tabIndex: 1 })
+        await wrapper
+          .findComponent({ name: 'ContributionList' })
+          .vm.$emit('update-contribution-form', {
+            id: 2,
+            createdAt: now,
+            memo: 'Mein Beitrag zur Gemeinschaft für diesen Monat ...',
+            amount: '400',
+          })
+      })
+
+      it('sets the form date to the new values', () => {
+        expect(wrapper.vm.form.id).toBe(2)
+        expect(wrapper.vm.form.date).toBe(now)
+        expect(wrapper.vm.form.memo).toBe('Mein Beitrag zur Gemeinschaft für diesen Monat ...')
+        expect(wrapper.vm.form.amount).toBe('400')
+      })
+
+      it('sets tab index back to 0', () => {
+        expect(wrapper.vm.tabIndex).toBe(0)
+      })
+    })
   })
 })
diff --git a/frontend/src/pages/Community.vue b/frontend/src/pages/Community.vue
index f1218a2fd..e87cba63f 100644
--- a/frontend/src/pages/Community.vue
+++ b/frontend/src/pages/Community.vue
@@ -65,7 +65,6 @@ export default {
   },
   methods: {
     setContribution(data) {
-      // console.log('setContribution', data)
       this.$apollo
         .mutate({
           fetchPolicy: 'no-cache',
@@ -77,7 +76,6 @@ export default {
           },
         })
         .then((result) => {
-          // console.log('result', result.data)
           this.toastSuccess(result.data)
           this.updateListContributions({
             currentPage: this.currentPage,
@@ -90,7 +88,6 @@ export default {
         })
     },
     updateContribution(data) {
-      // console.log('setContribution', data)
       this.$apollo
         .mutate({
           fetchPolicy: 'no-cache',
@@ -103,7 +100,6 @@ export default {
           },
         })
         .then((result) => {
-          // console.log('result', result.data)
           this.toastSuccess(result.data)
           this.updateListContributions({
             currentPage: this.currentPage,
@@ -126,13 +122,11 @@ export default {
           },
         })
         .then((result) => {
-          // console.log('result', result.data)
           const {
             data: { listAllContributions },
           } = result
           this.contributionCountAll = listAllContributions.contributionCount
           this.itemsAll = listAllContributions.contributionList
-          // this.toastSuccess(result.data)
         })
         .catch((err) => {
           this.toastError(err.message)
@@ -149,13 +143,11 @@ export default {
           },
         })
         .then((result) => {
-          // console.log('result', result.data)
           const {
             data: { listContributions },
           } = result
           this.contributionCount = listContributions.contributionCount
           this.items = listContributions.contributionList
-          // this.toastSuccess(result.data)
         })
         .catch((err) => {
           this.toastError(err.message)