remove logic from template. Complete tests

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/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('has two communities', () => {
+          expect(wrapper.vm.communities).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,30 +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 />
-            <router-link to="/register">
-              <b-button variant="outline-secondary">
-                {{ $t('community.continue-to-registration') }}
-              </b-button>
-            </router-link>
-          </b-card>
-        </div>
+        <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>
+          </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 }}
@@ -75,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)