Refactor test, component

- Remove redundant code
- change socialMediaUrl to add the attributes().href since that's the url
- grab last element of url as username, makes an assumption, but a safer one

webapp/pages/profile/_id/_slug.vue

@@ -202,14 +202,12 @@
             </p>
           </template>
         </ds-card>
-        <ds-space />
         <ds-space 
           v-if="user.socialMedia && user.socialMedia.length"
-          margin="x-small"
+          margin="large"
-        />
+        >
           <ds-card style="position: relative; height: auto;">
             <ds-space
-            v-if="user.socialMedia && user.socialMedia.length"
               margin="x-small"
             >
               <ds-text
@@ -218,13 +216,12 @@
               >
                 {{ $t('profile.socialMedia') }} {{ user.name | truncate(15) }}?
               </ds-text>
-            <template v-if="user.socialMedia && user.socialMedia.length">
+              <template>
                 <ds-space
                   v-for="link in socialMediaLinks"
                   :key="link.username"
                   margin="x-small"
                 >
-                <!-- TODO: find better solution for rendering errors -->
                   <a :href="link.url">
                     <ds-avatar
                       :image="link.favicon"
@@ -235,6 +232,7 @@
               </template>
             </ds-space>
           </ds-card>
+        </ds-space>
       </ds-flex-item>
       <ds-flex-item :width="{ base: '100%', sm: 3, md: 5, lg: 3 }">
         <ds-flex
@@ -391,7 +389,7 @@ export default {
         )
         const [domain] = matches || []
         const favicon = domain ? `${domain}/favicon.ico` : null
-        const username = url.split('/')[3]
+        const username = url.split('/').pop()
         return { url, username, favicon }
       })
     }

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

@@ -68,8 +68,8 @@ describe('my-social-media.vue', () => {
 
       it("displays a link to the currentUser's social media", () => {
         wrapper = Wrapper()
-        const socialMediaLink = wrapper.find('a')
+        const socialMediaLink = wrapper.find('a').attributes().href
-        expect(socialMediaLink.attributes().href).toBe(socialMediaUrl)
+        expect(socialMediaLink).toBe(socialMediaUrl)
       })
     })