From 5699620c858925101f561f315034c57fae878964 Mon Sep 17 00:00:00 2001
From: Moriz Wahl <moriz.wahl@gmx.de>
Date: Mon, 12 Jul 2021 12:20:08 +0200
Subject: [PATCH] suggested solutions

---
 .../DonationInfo/DonationInfo.spec.js         |  83 ++++++------
 .../components/DonationInfo/DonationInfo.vue  |   1 +
 webapp/pages/admin/donations.spec.js          |  82 ++++++++----
 webapp/pages/admin/donations.vue              | 123 +++++++++---------
 4 files changed, 159 insertions(+), 130 deletions(-)

diff --git a/webapp/components/DonationInfo/DonationInfo.spec.js b/webapp/components/DonationInfo/DonationInfo.spec.js
index 7e8f890cb..06edfe491 100644
--- a/webapp/components/DonationInfo/DonationInfo.spec.js
+++ b/webapp/components/DonationInfo/DonationInfo.spec.js
@@ -25,49 +25,50 @@ describe('DonationInfo.vue', () => {
 
   const Wrapper = () => mount(DonationInfo, { mocks, localVue, propsData })
 
-  it('displays the progress bar', () => {
-    wrapper = Wrapper()
-    expect(wrapper.find('.progress-bar').exists()).toBe(true)
-  })
-
-  it('displays the action button', () => {
-    wrapper = Wrapper()
-    expect(wrapper.find('.base-button').text()).toBe('donations.donate-now')
-  })
-
-  it('includes a link to the ocelot.social donations website', () => {
-    wrapper = Wrapper()
-    expect(wrapper.find('a').attributes('href')).toBe(
-      'https://ocelot-social.herokuapp.com/donations',
-    )
-  })
-
-  describe('mount with data', () => {
-    describe('given german locale', () => {
-      it.skip('creates a label from the given amounts and a translation string', () => {
-        // couldn't find out why it's not working
-        mocks.$i18n.locale = () => 'de'
-        wrapper = Wrapper()
-        expect(mocks.$t).toBeCalledWith(
-          'donations.amount-of-total',
-          expect.objectContaining({
-            amount: '10.000',
-            total: '50.000',
-          }),
-        )
-      })
+  describe('mount', () => {
+    beforeEach(() => {
+      wrapper = Wrapper()
     })
 
-    describe('given english locale', () => {
-      it('creates a label from the given amounts and a translation string', () => {
-        wrapper = Wrapper()
-        expect(mocks.$t).toBeCalledWith(
-          'donations.amount-of-total',
-          expect.objectContaining({
-            amount: '10,000',
-            total: '50,000',
-          }),
-        )
+    it('displays the progress bar', () => {
+      expect(wrapper.find('.progress-bar').exists()).toBe(true)
+    })
+
+    it('displays the action button', () => {
+      expect(wrapper.find('.base-button').text()).toBe('donations.donate-now')
+    })
+
+    it('includes a link to the ocelot.social donations website', () => {
+      expect(wrapper.find('a').attributes('href')).toBe(
+        'https://ocelot-social.herokuapp.com/donations',
+      )
+    })
+
+    describe('mount with data', () => {
+      describe('given german locale', () => {
+        beforeEach(() => {
+          mocks.$i18n.locale = () => 'de'
+        })
+
+        // it looks to me that toLocaleString for some reason is not working as expected
+        it.skip('creates a label from the given amounts and a translation string', () => {
+          expect(mocks.$t).nthCalledWith(1, 'donations.amount-of-total', {
+            amount: '10.000',
+            total: '50.000',
+          })
+        })
+      })
+
+      describe('given english locale', () => {
+        it('creates a label from the given amounts and a translation string', () => {
+          expect(mocks.$t).toBeCalledWith(
+            'donations.amount-of-total',
+            expect.objectContaining({
+              amount: '10,000',
+              total: '50,000',
+            }),
+          )
+        })
       })
     })
   })
diff --git a/webapp/components/DonationInfo/DonationInfo.vue b/webapp/components/DonationInfo/DonationInfo.vue
index dc4184e19..6034dfb1b 100644
--- a/webapp/components/DonationInfo/DonationInfo.vue
+++ b/webapp/components/DonationInfo/DonationInfo.vue
@@ -28,6 +28,7 @@ export default {
   },
   computed: {
     label() {
+      // console.log(typeof this.progress, this.$i18n.locale(), this.progress.toLocaleString('de-DE'))
       return this.$t('donations.amount-of-total', {
         amount: this.progress.toLocaleString(this.$i18n.locale()),
         total: this.goal.toLocaleString(this.$i18n.locale()),
diff --git a/webapp/pages/admin/donations.spec.js b/webapp/pages/admin/donations.spec.js
index c08245bf7..3cef9f95a 100644
--- a/webapp/pages/admin/donations.spec.js
+++ b/webapp/pages/admin/donations.spec.js
@@ -8,24 +8,38 @@ describe('donations.vue', () => {
   let wrapper
   let mocks
 
+  const donationsQueryMock = jest.fn()
+  const donationsUpdateMock = jest.fn()
+  const donationsMutaionMock = jest.fn()
+  donationsMutaionMock.mockResolvedValue({
+    then: jest.fn(),
+    catch: jest.fn(),
+  })
+  
   beforeEach(() => {
     mocks = {
       $t: jest.fn((string) => string),
       $apollo: {
-        // queries: {
-          // Donations: {
-        //     refetch: jest.fn(),
-        //     // fetchMore: jest.fn().mockResolvedValue([
-        //     //   {
-        //     //     id: 'p23',
-        //     //     name: 'It is a post',
-        //     //     author: {
-        //     //       id: 'u1',
-        //     //     },
-        //     //   },
-        //     // ]),
-          // },
-        // },
+        Donations: {
+          query: donationsQueryMock,
+          update: donationsUpdateMock,
+        },
+        mutate: donationsMutaionMock,
+        queries: {
+          Donations: {
+            query: donationsQueryMock,
+            refetch: jest.fn(),
+            fetchMore: jest.fn().mockResolvedValue([
+              {
+                id: 'p23',
+                name: 'It is a post',
+                author: {
+                  id: 'u1',
+                },
+              },
+            ]),
+          },
+        },
         // query: jest.fn().mockResolvedValue({
         //   data: {
         //     Donations: 1,
@@ -100,17 +114,18 @@ describe('donations.vue', () => {
       })
 
       it.skip('on donations-goal and enter value XXX', async () => {
-        wrapper.find('#showDonations').trigger('click') // set to true
         // wrapper.find('[data-test="donations-goal"]').setValue('20000')
         wrapper.find('#donations-goal').setValue('20000')
         await wrapper.vm.$nextTick()
+        console.log(wrapper.find('#donations-goal').element.value)
         expect(wrapper.vm.formData.goal).toBe('20000')
       })
     })
 
     describe('apollo', () => {
       it.skip('query is called', () => {
-        // expect(mocks.$apollo.queries.Donations.refetch).toHaveBeenCalledTimes(1)
+        expect(donationsQueryMock).toHaveBeenCalledTimes(1)
+        expect(mocks.$apollo.queries.Donations.refetch).toHaveBeenCalledTimes(1)
         // expect(mocks.$apollo.Donations.query().exists()).toBeTruthy()
         console.log('mocks.$apollo: ', mocks.$apollo)
       })
@@ -124,27 +139,36 @@ describe('donations.vue', () => {
       })
 
       describe('submit', () => {
-        it.skip('calls mutation with default values once', async () => {
+        beforeEach(() => {
+          jest.clearAllMocks()
+        })
+        
+        it('calls mutation with default values once', () => {
           // TODO: Makes the warning: "UnhandledPromiseRejectionWarning: TypeError: Cannot read property 'error' of undefined"
           wrapper.find('.donations-info-button').trigger('submit')
-          await mocks.$apollo.mutate
-          // await flushPromises()
-          expect(mocks.$apollo.mutate).toHaveBeenCalledWith(expect.objectContaining({variables: { showDonations: false, goal: 15000, progress: 0 }}))
-          expect(mocks.$apollo.mutate).toHaveBeenCalledTimes(1)
+          //await flushPromises()
+          expect(donationsMutaionMock).toHaveBeenCalledWith(
+            expect.objectContaining({
+              variables: { showDonations: false, goal: 15000, progress: 0 },
+            }),
+          )
         })
 
-        it.skip('calls mutation with input values once', async () => {
+        it('calls mutation with input values once', async () => {
           wrapper.find('#showDonations').trigger('click') // set to true
-          await wrapper.vm.$nextTick()
-          // wrapper.find('[data-test="donations-goal"]').setValue('20000')
+          //wrapper.find('[data-test="donations-goal"]').setValue('20000')
           wrapper.find('#donations-goal').setValue('20000')
           await wrapper.vm.$nextTick()
           // expect(wrapper.vm.formData.goal).toBe('20000')
           wrapper.find('.donations-info-button').trigger('submit')
-          await mocks.$apollo.mutate
+          await wrapper.vm.$nextTick()
+          //await mocks.$apollo.mutate
           await flushPromises()
-          expect(mocks.$apollo.mutate).toHaveBeenCalledWith(expect.objectContaining({variables: { showDonations: true, goal: 15000, progress: 0 }}))
-          expect(mocks.$apollo.mutate).toHaveBeenCalledTimes(1)
+          expect(mocks.$apollo.mutate).toHaveBeenCalledWith(
+            expect.objectContaining({
+              variables: { showDonations: true, goal: 20000, progress: 0 },
+            }),
+          )
         })
 
         it.skip('calls mutation with corrected values once', async () => {
@@ -158,7 +182,9 @@ describe('donations.vue', () => {
         })
 
         it.skip('default values are displayed', async () => {
-          mocks.$apollo.mutate = jest.fn().mockResolvedValue({ data: { UpdateDonations: { showDonations: true, goal: 10, progress: 20 } } })
+          mocks.$apollo.mutate = jest.fn().mockResolvedValue({
+            data: { UpdateDonations: { showDonations: true, goal: 10, progress: 20 } },
+          })
           wrapper.find('.donations-info-button').trigger('submit')
           await mocks.$apollo.mutate
           await Vue.nextTick()
diff --git a/webapp/pages/admin/donations.vue b/webapp/pages/admin/donations.vue
index 26920e050..0c7ede475 100644
--- a/webapp/pages/admin/donations.vue
+++ b/webapp/pages/admin/donations.vue
@@ -40,68 +40,69 @@
 </template>
 
 <script>
-import { DonationsQuery, UpdateDonations } from '~/graphql/Donations'
+ import { DonationsQuery, UpdateDonations } from '~/graphql/Donations'
 
-export default {
-  data() {
-    return {
-      formData: {
-        goal: null,
-        progress: null,
-      },
-      // TODO: Our styleguide does not support checkmarks.
-      // Integrate showDonations into `this.formData` once we
-      // have checkmarks available.
-      showDonations: false,
-    }
-  },
-  methods: {
-    submit() {
-      const { showDonations } = this
-      let { goal, progress } = this.formData
-      goal = typeof goal === 'string' && goal.length > 0 ? goal : '15000'
-      progress = typeof progress === 'string' && progress.length > 0 ? progress : '0'
-      this.$apollo
-        .mutate({
-          mutation: UpdateDonations(),
-          variables: {
-            showDonations,
-            goal: parseInt(goal),
-            progress: parseInt(progress) < parseInt(goal) ? parseInt(progress) : parseInt(goal),
-          },
-          update: (_store, { data }) => {
-            if (!data || !data.UpdateDonations) return
-            const { showDonations, goal, progress } = data.UpdateDonations
-            this.showDonations = showDonations
-            this.formData = {
-              goal: goal.toString(10),
-              progress: progress < goal ? progress.toString(10) : goal.toString(10),
-            }
-          },
-        })
-        .then(() => {
-          this.$toast.success(this.$t('admin.donations.successfulUpdate'))
-        })
-        .catch((error) => this.$toast.error(error.message))
-    },
-  },
-  apollo: {
-    Donations: {
-      query() {
-        return DonationsQuery()
-      },
-      update({ Donations }) {
-        if (!Donations) return
-        const { showDonations, goal, progress } = Donations
-        this.showDonations = showDonations
-        this.formData = {
-          goal: goal.toString(10),
-          progress: progress < goal ? progress.toString(10) : goal.toString(10),
-        }
-      },
-    },
-  },
-}
+ export default {
+   data() {
+     return {
+       formData: {
+         goal: null,
+         progress: null,
+       },
+       // TODO: Our styleguide does not support checkmarks.
+       // Integrate showDonations into `this.formData` once we
+       // have checkmarks available.
+       showDonations: false,
+     }
+   },
+   methods: {
+     submit() {
+       const { showDonations } = this
+       let { goal, progress } = this.formData
+       console.log(goal, progress)
+       goal = typeof goal === 'string' && goal.length > 0 ? goal : '15000'
+       progress = typeof progress === 'string' && progress.length > 0 ? progress : '0'
+       this.$apollo
+           .mutate({
+             mutation: UpdateDonations(),
+             variables: {
+               showDonations,
+               goal: parseInt(goal),
+               progress: parseInt(progress) < parseInt(goal) ? parseInt(progress) : parseInt(goal),
+             },
+             update: (_store, { data }) => {
+               if (!data || !data.UpdateDonations) return
+               const { showDonations, goal, progress } = data.UpdateDonations
+               this.showDonations = showDonations
+               this.formData = {
+                 goal: goal.toString(10),
+                 progress: progress < goal ? progress.toString(10) : goal.toString(10),
+               }
+             },
+           })
+           .then(() => {
+             this.$toast.success(this.$t('admin.donations.successfulUpdate'))
+           })
+           .catch((error) => this.$toast.error(error.message))
+     },
+   },
+   apollo: {
+     Donations: {
+       query() {
+         return DonationsQuery()
+       },
+       update({ Donations }) {
+         if (!Donations) return
+         const { showDonations, goal, progress } = Donations
+         this.showDonations = showDonations
+         this.formData = {
+           goal: goal.toString(10),
+           progress: progress < goal ? progress.toString(10) : goal.toString(10),
+         }
+       },
+     },
+   },
+ }
 </script>
 
 <style lang="scss" scoped>