feat: 🍰 Webapp, Backend – User Profile – Display, Select and Upload User Profile Header Image

backend/src/db/factories.js

@@ -91,14 +91,22 @@ Factory.define('user')
       url: faker.internet.avatar(),
     }),
   )
+  /*  Defaults to false since a lot of existing tests are based on finding a certain
+      amount of images without further checks causing them to fail when finding these
+      extra profile header images. A couple of users are given profile headers
+      explicitly in seed.js.
+  */
+  .option('profileHeader', () => false)
   .after(async (buildObject, options) => {
-    const [user, email, avatar] = await Promise.all([
+    const [user, email, avatar, profileHeader] = await Promise.all([
       neode.create('User', buildObject),
       neode.create('EmailAddress', { email: options.email }),
       options.avatar,
+      options.profileHeader,
     ])
     await Promise.all([user.relateTo(email, 'primaryEmail'), email.relateTo(user, 'belongsTo')])
     if (avatar) await user.relateTo(avatar, 'avatar')
+    if (profileHeader) await user.relateTo(profileHeader, 'profileHeader')
     return user
   })
 

backend/src/db/seed.js

@@ -168,6 +168,7 @@ const languages = ['de', 'en', 'es', 'fr', 'it', 'pt', 'pl']
         },
         {
           email: '[email protected]',
+          profileHeader: Factory.build('image'),
         },
       ),
       Factory.build(
@@ -192,6 +193,7 @@ const languages = ['de', 'en', 'es', 'fr', 'it', 'pt', 'pl']
         },
         {
           email: '[email protected]',
+          profileHeader: Factory.build('image'),
         },
       ),
       Factory.build(

backend/src/middleware/softDelete/softDeleteMiddleware.js

@@ -18,6 +18,7 @@ const obfuscate = async (resolve, root, args, context, info) => {
     root.title = 'UNAVAILABLE'
     root.slug = 'UNAVAILABLE'
     root.avatar = null
+    root.profileHeader = null
     root.about = 'UNAVAILABLE'
     root.name = 'UNAVAILABLE'
     root.image = null

backend/src/middleware/softDelete/softDeleteMiddleware.spec.js

@@ -41,6 +41,9 @@ beforeAll(async () => {
         avatar: Factory.build('image', {
           url: '/some/offensive/avatar.jpg',
         }),
+        profileHeader: Factory.build('image', {
+          url: '/some/offensive/profileHeader.jpg',
+        }),
       },
     ),
     neode.create('Category', {
@@ -225,6 +228,9 @@ describe('softDeleteMiddleware', () => {
               avatar {
                 url
               }
+              profileHeader {
+                url
+              }
             }
           }
         }
@@ -270,6 +276,10 @@ describe('softDeleteMiddleware', () => {
           expect(subject.avatar).toEqual({
             url: expect.stringContaining('/some/offensive/avatar.jpg'),
           }))
+        it('display profile header', () =>
+          expect(subject.profileHeader).toEqual({
+            url: expect.stringContaining('/some/offensive/profileHeader.jpg'),
+          }))
       })
 
       describe('Post', () => {
@@ -308,6 +318,7 @@ describe('softDeleteMiddleware', () => {
         it('obfuscates slug', () => expect(subject.slug).toEqual('UNAVAILABLE'))
         it('obfuscates about', () => expect(subject.about).toEqual('UNAVAILABLE'))
         it('obfuscates avatar', () => expect(subject.avatar).toEqual(null))
+        it('obfuscates profile header', () => expect(subject.profileHeader).toEqual(null))
       })
 
       describe('Post', () => {

backend/src/models/User.js

@@ -12,6 +12,12 @@ export default {
     target: 'Image',
     direction: 'out',
   },
+  profileHeader: {
+    type: 'relationship',
+    relationship: 'PROFILE_HEADER_IMAGE',
+    target: 'Image',
+    direction: 'out',
+  },
   deleted: { type: 'boolean', default: false },
   disabled: { type: 'boolean', default: false },
   role: { type: 'string', default: 'user' },

backend/src/schema/resolvers/images/images.js

@@ -105,7 +105,7 @@ const uploadImageFile = async (upload, uploadCallback) => {
 const sanitizeRelationshipType = (relationshipType) => {
   // Cypher query language does not allow to parameterize relationship types
   // See: https://github.com/neo4j/neo4j/issues/340
-  if (!['HERO_IMAGE', 'AVATAR_IMAGE'].includes(relationshipType)) {
+  if (!['HERO_IMAGE', 'AVATAR_IMAGE', 'PROFILE_HEADER_IMAGE'].includes(relationshipType)) {
     throw new Error(`Unknown relationship type ${relationshipType}`)
   }
 }

backend/src/schema/resolvers/passwordReset.spec.js

@@ -25,6 +25,7 @@ beforeEach(() => {
 })
 
 beforeAll(() => {
+  cleanDatabase()
   const { server } = createServer({
     context: () => {
       return {

backend/src/schema/resolvers/statistics.spec.js

@@ -21,7 +21,9 @@ const statisticsQuery = gql`
     }
   }
 `
-beforeAll(() => {
+beforeAll(async () => {
+  // Clean the database so no artifacts from other test files are interfering.
+  await cleanDatabase()
   authenticatedUser = undefined
   const { server } = createServer({
     context: () => {

backend/src/schema/resolvers/user_management.spec.js

@@ -109,6 +109,9 @@ describe('currentUser', () => {
         avatar {
           url
         }
+        profileHeader {
+          url
+        }
         email
         role
       }
@@ -142,6 +145,9 @@ describe('currentUser', () => {
             avatar: Factory.build('image', {
               url: 'https://s3.amazonaws.com/uifaces/faces/twitter/jimmuirhead/128.jpg',
             }),
+            profileHeader: Factory.build('image', {
+              url: 'https://s3.amazonaws.com/uifaces/faces/twitter/hellofeverrrr/128.jpg',
+            }),
           },
         )
         const userBearerToken = encode({ id: 'u3' })
@@ -156,6 +162,9 @@ describe('currentUser', () => {
               avatar: Factory.build('image', {
                 url: 'https://s3.amazonaws.com/uifaces/faces/twitter/jimmuirhead/128.jpg',
               }),
+              profileHeader: Factory.build('image', {
+                url: 'https://s3.amazonaws.com/uifaces/faces/twitter/hellofeverrrr/128.jpg',
+              }),
               email: '[email protected]',
               name: 'Matilde Hermiston',
               slug: 'matilde-hermiston',

backend/src/schema/resolvers/users.js

@@ -140,8 +140,9 @@ export default {
     },
     UpdateUser: async (_parent, params, context, _resolveInfo) => {
       const { termsAndConditionsAgreedVersion } = params
-      const { avatar: avatarInput } = params
+      const { avatar: avatarInput, profileHeader: profileHeaderInput } = params
       delete params.avatar
+      delete params.profileHeader
       if (termsAndConditionsAgreedVersion) {
         const regEx = new RegExp(/^[0-9]+\.[0-9]+\.[0-9]+$/g)
         if (!regEx.test(termsAndConditionsAgreedVersion)) {
@@ -165,6 +166,9 @@ export default {
         if (avatarInput) {
           await mergeImage(user, 'AVATAR_IMAGE', avatarInput, { transaction })
         }
+        if (profileHeaderInput) {
+          await mergeImage(user, 'PROFILE_HEADER_IMAGE', profileHeaderInput, { transaction })
+        }
         return user
       })
       try {
@@ -235,6 +239,7 @@ export default {
         log(deleteUserTransactionResponse)
         const [user] = deleteUserTransactionResponse.records.map((record) => record.get('user'))
         await deleteImage(user, 'AVATAR_IMAGE', { transaction })
+        await deleteImage(user, 'PROFILE_HEADER_IMAGE', { transaction })
         return user
       })
       try {
@@ -291,6 +296,7 @@ export default {
       },
       hasOne: {
         avatar: '-[:AVATAR_IMAGE]->(related:Image)',
+        profileHeader: '-[:PROFILE_HEADER_IMAGE]->(related:Image)',
         invitedBy: '<-[:INVITED]-(related:User)',
         location: '-[:IS_IN]->(related:Location)',
       },

backend/src/schema/resolvers/users.spec.js

@@ -341,11 +341,17 @@ describe('DeleteUser', () => {
     beforeEach(async () => {
       variables = { id: ' u343', resource: [] }
 
-      user = await Factory.build('user', {
-        name: 'My name should be deleted',
-        about: 'along with my about',
-        id: 'u343',
-      })
+      user = await Factory.build(
+        'user',
+        {
+          name: 'My name should be deleted',
+          about: 'along with my about',
+          id: 'u343',
+        },
+        {
+          profileHeader: Factory.build('image'),
+        },
+      )
     })
 
     describe('authenticated as Admin', () => {
@@ -496,8 +502,8 @@ describe('DeleteUser', () => {
                 ).resolves.toMatchObject(expectedResponse)
               })
 
-              it('deletes user avatar and post hero images', async () => {
-                await expect(neode.all('Image')).resolves.toHaveLength(22)
+              it('deletes user avatar, profile header and post hero images', async () => {
+                await expect(neode.all('Image')).resolves.toHaveLength(23)
                 await mutate({ mutation: deleteUserMutation, variables })
                 await expect(neode.all('Image')).resolves.toHaveLength(20)
               })
@@ -627,11 +633,17 @@ describe('DeleteUser', () => {
     beforeEach(async () => {
       variables = { id: 'u343', resource: [] }
 
-      user = await Factory.build('user', {
-        name: 'My name should be deleted',
-        about: 'along with my about',
-        id: 'u343',
-      })
+      user = await Factory.build(
+        'user',
+        {
+          name: 'My name should be deleted',
+          about: 'along with my about',
+          id: 'u343',
+        },
+        {
+          profileHeader: Factory.build('image'),
+        },
+      )
       await Factory.build(
         'user',
         {
@@ -792,8 +804,8 @@ describe('DeleteUser', () => {
                 ).resolves.toMatchObject(expectedResponse)
               })
 
-              it('deletes user avatar and post hero images', async () => {
-                await expect(neode.all('Image')).resolves.toHaveLength(22)
+              it('deletes user avatar, profile header and post hero images', async () => {
+                await expect(neode.all('Image')).resolves.toHaveLength(23)
                 await mutate({ mutation: deleteUserMutation, variables })
                 await expect(neode.all('Image')).resolves.toHaveLength(20)
               })

backend/src/schema/types/type/User.gql

@@ -26,6 +26,7 @@ type User {
   email: String! @cypher(statement: "MATCH (this)-[:PRIMARY_EMAIL]->(e:EmailAddress) RETURN e.email")
   slug: String!
   avatar: Image @relation(name: "AVATAR_IMAGE", direction: "OUT")
+  profileHeader: Image @relation(name: "PROFILE_HEADER_IMAGE", direction: "OUT")
   deleted: Boolean
   disabled: Boolean
   role: UserGroup!
@@ -192,6 +193,7 @@ type Mutation {
   email: String
   slug: String
   avatar: ImageInput
+  profileHeader: ImageInput
   locationName: String
   about: String
   termsAndConditionsAgreedVersion: String

cypress/features.md

@@ -38,6 +38,7 @@ The following features will be implemented. This gets done in three steps:
 
 * Upload and Change Avatar
 * Upload and Change Profile Picture
+* Upload and Change Profile Header Image
 * Edit Social Media Accounts
 * Edit Locale information
 * Show and delete Bookmarks \(later\)

cypress/integration/common/profile.js

@@ -24,13 +24,39 @@ Then("I should be able to change my profile picture", () => {
   );
 });
 
+Then("I should be able to change my profile header picture", () => {
+  const headerUpload = "onourjourney.png";
+
+  cy.fixture(headerUpload, "base64").then(fileContent => {
+    cy.get("#profileHeaderDropzone").upload(
+      { fileContent, fileName: headerUpload, mimeType: "image/png" },
+      { subjectType: "drag-n-drop", force: true }
+    );
+  });
+  cy.get(".profile-header-image")
+    .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", () => {
+Then("I cannot upload a profile picture", () => {
   cy.get(".base-card")
     .children()
     .should("not.have.id", "customdropzone")
     .should("have.class", "user-avatar");
 });
+
+
+Then("I cannot upload a profile header image", () => {
+  cy.get(".base-card")
+    .children()
+    .should("not.have.id", "profileHeaderDropzone")
+    .should("have.class", "profile-header");
+});

cypress/integration/user_profile/UploadUserProfileHeader.feature

@@ -0,0 +1,18 @@
+Feature: Upload UserProfile Header
+  As a user
+  I would like to be able to add a profile header pic to my profile
+  So that I can personalize my profile
+
+
+  Background:
+    Given I have a user account
+
+  Scenario: Change my UserProfile Header
+    Given I am logged in
+    And I visit my profile page
+    Then I should be able to change my profile header picture
+
+  Scenario: Unable to change another user's header images
+    Given I am logged in with a "user" role
+    And I visit another user's profile page
+    Then I cannot upload a profile header image

cypress/integration/user_profile/UploadUserProfileImage.feature

@@ -15,4 +15,4 @@ Feature: Upload UserProfile Image
   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
+    Then I cannot upload a profile picture