use apollo correctly

admin/src/components/CreationTransactionList.spec.js

@@ -1,43 +1,75 @@
 import { mount } from '@vue/test-utils'
 import CreationTransactionList from './CreationTransactionList'
 import { toastErrorSpy } from '../../test/testSetup'
+import VueApollo from 'vue-apollo'
+import { createMockClient } from 'mock-apollo-client'
+import { adminListContributions } from '../graphql/adminListContributions'
+
+const mockClient = createMockClient()
+const apolloProvider = new VueApollo({
+  defaultClient: mockClient,
+})
 
 const localVue = global.localVue
+localVue.use(VueApollo)
 
-const apolloQueryMock = jest.fn().mockResolvedValue({
-  data: {
+const defaultData = () => {
+  return {
     adminListContributions: {
       contributionCount: 2,
       contributionList: [
         {
           id: 1,
-          amount: 5.8,
-          createdAt: '2022-09-21T11:09:51.000Z',
-          confirmedAt: null,
-          contributionDate: '2022-08-01T00:00:00.000Z',
-          memo: 'für deine Hilfe, Fräulein Rottenmeier',
+          firstName: 'Bibi',
+          lastName: 'Bloxberg',
+          userId: 99,
+          email: 'bibi@bloxberg.de',
+          amount: 500,
+          memo: 'Danke für alles',
+          date: new Date(),
+          moderator: 1,
           state: 'PENDING',
+          creation: [500, 500, 500],
+          messagesCount: 0,
+          deniedBy: null,
+          deniedAt: null,
+          confirmedBy: null,
+          confirmedAt: null,
+          contributionDate: new Date(),
+          deletedBy: null,
+          deletedAt: null,
+          createdAt: new Date(),
         },
         {
           id: 2,
-          amount: '47',
-          createdAt: '2022-09-21T11:09:28.000Z',
-          confirmedAt: '2022-09-21T11:09:28.000Z',
-          contributionDate: '2022-08-01T00:00:00.000Z',
-          memo: 'für deine Hilfe, Frau Holle',
-          state: 'CONFIRMED',
+          firstName: 'Räuber',
+          lastName: 'Hotzenplotz',
+          userId: 100,
+          email: 'raeuber@hotzenplotz.de',
+          amount: 1000000,
+          memo: 'Gut Ergattert',
+          date: new Date(),
+          moderator: 1,
+          state: 'PENDING',
+          creation: [500, 500, 500],
+          messagesCount: 0,
+          deniedBy: null,
+          deniedAt: null,
+          confirmedBy: null,
+          confirmedAt: new Date(),
+          contributionDate: new Date(),
+          deletedBy: null,
+          deletedAt: null,
+          createdAt: new Date(),
         },
       ],
     },
-  },
-})
+  }
+}
 
 const mocks = {
   $d: jest.fn((t) => t),
   $t: jest.fn((t) => t),
-  $apollo: {
-    query: apolloQueryMock,
-  },
 }
 
 const propsData = {
@@ -48,55 +80,53 @@ const propsData = {
 describe('CreationTransactionList', () => {
   let wrapper
 
+  const adminListContributionsMock = jest.fn()
+  mockClient.setRequestHandler(
+    adminListContributions,
+    adminListContributionsMock
+      .mockRejectedValueOnce({ message: 'Ouch!' })
+      .mockResolvedValue({ data: defaultData() }),
+  )
+
   const Wrapper = () => {
-    return mount(CreationTransactionList, { localVue, mocks, propsData })
+    return mount(CreationTransactionList, { localVue, mocks, propsData, apolloProvider })
   }
 
   describe('mount', () => {
     beforeEach(() => {
+      jest.clearAllMocks()
       wrapper = Wrapper()
     })
 
-    it('sends query to Apollo when created', () => {
-      expect(apolloQueryMock).toBeCalledWith(
-        expect.objectContaining({
-          variables: {
-            currentPage: 1,
-            pageSize: 10,
-            order: 'DESC',
-            userId: 1,
-          },
-        }),
-      )
-    })
-
-    it('has two values for the transaction', () => {
-      expect(wrapper.find('tbody').findAll('tr').length).toBe(2)
-    })
-
-    describe('query transaction with error', () => {
-      beforeEach(() => {
-        apolloQueryMock.mockRejectedValue({ message: 'OUCH!' })
-        wrapper = Wrapper()
-      })
-
-      it('calls the API', () => {
-        expect(apolloQueryMock).toBeCalled()
-      })
-
+    describe('server error', () => {
       it('toast error', () => {
-        expect(toastErrorSpy).toBeCalledWith('OUCH!')
+        expect(toastErrorSpy).toBeCalledWith('Ouch!')
       })
     })
 
-    describe('watch currentPage', () => {
-      beforeEach(async () => {
-        jest.clearAllMocks()
-        await wrapper.setData({ currentPage: 2 })
+    describe('sever success', () => {
+      it('sends query to Apollo when created', () => {
+        expect(adminListContributionsMock).toBeCalledWith({
+          currentPage: 1,
+          pageSize: 10,
+          order: 'DESC',
+          userId: 1,
+        })
       })
 
-      it('returns the string in normal order if reversed property is not true', () => {
-        expect(wrapper.vm.currentPage).toBe(2)
+      it('has two values for the transaction', () => {
+        expect(wrapper.find('tbody').findAll('tr').length).toBe(2)
+      })
+
+      describe('watch currentPage', () => {
+        beforeEach(async () => {
+          jest.clearAllMocks()
+          await wrapper.setData({ currentPage: 2 })
+        })
+
+        it('returns the string in normal order if reversed property is not true', () => {
+          expect(wrapper.vm.currentPage).toBe(2)
+        })
       })
     })
   })

admin/src/components/CreationTransactionList.vue

@@ -92,33 +92,26 @@ export default {
       ],
     }
   },
-  methods: {
-    getTransactions() {
-      this.$apollo
-        .query({
-          query: adminListContributions,
-          variables: {
-            currentPage: this.currentPage,
-            pageSize: this.perPage,
-            order: 'DESC',
-            userId: parseInt(this.userId),
-          },
-        })
-        .then((result) => {
-          this.rows = result.data.adminListContributions.contributionCount
-          this.items = result.data.adminListContributions.contributionList
-        })
-        .catch((error) => {
-          this.toastError(error.message)
-        })
-    },
-  },
-  created() {
-    this.getTransactions()
-  },
-  watch: {
-    currentPage() {
-      this.getTransactions()
+  apollo: {
+    AdminListContributions: {
+      query() {
+        return adminListContributions
+      },
+      variables() {
+        return {
+          currentPage: this.currentPage,
+          pageSize: this.perPage,
+          order: 'DESC',
+          userId: parseInt(this.userId),
+        }
+      },
+      update({ adminListContributions }) {
+        this.rows = adminListContributions.contributionCount
+        this.items = adminListContributions.contributionList
+      },
+      error({ message }) {
+        this.toastError(message)
+      },
     },
   },
 }