fix tests

admin/src/components/Overlay.vue

@@ -13,7 +13,8 @@
         <b-row>
           <b-col class="col-3">{{ $t('creation_for_month') }}</b-col>
           <b-col class="h3">
-            {{ $d(new Date(item.date), 'month') }} {{ $d(new Date(item.date), 'year') }}
+            {{ $d(new Date(item.contributionDate), 'month') }}
+            {{ $d(new Date(item.contributionDate), 'year') }}
           </b-col>
         </b-row>
         <b-row>

admin/src/components/Tables/OpenCreationsTable.vue

@@ -142,10 +142,6 @@ export default {
       type: Array,
       required: true,
     },
-    filterTab: {
-      type: String,
-      required: true,
-    },
   },
   data() {
     return {
@@ -174,7 +170,7 @@ export default {
       rowItem.creation = newCreation
     },
     updateState(id) {
-      if (this.filterTab === 'open') this.$emit('update-state', id)
+      this.$emit('update-state', id)
     },
     reActive() {
       alert('reActive Contribution')

admin/src/graphql/listUnconfirmedContributions.js

@@ -4,17 +4,7 @@ export const listUnconfirmedContributions = gql`
   query {
     listUnconfirmedContributions {
       id
-      firstName
-      lastName
-      userId
-      email
-      amount
-      memo
-      date
-      moderator
-      creation
       state
-      messageCount
     }
   }
 `

admin/src/locales/de.json

@@ -59,7 +59,6 @@
   },
   "createdAt": "Angelegt",
   "creation_for_month": "Schöpfung für Monat",
-  "date": "Datum",
   "delete": "Löschen",
   "deleted": "gelöscht",
   "deleted_user": "Alle gelöschten Nutzer",

admin/src/locales/en.json

@@ -59,7 +59,6 @@
     "update_creation": "Creation update"
   },
   "creation_for_month": "Creation for month",
-  "date": "Date",
   "delete": "Delete",
   "deleted": "deleted",
   "deleted_user": "All deleted user",

admin/src/pages/CreationConfirm.spec.js

@@ -135,6 +135,10 @@ describe('CreationConfirm', () => {
       it('toast an error message', () => {
         expect(toastErrorSpy).toBeCalledWith('Ouch!')
       })
+
+      it('has statusFilter ["IN_PROGRESS", "PENDING"]', () => {
+        expect(wrapper.vm.statusFilter).toEqual(['IN_PROGRESS', 'PENDING'])
+      })
     })
 
     describe('server response is succes', () => {
@@ -143,7 +147,7 @@ describe('CreationConfirm', () => {
       })
 
       it('has two pending creations', () => {
-        expect(wrapper.find('[data-test="tab-1"]').find('tbody').findAll('tr')).toHaveLength(2)
+        expect(wrapper.find('tbody').findAll('tr')).toHaveLength(2)
       })
     })
 
@@ -334,5 +338,41 @@ describe('CreationConfirm', () => {
         })
       })
     })
+
+    describe('click tab "confirmed"', () => {
+      beforeEach(() => {
+        beforeEach(async () => {
+          jest.clearAllMocks()
+          // console.log('click tab "confirmed"', wrapper.vm.statusFilter)
+          // console.log(wrapper.find('a[data-test="confirmed"]').html())
+          await wrapper.find('a[data-test="confirmed"]').trigger('click')
+          // await wrapper.setData({ tabIndex: 1 })
+          await wrapper.vm.$nextTick()
+        })
+      })
+      it('has statusFilter ["CONFIRMED"]', () => {
+        // console.log('click tab "confirmed2"', wrapper.vm.statusFilter)
+        // console.log(wrapper.find('[data-test="confirmed"]').html())
+        expect(wrapper.vm.statusFilter).toEqual(['CONFIRMED'])
+      })
+      it('list all Contributions confirmed', () => {
+        expect(wrapper.vm.$apollo.queries.ListAllContributions).toBeTruthy()
+      })
+
+      describe('click tab "open"', () => {
+        beforeEach(() => {
+          beforeEach(async () => {
+            await wrapper.find('a[data-test="open"]').trigger('click')
+            await wrapper.vm.$nextTick()
+          })
+        })
+        it('has statusFilter ["IN_PROGRESS", "PENDING"]', () => {
+          expect(wrapper.vm.statusFilter).toEqual(['IN_PROGRESS', 'PENDING'])
+        })
+        it('list all Contributions open', () => {
+          expect(wrapper.vm.$apollo.queries.ListAllContributions).toBeTruthy()
+        })
+      })
+    })
   })
 })

