diff --git a/src/components/user_profile/user_profile.js b/src/components/user_profile/user_profile.js index 77bb1835b6..2ca098171d 100644 --- a/src/components/user_profile/user_profile.js +++ b/src/components/user_profile/user_profile.js @@ -6,7 +6,7 @@ const UserProfile = { created () { this.$store.commit('clearTimeline', { timeline: 'user' }) this.$store.dispatch('startFetching', ['user', this.fetchBy]) - if (!this.user) { + if (!this.user.id) { this.$store.dispatch('fetchUser', this.fetchBy) } }, @@ -29,14 +29,20 @@ const UserProfile = { followers () { return this.user.followers }, + userInStore () { + if (this.isExternal) { + return this.$store.getters.userById(this.userId) + } + return this.$store.getters.userByName(this.userName) + }, user () { if (this.timeline.statuses[0]) { return this.timeline.statuses[0].user - } else { - return Object.values(this.$store.state.users.usersObject).filter(user => { - return (this.isExternal ? user.id === this.userId : user.screen_name === this.userName) - })[0] || {} } + if (this.userInStore) { + return this.userInStore + } + return {} }, fetchBy () { return this.isExternal ? this.userId : this.userName diff --git a/src/modules/users.js b/src/modules/users.js index 2f05ed3f73..adbd37dd4b 100644 --- a/src/modules/users.js +++ b/src/modules/users.js @@ -86,6 +86,13 @@ export const mutations = { } } +export const getters = { + userById: state => id => + state.users.find(user => user.id === id), + userByName: state => name => + state.users.find(user => user.screen_name === name) +} + export const defaultState = { loggingIn: false, lastLoginName: false, @@ -99,6 +106,7 @@ export const defaultState = { const users = { state: defaultState, mutations, + getters, actions: { fetchUser (store, id) { store.rootState.api.backendInteractor.fetchUser({ id }) diff --git a/test/unit/specs/components/user_profile.spec.js b/test/unit/specs/components/user_profile.spec.js index b7743f1fbd..79fb0304bf 100644 --- a/test/unit/specs/components/user_profile.spec.js +++ b/test/unit/specs/components/user_profile.spec.js @@ -2,6 +2,7 @@ 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' +import { getters } from 'src/modules/users.js' const localVue = createLocalVue() localVue.use(Vuex) @@ -10,8 +11,26 @@ const mutations = { clearTimeline: () => {} } +const testGetters = { + userByName: state => getters.userByName(state.users), + userById: state => getters.userById(state.users) +} + +const localUser = { + id: 100, + is_local: true, + screen_name: 'testUser' +} + +const extUser = { + id: 100, + is_local: false, + screen_name: 'testUser@test.instance' +} + const externalProfileStore = new Vuex.Store({ mutations, + getters: testGetters, state: { api: { backendInteractor: backendInteractorService('') @@ -44,7 +63,7 @@ const externalProfileStore = new Vuex.Store({ followers: [], friends: [], viewing: 'statuses', - userId: 701, + userId: 100, flushMarker: 0 } } @@ -53,58 +72,15 @@ const externalProfileStore = new Vuex.Store({ 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' - } - ] + usersObject: [extUser], + users: [extUser] } } }) const localProfileStore = new Vuex.Store({ mutations, + getters: testGetters, state: { api: { backendInteractor: backendInteractorService('') @@ -137,7 +113,7 @@ const localProfileStore = new Vuex.Store({ followers: [], friends: [], viewing: 'statuses', - userId: 701, + userId: 100, flushMarker: 0 } } @@ -146,52 +122,8 @@ const localProfileStore = new Vuex.Store({ 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', - statuses_count: 6727, - statusnet_blocking: false, - statusnet_profile_url: 'https://playvicious.social/users/Are0h' - } - ] + usersObject: [localUser], + users: [localUser] } } }) @@ -203,14 +135,14 @@ describe('UserProfile', () => { store: externalProfileStore, mocks: { $route: { - params: { id: 701 }, + params: { id: 100 }, name: 'external-user-profile' }, $t: (msg) => msg } }) - expect(wrapper.find('.user-screen-name').text()).to.eql('@Are0h@playvicious.social') + expect(wrapper.find('.user-screen-name').text()).to.eql('@testUser@test.instance') }) it('renders local profile', () => { @@ -219,13 +151,13 @@ describe('UserProfile', () => { store: localProfileStore, mocks: { $route: { - params: { name: 'Are0h' }, + params: { name: 'testUser' }, name: 'user-profile' }, $t: (msg) => msg } }) - expect(wrapper.find('.user-screen-name').text()).to.eql('@Are0h') + expect(wrapper.find('.user-screen-name').text()).to.eql('@testUser') }) }) diff --git a/test/unit/specs/modules/users.spec.js b/test/unit/specs/modules/users.spec.js index 812ba63266..af60c9b399 100644 --- a/test/unit/specs/modules/users.spec.js +++ b/test/unit/specs/modules/users.spec.js @@ -1,34 +1,62 @@ import { cloneDeep } from 'lodash' -import { defaultState, mutations } from '../../../../src/modules/users.js' +import { defaultState, mutations, getters } from '../../../../src/modules/users.js' describe('The users module', () => { - it('adds new users to the set, merging in new information for old users', () => { - const state = cloneDeep(defaultState) - const user = { id: 1, name: 'Guy' } - const modUser = { id: 1, name: 'Dude' } + describe('mutations', () => { + it('adds new users to the set, merging in new information for old users', () => { + const state = cloneDeep(defaultState) + const user = { id: 1, name: 'Guy' } + const modUser = { id: 1, name: 'Dude' } - mutations.addNewUsers(state, [user]) - expect(state.users).to.have.length(1) - expect(state.users).to.eql([user]) + mutations.addNewUsers(state, [user]) + expect(state.users).to.have.length(1) + expect(state.users).to.eql([user]) - mutations.addNewUsers(state, [modUser]) - expect(state.users).to.have.length(1) - expect(state.users).to.eql([user]) - expect(state.users[0].name).to.eql('Dude') + mutations.addNewUsers(state, [modUser]) + expect(state.users).to.have.length(1) + expect(state.users).to.eql([user]) + expect(state.users[0].name).to.eql('Dude') + }) + + it('sets a mute bit on users', () => { + const state = cloneDeep(defaultState) + const user = { id: 1, name: 'Guy' } + + mutations.addNewUsers(state, [user]) + mutations.setMuted(state, {user, muted: true}) + + expect(user.muted).to.eql(true) + + mutations.setMuted(state, {user, muted: false}) + + expect(user.muted).to.eql(false) + }) }) - it('sets a mute bit on users', () => { - const state = cloneDeep(defaultState) - const user = { id: 1, name: 'Guy' } + describe('getUserByName', () => { + it('returns user with matching screen_name', () => { + const state = { + users: [ + { screen_name: 'Guy', id: 1 } + ] + } + const name = 'Guy' + const expected = { screen_name: 'Guy', id: 1 } + expect(getters.userByName(state)(name)).to.eql(expected) + }) + }) - mutations.addNewUsers(state, [user]) - mutations.setMuted(state, {user, muted: true}) - - expect(user.muted).to.eql(true) - - mutations.setMuted(state, {user, muted: false}) - - expect(user.muted).to.eql(false) + describe('getUserById', () => { + it('returns user with matching id', () => { + const state = { + users: [ + { screen_name: 'Guy', id: 1 } + ] + } + const id = 1 + const expected = { screen_name: 'Guy', id: 1 } + expect(getters.userById(state)(id)).to.eql(expected) + }) }) })