refactor apollo query, improved test

admin/src/components/ContributionMessages/ContributionMessagesList.spec.js

@@ -1,27 +1,102 @@
 import { mount } from '@vue/test-utils'
 import ContributionMessagesList from './ContributionMessagesList'
+import VueApollo from 'vue-apollo'
+import { createMockClient } from 'mock-apollo-client'
+import { adminListContributionMessages } from '../../graphql/adminListContributionMessages.js'
+import { toastErrorSpy } from '../../../test/testSetup'
+
+const mockClient = createMockClient()
+const apolloProvider = new VueApollo({
+  defaultClient: mockClient,
+})
 
 const localVue = global.localVue
 
-const apolloQueryMock = jest.fn().mockResolvedValue()
+localVue.use(VueApollo)
+
+const defaultData = () => {
+  return {
+    adminListContributionMessages: {
+      count: 4,
+      messages: [
+        {
+          id: 43,
+          message: 'A DIALOG message',
+          createdAt: new Date().toString(),
+          updatedAt: null,
+          type: 'DIALOG',
+          userFirstName: 'Peter',
+          userLastName: 'Lustig',
+          userId: 1,
+          isModerator: true,
+        },
+        {
+          id: 44,
+          message: 'Another DIALOG message',
+          createdAt: new Date().toString(),
+          updatedAt: null,
+          type: 'DIALOG',
+          userFirstName: 'Bibi',
+          userLastName: 'Bloxberg',
+          userId: 2,
+          isModerator: false,
+        },
+        {
+          id: 45,
+          message: `DATE
+---
+A HISTORY message
+---
+AMOUNT`,
+          createdAt: new Date().toString(),
+          updatedAt: null,
+          type: 'HISTORY',
+          userFirstName: 'Bibi',
+          userLastName: 'Bloxberg',
+          userId: 2,
+          isModerator: false,
+        },
+        {
+          id: 46,
+          message: 'A MODERATOR message',
+          createdAt: new Date().toString(),
+          updatedAt: null,
+          type: 'MODERATOR',
+          userFirstName: 'Peter',
+          userLastName: 'Lustig',
+          userId: 1,
+          isModerator: true,
+        },
+      ],
+    },
+  }
+}
 
 describe('ContributionMessagesList', () => {
   let wrapper
 
+  const adminListContributionMessagessMock = jest.fn()
+
+  mockClient.setRequestHandler(
+    adminListContributionMessages,
+    adminListContributionMessagessMock
+      .mockRejectedValueOnce({ message: 'Auaa!' })
+      .mockResolvedValue({ data: defaultData() }),
+  )
+
   const propsData = {
     contributionId: 42,
     contributionUserId: 108,
-    contributionState: 'PENDING',
+    contributionStatus: 'PENDING',
   }
 
   const mocks = {
     $t: jest.fn((t) => t),
+    $d: jest.fn((d) => d),
+    $n: jest.fn((d) => d),
     $i18n: {
       locale: 'en',
     },
-    $apollo: {
-      query: apolloQueryMock,
-    },
   }
 
   const Wrapper = () => {
@@ -29,30 +104,34 @@ describe('ContributionMessagesList', () => {
       localVue,
       mocks,
       propsData,
+      apolloProvider,
     })
   }
 
   describe('mount', () => {
     beforeEach(() => {
+      jest.clearAllMocks()
       wrapper = Wrapper()
     })
 
-    it('sends query to Apollo when created', () => {
-      expect(apolloQueryMock).toBeCalledWith(
-        expect.objectContaining({
-          variables: {
-            contributionId: propsData.contributionId,
-          },
-        }),
-      )
+    describe('server response for admin list contribution messages is error', () => {
+      it('toast an error message', () => {
+        expect(toastErrorSpy).toBeCalledWith('Auaa!')
+      })
     })
 
-    it('has a DIV .contribution-messages-list', () => {
-      expect(wrapper.find('div.contribution-messages-list').exists()).toBe(true)
-    })
+    describe('server response is succes', () => {
+      it('has a DIV .contribution-messages-list', () => {
+        expect(wrapper.find('div.contribution-messages-list').exists()).toBe(true)
+      })
 
-    it('has a Component ContributionMessagesFormular', () => {
-      expect(wrapper.findComponent({ name: 'ContributionMessagesFormular' }).exists()).toBe(true)
+      it('has 4 messages', () => {
+        expect(wrapper.findAll('div.contribution-messages-list-item')).toHaveLength(4)
+      })
+
+      it('has a Component ContributionMessagesFormular', () => {
+        expect(wrapper.findComponent({ name: 'ContributionMessagesFormular' }).exists()).toBe(true)
+      })
     })
   })
 })

admin/src/components/ContributionMessages/ContributionMessagesList.vue

@@ -12,7 +12,7 @@
     <div v-if="contributionStatus === 'PENDING' || contributionStatus === 'IN_PROGRESS'">
       <contribution-messages-formular
         :contributionId="contributionId"
-        @get-list-contribution-messages="getListContributionMessages"
+        @get-list-contribution-messages="$apollo.queries.Messages.refetch()"
         @update-status="updateStatus"
       />
     </div>
@@ -48,30 +48,30 @@ export default {
       messages: [],
     }
   },
-  methods: {
-    getListContributionMessages(id) {
-      this.$apollo
-        .query({
-          query: adminListContributionMessages,
-          variables: {
-            contributionId: id,
-          },
-          fetchPolicy: 'no-cache',
-        })
-        .then((result) => {
-          this.messages = result.data.adminListContributionMessages.messages
-        })
-        .catch((error) => {
-          this.toastError(error.message)
-        })
+  apollo: {
+    Messages: {
+      query() {
+        return adminListContributionMessages
+      },
+      variables() {
+        return {
+          contributionId: this.contributionId,
+        }
+      },
+      fetchPolicy: 'no-cache',
+      update({ adminListContributionMessages }) {
+        this.messages = adminListContributionMessages.messages
+      },
+      error({ message }) {
+        this.toastError(message)
+      },
     },
+  },
+  methods: {
     updateStatus(id) {
       this.$emit('update-status', id)
     },
   },
-  created() {
-    this.getListContributionMessages(this.contributionId)
-  },
 }
 </script>
 <style scoped>

admin/src/graphql/adminListContributionMessages.js

@@ -18,6 +18,7 @@ export const adminListContributionMessages = gql`
         userFirstName
         userLastName
         userId
+        isModerator
       }
     }
   }