Implement user_profile.spec.js

src/boot/routes.js

@@ -29,6 +29,7 @@ export default (store) => {
     { name: 'tag-timeline', path: '/~/tag/:tag', component: TagTimeline },
     { name: 'conversation', path: '/~/notice/:id', component: ConversationPage, meta: { dontScroll: true } },
     { name: 'user-profile', path: '/:name', component: UserProfile },
+    { name: 'external-user-profile', path: '/~/users/:id', component: UserProfile },
     { name: 'mentions', path: '/:username/mentions', component: Mentions },
     { name: 'dms', path: '/:username/dms', component: DMs },
     { name: 'settings', path: '/~/settings', component: Settings },

src/components/status/status.js

@@ -204,9 +204,6 @@ const Status = {
         return 'small'
       }
       return 'normal'
-    },
-    userProfileLink (id, name) {
-      return generateProfileLink(id, name)
     }
   },
   components: {
@@ -288,6 +285,9 @@ const Status = {
     },
     replyLeave () {
       this.showPreview = false
+    },
+    userProfileLink (id, name) {
+      return generateProfileLink(id, name)
     }
   },
   watch: {

src/components/user_card_content/user_card_content.js

@@ -41,9 +41,6 @@ export default {
       const days = Math.ceil((new Date() - new Date(this.user.created_at)) / (60 * 60 * 24 * 1000))
       return Math.round(this.user.statuses_count / days)
     },
-    userProfileLink (user) {
-      return generateProfileLink(user.id, user.screen_name)
-    },
     userHighlightType: {
       get () {
         const data = this.$store.state.config.highlight[this.user.screen_name]
@@ -110,6 +107,9 @@ export default {
       if (target.tagName === 'A') {
         window.open(target.href, '_blank')
       }
+    },
+    userProfileLink (user) {
+      return generateProfileLink(user.id, user.screen_name)
     }
   }
 }

src/components/user_profile/user_profile.js

@@ -3,19 +3,22 @@ import Timeline from '../timeline/timeline.vue'
 
 const UserProfile = {
   created () {
+    debugger
     this.$store.commit('clearTimeline', { timeline: 'user' })
-    this.$store.dispatch('startFetching', ['user', this.userName])
+    this.$store.dispatch('startFetching', ['user', this.fetchBy])
     if (!this.user) {
-      this.$store.dispatch('fetchUser', this.userName)
+      this.$store.dispatch('fetchUser', this.fetchBy)
     }
   },
   destroyed () {
     this.$store.dispatch('stopFetching', 'user')
   },
   computed: {
-    timeline () { return this.$store.state.statuses.timelines.user },
+    timeline () {
+      return this.$store.state.statuses.timelines.user
+    },
     userId () {
-      return this.user.id
+      return this.$route.params.id
     },
     userName () {
       return this.$route.params.name
@@ -25,16 +28,33 @@ const UserProfile = {
         return this.timeline.statuses[0].user
       } else {
         return Object.values(this.$store.state.users.usersObject).filter(user => {
-          return user.screen_name === this.userName
+          return (this.isExternal ? user.id === this.userId : user.screen_name === this.userName)
         })[0] || false
       }
+    },
+    fetchBy () {
+      return this.isExternal ? this.userId : this.userName
+    },
+    isExternal () {
+      return this.$route.name === 'external-user-profile'
     }
   },
   watch: {
     userName () {
+      if (this.isExternal) {
+        return
+      }
       this.$store.dispatch('stopFetching', 'user')
       this.$store.commit('clearTimeline', { timeline: 'user' })
       this.$store.dispatch('startFetching', ['user', this.userName])
+    },
+    userId () {
+      if (!this.isExternal) {
+        return
+      }
+      this.$store.dispatch('stopFetching', 'user')
+      this.$store.commit('clearTimeline', { timeline: 'user' })
+      this.$store.dispatch('startFetching', ['user', this.userId])
     }
   },
   components: {

src/services/user_profile_link_generator/user_profile_link_generator.js

@@ -1,6 +1,6 @@
 const generateProfileLink = (id, screenName) => {
   return {
-    name: 'user-profile',
+    name: (isExternal(screenName) ? 'external-user-profile' : 'user-profile'),
     params: (isExternal(screenName) ? { id } : { name: screenName })
   }
 }

test/unit/specs/boot/routes.spec.js

@@ -16,7 +16,7 @@ describe('routes', () => {
 
     const matchedComponents = router.getMatchedComponents()
 
-    expect(matchedComponents[0].components.hasOwnProperty('Timeline'))
+    expect(matchedComponents[0].components.hasOwnProperty('Timeline')).to.eql(true)
   })
 
   it('user\'s profile', () => {
@@ -24,6 +24,7 @@ describe('routes', () => {
 
     const matchedComponents = router.getMatchedComponents()
 
-    expect(matchedComponents[0].components.hasOwnProperty('UserProfile'))
+    console.log(matchedComponents[0].components.UserCardContent)
+    expect(matchedComponents[0].components.hasOwnProperty('UserProfile')).to.eql(true)
   })
 })

test/unit/specs/components/user_profile.spec.js

@@ -0,0 +1,116 @@
+import { mount, createLocalVue } from '@vue/test-utils'
+import Vuex from 'vuex'
+import UserProfile from 'src/components/user_profile/user_profile.vue'
+import backendInteractorService from 'src/services/backend_interactor_service/backend_interactor_service.js'
+
+const localVue = createLocalVue()
+localVue.use(Vuex)
+
+const mutations = {
+  clearTimeline: () => {}
+}
+
+const store = new Vuex.Store({
+  mutations,
+  state: {
+    api: {
+      backendInteractor: backendInteractorService('')
+    },
+    config: {
+      colors: '',
+      highlight: {}
+    },
+    instance: {
+      hideUserStats: true
+    },
+    statuses: {
+      timelines: {
+        user: {
+          statuses: [],
+          statusesObject: {},
+          faves: [],
+          visibleStatuses: [],
+          visibleStatusesObject: {},
+          newStatusCount: 0,
+          maxId: 0,
+          minVisibleId: 0,
+          loading: false,
+          followers: [],
+          friends: [],
+          viewing: 'statuses',
+          userId: 701,
+          flushMarker: 0
+        }
+      }
+    },
+    users: {
+      currentUser: {
+        credentials: ''
+      },
+      usersObject: [
+        {
+          background_image: null,
+          cover_photo: 'https://playvicious.social/system/accounts/headers/000/000/001/original/7dae4fc0e8330e83.jpg?1507329206',
+          created_at: 'Mon Dec 18 16:01:35 +0000 2017',
+          default_scope: 'public',
+          description: "Your favorite person's favorite person.",
+          description_html: "<p>Your favorite person's favorite person.</p>",
+          favourites_count: 0,
+          fields: [
+            {
+              name: '✌🏾',
+              value: '<a href="https://thetwelfth.house" rel="me nofollow noopener" target="_blank"><span class="invisible">https://</span><span class="">thetwelfth.house</span><span class="invisible"></span></a>'
+            },
+            {
+              name: '🚧',
+              value: '<a href="https://code.playvicio.us" rel="me nofollow noopener" target="_blank"><span class="invisible">https://</span><span class="">code.playvicio.us</span><span class="invisible"></span></a>'
+            },
+            {
+              name: '❤️',
+              value: '<a href="https://www.patreon.com/Are0h" rel="me nofollow noopener" target="_blank"><span class="invisible">https://www.</span><span class="">patreon.com/Are0h</span><span class="invisible"></span></a>'
+            }
+          ],
+          followers_count: 2,
+          following: false,
+          follows_you: false,
+          friends_count: 0,
+          id: 701,
+          is_local: false,
+          locked: false,
+          name: 'Are0h',
+          name_html: 'Are0h',
+          no_rich_text: false,
+          profile_image_url: 'https://playvicious.social/system/accounts/avatars/000/000/001/original/33e9983bc2d96aeb.png?1520872572',
+          profile_image_url_https: 'https://playvicious.social/system/accounts/avatars/000/000/001/original/33e9983bc2d96aeb.png?1520872572',
+          profile_image_url_original: 'https://playvicious.social/system/accounts/avatars/000/000/001/original/33e9983bc2d96aeb.png?1520872572',
+          profile_image_url_profile_size: 'https://playvicious.social/system/accounts/avatars/000/000/001/original/33e9983bc2d96aeb.png?1520872572',
+          rights: {
+            delete_others_notice: false
+          },
+          screen_name: 'Are0h@playvicious.social',
+          statuses_count: 6727,
+          statusnet_blocking: false,
+          statusnet_profile_url: 'https://playvicious.social/users/Are0h'
+        }
+      ]
+    }
+  }
+})
+
+describe('UserProfile', () => {
+  it('renders', () => {
+    const wrapper = mount(UserProfile, {
+      localVue,
+      store,
+      mocks: {
+        $route: {
+          params: { id: 701 },
+          name: 'external-user-profile'
+        },
+        $t: (msg) => msg
+      }
+    })
+
+    expect(wrapper.find('.user-screen-name').text()).to.eql('@Are0h@playvicious.social')
+  })
+})

test/unit/specs/services/user_profile_link_generator/user_profile_link_generator.spec.js

@@ -9,7 +9,7 @@ describe('generateProfileLink', () => {
 
   it('returns obj for external user', () => {
     expect(generateProfileLink(1, 'john@domain')).to.eql({
-      name: 'user-profile', params: { id: 1 }
+      name: 'external-user-profile', params: { id: 1 }
     })
   })
 })