Implement user_profile.spec.js

This commit is contained in:
Maxim Filippov 2018-12-15 06:16:44 +03:00
parent 1341a7bb9c
commit 828b1c78f9
8 changed files with 153 additions and 15 deletions

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

@ -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')
})
})

View file

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