Merge pull request #952 from gradido/clean-up-frontend-links

refactor: Clean Up Frontend Links, Tests and Logic

frontend/src/routes/router.test.js

@@ -131,6 +131,20 @@ describe('router', () => {
         })
       })
 
+      describe('register-community', () => {
+        it('loads the "registerCommunity" component', async () => {
+          const component = await routes.find((r) => r.path === '/register-community').component()
+          expect(component.default.name).toBe('registerCommunity')
+        })
+      })
+
+      describe('select-community', () => {
+        it('loads the "registerSelectCommunity" component', async () => {
+          const component = await routes.find((r) => r.path === '/select-community').component()
+          expect(component.default.name).toBe('registerSelectCommunity')
+        })
+      })
+
       describe('reset', () => {
         it('loads the "ResetPassword" component', async () => {
           const component = await routes.find((r) => r.path === '/reset/:optin').component()

frontend/src/routes/routes.js

@@ -36,7 +36,7 @@ const routes = [
     path: '/thx/:comingFrom',
     component: () => import('../views/Pages/thx.vue'),
     beforeEnter: (to, from, next) => {
-      const validFrom = ['password', 'reset', 'register', 'community']
+      const validFrom = ['password', 'reset', 'register']
       if (!validFrom.includes(from.path.split('/')[1])) {
         next({ path: '/login' })
       } else {

frontend/src/views/Pages/Register.vue

@@ -124,10 +124,11 @@
 
                   <div class="text-center">
                     <div class="text-center">
-                      <b-button class="test-button-back" variant="outline-secondary" to="/login">
-                        {{ $t('back') }}
-                      </b-button>
-
+                      <router-link class="test-button-back" to="/login">
+                        <b-button variant="outline-secondary">
+                          {{ $t('back') }}
+                        </b-button>
+                      </router-link>
                       <b-button
                         :disabled="!(namesFilled && emailFilled && form.agree && !!language)"
                         type="submit"
@@ -145,13 +146,11 @@
       </b-row>
     </b-container>
     <div class="text-center pt-4">
-      <b-button
-        class="test-button-another-community"
-        variant="outline-secondary"
-        to="/select-community"
-      >
-        {{ $t('community.choose-another-community') }}
-      </b-button>
+      <router-link class="test-button-another-community" to="/select-community">
+        <b-button variant="outline-secondary">
+          {{ $t('community.choose-another-community') }}
+        </b-button>
+      </router-link>
     </div>
   </div>
 </template>

frontend/src/views/Pages/RegisterCommunity.spec.js

@@ -1,4 +1,4 @@
-import { mount } from '@vue/test-utils'
+import { mount, RouterLinkStub } from '@vue/test-utils'
 import RegisterCommunity from './RegisterCommunity'
 
 const localVue = global.localVue
@@ -23,8 +23,12 @@ describe('RegisterCommunity', () => {
     },
   }
 
+  const stubs = {
+    RouterLink: RouterLinkStub,
+  }
+
   const Wrapper = () => {
-    return mount(RegisterCommunity, { localVue, mocks })
+    return mount(RegisterCommunity, { localVue, mocks, stubs })
   }
 
   describe('mount', () => {

frontend/src/views/Pages/RegisterCommunity.vue

@@ -17,24 +17,30 @@
           </b-row>
           <b-row>
             <b-col class="text-center">
-              <b-button variant="outline-secondary" to="/register">
-                {{ $t('community.continue-to-registration') }}
-              </b-button>
+              <router-link to="/register">
+                <b-button variant="outline-secondary">
+                  {{ $t('community.continue-to-registration') }}
+                </b-button>
+              </router-link>
             </b-col>
           </b-row>
 
           <hr />
           <b-row>
             <b-col class="text-center">
-              <b-button variant="outline-secondary" to="/select-community">
-                {{ $t('community.choose-another-community') }}
-              </b-button>
+              <router-link to="/select-community">
+                <b-button variant="outline-secondary">
+                  {{ $t('community.choose-another-community') }}
+                </b-button>
+              </router-link>
             </b-col>
           </b-row>
           <hr />
           <b-row>
             <b-col class="text-center">
-              <b-button variant="outline-secondary" to="/login">{{ $t('back') }}</b-button>
+              <router-link to="/login">
+                <b-button variant="outline-secondary">{{ $t('back') }}</b-button>
+              </router-link>
             </b-col>
           </b-row>
         </div>
@@ -44,7 +50,7 @@
 </template>
 <script>
 export default {
-  name: 'registerSelectCommunity',
+  name: 'registerCommunity',
   data() {
     return {}
   },

frontend/src/views/Pages/RegisterSelectCommunity.spec.js

@@ -1,26 +1,44 @@
-import { mount } from '@vue/test-utils'
+import { mount, RouterLinkStub } from '@vue/test-utils'
 import RegisterSelectCommunity from './RegisterSelectCommunity'
 
 const localVue = global.localVue
 
 const spinnerHideMock = jest.fn()
+
 const spinnerMock = jest.fn(() => {
   return {
     hide: spinnerHideMock,
   }
 })
+
 const apolloQueryMock = jest.fn().mockResolvedValue({
   data: {
     communities: [
       {
-        name: 'test1',
-        description: 'description 1',
-        url: 'http://test.test/vue',
+        id: 1,
+        name: 'Gradido Entwicklung',
+        description: 'Die lokale Entwicklungsumgebung von Gradido.',
+        url: 'http://localhost/vue/',
         registerUrl: 'http://localhost/vue/register-community',
       },
+      {
+        id: 2,
+        name: 'Gradido Staging',
+        description: 'Der Testserver der Gradido-Akademie.',
+        url: 'https://stage1.gradido.net/vue/',
+        registerUrl: 'https://stage1.gradido.net/vue/register-community',
+      },
+      {
+        id: 3,
+        name: 'Gradido-Akademie',
+        description: 'Freies Institut für Wirtschaftsbionik.',
+        url: 'https://gradido.net',
+        registerUrl: 'https://gdd1.gradido.com/vue/register-community',
+      },
     ],
   },
 })
+
 const toasterMock = jest.fn()
 
 describe('RegisterSelectCommunity', () => {
@@ -52,8 +70,12 @@ describe('RegisterSelectCommunity', () => {
     },
   }
 
+  const stubs = {
+    RouterLink: RouterLinkStub,
+  }
+
   const Wrapper = () => {
-    return mount(RegisterSelectCommunity, { localVue, mocks })
+    return mount(RegisterSelectCommunity, { localVue, mocks, stubs })
   }
 
   describe('mount', () => {
@@ -65,16 +87,40 @@ describe('RegisterSelectCommunity', () => {
       expect(wrapper.find('div#register-select-community').exists()).toBeTruthy()
     })
 
+    it('starts with a spinner', () => {
+      expect(spinnerMock).toBeCalled()
+    })
+
     describe('calls the apollo query', () => {
-      beforeEach(() => {
-        apolloQueryMock.mockRejectedValue({
-          message: 'Wrong thing',
+      describe('server returns data', () => {
+        it('calls the API to get the data', () => {
+          expect(apolloQueryMock).toBeCalled()
+        })
+
+        it('shows two other communities', () => {
+          expect(wrapper.findAll('div.bg-secondary')).toHaveLength(2)
+        })
+
+        it('hides the spinner', () => {
+          expect(spinnerHideMock).toBeCalled()
         })
-        wrapper = Wrapper()
       })
 
-      it('toast an error', () => {
-        expect(toasterMock).toBeCalledWith('Wrong thing')
+      describe('server response is error', () => {
+        beforeEach(() => {
+          apolloQueryMock.mockRejectedValue({
+            message: 'Wrong thing',
+          })
+          wrapper = Wrapper()
+        })
+
+        it('toast an error', () => {
+          expect(toasterMock).toBeCalledWith('Wrong thing')
+        })
+
+        it('hides the spinner', () => {
+          expect(spinnerHideMock).toBeCalled()
+        })
       })
     })
   })

frontend/src/views/Pages/RegisterSelectCommunity.vue

@@ -4,28 +4,24 @@
       <div class="pb-3">{{ $t('community.current-community') }}</div>
 
       <div v-if="!pending">
-        <div v-for="community in communities" :key="community.name">
-          <b-card
-            v-if="community.name === $store.state.community.name"
-            class="border-0 mb-0"
-            bg-variant="primary"
-          >
-            <b>{{ community.name }}</b>
-            <br />
-            {{ $store.state.community.description }}
-            <br />
-            <b-button variant="outline-secondary" to="/register">
+        <b-card class="border-0 mb-0" bg-variant="primary">
+          <b>{{ $store.state.community.name }}</b>
+          <br />
+          {{ $store.state.community.description }}
+          <br />
+          <router-link to="/register">
+            <b-button variant="outline-secondary">
               {{ $t('community.continue-to-registration') }}
             </b-button>
-          </b-card>
-        </div>
+          </router-link>
+        </b-card>
 
         <hr />
 
         <div>{{ $t('community.other-communities') }}</div>
 
         <div v-for="community in communities" :key="community.id" class="pb-3">
-          <b-card v-if="community.name != $store.state.community.name" bg-variant="secondary">
+          <b-card bg-variant="secondary">
             <b>{{ community.name }}</b>
             <br />
             {{ community.description }}
@@ -44,7 +40,9 @@
       </div>
 
       <div class="text-center py-lg-4">
-        <b-button variant="outline-secondary" to="/login">{{ $t('back') }}</b-button>
+        <router-link to="/login">
+          <b-button variant="outline-secondary">{{ $t('back') }}</b-button>
+        </router-link>
       </div>
     </b-container>
   </div>
@@ -71,7 +69,9 @@ export default {
           fetchPolicy: 'network-only',
         })
         .then((response) => {
-          this.communities = response.data.communities
+          this.communities = response.data.communities.filter(
+            (c) => c.name !== this.$store.state.community.name,
+          )
         })
         .catch((error) => {
           this.$toasted.error(error.message)

frontend/src/views/Pages/UserProfile/UserCard_CoinAnimation.spec.js

@@ -37,6 +37,7 @@ describe('UserCard_CoinAnimation', () => {
 
   describe('mount', () => {
     beforeEach(() => {
+      jest.clearAllMocks()
       wrapper = Wrapper()
     })
 
@@ -50,7 +51,7 @@ describe('UserCard_CoinAnimation', () => {
 
     describe('enable with success', () => {
       beforeEach(async () => {
-        mocks.$store.state.coinanimation = false
+        await wrapper.setData({ CoinAnimationStatus: false })
         mockAPIcall.mockResolvedValue({
           data: {
             updateUserInfos: {
@@ -58,7 +59,7 @@ describe('UserCard_CoinAnimation', () => {
             },
           },
         })
-        await wrapper.find('input').trigger('change')
+        await wrapper.find('input').setChecked()
       })
 
       it('calls the updateUserInfos mutation', () => {
@@ -81,7 +82,7 @@ describe('UserCard_CoinAnimation', () => {
 
     describe('disable with success', () => {
       beforeEach(async () => {
-        mocks.$store.state.coinanimation = true
+        await wrapper.setData({ CoinAnimationStatus: true })
         mockAPIcall.mockResolvedValue({
           data: {
             updateUserInfos: {
@@ -89,7 +90,7 @@ describe('UserCard_CoinAnimation', () => {
             },
           },
         })
-        wrapper.find('input').trigger('change')
+        await wrapper.find('input').setChecked(false)
       })
 
       it('calls the subscribe mutation', () => {

frontend/src/views/Pages/UserProfile/UserCard_Newsletter.spec.js

@@ -38,6 +38,7 @@ describe('UserCard_Newsletter', () => {
 
   describe('mount', () => {
     beforeEach(() => {
+      jest.clearAllMocks()
       wrapper = Wrapper()
     })
 
@@ -51,13 +52,13 @@ describe('UserCard_Newsletter', () => {
 
     describe('unsubscribe with success', () => {
       beforeEach(async () => {
-        await wrapper.setData({ newsletterState: false })
+        await wrapper.setData({ newsletterState: true })
         mockAPIcall.mockResolvedValue({
           data: {
             unsubscribeNewsletter: true,
           },
         })
-        await wrapper.find('input').trigger('change')
+        await wrapper.find('input').setChecked(false)
       })
 
       it('calls the unsubscribe mutation', () => {
@@ -80,13 +81,13 @@ describe('UserCard_Newsletter', () => {
 
     describe('subscribe with success', () => {
       beforeEach(async () => {
-        await wrapper.setData({ newsletterState: true })
+        await wrapper.setData({ newsletterState: false })
         mockAPIcall.mockResolvedValue({
           data: {
             subscribeNewsletter: true,
           },
         })
-        wrapper.find('input').trigger('change')
+        await wrapper.find('input').setChecked()
       })
 
       it('calls the subscribe mutation', () => {
@@ -104,7 +105,7 @@ describe('UserCard_Newsletter', () => {
       })
 
       it('toasts a success message', () => {
-        expect(toastSuccessMock).toBeCalledWith('settings.newsletter.newsletterFalse')
+        expect(toastSuccessMock).toBeCalledWith('settings.newsletter.newsletterTrue')
       })
     })