First Vue design of delete SocialMedia, custom mutation DeleteSocialMedia

Backend Jest tests for DeleteSocialMedia
New backend Jest tests for CreateSocialMedia

backend/src/middleware/permissionsMiddleware.js

@@ -75,6 +75,7 @@ const permissions = shield({
     DeleteBadge: isAdmin,
     AddUserBadges: isAdmin,
     CreateSocialMedia: isAuthenticated,
+    DeleteSocialMedia: isAuthenticated,
     // AddBadgeRewarded: isAdmin,
     // RemoveBadgeRewarded: isAdmin,
     reward: isAdmin,

backend/src/resolvers/socialMedia.js

@@ -3,6 +3,9 @@ import { neo4jgraphql } from 'neo4j-graphql-js'
 export default {
   Mutation: {
     CreateSocialMedia: async (object, params, context, resolveInfo) => {
+      /**
+       * TODO?: Creates double Nodes!
+      */
       const socialMedia = await neo4jgraphql(object, params, context, resolveInfo, false)
       const session = context.driver.session()
       await session.run(
@@ -15,6 +18,11 @@ export default {
       )
       session.close()
 
+      return socialMedia
+    },
+    DeleteSocialMedia: async (object, params, context, resolveInfo) => {
+      const socialMedia = await neo4jgraphql(object, params, context, resolveInfo, false)
+
       return socialMedia
     }
   }

backend/src/resolvers/socialMedia.spec.js

@@ -7,9 +7,18 @@ const factory = Factory()
 describe('CreateSocialMedia', () => {
   let client
   let headers
-  const mutation = `
+  const mutationC = `
     mutation($url: String!) {
       CreateSocialMedia(url: $url) {
+        id
+        url
+      }
+    }
+  `
+  const mutationD = `
+    mutation($id: ID!) {
+      DeleteSocialMedia(id: $id) {
+        id
         url
       }
     }
@@ -30,20 +39,63 @@ describe('CreateSocialMedia', () => {
     await factory.cleanDatabase()
   })
 
+  describe('unauthenticated', () => {
+    it('throws authorization error', async () => {
+      client = new GraphQLClient(host)
+      const variables = { url: 'http://nsosp.org' }
+      await expect(
+        client.request(mutationC, variables)
+      ).rejects.toThrow('Not Authorised')
+    })
+  })
+
   describe('authenticated', () => {
     beforeEach(async () => {
       headers = await login({ email: 'test@example.org', password: '1234' })
       client = new GraphQLClient(host, { headers })
     })
 
+    it('creates social media with correct URL', async () => {
+      const variables = { url: 'http://nsosp.org' }
+      await expect(
+        client.request(mutationC, variables)
+      ).resolves.toEqual(expect.objectContaining({
+        CreateSocialMedia: {
+          id: expect.any(String),
+          url: 'http://nsosp.org'
+        }
+      }))
+    })
+
+    it('deletes social media', async () => {
+      const variablesC = { url: 'http://nsosp.org' }
+      const { CreateSocialMedia } = await client.request(mutationC, variablesC)
+      const { id } = CreateSocialMedia
+
+      const variablesD = { id }
+      const expected = {
+        DeleteSocialMedia: {
+          id: id,
+          url: 'http://nsosp.org'
+        }
+      }
+      await expect(
+        client.request(mutationD, variablesD)
+      ).resolves.toEqual(expected)
+    })
+
     it('rejects empty string', async () => {
       const variables = { url: '' }
-      await expect(client.request(mutation, variables)).rejects.toThrow('Input is not a URL')
+      await expect(
+        client.request(mutationC, variables)
+      ).rejects.toThrow('Input is not a URL')
     })
 
     it('validates URLs', async () => {
       const variables = { url: 'not-a-url' }
-      await expect(client.request(mutation, variables)).rejects.toThrow('Input is not a URL')
+      await expect(
+        client.request(mutationC, variables)
+      ).rejects.toThrow('Input is not a URL')
     })
   })
 })

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

@@ -22,26 +22,38 @@
             >
             {{ link.url }}
           </a>
+          &nbsp;&nbsp; | &nbsp;&nbsp;
+          <ds-icon
+            name="edit"
+            class="layout-leave-active"
+          />
+          <a
+            @click="onDelete(link)"
+          >
+            <ds-icon name="trash"/>
+          </a>
         </ds-list-item>
       </ds-list>
     </ds-space>
-    <div>
-      <ds-input
-        v-model="value"
-        placeholder="Add social media url"
-        name="social-media"
-        :schema="{type: 'url'}"
-      />
-    </div>
     <ds-space margin-top="base">
       <div>
-        <ds-button
+        <ds-input
-          primary
+          v-model="value"
-          @click="handleAddSocialMedia"
+          placeholder="Add social media url"
-        >
+          name="social-media"
-          {{ $t('settings.social-media.submit') }}
+          :schema="{type: 'url'}"
-        </ds-button>
+        />
       </div>
+      <ds-space margin-top="base">
+        <div>
+          <ds-button
+            primary
+            @click="handleAddSocialMedia"
+          >
+            {{ $t('settings.social-media.submit') }}
+          </ds-button>
+        </div>
+      </ds-space>
     </ds-space>
   </ds-card>
 </template>
@@ -104,7 +116,16 @@ export default {
           this.$toast.success(this.$t('settings.social-media.success')),
           (this.value = '')
         )
+    },
+    onDelete(link) {
+      console.log(link)
     }
   }
 }
 </script>
+
+<style lang="scss">
+.layout-leave-active {
+  opacity: 0.4;
+}
+</style>