Add friends to profile

Author: lukemorton

components/User/components/Profile/components/FriendsList.test.tsx

@@ -0,0 +1,18 @@
+import * as React from 'react'
+import { shallow } from 'enzyme'
+import FriendsList from './FriendsList'
+
+describe('FriendsList', () => {
+  describe('when there are friends', () => {
+    const friends = [
+      { name: 'Bob' },
+      { name: 'Frankie' }
+    ]
+
+    it('should list friends', () => {
+      const friendsList = shallow(<FriendsList friends={friends} />)
+      expect(friendsList).toIncludeText('Bob')
+      expect(friendsList).toIncludeText('Frankie')
+    })
+  })
+})

components/User/components/Profile/components/FriendsList.tsx

@@ -0,0 +1,14 @@
+import * as React from 'react'
+
+interface Friend {
+  name: string
+}
+
+interface FriendsListProps {
+  friends: Array<Friend>
+}
+
+export default ({ friends }: FriendsListProps) =>
+  <ul>
+    {friends.map(({ name }, i) => <li key={i}>{name}</li>)}
+  </ul>

components/User/components/Profile/components/Profile.test.tsx

@@ -1,12 +1,22 @@
 import * as React from 'react'
 import { shallow } from 'enzyme'
 import Profile from './Profile'
+import FriendsList from './FriendsList'
 
 describe('<Profile />', () => {
+  const props = {
+    name: 'Luke',
+    biography: 'My bio',
+    twitter: '@Cool',
+    friends: [
+      { name: 'Jenny' }
+    ]
+  }
+
   let profile
 
   beforeEach(() => {
-    profile = shallow(<Profile name='Luke' biography='My bio' twitter='@Cool' />)
+    profile = shallow(<Profile {...props} />)
   })
 
   it('should display name', () => {
@@ -20,4 +30,8 @@ describe('<Profile />', () => {
   it('should display twitter', () => {
     expect(profile).toIncludeText('@Cool')
   })
+
+  it('should display friends', () => {
+    expect(profile).toContainReact(<FriendsList friends={props.friends} />)
+  })
 })

components/User/components/Profile/components/Profile.tsx

@@ -1,8 +1,11 @@
 import * as React from 'react'
+import FriendsList from './FriendsList'
 
-export default ({ name, biography, twitter }) =>
+export default ({ name, biography, twitter, friends }) =>
   <div>
     <p>{name}</p>
     <p>{biography}</p>
     <p>Follow on twitter: {twitter}</p>
+
+    <FriendsList friends={friends} />
   </div>

lib/user/FakeUserGateway.ts

@@ -5,6 +5,7 @@ export async function findById (id: string) : Promise<User> {
     name: 'Mr Luke Fake',
     email: '[email protected]',
     biography: 'Coool',
-    twitter: '@Cool'
+    twitter: '@Cool',
+    friends: []
   }
 }

lib/user/HTTPUserGateway.test.ts

@@ -2,14 +2,18 @@ import * as HTTPUserGateway from './HTTPUserGateway'
 import mockExecute from '../../test/support/mockExecute'
 
 describe('HTTPUserGateway', () => {
-  const fakeUser = { basicInfo: { name: 'Jim', email: '[email protected]' } }
+  const fakeUser = {
+    basicInfo: { name: 'Jim', email: '[email protected]' },
+    friends: []
+  }
 
   describe('when finding by id', () => {
     test('user has name', async () => {
       mockExecute('findUserById', { userId: 'guid' }).reply(200, fakeUser)
       const user = await HTTPUserGateway.findById('guid')
-      expect(user.name).toBe('Jim')
-      expect(user.email).toBe('[email protected]')
+      expect(user.name).toEqual('Jim')
+      expect(user.email).toEqual('[email protected]')
+      expect(user.friends).toEqual([])
     })
   })
 })

lib/user/HTTPUserGateway.ts

@@ -5,5 +5,5 @@ const API_ORIGIN = process.env.API_ORIGIN
 
 export async function findById (userId: string) : Promise<User> {
   const user = await execute('findUserById', { userId })
-  return user.basicInfo
+  return { ...user.basicInfo, friends: user.friends }
 }

lib/user/User.ts

@@ -2,5 +2,6 @@ export default interface User {
   name: string
   email: string
   biography: string
-  twitter: string
+  twitter: string,
+  friends: Array<User>
 }

test/acceptance/users/viewingProfile.test.tsx

@@ -5,7 +5,10 @@ import UserProfile from '../../../pages/users/profile'
 
 describe('Viewing profile', () => {
   const userId = 'uniq-guid'
-  const fakeUser = { basicInfo: { name: 'Luke', email: '[email protected]' } }
+  const fakeUser = {
+    basicInfo: { name: 'Luke', email: '[email protected]' },
+    friends: []
+  }
 
   describe('when user views the page', () => {
     test('user can see user name', async () => {