diff --git a/webapp/components/Upload/index.vue b/webapp/components/Upload/index.vue index adeb79857..a1ea4ab55 100644 --- a/webapp/components/Upload/index.vue +++ b/webapp/components/Upload/index.vue @@ -8,7 +8,7 @@ :include-styling="false" :style="backgroundImage" @vdropzone-thumbnail="thumbnail" - @vdropzone-drop="vddrop" + @vdropzone-error="verror" /> @@ -27,10 +27,11 @@ export default { return { dropzoneOptions: { url: this.vddrop, - maxFilesize: 0.5, + maxFilesize: 5.0, previewTemplate: this.template(), dictDefaultMessage: '', }, + error: false, } }, computed: { @@ -44,6 +45,14 @@ export default { } }, }, + watch: { + error() { + let that = this + setTimeout(function() { + that.error = false + }, 2000) + }, + }, methods: { template() { return `
@@ -89,6 +98,12 @@ export default { }) .catch(error => this.$toast.error(error.message)) }, + verror(file, message) { + if (file.status === 'error') { + this.error = true + this.$toast.error(file.status, message) + } + }, }, } diff --git a/webapp/components/Upload/spec.js b/webapp/components/Upload/spec.js index 85215ea59..b81babb6e 100644 --- a/webapp/components/Upload/spec.js +++ b/webapp/components/Upload/spec.js @@ -26,6 +26,7 @@ describe('Upload', () => { success: jest.fn(), error: jest.fn(), }, + $t: jest.fn(), } const propsData = { @@ -34,7 +35,7 @@ describe('Upload', () => { }, } - const file = { + const fileSuccess = { filename: 'avatar.jpg', previewElement: { classList: { @@ -59,13 +60,38 @@ describe('Upload', () => { wrapper = shallowMount(Upload, { localVue, propsData, mocks }) }) + afterEach(() => { + jest.clearAllMocks() + }) + it('sends a the UpdateUser mutation when vddrop is called', () => { wrapper.vm.vddrop([{ filename: 'avatar.jpg' }]) expect(mocks.$apollo.mutate).toHaveBeenCalledTimes(1) }) it('thumbnail', () => { - wrapper.vm.thumbnail(file, dataUrl) - expect(file.previewElement.classList.add).toHaveBeenCalledTimes(1) + wrapper.vm.thumbnail(fileSuccess, dataUrl) + expect(fileSuccess.previewElement.classList.add).toHaveBeenCalledTimes(1) + }) + + describe('error handling', () => { + const message = 'File upload failed' + const fileError = { status: 'error' } + + it('defaults to error false', () => { + expect(wrapper.vm.error).toEqual(false) + }) + + it('shows an error toaster when verror is called', () => { + wrapper.vm.verror(fileError, message) + expect(mocks.$toast.error).toHaveBeenCalledWith(fileError.status, message) + }) + + it('changes error status from false to true to false', () => { + wrapper.vm.verror(fileError, message) + expect(wrapper.vm.error).toEqual(true) + jest.runAllTimers() + expect(wrapper.vm.error).toEqual(false) + }) }) })