diff --git a/admin/src/components/UserTable.vue b/admin/src/components/UserTable.vue index c0c288e25..7f33d6f02 100644 --- a/admin/src/components/UserTable.vue +++ b/admin/src/components/UserTable.vue @@ -284,11 +284,11 @@ export default { this.overlay = false }, bookmarkPush(item) { - this.$emit('update-item', item, 'push') + this.$emit('push-item', item) }, bookmarkRemove(item) { if (this.type === 'UserListMassCreation') { - this.$emit('update-item', item, 'remove') + this.$emit('remove-item', item) } if (this.type === 'PageCreationConfirm') { diff --git a/admin/src/pages/Creation.spec.js b/admin/src/pages/Creation.spec.js index fe8d79e52..9dd784097 100644 --- a/admin/src/pages/Creation.spec.js +++ b/admin/src/pages/Creation.spec.js @@ -1,6 +1,5 @@ import { shallowMount } from '@vue/test-utils' import Creation from './Creation.vue' -import Vue from 'vue' const localVue = global.localVue @@ -66,6 +65,7 @@ describe('Creation', () => { describe('shallowMount', () => { beforeEach(() => { + jest.clearAllMocks() wrapper = Wrapper() }) @@ -75,7 +75,15 @@ describe('Creation', () => { describe('apollo returns user array', () => { it('calls the searchUser query', () => { - expect(apolloQueryMock).toBeCalled() + expect(apolloQueryMock).toBeCalledWith( + expect.objectContaining({ + variables: { + searchText: '', + currentPage: 1, + pageSize: 25, + }, + }), + ) }) it('sets the data of itemsList', () => { @@ -100,151 +108,33 @@ describe('Creation', () => { }) }) - describe('update item', () => { + describe('push item', () => { beforeEach(() => { - jest.clearAllMocks() - }) - - describe('push', () => { - beforeEach(() => { - wrapper.findComponent({ name: 'UserTable' }).vm.$emit( - 'update-item', - { - userId: 2, - firstName: 'Benjamin', - lastName: 'Blümchen', - email: 'benjamin@bluemchen.de', - creation: [800, 600, 400], - showDetails: false, - }, - 'push', - ) - }) - beforeEach(() => { - mocks.$store.state.setUserSelectedInMassCreation = [ - { - userId: 2, - firstName: 'Benjamin', - lastName: 'Blümchen', - email: 'benjamin@bluemchen.de', - creation: [800, 600, 400], - showDetails: false, - }, - ] - }) - it('removes the pushed item from itemsList', () => { - expect(wrapper.vm.itemsList).toEqual([ - { - userId: 1, - firstName: 'Bibi', - lastName: 'Bloxberg', - email: 'bibi@bloxberg.de', - creation: [200, 400, 600], - showDetails: false, - }, - ]) - }) - - it('adds the pushed item to userSelectedInMassCreation', () => { - expect(storeCommitMock).toBeCalledWith('userSelectedInMassCreation', [ - { - userId: 2, - firstName: 'Benjamin', - lastName: 'Blümchen', - email: 'benjamin@bluemchen.de', - creation: [800, 600, 400], - showDetails: false, - }, - ]) - // expect(wrapper.vm.userSelectedInMassCreation).toEqual([ - // { - // userId: 2, - // firstName: 'Benjamin', - // lastName: 'Blümchen', - // email: 'benjamin@bluemchen.de', - // creation: [800, 600, 400], - // showDetails: false, - // }, - // ]) - }) - - describe('remove', () => { - beforeEach(() => { - wrapper.findComponent({ name: 'UserTable' }).vm.$emit( - 'update-item', - { - userId: 2, - firstName: 'Benjamin', - lastName: 'Blümchen', - email: 'benjamin@bluemchen.de', - creation: [800, 600, 400], - showDetails: false, - }, - 'remove', - ) - }) - - it('removes the item from userSelectedInMassCreation', () => { - expect(storeCommitMock).toBeCalledWith('setUserSelectedInMassCreation', [ - { - userId: 2, - firstName: 'Benjamin', - lastName: 'Blümchen', - email: 'benjamin@bluemchen.de', - creation: [800, 600, 400], - showDetails: false, - }, - ]) - }) - - it('adds the item to itemsList', () => { - expect(wrapper.vm.itemsList).toEqual([ - { - userId: 1, - firstName: 'Bibi', - lastName: 'Bloxberg', - email: 'bibi@bloxberg.de', - creation: [200, 400, 600], - showDetails: false, - }, - { - userId: 2, - firstName: 'Benjamin', - lastName: 'Blümchen', - email: 'benjamin@bluemchen.de', - creation: [800, 600, 400], - showDetails: false, - }, - ]) - }) + wrapper.findComponent({ name: 'UserTable' }).vm.$emit('push-item', { + userId: 2, + firstName: 'Benjamin', + lastName: 'Blümchen', + email: 'benjamin@bluemchen.de', + creation: [800, 600, 400], + showDetails: false, }) }) - describe('error', () => { - const consoleErrorMock = jest.fn() - const warnHandler = Vue.config.warnHandler - - beforeEach(() => { - Vue.config.warnHandler = (w) => {} - // eslint-disable-next-line no-console - console.error = consoleErrorMock - wrapper.findComponent({ name: 'UserTable' }).vm.$emit('update-item', {}, 'no-rule') - }) - - afterEach(() => { - Vue.config.warnHandler = warnHandler - }) - - it('throws an error', () => { - expect(consoleErrorMock).toBeCalledWith(expect.objectContaining({ message: 'no-rule' })) - }) + it('removes the pushed item from itemsList', () => { + expect(wrapper.vm.itemsList).toEqual([ + { + userId: 1, + firstName: 'Bibi', + lastName: 'Bloxberg', + email: 'bibi@bloxberg.de', + creation: [200, 400, 600], + showDetails: false, + }, + ]) }) - }) - describe('remove all bookmarks', () => { - beforeEach(async () => { - await wrapper.findComponent({ name: 'UserTable' }).vm.$emit( - 'update-item', + it('adds the pushed item to itemsMassCreation', () => { + expect(wrapper.vm.itemsMassCreation).toEqual([ { userId: 2, firstName: 'Benjamin', @@ -253,17 +143,100 @@ describe('Creation', () => { creation: [800, 600, 400], showDetails: false, }, - 'push', - ) + ]) + }) + + it('updates userSelectedInMassCreation in store', () => { + expect(storeCommitMock).toBeCalledWith('setUserSelectedInMassCreation', [ + { + userId: 2, + firstName: 'Benjamin', + lastName: 'Blümchen', + email: 'benjamin@bluemchen.de', + creation: [800, 600, 400], + showDetails: false, + }, + ]) + }) + }) + + describe('remove item', () => { + beforeEach(async () => { + await wrapper.findComponent({ name: 'UserTable' }).vm.$emit('push-item', { + userId: 2, + firstName: 'Benjamin', + lastName: 'Blümchen', + email: 'benjamin@bluemchen.de', + creation: [800, 600, 400], + showDetails: false, + }) + await wrapper + .findAllComponents({ name: 'UserTable' }) + .at(1) + .vm.$emit('remove-item', { + userId: 2, + firstName: 'Benjamin', + lastName: 'Blümchen', + email: 'benjamin@bluemchen.de', + creation: [800, 600, 400], + showDetails: false, + }) + }) + + it('adds the removed item to itemsList', () => { + expect(wrapper.vm.itemsList).toEqual([ + { + userId: 2, + firstName: 'Benjamin', + lastName: 'Blümchen', + email: 'benjamin@bluemchen.de', + creation: [800, 600, 400], + showDetails: false, + }, + { + userId: 1, + firstName: 'Bibi', + lastName: 'Bloxberg', + email: 'bibi@bloxberg.de', + creation: [200, 400, 600], + showDetails: false, + }, + ]) + }) + + it('removes the item from itemsMassCreation', () => { + expect(wrapper.vm.itemsMassCreation).toEqual([]) + }) + + it('commits empty array as userSelectedInMassCreation', () => { + expect(storeCommitMock).toBeCalledWith('setUserSelectedInMassCreation', []) + }) + }) + + describe('remove all bookmarks', () => { + beforeEach(async () => { + await wrapper.findComponent({ name: 'UserTable' }).vm.$emit('push-item', { + userId: 2, + firstName: 'Benjamin', + lastName: 'Blümchen', + email: 'benjamin@bluemchen.de', + creation: [800, 600, 400], + showDetails: false, + }) + jest.clearAllMocks() wrapper.findComponent({ name: 'CreationFormular' }).vm.$emit('remove-all-bookmark') }) - it('removes all items from userSelectedInMassCreation', () => { + it('removes all items from itemsMassCreation', () => { + expect(wrapper.vm.itemsMassCreation).toEqual([]) + }) + + it('commits empty array to userSelectedInMassCreation', () => { expect(storeCommitMock).toBeCalledWith('setUserSelectedInMassCreation', []) }) - it('adds all items to itemsList', () => { - expect(wrapper.vm.itemsList).toHaveLength(2) + it('calls searchUsers', () => { + expect(apolloQueryMock).toBeCalled() }) }) @@ -274,12 +247,28 @@ describe('Creation', () => { it('calls API when criteria changes', async () => { await wrapper.setData({ criteria: 'XX' }) - expect(apolloQueryMock).toBeCalled() + expect(apolloQueryMock).toBeCalledWith( + expect.objectContaining({ + variables: { + searchText: 'XX', + currentPage: 1, + pageSize: 25, + }, + }), + ) }) it('calls API when currentPage changes', async () => { await wrapper.setData({ currentPage: 2 }) - expect(apolloQueryMock).toBeCalled() + expect(apolloQueryMock).toBeCalledWith( + expect.objectContaining({ + variables: { + searchText: '', + currentPage: 2, + pageSize: 25, + }, + }), + ) }) }) diff --git a/admin/src/pages/Creation.vue b/admin/src/pages/Creation.vue index 28549212e..2be2de5c0 100644 --- a/admin/src/pages/Creation.vue +++ b/admin/src/pages/Creation.vue @@ -16,7 +16,7 @@ :fieldsTable="Searchfields" :criteria="criteria" :creation="creation" - @update-item="updateItem" + @push-item="pushItem" />
{{ $t('multiple_creation_text') }} @@ -113,7 +113,7 @@ export default { perPage: 25, } }, - async mounted() { + async created() { await this.getUsers() }, methods: { @@ -136,7 +136,7 @@ export default { showDetails: false, } }) - if (this.itemsMassCreation !== []) { + if (this.itemsMassCreation.length !== 0) { const selectedIndices = this.itemsMassCreation.map((item) => item.userId) this.itemsList = this.itemsList.filter((item) => !selectedIndices.includes(item.userId)) } @@ -145,39 +145,30 @@ export default { this.$toasted.error(error.message) }) }, - updateItem(selectedItem, event) { - switch (event) { - case 'push': - this.itemsMassCreation.push( - this.itemsList.find((item) => selectedItem.userId === item.userId), - ) - this.itemsList = this.itemsList.filter((item) => selectedItem.userId !== item.userId) - break - case 'remove': - this.itemsList.push( - this.itemsMassCreation.find((item) => selectedItem.userId === item.userId), - ) - this.itemsMassCreation = this.itemsMassCreation.filter( - (item) => selectedItem.userId !== item.userId, - ) - break - default: - throw new Error(event) - } + pushItem(selectedItem) { + this.itemsMassCreation = [ + this.itemsList.find((item) => selectedItem.userId === item.userId), + ...this.itemsMassCreation, + ] + this.itemsList = this.itemsList.filter((item) => selectedItem.userId !== item.userId) + this.$store.commit('setUserSelectedInMassCreation', this.itemsMassCreation) + }, + removeItem(selectedItem) { + this.itemsList = [ + this.itemsMassCreation.find((item) => selectedItem.userId === item.userId), + ...this.itemsList, + ] + this.itemsMassCreation = this.itemsMassCreation.filter( + (item) => selectedItem.userId !== item.userId, + ) this.$store.commit('setUserSelectedInMassCreation', this.itemsMassCreation) }, removeAllBookmark() { this.itemsMassCreation = [] - this.$store.commit('setUserSelectedInMassCreation', this.itemsMassCreation) + this.$store.commit('setUserSelectedInMassCreation', []) this.getUsers() }, }, - computed: { - itemsMassCreationReverse() { - const array = this.itemsMassCreation - return array.reverse() - }, - }, watch: { currentPage() { this.getUsers()