Get delete SocialMedia to work, refactored Frontend Jest tests, written Cypress tests

Optimised tests and Vue for add Social Media a bit.
Added localisation.

Finished this commit together with @mattwr18 !!!
Thank you so much dude! You did great stuff …

backend/src/resolvers/socialMedia.spec.js

@@ -68,11 +68,11 @@ describe('CreateSocialMedia', () => {
     })
 
     it('deletes social media', async () => {
-      const variablesC = { url: 'http://nsosp.org' }
+      const creationVariables = { url: 'http://nsosp.org' }
-      const { CreateSocialMedia } = await client.request(mutationC, variablesC)
+      const { CreateSocialMedia } = await client.request(mutationC, creationVariables)
       const { id } = CreateSocialMedia
 
-      const variablesD = { id }
+      const deletionVariables = { id }
       const expected = {
         DeleteSocialMedia: {
           id: id,
@@ -80,7 +80,7 @@ describe('CreateSocialMedia', () => {
         }
       }
       await expect(
-        client.request(mutationD, variablesD)
+        client.request(mutationD, deletionVariables)
       ).resolves.toEqual(expected)
     })
 

cypress/integration/common/settings.js

@@ -77,7 +77,7 @@ Then('I should be on the {string} page', page => {
     .should('contain', 'Social media')
 })
 
-Then('I add a social media link', () => {
+When('I add a social media link', () => {
   cy.get("input[name='social-media']")
     .type('https://freeradical.zone/peter-pan')
     .get('button')
@@ -87,7 +87,7 @@ Then('I add a social media link', () => {
 
 Then('it gets saved successfully', () => {
   cy.get('.iziToast-message')
-    .should('contain', 'Updated user')
+    .should('contain', 'Added social media')
 })
 
 Then('the new social media link shows up on the page', () => {
@@ -110,3 +110,18 @@ Then('they should be able to see my social media links', () => {
     .get('a[href="https://freeradical.zone/peter-pan"]')
     .should('have.length', 1)
 })
+
+When('I delete a social media link', () => {
+  cy.get("a[name='delete']")
+    .click()
+})
+
+// Then('Shows delete modal', () => {
+//   cy.get("a[name='delete']")
+//     .click()
+// })
+
+Then('it gets deleted successfully', () => {
+  cy.get('.iziToast-message')
+    .should('contain', 'Deleted social media')
+})

cypress/integration/user_profile/SocialMedia.feature

@@ -19,3 +19,12 @@ Feature: List Social Media Accounts
     Given I have added a social media link
     When people visit my profile page
     Then they should be able to see my social media links
+
+  Scenario: Deleting Social Media
+    Given I am on the "settings" page
+    And I click on the "Social media" link
+    Then I should be on the "/settings/my-social-media" page
+    Given I have added a social media link
+    When I delete a social media link
+    Then it gets deleted successfully
+    # And the new social media link shows up on the page

webapp/locales/de.json

@@ -63,8 +63,10 @@
     },
     "social-media": {
       "name": "Soziale Medien",
+      "placeholder": "Füge eine Social-Media URL hinzu",
       "submit": "Link hinzufügen",
-      "success": "Profil aktualisiert"
+      "successAdd": "Social-Media hinzugefügt. Profil aktualisiert!",
+      "successDelete": "Social-Media gelöscht. Profil aktualisiert!"
     }
   },
   "admin": {

webapp/locales/en.json

@@ -63,8 +63,10 @@
     },
     "social-media": {
       "name": "Social media",
+      "placeholder": "Add social media url",
       "submit": "Add link",
-      "success": "Updated user profile"
+      "successAdd": "Added social media. Updated user profile!",
+      "successDelete": "Deleted social media. Updated user profile!"
     }
   },
   "admin": {

webapp/pages/settings/my-social-media.spec.js

@@ -74,8 +74,8 @@ describe('my-social-media.vue', () => {
 
       it('displays a trash sympol after a social media', () => {
         wrapper = Wrapper()
-        iconName = wrapper.find('.ds-icon').attributes().name
+        const deleteSelector = wrapper.find({ name: 'delete' })
-        expect(iconName).toBe('trash')
+        expect(deleteSelector).toEqual({ selector: 'Component' })
       })
     })
 

webapp/pages/settings/my-social-media.vue

@@ -8,7 +8,7 @@
       <ds-list>
         <ds-list-item
           v-for="link in socialMediaLinks"
-          :key="link.url"
+          :key="link.id"
         >
           <a
             :href="link.url"
@@ -22,7 +22,7 @@
             >
             {{ link.url }}
           </a>
-          &nbsp;&nbsp; | &nbsp;&nbsp;
+          &nbsp;&nbsp; <span class="layout-leave-active">|</span> &nbsp;&nbsp;
           <ds-icon
             name="edit"
             class="layout-leave-active"
@@ -40,7 +40,7 @@
       <div>
         <ds-input
           v-model="value"
-          placeholder="Add social media url"
+          :placeholder="$t('settings.social-media.placeholder')"
           name="social-media"
           :schema="{type: 'url'}"
         />
@@ -95,6 +95,7 @@ export default {
           mutation: gql`
             mutation($url: String!) {
               CreateSocialMedia(url: $url) {
+                id
                 url
               }
             }
@@ -113,13 +114,42 @@ export default {
             })
           }
         })
-        .then(
+        .then(() => {
-          this.$toast.success(this.$t('settings.social-media.success')),
+          this.$toast.success(this.$t('settings.social-media.successAdd')),
           (this.value = '')
-        )
+        })
+        .catch(error => {
+          this.$toast.error(error.message)
+        })
     },
     handleDeleteSocialMedia(link) {
-      console.log(link)
+      this.$apollo
+        .mutate({
+          mutation: gql`
+            mutation($id: ID!) {
+              DeleteSocialMedia(id: $id) {
+                id
+                url
+              }
+            }
+          `,
+          variables: {
+            id: link.id
+          },
+          update: (store, { data }) => {
+            const socialMedia = this.currentUser.socialMedia.filter(element => element.id !== link.id )
+            this.setCurrentUser({
+              ...this.currentUser,
+              socialMedia
+            })
+          }
+        })
+        .then(() => {
+          this.$toast.success(this.$t('settings.social-media.successDelete'))
+        })
+        .catch(error => {
+          this.$toast.error(error.message)
+        })
     }
   }
 }