Merge pull request #2312 from gradido/2294-Contribution-Links-on-its-own-Page

2294 contribution links on its own page

admin/src/components/ContributionLink/ContributionLink.vue

@@ -35,8 +35,8 @@
   </div>
 </template>
 <script>
-import ContributionLinkForm from './ContributionLinkForm.vue'
-import ContributionLinkList from './ContributionLinkList.vue'
+import ContributionLinkForm from '../ContributionLink/ContributionLinkForm.vue'
+import ContributionLinkList from '../ContributionLink/ContributionLinkList.vue'
 
 export default {
   name: 'ContributionLink',

admin/src/components/ContributionLink/ContributionLinkForm.spec.js

@@ -1,6 +1,6 @@
 import { mount } from '@vue/test-utils'
 import ContributionLinkForm from './ContributionLinkForm.vue'
-import { toastErrorSpy, toastSuccessSpy } from '../../test/testSetup'
+import { toastErrorSpy, toastSuccessSpy } from '../../../test/testSetup'
 import { createContributionLink } from '@/graphql/createContributionLink.js'
 
 const localVue = global.localVue

admin/src/components/ContributionLink/ContributionLinkList.spec.js

@@ -1,6 +1,6 @@
 import { mount } from '@vue/test-utils'
 import ContributionLinkList from './ContributionLinkList.vue'
-import { toastSuccessSpy, toastErrorSpy } from '../../test/testSetup'
+import { toastSuccessSpy, toastErrorSpy } from '../../../test/testSetup'
 // import { deleteContributionLink } from '../graphql/deleteContributionLink'
 
 const localVue = global.localVue

admin/src/components/ContributionLink/ContributionLinkList.vue

@@ -46,7 +46,7 @@
 </template>
 <script>
 import { deleteContributionLink } from '@/graphql/deleteContributionLink.js'
-import FigureQrCode from './FigureQrCode.vue'
+import FigureQrCode from '../FigureQrCode.vue'
 
 export default {
   name: 'ContributionLinkList',

admin/src/components/NavBar.spec.js

@@ -7,6 +7,10 @@ const apolloMutateMock = jest.fn()
 const storeDispatchMock = jest.fn()
 const routerPushMock = jest.fn()
 
+const stubs = {
+  RouterLink: true,
+}
+
 const mocks = {
   $t: jest.fn((t) => t),
   $apollo: {
@@ -28,7 +32,7 @@ describe('NavBar', () => {
   let wrapper
 
   const Wrapper = () => {
-    return mount(NavBar, { mocks, localVue })
+    return mount(NavBar, { mocks, localVue, stubs })
   }
 
   describe('mount', () => {
@@ -41,13 +45,35 @@ describe('NavBar', () => {
     })
   })
 
+  describe('Navbar Menu', () => {
+    it('has a link to overview', () => {
+      expect(wrapper.findAll('.nav-item').at(0).find('a').attributes('href')).toBe('/')
+    })
+    it('has a link to /user', () => {
+      expect(wrapper.findAll('.nav-item').at(1).find('a').attributes('href')).toBe('/user')
+    })
+    it('has a link to /creation', () => {
+      expect(wrapper.findAll('.nav-item').at(2).find('a').attributes('href')).toBe('/creation')
+    })
+    it('has a link to /creation-confirm', () => {
+      expect(wrapper.findAll('.nav-item').at(3).find('a').attributes('href')).toBe(
+        '/creation-confirm',
+      )
+    })
+    it('has a link to /contribution-links', () => {
+      expect(wrapper.findAll('.nav-item').at(4).find('a').attributes('href')).toBe(
+        '/contribution-links',
+      )
+    })
+  })
+
   describe('wallet', () => {
     const assignLocationSpy = jest.fn()
     beforeEach(async () => {
-      await wrapper.findAll('a').at(5).trigger('click')
+      await wrapper.findAll('.nav-item').at(5).find('a').trigger('click')
     })
 
-    it.skip('changes widnow location to wallet', () => {
+    it.skip('changes window location to wallet', () => {
       expect(assignLocationSpy).toBeCalledWith('valid-token')
     })
 
@@ -63,7 +89,7 @@ describe('NavBar', () => {
       window.location = {
         assign: windowLocationMock,
       }
-      await wrapper.findAll('a').at(6).trigger('click')
+      await wrapper.findAll('.nav-item').at(6).find('a').trigger('click')
     })
 
     it('redirects to /logout', () => {

admin/src/components/NavBar.vue

@@ -19,6 +19,9 @@
           >
             {{ $store.state.openCreations }} {{ $t('navbar.open_creation') }}
           </b-nav-item>
+          <b-nav-item to="/contribution-links">
+            {{ $t('navbar.automaticContributions') }}
+          </b-nav-item>
           <b-nav-item @click="wallet">{{ $t('navbar.my-account') }}</b-nav-item>
           <b-nav-item @click="logout">{{ $t('navbar.logout') }}</b-nav-item>
         </b-navbar-nav>

admin/src/locales/de.json

@@ -95,6 +95,7 @@
   "multiple_creation_text": "Bitte wähle ein oder mehrere Mitglieder aus für die du Schöpfen möchtest.",
   "name": "Name",
   "navbar": {
+    "automaticContributions": "automatische Beiträge",
     "logout": "Abmelden",
     "multi_creation": "Mehrfachschöpfung",
     "my-account": "Mein Konto",

admin/src/locales/en.json

@@ -95,6 +95,7 @@
   "multiple_creation_text": "Please select one or more members for which you would like to perform creations.",
   "name": "Name",
   "navbar": {
+    "automaticContributions": "Automatic Contributions",
     "logout": "Logout",
     "multi_creation": "Multiple creation",
     "my-account": "My Account",

admin/src/pages/ContributionLinks.spec.js

@@ -0,0 +1,58 @@
+import { mount } from '@vue/test-utils'
+import ContributionLinks from './ContributionLinks.vue'
+import { listContributionLinks } from '@/graphql/listContributionLinks.js'
+
+const localVue = global.localVue
+
+const apolloQueryMock = jest.fn().mockResolvedValueOnce({
+  data: {
+    listContributionLinks: {
+      links: [
+        {
+          id: 1,
+          name: 'Meditation',
+          memo: 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut l',
+          amount: '200',
+          validFrom: '2022-04-01',
+          validTo: '2022-08-01',
+          cycle: 'täglich',
+          maxPerCycle: '3',
+          maxAmountPerMonth: 0,
+          link: 'https://localhost/redeem/CL-1a2345678',
+        },
+      ],
+      count: 1,
+    },
+  },
+})
+
+const mocks = {
+  $t: jest.fn((t) => t),
+  $d: jest.fn((d) => d),
+  $apollo: {
+    query: apolloQueryMock,
+  },
+}
+
+describe('ContributionLinks', () => {
+  // eslint-disable-next-line no-unused-vars
+  let wrapper
+
+  const Wrapper = () => {
+    return mount(ContributionLinks, { localVue, mocks })
+  }
+
+  describe('mount', () => {
+    beforeEach(() => {
+      wrapper = Wrapper()
+    })
+
+    it('calls listContributionLinks', () => {
+      expect(apolloQueryMock).toBeCalledWith(
+        expect.objectContaining({
+          query: listContributionLinks,
+        }),
+      )
+    })
+  })
+})

admin/src/pages/ContributionLinks.vue

@@ -0,0 +1,45 @@
+<template>
+  <div class="contribution-link">
+    <contribution-link
+      :items="items"
+      :count="count"
+      @get-contribution-links="getContributionLinks"
+    />
+  </div>
+</template>
+<script>
+import { listContributionLinks } from '@/graphql/listContributionLinks.js'
+import ContributionLink from '../components/ContributionLink/ContributionLink.vue'
+
+export default {
+  name: 'ContributionLinks',
+  components: {
+    ContributionLink,
+  },
+  data() {
+    return {
+      items: [],
+      count: 0,
+    }
+  },
+  methods: {
+    getContributionLinks() {
+      this.$apollo
+        .query({
+          query: listContributionLinks,
+          fetchPolicy: 'network-only',
+        })
+        .then((result) => {
+          this.count = result.data.listContributionLinks.count
+          this.items = result.data.listContributionLinks.links
+        })
+        .catch(() => {
+          this.toastError('listContributionLinks has no result, use default data')
+        })
+    },
+  },
+  created() {
+    this.getContributionLinks()
+  },
+}
+</script>

admin/src/pages/Overview.spec.js

@@ -1,6 +1,5 @@
 import { mount } from '@vue/test-utils'
 import Overview from './Overview.vue'
-import { listContributionLinks } from '@/graphql/listContributionLinks.js'
 import { communityStatistics } from '@/graphql/communityStatistics.js'
 import { listUnconfirmedContributions } from '@/graphql/listUnconfirmedContributions.js'
 
@@ -36,27 +35,6 @@ const apolloQueryMock = jest
       },
     },
   })
-  .mockResolvedValueOnce({
-    data: {
-      listContributionLinks: {
-        links: [
-          {
-            id: 1,
-            name: 'Meditation',
-            memo: 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut l',
-            amount: '200',
-            validFrom: '2022-04-01',
-            validTo: '2022-08-01',
-            cycle: 'täglich',
-            maxPerCycle: '3',
-            maxAmountPerMonth: 0,
-            link: 'https://localhost/redeem/CL-1a2345678',
-          },
-        ],
-        count: 1,
-      },
-    },
-  })
   .mockResolvedValue({
     data: {
       listUnconfirmedContributions: [
@@ -118,14 +96,6 @@ describe('Overview', () => {
       )
     })
 
-    it('calls listContributionLinks', () => {
-      expect(apolloQueryMock).toBeCalledWith(
-        expect.objectContaining({
-          query: listContributionLinks,
-        }),
-      )
-    })
-
     it('commits three pending creations to store', () => {
       expect(storeCommitMock).toBeCalledWith('setOpenCreations', 3)
     })

admin/src/pages/Overview.vue

@@ -28,31 +28,21 @@
         </b-link>
       </b-card-text>
     </b-card>
-    <contribution-link
-      :items="items"
-      :count="count"
-      @get-contribution-links="getContributionLinks"
-    />
     <community-statistic class="mt-5" v-model="statistics" />
   </div>
 </template>
 <script>
-import { listContributionLinks } from '@/graphql/listContributionLinks.js'
 import { communityStatistics } from '@/graphql/communityStatistics.js'
-import ContributionLink from '../components/ContributionLink.vue'
 import CommunityStatistic from '../components/CommunityStatistic.vue'
 import { listUnconfirmedContributions } from '@/graphql/listUnconfirmedContributions.js'
 
 export default {
   name: 'overview',
   components: {
-    ContributionLink,
     CommunityStatistic,
   },
   data() {
     return {
-      items: [],
-      count: 0,
       statistics: {
         totalUsers: null,
         activeUsers: null,
@@ -75,20 +65,6 @@ export default {
           this.$store.commit('setOpenCreations', result.data.listUnconfirmedContributions.length)
         })
     },
-    getContributionLinks() {
-      this.$apollo
-        .query({
-          query: listContributionLinks,
-          fetchPolicy: 'network-only',
-        })
-        .then((result) => {
-          this.count = result.data.listContributionLinks.count
-          this.items = result.data.listContributionLinks.links
-        })
-        .catch(() => {
-          this.toastError('listContributionLinks has no result, use default data')
-        })
-    },
     getCommunityStatistics() {
       this.$apollo
         .query({
@@ -113,7 +89,6 @@ export default {
   created() {
     this.getPendingCreations()
     this.getCommunityStatistics()
-    this.getContributionLinks()
   },
 }
 </script>

admin/src/router/router.test.js

@@ -45,7 +45,7 @@ describe('router', () => {
 
     describe('routes', () => {
       it('has seven routes defined', () => {
-        expect(routes).toHaveLength(7)
+        expect(routes).toHaveLength(8)
       })
 
       it('has "/overview" as default', async () => {
@@ -81,6 +81,13 @@ describe('router', () => {
         })
       })
 
+      describe('contribution-links', () => {
+        it('loads the "ContributionLinks" component', async () => {
+          const component = await routes.find((r) => r.path === '/contribution-links').component()
+          expect(component.default.name).toBe('ContributionLinks')
+        })
+      })
+
       describe('not found page', () => {
         it('renders the "NotFound" component', async () => {
           const component = await routes.find((r) => r.path === '*').component()

admin/src/router/routes.js

@@ -23,6 +23,10 @@ const routes = [
     path: '/creation-confirm',
     component: () => import('@/pages/CreationConfirm.vue'),
   },
+  {
+    path: '/contribution-links',
+    component: () => import('@/pages/ContributionLinks.vue'),
+  },
   {
     path: '*',
     component: () => import('@/components/NotFoundPage.vue'),