Update tests for UsersFilter component, check if module actions are called

This commit is contained in:
Angelina Filippova 2021-01-22 22:22:35 +03:00
parent 3ff2c3ae38
commit 3af1869053

View file

@ -2,9 +2,12 @@ import Vuex from 'vuex'
import { mount, createLocalVue, config } from '@vue/test-utils' import { mount, createLocalVue, config } from '@vue/test-utils'
import Element from 'element-ui' import Element from 'element-ui'
import Filters from '@/views/users/components/UsersFilter' import Filters from '@/views/users/components/UsersFilter'
import { storeConfig } from './store.conf'
import { cloneDeep } from 'lodash'
import flushPromises from 'flush-promises' import flushPromises from 'flush-promises'
import app from '@/store/modules/app'
import settings from '@/store/modules/settings'
import user from '@/store/modules/user'
import userProfile from '@/store/modules/userProfile'
import users from '@/store/modules/users'
config.mocks["$t"] = () => {} config.mocks["$t"] = () => {}
config.stubs.transition = false config.stubs.transition = false
@ -20,139 +23,37 @@ jest.mock('@/api/users')
describe('Filters users', () => { describe('Filters users', () => {
let store let store
let actions
beforeEach(async() => { beforeEach(async() => {
store = new Vuex.Store(cloneDeep(storeConfig)) actions = { ...users.actions, ToggleUsersFilter: jest.fn(), ToggleActorTypeFilter: jest.fn() }
store = new Vuex.Store(({
modules: {
app,
settings,
user,
userProfile,
users: { ...users, actions }
},
getters: {}
}))
store.dispatch('FetchUsers', { page: 1 }) store.dispatch('FetchUsers', { page: 1 })
await flushPromises() await flushPromises()
}) })
it('shows local users when "Local" filter is applied', async (done) => { it('enables local and active filters when component is mounted, toggles local filter on button click', () => {
const wrapper = mount(Filters, { const wrapper = mount(Filters, {
store, store,
localVue localVue
}) })
expect(actions.ToggleUsersFilter).toHaveBeenNthCalledWith(1, expect.anything(), ['local', 'active'], undefined)
expect(store.state.users.totalUsersCount).toEqual(6)
const filter = wrapper.find(`li.el-select-dropdown__item:nth-child(${1})`) const filter = wrapper.find(`li.el-select-dropdown__item:nth-child(${1})`)
filter.trigger('click') filter.trigger('click')
await flushPromises()
expect(store.state.users.totalUsersCount).toEqual(5)
done() expect(actions.ToggleUsersFilter).toHaveBeenCalled()
}) expect(actions.ToggleActorTypeFilter).toHaveBeenCalled()
expect(actions.ToggleUsersFilter).toHaveBeenNthCalledWith(2, expect.anything(), ['active'], undefined)
it('shows users with applied filter and search query', async (done) => { expect(actions.ToggleActorTypeFilter).toHaveBeenCalledWith(expect.anything(), [], undefined)
expect(store.state.users.totalUsersCount).toEqual(6)
store.dispatch('ToggleUsersFilter', ['active'])
await flushPromises()
store.dispatch('SearchUsers', { query: 'john', page: 1 })
await flushPromises()
expect(store.state.users.totalUsersCount).toEqual(0)
store.dispatch('SearchUsers', { query: 'allis', page: 1 })
await flushPromises()
expect(store.state.users.totalUsersCount).toEqual(1)
store.dispatch('SearchUsers', { query: '', page: 1 })
await flushPromises()
expect(store.state.users.totalUsersCount).toEqual(5)
done()
})
it('applies two filters', async (done) => {
expect(store.state.users.totalUsersCount).toEqual(6)
store.dispatch('ToggleUsersFilter', ['active', 'local'])
await flushPromises()
expect(store.state.users.totalUsersCount).toEqual(4)
expect(store.state.users.fetchedUsers[0].nickname).toEqual('allis')
store.dispatch('ToggleUsersFilter', ['deactivated', 'external'])
await flushPromises()
expect(store.state.users.totalUsersCount).toEqual(0)
done()
})
it('shows all users after removing filters', async (done) => {
expect(store.state.users.totalUsersCount).toEqual(6)
store.dispatch('ToggleUsersFilter', ['deactivated'])
await flushPromises()
expect(store.state.users.totalUsersCount).toEqual(1)
store.dispatch('ToggleUsersFilter', [])
await flushPromises()
expect(store.state.users.totalUsersCount).toEqual(6)
done()
})
it('applies actor type filter', async (done) => {
expect(store.state.users.totalUsersCount).toEqual(6)
store.dispatch('ToggleActorTypeFilter', ["Person"])
await flushPromises()
expect(store.state.users.totalUsersCount).toEqual(4)
expect(store.state.users.fetchedUsers[0].nickname).toEqual('allis')
store.dispatch('ToggleActorTypeFilter', ["Service"])
await flushPromises()
expect(store.state.users.totalUsersCount).toEqual(1)
expect(store.state.users.fetchedUsers[0].nickname).toEqual('sally')
done()
})
it('shows users with applied actor type filter and search query', async (done) => {
expect(store.state.users.totalUsersCount).toEqual(6)
store.dispatch('ToggleActorTypeFilter', ["Person"])
await flushPromises()
store.dispatch('SearchUsers', { query: 'john', page: 1 })
await flushPromises()
expect(store.state.users.totalUsersCount).toEqual(1)
store.dispatch('SearchUsers', { query: 'bot', page: 1 })
await flushPromises()
expect(store.state.users.totalUsersCount).toEqual(0)
store.dispatch('SearchUsers', { query: '', page: 1 })
await flushPromises()
expect(store.state.users.totalUsersCount).toEqual(4)
done()
})
it('applies two actor type filters', async (done) => {
expect(store.state.users.totalUsersCount).toEqual(6)
store.dispatch('ToggleActorTypeFilter', ["Person", "Service"])
await flushPromises()
expect(store.state.users.totalUsersCount).toEqual(5)
store.dispatch('ToggleActorTypeFilter', ["Service", "Application"])
await flushPromises()
expect(store.state.users.totalUsersCount).toEqual(2)
done()
})
it('shows all users after removing actor type filters', async (done) => {
expect(store.state.users.totalUsersCount).toEqual(6)
store.dispatch('ToggleActorTypeFilter', ["Application"])
await flushPromises()
expect(store.state.users.totalUsersCount).toEqual(1)
store.dispatch('ToggleActorTypeFilter', [])
await flushPromises()
expect(store.state.users.totalUsersCount).toEqual(6)
done()
}) })
}) })