Implement user_profile.spec.js

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: {