diff --git a/webapp/components/Upload/index.vue b/webapp/components/Upload/index.vue
index 783b91b91..74222b14b 100644
--- a/webapp/components/Upload/index.vue
+++ b/webapp/components/Upload/index.vue
@@ -53,16 +53,14 @@ export default {
-
-
`
},
thumbnail(file, dataUrl) {
- var j, len, ref, thumbnailElement
- this.$refs.el.dropzone.element.style['background-image'] = ''
+ let j, len, ref, thumbnailElement
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(
- (function(_this) {
- return function() {
- return file.previewElement.classList.add('dz-image-preview')
- }
- })(this),
- 1
- )
+ file.previewElement.classList.add('dz-image-preview')
}
},
- 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))
diff --git a/webapp/components/Upload/spec.js b/webapp/components/Upload/spec.js
index 71c35d962..22eaa9b6c 100644
--- a/webapp/components/Upload/spec.js
+++ b/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 = {
- user: {
- avatar: '/api/avatar.jpg'
+ const mocks = {
+ $apollo: {
+ 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', () => {
- expect(wrapper.is('div')).toBe(true)
+ it('sends a the UpdateUser mutation when vddrop is called', () => {
+ 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)
+ })
})