query donations data in donation info component

webapp/components/DonationInfo/DonationInfo.spec.js

@@ -9,7 +9,8 @@ const mockDate = new Date(2019, 11, 6)
 global.Date = jest.fn(() => mockDate)
 
 describe('DonationInfo.vue', () => {
-  let mocks, propsData
+  let mocks, wrapper
+
   beforeEach(() => {
     mocks = {
       $t: jest.fn(string => string),
@@ -17,13 +18,9 @@ describe('DonationInfo.vue', () => {
         locale: () => 'de',
       },
     }
-    propsData = {
-      goal: 50000,
-      progress: 10000,
-    }
   })
 
-  const Wrapper = () => mount(DonationInfo, { propsData, mocks, localVue })
+  const Wrapper = () => mount(DonationInfo, { mocks, localVue })
 
   it('includes a link to the Human Connection donations website', () => {
     expect(
@@ -46,25 +43,37 @@ describe('DonationInfo.vue', () => {
     expect(Wrapper().vm.title).toBe('Spenden für Dezember')
   })
 
-  describe('given german locale', () => {
-    it('creates a label from the given amounts and a translation string', () => {
-      Wrapper()
-      expect(mocks.$t.mock.calls[1][0]).toBe('donations.amount-of-total')
-      expect(mocks.$t.mock.calls[1][1]).toStrictEqual({
-        amount: '10.000',
-        total: '50.000',
+  describe('mount with data', () => {
+    beforeEach(() => {
+      wrapper = Wrapper()
+      wrapper.setData({ goal: 50000, progress: 10000 })
+    })
+
+    describe('given german 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',
+          }),
+        )
       })
     })
-  })
 
-  describe('given english locale', () => {
-    it('creates a label from the given amounts and a translation string', () => {
-      mocks.$i18n.locale = () => 'en'
-      Wrapper()
-      expect(mocks.$t.mock.calls[1][0]).toBe('donations.amount-of-total')
-      expect(mocks.$t.mock.calls[1][1]).toStrictEqual({
-        amount: '10,000',
-        total: '50,000',
+    describe('given english locale', () => {
+      beforeEach(() => {
+        mocks.$i18n.locale = () => 'en'
+      })
+
+      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',
+          }),
+        )
       })
     })
   })

webapp/components/DonationInfo/DonationInfo.vue

@@ -8,22 +8,18 @@
 </template>
 
 <script>
+import { DonationsQuery } from '~/graphql/Donations'
 import ProgressBar from '~/components/ProgressBar/ProgressBar.vue'
 
 export default {
   components: {
     ProgressBar,
   },
-  // TODO: get values from state / database? --> should not be props and not have defaults
-  props: {
-    goal: {
-      type: Number,
-      default: 15000,
-    },
-    progress: {
-      type: Number,
-      default: 500,
-    },
+  data() {
+    return {
+      goal: 0,
+      progress: 0,
+    }
   },
   computed: {
     title() {
@@ -38,6 +34,18 @@ export default {
       })
     },
   },
+  apollo: {
+    Donations: {
+      query() {
+        return DonationsQuery()
+      },
+      result({ data: { Donations } }) {
+        const { goal, progress } = Donations[0]
+        this.goal = goal
+        this.progress = progress
+      },
+    },
+  },
 }
 </script>