sam/admin-fe
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Merge branch 'feature/select-multiple-users' into 'master'

Browse source 
Apply user actions to multiple users

Closes #18

See merge request pleroma/admin-fe!17
This commit is contained in:
feld 2019-05-29 22:24:42 +00:00
commit 366fdbfc1e
9 changed files with 694 additions and 52 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
package.json
View file

@ -52,6 +52,7 @@
"lodash.debounce": "^4.0.8",
"normalize.css": "7.0.0",
"nprogress": "0.2.0",
"numeral": "^2.0.6",
"screenfull": "4.0.0",
"showdown": "1.8.6",
"sortablejs": "1.7.0",

4
src/api/__mocks__/users.js
View file

@ -1,6 +1,6 @@
const users = [
export const users = [
{ active: true, deactivated: false, id: '2', nickname: 'allis', local: true, external: false, roles: { admin: true, moderator: false }, tags: [] },
{ active: true, deactivated: false, id: '10', nickname: 'bob', local: false, external: true, roles: { admin: false, moderator: true }, tags: ['sandbox'] },
{ active: true, deactivated: false, id: '10', nickname: 'bob', local: false, external: true, roles: { admin: false, moderator: false }, tags: ['sandbox'] },
{ active: false, deactivated: true, id: 'abc', nickname: 'john', local: true, external: false, roles: { admin: false, moderator: false }, tags: ['strip_media'] }
]

4
src/lang/en.js
View file

@ -188,7 +188,9 @@ export default {
forceUnlisted: 'Force posts to be unlisted',
sandbox: 'Force posts to be followers-only',
disableRemoteSubscription: 'Disallow following user from remote instances',
disableAnySubscription: 'Disallow following user at all'
disableAnySubscription: 'Disallow following user at all',
selectUsers: 'Select users to apply actions to multiple users',
moderateUsers: 'Moderate multiple users'
},
usersFilter: {
inputPlaceholder: 'Select filter',

11
src/store/modules/users.js
View file

@ -21,14 +21,9 @@ const users = {
SET_LOADING: (state, status) => {
state.loading = status
},
SWAP_USER: (state, user) => {
const usersWithoutSwapped = state.fetchedUsers.filter(u => {
return u.id !== user.id
})
state.fetchedUsers = [...usersWithoutSwapped, user].sort((a, b) =>
a.nickname.localeCompare(b.nickname)
)
SWAP_USER: (state, updatedUser) => {
const updated = state.fetchedUsers.map(user => user.id === updatedUser.id ? updatedUser : user)
state.fetchedUsers = updated.sort((a, b) => a.nickname.localeCompare(b.nickname))
},
SWAP_USERS: (state, users) => {
const usersWithoutSwapped = users.reduce((acc, user) => {

259
src/views/users/components/DropdownActionsMenu.vue Normal file
View file

@ -0,0 +1,259 @@
<template>
<el-dropdown size="small" trigger="click" placement="bottom-start">
<el-button v-if="isDesktop" class="actions-button">
<span class="actions-button-container">
<span>
<i class="el-icon-edit" />
{{ $t('users.moderateUsers') }}
</span>
<i class="el-icon-arrow-down el-icon--right"/>
</span>
</el-button>
<el-dropdown-menu v-if="showDropdownForMultipleUsers" slot="dropdown">
<el-dropdown-item
@click.native="grantRightToMultipleUsers('admin')">
{{ $t('users.grantAdmin') }}
</el-dropdown-item>
<el-dropdown-item
@click.native="revokeRightFromMultipleUsers('admin')">
{{ $t('users.revokeAdmin') }}
</el-dropdown-item>
<el-dropdown-item
@click.native="grantRightToMultipleUsers('moderator')">
{{ $t('users.grantModerator') }}
</el-dropdown-item>
<el-dropdown-item
@click.native="revokeRightFromMultipleUsers('moderator')">
{{ $t('users.revokeModerator') }}
</el-dropdown-item>
<el-dropdown-item
divided
@click.native="activateMultipleUsers">
{{ $t('users.activateAccount') }}
</el-dropdown-item>
<el-dropdown-item
@click.native="deactivateMultipleUsers">
{{ $t('users.deactivateAccount') }}
</el-dropdown-item>
<el-dropdown-item
@click.native="deleteMultipleUsers">
{{ $t('users.deleteAccount') }}
</el-dropdown-item>
<el-dropdown-item divided class="no-hover">
<div class="tag-container">
<span class="tag-text">{{ $t('users.forceNsfw') }}</span>
<el-button-group class="tag-button-group">
<el-button size="mini" @click.native="addTagForMultipleUsers('force_nsfw')">apply</el-button>
<el-button size="mini" @click.native="removeTagFromMultipleUsers('force_nsfw')">remove</el-button>
</el-button-group>
</div>
</el-dropdown-item>
<el-dropdown-item class="no-hover">
<div class="tag-container">
<span class="tag-text">{{ $t('users.stripMedia') }}</span>
<el-button-group class="tag-button-group">
<el-button size="mini" @click.native="addTagForMultipleUsers('strip_media')">apply</el-button>
<el-button size="mini" @click.native="removeTagFromMultipleUsers('strip_media')">remove</el-button>
</el-button-group>
</div>
</el-dropdown-item>
<el-dropdown-item class="no-hover">
<div class="tag-container">
<span class="tag-text">{{ $t('users.forceUnlisted') }}</span>
<el-button-group class="tag-button-group">
<el-button size="mini" @click.native="addTagForMultipleUsers('force_unlisted')">apply</el-button>
<el-button size="mini" @click.native="removeTagFromMultipleUsers('force_unlisted')">remove</el-button>
</el-button-group>
</div>
</el-dropdown-item>
<el-dropdown-item class="no-hover">
<div class="tag-container">
<span class="tag-text">{{ $t('users.sandbox') }}</span>
<el-button-group class="tag-button-group">
<el-button size="mini" @click.native="addTagForMultipleUsers('sandbox')">apply</el-button>
<el-button size="mini" @click.native="removeTagFromMultipleUsers('sandbox')">remove</el-button>
</el-button-group>
</div>
</el-dropdown-item>
<el-dropdown-item class="no-hover">
<div class="tag-container">
<span class="tag-text">{{ $t('users.disableRemoteSubscription') }}</span>
<el-button-group class="tag-button-group">
<el-button size="mini" @click.native="addTagForMultipleUsers('disable_remote_subscription')">apply</el-button>
<el-button size="mini" @click.native="removeTagFromMultipleUsers('disable_remote_subscription')">remove</el-button>
</el-button-group>
</div>
</el-dropdown-item>
<el-dropdown-item class="no-hover">
<div class="tag-container">
<span class="tag-text">{{ $t('users.disableAnySubscription') }}</span>
<el-button-group class="tag-button-group">
<el-button size="mini" @click.native="addTagForMultipleUsers('disable_any_subscription')">apply</el-button>
<el-button size="mini" @click.native="removeTagFromMultipleUsers('disable_any_subscription')">remove</el-button>
</el-button-group>
</div>
</el-dropdown-item>
</el-dropdown-menu>
<el-dropdown-menu v-else slot="dropdown">
<el-dropdown-item>
{{ $t('users.selectUsers') }}
</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</template>
<script>
export default {
props: {
selectedUsers: {
type: Array,
default: function() {
return []
}
}
},
computed: {
showDropdownForMultipleUsers() {
return this.$props.selectedUsers.length > 0
},
isDesktop() {
return this.$store.state.app.device === 'desktop'
}
},
methods: {
mappers() {
return {
grantRight: (right) => () => this.selectedUsers
.filter(user => user.local && !user.roles[right] && this.$store.state.user.id !== user.id)
.map(user => this.$store.dispatch('ToggleRight', { user, right })),
revokeRight: (right) => () => this.selectedUsers
.filter(user => user.local && user.roles[right] && this.$store.state.user.id !== user.id)
.map(user => this.$store.dispatch('ToggleRight', { user, right })),
activate: () => this.selectedUsers
.filter(user => user.deactivated && this.$store.state.user.id !== user.id)
.map(user => this.$store.dispatch('ToggleUserActivation', user.nickname)),
deactivate: () => this.selectedUsers
.filter(user => !user.deactivated && this.$store.state.user.id !== user.id)
.map(user => this.$store.dispatch('ToggleUserActivation', user.nickname)),
remove: () => this.selectedUsers
.filter(user => this.$store.state.user.id !== user.id)
.map(user => this.$store.dispatch('DeleteUser', user)),
addTag: (tag) => () => {
const users = this.selectedUsers
.filter(user => tag === 'disable_remote_subscription' || tag === 'disable_any_subscription'
? user.local && !user.tags.includes(tag)
: !user.tags.includes(tag))
this.$store.dispatch('AddTag', { users, tag })
},
removeTag: (tag) => () => {
const users = this.selectedUsers
.filter(user => tag === 'disable_remote_subscription' || tag === 'disable_any_subscription'
? user.local && user.tags.includes(tag)
: user.tags.includes(tag))
this.$store.dispatch('RemoveTag', { users, tag })
}
}
},
grantRightToMultipleUsers(right) {
const { grantRight } = this.mappers()
this.confirmMessage(
`Are you sure you want to grant ${right} rights to all selected users?`,
grantRight(right)
)
},
revokeRightFromMultipleUsers(right) {
const { revokeRight } = this.mappers()
this.confirmMessage(
`Are you sure you want to revoke ${right} rights from all selected users?`,
revokeRight(right)
)
},
activateMultipleUsers() {
const { activate } = this.mappers()
this.confirmMessage(
'Are you sure you want to activate accounts of all selected users?',
activate
)
},
deactivateMultipleUsers() {
const { deactivate } = this.mappers()
this.confirmMessage(
'Are you sure you want to deactivate accounts of all selected users?',
deactivate
)
},
deleteMultipleUsers() {
const { remove } = this.mappers()
this.confirmMessage(
'Are you sure you want to delete accounts of all selected users?',
remove
)
},
addTagForMultipleUsers(tag) {
const { addTag } = this.mappers()
this.confirmMessage(
'Are you sure you want to apply tag to all selected users?',
addTag(tag)
)
},
removeTagFromMultipleUsers(tag) {
const { removeTag } = this.mappers()
this.confirmMessage(
'Are you sure you want to remove tag from all selected users?',
removeTag(tag)
)
},
confirmMessage(message, applyAction) {
this.$confirm(message, {
confirmButtonText: 'OK',
cancelButtonText: 'Cancel',
type: 'warning'
}).then(() => {
applyAction()
this.$emit('apply-action')
this.$message({
type: 'success',
message: 'Completed'
})
}).catch(() => {
this.$message({
type: 'info',
message: 'Canceled'
})
})
}
}
}
</script>
<style rel='stylesheet/scss' lang='scss' scoped>
.actions-button {
text-align: left;
margin: 0 15px 10px 0;
width: 350px;
padding: 10px 15px;
}
.actions-button-container {
display: flex;
justify-content: space-between;
}
.el-dropdown {
float: right;
}
.el-dropdown-menu {
margin-right: 15px;
}
.tag-container {
display: flex;
justify-content: space-between;
align-items: center;
}
.tag-text {
padding-right: 20px;
}
.no-hover:hover {
color: #606266;
background-color: white;
cursor: auto;
}
</style>

57
src/views/users/index.vue
View file

@ -1,11 +1,29 @@
<template>
<div class="users-container">
<h1>{{ $t('users.users') }}</h1>
<h1>
{{ $t('users.users') }}
<span class="user-count">({{ normalizedUsersCount }})</span>
</h1>
<div class="search-container">
<users-filter/>
<el-input :placeholder="$t('users.search')" v-model="search" class="search" @input="handleDebounceSearchInput"/>
</div>
<el-table v-loading="loading" :data="users" style="width: 100%">
<dropdown-actions-menu
:selected-users="selectedUsers"
@apply-action="clearSelection"/>
<el-table
v-loading="loading"
ref="usersTable"
:data="users"
row-key="id"
style="width: 100%"
@selection-change="handleSelectionChange">
<el-table-column
v-if="isDesktop"
type="selection"
reserve-selection
width="44"
align="center"/>
<el-table-column :min-width="width" :label="$t('users.id')" prop="id" />
<el-table-column :label="$t('users.name')" prop="nickname">
<template slot-scope="scope">
@ -31,7 +49,7 @@
</el-table-column>
<el-table-column :label="$t('users.actions')" fixed="right">
<template slot-scope="scope">
<el-dropdown size="small">
<el-dropdown size="small" trigger="click">
<span class="el-dropdown-link">
{{ $t('users.moderation') }}
<i v-if="isDesktop" class="el-icon-arrow-down el-icon--right"/>
@ -117,12 +135,20 @@
<script>
import debounce from 'lodash.debounce'
import numeral from 'numeral'
import UsersFilter from './components/UsersFilter'
import DropdownActionsMenu from './components/DropdownActionsMenu'
export default {
name: 'Users',
components: {
UsersFilter
UsersFilter,
DropdownActionsMenu
},
data: function() {
return {
selectedUsers: []
}
},
data() {
return {
@ -133,6 +159,9 @@ export default {
loading() {
return this.$store.state.users.loading
},
normalizedUsersCount() {
return numeral(this.$store.state.users.totalUsersCount).format('0a')
},
users() {
return this.$store.state.users.fetchedUsers
},
@ -167,6 +196,9 @@ export default {
activationIcon(status) {
return status ? 'el-icon-error' : 'el-icon-success'
},
clearSelection() {
this.$refs.usersTable.clearSelection()
},
getFirstLetter(str) {
return str.charAt(0).toUpperCase()
},
@ -184,6 +216,9 @@ export default {
this.$store.dispatch('SearchUsers', { query: searchQuery, page })
}
},
handleSelectionChange(value) {
this.$data.selectedUsers = value
},
showAdminAction({ local, id }) {
return local && this.showDeactivatedButton(id)
},
@ -212,6 +247,10 @@ export default {
margin: 7px 0 0 15px;
}
}
.el-dropdown-link:hover {
cursor: pointer;
color: #409EFF;
}
.users-container {
h1 {
margin: 22px 0 0 15px;
@ -231,7 +270,11 @@ export default {
height: 36px;
justify-content: space-between;
align-items: center;
margin: 22px 15px 22px 15px
margin: 22px 15px 15px 15px
}
.user-count {
color: gray;
font-size: 28px;
}
}
@media
@ -241,10 +284,6 @@ only screen and (max-width: 760px),
h1 {
margin: 7px 10px 7px 10px;
}
.el-dropdown-link {
cursor: pointer;
color: #409EFF;
}
.el-icon-arrow-down {
font-size: 12px;
}

331
test/views/users/dropdownMenu.test.js Normal file
View file

@ -0,0 +1,331 @@
import Vuex from 'vuex'
import { mount, createLocalVue, config } from '@vue/test-utils'
import Element from 'element-ui'
import DropdownMenu from '@/views/users/components/DropdownMenu'
import storeConfig from './store.conf'
import { cloneDeep } from 'lodash'
import flushPromises from 'flush-promises'
import { users } from '@/api/__mocks__/users.js'
config.mocks["$t"] = () => {}
const localVue = createLocalVue()
localVue.use(Vuex)
localVue.use(Element)
jest.mock('@/api/users')
describe('Apply users actions to multiple users', () => {
let store
beforeEach(async() => {
store = new Vuex.Store(cloneDeep(storeConfig))
store.dispatch('FetchUsers', { page: 1 })
await flushPromises()
})
it('grants admin rights to multiple users', async (done) => {
const wrapper = mount(DropdownMenu, {
store,
localVue,
sync: false,
propsData: {
selectedUsers: users
}
})
await flushPromises()
const grantRightToMultipleUsersStub = jest.fn()
wrapper.setMethods({ grantRightToMultipleUsers: grantRightToMultipleUsersStub })
wrapper.find(`.el-dropdown-menu__item:nth-child(1)`).trigger('click')
expect(wrapper.vm.grantRightToMultipleUsers).toHaveBeenCalled()
expect(wrapper.vm.grantRightToMultipleUsers).toHaveBeenCalledWith('admin')
const grantRight = wrapper.vm.mappers().grantRight
const user1 = store.state.users.fetchedUsers[0]
const user2 = store.state.users.fetchedUsers[1]
const user3 = store.state.users.fetchedUsers[2]
expect(user1.roles.admin).toBe(true)
expect(user2.roles.admin).toBe(false)
expect(user3.roles.admin).toBe(false)
grantRight('admin')()
await flushPromises()
const updatedUser1 = store.state.users.fetchedUsers[0]
const updatedUser2 = store.state.users.fetchedUsers[1]
const updatedUser3 = store.state.users.fetchedUsers[2]
expect(updatedUser1.roles.admin).toBe(true)
expect(updatedUser2.roles.admin).toBe(false)
expect(updatedUser3.roles.admin).toBe(true)
done()
})
it('grants moderator rights to multiple users', async (done) => {
const wrapper = mount(DropdownMenu, {
store,
localVue,
sync: false,
propsData: {
selectedUsers: users
}
})
await flushPromises()
const grantRightToMultipleUsersStub = jest.fn()
wrapper.setMethods({ grantRightToMultipleUsers: grantRightToMultipleUsersStub })
wrapper.find(`.el-dropdown-menu__item:nth-child(3)`).trigger('click')
expect(wrapper.vm.grantRightToMultipleUsers).toHaveBeenCalled()
expect(wrapper.vm.grantRightToMultipleUsers).toHaveBeenCalledWith('moderator')
const grantRight = wrapper.vm.mappers().grantRight
const user1 = store.state.users.fetchedUsers[0]
const user2 = store.state.users.fetchedUsers[1]
const user3 = store.state.users.fetchedUsers[2]
expect(user1.roles.moderator).toBe(false)
expect(user2.roles.moderator).toBe(false)
expect(user3.roles.moderator).toBe(false)
grantRight('moderator')()
await flushPromises()
const updatedUser1 = store.state.users.fetchedUsers[0]
const updatedUser2 = store.state.users.fetchedUsers[1]
const updatedUser3 = store.state.users.fetchedUsers[2]
expect(updatedUser1.roles.moderator).toBe(true)
expect(updatedUser2.roles.moderator).toBe(false)
expect(updatedUser3.roles.moderator).toBe(true)
done()
})
it('revokes admin rights from multiple users', async (done) => {
const wrapper = mount(DropdownMenu, {
store,
localVue,
sync: false,
propsData: {
selectedUsers: users
}
})
await flushPromises()
const revokeRightFromMultipleUsersStub = jest.fn()
wrapper.setMethods({ revokeRightFromMultipleUsers: revokeRightFromMultipleUsersStub })
wrapper.find(`.el-dropdown-menu__item:nth-child(2)`).trigger('click')
expect(wrapper.vm.revokeRightFromMultipleUsers).toHaveBeenCalled()
expect(wrapper.vm.revokeRightFromMultipleUsers).toHaveBeenCalledWith('admin')
const revokeRight = wrapper.vm.mappers().revokeRight
const user1 = store.state.users.fetchedUsers[0]
const user2 = store.state.users.fetchedUsers[2]
expect(user1.roles.admin).toBe(true)
expect(user2.roles.admin).toBe(false)
revokeRight('admin')()
await flushPromises()
const updatedUser1 = store.state.users.fetchedUsers[0]
const updatedUser2 = store.state.users.fetchedUsers[2]
expect(updatedUser1.roles.admin).toBe(false)
expect(updatedUser2.roles.admin).toBe(false)
done()
})
it('calls a function that revokes moderator rights from multiple users', async (done) => {
const wrapper = mount(DropdownMenu, {
store,
localVue,
sync: false,
propsData: {
selectedUsers: users
}
})
await flushPromises()
const revokeRightFromMultipleUsersStub = jest.fn()
wrapper.setMethods({ revokeRightFromMultipleUsers: revokeRightFromMultipleUsersStub })
wrapper.find(`.el-dropdown-menu__item:nth-child(4)`).trigger('click')
expect(wrapper.vm.revokeRightFromMultipleUsers).toHaveBeenCalled()
expect(wrapper.vm.revokeRightFromMultipleUsers).toHaveBeenCalledWith('moderator')
done()
})
it('activates multiple accounts', async (done) => {
const wrapper = mount(DropdownMenu, {
store,
localVue,
sync: false,
propsData: {
selectedUsers: users
}
})
await flushPromises()
const activateMultipleUsersStub = jest.fn()
wrapper.setMethods({ activateMultipleUsers: activateMultipleUsersStub })
wrapper.find(`.el-dropdown-menu__item:nth-child(5)`).trigger('click')
expect(wrapper.vm.activateMultipleUsers).toHaveBeenCalled()
const activate = wrapper.vm.mappers().activate
const user = store.state.users.fetchedUsers[2]
expect(user.deactivated).toBe(true)
activate()
await flushPromises()
const updatedUser = store.state.users.fetchedUsers[2]
expect(updatedUser.deactivated).toBe(false)
done()
})
it('deactivates multiple accounts', async (done) => {
const wrapper = mount(DropdownMenu, {
store,
localVue,
sync: false,
propsData: {
selectedUsers: users
}
})
await flushPromises()
const deactivateMultipleUsersStub = jest.fn()
wrapper.setMethods({ deactivateMultipleUsers: deactivateMultipleUsersStub })
wrapper.find(`.el-dropdown-menu__item:nth-child(6)`).trigger('click')
expect(wrapper.vm.deactivateMultipleUsers).toHaveBeenCalled()
const deactivate = wrapper.vm.mappers().deactivate
const user1 = store.state.users.fetchedUsers[0]
const user2 = store.state.users.fetchedUsers[1]
expect(user1.deactivated).toBe(false)
expect(user2.deactivated).toBe(false)
deactivate()
await flushPromises()
const updatedUser1 = store.state.users.fetchedUsers[0]
const updatedUser2 = store.state.users.fetchedUsers[1]
expect(updatedUser1.deactivated).toBe(true)
expect(updatedUser2.deactivated).toBe(true)
done()
})
it('deletes multiple accounts', async (done) => {
const wrapper = mount(DropdownMenu, {
store,
localVue,
sync: false,
propsData: {
selectedUsers: users
}
})
await flushPromises()
const deleteMultipleUsersStub = jest.fn()
wrapper.setMethods({ deleteMultipleUsers: deleteMultipleUsersStub })
wrapper.find(`.el-dropdown-menu__item:nth-child(7)`).trigger('click')
expect(wrapper.vm.deleteMultipleUsers).toHaveBeenCalled()
const remove = wrapper.vm.mappers().remove
const user1 = store.state.users.fetchedUsers[0]
const user2 = store.state.users.fetchedUsers[1]
const user3 = store.state.users.fetchedUsers[2]
expect(user1.deactivated).toBe(false)
expect(user2.deactivated).toBe(false)
expect(user3.deactivated).toBe(true)
remove()
await flushPromises()
const updatedUser1 = store.state.users.fetchedUsers[0]
const updatedUser2 = store.state.users.fetchedUsers[1]
const updatedUser3 = store.state.users.fetchedUsers[2]
expect(updatedUser1.deactivated).toBe(true)
expect(updatedUser2.deactivated).toBe(true)
expect(updatedUser3.deactivated).toBe(true)
done()
})
it('applies tags for multiple accounts', async (done) => {
const wrapper = mount(DropdownMenu, {
store,
localVue,
sync: false,
propsData: {
selectedUsers: users
}
})
await flushPromises()
const addTagForMultipleUsersStub = jest.fn()
wrapper.setMethods({ addTagForMultipleUsers: addTagForMultipleUsersStub })
wrapper.find(`.el-dropdown-menu__item:nth-child(8) button:nth-child(1)`).trigger('click')
expect(wrapper.vm.addTagForMultipleUsers).toHaveBeenCalled()
expect(wrapper.vm.addTagForMultipleUsers).toHaveBeenCalledWith('force_nsfw')
wrapper.find(`.el-dropdown-menu__item:nth-child(10) button:nth-child(1)`).trigger('click')
expect(wrapper.vm.addTagForMultipleUsers).toHaveBeenCalled()
expect(wrapper.vm.addTagForMultipleUsers).toHaveBeenCalledWith('force_unlisted')
wrapper.find(`.el-dropdown-menu__item:nth-child(12) button:nth-child(1)`).trigger('click')
expect(wrapper.vm.addTagForMultipleUsers).toHaveBeenCalled()
expect(wrapper.vm.addTagForMultipleUsers).toHaveBeenCalledWith('disable_remote_subscription')
const addTag = wrapper.vm.mappers().addTag
const user1 = store.state.users.fetchedUsers[0]
const user2 = store.state.users.fetchedUsers[1]
expect(user1.tags.length).toBe(0)
expect(user2.tags.length).toBe(1)
addTag('strip_media')()
await flushPromises()
const updatedUser1 = store.state.users.fetchedUsers[0]
const updatedUser2 = store.state.users.fetchedUsers[1]
expect(updatedUser1.tags.length).toBe(1)
expect(updatedUser2.tags.length).toBe(2)
done()
})
it('removes tags from multiple accounts', async (done) => {
const wrapper = mount(DropdownMenu, {
store,
localVue,
sync: false,
propsData: {
selectedUsers: users
}
})
await flushPromises()
const removeTagFromMultipleUsersStub = jest.fn()
wrapper.setMethods({ removeTagFromMultipleUsers: removeTagFromMultipleUsersStub })
wrapper.find(`.el-dropdown-menu__item:nth-child(9) button:nth-child(2)`).trigger('click')
expect(wrapper.vm.removeTagFromMultipleUsers).toHaveBeenCalled()
expect(wrapper.vm.removeTagFromMultipleUsers).toHaveBeenCalledWith('strip_media')
wrapper.find(`.el-dropdown-menu__item:nth-child(11) button:nth-child(2)`).trigger('click')
expect(wrapper.vm.removeTagFromMultipleUsers).toHaveBeenCalled()
expect(wrapper.vm.removeTagFromMultipleUsers).toHaveBeenCalledWith('sandbox')
wrapper.find(`.el-dropdown-menu__item:nth-child(13) button:nth-child(2)`).trigger('click')
expect(wrapper.vm.removeTagFromMultipleUsers).toHaveBeenCalled()
expect(wrapper.vm.removeTagFromMultipleUsers).toHaveBeenCalledWith('disable_any_subscription')
const removeTag = wrapper.vm.mappers().removeTag
const user1 = store.state.users.fetchedUsers[1]
const user2 = store.state.users.fetchedUsers[2]
expect(user1.tags.length).toBe(1)
expect(user2.tags.length).toBe(1)
removeTag('strip_media')()
await flushPromises()
const updatedUser1 = store.state.users.fetchedUsers[1]
const updatedUser2 = store.state.users.fetchedUsers[2]
expect(updatedUser1.tags.length).toBe(1)
expect(updatedUser2.tags.length).toBe(0)
done()
})
})

74
test/views/users/index.test.js
View file

@ -1,5 +1,6 @@
import Vuex from 'vuex'
import { mount, createLocalVue, config } from '@vue/test-utils'
import flushPromises from 'flush-promises'
import Element from 'element-ui'
import Users from '@/views/users/index'
import storeConfig from './store.conf'
@ -8,7 +9,6 @@ import { cloneDeep } from 'lodash'
config.mocks["$t"] = () => {}
config.stubs['users-filter'] = '<div />'
const localVue = createLocalVue()
localVue.use(Vuex)
localVue.use(Element)
@ -25,10 +25,11 @@ describe('Search and filter users', () => {
it('fetches initial list of users', async (done) => {
const wrapper = mount(Users, {
store,
localVue
localVue,
sync: false
})
await wrapper.vm.$nextTick()
await flushPromises()
expect(wrapper.vm.usersCount).toEqual(3)
done()
})
@ -36,24 +37,25 @@ describe('Search and filter users', () => {
it('starts a search on input change', async (done) => {
const wrapper = mount(Users, {
store,
localVue
localVue,
sync: false
})
wrapper.vm.handleDebounceSearchInput = (query) => {
store.dispatch('SearchUsers', { query, page: 1 })
}
await wrapper.vm.$nextTick()
await flushPromises()
expect(wrapper.vm.usersCount).toEqual(3)
const input = wrapper.find('.search input.el-input__inner')
input.element.value = 'bob'
input.trigger('input')
await wrapper.vm.$nextTick()
await flushPromises()
expect(wrapper.vm.usersCount).toEqual(1)
input.element.value = ''
input.trigger('input')
await wrapper.vm.$nextTick()
await flushPromises()
expect(wrapper.vm.usersCount).toEqual(3)
done()
@ -72,18 +74,19 @@ describe('Users actions', () => {
it('grants admin and moderator rights to a local user', async (done) => {
const wrapper = mount(Users, {
store,
localVue
localVue,
sync: false
})
await wrapper.vm.$nextTick()
await flushPromises()
const user = store.state.users.fetchedUsers[2]
expect(user.roles.admin).toBe(false)
expect(user.roles.moderator).toBe(false)
wrapper.find(htmlElement(3, 1)).trigger('click')
await wrapper.vm.$nextTick()
await flushPromises()
wrapper.find(htmlElement(3, 2)).trigger('click')
await wrapper.vm.$nextTick()
await flushPromises()
const updatedUser = store.state.users.fetchedUsers[2]
expect(updatedUser.roles.admin).toBe(true)
@ -94,9 +97,10 @@ describe('Users actions', () => {
it('does not show actions that grant admin and moderator rights to external users', async (done) => {
const wrapper = mount(Users, {
store,
localVue
localVue,
sync: false
})
await wrapper.vm.$nextTick()
await flushPromises()
const dropdownMenuItems = wrapper.findAll(
`.el-table__fixed-body-wrapper table tr:nth-child(2) ul.el-dropdown-menu li`
@ -108,15 +112,16 @@ describe('Users actions', () => {
it('toggles activation status', async (done) => {
const wrapper = mount(Users, {
store,
localVue
localVue,
sync: false
})
await wrapper.vm.$nextTick()
await flushPromises()
const user = store.state.users.fetchedUsers[1]
expect(user.deactivated).toBe(false)
wrapper.find(htmlElement(2, 1)).trigger('click')
await wrapper.vm.$nextTick()
await flushPromises()
const updatedUser = store.state.users.fetchedUsers[1]
expect(updatedUser.deactivated).toBe(true)
@ -126,15 +131,16 @@ describe('Users actions', () => {
it('deactivates user when Delete action is called', async (done) => {
const wrapper = mount(Users, {
store,
localVue
localVue,
sync: false
})
await wrapper.vm.$nextTick()
await flushPromises()
const user = store.state.users.fetchedUsers[1]
expect(user.deactivated).toBe(false)
wrapper.find(htmlElement(2, 2)).trigger('click')
await wrapper.vm.$nextTick()
await flushPromises()
const updatedUser = store.state.users.fetchedUsers[1]
expect(updatedUser.deactivated).toBe(true)
@ -144,9 +150,10 @@ describe('Users actions', () => {
it('adds tags', async (done) => {
const wrapper = mount(Users, {
store,
localVue
localVue,
sync: false
})
await wrapper.vm.$nextTick()
await flushPromises()
const user1 = store.state.users.fetchedUsers[0]
const user2 = store.state.users.fetchedUsers[1]
@ -154,9 +161,9 @@ describe('Users actions', () => {
expect(user2.tags.length).toBe(1)
wrapper.find(htmlElement(1, 5)).trigger('click')
await wrapper.vm.$nextTick()
await flushPromises()
wrapper.find(htmlElement(2, 5)).trigger('click')
await wrapper.vm.$nextTick()
await flushPromises()
const updatedUser1 = store.state.users.fetchedUsers[0]
const updatedUser2 = store.state.users.fetchedUsers[1]
@ -168,15 +175,16 @@ describe('Users actions', () => {
it('deletes tags', async (done) => {
const wrapper = mount(Users, {
store,
localVue
localVue,
sync: false
})
await wrapper.vm.$nextTick()
await flushPromises()
const user = store.state.users.fetchedUsers[1]
expect(user.tags.length).toBe(1)
wrapper.find(htmlElement(2, 6)).trigger('click')
await wrapper.vm.$nextTick()
await flushPromises()
const updatedUser = store.state.users.fetchedUsers[1]
expect(updatedUser.tags.length).toBe(0)
@ -186,14 +194,15 @@ describe('Users actions', () => {
it('shows check icon when tag is added', async (done) => {
const wrapper = mount(Users, {
store,
localVue
localVue,
sync: false
})
await wrapper.vm.$nextTick()
await flushPromises()
expect(wrapper.find(`${htmlElement(1, 5)} i`).exists()).toBe(false)
wrapper.find(htmlElement(1, 5)).trigger('click')
await wrapper.vm.$nextTick()
await flushPromises()
expect(wrapper.find(`${htmlElement(1, 5)} i`).exists()).toBe(true)
done()
@ -202,9 +211,10 @@ describe('Users actions', () => {
it('does not change user index in array when tag is added', async (done) => {
const wrapper = mount(Users, {
store,
localVue
localVue,
sync: false
})
await wrapper.vm.$nextTick()
await flushPromises()
const firstUserNickname = store.state.users.fetchedUsers[0].nickname
const secondUserNickname = store.state.users.fetchedUsers[1].nickname
@ -212,7 +222,7 @@ describe('Users actions', () => {
expect(secondUserNickname).toBe('bob')
wrapper.find(htmlElement(2, 5)).trigger('click')
await wrapper.vm.$nextTick()
await flushPromises()
const firstUserNicknameAfterToggle = store.state.users.fetchedUsers[0].nickname
const secondUserNicknameAfterToggle = store.state.users.fetchedUsers[1].nickname

5
yarn.lock
View file

@ -7024,6 +7024,11 @@ number-is-nan@^1.0.0:
resolved "https://registry.yarnpkg.com/number-is-nan/-/number-is-nan-1.0.1.tgz#097b602b53422a522c1afb8790318336941a011d"
integrity sha1-CXtgK1NCKlIsGvuHkDGDNpQaAR0=
numeral@^2.0.6:
version "2.0.6"
resolved "https://registry.yarnpkg.com/numeral/-/numeral-2.0.6.tgz#4ad080936d443c2561aed9f2197efffe25f4e506"
integrity sha1-StCAk21EPCVhrtnyGX7//iX05QY=
nwsapi@^2.0.7:
version "2.1.1"
resolved "https://registry.yarnpkg.com/nwsapi/-/nwsapi-2.1.1.tgz#08d6d75e69fd791bdea31507ffafe8c843b67e9c"