diff --git a/cypress/fixtures/onourjourney.png b/cypress/fixtures/onourjourney.png
new file mode 100644
index 000000000..8e606fabd
Binary files /dev/null and b/cypress/fixtures/onourjourney.png differ
diff --git a/cypress/integration/common/profile.js b/cypress/integration/common/profile.js
new file mode 100644
index 000000000..cb5689f63
--- /dev/null
+++ b/cypress/integration/common/profile.js
@@ -0,0 +1,34 @@
+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'
+
+ 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')
+ .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')
+})
\ No newline at end of file
diff --git a/cypress/integration/common/settings.js b/cypress/integration/common/settings.js
index b6621ec87..664ffcff8 100644
--- a/cypress/integration/common/settings.js
+++ b/cypress/integration/common/settings.js
@@ -45,6 +45,7 @@ When('people visit my profile page', url => {
cy.openPage('/profile/peter-pan')
})
+
When('they can see the text in the info box below my avatar', () => {
cy.contains(aboutMeText)
})
diff --git a/cypress/integration/user_profile/UploadUserProfileImage.feature b/cypress/integration/user_profile/UploadUserProfileImage.feature
new file mode 100644
index 000000000..b46a31de8
--- /dev/null
+++ b/cypress/integration/user_profile/UploadUserProfileImage.feature
@@ -0,0 +1,18 @@
+Feature: Upload UserProfile Image
+ As a user
+ I would like to be able to add an avatar/profile pic to my profile
+ So that I can personalize my profile
+
+
+ Background:
+ Given I have a user account
+
+ Scenario: Change my UserProfile Image
+ Given I am logged in
+ And I visit my profile page
+ Then I should be able to change my profile picture
+
+ Scenario: Unable to change another user's avatar
+ Given I am logged in with a "user" role
+ And I visit another user's profile page
+ Then I cannot upload a picture
\ No newline at end of file
diff --git a/cypress/support/commands.js b/cypress/support/commands.js
index a7cb76a27..f6253af20 100644
--- a/cypress/support/commands.js
+++ b/cypress/support/commands.js
@@ -13,7 +13,7 @@
// Cypress.Commands.add('login', (email, password) => { ... })
/* globals Cypress cy */
-
+import 'cypress-file-upload'
import { getLangByName } from './helpers'
import users from '../fixtures/users.json'
diff --git a/package.json b/package.json
index 272e7785e..90b1aa8aa 100644
--- a/package.json
+++ b/package.json
@@ -23,6 +23,7 @@
"cross-env": "^5.2.0",
"cypress": "^3.3.0",
"cypress-cucumber-preprocessor": "^1.11.2",
+ "cypress-file-upload": "^3.1.2",
"cypress-plugin-retries": "^1.2.1",
"dotenv": "^8.0.0",
"faker": "^4.1.0",
diff --git a/webapp/components/Upload/index.vue b/webapp/components/Upload/index.vue
index 74222b14b..3e46a09a9 100644
--- a/webapp/components/Upload/index.vue
+++ b/webapp/components/Upload/index.vue
@@ -36,8 +36,11 @@ export default {
computed: {
backgroundImage() {
const { avatar } = this.user || {}
+ const userAvatar = avatar.startsWith('/')
+ ? avatar.replace('/', '/api/')
+ : avatar
return {
- backgroundImage: `url(/api${avatar})`
+ backgroundImage: `url(${userAvatar})`
}
}
},
diff --git a/webapp/components/Upload/spec.js b/webapp/components/Upload/spec.js
index 22eaa9b6c..52cf5bb8c 100644
--- a/webapp/components/Upload/spec.js
+++ b/webapp/components/Upload/spec.js
@@ -13,10 +13,14 @@ describe('Upload', () => {
const mocks = {
$apollo: {
- mutate: jest.fn().mockResolvedValueOnce({
- data: { UpdateUser: { id: 'upload1', avatar: '/upload/avatar.jpg' } }
- })
- .mockRejectedValue({ message: 'File upload unsuccessful! Whatcha gonna do?' })
+ mutate: jest
+ .fn()
+ .mockResolvedValueOnce({
+ data: { UpdateUser: { id: 'upload1', avatar: '/upload/avatar.jpg' } }
+ })
+ .mockRejectedValue({
+ message: 'File upload unsuccessful! Whatcha gonna do?'
+ })
},
$toast: {
success: jest.fn(),
@@ -37,15 +41,14 @@ describe('Upload', () => {
remove: jest.fn(),
add: jest.fn()
},
- querySelectorAll: jest.fn().mockReturnValue(
- [
- {
- alt: '',
- style: {
- 'background-image': '/api/generic.jpg'
- }
+ querySelectorAll: jest.fn().mockReturnValue([
+ {
+ alt: '',
+ style: {
+ 'background-image': '/api/generic.jpg'
}
- ])
+ }
+ ])
}
}
diff --git a/webapp/pages/profile/_id/_slug.vue b/webapp/pages/profile/_id/_slug.vue
index 6887eece2..387ada3cb 100644
--- a/webapp/pages/profile/_id/_slug.vue
+++ b/webapp/pages/profile/_id/_slug.vue
@@ -14,7 +14,17 @@
:class="{'disabled-content': user.disabled}"
style="position: relative; height: auto;"
>
-
+
+
- {{ link.username }}
+ {{ 'link.username' }}
diff --git a/yarn.lock b/yarn.lock
index e363d28ea..491979c13 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1815,6 +1815,11 @@ cypress-cucumber-preprocessor@^1.11.2:
glob "^7.1.2"
through "^2.3.8"
+cypress-file-upload@^3.1.2:
+ version "3.1.2"
+ resolved "https://registry.yarnpkg.com/cypress-file-upload/-/cypress-file-upload-3.1.2.tgz#4a0024f99ca157565bf2b20c110e6e6874da28cb"
+ integrity sha512-gZE2G7ZTD2Y8APrcgs+ATRMKs/IgH2rafCmi+8o99q5sDoNRLR+XKxOcoyWLehj9raGnO98YDYO8DY7k1VMGBw==
+
cypress-plugin-retries@^1.2.1:
version "1.2.1"
resolved "https://registry.yarnpkg.com/cypress-plugin-retries/-/cypress-plugin-retries-1.2.1.tgz#0ae296e41c00c1aa1c2da83750e84c8a684e1c6b"