admin/src/pages/CreationConfirm.vue

@@ -2,8 +2,8 @@
 <template>
   <div class="creation-confirm">
     <div>
-      <b-tabs content-class="mt-3" fill>
-        <b-tab active @click="listContributions('open')" data-test="open">
+      <b-tabs v-model="tabIndex" content-class="mt-3" fill>
+        <b-tab active :title-link-attributes="{ 'data-test': 'open' }">
           <template #title>
             {{ $t('contributions.open') }}
             <b-badge v-if="$store.state.openCreations > 0" variant="danger">
@@ -13,27 +13,23 @@
         </b-tab>
         <b-tab
           :title="$t('contributions.confirms')"
-          @click="listContributions('confirmed')"
-          data-test="confirmed"
+          :title-link-attributes="{ 'data-test': 'confirmed' }"
         />
         <b-tab
           :title="$t('contributions.denied')"
-          @click="listContributions('denied')"
-          data-test="denied"
+          :title-link-attributes="{ 'data-test': 'denied' }"
         />
         <b-tab
           :title="$t('contributions.deleted')"
-          @click="listContributions('deleted')"
-          data-test="deleted"
+          :title-link-attributes="{ 'data-test': 'deleted' }"
         />
-        <b-tab :title="$t('contributions.all')" @click="listContributions('all')" data-test="all" />
+        <b-tab :title="$t('contributions.all')" :title-link-attributes="{ 'data-test': 'all' }" />
       </b-tabs>
     </div>
     <open-creations-table
       class="mt-4"
       :items="items"
       :fields="fields"
-      :filterTab="filterTab"
       @show-overlay="showOverlay"
       @update-state="updateState"
       @update-contributions="$apollo.queries.AllContributions.refetch()"
@@ -82,6 +78,14 @@ import { adminDeleteContribution } from '../graphql/adminDeleteContribution'
 import { confirmContribution } from '../graphql/confirmContribution'
 import { denyContribution } from '../graphql/denyContribution'
 
