2019-03-22 20:58:58 +00:00
|
|
|
import Vuex from 'vuex'
|
2019-03-22 21:27:31 +00:00
|
|
|
import { mount, createLocalVue, config } from '@vue/test-utils'
|
2019-05-11 22:44:58 +00:00
|
|
|
import flushPromises from 'flush-promises'
|
2019-03-22 20:58:58 +00:00
|
|
|
import Element from 'element-ui'
|
|
|
|
import Users from '@/views/users/index'
|
|
|
|
import storeConfig from './store.conf'
|
|
|
|
import { cloneDeep } from 'lodash'
|
|
|
|
|
2019-03-22 21:27:31 +00:00
|
|
|
config.mocks["$t"] = () => {}
|
2019-03-29 14:25:53 +00:00
|
|
|
config.stubs['users-filter'] = '<div />'
|
|
|
|
|
2019-03-22 20:58:58 +00:00
|
|
|
const localVue = createLocalVue()
|
|
|
|
localVue.use(Vuex)
|
|
|
|
localVue.use(Element)
|
|
|
|
|
|
|
|
jest.mock('@/api/users')
|
|
|
|
|
2019-03-22 21:18:57 +00:00
|
|
|
describe('Search and filter users', () => {
|
2019-03-22 20:58:58 +00:00
|
|
|
let store
|
|
|
|
|
|
|
|
beforeEach(() => {
|
|
|
|
store = new Vuex.Store(cloneDeep(storeConfig))
|
|
|
|
})
|
|
|
|
|
|
|
|
it('fetches initial list of users', async (done) => {
|
|
|
|
const wrapper = mount(Users, {
|
|
|
|
store,
|
2019-05-11 22:44:58 +00:00
|
|
|
localVue,
|
|
|
|
sync: false
|
2019-03-22 20:58:58 +00:00
|
|
|
})
|
|
|
|
|
2019-05-11 22:44:58 +00:00
|
|
|
await flushPromises()
|
2019-03-22 20:58:58 +00:00
|
|
|
expect(wrapper.vm.usersCount).toEqual(3)
|
|
|
|
done()
|
|
|
|
})
|
|
|
|
|
|
|
|
it('starts a search on input change', async (done) => {
|
|
|
|
const wrapper = mount(Users, {
|
|
|
|
store,
|
2019-05-11 22:44:58 +00:00
|
|
|
localVue,
|
|
|
|
sync: false
|
2019-03-22 20:58:58 +00:00
|
|
|
})
|
|
|
|
|
|
|
|
wrapper.vm.handleDebounceSearchInput = (query) => {
|
|
|
|
store.dispatch('SearchUsers', { query, page: 1 })
|
|
|
|
}
|
|
|
|
|
2019-05-11 22:44:58 +00:00
|
|
|
await flushPromises()
|
2019-03-22 20:58:58 +00:00
|
|
|
expect(wrapper.vm.usersCount).toEqual(3)
|
2019-03-29 14:25:53 +00:00
|
|
|
const input = wrapper.find('.search input.el-input__inner')
|
2019-03-22 20:58:58 +00:00
|
|
|
input.element.value = 'bob'
|
|
|
|
input.trigger('input')
|
2019-05-11 22:44:58 +00:00
|
|
|
await flushPromises()
|
2019-03-22 20:58:58 +00:00
|
|
|
expect(wrapper.vm.usersCount).toEqual(1)
|
|
|
|
|
|
|
|
input.element.value = ''
|
|
|
|
input.trigger('input')
|
2019-05-11 22:44:58 +00:00
|
|
|
await flushPromises()
|
2019-03-22 20:58:58 +00:00
|
|
|
expect(wrapper.vm.usersCount).toEqual(3)
|
|
|
|
|
|
|
|
done()
|
|
|
|
})
|
|
|
|
})
|
2019-03-22 21:18:57 +00:00
|
|
|
|
|
|
|
describe('Users actions', () => {
|
|
|
|
let store
|
|
|
|
const htmlElement = (trChild, liChild) =>
|
|
|
|
`.el-table__fixed-body-wrapper table tr:nth-child(${trChild}) ul.el-dropdown-menu li:nth-child(${liChild})`
|
|
|
|
|
|
|
|
beforeEach(() => {
|
|
|
|
store = new Vuex.Store(cloneDeep(storeConfig))
|
|
|
|
})
|
|
|
|
|
|
|
|
it('grants admin and moderator rights to a local user', async (done) => {
|
|
|
|
const wrapper = mount(Users, {
|
|
|
|
store,
|
2019-05-11 22:44:58 +00:00
|
|
|
localVue,
|
|
|
|
sync: false
|
2019-03-22 21:18:57 +00:00
|
|
|
})
|
2019-05-11 22:44:58 +00:00
|
|
|
await flushPromises()
|
2019-03-22 21:18:57 +00:00
|
|
|
|
|
|
|
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')
|
2019-05-11 22:44:58 +00:00
|
|
|
await flushPromises()
|
2019-03-22 21:18:57 +00:00
|
|
|
wrapper.find(htmlElement(3, 2)).trigger('click')
|
2019-05-11 22:44:58 +00:00
|
|
|
await flushPromises()
|
2019-03-22 21:18:57 +00:00
|
|
|
|
|
|
|
const updatedUser = store.state.users.fetchedUsers[2]
|
|
|
|
expect(updatedUser.roles.admin).toBe(true)
|
|
|
|
expect(updatedUser.roles.moderator).toBe(true)
|
|
|
|
done()
|
|
|
|
})
|
|
|
|
|
|
|
|
it('does not show actions that grant admin and moderator rights to external users', async (done) => {
|
|
|
|
const wrapper = mount(Users, {
|
|
|
|
store,
|
2019-05-11 22:44:58 +00:00
|
|
|
localVue,
|
|
|
|
sync: false
|
2019-03-22 21:18:57 +00:00
|
|
|
})
|
2019-05-11 22:44:58 +00:00
|
|
|
await flushPromises()
|
2019-03-22 21:18:57 +00:00
|
|
|
|
2019-03-22 21:27:31 +00:00
|
|
|
const dropdownMenuItems = wrapper.findAll(
|
|
|
|
`.el-table__fixed-body-wrapper table tr:nth-child(2) ul.el-dropdown-menu li`
|
|
|
|
)
|
|
|
|
expect(dropdownMenuItems.length).toBe(6)
|
2019-03-22 21:18:57 +00:00
|
|
|
done()
|
|
|
|
})
|
|
|
|
|
|
|
|
it('toggles activation status', async (done) => {
|
|
|
|
const wrapper = mount(Users, {
|
|
|
|
store,
|
2019-05-11 22:44:58 +00:00
|
|
|
localVue,
|
|
|
|
sync: false
|
2019-03-22 21:18:57 +00:00
|
|
|
})
|
2019-05-11 22:44:58 +00:00
|
|
|
await flushPromises()
|
2019-03-22 21:18:57 +00:00
|
|
|
|
|
|
|
const user = store.state.users.fetchedUsers[1]
|
|
|
|
expect(user.deactivated).toBe(false)
|
|
|
|
|
|
|
|
wrapper.find(htmlElement(2, 1)).trigger('click')
|
2019-05-11 22:44:58 +00:00
|
|
|
await flushPromises()
|
2019-03-22 21:18:57 +00:00
|
|
|
|
|
|
|
const updatedUser = store.state.users.fetchedUsers[1]
|
|
|
|
expect(updatedUser.deactivated).toBe(true)
|
|
|
|
done()
|
|
|
|
})
|
|
|
|
|
|
|
|
it('deactivates user when Delete action is called', async (done) => {
|
|
|
|
const wrapper = mount(Users, {
|
|
|
|
store,
|
2019-05-11 22:44:58 +00:00
|
|
|
localVue,
|
|
|
|
sync: false
|
2019-03-22 21:18:57 +00:00
|
|
|
})
|
2019-05-11 22:44:58 +00:00
|
|
|
await flushPromises()
|
2019-03-22 21:18:57 +00:00
|
|
|
|
|
|
|
const user = store.state.users.fetchedUsers[1]
|
|
|
|
expect(user.deactivated).toBe(false)
|
|
|
|
|
|
|
|
wrapper.find(htmlElement(2, 2)).trigger('click')
|
2019-05-11 22:44:58 +00:00
|
|
|
await flushPromises()
|
2019-03-22 21:18:57 +00:00
|
|
|
|
|
|
|
const updatedUser = store.state.users.fetchedUsers[1]
|
|
|
|
expect(updatedUser.deactivated).toBe(true)
|
|
|
|
done()
|
|
|
|
})
|
|
|
|
|
|
|
|
it('adds tags', async (done) => {
|
|
|
|
const wrapper = mount(Users, {
|
|
|
|
store,
|
2019-05-11 22:44:58 +00:00
|
|
|
localVue,
|
|
|
|
sync: false
|
2019-03-22 21:18:57 +00:00
|
|
|
})
|
2019-05-11 22:44:58 +00:00
|
|
|
await flushPromises()
|
2019-03-22 21:18:57 +00:00
|
|
|
|
|
|
|
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)
|
|
|
|
|
|
|
|
wrapper.find(htmlElement(1, 5)).trigger('click')
|
2019-05-11 22:44:58 +00:00
|
|
|
await flushPromises()
|
2019-03-22 21:18:57 +00:00
|
|
|
wrapper.find(htmlElement(2, 5)).trigger('click')
|
2019-05-11 22:44:58 +00:00
|
|
|
await flushPromises()
|
2019-03-22 21:18:57 +00:00
|
|
|
|
|
|
|
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('deletes tags', async (done) => {
|
|
|
|
const wrapper = mount(Users, {
|
|
|
|
store,
|
2019-05-11 22:44:58 +00:00
|
|
|
localVue,
|
|
|
|
sync: false
|
2019-03-22 21:18:57 +00:00
|
|
|
})
|
2019-05-11 22:44:58 +00:00
|
|
|
await flushPromises()
|
2019-03-22 21:18:57 +00:00
|
|
|
|
|
|
|
const user = store.state.users.fetchedUsers[1]
|
|
|
|
expect(user.tags.length).toBe(1)
|
|
|
|
|
|
|
|
wrapper.find(htmlElement(2, 6)).trigger('click')
|
2019-05-11 22:44:58 +00:00
|
|
|
await flushPromises()
|
2019-03-22 21:18:57 +00:00
|
|
|
|
|
|
|
const updatedUser = store.state.users.fetchedUsers[1]
|
|
|
|
expect(updatedUser.tags.length).toBe(0)
|
|
|
|
done()
|
|
|
|
})
|
|
|
|
|
|
|
|
it('shows check icon when tag is added', async (done) => {
|
|
|
|
const wrapper = mount(Users, {
|
|
|
|
store,
|
2019-05-11 22:44:58 +00:00
|
|
|
localVue,
|
|
|
|
sync: false
|
2019-03-22 21:18:57 +00:00
|
|
|
})
|
2019-05-11 22:44:58 +00:00
|
|
|
await flushPromises()
|
2019-03-22 21:18:57 +00:00
|
|
|
|
|
|
|
expect(wrapper.find(`${htmlElement(1, 5)} i`).exists()).toBe(false)
|
|
|
|
|
|
|
|
wrapper.find(htmlElement(1, 5)).trigger('click')
|
2019-05-11 22:44:58 +00:00
|
|
|
await flushPromises()
|
2019-03-22 21:18:57 +00:00
|
|
|
|
|
|
|
expect(wrapper.find(`${htmlElement(1, 5)} i`).exists()).toBe(true)
|
|
|
|
done()
|
|
|
|
})
|
|
|
|
|
|
|
|
it('does not change user index in array when tag is added', async (done) => {
|
|
|
|
const wrapper = mount(Users, {
|
|
|
|
store,
|
2019-05-11 22:44:58 +00:00
|
|
|
localVue,
|
|
|
|
sync: false
|
2019-03-22 21:18:57 +00:00
|
|
|
})
|
2019-05-11 22:44:58 +00:00
|
|
|
await flushPromises()
|
2019-03-22 21:18:57 +00:00
|
|
|
|
|
|
|
const firstUserNickname = store.state.users.fetchedUsers[0].nickname
|
|
|
|
const secondUserNickname = store.state.users.fetchedUsers[1].nickname
|
|
|
|
expect(firstUserNickname).toBe('allis')
|
|
|
|
expect(secondUserNickname).toBe('bob')
|
|
|
|
|
|
|
|
wrapper.find(htmlElement(2, 5)).trigger('click')
|
2019-05-11 22:44:58 +00:00
|
|
|
await flushPromises()
|
2019-03-22 21:18:57 +00:00
|
|
|
|
|
|
|
const firstUserNicknameAfterToggle = store.state.users.fetchedUsers[0].nickname
|
|
|
|
const secondUserNicknameAfterToggle = store.state.users.fetchedUsers[1].nickname
|
|
|
|
|
|
|
|
expect(firstUserNicknameAfterToggle).toEqual('allis')
|
|
|
|
expect(secondUserNicknameAfterToggle).toEqual('bob')
|
|
|
|
done()
|
|
|
|
})
|
|
|
|
})
|