From c4334ace0df76faf6d490ba062c96f62d6647979 Mon Sep 17 00:00:00 2001 From: ogerly Date: Sat, 29 Jan 2022 13:23:57 +0100 Subject: [PATCH 1/9] reverse array for selected user for table multi creation --- admin/src/pages/Creation.vue | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/admin/src/pages/Creation.vue b/admin/src/pages/Creation.vue index 11b098ba4..ba7b3f0d1 100644 --- a/admin/src/pages/Creation.vue +++ b/admin/src/pages/Creation.vue @@ -31,7 +31,7 @@ v-show="itemsMassCreation.length > 0" class="shadow p-3 mb-5 bg-white rounded" type="UserListMassCreation" - :itemsUser="itemsMassCreation" + :itemsUser="itemsMassCreationReverse" :fieldsTable="fields" :criteria="null" :creation="creation" @@ -105,6 +105,7 @@ export default { ], itemsList: [], itemsMassCreation: [], + itemsMassCreationReverse: [], radioSelectedMass: '', criteria: '', creation: [null, null, null], @@ -161,6 +162,8 @@ export default { default: throw new Error(event) } + this.itemsMassCreationReverse = this.itemsMassCreation + this.itemsMassCreationReverse.reverse() }, removeAllBookmark() { this.itemsMassCreation = [] From b2cb072c04abfed96869ea0e6a5528a78fb43732 Mon Sep 17 00:00:00 2001 From: ogerly Date: Sun, 30 Jan 2022 10:00:29 +0100 Subject: [PATCH 2/9] cache for selected users in multiple creation --- admin/src/components/CreationFormular.spec.js | 2 +- admin/src/components/UserTable.spec.js | 57 ------------------- admin/src/pages/Creation.spec.js | 12 ++-- admin/src/pages/Creation.vue | 36 ++++++++---- admin/src/router/routes.js | 1 + 5 files changed, 33 insertions(+), 75 deletions(-) diff --git a/admin/src/components/CreationFormular.spec.js b/admin/src/components/CreationFormular.spec.js index b3807b16f..27e942501 100644 --- a/admin/src/components/CreationFormular.spec.js +++ b/admin/src/components/CreationFormular.spec.js @@ -56,7 +56,7 @@ const mocks = { const propsData = { type: '', creation: [], - itemsMassCreation: {}, + userSelectedInMassCreation: {}, } describe('CreationFormular', () => { diff --git a/admin/src/components/UserTable.spec.js b/admin/src/components/UserTable.spec.js index 4910c7e80..1136fe82a 100644 --- a/admin/src/components/UserTable.spec.js +++ b/admin/src/components/UserTable.spec.js @@ -199,11 +199,6 @@ describe('UserTable', () => { }) }) }) - - // it('expect(wrapper.html()).', () => { - // // eslint-disable-next-line no-console - // console.log(wrapper.html()) - // }) }) describe('type UserListSearch', () => { @@ -214,11 +209,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', () => { @@ -229,11 +219,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', () => { @@ -244,48 +229,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/pages/Creation.spec.js b/admin/src/pages/Creation.spec.js index 01a884f54..dc2fa90df 100644 --- a/admin/src/pages/Creation.spec.js +++ b/admin/src/pages/Creation.spec.js @@ -127,8 +127,8 @@ describe('Creation', () => { ]) }) - it('adds the pushed item to itemsMassCreation', () => { - expect(wrapper.vm.itemsMassCreation).toEqual([ + it('adds the pushed item to userSelectedInMassCreation', () => { + expect(wrapper.vm.userSelectedInMassCreation).toEqual([ { userId: 2, firstName: 'Benjamin', @@ -156,8 +156,8 @@ describe('Creation', () => { ) }) - it('removes the item from itemsMassCreation', () => { - expect(wrapper.vm.itemsMassCreation).toEqual([]) + it('removes the item from userSelectedInMassCreation', () => { + expect(wrapper.vm.userSelectedInMassCreation).toEqual([]) }) it('adds the item to itemsList', () => { @@ -221,8 +221,8 @@ describe('Creation', () => { wrapper.findComponent({ name: 'CreationFormular' }).vm.$emit('remove-all-bookmark') }) - it('removes all items from itemsMassCreation', () => { - expect(wrapper.vm.itemsMassCreation).toEqual([]) + it('removes all items from userSelectedInMassCreation', () => { + expect(wrapper.vm.userSelectedInMassCreation).toEqual([]) }) it('adds all items to itemsList', () => { diff --git a/admin/src/pages/Creation.vue b/admin/src/pages/Creation.vue index ba7b3f0d1..6fb2e0ac3 100644 --- a/admin/src/pages/Creation.vue +++ b/admin/src/pages/Creation.vue @@ -28,7 +28,7 @@ -
+
+ userSelectedInMassCreation: {{ userSelectedInMassCreation }} +
{{ $t('multiple_creation_text') }}
@@ -62,6 +64,11 @@ export default { CreationFormular, UserTable, }, + props: { + userSelectedInMassCreation: { + type: Array, + }, + }, data() { return { showArrays: false, @@ -104,8 +111,7 @@ export default { { key: 'bookmark', label: this.$t('remove') }, ], itemsList: [], - itemsMassCreation: [], - itemsMassCreationReverse: [], + itemsMassCreationReverse: this.userSelectedInMassCreation, radioSelectedMass: '', criteria: '', creation: [null, null, null], @@ -137,6 +143,7 @@ export default { showDetails: false, } }) + this.updateItem(this.userSelectedInMassCreation, 'mounted') }) .catch((error) => { this.$toasted.error(error.message) @@ -151,22 +158,29 @@ export default { findArr = this.itemsList.find((item) => e.userId === item.userId) index = this.itemsList.indexOf(findArr) this.itemsList.splice(index, 1) - this.itemsMassCreation.push(findArr) + this.userSelectedInMassCreation.push(findArr) break case 'remove': - findArr = this.itemsMassCreation.find((item) => e.userId === item.userId) - index = this.itemsMassCreation.indexOf(findArr) - this.itemsMassCreation.splice(index, 1) + findArr = this.userSelectedInMassCreation.find((item) => e.userId === item.userId) + index = this.userSelectedInMassCreation.indexOf(findArr) + this.userSelectedInMassCreation.splice(index, 1) this.itemsList.push(findArr) break + case 'mounted': + this.userSelectedInMassCreation.map((value, key) => { + findArr = this.itemsList.find((item) => value.userId === item.userId) + index = this.itemsList.indexOf(findArr) + this.itemsList.splice(index, 1) + }) + break default: throw new Error(event) } - this.itemsMassCreationReverse = this.itemsMassCreation + this.itemsMassCreationReverse = this.userSelectedInMassCreation this.itemsMassCreationReverse.reverse() }, removeAllBookmark() { - this.itemsMassCreation = [] + this.userSelectedInMassCreation = [] this.getUsers() }, }, diff --git a/admin/src/router/routes.js b/admin/src/router/routes.js index 72e7b1ac5..2d7667329 100644 --- a/admin/src/router/routes.js +++ b/admin/src/router/routes.js @@ -18,6 +18,7 @@ const routes = [ { path: '/creation', component: () => import('@/pages/Creation.vue'), + props: { userSelectedInMassCreation: [] }, }, { path: '/creation-confirm', From 8e5bdcfba10061a7290b320a10c355416921c7af Mon Sep 17 00:00:00 2001 From: ogerly Date: Sun, 30 Jan 2022 10:15:09 +0100 Subject: [PATCH 3/9] remove unused code, yarn lint test not ok --- admin/src/pages/Creation.vue | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/admin/src/pages/Creation.vue b/admin/src/pages/Creation.vue index 6fb2e0ac3..dc7e5ad1c 100644 --- a/admin/src/pages/Creation.vue +++ b/admin/src/pages/Creation.vue @@ -38,8 +38,6 @@ @update-item="updateItem" />
- userSelectedInMassCreation: {{ userSelectedInMassCreation }} -
{{ $t('multiple_creation_text') }}
{ this.$toasted.error(error.message) From e3449fd2d160ab1d6e4b132ea7f2ecec4d654145 Mon Sep 17 00:00:00 2001 From: ogerly Date: Mon, 31 Jan 2022 16:27:34 +0100 Subject: [PATCH 4/9] remove userSelectedInMassCreation from router and add in store --- admin/src/pages/Creation.vue | 33 ++++++++++++++++----------------- admin/src/router/routes.js | 1 - admin/src/store/store.js | 7 +++++++ 3 files changed, 23 insertions(+), 18 deletions(-) diff --git a/admin/src/pages/Creation.vue b/admin/src/pages/Creation.vue index dc7e5ad1c..6881aecba 100644 --- a/admin/src/pages/Creation.vue +++ b/admin/src/pages/Creation.vue @@ -28,7 +28,7 @@ -
+
{{ $t('multiple_creation_text') }}
@@ -62,11 +62,6 @@ export default { CreationFormular, UserTable, }, - props: { - userSelectedInMassCreation: { - type: Array, - }, - }, data() { return { showArrays: false, @@ -109,7 +104,7 @@ export default { { key: 'bookmark', label: this.$t('remove') }, ], itemsList: [], - itemsMassCreationReverse: this.userSelectedInMassCreation, + itemsMassCreationReverse: [], radioSelectedMass: '', criteria: '', creation: [null, null, null], @@ -141,7 +136,7 @@ export default { showDetails: false, } }) - this.updateItem(this.userSelectedInMassCreation, 'mounted') + this.updateItem(this.$store.state.userSelectedInMassCreation, 'mounted') }) .catch((error) => { this.$toasted.error(error.message) @@ -150,22 +145,24 @@ export default { updateItem(e, event) { let index = 0 let findArr = {} + const letItemList = this.$store.state.userSelectedInMassCreation switch (event) { case 'push': findArr = this.itemsList.find((item) => e.userId === item.userId) index = this.itemsList.indexOf(findArr) this.itemsList.splice(index, 1) - this.userSelectedInMassCreation.push(findArr) + letItemList.push(findArr) break case 'remove': - findArr = this.userSelectedInMassCreation.find((item) => e.userId === item.userId) - index = this.userSelectedInMassCreation.indexOf(findArr) - this.userSelectedInMassCreation.splice(index, 1) + findArr = letItemList.find((item) => e.userId === item.userId) + index = letItemList.indexOf(findArr) + letItemList.splice(index, 1) this.itemsList.push(findArr) break case 'mounted': - this.userSelectedInMassCreation.map((value, key) => { + if (this.$store.state.userSelectedInMassCreation === []) return + letItemList.forEach((value, key) => { findArr = this.itemsList.find((item) => value.userId === item.userId) index = this.itemsList.indexOf(findArr) this.itemsList.splice(index, 1) @@ -174,11 +171,13 @@ export default { default: throw new Error(event) } - this.itemsMassCreationReverse = this.userSelectedInMassCreation + this.lala = letItemList + this.itemsMassCreationReverse = letItemList this.itemsMassCreationReverse.reverse() + this.$store.commit('userSelectedInMassCreation', letItemList) }, removeAllBookmark() { - this.userSelectedInMassCreation = [] + this.$store.commit('userSelectedInMassCreation', []) this.getUsers() }, }, diff --git a/admin/src/router/routes.js b/admin/src/router/routes.js index 2d7667329..72e7b1ac5 100644 --- a/admin/src/router/routes.js +++ b/admin/src/router/routes.js @@ -18,7 +18,6 @@ const routes = [ { path: '/creation', component: () => import('@/pages/Creation.vue'), - props: { userSelectedInMassCreation: [] }, }, { path: '/creation-confirm', diff --git a/admin/src/store/store.js b/admin/src/store/store.js index fe5629e19..5a7ba2e91 100644 --- a/admin/src/store/store.js +++ b/admin/src/store/store.js @@ -24,9 +24,15 @@ export const mutations = { moderator: (state, moderator) => { state.moderator = moderator }, + userSelectedInMassCreation: (state, userSelectedInMassCreation) => { + state.userSelectedInMassCreation = userSelectedInMassCreation + }, } export const actions = { + login: ({ dispatch, commit }, data) => { + commit('userSelectedInMassCreation', data) + }, logout: ({ commit, state }) => { commit('token', null) commit('moderator', null) @@ -44,6 +50,7 @@ const store = new Vuex.Store({ token: CONFIG.DEBUG_DISABLE_AUTH ? 'validToken' : null, moderator: null, openCreations: 0, + userSelectedInMassCreation: [], }, // Syncronous mutation of the state mutations, From 84509ef024a593ba060e69cb53c23ecd6821ec68 Mon Sep 17 00:00:00 2001 From: ogerly Date: Tue, 1 Feb 2022 09:48:22 +0100 Subject: [PATCH 5/9] rename commit in store to setUserSelectedInMassCreation --- admin/src/components/CreationFormular.spec.js | 1 - admin/src/pages/Creation.spec.js | 45 +++++++++++++++++-- admin/src/pages/Creation.vue | 4 +- admin/src/store/store.js | 5 +-- 4 files changed, 44 insertions(+), 11 deletions(-) diff --git a/admin/src/components/CreationFormular.spec.js b/admin/src/components/CreationFormular.spec.js index 27e942501..774eadf86 100644 --- a/admin/src/components/CreationFormular.spec.js +++ b/admin/src/components/CreationFormular.spec.js @@ -56,7 +56,6 @@ const mocks = { const propsData = { type: '', creation: [], - userSelectedInMassCreation: {}, } describe('CreationFormular', () => { diff --git a/admin/src/pages/Creation.spec.js b/admin/src/pages/Creation.spec.js index dc2fa90df..fe8d79e52 100644 --- a/admin/src/pages/Creation.spec.js +++ b/admin/src/pages/Creation.spec.js @@ -29,6 +29,7 @@ const apolloQueryMock = jest.fn().mockResolvedValue({ }) const toastErrorMock = jest.fn() +const storeCommitMock = jest.fn() const mocks = { $t: jest.fn((t) => t), @@ -48,6 +49,12 @@ const mocks = { }), } }), + $store: { + commit: storeCommitMock, + state: { + userSelectedInMassCreation: [], + }, + }, } describe('Creation', () => { @@ -113,7 +120,18 @@ describe('Creation', () => { '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([ { @@ -128,7 +146,7 @@ describe('Creation', () => { }) it('adds the pushed item to userSelectedInMassCreation', () => { - expect(wrapper.vm.userSelectedInMassCreation).toEqual([ + expect(storeCommitMock).toBeCalledWith('userSelectedInMassCreation', [ { userId: 2, firstName: 'Benjamin', @@ -138,6 +156,16 @@ describe('Creation', () => { 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', () => { @@ -157,7 +185,16 @@ describe('Creation', () => { }) it('removes the item from userSelectedInMassCreation', () => { - expect(wrapper.vm.userSelectedInMassCreation).toEqual([]) + 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', () => { @@ -222,7 +259,7 @@ describe('Creation', () => { }) it('removes all items from userSelectedInMassCreation', () => { - expect(wrapper.vm.userSelectedInMassCreation).toEqual([]) + expect(storeCommitMock).toBeCalledWith('setUserSelectedInMassCreation', []) }) it('adds all items to itemsList', () => { diff --git a/admin/src/pages/Creation.vue b/admin/src/pages/Creation.vue index 6881aecba..68005d815 100644 --- a/admin/src/pages/Creation.vue +++ b/admin/src/pages/Creation.vue @@ -174,10 +174,10 @@ export default { this.lala = letItemList this.itemsMassCreationReverse = letItemList this.itemsMassCreationReverse.reverse() - this.$store.commit('userSelectedInMassCreation', letItemList) + this.$store.commit('setUserSelectedInMassCreation', letItemList) }, removeAllBookmark() { - this.$store.commit('userSelectedInMassCreation', []) + this.$store.commit('setUserSelectedInMassCreation', []) this.getUsers() }, }, diff --git a/admin/src/store/store.js b/admin/src/store/store.js index 5a7ba2e91..78fbf21ec 100644 --- a/admin/src/store/store.js +++ b/admin/src/store/store.js @@ -24,15 +24,12 @@ export const mutations = { moderator: (state, moderator) => { state.moderator = moderator }, - userSelectedInMassCreation: (state, userSelectedInMassCreation) => { + setUserSelectedInMassCreation: (state, userSelectedInMassCreation) => { state.userSelectedInMassCreation = userSelectedInMassCreation }, } export const actions = { - login: ({ dispatch, commit }, data) => { - commit('userSelectedInMassCreation', data) - }, logout: ({ commit, state }) => { commit('token', null) commit('moderator', null) From 932ce8022a1fdcf416a48f43ceca5e34eb6c1538 Mon Sep 17 00:00:00 2001 From: Moriz Wahl Date: Tue, 1 Feb 2022 13:02:03 +0100 Subject: [PATCH 6/9] test setUserSelectedInMassCreation --- admin/src/store/store.test.js | 9 +++++++++ 1 file changed, 9 insertions(+) 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', () => { From bf239b14769864c549c043a34842340ee70ee25a Mon Sep 17 00:00:00 2001 From: Moriz Wahl Date: Tue, 1 Feb 2022 14:01:50 +0100 Subject: [PATCH 7/9] refactoring --- admin/src/pages/Creation.vue | 61 +++++++++++++++++------------------- 1 file changed, 29 insertions(+), 32 deletions(-) diff --git a/admin/src/pages/Creation.vue b/admin/src/pages/Creation.vue index 68005d815..28549212e 100644 --- a/admin/src/pages/Creation.vue +++ b/admin/src/pages/Creation.vue @@ -28,7 +28,7 @@ -
+
{{ $t('multiple_creation_text') }}
@@ -104,7 +104,7 @@ export default { { key: 'bookmark', label: this.$t('remove') }, ], itemsList: [], - itemsMassCreationReverse: [], + itemsMassCreation: this.$store.state.userSelectedInMassCreation, radioSelectedMass: '', criteria: '', creation: [null, null, null], @@ -113,7 +113,7 @@ export default { perPage: 25, } }, - async created() { + async mounted() { await this.getUsers() }, methods: { @@ -136,51 +136,48 @@ export default { showDetails: false, } }) - this.updateItem(this.$store.state.userSelectedInMassCreation, 'mounted') + if (this.itemsMassCreation !== []) { + 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 = {} - const letItemList = this.$store.state.userSelectedInMassCreation - + updateItem(selectedItem, event) { switch (event) { case 'push': - findArr = this.itemsList.find((item) => e.userId === item.userId) - index = this.itemsList.indexOf(findArr) - this.itemsList.splice(index, 1) - letItemList.push(findArr) + this.itemsMassCreation.push( + this.itemsList.find((item) => selectedItem.userId === item.userId), + ) + this.itemsList = this.itemsList.filter((item) => selectedItem.userId !== item.userId) break case 'remove': - findArr = letItemList.find((item) => e.userId === item.userId) - index = letItemList.indexOf(findArr) - letItemList.splice(index, 1) - this.itemsList.push(findArr) - break - case 'mounted': - if (this.$store.state.userSelectedInMassCreation === []) return - letItemList.forEach((value, key) => { - findArr = this.itemsList.find((item) => value.userId === item.userId) - index = this.itemsList.indexOf(findArr) - this.itemsList.splice(index, 1) - }) + 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) } - this.lala = letItemList - this.itemsMassCreationReverse = letItemList - this.itemsMassCreationReverse.reverse() - this.$store.commit('setUserSelectedInMassCreation', letItemList) + this.$store.commit('setUserSelectedInMassCreation', this.itemsMassCreation) }, removeAllBookmark() { - this.$store.commit('setUserSelectedInMassCreation', []) + this.itemsMassCreation = [] + this.$store.commit('setUserSelectedInMassCreation', this.itemsMassCreation) this.getUsers() }, }, + computed: { + itemsMassCreationReverse() { + const array = this.itemsMassCreation + return array.reverse() + }, + }, watch: { currentPage() { this.getUsers() From c949bf6ebe0639e9e71a70e1282e669353a5a6b9 Mon Sep 17 00:00:00 2001 From: Moriz Wahl Date: Tue, 1 Feb 2022 17:38:45 +0100 Subject: [PATCH 8/9] refactor tests for creation, change methods --- admin/src/components/UserTable.vue | 4 +- admin/src/pages/Creation.spec.js | 285 ++++++++++++++--------------- admin/src/pages/Creation.vue | 53 +++--- 3 files changed, 161 insertions(+), 181 deletions(-) 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() From 723cfe1fba6bd398bc255593b65cc6deccf2b11c Mon Sep 17 00:00:00 2001 From: Moriz Wahl Date: Tue, 1 Feb 2022 18:06:53 +0100 Subject: [PATCH 9/9] test with selected items in store --- admin/src/pages/Creation.spec.js | 29 +++++++++++++++++++++++++++++ 1 file changed, 29 insertions(+) diff --git a/admin/src/pages/Creation.spec.js b/admin/src/pages/Creation.spec.js index 9dd784097..c74e7070b 100644 --- a/admin/src/pages/Creation.spec.js +++ b/admin/src/pages/Creation.spec.js @@ -240,6 +240,35 @@ describe('Creation', () => { }) }) + 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, + }, + ]) + }) + }) + describe('watchers', () => { beforeEach(() => { jest.clearAllMocks()