From 828b1c78f9304d400a206a25f4f43999bc5908bc Mon Sep 17 00:00:00 2001 From: Maxim Filippov Date: Sat, 15 Dec 2018 06:16:44 +0300 Subject: [PATCH] Implement user_profile.spec.js --- src/boot/routes.js | 1 + src/components/status/status.js | 6 +- .../user_card_content/user_card_content.js | 6 +- src/components/user_profile/user_profile.js | 30 ++++- .../user_profile_link_generator.js | 2 +- test/unit/specs/boot/routes.spec.js | 5 +- .../specs/components/user_profile.spec.js | 116 ++++++++++++++++++ .../user_profile_link_generator.spec.js | 2 +- 8 files changed, 153 insertions(+), 15 deletions(-) create mode 100644 test/unit/specs/components/user_profile.spec.js diff --git a/src/boot/routes.js b/src/boot/routes.js index 9a249ee5..2a08934f 100644 --- a/src/boot/routes.js +++ b/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 }, diff --git a/src/components/status/status.js b/src/components/status/status.js index fbf99a23..94d03ec2 100644 --- a/src/components/status/status.js +++ b/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: { diff --git a/src/components/user_card_content/user_card_content.js b/src/components/user_card_content/user_card_content.js index abdac58e..cdb1a850 100644 --- a/src/components/user_card_content/user_card_content.js +++ b/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) } } } diff --git a/src/components/user_profile/user_profile.js b/src/components/user_profile/user_profile.js index 8a32392a..95d797a2 100644 --- a/src/components/user_profile/user_profile.js +++ b/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: { diff --git a/src/services/user_profile_link_generator/user_profile_link_generator.js b/src/services/user_profile_link_generator/user_profile_link_generator.js index 9ae15792..3367eb8a 100644 --- a/src/services/user_profile_link_generator/user_profile_link_generator.js +++ b/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 }) } } diff --git a/test/unit/specs/boot/routes.spec.js b/test/unit/specs/boot/routes.spec.js index be2fd7d2..638b1860 100644 --- a/test/unit/specs/boot/routes.spec.js +++ b/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) }) }) diff --git a/test/unit/specs/components/user_profile.spec.js b/test/unit/specs/components/user_profile.spec.js new file mode 100644 index 00000000..b3497f30 --- /dev/null +++ b/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: "

Your favorite person's favorite person.

", + favourites_count: 0, + fields: [ + { + name: '✌🏾', + value: 'thetwelfth.house' + }, + { + name: '🚧', + value: 'code.playvicio.us' + }, + { + name: '❤️', + value: 'patreon.com/Are0h' + } + ], + 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') + }) +}) diff --git a/test/unit/specs/services/user_profile_link_generator/user_profile_link_generator.spec.js b/test/unit/specs/services/user_profile_link_generator/user_profile_link_generator.spec.js index 5718b8b9..4366f799 100644 --- a/test/unit/specs/services/user_profile_link_generator/user_profile_link_generator.spec.js +++ b/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 } }) }) })