Write cypress tests, show dropzone conditionally

- If it's the user's profile, show vueDropzone, if not show just the user's avatar
- apollo mutation is being called twice for drag and drop events

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

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

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

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'
 

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",

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})`
       }
     }
   },

webapp/components/Upload/spec.js

@@ -13,10 +13,14 @@ describe('Upload', () => {
 
   const mocks = {
     $apollo: {
-      mutate: jest.fn().mockResolvedValueOnce({
+      mutate: jest
-        data: { UpdateUser: { id: 'upload1', avatar: '/upload/avatar.jpg' } }
+        .fn()
-      })
+        .mockResolvedValueOnce({
-        .mockRejectedValue({ message: 'File upload unsuccessful! Whatcha gonna do?' })
+          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(
+      querySelectorAll: jest.fn().mockReturnValue([
-        [
+        {
-          {
+          alt: '',
-            alt: '',
+          style: {
-            style: {
+            'background-image': '/api/generic.jpg'
-              'background-image': '/api/generic.jpg'
-            }
           }
-        ])
+        }
+      ])
     }
   }
 

webapp/pages/profile/_id/_slug.vue

@@ -14,7 +14,17 @@
           :class="{'disabled-content': user.disabled}"
           style="position: relative; height: auto;"
         >
-          <hc-upload :user="user" />
+          <hc-upload
+            v-if="myProfile"
+            :user="user"
+          />
+          <ds-avatar
+            v-else
+            :image="user.avatar"
+            :name="userName"
+            class="profile-avatar"
+            size="x-large"
+          />
           <no-ssr>
             <content-menu
               placement="bottom-end"
@@ -218,7 +228,7 @@
                 >
                   <a :href="link.url">
                     <ds-avatar :image="link.favicon" />
-                    {{ link.username }}
+                    {{ 'link.username' }}
                   </a>
                 </ds-space>
               </template>

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"