From e5ccdb91d24c7d378d61c0d4826140485032cc70 Mon Sep 17 00:00:00 2001 From: Matt Rider Date: Mon, 3 Jun 2019 16:54:45 -0300 Subject: [PATCH 1/8] Use custom slot for hc-avatar --- webapp/components/Upload/index.vue | 82 ++++++------------------------ webapp/package.json | 2 +- webapp/yarn.lock | 12 ++--- 3 files changed, 21 insertions(+), 75 deletions(-) diff --git a/webapp/components/Upload/index.vue b/webapp/components/Upload/index.vue index a1ea4ab55..0bf777072 100644 --- a/webapp/components/Upload/index.vue +++ b/webapp/components/Upload/index.vue @@ -1,24 +1,26 @@ - diff --git a/webapp/package.json b/webapp/package.json index 3902fac01..fc9c0caeb 100644 --- a/webapp/package.json +++ b/webapp/package.json @@ -74,9 +74,9 @@ "tiptap-extensions": "1.20.1", "v-tooltip": "~2.0.2", "vue-count-to": "~1.0.13", + "vue-in-viewport-mixin": "^2.0.0", "vue-izitoast": "1.1.2", "vue-sweetalert-icons": "~3.2.0", - "vue2-dropzone": "^3.5.9", "vuex-i18n": "~1.11.0", "zxcvbn": "^4.4.2" }, diff --git a/webapp/yarn.lock b/webapp/yarn.lock index 56971c17b..b9d1c8188 100644 --- a/webapp/yarn.lock +++ b/webapp/yarn.lock @@ -11167,6 +11167,11 @@ vue-hot-reload-api@^2.3.0: resolved "https://registry.yarnpkg.com/vue-hot-reload-api/-/vue-hot-reload-api-2.3.3.tgz#2756f46cb3258054c5f4723de8ae7e87302a1ccf" integrity sha512-KmvZVtmM26BQOMK1rwUZsrqxEGeKiYSZGA7SNWE6uExx8UX/cj9hq2MRV/wWC3Cq6AoeDGk57rL9YMFRel/q+g== +vue-in-viewport-mixin@^2.0.0: + version "2.0.0" + resolved "https://registry.yarnpkg.com/vue-in-viewport-mixin/-/vue-in-viewport-mixin-2.0.0.tgz#696058b06608cfe777cc37c30321d71b11746f55" + integrity sha512-crTph/eA7Sub2rzCnHiCuEXrpEfFSqahCxrv2wtFkMBRtwjVUkN9knHMiYvcciVewxXyOvIRUzMAiSKImUGgsg== + vue-izitoast@1.1.2: version "1.1.2" resolved "https://registry.yarnpkg.com/vue-izitoast/-/vue-izitoast-1.1.2.tgz#0cf8290f045f8a389ccce4c238836c75a130eb03" @@ -11281,13 +11286,6 @@ vue2-dropzone@3.5.8: dependencies: dropzone "^5.5.1" -vue2-dropzone@^3.5.9: - version "3.5.9" - resolved "https://registry.yarnpkg.com/vue2-dropzone/-/vue2-dropzone-3.5.9.tgz#a63999a45a7aad24d4c21e3d35be409b4e6bdce8" - integrity sha512-nJz6teulVKlZIAeKgvPU7wBI/gzfIgqDOrEp1okSkQIkdprDVCoM0U7XWM0NOM4AAVX+4XGRtMoocYWdTYb3bQ== - dependencies: - dropzone "^5.5.1" - vue@^2.6.10, vue@^2.6.6: version "2.6.10" resolved "https://registry.yarnpkg.com/vue/-/vue-2.6.10.tgz#a72b1a42a4d82a721ea438d1b6bf55e66195c637" From 31a6d36e5945f39aec123eba658673988ded19f7 Mon Sep 17 00:00:00 2001 From: Matt Rider Date: Mon, 3 Jun 2019 18:54:39 -0300 Subject: [PATCH 2/8] Get overlay working, refactor - use arrow function for error watch property, remove let that = this --- webapp/components/Upload/index.vue | 105 ++++++++++++++++++++++------- 1 file changed, 80 insertions(+), 25 deletions(-) diff --git a/webapp/components/Upload/index.vue b/webapp/components/Upload/index.vue index 0bf777072..2548b08be 100644 --- a/webapp/components/Upload/index.vue +++ b/webapp/components/Upload/index.vue @@ -1,21 +1,31 @@ From 5c6147ee47e3884817bd84950a6e53df41851a0b Mon Sep 17 00:00:00 2001 From: Matt Rider Date: Mon, 3 Jun 2019 19:14:29 -0300 Subject: [PATCH 3/8] Fix broken tests, revert changes to error watch property - causing breaking change in the tests --- webapp/components/Upload/index.vue | 7 ++++--- webapp/components/Upload/spec.js | 25 ------------------------- 2 files changed, 4 insertions(+), 28 deletions(-) diff --git a/webapp/components/Upload/index.vue b/webapp/components/Upload/index.vue index 2548b08be..79ae80211 100644 --- a/webapp/components/Upload/index.vue +++ b/webapp/components/Upload/index.vue @@ -12,7 +12,7 @@
- +
@@ -46,9 +46,10 @@ export default { } }, watch: { - error: () => { + error() { + let that = this setTimeout(function() { - this.error = false + that.error = false }, 2000) }, }, diff --git a/webapp/components/Upload/spec.js b/webapp/components/Upload/spec.js index b81babb6e..68c19793c 100644 --- a/webapp/components/Upload/spec.js +++ b/webapp/components/Upload/spec.js @@ -35,26 +35,6 @@ describe('Upload', () => { }, } - const fileSuccess = { - 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(() => { jest.useFakeTimers() wrapper = shallowMount(Upload, { localVue, propsData, mocks }) @@ -69,11 +49,6 @@ describe('Upload', () => { expect(mocks.$apollo.mutate).toHaveBeenCalledTimes(1) }) - it('thumbnail', () => { - wrapper.vm.thumbnail(fileSuccess, dataUrl) - expect(fileSuccess.previewElement.classList.add).toHaveBeenCalledTimes(1) - }) - describe('error handling', () => { const message = 'File upload failed' const fileError = { status: 'error' } From b5b6c3ef51959202325457a34bceec623d5e1521 Mon Sep 17 00:00:00 2001 From: Matt Rider Date: Mon, 3 Jun 2019 20:10:49 -0300 Subject: [PATCH 4/8] Fix cypress test --- cypress/integration/common/profile.js | 26 ++++++++++++++------------ 1 file changed, 14 insertions(+), 12 deletions(-) diff --git a/cypress/integration/common/profile.js b/cypress/integration/common/profile.js index cb5689f63..6f522573d 100644 --- a/cypress/integration/common/profile.js +++ b/cypress/integration/common/profile.js @@ -1,10 +1,10 @@ -import { When, Then } from 'cypress-cucumber-preprocessor/steps' +import { When, Then } from 'cypress-cucumber-preprocessor/steps'; /* global cy */ When('I visit my profile page', () => { cy.openPage('profile/peter-pan') -}) +}); Then('I should be able to change my profile picture', () => { const avatarUpload = 'onourjourney.png' @@ -12,23 +12,25 @@ Then('I should be able to change my profile picture', () => { cy.fixture(avatarUpload, 'base64').then(fileContent => { cy.get('#customdropzone').upload( { fileContent, fileName: avatarUpload, mimeType: 'image/png' }, - { subjectType: 'drag-n-drop' }, - ) - }) - cy.get('#customdropzone') - .should('have.attr', 'style') + { subjectType: 'drag-n-drop' } + ); + }); + cy.get('.profile-avatar img') + .should('have.attr', 'src') .and('contains', 'onourjourney') - cy.contains('.iziToast-message', 'Upload successful') - .should('have.length', 1) -}) + cy.contains('.iziToast-message', 'Upload successful').should( + 'have.length', + 1 + ); +}); When("I visit another user's profile page", () => { cy.openPage('profile/peter-pan') -}) +}); Then('I cannot upload a picture', () => { cy.get('.ds-card-content') .children() .should('not.have.id', 'customdropzone') .should('have.class', 'ds-avatar') -}) \ No newline at end of file +}); From c6cadc60c378d8e1bafec42a33e29e78ce487a16 Mon Sep 17 00:00:00 2001 From: Matt Rider Date: Mon, 3 Jun 2019 21:23:11 -0300 Subject: [PATCH 5/8] Remove semicolons added with .vscode linting, unused library --- cypress/integration/common/profile.js | 16 ++++++++-------- webapp/package.json | 1 - webapp/yarn.lock | 5 ----- 3 files changed, 8 insertions(+), 14 deletions(-) diff --git a/cypress/integration/common/profile.js b/cypress/integration/common/profile.js index 6f522573d..1df1e2652 100644 --- a/cypress/integration/common/profile.js +++ b/cypress/integration/common/profile.js @@ -1,10 +1,10 @@ -import { When, Then } from 'cypress-cucumber-preprocessor/steps'; +import { When, Then } from 'cypress-cucumber-preprocessor/steps' /* global cy */ When('I visit my profile page', () => { cy.openPage('profile/peter-pan') -}); +}) Then('I should be able to change my profile picture', () => { const avatarUpload = 'onourjourney.png' @@ -13,24 +13,24 @@ Then('I should be able to change my profile picture', () => { cy.get('#customdropzone').upload( { fileContent, fileName: avatarUpload, mimeType: 'image/png' }, { subjectType: 'drag-n-drop' } - ); - }); + ) + }) cy.get('.profile-avatar img') .should('have.attr', 'src') .and('contains', 'onourjourney') cy.contains('.iziToast-message', 'Upload successful').should( 'have.length', 1 - ); -}); + ) +}) When("I visit another user's profile page", () => { cy.openPage('profile/peter-pan') -}); +}) Then('I cannot upload a picture', () => { cy.get('.ds-card-content') .children() .should('not.have.id', 'customdropzone') .should('have.class', 'ds-avatar') -}); +}) diff --git a/webapp/package.json b/webapp/package.json index 3541c87de..091301ec9 100644 --- a/webapp/package.json +++ b/webapp/package.json @@ -73,7 +73,6 @@ "tiptap-extensions": "1.20.2", "v-tooltip": "~2.0.2", "vue-count-to": "~1.0.13", - "vue-in-viewport-mixin": "^2.0.0", "vue-izitoast": "1.1.2", "vue-sweetalert-icons": "~3.2.0", "vuex-i18n": "~1.11.0", diff --git a/webapp/yarn.lock b/webapp/yarn.lock index 469680cb0..163f9372e 100644 --- a/webapp/yarn.lock +++ b/webapp/yarn.lock @@ -11198,11 +11198,6 @@ vue-hot-reload-api@^2.3.0: resolved "https://registry.yarnpkg.com/vue-hot-reload-api/-/vue-hot-reload-api-2.3.3.tgz#2756f46cb3258054c5f4723de8ae7e87302a1ccf" integrity sha512-KmvZVtmM26BQOMK1rwUZsrqxEGeKiYSZGA7SNWE6uExx8UX/cj9hq2MRV/wWC3Cq6AoeDGk57rL9YMFRel/q+g== -vue-in-viewport-mixin@^2.0.0: - version "2.0.0" - resolved "https://registry.yarnpkg.com/vue-in-viewport-mixin/-/vue-in-viewport-mixin-2.0.0.tgz#696058b06608cfe777cc37c30321d71b11746f55" - integrity sha512-crTph/eA7Sub2rzCnHiCuEXrpEfFSqahCxrv2wtFkMBRtwjVUkN9knHMiYvcciVewxXyOvIRUzMAiSKImUGgsg== - vue-izitoast@1.1.2: version "1.1.2" resolved "https://registry.yarnpkg.com/vue-izitoast/-/vue-izitoast-1.1.2.tgz#0cf8290f045f8a389ccce4c238836c75a130eb03" From 19667762ce033b66528891c5c79620501bfde63b Mon Sep 17 00:00:00 2001 From: Matt Rider Date: Tue, 4 Jun 2019 07:52:21 -0300 Subject: [PATCH 6/8] Remove unneeded/unused code --- webapp/components/Upload/index.vue | 3 --- 1 file changed, 3 deletions(-) diff --git a/webapp/components/Upload/index.vue b/webapp/components/Upload/index.vue index 79ae80211..5f3ae96f6 100644 --- a/webapp/components/Upload/index.vue +++ b/webapp/components/Upload/index.vue @@ -16,9 +16,6 @@ -
- -
From 57a253637cd228bb206cea6dfd401a2499c94f82 Mon Sep 17 00:00:00 2001 From: Matt Rider Date: Tue, 4 Jun 2019 08:20:51 -0300 Subject: [PATCH 7/8] Remove annoying vue-dropzone messages --- webapp/components/Upload/index.vue | 12 +++++++++++- 1 file changed, 11 insertions(+), 1 deletion(-) diff --git a/webapp/components/Upload/index.vue b/webapp/components/Upload/index.vue index 5f3ae96f6..f59c86483 100644 --- a/webapp/components/Upload/index.vue +++ b/webapp/components/Upload/index.vue @@ -1,5 +1,5 @@