Merge branch 'master' into 1401-Admin-interface-does-user-have-member-area

.github/workflows/test.yml

@@ -448,7 +448,7 @@ jobs:
           report_name: Coverage Admin Interface
           type: lcov
           result_path: ./coverage/lcov.info
-          min_coverage: 81
+          min_coverage: 88
           token: ${{ github.token }}
 
   ##############################################################################

admin/src/components/UserTable.vue

@@ -27,15 +27,7 @@
         </b-button>
       </b-jumbotron>
     </div>
-    <b-table-lite
+    <b-table-lite :items="itemsUser" :fields="fieldsTable" caption-top striped hover stacked="md">
-      :items="itemsUser"
-      :fields="fieldsTable"
-      :filter="criteria"
-      caption-top
-      striped
-      hover
-      stacked="md"
-    >
       <template #cell(creation)="data">
         <div v-html="data.value"></div>
       </template>
@@ -133,7 +125,7 @@
         </row-details>
       </template>
       <template #cell(bookmark)="row">
-        <div v-show="type === 'UserListSearch'">
+        <div v-if="type === 'UserListSearch'">
           <b-button
             v-if="row.item.emailChecked"
             variant="warning"
@@ -195,15 +187,6 @@ export default {
       type: Array,
       required: true,
     },
-    criteria: {
-      type: String,
-      required: false,
-      default: '',
-    },
-    creation: {
-      type: Array,
-      required: false,
-    },
   },
   components: {
     CreationFormular,

admin/src/mixins/creationMonths.js

@@ -1,6 +1,9 @@
 export const creationMonths = {
   props: {
-    creation: [1000, 1000, 1000],
+    creation: {
+      type: Array,
+      default: () => [1000, 1000, 1000],
+    },
   },
   computed: {
     creationDates() {
@@ -31,5 +34,8 @@ export const creationMonths = {
         }
       })
     },
+    creationLabel() {
+      return this.creationDates.map((date) => this.$d(date, 'monthShort')).join(' | ')
+    },
   },
 }

admin/src/pages/Creation.spec.js

@@ -1,4 +1,4 @@
-import { shallowMount } from '@vue/test-utils'
+import { mount } from '@vue/test-utils'
 import Creation from './Creation.vue'
 
 const localVue = global.localVue
