refactor tests for creation, change methods

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') {

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,38 +108,18 @@ describe('Creation', () => {
       })
     })
 
-    describe('update item', () => {
+    describe('push item', () => {
       beforeEach(() => {
-        jest.clearAllMocks()
+        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('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([
           {
@@ -145,8 +133,8 @@ describe('Creation', () => {
         ])
       })
 
-        it('adds the pushed item to userSelectedInMassCreation', () => {
+      it('adds the pushed item to itemsMassCreation', () => {
-          expect(storeCommitMock).toBeCalledWith('userSelectedInMassCreation', [
+        expect(wrapper.vm.itemsMassCreation).toEqual([
           {
             userId: 2,
             firstName: 'Benjamin',
@@ -156,35 +144,9 @@ 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', () => {
+      it('updates userSelectedInMassCreation in store', () => {
-          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,
@@ -196,9 +158,41 @@ describe('Creation', () => {
           },
         ])
       })
+    })
 
-          it('adds the item to itemsList', () => {
+    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',
@@ -207,63 +201,42 @@ describe('Creation', () => {
             creation: [200, 400, 600],
             showDetails: false,
           },
-              {
-                userId: 2,
-                firstName: 'Benjamin',
-                lastName: 'Blümchen',
-                email: 'benjamin@bluemchen.de',
-                creation: [800, 600, 400],
-                showDetails: false,
-              },
         ])
       })
-        })
+
+      it('removes the item from itemsMassCreation', () => {
+        expect(wrapper.vm.itemsMassCreation).toEqual([])
       })
 
-      describe('error', () => {
+      it('commits empty array as userSelectedInMassCreation', () => {
-        const consoleErrorMock = jest.fn()
+        expect(storeCommitMock).toBeCalledWith('setUserSelectedInMassCreation', [])
-        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' }))
-        })
       })
     })
 
     describe('remove all bookmarks', () => {
       beforeEach(async () => {
-        await wrapper.findComponent({ name: 'UserTable' }).vm.$emit(
+        await wrapper.findComponent({ name: 'UserTable' }).vm.$emit('push-item', {
-          'update-item',
-          {
           userId: 2,
           firstName: 'Benjamin',
           lastName: 'Blümchen',
           email: 'benjamin@bluemchen.de',
           creation: [800, 600, 400],
           showDetails: false,
-          },
+        })
-          'push',
+        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', () => {
+      it('calls searchUsers', () => {
-        expect(wrapper.vm.itemsList).toHaveLength(2)
+        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,
+            },
+          }),
+        )
       })
     })
 

admin/src/pages/Creation.vue

@@ -16,7 +16,7 @@
           :fieldsTable="Searchfields"
           :criteria="criteria"
           :creation="creation"
-          @update-item="updateItem"
+          @push-item="pushItem"
         />
         <b-pagination
           pills
@@ -31,11 +31,11 @@
           v-show="itemsMassCreation.length > 0"
           class="shadow p-3 mb-5 bg-white rounded"
           type="UserListMassCreation"
-          :itemsUser="itemsMassCreationReverse"
+          :itemsUser="itemsMassCreation"
           :fieldsTable="fields"
           :criteria="null"
           :creation="creation"
-          @update-item="updateItem"
+          @remove-item="removeItem"
         />
         <div v-if="itemsMassCreation.length === 0">
           {{ $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) {
+    pushItem(selectedItem) {
-      switch (event) {
+      this.itemsMassCreation = [
-        case 'push':
-          this.itemsMassCreation.push(
         this.itemsList.find((item) => selectedItem.userId === item.userId),
-          )
+        ...this.itemsMassCreation,
+      ]
       this.itemsList = this.itemsList.filter((item) => selectedItem.userId !== item.userId)
-          break
+      this.$store.commit('setUserSelectedInMassCreation', this.itemsMassCreation)
-        case 'remove':
+    },
-          this.itemsList.push(
+    removeItem(selectedItem) {
+      this.itemsList = [
         this.itemsMassCreation.find((item) => selectedItem.userId === item.userId),
-          )
+        ...this.itemsList,
+      ]
       this.itemsMassCreation = this.itemsMassCreation.filter(
         (item) => selectedItem.userId !== item.userId,
       )
-          break
-        default:
-          throw new Error(event)
-      }
       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()