diff --git a/admin/src/components/CreationFormular.spec.js b/admin/src/components/CreationFormular.spec.js index ed413eefb..cfc23fa26 100644 --- a/admin/src/components/CreationFormular.spec.js +++ b/admin/src/components/CreationFormular.spec.js @@ -41,7 +41,6 @@ const mocks = { const propsData = { type: '', creation: [], - itemsMassCreation: {}, } const now = new Date(Date.now()) diff --git a/admin/src/components/UserTable.spec.js b/admin/src/components/UserTable.spec.js index 4483f2cff..982b65a81 100644 --- a/admin/src/components/UserTable.spec.js +++ b/admin/src/components/UserTable.spec.js @@ -190,11 +190,6 @@ describe('UserTable', () => { }) }) }) - - // it('expect(wrapper.html()).', () => { - // // eslint-disable-next-line no-console - // console.log(wrapper.html()) - // }) }) describe('type UserListSearch', () => { @@ -205,11 +200,6 @@ describe('UserTable', () => { it('has a DIV element with the class.component-user-table', () => { expect(wrapper.find('.component-user-table').exists()).toBeTruthy() }) - - // it('expect(wrapper.html()).', () => { - // // eslint-disable-next-line no-console - // console.log(wrapper.html()) - // }) }) describe('type UserListMassCreation', () => { @@ -220,11 +210,6 @@ describe('UserTable', () => { it('has a DIV element with the class.component-user-table', () => { expect(wrapper.find('.component-user-table').exists()).toBeTruthy() }) - - // it('expect(wrapper.html()).', () => { - // // eslint-disable-next-line no-console - // console.log(wrapper.html()) - // }) }) describe('type PageCreationConfirm', () => { @@ -235,48 +220,6 @@ describe('UserTable', () => { it('has a DIV element with the class.component-user-table', () => { expect(wrapper.find('.component-user-table').exists()).toBeTruthy() }) - - // it('expect(wrapper.html()).', () => { - // // eslint-disable-next-line no-console - // console.log(wrapper.html()) - // }) }) - /** - - - - - - - - */ }) }) diff --git a/admin/src/components/UserTable.vue b/admin/src/components/UserTable.vue index d58dbc7b2..4d14a35cb 100644 --- a/admin/src/components/UserTable.vue +++ b/admin/src/components/UserTable.vue @@ -287,11 +287,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 3de9ba9e4..5ff3daac5 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 @@ -29,6 +28,7 @@ const apolloQueryMock = jest.fn().mockResolvedValue({ }) const toastErrorMock = jest.fn() +const storeCommitMock = jest.fn() const mocks = { $t: jest.fn((t) => t), @@ -39,6 +39,12 @@ const mocks = { $toasted: { error: toastErrorMock, }, + $store: { + commit: storeCommitMock, + state: { + userSelectedInMassCreation: [], + }, + }, } describe('Creation', () => { @@ -50,6 +56,7 @@ describe('Creation', () => { describe('shallowMount', () => { beforeEach(() => { + jest.clearAllMocks() wrapper = Wrapper() }) @@ -59,7 +66,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', () => { @@ -84,121 +99,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', - ) - }) - - 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 itemsMassCreation', () => { - expect(wrapper.vm.itemsMassCreation).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 itemsMassCreation', () => { - expect(wrapper.vm.itemsMassCreation).toEqual([]) - }) - - 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', @@ -207,8 +134,87 @@ 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') }) @@ -216,8 +222,41 @@ describe('Creation', () => { expect(wrapper.vm.itemsMassCreation).toEqual([]) }) - it('adds all items to itemsList', () => { - expect(wrapper.vm.itemsList).toHaveLength(2) + it('commits empty array to userSelectedInMassCreation', () => { + expect(storeCommitMock).toBeCalledWith('setUserSelectedInMassCreation', []) + }) + + it('calls searchUsers', () => { + expect(apolloQueryMock).toBeCalled() + }) + }) + + describe('store has items in userSelectedInMassCreation', () => { + beforeEach(() => { + mocks.$store.state.userSelectedInMassCreation = [ + { + userId: 2, + firstName: 'Benjamin', + lastName: 'Blümchen', + email: 'benjamin@bluemchen.de', + creation: [800, 600, 400], + showDetails: false, + }, + ] + wrapper = Wrapper() + }) + + it('has only one item itemsList', () => { + expect(wrapper.vm.itemsList).toEqual([ + { + userId: 1, + firstName: 'Bibi', + lastName: 'Bloxberg', + email: 'bibi@bloxberg.de', + creation: [200, 400, 600], + showDetails: false, + }, + ]) }) }) @@ -228,12 +267,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 854884053..0e2cb541e 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') }} @@ -66,7 +66,7 @@ export default { return { showArrays: false, itemsList: [], - itemsMassCreation: [], + itemsMassCreation: this.$store.state.userSelectedInMassCreation, radioSelectedMass: '', criteria: '', creation: [null, null, null], @@ -99,34 +99,36 @@ export default { showDetails: false, } }) + if (this.itemsMassCreation.length !== 0) { + const selectedIndices = this.itemsMassCreation.map((item) => item.userId) + this.itemsList = this.itemsList.filter((item) => !selectedIndices.includes(item.userId)) + } }) .catch((error) => { this.$toasted.error(error.message) }) }, - updateItem(e, event) { - let index = 0 - let findArr = {} - - switch (event) { - case 'push': - findArr = this.itemsList.find((item) => e.userId === item.userId) - index = this.itemsList.indexOf(findArr) - this.itemsList.splice(index, 1) - this.itemsMassCreation.push(findArr) - break - case 'remove': - findArr = this.itemsMassCreation.find((item) => e.userId === item.userId) - index = this.itemsMassCreation.indexOf(findArr) - this.itemsMassCreation.splice(index, 1) - this.itemsList.push(findArr) - 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.getUsers() }, }, diff --git a/admin/src/store/store.js b/admin/src/store/store.js index fe5629e19..78fbf21ec 100644 --- a/admin/src/store/store.js +++ b/admin/src/store/store.js @@ -24,6 +24,9 @@ export const mutations = { moderator: (state, moderator) => { state.moderator = moderator }, + setUserSelectedInMassCreation: (state, userSelectedInMassCreation) => { + state.userSelectedInMassCreation = userSelectedInMassCreation + }, } export const actions = { @@ -44,6 +47,7 @@ const store = new Vuex.Store({ token: CONFIG.DEBUG_DISABLE_AUTH ? 'validToken' : null, moderator: null, openCreations: 0, + userSelectedInMassCreation: [], }, // Syncronous mutation of the state mutations, diff --git a/admin/src/store/store.test.js b/admin/src/store/store.test.js index e027ebf1a..5ddb048eb 100644 --- a/admin/src/store/store.test.js +++ b/admin/src/store/store.test.js @@ -10,6 +10,7 @@ const { resetOpenCreations, setOpenCreations, moderator, + setUserSelectedInMassCreation, } = mutations const { logout } = actions @@ -64,6 +65,14 @@ describe('Vuex store', () => { expect(state.openCreations).toEqual(12) }) }) + + describe('setUserSelectedInMassCreation', () => { + it('sets userSelectedInMassCreation to given value', () => { + const state = { userSelectedInMassCreation: [] } + setUserSelectedInMassCreation(state, [0, 1, 2]) + expect(state.userSelectedInMassCreation).toEqual([0, 1, 2]) + }) + }) }) describe('actions', () => {