first tests

admin/src/pages/CreationConfirm.vue

@@ -95,8 +95,8 @@ export default {
       this.item = item
     },
     updateState(id) {
+      this.pendingCreations.find((obj) => obj.id === id).messagesCount++
       this.pendingCreations.find((obj) => obj.id === id).state = 'IN_PROGRESS'
-      this.pendingCreations.find((obj) => obj.id === id).obj.messagesCount++
     },
   },
   computed: {

frontend/src/components/ContributionMessages/ContributionMessagesFormular.spec.js

@@ -0,0 +1,94 @@
+import { mount } from '@vue/test-utils'
+import ContributionMessagesFormular from './ContributionMessagesFormular.vue'
+import { toastErrorSpy, toastSuccessSpy } from '../../../test/testSetup'
+
+const localVue = global.localVue
+
+const apolloMutateMock = jest.fn().mockResolvedValue()
+
+describe('ContributionMessagesFormular', () => {
+  let wrapper
+
+  const propsData = {
+    contributionId: 42,
+  }
+
+  const mocks = {
+    $t: jest.fn((t) => t),
+    $d: jest.fn((d) => d),
+    $apollo: {
+      mutate: apolloMutateMock,
+    },
+    $i18n: {
+      locale: 'en',
+    },
+  }
+
+  const Wrapper = () => {
+    return mount(ContributionMessagesFormular, {
+      localVue,
+      mocks,
+      propsData,
+    })
+  }
+
+  describe('mount', () => {
+    beforeEach(() => {
+      wrapper = Wrapper()
+    })
+
+    it('has a DIV .contribution-messages-formular', () => {
+      expect(wrapper.find('div.contribution-messages-formular').exists()).toBe(true)
+    })
+
+    describe('call onReset', () => {
+      it('form has the set data', () => {
+        beforeEach(() => {
+          wrapper.setData({
+            form: {
+              text: 'text form message',
+            },
+          })
+          wrapper.vm.onReset()
+        })
+        expect(wrapper.vm.form).toEqual({
+          text: '',
+        })
+      })
+    })
+
+    describe('call onSubmit', () => {
+      it('response with the contribution message', () => {
+        wrapper.vm.onSubmit()
+      })
+    })
+
+    describe('send createContributionLink with error', () => {
+      beforeEach(() => {
+        apolloMutateMock.mockRejectedValue({ message: 'OUCH!' })
+        wrapper = Wrapper()
+        wrapper.vm.onSubmit()
+      })
+
+      it('toasts an error message', () => {
+        expect(toastErrorSpy).toBeCalledWith('OUCH!')
+      })
+    })
+
+    describe('send createContributionLink with success', () => {
+      beforeEach(() => {
+        wrapper.setData({
+          form: {
+            text: 'text form message',
+          },
+        })
+        wrapper = Wrapper()
+        wrapper.vm.onSubmit()
+      })
+
+      it('toasts an success message', () => {
+        expect(toastSuccessSpy).toBeCalledWith(undefined)
+      })
+    })
+  })
+})

frontend/src/components/ContributionMessages/ContributionMessagesFormular.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="contribution-messages-formular">
     <div>
-      <b-form @submit="onSubmit" @reset="onReset">
+      <b-form @submit.prevent="onSubmit" @reset="onReset">
         <b-form-textarea
           id="textarea"
           v-model="form.text"
@@ -40,8 +40,7 @@ export default {
     }
   },
   methods: {
-    onSubmit(event) {
-      event.preventDefault()
+    onSubmit() {
       this.$apollo
         .mutate({
           mutation: createContributionMessage,
@@ -54,14 +53,13 @@ export default {
           this.$emit('get-list-contribution-messages', this.contributionId)
           this.$emit('update-state', this.contributionId)
           this.form.text = ''
-          this.toastSuccess(result)
+          this.toastSuccess(undefined)
         })
         .catch((error) => {
           this.toastError(error.message)
         })
     },
-    onReset(event) {
-      event.preventDefault()
+    onReset() {
       this.form.text = ''
     },
   },

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

@@ -0,0 +1,86 @@
+import { mount } from '@vue/test-utils'
+import ContributionMessagesList from './ContributionMessagesList.vue'
+
+const localVue = global.localVue
+
+describe('ContributionMessagesList', () => {
+  let wrapper
+
+  const propsData = {
+    contributionId: 42,
+    state: 'IN_PROGRESS',
+    messages: [
+      // {
+      //   id: 111,
+      //   message: 'asd asda sda sda',
+      //   createdAt: '2022-08-29T12:23:27.000Z',
+      //   updatedAt: null,
+      //   type: 'DIALOG',
+      //   userFirstName: 'Peter',
+      //   userLastName: 'Lustig',
+      //   userId: 107,
+      //   __typename: 'ContributionMessage',
+      // },
+      // {
+      //   id: 113,
+      //   message: 'asda sdad ad asdasd ',
+      //   createdAt: '2022-08-29T12:25:34.000Z',
+      //   updatedAt: null,
+      //   type: 'DIALOG',
+      //   userFirstName: 'Bibi',
+      //   userLastName: 'Bloxberg',
+      //   userId: 108,
+      //   __typename: 'ContributionMessage',
+      // },
+    ],
+  }
+
+  const mocks = {
+    $t: jest.fn((t) => t),
+    $i18n: {
+      locale: 'en',
+    },
+  }
+
+  const Wrapper = () => {
+    return mount(ContributionMessagesList, {
+      localVue,
+      mocks,
+      propsData,
+    })
+  }
+
+  describe('mount', () => {
+    beforeEach(() => {
+      wrapper = Wrapper()
+    })
+
+    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)
+    })
+
+    describe('get List Contribution Messages', () => {
+      beforeEach(() => {
+        wrapper.vm.getListContributionMessages()
+      })
+
+      it('emits getListContributionMessages', async () => {
+        expect(wrapper.vm.$emit('get-list-contribution-messages')).toBeTruthy()
+      })
+    })
+
+    describe('update State', () => {
+      beforeEach(() => {
+        wrapper.vm.updateState()
+      })
+
+      it('emits getListContributionMessages', async () => {
+        expect(wrapper.vm.$emit('update-state')).toBeTruthy()
+      })
+    })
+  })
+})