+const FILTER_TAB_MAP = [
+  ['IN_PROGRESS', 'PENDING'],
+  ['CONFIRMED'],
+  ['DENIED'],
+  ['DELETED'],
+  ['IN_PROGRESS', 'PENDING', 'CONFIRMED', 'DENIED'],
+]
+
 export default {
   name: 'CreationConfirm',
   components: {
@@ -90,9 +94,8 @@ export default {
   },
   data() {
     return {
+      tabIndex: 0,
       items: [],
-      filterTab: 'open',
-      statusFilter: ['IN_PROGRESS', 'PENDING'],
       overlay: false,
       item: {},
       variant: 'confirm',
@@ -102,11 +105,6 @@ export default {
     }
   },
   methods: {
-    listContributions(filter) {
-      this.filterTab = filter
-      this.statusFilter = this.contributionFilter
-      this.$apollo.queries.AllContributions.refetch()
-    },
     deleteCreation() {
       this.$apollo
         .mutate({
@@ -175,10 +173,16 @@ export default {
       this.items.find((obj) => obj.id === id).state = 'IN_PROGRESS'
     },
   },
+  watch: {
+    statusFilter() {
+      // console.log('statusFilter', this.statusFilter)
+      this.$apollo.queries.ListAllContributions.refetch()
+    },
+  },
   computed: {
     fields() {
-      if (this.filterTab === 'open') {
-        return [
+      return [
+        [
           { key: 'bookmark', label: this.$t('delete') },
           { key: 'email', label: this.$t('e_mail') },
           { key: 'firstName', label: this.$t('firstname') },
@@ -202,10 +206,8 @@ export default {
           { key: 'editCreation', label: this.$t('edit') },
           { key: 'deny', label: this.$t('deny') },
           { key: 'confirm', label: this.$t('save') },
-        ]
-      }
-      if (this.filterTab === 'all') {
-        return [
+        ],
+        [
           { key: 'state', label: 'state' },
           { key: 'firstName', label: this.$t('firstname') },
           { key: 'lastName', label: this.$t('lastname') },
@@ -232,10 +234,8 @@ export default {
             },
           },
           { key: 'chatCreation', label: this.$t('chat') },
-        ]
-      }
-      if (this.filterTab === 'denied') {
-        return [
+        ],
+        [
           { key: 'reActive', label: 'reActive' },
           { key: 'firstName', label: this.$t('firstname') },
           { key: 'lastName', label: this.$t('lastname') },
@@ -270,10 +270,9 @@ export default {
           },
           { key: 'deniedBy', label: this.$t('mod') },
           { key: 'chatCreation', label: this.$t('chat') },
-        ]
-      }
-      if (this.filterTab === 'confirmed') {
-        return [
+        ],
+        [],
+        [
           { key: 'firstName', label: this.$t('firstname') },
           { key: 'lastName', label: this.$t('lastname') },
           {
@@ -307,27 +306,11 @@ export default {
           },
           { key: 'confirmedBy', label: this.$t('mod') },
           { key: 'chatCreation', label: this.$t('chat') },
-        ]
-      }
-      return []
+        ],
+      ][this.tabIndex]
     },
-    contributionFilter() {
-      if (this.filterTab === 'open') {
-        return ['IN_PROGRESS', 'PENDING']
-      }
-      if (this.filterTab === 'all') {
-        return ['IN_PROGRESS', 'PENDING', 'CONFIRMED', 'DENIED']
-      }
-      if (this.filterTab === 'denied') {
-        return ['DENIED']
-      }
-      if (this.filterTab === 'confirmed') {
-        return ['CONFIRMED']
-      }
-      if (this.filterTab === 'deleted') {
-        return ['DELETED']
-      }
-      return ['IN_PROGRESS', 'PENDING']
+    statusFilter() {
+      return FILTER_TAB_MAP[this.tabIndex]
     },
     overlayTitle() {
       return `overlay.${this.variant}.title`
@@ -358,7 +341,7 @@ export default {
     },
   },
   apollo: {
-    AllContributions: {
+    ListAllContributions: {
       query() {
         return listAllContributions
       },

admin/src/pages/Overview.spec.js

@@ -1,86 +1,189 @@
 import { mount } from '@vue/test-utils'
 import Overview from './Overview.vue'
-import { listUnconfirmedContributions } from '@/graphql/listUnconfirmedContributions.js'
+import { listAllContributions } from '../graphql/listAllContributions'
+import VueApollo from 'vue-apollo'
+import { createMockClient } from 'mock-apollo-client'
+import { toastErrorSpy } from '../../test/testSetup'
+
+const mockClient = createMockClient()
+const apolloProvider = new VueApollo({
+  defaultClient: mockClient,
+})
 
 const localVue = global.localVue
 
-const apolloQueryMock = jest
-  .fn()
-  .mockResolvedValueOnce({
-    data: {
-      listUnconfirmedContributions: [
-        {
-          pending: true,
-        },
-        {
-          pending: true,
-        },
-        {
-          pending: true,
-        },
-      ],
-    },
-  })
-  .mockResolvedValue({
-    data: {
-      listUnconfirmedContributions: [
-        {
-          pending: true,
-        },
-        {
-          pending: true,
-        },
-        {
-          pending: true,
-        },
-      ],
-    },
-  })
+localVue.use(VueApollo)
 
 const storeCommitMock = jest.fn()
+// const apolloQueryMock = jest.fn().mockResolvedValue({
+//   data: {
+//     listAllContributions: {
+//       contributionCount: 2,
+//       contributionList: [
+//         {
+//           id: 1,
+//           firstName: 'Bibi',
+//           lastName: 'Bloxberg',
+//           userId: 99,
+//           email: 'bibi@bloxberg.de',
+//           amount: 500,
+//           memo: 'Danke für alles',
+//           date: new Date(),
+//           moderator: 1,
+//           state: 'PENDING',
+//           creation: [500, 500, 500],
+//           messagesCount: 0,
+//           deniedBy: null,
+//           deniedAt: null,
+//           confirmedBy: null,
+//           confirmedAt: null,
+//           contributionDate: new Date(),
+//           deletedBy: null,
+//           deletedAt: null,
+//           createdAt: new Date(),
+//         },
+//         {
+//           id: 2,
+//           firstName: 'Räuber',
+//           lastName: 'Hotzenplotz',
+//           userId: 100,
+//           email: 'raeuber@hotzenplotz.de',
+//           amount: 1000000,
+//           memo: 'Gut Ergattert',
+//           date: new Date(),
+//           moderator: 1,
+//           state: 'PENDING',
+//           creation: [500, 500, 500],
+//           messagesCount: 0,
+//           deniedBy: null,
+//           deniedAt: null,
+//           confirmedBy: null,
+//           confirmedAt: null,
+//           contributionDate: new Date(),
+//           deletedBy: null,
+//           deletedAt: null,
+//           createdAt: new Date(),
+//         },
+//       ],
+//     },
+//   },
+// })
 
 const mocks = {
   $t: jest.fn((t) => t),
   $n: jest.fn((n) => n),
   $d: jest.fn((d) => d),
-  $apollo: {
-    query: apolloQueryMock,
-  },
+  // $apollo: {
+  //   query: apolloQueryMock,
+  // },
   $store: {
     commit: storeCommitMock,
     state: {
-      openCreations: 2,
+      openCreations: 1,
     },
   },
 }
 
+const defaultData = () => {
+  return {
+    listAllContributions: {
+      contributionCount: 2,
+      contributionList: [
+        {
+          id: 1,
+          firstName: 'Bibi',
+          lastName: 'Bloxberg',
+          userId: 99,
+          email: 'bibi@bloxberg.de',
+          amount: 500,
+          memo: 'Danke für alles',
+          date: new Date(),
+          moderator: 1,
+          state: 'PENDING',
+          creation: [500, 500, 500],
+          messagesCount: 0,
+          deniedBy: null,
+          deniedAt: null,
+          confirmedBy: null,
+          confirmedAt: null,
+          contributionDate: new Date(),
+          deletedBy: null,
+          deletedAt: null,
+          createdAt: new Date(),
+        },
+        {
+          id: 2,
+          firstName: 'Räuber',
+          lastName: 'Hotzenplotz',
+          userId: 100,
+          email: 'raeuber@hotzenplotz.de',
+          amount: 1000000,
+          memo: 'Gut Ergattert',
+          date: new Date(),
+          moderator: 1,
+          state: 'PENDING',
+          creation: [500, 500, 500],
+          messagesCount: 0,
+          deniedBy: null,
+          deniedAt: null,
+          confirmedBy: null,
+          confirmedAt: null,
+          contributionDate: new Date(),
+          deletedBy: null,
+          deletedAt: null,
+          createdAt: new Date(),
+        },
+      ],
+    },
+  }
+}
+
 describe('Overview', () => {
   let wrapper
+  const listAllContributionsMock = jest.fn()
+
+  mockClient.setRequestHandler(
+    listAllContributions,
+    listAllContributionsMock
+      .mockRejectedValueOnce({ message: 'Ouch!' })
+      .mockResolvedValue({ data: defaultData() }),
+  )
 
   const Wrapper = () => {
-    return mount(Overview, { localVue, mocks })
+    return mount(Overview, { localVue, mocks, apolloProvider })
   }
 
   describe('mount', () => {
     beforeEach(() => {
+      jest.clearAllMocks()
       wrapper = Wrapper()
     })
 
-    it('calls listUnconfirmedContributions', () => {
-      expect(apolloQueryMock).toBeCalledWith(
-        expect.objectContaining({
-          query: listUnconfirmedContributions,
-        }),
-      )
+    describe('server response for get pending creations is error', () => {
+      it('toast an error message', () => {
+        expect(toastErrorSpy).toBeCalledWith('Ouch!')
+      })
+    })
+
+    it('calls the listAllContributions query', () => {
+      expect(listAllContributionsMock).toBeCalledWith({
+        currentPage: 1,
+        order: 'DESC',
+        pageSize: 25,
+        statusFilter: ['IN_PROGRESS', 'PENDING'],
+      })
     })
 
     it('commits three pending creations to store', () => {
-      expect(storeCommitMock).toBeCalledWith('setOpenCreations', 3)
+      expect(storeCommitMock).toBeCalledWith('setOpenCreations', 2)
     })
 
     describe('with open creations', () => {
-      it('renders a link to confirm creations', () => {
-        expect(wrapper.find('a[href="creation-confirm"]').text()).toContain('2')
+      beforeEach(() => {
+        mocks.$store.state.openCreations = 2
+      })
+      it('renders a link to confirm 2 creations', () => {
+        expect(wrapper.find('[data-test="open-creation"]').text()).toContain('2')
         expect(wrapper.find('a[href="creation-confirm"]').exists()).toBeTruthy()
       })
     })
@@ -91,7 +194,7 @@ describe('Overview', () => {
       })
 
       it('renders a link to confirm creations', () => {
-        expect(wrapper.find('a[href="creation-confirm"]').text()).toContain('0')
+        expect(wrapper.find('[data-test="open-creation"]').text()).toContain('0')
         expect(wrapper.find('a[href="creation-confirm"]').exists()).toBeTruthy()
       })
     })

admin/src/pages/Overview.vue

@@ -24,7 +24,7 @@
     >
       <b-card-text>
         <b-link to="creation-confirm">
-          <h1>{{ $store.state.openCreations }}</h1>
+          <h1 data-test="open-creation">{{ $store.state.openCreations }}</h1>
         </b-link>
       </b-card-text>
     </b-card>