Add component tests, translations

.vscode/settings.json

@@ -9,4 +9,4 @@
   ],
   "editor.formatOnSave": true,
   "eslint.autoFixOnSave": true
-}
+}

backend/src/schema/resolvers/posts.spec.js

@@ -19,7 +19,7 @@ afterEach(async () => {
 describe('CreatePost', () => {
   const mutation = `
     mutation {
-      CreatePost(title: "I am a title", content: "Some content", language: "en") {
+      CreatePost(title: "I am a title", content: "Some content") {
         title
         content
         slug

webapp/components/ContributionForm/ContributionForm.spec.js

@@ -0,0 +1,137 @@
+import { config, mount, createLocalVue } from '@vue/test-utils'
+import ContributionForm from './index.vue'
+import Styleguide from '@human-connection/styleguide'
+
+const localVue = createLocalVue()
+
+localVue.use(Styleguide)
+
+config.stubs['no-ssr'] = '<span><slot /></span>'
+
+describe('ContributionForm.vue', () => {
+  let wrapper
+  let postTitleInput
+  let expectedParams
+  let deutschOption
+  let cancelBtn
+  const postTitle = 'this is a title for a post'
+  const postContent = 'this is a post'
+  const computed = { locale: () => 'English' }
+  const mocks = {
+    $t: jest.fn(),
+    $apollo: {
+      mutate: jest
+        .fn()
+        .mockResolvedValueOnce({
+          data: {
+            CreatePost: {
+              title: postTitle,
+              slug: 'this-is-a-title-for-a-post',
+              content: postContent,
+              contentExcerpt: postContent,
+              language: 'en',
+            },
+          },
+        })
+        .mockRejectedValue({ message: 'Not Authorised!' }),
+    },
+    $toast: {
+      error: jest.fn(),
+      success: jest.fn(),
+    },
+    $i18n: {
+      locale: () => 'en',
+    },
+    $router: {
+      back: jest.fn(),
+      push: jest.fn(),
+    },
+  }
+
+  describe('mount', () => {
+    const Wrapper = () => {
+      return mount(ContributionForm, { mocks, localVue, computed })
+    }
+
+    beforeEach(() => {
+      wrapper = Wrapper()
+    })
+
+    describe('CreatePost', () => {
+      describe('invalid form submission', () => {
+        it('title required for form submission', async () => {
+          postTitleInput = wrapper.find('.ds-input')
+          postTitleInput.setValue('this is a title for a post')
+          await wrapper.find('form').trigger('submit')
+          expect(mocks.$apollo.mutate).not.toHaveBeenCalled()
+        })
+
+        it('content required for form submission', async () => {
+          wrapper.vm.updateEditorContent('this is a post')
+          await wrapper.find('form').trigger('submit')
+          expect(mocks.$apollo.mutate).not.toHaveBeenCalled()
+        })
+      })
+
+      describe('valid form submission', () => {
+        expectedParams = {
+          variables: { title: postTitle, content: postContent, language: 'en', id: null },
+        }
+        beforeEach(async () => {
+          postTitleInput = wrapper.find('.ds-input')
+          postTitleInput.setValue('this is a title for a post')
+          wrapper.vm.updateEditorContent('this is a post')
+          await wrapper.find('form').trigger('submit')
+        })
+
+        it('with title and content', () => {
+          expect(mocks.$apollo.mutate).toHaveBeenCalledTimes(1)
+        })
+
+        it("sends a fallback language based on a user's locale", () => {
+          expect(mocks.$apollo.mutate).toHaveBeenCalledWith(expect.objectContaining(expectedParams))
+        })
+
+        it('supports changing the language', async () => {
+          expectedParams.variables.language = 'de'
+          deutschOption = wrapper.findAll('li').at(0)
+          deutschOption.trigger('click')
+          await wrapper.find('form').trigger('submit')
+          expect(mocks.$apollo.mutate).toHaveBeenCalledWith(expect.objectContaining(expectedParams))
+        })
+
+        it("pushes the user to the post's page", async () => {
+          expect(mocks.$router.push).toHaveBeenCalledTimes(1)
+        })
+
+        it('shows a success toaster', () => {
+          expect(mocks.$toast.success).toHaveBeenCalledTimes(1)
+        })
+      })
+
+      describe('cancel', () => {
+        it('calls $router.back() when cancel button clicked', () => {
+          cancelBtn = wrapper.find('.cancel-button')
+          cancelBtn.trigger('click')
+          expect(mocks.$router.back).toHaveBeenCalledTimes(1)
+        })
+      })
+
+      describe('handles errors', () => {
+        beforeEach(async () => {
+          wrapper = Wrapper()
+          postTitleInput = wrapper.find('.ds-input')
+          postTitleInput.setValue('this is a title for a post')
+          wrapper.vm.updateEditorContent('this is a post')
+          // second submission causes mutation to reject
+          await wrapper.find('form').trigger('submit')
+        })
+        it('shows an error toaster when apollo mutation rejects', async () => {
+          await wrapper.find('form').trigger('submit')
+          await mocks.$apollo.mutate
+          expect(mocks.$toast.error).toHaveBeenCalledWith('Not Authorised!')
+        })
+      })
+    })
+  })
+})

webapp/components/ContributionForm/index.vue

@@ -13,7 +13,12 @@
           :placeholder="locale"
         />
         <div slot="footer" style="text-align: right">
-          <ds-button :disabled="loading || disabled" ghost @click.prevent="$router.back()">
+          <ds-button
+            :disabled="loading || disabled"
+            ghost
+            class="cancel-button"
+            @click="$router.back()"
+          >
             {{ $t('actions.cancel') }}
           </ds-button>
           <ds-button
@@ -109,7 +114,7 @@ export default {
         })
         .then(res => {
           this.loading = false
-          this.$toast.success('Saved!')
+          this.$toast.success(this.$t('contribution.success'))
           this.disabled = true
 
           const result = res.data[this.id ? 'UpdatePost' : 'CreatePost']

webapp/locales/de.json

@@ -300,5 +300,8 @@
     "avatar": {
       "submitted": "Upload erfolgreich"
     }
+  },
+  "contribution": {
+    "success": "Gespeichert!"
   }
 }

webapp/locales/en.json

@@ -299,5 +299,8 @@
     "avatar": {
       "submitted": "Upload successful"
     }
+  },
+  "contribution": {
+    "success": "Saved!"
   }
 }

webapp/pages/profile/_id/_slug.spec.js

@@ -20,7 +20,7 @@ describe('ProfileSlug', () => {
         name: 'It is a post',
       },
       $t: jest.fn(),
-      // If you mocking router, than don't use VueRouter with lacalVue: https://vue-test-utils.vuejs.org/guides/using-with-vue-router.html
+      // If you're mocking router, then don't use VueRouter with localVue: https://vue-test-utils.vuejs.org/guides/using-with-vue-router.html
       $router: {
         history: {
           push: jest.fn(),