frontend/src/components/ContributionMessages/ContributionMessagesList.vue

@@ -35,7 +35,7 @@ export default {
     },
     state: {
       type: String,
-      required: false,
+      required: true,
     },
     messages: {
       type: Array,

frontend/src/components/Contributions/ContributionListItem.spec.js

@@ -12,6 +12,9 @@ describe('ContributionListItem', () => {
   }
 
   const propsData = {
+    contributionId: 42,
+    state: 'PENDING',
+    messagesCount: 2,
     id: 1,
     createdAt: '26/07/2022',
     contributionDate: '07/06/2022',
@@ -37,21 +40,6 @@ describe('ContributionListItem', () => {
       expect(wrapper.find('div.contribution-list-item').exists()).toBe(true)
     })
 
-    describe('contribution type', () => {
-      it('is pending by default', () => {
-        expect(wrapper.vm.type).toBe('pending')
-      })
-
-      it('is deleted when deletedAt is present', async () => {
-        await wrapper.setProps({ deletedAt: new Date().toISOString() })
-        expect(wrapper.vm.type).toBe('deleted')
-      })
-
-      it('is confirmed when confirmedAt is present', async () => {
-        await wrapper.setProps({ confirmedAt: new Date().toISOString() })
-        expect(wrapper.vm.type).toBe('confirmed')
-      })
-    })
 
     describe('contribution icon', () => {
       it('is bell-fill by default', () => {
@@ -83,6 +71,11 @@ describe('ContributionListItem', () => {
         await wrapper.setProps({ confirmedAt: new Date().toISOString() })
         expect(wrapper.vm.variant).toBe('success')
       })
+
+      it('is warning at when state is IN_PROGRESS', async () => {
+        await wrapper.setProps({ state: 'IN_PROGRESS' })
+        expect(wrapper.vm.variant).toBe('warning')
+      })
     })
 
     describe('date', () => {
@@ -133,7 +126,7 @@ describe('ContributionListItem', () => {
         beforeEach(async () => {
           spy = jest.spyOn(wrapper.vm.$bvModal, 'msgBoxConfirm')
           spy.mockImplementation(() => Promise.resolve(false))
-          await wrapper.findAll('div.pointer').at(1).trigger('click')
+          await wrapper.findAll('div.pointer').at(2).trigger('click')
         })
 
         it('does not emit delete contribution', () => {