@@ -14,6 +14,7 @@ const apolloQueryMock = jest.fn().mockResolvedValue({
           lastName: 'Bloxberg',
           email: 'bibi@bloxberg.de',
           creation: [200, 400, 600],
+          emailChecked: true,
         },
         {
           userId: 2,
@@ -21,6 +22,7 @@ const apolloQueryMock = jest.fn().mockResolvedValue({
           lastName: 'Blümchen',
           email: 'benjamin@bluemchen.de',
           creation: [800, 600, 400],
+          emailChecked: true,
         },
       ],
     },
@@ -51,10 +53,10 @@ describe('Creation', () => {
   let wrapper
 
   const Wrapper = () => {
-    return shallowMount(Creation, { localVue, mocks })
+    return mount(Creation, { localVue, mocks })
   }
 
-  describe('shallowMount', () => {
+  describe('mount', () => {
     beforeEach(() => {
       jest.clearAllMocks()
       wrapper = Wrapper()
@@ -77,64 +79,66 @@ describe('Creation', () => {
         )
       })
 
-      it('sets the data of itemsList', () => {
+      it('has two rows in the left table', () => {
-        expect(wrapper.vm.itemsList).toEqual([
+        expect(wrapper.findAll('table').at(0).findAll('tbody > tr')).toHaveLength(2)
-          {
+      })
-            userId: 1,
+
-            firstName: 'Bibi',
+      it('has nwo rows in the right table', () => {
-            lastName: 'Bloxberg',
+        expect(wrapper.findAll('table').at(1).findAll('tbody > tr')).toHaveLength(0)
-            email: 'bibi@bloxberg.de',
+      })
-            creation: [200, 400, 600],
+
-            showDetails: false,
+      it('has correct data in first row ', () => {
-          },
+        expect(wrapper.findAll('table').at(0).findAll('tbody > tr').at(0).text()).toContain('Bibi')
-          {
+        expect(wrapper.findAll('table').at(0).findAll('tbody > tr').at(0).text()).toContain(
-            userId: 2,
+          'Bloxberg',
-            firstName: 'Benjamin',
+        )
-            lastName: 'Blümchen',
+        expect(wrapper.findAll('table').at(0).findAll('tbody > tr').at(0).text()).toContain(
-            email: 'benjamin@bluemchen.de',
+          '200 | 400 | 600',
-            creation: [800, 600, 400],
+        )
-            showDetails: false,
+        expect(wrapper.findAll('table').at(0).findAll('tbody > tr').at(0).text()).toContain(
-          },
+          'bibi@bloxberg.de',
-        ])
+        )
+      })
+
+      it('has correct data in second row ', () => {
+        expect(wrapper.findAll('table').at(0).findAll('tbody > tr').at(1).text()).toContain(
+          'Benjamin',
+        )
+        expect(wrapper.findAll('table').at(0).findAll('tbody > tr').at(1).text()).toContain(
+          'Blümchen',
+        )
+        expect(wrapper.findAll('table').at(0).findAll('tbody > tr').at(1).text()).toContain(
+          '800 | 600 | 400',
+        )
+        expect(wrapper.findAll('table').at(0).findAll('tbody > tr').at(1).text()).toContain(
+          'benjamin@bluemchen.de',
+        )
       })
     })
 
     describe('push item', () => {
       beforeEach(() => {
-        wrapper.findComponent({ name: 'UserTable' }).vm.$emit('push-item', {
+        wrapper.findAll('table').at(0).findAll('tbody > tr').at(1).find('button').trigger('click')
-          userId: 2,
-          firstName: 'Benjamin',
-          lastName: 'Blümchen',
-          email: 'benjamin@bluemchen.de',
-          creation: [800, 600, 400],
-          showDetails: false,
-        })
       })
 
-      it('removes the pushed item from itemsList', () => {
+      it('has one item in left table', () => {
-        expect(wrapper.vm.itemsList).toEqual([
+        expect(wrapper.findAll('table').at(0).findAll('tbody > tr')).toHaveLength(1)
-          {
-            userId: 1,
-            firstName: 'Bibi',
-            lastName: 'Bloxberg',
-            email: 'bibi@bloxberg.de',
-            creation: [200, 400, 600],
-            showDetails: false,
-          },
-        ])
       })
 
-      it('adds the pushed item to itemsMassCreation', () => {
+      it('has one item in right table', () => {
-        expect(wrapper.vm.itemsMassCreation).toEqual([
+        expect(wrapper.findAll('table').at(1).findAll('tbody > tr')).toHaveLength(1)
-          {
+      })
-            userId: 2,
+
-            firstName: 'Benjamin',
+      it('has the correct user in left table', () => {
-            lastName: 'Blümchen',
+        expect(wrapper.findAll('table').at(0).findAll('tbody > tr').at(0).text()).toContain(
-            email: 'benjamin@bluemchen.de',
+          'bibi@bloxberg.de',
-            creation: [800, 600, 400],
+        )
-            showDetails: false,
+      })
-          },
+
-        ])
+      it('has the correct user in right table', () => {
+        expect(wrapper.findAll('table').at(1).findAll('tbody > tr').at(0).text()).toContain(
+          'benjamin@bluemchen.de',
+        )
       })
 
       it('updates userSelectedInMassCreation in store', () => {
@@ -146,6 +150,7 @@ describe('Creation', () => {
             email: 'benjamin@bluemchen.de',
             creation: [800, 600, 400],
             showDetails: false,
+            emailChecked: true,
           },
         ])
       })
@@ -153,73 +158,89 @@ describe('Creation', () => {
 
     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' })
+          .findAll('table')
+          .at(0)
+          .findAll('tbody > tr')
           .at(1)
-          .vm.$emit('remove-item', {
+          .find('button')
-            userId: 2,
+          .trigger('click')
-            firstName: 'Benjamin',
+        await wrapper
-            lastName: 'Blümchen',
+          .findAll('table')
-            email: 'benjamin@bluemchen.de',
+          .at(1)
-            creation: [800, 600, 400],
+          .findAll('tbody > tr')
-            showDetails: false,
+          .at(0)
-          })
+          .find('button')
+          .trigger('click')
       })
 
-      it('adds the removed item to itemsList', () => {
+      it('opens a dialog', () => {
-        expect(wrapper.vm.itemsList).toEqual([
+        expect(wrapper.findAll('#overlay').at(1).isVisible()).toBeTruthy()
-          {
-            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', () => {
+      describe('cancel remove item', () => {
-        expect(wrapper.vm.itemsMassCreation).toEqual([])
+        beforeEach(async () => {
+          await wrapper.findAll('#overlay').at(1).findAll('button').at(0).trigger('click')
+        })
+
+        it('closes the dialog', () => {
+          expect(wrapper.findAll('#overlay').at(1).isVisible()).toBeFalsy()
+        })
+
+        it('has one item in left table', () => {
+          expect(wrapper.findAll('table').at(0).findAll('tbody > tr')).toHaveLength(1)
+        })
+
+        it('has one item in right table', () => {
+          expect(wrapper.findAll('table').at(1).findAll('tbody > tr')).toHaveLength(1)
+        })
       })
 
-      it('commits empty array as userSelectedInMassCreation', () => {
+      describe('confirm remove item', () => {
-        expect(storeCommitMock).toBeCalledWith('setUserSelectedInMassCreation', [])
+        beforeEach(async () => {
+          await wrapper.findAll('#overlay').at(1).findAll('button').at(1).trigger('click')
+        })
+
+        it('closes the dialog', () => {
+          expect(wrapper.findAll('#overlay').at(1).isVisible()).toBeFalsy()
+        })
+
+        it('has two items in left table', () => {
+          expect(wrapper.findAll('table').at(0).findAll('tbody > tr')).toHaveLength(2)
+        })
+
+        it('has the removed user in first row', () => {
+          expect(wrapper.findAll('table').at(0).findAll('tbody > tr').at(0).text()).toContain(
+            'benjamin@bluemchen.de',
+          )
+        })
+
+        it('has no items in right table', () => {
+          expect(wrapper.findAll('table').at(1).findAll('tbody > tr')).toHaveLength(0)
+        })
+
+        it('commits empty array as userSelectedInMassCreation', () => {
+          expect(storeCommitMock).toBeCalledWith('setUserSelectedInMassCreation', [])
+        })
       })
     })
 
+    // this can only happen after API call in CreationForm
     describe('remove all bookmarks', () => {
       beforeEach(async () => {
-        await wrapper.findComponent({ name: 'UserTable' }).vm.$emit('push-item', {
+        await wrapper
-          userId: 2,
+          .findAll('table')
-          firstName: 'Benjamin',
+          .at(0)
-          lastName: 'Blümchen',
+          .findAll('tbody > tr')
-          email: 'benjamin@bluemchen.de',
+          .at(1)
-          creation: [800, 600, 400],
+          .find('button')
-          showDetails: false,
+          .trigger('click')
-        })
         jest.clearAllMocks()
         wrapper.findComponent({ name: 'CreationFormular' }).vm.$emit('remove-all-bookmark')
       })
 
-      it('removes all items from itemsMassCreation', () => {
+      it('has no items in right table', () => {
-        expect(wrapper.vm.itemsMassCreation).toEqual([])
+        expect(wrapper.findAll('table').at(1).findAll('tbody > tr')).toHaveLength(0)
       })
 
       it('commits empty array to userSelectedInMassCreation', () => {
@@ -241,22 +262,24 @@ describe('Creation', () => {
             email: 'benjamin@bluemchen.de',
             creation: [800, 600, 400],
             showDetails: false,
+            emailChecked: true,
           },
         ]
         wrapper = Wrapper()
       })
 
-      it('has only one item itemsList', () => {
+      it('has one item in left table', () => {
-        expect(wrapper.vm.itemsList).toEqual([
+        expect(wrapper.findAll('table').at(0).findAll('tbody > tr')).toHaveLength(1)
-          {
+      })
-            userId: 1,
+
-            firstName: 'Bibi',
+      it('has one item in right table', () => {
-            lastName: 'Bloxberg',
+        expect(wrapper.findAll('table').at(1).findAll('tbody > tr')).toHaveLength(1)
-            email: 'bibi@bloxberg.de',
+      })
-            creation: [200, 400, 600],
+
-            showDetails: false,
+      it('has the stored user in second row', () => {
-          },
+        expect(wrapper.findAll('table').at(1).findAll('tbody > tr').at(0).text()).toContain(
-        ])
+          'benjamin@bluemchen.de',
+        )
       })
     })
 

admin/src/pages/Creation.vue

@@ -14,8 +14,6 @@
           type="UserListSearch"
           :itemsUser="itemsList"
           :fieldsTable="Searchfields"
-          :criteria="criteria"
-          :creation="creation"
           @push-item="pushItem"
         />
         <b-pagination
@@ -33,8 +31,6 @@
           type="UserListMassCreation"
           :itemsUser="itemsMassCreation"
           :fieldsTable="fields"
-          :criteria="null"
-          :creation="creation"
           @remove-item="removeItem"
         />
         <div v-if="itemsMassCreation.length === 0">
@@ -55,9 +51,11 @@
 import CreationFormular from '../components/CreationFormular.vue'
 import UserTable from '../components/UserTable.vue'
 import { searchUsers } from '../graphql/searchUsers'
+import { creationMonths } from '../mixins/creationMonths'
 
 export default {
   name: 'Creation',
+  mixins: [creationMonths],
   components: {
     CreationFormular,
     UserTable,
@@ -69,7 +67,6 @@ export default {
       itemsMassCreation: this.$store.state.userSelectedInMassCreation,
       radioSelectedMass: '',
       criteria: '',
-      creation: [null, null, null],
       rows: 0,
       currentPage: 1,
       perPage: 25,
@@ -163,16 +160,6 @@ export default {
         { key: 'bookmark', label: this.$t('remove') },
       ]
     },
-    creationLabel() {
-      const now = new Date(this.now)
-      const lastMonth = new Date(now.getFullYear(), now.getMonth() - 1, 1)
-      const beforeLastMonth = new Date(now.getFullYear(), now.getMonth() - 2, 1)
-      return [
-        this.$d(beforeLastMonth, 'monthShort'),
-        this.$d(lastMonth, 'monthShort'),
-        this.$d(now, 'monthShort'),
-      ].join(' | ')
-    },
   },
   watch: {
     currentPage() {

admin/src/pages/UserSearch.spec.js

@@ -42,6 +42,7 @@ describe('UserSearch', () => {
 
   describe('mount', () => {
     beforeEach(() => {
+      jest.clearAllMocks()
       wrapper = Wrapper()
     })
 
@@ -49,13 +50,73 @@ describe('UserSearch', () => {
       expect(wrapper.find('div.user-search').exists()).toBeTruthy()
     })
 
+    it('calls the API', () => {
+      expect(apolloQueryMock).toBeCalledWith(
+        expect.objectContaining({
+          variables: {
+            searchText: '',
+            currentPage: 1,
+            pageSize: 25,
+            notActivated: false,
+          },
+        }),
+      )
+    })
+
     describe('unconfirmed emails', () => {
       beforeEach(async () => {
         await wrapper.find('button.btn-block').trigger('click')
       })
 
-      it('filters the users by unconfirmed emails', () => {
+      it('calls API with filter', () => {
-        expect(wrapper.vm.searchResult).toHaveLength(1)
+        expect(apolloQueryMock).toBeCalledWith(
+          expect.objectContaining({
+            variables: {
+              searchText: '',
+              currentPage: 1,
+              pageSize: 25,
+              notActivated: true,
+            },
+          }),
+        )
+      })
+    })
+
+    describe('pagination', () => {
+      beforeEach(async () => {
+        wrapper.setData({ currentPage: 2 })
+      })
+
+      it('calls the API with new page', () => {
+        expect(apolloQueryMock).toBeCalledWith(
+          expect.objectContaining({
+            variables: {
+              searchText: '',
+              currentPage: 2,
+              pageSize: 25,
+              notActivated: false,
+            },
+          }),
+        )
+      })
+    })
+
+    describe('user search', () => {
+      beforeEach(async () => {
+        wrapper.setData({ criteria: 'search string' })
+      })
+
+      it('calls the API with search string', () => {
+        expect(apolloQueryMock).toBeCalledWith(
+          expect.objectContaining({
+            variables: {
+              searchText: 'search string',
+              currentPage: 1,
+              pageSize: 25,
+              notActivated: false,
+            },
+          }),
+        )
       })
     })
 

admin/src/pages/UserSearch.vue

@@ -12,15 +12,8 @@
       v-model="criteria"
       class="shadow p-3 mb-3 bg-white rounded"
       :placeholder="$t('user_search')"
-      @input="getUsers"
     ></b-input>
-
+    <user-table type="PageUserSearch" :itemsUser="searchResult" :fieldsTable="fields" />
-    <user-table
-      type="PageUserSearch"
-      :itemsUser="searchResult"
-      :fieldsTable="fields"
-      :criteria="criteria"
-    />
     <b-pagination
       pills
       size="lg"
@@ -35,9 +28,11 @@
 <script>
 import UserTable from '../components/UserTable.vue'
 import { searchUsers } from '../graphql/searchUsers'
+import { creationMonths } from '../mixins/creationMonths'
 
 export default {
   name: 'UserSearch',
+  mixins: [creationMonths],
   components: {
     UserTable,
   },
@@ -83,16 +78,11 @@ export default {
     currentPage() {
       this.getUsers()
     },
+    criteria() {
+      this.getUsers()
+    },
   },
   computed: {
-    lastMonthDate() {
-      const now = new Date(this.now)
-      return new Date(now.getFullYear(), now.getMonth() - 1, 1)
-    },
-    beforeLastMonthDate() {
-      const now = new Date(this.now)
-      return new Date(now.getFullYear(), now.getMonth() - 2, 1)
-    },
     fields() {
       return [
         { key: 'email', label: this.$t('e_mail') },
@@ -100,11 +90,7 @@ export default {
         { key: 'lastName', label: this.$t('lastname') },
         {
           key: 'creation',
-          label: [
+          label: this.creationLabel,
-            this.$d(this.beforeLastMonthDate, 'monthShort'),
-            this.$d(this.lastMonthDate, 'monthShort'),
-            this.$d(this.now, 'monthShort'),
-          ].join(' | '),
           formatter: (value, key, item) => {
             return value.join(' | ')
           },