Write component tests

webapp/components/Upload/index.vue

@@ -53,16 +53,14 @@ export default {
                 </div>
                 <div class="dz-progress"><span class="dz-upload" data-dz-uploadprogress></span></div>
                 <div class="dz-error-message"><span data-dz-errormessage></span></div>
-                <div class="dz-success-mark"><ds-icon name="check" /></div>
-                <div class="dz-error-mark"><ds-icon name="close" /></div>
                 </div>
               </div>
       `
     },
     thumbnail(file, dataUrl) {
-      var j, len, ref, thumbnailElement
+      let j, len, ref, thumbnailElement
-      this.$refs.el.dropzone.element.style['background-image'] = ''
       if (file.previewElement) {
+        this.$refs.el.$el.style.backgroundImage = ''
         file.previewElement.classList.remove('dz-file-preview')
         ref = file.previewElement.querySelectorAll('[data-dz-thumbnail-bg]')
         for (j = 0, len = ref.length; j < len; j++) {
@@ -70,17 +68,11 @@ export default {
           thumbnailElement.alt = file.name
           thumbnailElement.style.backgroundImage = 'url("' + dataUrl + '")'
         }
-        return setTimeout(
+        file.previewElement.classList.add('dz-image-preview')
-          (function(_this) {
-            return function() {
-              return file.previewElement.classList.add('dz-image-preview')
-            }
-          })(this),
-          1
-        )
       }
     },
-    vddrop([file]) {
+    vddrop(file) {
+      const avatarUpload = file[0]
       this.$apollo
         .mutate({
           mutation: gql`
@@ -92,11 +84,11 @@ export default {
             }
           `,
           variables: {
-            avatarUpload: file,
+            avatarUpload,
             id: this.user.id
           }
         })
-        .then(response => {
+        .then(() => {
           this.$toast.success(this.$t('user.avatar.submitted'))
         })
         .catch(error => this.$toast.error(error.message))

webapp/components/Upload/spec.js

@@ -4,26 +4,65 @@ import Vuex from 'vuex'
 import Styleguide from '@human-connection/styleguide'
 
 const localVue = createLocalVue()
+
 localVue.use(Vuex)
 localVue.use(Styleguide)
 
 describe('Upload', () => {
   let wrapper
-  let propsData
 
-  propsData = {
+  const mocks = {
-    user: {
+    $apollo: {
-      avatar: '/api/avatar.jpg'
+      mutate: jest.fn().mockResolvedValueOnce({
+        data: { UpdateUser: { id: 'upload1', avatar: '/upload/avatar.jpg' } }
+      })
+        .mockRejectedValue({ message: 'File upload unsuccessful! Whatcha gonna do?' })
+    },
+    $toast: {
+      success: jest.fn(),
+      error: jest.fn()
     }
   }
 
+  const propsData = {
+    user: {
+      avatar: '/api/generic.jpg'
+    }
+  }
+
+  const file = {
+    filename: 'avatar.jpg',
+    previewElement: {
+      classList: {
+        remove: jest.fn(),
+        add: jest.fn()
+      },
+      querySelectorAll: jest.fn().mockReturnValue(
+        [
+          {
+            alt: '',
+            style: {
+              'background-image': '/api/generic.jpg'
+            }
+          }
+        ])
+    }
+  }
+
+  const dataUrl = 'avatar.jpg'
+
   beforeEach(() => {
-    wrapper = shallowMount(Upload, { localVue, propsData })
+    jest.useFakeTimers()
+    wrapper = shallowMount(Upload, { localVue, propsData, mocks })
   })
 
-  it('renders', () => {
+  it('sends a the UpdateUser mutation when vddrop is called', () => {
-    expect(wrapper.is('div')).toBe(true)
+    wrapper.vm.vddrop([{ filename: 'avatar.jpg' }])
+    expect(mocks.$apollo.mutate).toHaveBeenCalledTimes(1)
   })
 
-  // TODO: add more test cases in this file
+  it('thumbnail', () => {
+    wrapper.vm.thumbnail(file, dataUrl)
+    expect(file.previewElement.classList.add).toHaveBeenCalledTimes(1)
+  })
 })