Merge pull request #1043 from gradido/1036-register-page-breaks-without-community

1036 register page breaks without community

frontend/src/mixins/getCommunityInfo.js

@@ -0,0 +1,24 @@
+import { communityInfo } from '../graphql/queries'
+
+export const getCommunityInfoMixin = {
+  methods: {
+    getCommunityInfo() {
+      if (this.$store.state.community.name === '') {
+        this.$apollo
+          .query({
+            query: communityInfo,
+          })
+          .then((result) => {
+            this.$store.commit('community', result.data.getCommunityInfo)
+            return result.data.getCommunityInfo
+          })
+          .catch((error) => {
+            this.$toasted.error(error.message)
+          })
+      }
+    },
+  },
+  created() {
+    this.getCommunityInfo()
+  },
+}

frontend/src/store/store.js

@@ -89,7 +89,10 @@ export const store = new Vuex.Store({
     token: null,
     coinanimation: true,
     newsletterState: null,
-    community: null,
+    community: {
+      name: '',
+      description: '',
+    },
     hasElopage: false,
     publisherId: null,
   },

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

@@ -1,4 +1,4 @@
-import { mount, RouterLinkStub } from '@vue/test-utils'
+import { RouterLinkStub, mount } from '@vue/test-utils'
 import flushPromises from 'flush-promises'
 import Login from './Login'
 
@@ -39,10 +39,8 @@ describe('Login', () => {
       commit: mockStoreCommit,
       state: {
         community: {
-          name: 'Gradido Entwicklung',
-          url: 'http://localhost/vue/',
-          registerUrl: 'http://localhost/vue/register',
-          description: 'Die lokale Entwicklungsumgebung von Gradido.',
+          name: '',
+          description: '',
         },
         publisherId: 12345,
       },
@@ -74,10 +72,6 @@ describe('Login', () => {
       wrapper = Wrapper()
     })
 
-    it('renders the Login form', () => {
-      expect(wrapper.find('div.login-form').exists()).toBeTruthy()
-    })
-
     it('commits the community info to the store', () => {
       expect(mockStoreCommit).toBeCalledWith('community', {
         name: 'test12',
@@ -87,6 +81,10 @@ describe('Login', () => {
       })
     })
 
+    it('renders the Login form', () => {
+      expect(wrapper.find('div.login-form').exists()).toBeTruthy()
+    })
+
     describe('communities gives back error', () => {
       beforeEach(() => {
         apolloQueryMock.mockRejectedValue({
@@ -106,7 +104,18 @@ describe('Login', () => {
       })
     })
 
-    describe('Community Data', () => {
+    describe('Community data already loaded', () => {
+      beforeEach(() => {
+        jest.clearAllMocks()
+        mocks.$store.state.community = {
+          name: 'Gradido Entwicklung',
+          url: 'http://localhost/vue/',
+          registerUrl: 'http://localhost/vue/register',
+          description: 'Die lokale Entwicklungsumgebung von Gradido.',
+        }
+        wrapper = Wrapper()
+      })
+
       it('has a Community name', () => {
         expect(wrapper.find('.test-communitydata b').text()).toBe('Gradido Entwicklung')
       })
@@ -116,6 +125,10 @@ describe('Login', () => {
           'Die lokale Entwicklungsumgebung von Gradido.',
         )
       })
+
+      it('does not call community data update', () => {
+        expect(apolloQueryMock).not.toBeCalled()
+      })
     })
 
     describe('links', () => {

frontend/src/views/Pages/Login.vue

@@ -62,7 +62,8 @@
 <script>
 import InputPassword from '../../components/Inputs/InputPassword'
 import InputEmail from '../../components/Inputs/InputEmail'
-import { login, communityInfo } from '../../graphql/queries'
+import { login } from '../../graphql/queries'
+import { getCommunityInfoMixin } from '../../mixins/getCommunityInfo'
 
 export default {
   name: 'login',
@@ -70,6 +71,7 @@ export default {
     InputPassword,
     InputEmail,
   },
+  mixins: [getCommunityInfoMixin],
   data() {
     return {
       form: {
@@ -107,21 +109,6 @@ export default {
           this.$toasted.error(this.$t('error.no-account'))
         })
     },
-    async onCreated() {
-      this.$apollo
-        .query({
-          query: communityInfo,
-        })
-        .then((result) => {
-          this.$store.commit('community', result.data.getCommunityInfo)
-        })
-        .catch((error) => {
-          this.$toasted.error(error.message)
-        })
-    },
-  },
-  created() {
-    this.onCreated()
   },
 }
 </script>

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

@@ -5,6 +5,19 @@ import Register from './Register'
 
 const localVue = global.localVue
 
+const apolloQueryMock = jest.fn().mockResolvedValue({
+  data: {
+    getCommunityInfo: {
+      name: 'test12',
+      description: 'test community 12',
+      url: 'http://test12.test12/',
+      registerUrl: 'http://test12.test12/vue/register',
+    },
+  },
+})
+
+const toastErrorMock = jest.fn()
+const mockStoreCommit = jest.fn()
 const registerUserMutationMock = jest.fn()
 const routerPushMock = jest.fn()
 
@@ -21,20 +34,23 @@ describe('Register', () => {
     },
     $apollo: {
       mutate: registerUserMutationMock,
+      query: apolloQueryMock,
     },
     $store: {
+      commit: mockStoreCommit,
       state: {
         email: 'peter@lustig.de',
         language: 'en',
         community: {
-          name: 'Gradido Entwicklung',
-          url: 'http://localhost/vue/',
-          registerUrl: 'http://localhost/vue/register',
-          description: 'Die lokale Entwicklungsumgebung von Gradido.',
+          name: '',
+          description: '',
         },
         publisherId: 12345,
       },
     },
+    $toasted: {
+      error: toastErrorMock,
+    },
   }
 
   const stubs = {
@@ -50,6 +66,15 @@ describe('Register', () => {
       wrapper = Wrapper()
     })
 
+    it('commits the community info to the store', () => {
+      expect(mockStoreCommit).toBeCalledWith('community', {
+        name: 'test12',
+        description: 'test community 12',
+        url: 'http://test12.test12/',
+        registerUrl: 'http://test12.test12/vue/register',
+      })
+    })
+
     it('renders the Register form', () => {
       expect(wrapper.find('div#registerform').exists()).toBeTruthy()
     })
@@ -60,16 +85,44 @@ describe('Register', () => {
       })
     })
 
-    describe('Community Data', () => {
-      it('has a Community name?', () => {
+    describe('communities gives back error', () => {
+      beforeEach(() => {
+        apolloQueryMock.mockRejectedValue({
+          message: 'Failed to get communities',
+        })
+        wrapper = Wrapper()
+      })
+
+      it('toasts an error message', () => {
+        expect(toastErrorMock).toBeCalledWith('Failed to get communities')
+      })
+    })
+
+    describe('Community data already loaded', () => {
+      beforeEach(() => {
+        jest.clearAllMocks()
+        mocks.$store.state.community = {
+          name: 'Gradido Entwicklung',
+          url: 'http://localhost/vue/',
+          registerUrl: 'http://localhost/vue/register',
+          description: 'Die lokale Entwicklungsumgebung von Gradido.',
+        }
+        wrapper = Wrapper()
+      })
+
+      it('has a Community name', () => {
         expect(wrapper.find('.test-communitydata b').text()).toBe('Gradido Entwicklung')
       })
 
-      it('has a Community description?', () => {
+      it('has a Community description', () => {
         expect(wrapper.find('.test-communitydata p').text()).toBe(
           'Die lokale Entwicklungsumgebung von Gradido.',
         )
       })
+
+      it('does not call community data update', () => {
+        expect(apolloQueryMock).not.toBeCalled()
+      })
     })
 
     describe('links', () => {

frontend/src/views/Pages/Register.vue

@@ -161,10 +161,12 @@ import InputEmail from '../../components/Inputs/InputEmail.vue'
 import InputPasswordConfirmation from '../../components/Inputs/InputPasswordConfirmation.vue'
 import LanguageSwitchSelect from '../../components/LanguageSwitchSelect.vue'
 import { registerUser } from '../../graphql/mutations'
+import { getCommunityInfoMixin } from '../../mixins/getCommunityInfo'
 
 export default {
   components: { InputPasswordConfirmation, InputEmail, LanguageSwitchSelect },
   name: 'register',
+  mixins: [getCommunityInfoMixin],
   data() {
     return {
       form: {

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

@@ -3,6 +3,19 @@ import RegisterCommunity from './RegisterCommunity'
 
 const localVue = global.localVue
 
+const apolloQueryMock = jest.fn().mockResolvedValue({
+  data: {
+    getCommunityInfo: {
+      name: 'test12',
+      description: 'test community 12',
+      url: 'http://test12.test12/',
+      registerUrl: 'http://test12.test12/vue/register',
+    },
+  },
+})
+const toastErrorMock = jest.fn()
+const mockStoreCommit = jest.fn()
+
 describe('RegisterCommunity', () => {
   let wrapper
 
@@ -11,16 +24,21 @@ describe('RegisterCommunity', () => {
       locale: 'en',
     },
     $t: jest.fn((t) => t),
+    $apollo: {
+      query: apolloQueryMock,
+    },
     $store: {
+      commit: mockStoreCommit,
       state: {
         community: {
-          name: 'Gradido Entwicklung',
-          url: 'http://localhost/vue/',
-          registerUrl: 'http://localhost/vue/register',
-          description: 'Die lokale Entwicklungsumgebung von Gradido.',
+          name: '',
+          description: '',
         },
       },
     },
+    $toasted: {
+      error: toastErrorMock,
+    },
   }
 
   const stubs = {
@@ -36,23 +54,56 @@ describe('RegisterCommunity', () => {
       wrapper = Wrapper()
     })
 
+    it('commits the community info to the store', () => {
+      expect(mockStoreCommit).toBeCalledWith('community', {
+        name: 'test12',
+        description: 'test community 12',
+        url: 'http://test12.test12/',
+        registerUrl: 'http://test12.test12/vue/register',
+      })
+    })
+
     it('renders the Div Element "#register-community"', () => {
       expect(wrapper.find('div#register-community').exists()).toBeTruthy()
     })
 
-    describe('Displaying the current community info', () => {
-      it('has a current community name', () => {
-        expect(wrapper.find('.header h1').text()).toBe('Gradido Entwicklung')
+    describe('communities gives back error', () => {
+      beforeEach(() => {
+        apolloQueryMock.mockRejectedValue({
+          message: 'Failed to get communities',
+        })
+        wrapper = Wrapper()
       })
 
-      it('has a current community description', () => {
-        expect(wrapper.find('.header p').text()).toBe(
+      it('toasts an error message', () => {
+        expect(toastErrorMock).toBeCalledWith('Failed to get communities')
+      })
+    })
+
+    describe('Community data already loaded', () => {
+      beforeEach(() => {
+        jest.clearAllMocks()
+        mocks.$store.state.community = {
+          name: 'Gradido Entwicklung',
+          url: 'http://localhost/vue/',
+          registerUrl: 'http://localhost/vue/register',
+          description: 'Die lokale Entwicklungsumgebung von Gradido.',
+        }
+        wrapper = Wrapper()
+      })
+
+      it('has a Community name', () => {
+        expect(wrapper.find('.justify-content-center h1').text()).toBe('Gradido Entwicklung')
+      })
+
+      it('has a Community description', () => {
+        expect(wrapper.find('.justify-content-center p').text()).toBe(
           'Die lokale Entwicklungsumgebung von Gradido.',
         )
       })
 
-      it('has a current community location', () => {
-        expect(wrapper.find('.header p.community-location').text()).toBe('http://localhost/vue/')
+      it('does not call community data update', () => {
+        expect(apolloQueryMock).not.toBeCalled()
       })
     })
 

frontend/src/views/Pages/RegisterCommunity.vue

@@ -49,12 +49,11 @@
   </div>
 </template>
 <script>
+import { getCommunityInfoMixin } from '../../mixins/getCommunityInfo'
+
 export default {
   name: 'registerCommunity',
-  data() {
-    return {}
-  },
-  methods: {},
+  mixins: [getCommunityInfoMixin],
 }
 </script>
 <style></style>

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

@@ -1,4 +1,5 @@
 import { mount, RouterLinkStub } from '@vue/test-utils'
+import { communities, communityInfo } from '../../graphql/queries'
 import RegisterSelectCommunity from './RegisterSelectCommunity'
 
 const localVue = global.localVue
@@ -11,7 +12,19 @@ const spinnerMock = jest.fn(() => {
   }
 })
 
-const apolloQueryMock = jest.fn().mockResolvedValue({
+const apolloQueryMock = jest
+  .fn()
+  .mockResolvedValueOnce({
+    data: {
+      getCommunityInfo: {
+        name: 'test12',
+        description: 'test community 12',
+        url: 'http://test12.test12/',
+        registerUrl: 'http://test12.test12/vue/register',
+      },
+    },
+  })
+  .mockResolvedValue({
     data: {
       communities: [
         {
@@ -37,9 +50,10 @@ const apolloQueryMock = jest.fn().mockResolvedValue({
         },
       ],
     },
-})
+  })
 
 const toasterMock = jest.fn()
+const mockStoreCommit = jest.fn()
 
 describe('RegisterSelectCommunity', () => {
   let wrapper
@@ -50,12 +64,11 @@ describe('RegisterSelectCommunity', () => {
     },
     $t: jest.fn((t) => t),
     $store: {
+      commit: mockStoreCommit,
       state: {
         community: {
-          name: 'Gradido Entwicklung',
-          url: 'http://localhost/vue/',
-          registerUrl: 'http://localhost/vue/register',
-          description: 'Die lokale Entwicklungsumgebung von Gradido.',
+          name: '',
+          description: '',
         },
       },
     },
@@ -80,9 +93,23 @@ describe('RegisterSelectCommunity', () => {
 
   describe('mount', () => {
     beforeEach(() => {
+      jest.clearAllMocks()
       wrapper = Wrapper()
     })
 
+    it('calls the API to get the community info data', () => {
+      expect(apolloQueryMock).toBeCalledWith({
+        query: communityInfo,
+      })
+    })
+
+    it('calls the API to get the communities data', () => {
+      expect(apolloQueryMock).toBeCalledWith({
+        query: communities,
+        fetchPolicy: 'network-only',
+      })
+    })
+
     it('renders the Div Element "#register-select-community"', () => {
       expect(wrapper.find('div#register-select-community').exists()).toBeTruthy()
     })
@@ -91,8 +118,72 @@ describe('RegisterSelectCommunity', () => {
       expect(spinnerMock).toBeCalled()
     })
 
+    describe('communities gives back error', () => {
+      beforeEach(() => {
+        apolloQueryMock.mockRejectedValue({
+          message: 'Failed to get communities',
+        })
+        wrapper = Wrapper()
+      })
+
+      it('toasts an error message', () => {
+        expect(toasterMock).toBeCalledWith('Failed to get communities')
+      })
+    })
+
+    describe('Community data already loaded', () => {
+      beforeEach(() => {
+        jest.clearAllMocks()
+        mocks.$store.state.community = {
+          name: 'Gradido Entwicklung',
+          description: 'Die lokale Entwicklungsumgebung von Gradido.',
+          url: 'http://localhost/vue/',
+          registerUrl: 'http://localhost/vue/register-community',
+        }
+        wrapper = Wrapper()
+      })
+
+      it('does not call community info data when already filled', () => {
+        expect(apolloQueryMock).not.toBeCalledWith({
+          query: communityInfo,
+        })
+      })
+
+      it('has a Community name', () => {
+        expect(wrapper.find('.card-body b').text()).toBe('Gradido Entwicklung')
+      })
+
+      it('has a Community description', () => {
+        expect(wrapper.find('.card-body p').text()).toBe(
+          'Die lokale Entwicklungsumgebung von Gradido.',
+        )
+      })
+    })
+
     describe('calls the apollo query', () => {
       describe('server returns data', () => {
+        beforeEach(async () => {
+          wrapper = Wrapper()
+          await wrapper.setData({
+            communities: [
+              {
+                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',
+              },
+            ],
+          })
+        })
+
         it('calls the API to get the data', () => {
           expect(apolloQueryMock).toBeCalled()
         })

frontend/src/views/Pages/RegisterSelectCommunity.vue

@@ -7,7 +7,7 @@
         <b-card class="border-0 mb-0" bg-variant="primary">
           <b>{{ $store.state.community.name }}</b>
           <br />
-          {{ $store.state.community.description }}
+          <p>{{ $store.state.community.description }}</p>
           <br />
           <router-link to="/register">
             <b-button variant="outline-secondary">
@@ -24,7 +24,7 @@
           <b-card bg-variant="secondary">
             <b>{{ community.name }}</b>
             <br />
-            {{ community.description }}
+            <p>{{ community.description }}</p>
             <br />
             <b>
               <small>
@@ -49,6 +49,7 @@
 </template>
 <script>
 import { communities } from '../../graphql/queries'
+import { getCommunityInfoMixin } from '../../mixins/getCommunityInfo'
 
 export default {
   name: 'registerSelectCommunity',
@@ -58,6 +59,7 @@ export default {
       pending: true,
     }
   },
+  mixins: [getCommunityInfoMixin],
   methods: {
     async getCommunities() {
       const loader = this.$loading.show({