Merge branch '236-list-social-media-accounts' of github.com:Human-Connection/Human-Connection into 236-list-social-media-accounts

backend/src/resolvers/user_management.spec.js

@@ -309,3 +309,30 @@ describe('change password', () => {
     })
   })
 })
+
+describe('addSocialMedia', () => {
+  let client
+  let headers
+  const mutation = `
+    mutation($url: String!) {
+      addSocialMedia(url: $url)
+    }
+  `
+
+  describe('authenticated', () => {
+    beforeEach(async () => {
+      headers = await login({ email: 'test@example.org', password: '1234' })
+      client = new GraphQLClient(host, { headers })
+    })
+
+    it('rejects empty string', async () => {
+      const variables = { url: '' }
+      await expect(client.request(mutation, 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')
+    })
+  })
+})

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

@@ -0,0 +1,60 @@
+import { shallowMount, mount, createLocalVue } from '@vue/test-utils'
+import MySocialMedia from './my-social-media.vue'
+import Vue from 'vue'
+import Vuex from 'vuex'
+import Styleguide from '@human-connection/styleguide'
+
+const localVue = createLocalVue()
+
+localVue.use(Vuex)
+localVue.use(Styleguide)
+
+describe('my-social-media.vue', () => {
+  let wrapper
+  let Wrapper
+  let store
+  let mocks
+  let getters
+
+  beforeEach(() => {
+    mocks = {
+      $t: jest.fn()
+    }
+    getters = {
+      'auth/user': () => {
+        return {}
+      }
+    }
+  })
+
+  describe('shallowMount', () => {
+    const Wrapper = () => {
+      store = new Vuex.Store({
+        getters
+      })
+      return shallowMount(MySocialMedia, { store, mocks, localVue })
+    }
+
+    it('renders', () => {
+      wrapper = Wrapper()
+      expect(wrapper.contains('div')).toBe(true)
+    })
+
+    describe('given currentUser has social media accounts', () => {
+      beforeEach(() => {
+        getters = {
+          'auth/user': () => {
+            return {
+              socialMedia: ['']
+            }
+          }
+        }
+      })
+
+      it('renders', () => {
+        wrapper = Wrapper()
+        expect(wrapper.contains('div')).toBe(true)
+      })
+    })
+  })
+})

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

@@ -1,5 +1,25 @@
 <template>
   <ds-card :header="$t('settings.social-media.name')">
+    <ds-space
+      v-if="socialMediaLinks"
+      margin-top="base"
+      margin="x-small"
+    >
+      <ds-list>
+        <ds-list-item
+          v-for="link in socialMediaLinks"
+          :key="link.url"
+        >
+          <a :href="link.url">
+            <img
+              :src="link.favicon"
+              alt=""
+            >
+            {{ link.url }}
+          </a>
+        </ds-list-item>
+      </ds-list>
+    </ds-space>
     <div>
       <ds-input
         v-model="value"
@@ -18,24 +38,6 @@
         </ds-button>
       </div>
     </ds-space>
-    <ds-space 
-      v-if="currentUser.socialMedia && currentUser.socialMedia.length"
-      margin-top="base"
-      margin="x-small"
-    >
-      <div
-        v-for="socialMediaIconUrl in currentUser.socialMedia"
-        :key="socialMediaIconUrl"
-      >
-        <a>
-          <img
-            :src="socialMediaIconUrl.match(/^(?:https?:\/\/)?(?:[^@\n])?(?:www\.)?([^:\/\n?]+)/g)[0] + '/favicon.ico'"
-            :href="socialMediaIconUrl"
-            alt=""
-          >
-        </a>
-      </div>
-    </ds-space>
   </ds-card>
 </template>
 <script>
@@ -51,7 +53,18 @@ export default {
   computed: {
     ...mapGetters({
       currentUser: 'auth/user'
-    })
+    }),
+    socialMediaLinks() {
+      const { socialMedia = [] } = this.currentUser
+      return socialMedia.map(url => {
+        const matches = url.match(
+          /^(?:https?:\/\/)?(?:[^@\n])?(?:www\.)?([^:\/\n?]+)/g
+        )
+        const [domain] = matches || []
+        const favicon = domain ? `${domain}/favicon.ico` : null
+        return { url, favicon }
+      })
+    }
   },
   methods: {
     handleAddSocialMedia() {