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,39 +202,37 @@
             </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-card style="position: relative; height: auto;">
-          <ds-space
+            <ds-space
-            v-if="user.socialMedia && user.socialMedia.length"
+              margin="x-small"
-            margin="x-small"
-          >
-            <ds-text
-              tag="h5"
-              color="soft"
             >
-              {{ $t('profile.socialMedia') }} {{ user.name | truncate(15) }}?
+              <ds-text
-            </ds-text>
+                tag="h5"
-            <template v-if="user.socialMedia && user.socialMedia.length">
+                color="soft"
-              <ds-space
-                v-for="link in socialMediaLinks"
-                :key="link.username"
-                margin="x-small"
               >
-                <!-- TODO: find better solution for rendering errors -->
+                {{ $t('profile.socialMedia') }} {{ user.name | truncate(15) }}?
-                <a :href="link.url">
+              </ds-text>
-                  <ds-avatar
+              <template>
-                    :image="link.favicon"
+                <ds-space
-                  />
+                  v-for="link in socialMediaLinks"
-                  {{ link.username }}
+                  :key="link.username"
-                </a>
+                  margin="x-small"
-              </ds-space>
+                >
-            </template>
+                  <a :href="link.url">
-          </ds-space>
+                    <ds-avatar
-        </ds-card>
+                      :image="link.favicon"
+                    />
+                    {{ link.username }}
+                  </a>
+                </ds-space>
+              </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)
       })
     })