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) + }) })