first tests adminarea

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

@@ -0,0 +1,93 @@
+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),
+    $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)
+      })
+    })
+  })
+})

admin/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.prevent="onReset">
         <b-form-textarea
           id="textarea"
           v-model="form.text"
@@ -41,7 +41,6 @@ export default {
   },
   methods: {
     onSubmit(event) {
-      event.preventDefault()
       this.$apollo
         .mutate({
           mutation: adminCreateContributionMessage,
@@ -61,7 +60,6 @@ export default {
         })
     },
     onReset(event) {
-      event.preventDefault()
       this.form.text = ''
     },
   },

admin/src/components/ContributionMessages/slots/ContributionMessagesListItem.spec.js

@@ -0,0 +1,57 @@
+import { mount } from '@vue/test-utils'
+import ContributionMessagesListItem from './ContributionMessagesListItem.vue'
+
+const localVue = global.localVue
+
+describe('ContributionMessagesListItem', () => {
+  let wrapper
+
+  const mocks = {
+    $t: jest.fn((t) => t),
+    $store: {
+      state: {
+        moderator: {
+          id: 107,
+        },
+      },
+    },
+  }
+
+  const propsData = {
+    contributionId: 42,
+    state: 'PENDING0',
+    message: {
+      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',
+    },
+  }
+
+  const Wrapper = () => {
+    return mount(ContributionMessagesListItem, {
+      localVue,
+      mocks,
+      propsData,
+    })
+  }
+
+  describe('mount', () => {
+    beforeEach(() => {
+      wrapper = Wrapper()
+    })
+
+    it('has a DIV .contribution-messages-list-item', () => {
+      expect(wrapper.find('div.contribution-messages-list-item').exists()).toBe(true)
+    })
+
+    it('props.message.default', () => {
+      expect(wrapper.vm.$options.props.message.default.call()).toEqual({})
+    })
+  })
+})

admin/src/components/ContributionMessages/slots/ContributionMessagesListItem.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="contribution-messages-list-item">
     <is-moderator v-if="isModerator" :message="message"></is-moderator>
     <is-not-moderator v-else :message="message"></is-not-moderator>
   </div>

admin/src/components/ContributionMessages/slots/IsModerator.spec.js

@@ -0,0 +1,48 @@
+import { mount } from '@vue/test-utils'
+import IsModerator from './IsModerator.vue'
+
+const localVue = global.localVue
+
+describe('IsModerator', () => {
+  let wrapper
+
+  const mocks = {
+    $t: jest.fn((t) => t),
+  }
+
+  const propsData = {
+    message: {
+      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',
+    },
+  }
+
+  const Wrapper = () => {
+    return mount(IsModerator, {
+      localVue,
+      mocks,
+      propsData,
+    })
+  }
+
+  describe('mount', () => {
+    beforeEach(() => {
+      wrapper = Wrapper()
+    })
+
+    it('has a DIV .slot-is-moderator', () => {
+      expect(wrapper.find('div.slot-is-moderator').exists()).toBe(true)
+    })
+
+    it('props.message.default', () => {
+      expect(wrapper.vm.$options.props.message.default.call()).toEqual({})
+    })
+  })
+})

admin/src/components/ContributionMessages/slots/IsNotModerator.spec.js

@@ -0,0 +1,48 @@
+import { mount } from '@vue/test-utils'
+import IsNotModerator from './IsNotModerator.vue'
+
+const localVue = global.localVue
+
+describe('IsNotModerator', () => {
+  let wrapper
+
+  const mocks = {
+    $t: jest.fn((t) => t),
+  }
+
+  const propsData = {
+    message: {
+      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 Wrapper = () => {
+    return mount(IsNotModerator, {
+      localVue,
+      mocks,
+      propsData,
+    })
+  }
+
+  describe('mount', () => {
+    beforeEach(() => {
+      wrapper = Wrapper()
+    })
+
+    it('has a DIV .slot-is-not-moderator', () => {
+      expect(wrapper.find('div.slot-is-not-moderator').exists()).toBe(true)
+    })
+
+    it('props.message.default', () => {
+      expect(wrapper.vm.$options.props.message.default.call()).toEqual({})
+    })
+  })
+})