Write tests, improve implementation

jest.config.js

@@ -14,7 +14,8 @@ module.exports = {
     '!**/semantic/**',
     '!**/src/index.js',
     '!**/cypress/**',
-    '!**/src/components/App.js'
+    '!**/src/components/App.js',
+    '!**/src/config.js'
   ],
   testPathIgnorePatterns: [
     '<rootDir>/cypress/',

src/components/UserSummary.js

@@ -77,6 +77,8 @@ const UserSummary = props => {
             <ul>
               {user.projects.map(project => {
                 return user.contributions.map(usersProject => {
+                  console.log('project', project)
+                  console.log('usersProject', usersProject)
                   if (usersProject.project_id === project.id) {
                     return (
                       <li key={user.id}>
@@ -153,7 +155,7 @@ const UserSummary = props => {
                         <p className='user-profile-name'>
                           {user.first_name
                             ? user.first_name + ' ' + user.last_name
-                            : user.slug.substring(0, 15)}{' '}
+                            : user.slug.substring(0, 15)}
                         </p>
                         <p className='user-profile-karma'>
                           <Icon name='fire' size='large' className='fire-icon' /> {}
@@ -163,9 +165,7 @@ const UserSummary = props => {
                     </Grid>
                   </Card.Header>
                   <Card.Meta>
-                    {user.title_list.length
-                      ? user.title_list.map(title => title + ' ')
-                      : null}
+                    {user.title_list.map(title => title + ' ')}
                   </Card.Meta>
                   <Card.Description>
                     <Grid>
@@ -189,10 +189,10 @@ const UserSummary = props => {
                           className='github-commit-count-icon'
                         />
                         <a href={user.github_profile_url}>
-                          {user.github_profile_url.replace(
+                          {user.github_profile_url ? user.github_profile_url.replace(
                             'https://github.com/',
                             ''
-                          )}
+                          ) : null}
                         </a>
                       </Grid.Row>
                     </Grid>

src/containers/UserProfile.js

@@ -3,18 +3,19 @@ import { connect } from 'react-redux'
 import { fetchUserInfo } from '../actions/getUserInfoAction'
 import UserSummary from '../components/UserSummary'
 import { Container } from 'semantic-ui-react'
+import { setLastLocation } from '../actions/setLastLocationAction'
 import '../assets/UserProfile.css'
 
 export class UserProfile extends Component {
   state = { user: null }
 
   componentDidMount () {
-    const user = Number(this.props.match.params.id)
-    console.log(Object.keys(this.props.user).length === 0)
+    const userId = Number(this.props.match.params.id)
+    this.props.setLastLocation(this.props.location.pathname)
     if (this.props.user.id === this.props.match.params.id) {
       this.setState({ user: this.props.user })
     } else {
-      this.props.fetchUserInfo(user)
+      this.props.fetchUserInfo(userId)
     }
   }
 
@@ -37,5 +38,5 @@ export class UserProfile extends Component {
 const mapStateToProps = store => ({ users: store.users, user: store.userInfo })
 export default connect(
   mapStateToProps,
-  { fetchUserInfo }
+  { fetchUserInfo, setLastLocation }
 )(UserProfile)

src/fixtures/userInfo.js

@@ -0,0 +1,130 @@
+export default {
+  user: {
+    id: 1,
+    email: 'mattwr18@gmail.com',
+    created_at: '2015-01-26T23:19:00.575Z',
+    updated_at: '2016-08-22T09:23:23.947Z',
+    first_name: 'Matt',
+    last_name: 'Tester',
+    display_email: null,
+    slug: 'matt-tester',
+    youtube_id: null,
+    display_profile: true,
+    latitude: 27.5949,
+    longitude: 48.5482,
+    country_name: 'Brazil',
+    city: 'Florianopolis',
+    region: 'Santa Catarina',
+    youtube_user_name: null,
+    github_profile_url: null,
+    display_hire_me: null,
+    receive_mailings: true,
+    timezone_offset: -18000,
+    country_code: 'BR',
+    status_count: 0,
+    deleted_at: null,
+    event_participation_count: 0,
+    can_see_dashboard: false,
+    skill_list: [],
+    title_list: ['Mentor'],
+    bio: ''
+  },
+  karmaTotal: 108,
+  gravatarUrl:
+    'https://www.gravatar.com/avatar/ea2a83f0e40a8f148309995d80d0ce71?s=250&d=retro',
+  bio: "Love programming, let's pair?",
+  projects: ['human_connection', 'anvil'],
+  contributions: [{ id: 2, commit_count: 1, project_id: 34, user_id: 1 }],
+  commitCountTotal: 751,
+  videos: [
+    {
+      id: 6733,
+      event_id: 2882,
+      title: 'React Mob - Friday, 19th Oct at 11:00am (UTC)',
+      hangout_url: 'https://hangouts.google.…v5mxylve4pcyt4adpnndjpme',
+      created_at: '2018-10-19T10:36:54.265Z',
+      updated_at: '2018-10-19T10:36:54.281Z',
+      uid: '300-85dfc9a8-3721',
+      category: 'Scrum',
+      project_id: 81,
+      user_id: 3,
+      yt_video_id: null,
+      participants: null,
+      hoa_status: null,
+      url_set_directly: true,
+      youtube_tweet_sent: null
+    }
+  ],
+  hangouts: 944,
+  authentications: 2,
+  profile: 10,
+  membershipLength: 6,
+  activity: 6
+}
+
+export let user = {
+  id: 1,
+  email: 'mattwr18@gmail.com',
+  created_at: '2015-01-26T23:19:00.575Z',
+  updated_at: '2016-08-22T09:23:23.947Z',
+  first_name: 'Matt',
+  last_name: 'Tester',
+  display_email: null,
+  slug: 'matt-tester',
+  youtube_id: null,
+  display_profile: true,
+  latitude: 27.5949,
+  longitude: 48.5482,
+  country_name: 'Brazil',
+  city: 'Florianopolis',
+  region: 'Santa Catarina',
+  youtube_user_name: null,
+  github_profile_url: null,
+  display_hire_me: null,
+  receive_mailings: true,
+  timezone_offset: -18000,
+  country_code: 'BR',
+  status_count: 0,
+  deleted_at: null,
+  event_participation_count: 0,
+  can_see_dashboard: false,
+  skill_list: [],
+  title_list: ['Mentor'],
+  karmaTotal: 108,
+  gravatarUrl:
+    'https://www.gravatar.com/avatar/ea2a83f0e40a8f148309995d80d0ce71?s=250&d=retro',
+  bio: "Love programming, let's pair?",
+  projects: [
+    { id: 34, title: 'some cool project' },
+    { id: 3, title: "it's open source, even" }
+  ],
+  contributions: [
+    { id: 2, commit_count: 1, project_id: 34, user_id: 1 },
+    { id: 3, commit_count: 5, project_id: 3, user_id: 1 }
+  ],
+  commitCountTotal: 751,
+  videos: [
+    {
+      id: 6733,
+      event_id: 2882,
+      title: 'React Mob - Friday, 19th Oct at 11:00am (UTC)',
+      hangout_url: 'https://hangouts.google.…v5mxylve4pcyt4adpnndjpme',
+      created_at: '2018-10-19T10:36:54.265Z',
+      updated_at: '2018-10-19T10:36:54.281Z',
+      uid: '300-85dfc9a8-3721',
+      category: 'Scrum',
+      project_id: 81,
+      user_id: 3,
+      yt_video_id: 'vaild_id',
+      participants: null,
+      hoa_status: null,
+      url_set_directly: true,
+      youtube_tweet_sent: null
+    }
+  ],
+  hangouts: 944,
+  authentications: 2,
+  profile: 10,
+  membershipLength: 6,
+  activity: 6
+}

src/tests/actions/getUserInfoAction.test.js

@@ -0,0 +1,41 @@
+import moxios from 'moxios'
+import thunk from 'redux-thunk'
+import configureMockStore from 'redux-mock-store'
+import { fetchUserInfo } from '../../actions/getUserInfoAction'
+import { GET_USER_INFO } from '../../types'
+import userInfoResponse from '../../fixtures/userInfo'
+
+const middlewares = [thunk]
+const mockStore = configureMockStore(middlewares)
+let store
+
+describe('fetchUserInfo action', () => {
+  beforeEach(() => {
+    moxios.install()
+    store = mockStore({})
+  })
+
+  afterEach(() => {
+    moxios.uninstall()
+  })
+
+  it('fetches user info from an external api', async () => {
+    const expectedActions = [
+      { type: GET_USER_INFO, payload: userInfoResponse }
+    ]
+    moxios.stubRequest('/api/v1/users/1', {
+      status: 200
+    })
+
+    moxios.wait(() => {
+      const request = moxios.requests.mostRecent()
+      request.resolve({
+        data: { user: userInfoResponse }
+      })
+    })
+
+    await store.dispatch(fetchUserInfo()).then(() => {
+      expect(store.getActions()).toEqual(expectedActions)
+    })
+  })
+})

src/tests/components/UserSummary.test.js

@@ -0,0 +1,41 @@
+import React from 'react'
+import { mount } from 'enzyme'
+import UserSummary from '../../components/UserSummary'
+import { user } from '../../fixtures/userInfo'
+
+describe('UserSummary', () => {
+  let wrapper
+  const props = {
+    user
+  }
+  beforeEach(() => {
+    wrapper = mount(<UserSummary {...props} />)
+  })
+
+  it("user's slug if there is no first_name", () => {
+    user.first_name = null
+    wrapper = mount(<UserSummary user={user} />)
+    let userProfileName = wrapper.find('p').filterWhere(item => {
+      return item.hasClass('user-profile-name')
+    })
+    expect(userProfileName.text()).toEqual(user.slug)
+  })
+
+  it("displays a user's github username", () => {
+    user.github_profile_url = 'https://github.com/mattwr18'
+    wrapper = mount(<UserSummary user={user} />)
+    let userGithubUsername = wrapper.find('a').filterWhere(item => {
+      return item.prop('href') === user.github_profile_url
+    })
+    expect(userGithubUsername.text()).toEqual('mattwr18')
+  })
+
+  it("trucates a user's email if it is longer than 23 characters", () => {
+    user.email = 'somereallylongemailfortesting@truncate.com'
+    wrapper = mount(<UserSummary user={user} />)
+    let userEmail = wrapper.find('a').filterWhere(item => {
+      return item.prop('href') === `mailto:${user.email}`
+    })
+    expect(userEmail.text()).toEqual('somereallylongemailfort...')
+  })
+})

src/tests/containers/UserProfile.test.js

@@ -0,0 +1,43 @@
+import React from 'react'
+import { mount } from 'enzyme'
+import { UserProfile } from '../../containers/UserProfile'
+import { user } from '../../fixtures/userInfo'
+
+describe('UserProfile', () => {
+  let wrapper
+  const props = {
+    match: { params: { id: 1 } },
+    userId: user.id,
+    user: { id: 2 },
+    fetchUserInfo: jest.fn(),
+    setLastLocation: () => {},
+    location: { pathname: '/users/2' }
+  }
+  beforeEach(() => {
+    wrapper = mount(<UserProfile {...props} />)
+  })
+
+  it('renders UserSummary', () => {
+    expect(wrapper.find('UserSummary')).toBeTruthy()
+  })
+
+  it('calls fetchUserInfo if their user id is different from the user id in the url', () => {
+    expect(props.fetchUserInfo).toHaveBeenCalledWith(props.match.params.id)
+  })
+
+  it('sets state if the user props are updated', () => {
+    wrapper.setProps({ user })
+    expect(wrapper.state().user).toEqual(user)
+  })
+
+  it('sets state if the user id is the same as in the url', () => {
+    wrapper = mount(
+      <UserProfile
+        {...props}
+        user={user}
+      />
+    )
+    wrapper.update()
+    expect(wrapper.state().user).toEqual(user)
+  })
+})

src/tests/reducers/userInfoReducer.test.js

@@ -0,0 +1,17 @@
+import userInfoReducer from '../../reducers/userInfoReducer'
+import { GET_USER_INFO } from '../../types'
+
+describe('reduces users', () => {
+  it('defaults to empty user info if none are passed in', () => {
+    expect(userInfoReducer(undefined, {})).toEqual({})
+  })
+
+  it('reduces user info after getting it', () => {
+    expect(
+      userInfoReducer([], {
+        type: GET_USER_INFO,
+        payload: { id: 1, email: 'user@user.de' }
+      })
+    ).toEqual({ id: 1, email: 'user@user.de' })
+  })
+})

src/tests/store/userInfo.test.js

@@ -0,0 +1,15 @@
+import store from '../../store'
+
+describe('Store', () => {
+  it('should update', async () => {
+    await store.dispatch({
+      type: 'GET_USER_INFO',
+      payload: { id: 2, email: 'someEmail@example.com' }
+    })
+
+    expect(store.getState().userInfo).toEqual({
+      id: 2,
+      email: 'someEmail@example.com'
+    })
+  })
+})