Merge pull request #1409 from gradido/mixin-for-creation-labels

refactor: Mixin for Creation Labels

.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: 82
           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>
@@ -187,15 +179,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
@@ -51,10 +51,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()

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(' | ')
           },