From 25c26ce1583c3ab9cb9d58294f95a9e02c1d90e5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Wolfgang=20Hu=C3=9F?= <wolle.huss@pjannto.com>
Date: Tue, 20 Sep 2022 13:03:00 +0200
Subject: [PATCH] test group profile page, a start

---
 backend/src/schema/resolvers/groups.spec.js   |   12 +-
 webapp/components/Button/JoinLeaveButton.vue  |    4 +-
 webapp/components/Uploader/AvatarUploader.vue |    2 +-
 webapp/pages/group/_id/_slug.___spec.js       |   95 --
 webapp/pages/group/_id/_slug.spec.js          | 1199 +++++++++++++++++
 webapp/pages/group/_id/_slug.vue              |   12 +-
 6 files changed, 1216 insertions(+), 108 deletions(-)
 delete mode 100644 webapp/pages/group/_id/_slug.___spec.js
 create mode 100644 webapp/pages/group/_id/_slug.spec.js

diff --git a/backend/src/schema/resolvers/groups.spec.js b/backend/src/schema/resolvers/groups.spec.js
index 98f37345b..d707440a4 100644
--- a/backend/src/schema/resolvers/groups.spec.js
+++ b/backend/src/schema/resolvers/groups.spec.js
@@ -55,18 +55,18 @@ const seedBasicsAndClearAuthentication = async () => {
     },
   )
   await Promise.all([
-    neode.create('Category', {
-      id: 'cat9',
-      name: 'Democracy & Politics',
-      slug: 'democracy-politics',
-      icon: 'university',
-    }),
     neode.create('Category', {
       id: 'cat4',
       name: 'Environment & Nature',
       slug: 'environment-nature',
       icon: 'tree',
     }),
+    neode.create('Category', {
+      id: 'cat9',
+      name: 'Democracy & Politics',
+      slug: 'democracy-politics',
+      icon: 'university',
+    }),
     neode.create('Category', {
       id: 'cat15',
       name: 'Consumption & Sustainability',
diff --git a/webapp/components/Button/JoinLeaveButton.vue b/webapp/components/Button/JoinLeaveButton.vue
index 6aa4a398d..9bcb5042a 100644
--- a/webapp/components/Button/JoinLeaveButton.vue
+++ b/webapp/components/Button/JoinLeaveButton.vue
@@ -1,6 +1,6 @@
 <template>
   <base-button
-    class="track-button"
+    class="join-leave-button"
     :disabled="disabled"
     :loading="localLoading"
     :icon="icon"
@@ -129,7 +129,7 @@ export default {
 </script>
 
 <style lang="scss">
-.track-button {
+.join-leave-button {
   display: block;
   width: 100%;
 }
diff --git a/webapp/components/Uploader/AvatarUploader.vue b/webapp/components/Uploader/AvatarUploader.vue
index 39cb9136b..eacb44d3a 100644
--- a/webapp/components/Uploader/AvatarUploader.vue
+++ b/webapp/components/Uploader/AvatarUploader.vue
@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="avatar-uploader">
     <vue-dropzone
       id="customdropzone"
       :key="avatarUrl"
diff --git a/webapp/pages/group/_id/_slug.___spec.js b/webapp/pages/group/_id/_slug.___spec.js
deleted file mode 100644
index f83c0f937..000000000
--- a/webapp/pages/group/_id/_slug.___spec.js
+++ /dev/null
@@ -1,95 +0,0 @@
-// import { config, mount } from '@vue/test-utils'
-// import ProfileSlug from './_slug.vue'
-
-// const localVue = global.localVue
-
-// localVue.filter('date', (d) => d)
-
-// config.stubs['client-only'] = '<span><slot /></span>'
-// config.stubs['v-popover'] = '<span><slot /></span>'
-// config.stubs['nuxt-link'] = '<span><slot /></span>'
-// config.stubs['infinite-loading'] = '<span><slot /></span>'
-// config.stubs['follow-list'] = '<span><slot /></span>'
-
-// describe('ProfileSlug', () => {
-//   let wrapper
-//   let Wrapper
-//   let mocks
-
-//   beforeEach(() => {
-//     mocks = {
-//       post: {
-//         id: 'p23',
-//         name: 'It is a post',
-//       },
-//       $t: jest.fn(),
-//       // If you're mocking router, then don't use VueRouter with localVue: https://vue-test-utils.vuejs.org/guides/using-with-vue-router.html
-//       $route: {
-//         params: {
-//           id: '4711',
-//           slug: 'john-doe',
-//         },
-//       },
-//       $router: {
-//         history: {
-//           push: jest.fn(),
-//         },
-//       },
-//       $toast: {
-//         success: jest.fn(),
-//         error: jest.fn(),
-//       },
-//       $apollo: {
-//         loading: false,
-//         mutate: jest.fn().mockResolvedValue(),
-//       },
-//     }
-//   })
-
-//   describe('mount', () => {
-//     Wrapper = () => {
-//       return mount(ProfileSlug, {
-//         mocks,
-//         localVue,
-//       })
-//     }
-
-//     describe('given an authenticated user', () => {
-//       beforeEach(() => {
-//         mocks.$filters = {
-//           removeLinks: (c) => c,
-//           truncate: (a) => a,
-//         }
-//         mocks.$store = {
-//           getters: {
-//             'auth/isModerator': () => false,
-//             'auth/user': {
-//               id: 'u23',
-//             },
-//           },
-//         }
-//       })
-
-//       describe('given a user for the profile', () => {
-//         beforeEach(() => {
-//           wrapper = Wrapper()
-//           wrapper.setData({
-//             User: [
-//               {
-//                 id: 'u3',
-//                 name: 'Bob the builder',
-//                 contributionsCount: 6,
-//                 shoutedCount: 7,
-//                 commentedCount: 8,
-//               },
-//             ],
-//           })
-//         })
-
-//         it('displays name of the user', () => {
-//           expect(wrapper.text()).toContain('Bob the builder')
-//         })
-//       })
-//     })
-//   })
-// })
diff --git a/webapp/pages/group/_id/_slug.spec.js b/webapp/pages/group/_id/_slug.spec.js
new file mode 100644
index 000000000..579ed2883
--- /dev/null
+++ b/webapp/pages/group/_id/_slug.spec.js
@@ -0,0 +1,1199 @@
+import { config, mount } from '@vue/test-utils'
+import GroupProfileSlug from './_slug.vue'
+
+const localVue = global.localVue
+
+localVue.filter('date', (d) => d)
+
+config.stubs['client-only'] = '<span><slot /></span>'
+// config.stubs['v-popover'] = '<span><slot /></span>'
+config.stubs['nuxt-link'] = '<span><slot /></span>'
+// config.stubs['infinite-loading'] = '<span><slot /></span>'
+// config.stubs['follow-list'] = '<span><slot /></span>'
+
+describe('GroupProfileSlug', () => {
+  let wrapper
+  let Wrapper
+  let mocks
+  let yogaPractice
+  let schoolForCitizens
+  let investigativeJournalism
+  let peterLustig
+  let jennyRostock
+  let bobDerBaumeister
+  let huey
+
+  beforeEach(() => {
+    mocks = {
+      $env: {
+        CATEGORIES_ACTIVE: true,
+      },
+      // post: {
+      //   id: 'p23',
+      //   name: 'It is a post',
+      // },
+      $t: jest.fn((a) => a),
+      $filters: {
+        removeLinks: (c) => c,
+        truncate: (a) => a,
+      },
+      // If you're mocking router, then don't use VueRouter with localVue: https://vue-test-utils.vuejs.org/guides/using-with-vue-router.html
+      $route: {
+        params: {
+          id: 'g1',
+          slug: 'school-for-citizens',
+        },
+      },
+      $router: {
+        history: {
+          push: jest.fn(),
+        },
+      },
+      $toast: {
+        success: jest.fn(),
+        error: jest.fn(),
+      },
+      $apollo: {
+        loading: false,
+        mutate: jest.fn().mockResolvedValue(),
+      },
+    }
+    yogaPractice = {
+      id: 'g2',
+      name: 'Yoga Practice',
+      slug: 'yoga-practice',
+      about: 'We do yoga around the clock.',
+      description: `<h3>What Is yoga?</h3><p>Yoga is not just about practicing asanas. It's about how we do it.</p><p class="">And practicing asanas doesn't have to be yoga, it can be more athletic than yogic.</p><h3>What makes practicing asanas yogic?</h3><p class="">The important thing is:</p><ul><li><p>Use the exercises (consciously) for your personal development.</p></li></ul>`,
+      descriptionExcerpt: `<h3>What Is yoga?</h3><p>Yoga is not just about practicing asanas. It's about how we do it.</p><p>And practicing asanas doesn't have to be yoga, it can be more athletic than yogic.</p><h3>What makes practicing asanas yogic?</h3><p>The important thing is:</p><ul><li><p>Use the exercises …</p></li></ul>`,
+      groupType: 'public',
+      actionRadius: 'interplanetary',
+      // Wolle: categoryIds: ['cat4', 'cat5', 'cat17'],
+      categories: [
+        {
+          id: 'cat4',
+          icon: 'psyche',
+          name: 'psyche',
+          slug: 'psyche',
+          description: 'Seele, Gefühle, Glück',
+        },
+        {
+          id: 'cat5',
+          icon: 'movement',
+          name: 'body-and-excercise',
+          slug: 'body-and-excercise',
+          description: 'Sport, Yoga, Massage, Tanzen, Entspannung',
+        },
+        {
+          id: 'cat17',
+          icon: 'spirituality',
+          name: 'spirituality',
+          slug: 'spirituality',
+          description: 'Religion, Werte, Ethik',
+        },
+      ],
+      locationName: null,
+      location: null,
+      // myRole: 'usual',
+    }
+    schoolForCitizens = {
+      id: 'g1',
+      name: 'School For Citizens',
+      slug: 'school-for-citizens',
+      about: 'Our children shall receive education for life.',
+      description: `<p class=""><em>English</em></p><h3>Our goal</h3><p>Only those who enjoy learning and do not lose their curiosity can obtain a good education for life and continue to learn with joy throughout their lives.</p><h3>Curiosity</h3><p>For this we need a school that takes up the curiosity of the children, the people, and satisfies it through a lot of experience.</p><p><br></p><p><em>Deutsch</em></p><h3>Unser Ziel</h3><p class="">Nur wer Spaß am Lernen hat und seine Neugier nicht verliert, kann gute Bildung für's Leben erlangen und sein ganzes Leben mit Freude weiter lernen.</p><h3>Neugier</h3><p class="">Dazu benötigen wir eine Schule, die die Neugier der Kinder, der Menschen, aufnimmt und durch viel Erfahrung befriedigt.</p>`,
+      descriptionExcerpt: `<p><em>English</em></p><h3>Our goal</h3><p>Only those who enjoy learning and do not lose their curiosity can obtain a good education for life and continue to learn with joy throughout their lives.</p><h3>Curiosity</h3><p>For this we need a school that takes up the curiosity of the children, …</p>`,
+      groupType: 'closed',
+      actionRadius: 'national',
+      // Wolle: categoryIds: ['cat8', 'cat14'],
+      categories: [
+        {
+          id: 'cat8',
+          icon: 'child',
+          name: 'children',
+          slug: 'children',
+          description: 'Familie, Pädagogik, Schule, Prägung',
+        },
+        {
+          id: 'cat14',
+          icon: 'science',
+          name: 'science',
+          slug: 'science',
+          description: 'Bildung, Hochschule, Publikationen, ...',
+        },
+      ],
+      locationName: 'France',
+      location: {
+        name: 'Paris',
+        nameDE: 'Paris',
+        nameEN: 'Paris',
+      },
+      // myRole: 'usual',
+    }
+    investigativeJournalism = {
+      id: 'g0',
+      name: 'Investigative Journalism',
+      slug: 'investigative-journalism',
+      about: null,
+      description: `<p class=""><em>English:</em></p><p class="">This group is hidden.</p><h3>What is our group for?</h3><p>This group was created to allow investigative journalists to share and collaborate.</p><h3>How does it work?</h3><p>Here you can internally share posts and comments about them.</p><p><br></p><p><em>Deutsch:</em></p><p class="">Diese Gruppe ist verborgen.</p><h3>Wofür ist unsere Gruppe?</h3><p class="">Diese Gruppe wurde geschaffen, um investigativen Journalisten den Austausch und die Zusammenarbeit zu ermöglichen.</p><h3>Wie funktioniert das?</h3><p class="">Hier könnt ihr euch intern über Beiträge und Kommentare zu ihnen austauschen.</p>`,
+      descriptionExcerpt:
+        '<p><em>English:</em></p><p>This group is hidden.</p><h3>What is our group for?</h3><p>This group was created to allow investigative journalists to share and collaborate.</p><h3>How does it work?</h3><p>Here you can internally share posts and comments about them.</p><p><br/></p><p><em>Deutsch:</em></p><p>Diese Gruppe ist verborgen.</p><h3>…</h3>',
+      groupType: 'hidden',
+      actionRadius: 'global',
+      // Wolle: categoryIds: ['cat6', 'cat12', 'cat16'],
+      categories: [
+        {
+          id: 'cat6',
+          icon: 'balance-scale',
+          name: 'law',
+          slug: 'law',
+          description: 'Menschenrechte, Gesetze, Verordnungen',
+        },
+        {
+          id: 'cat12',
+          icon: 'politics',
+          name: 'politics',
+          slug: 'politics',
+          description: 'Demokratie, Mitbestimmung, Wahlen, Korruption, Parteien',
+        },
+        {
+          id: 'cat16',
+          icon: 'media',
+          name: 'it-and-media',
+          slug: 'it-and-media',
+          description:
+            'Nachrichten, Manipulation, Datenschutz, Überwachung, Datenkraken, AI, Software, Apps',
+        },
+      ],
+      locationName: 'Hamburg, Germany',
+      location: {
+        name: 'Hamburg',
+        nameDE: 'Hamburg',
+        nameEN: 'Hamburg',
+      },
+      // myRole: 'usual',
+    }
+    peterLustig = {
+      id: 'u1',
+      name: 'Peter Lustig',
+      slug: 'peter-lustig',
+      role: 'user',
+    }
+    jennyRostock = {
+      id: 'u3',
+      name: 'Jenny Rostock',
+      slug: 'jenny-rostock',
+      role: 'user',
+    }
+    bobDerBaumeister = {
+      id: 'u2',
+      name: 'Bob der Baumeister',
+      slug: 'bob-der-baumeister',
+      role: 'user',
+    }
+    huey = {
+      id: 'u4',
+      name: 'Huey',
+      slug: 'huey',
+      role: 'user',
+    }
+  })
+
+  describe('mount', () => {
+    Wrapper = () => {
+      return mount(GroupProfileSlug, {
+        mocks,
+        localVue,
+      })
+    }
+
+    describe('given a puplic group – "yoga-practice"', () => {
+      describe('given a current user', () => {
+        describe('as group owner – "peter-lustig"', () => {
+          beforeEach(() => {
+            mocks.$store = {
+              getters: {
+                'auth/user': peterLustig,
+              },
+            }
+            wrapper = Wrapper()
+            wrapper.setData({
+              Group: [
+                {
+                  ...yogaPractice,
+                  myRole: 'owner',
+                },
+              ],
+            })
+          })
+
+          it('has group name – to verificate the group', () => {
+            expect(wrapper.text()).toContain('Yoga Practice')
+          })
+
+          it('has AvatarUploader', () => {
+            expect(wrapper.find('.avatar-uploader').exists()).toBe(true)
+          })
+
+          it('has ProfileAvatar', () => {
+            expect(wrapper.find('.profile-avatar').exists()).toBe(true)
+          })
+
+          it('has group slug', () => {
+            expect(wrapper.text()).toContain('@yoga-practice')
+          })
+
+          describe('displays no(!) group location, because is "null"', () => {
+            it('has no(!) group location icon "map-marker"', () => {
+              expect(wrapper.find('[data-test="map-marker"]').exists()).toBe(false)
+            })
+          })
+
+          it('has group foundation', () => {
+            expect(wrapper.text()).toContain('group.foundation')
+          })
+
+          it('has members count', () => {
+            expect(wrapper.text()).toContain('group.membersCount')
+          })
+
+          it('has join/leave button disabled(!)', () => {
+            expect(wrapper.find('.join-leave-button').exists()).toBe(true)
+            expect(wrapper.find('.join-leave-button').attributes('disabled')).toBe('disabled')
+          })
+
+          it('has group role "owner"', () => {
+            expect(wrapper.text()).toContain('group.role')
+            expect(wrapper.text()).toContain('group.roles.owner')
+          })
+
+          it('has group type "public"', () => {
+            expect(wrapper.text()).toContain('group.type')
+            expect(wrapper.text()).toContain('group.types.public')
+          })
+
+          it('has group action radius "interplanetary"', () => {
+            expect(wrapper.text()).toContain('group.actionRadius')
+            expect(wrapper.text()).toContain('group.actionRadii.interplanetary')
+          })
+
+          it('has group categories "psyche", "body-and-excercise", "spirituality"', () => {
+            expect(wrapper.text()).toContain('group.categories')
+            expect(wrapper.text()).toContain('contribution.category.name.psyche')
+            expect(wrapper.text()).toContain('contribution.category.name.body-and-excercise')
+            expect(wrapper.text()).toContain('contribution.category.name.spirituality')
+          })
+
+          it('has group goal', () => {
+            expect(wrapper.text()).toContain('group.goal')
+            expect(wrapper.text()).toContain('We do yoga around the clock.')
+          })
+        })
+
+        describe('as usual member – "jenny-rostock"', () => {
+          beforeEach(() => {
+            mocks.$store = {
+              getters: {
+                'auth/user': jennyRostock,
+              },
+            }
+            wrapper = Wrapper()
+            wrapper.setData({
+              Group: [
+                {
+                  ...yogaPractice,
+                  myRole: 'usual',
+                },
+              ],
+            })
+          })
+
+          it('has group name – to verificate the group', () => {
+            expect(wrapper.text()).toContain('Yoga Practice')
+          })
+
+          it('has not(!) AvatarUploader', () => {
+            expect(wrapper.find('.avatar-uploader').exists()).toBe(false)
+          })
+
+          it('has ProfileAvatar', () => {
+            expect(wrapper.find('.profile-avatar').exists()).toBe(true)
+          })
+
+          it('has group slug', () => {
+            expect(wrapper.text()).toContain('@yoga-practice')
+          })
+
+          describe('displays no(!) group location, because is "null"', () => {
+            it('has no(!) group location icon "map-marker"', () => {
+              expect(wrapper.find('[data-test="map-marker"]').exists()).toBe(false)
+            })
+          })
+
+          it('has group foundation', () => {
+            expect(wrapper.text()).toContain('group.foundation')
+          })
+
+          it('has members count', () => {
+            expect(wrapper.text()).toContain('group.membersCount')
+          })
+
+          it('has join/leave button enabled', () => {
+            expect(wrapper.find('.join-leave-button').exists()).toBe(true)
+            expect(wrapper.find('.join-leave-button').attributes('disabled')).toBeFalsy()
+          })
+
+          it('has group role "usual"', () => {
+            expect(wrapper.text()).toContain('group.role')
+            expect(wrapper.text()).toContain('group.roles.usual')
+          })
+
+          it('has group type "public"', () => {
+            expect(wrapper.text()).toContain('group.type')
+            expect(wrapper.text()).toContain('group.types.public')
+          })
+
+          it('has group action radius "interplanetary"', () => {
+            expect(wrapper.text()).toContain('group.actionRadius')
+            expect(wrapper.text()).toContain('group.actionRadii.interplanetary')
+          })
+
+          it('has group categories "psyche", "body-and-excercise", "spirituality"', () => {
+            expect(wrapper.text()).toContain('group.categories')
+            expect(wrapper.text()).toContain('contribution.category.name.psyche')
+            expect(wrapper.text()).toContain('contribution.category.name.body-and-excercise')
+            expect(wrapper.text()).toContain('contribution.category.name.spirituality')
+          })
+
+          it('has group goal', () => {
+            expect(wrapper.text()).toContain('group.goal')
+            expect(wrapper.text()).toContain('We do yoga around the clock.')
+          })
+        })
+
+        describe('as pending member – "bob-der-baumeister"', () => {
+          beforeEach(() => {
+            mocks.$store = {
+              getters: {
+                'auth/user': bobDerBaumeister,
+              },
+            }
+            wrapper = Wrapper()
+            wrapper.setData({
+              Group: [
+                {
+                  ...yogaPractice,
+                  myRole: 'pending',
+                },
+              ],
+            })
+          })
+
+          it('has group name – to verificate the group', () => {
+            expect(wrapper.text()).toContain('Yoga Practice')
+          })
+
+          it('has not(!) AvatarUploader', () => {
+            expect(wrapper.find('.avatar-uploader').exists()).toBe(false)
+          })
+
+          it('has ProfileAvatar', () => {
+            expect(wrapper.find('.profile-avatar').exists()).toBe(true)
+          })
+
+          it('has group slug', () => {
+            expect(wrapper.text()).toContain('@yoga-practice')
+          })
+
+          describe('displays no(!) group location, because is "null"', () => {
+            it('has no(!) group location icon "map-marker"', () => {
+              expect(wrapper.find('[data-test="map-marker"]').exists()).toBe(false)
+            })
+          })
+
+          it('has group foundation', () => {
+            expect(wrapper.text()).toContain('group.foundation')
+          })
+
+          it('has members count', () => {
+            expect(wrapper.text()).toContain('group.membersCount')
+          })
+
+          it('has join/leave button enabled', () => {
+            expect(wrapper.find('.join-leave-button').exists()).toBe(true)
+            expect(wrapper.find('.join-leave-button').attributes('disabled')).toBeFalsy()
+          })
+
+          it('has group role "pending"', () => {
+            expect(wrapper.text()).toContain('group.role')
+            expect(wrapper.text()).toContain('group.roles.pending')
+          })
+
+          it('has group type "public"', () => {
+            expect(wrapper.text()).toContain('group.type')
+            expect(wrapper.text()).toContain('group.types.public')
+          })
+
+          it('has group action radius "interplanetary"', () => {
+            expect(wrapper.text()).toContain('group.actionRadius')
+            expect(wrapper.text()).toContain('group.actionRadii.interplanetary')
+          })
+
+          it('has group categories "psyche", "body-and-excercise", "spirituality"', () => {
+            expect(wrapper.text()).toContain('group.categories')
+            expect(wrapper.text()).toContain('contribution.category.name.psyche')
+            expect(wrapper.text()).toContain('contribution.category.name.body-and-excercise')
+            expect(wrapper.text()).toContain('contribution.category.name.spirituality')
+          })
+
+          it('has group goal', () => {
+            expect(wrapper.text()).toContain('group.goal')
+            expect(wrapper.text()).toContain('We do yoga around the clock.')
+          })
+        })
+
+        describe('as none(!) member – "huey"', () => {
+          beforeEach(() => {
+            mocks.$store = {
+              getters: {
+                'auth/user': huey,
+              },
+            }
+            wrapper = Wrapper()
+            wrapper.setData({
+              Group: [
+                {
+                  ...yogaPractice,
+                  myRole: null,
+                },
+              ],
+            })
+          })
+
+          it('has group name – to verificate the group', () => {
+            expect(wrapper.text()).toContain('Yoga Practice')
+          })
+
+          it('has not(!) AvatarUploader', () => {
+            expect(wrapper.find('.avatar-uploader').exists()).toBe(false)
+          })
+
+          it('has ProfileAvatar', () => {
+            expect(wrapper.find('.profile-avatar').exists()).toBe(true)
+          })
+
+          it('has group slug', () => {
+            expect(wrapper.text()).toContain('@yoga-practice')
+          })
+
+          describe('displays no(!) group location, because is "null"', () => {
+            it('has no(!) group location icon "map-marker"', () => {
+              expect(wrapper.find('[data-test="map-marker"]').exists()).toBe(false)
+            })
+          })
+
+          it('has group foundation', () => {
+            expect(wrapper.text()).toContain('group.foundation')
+          })
+
+          it('has members count', () => {
+            expect(wrapper.text()).toContain('group.membersCount')
+          })
+
+          it('has join/leave button enabled', () => {
+            expect(wrapper.find('.join-leave-button').exists()).toBe(true)
+            expect(wrapper.find('.join-leave-button').attributes('disabled')).toBeFalsy()
+          })
+
+          it('has no(!) group role', () => {
+            expect(wrapper.text()).not.toContain('group.role')
+            expect(wrapper.text()).not.toContain('group.roles')
+          })
+
+          it('has group type "public"', () => {
+            expect(wrapper.text()).toContain('group.type')
+            expect(wrapper.text()).toContain('group.types.public')
+          })
+
+          it('has group action radius "interplanetary"', () => {
+            expect(wrapper.text()).toContain('group.actionRadius')
+            expect(wrapper.text()).toContain('group.actionRadii.interplanetary')
+          })
+
+          it('has group categories "psyche", "body-and-excercise", "spirituality"', () => {
+            expect(wrapper.text()).toContain('group.categories')
+            expect(wrapper.text()).toContain('contribution.category.name.psyche')
+            expect(wrapper.text()).toContain('contribution.category.name.body-and-excercise')
+            expect(wrapper.text()).toContain('contribution.category.name.spirituality')
+          })
+
+          it('has group goal', () => {
+            expect(wrapper.text()).toContain('group.goal')
+            expect(wrapper.text()).toContain('We do yoga around the clock.')
+          })
+        })
+      })
+    })
+
+    describe('given a closed group – "school-for-citizens"', () => {
+      describe('given a current user', () => {
+        describe('as group owner – "peter-lustig"', () => {
+          beforeEach(() => {
+            mocks.$store = {
+              getters: {
+                'auth/user': peterLustig,
+              },
+            }
+            wrapper = Wrapper()
+            wrapper.setData({
+              Group: [
+                {
+                  ...schoolForCitizens,
+                  myRole: 'owner',
+                },
+              ],
+            })
+          })
+
+          it('has group name – to verificate the group', () => {
+            expect(wrapper.text()).toContain('School For Citizens')
+          })
+
+          it('has AvatarUploader', () => {
+            expect(wrapper.find('.avatar-uploader').exists()).toBe(true)
+          })
+
+          it('has ProfileAvatar', () => {
+            expect(wrapper.find('.profile-avatar').exists()).toBe(true)
+          })
+
+          it('has group slug', () => {
+            expect(wrapper.text()).toContain('@school-for-citizens')
+          })
+
+          describe('displays group location', () => {
+            it('has group location icon "map-marker"', () => {
+              expect(wrapper.find('[data-test="map-marker"]').exists()).toBe(true)
+            })
+
+            it('has group location name "Paris"', () => {
+              expect(wrapper.text()).toContain('Paris')
+            })
+          })
+
+          it('has group foundation', () => {
+            expect(wrapper.text()).toContain('group.foundation')
+          })
+
+          it('has members count', () => {
+            expect(wrapper.text()).toContain('group.membersCount')
+          })
+
+          it('has join/leave button disabled(!)', () => {
+            expect(wrapper.find('.join-leave-button').exists()).toBe(true)
+            expect(wrapper.find('.join-leave-button').attributes('disabled')).toBe('disabled')
+          })
+
+          it('has group role "owner"', () => {
+            expect(wrapper.text()).toContain('group.role')
+            expect(wrapper.text()).toContain('group.roles.owner')
+          })
+
+          it('has group type "closed"', () => {
+            expect(wrapper.text()).toContain('group.type')
+            expect(wrapper.text()).toContain('group.types.closed')
+          })
+
+          it('has group action radius "national"', () => {
+            expect(wrapper.text()).toContain('group.actionRadius')
+            expect(wrapper.text()).toContain('group.actionRadii.national')
+          })
+
+          it('has group categories "children", "science"', () => {
+            expect(wrapper.text()).toContain('group.categories')
+            expect(wrapper.text()).toContain('contribution.category.name.children')
+            expect(wrapper.text()).toContain('contribution.category.name.science')
+          })
+
+          it('has group goal', () => {
+            expect(wrapper.text()).toContain('group.goal')
+            expect(wrapper.text()).toContain('Our children shall receive education for life.')
+          })
+        })
+
+        describe('as usual member – "jenny-rostock"', () => {
+          beforeEach(() => {
+            mocks.$store = {
+              getters: {
+                'auth/user': jennyRostock,
+              },
+            }
+            wrapper = Wrapper()
+            wrapper.setData({
+              Group: [
+                {
+                  ...schoolForCitizens,
+                  myRole: 'usual',
+                },
+              ],
+            })
+          })
+
+          it('has group name – to verificate the group', () => {
+            expect(wrapper.text()).toContain('School For Citizens')
+          })
+
+          it('has not(!) AvatarUploader', () => {
+            expect(wrapper.find('.avatar-uploader').exists()).toBe(false)
+          })
+
+          it('has ProfileAvatar', () => {
+            expect(wrapper.find('.profile-avatar').exists()).toBe(true)
+          })
+
+          it('has group slug', () => {
+            expect(wrapper.text()).toContain('@school-for-citizens')
+          })
+
+          describe('displays group location', () => {
+            it('has group location icon "map-marker"', () => {
+              expect(wrapper.find('[data-test="map-marker"]').exists()).toBe(true)
+            })
+
+            it('has group location name "Paris"', () => {
+              expect(wrapper.text()).toContain('Paris')
+            })
+          })
+
+          it('has group foundation', () => {
+            expect(wrapper.text()).toContain('group.foundation')
+          })
+
+          it('has members count', () => {
+            expect(wrapper.text()).toContain('group.membersCount')
+          })
+
+          it('has join/leave button enabled', () => {
+            expect(wrapper.find('.join-leave-button').exists()).toBe(true)
+            expect(wrapper.find('.join-leave-button').attributes('disabled')).toBeFalsy()
+          })
+
+          it('has group role "usual"', () => {
+            expect(wrapper.text()).toContain('group.role')
+            expect(wrapper.text()).toContain('group.roles.usual')
+          })
+
+          it('has group type "closed"', () => {
+            expect(wrapper.text()).toContain('group.type')
+            expect(wrapper.text()).toContain('group.types.closed')
+          })
+
+          it('has group action radius "national"', () => {
+            expect(wrapper.text()).toContain('group.actionRadius')
+            expect(wrapper.text()).toContain('group.actionRadii.national')
+          })
+
+          it('has group categories "children", "science"', () => {
+            expect(wrapper.text()).toContain('group.categories')
+            expect(wrapper.text()).toContain('contribution.category.name.children')
+            expect(wrapper.text()).toContain('contribution.category.name.science')
+          })
+
+          it('has group goal', () => {
+            expect(wrapper.text()).toContain('group.goal')
+            expect(wrapper.text()).toContain('Our children shall receive education for life.')
+          })
+        })
+
+        describe('as pending member – "bob-der-baumeister"', () => {
+          beforeEach(() => {
+            mocks.$store = {
+              getters: {
+                'auth/user': bobDerBaumeister,
+              },
+            }
+            wrapper = Wrapper()
+            wrapper.setData({
+              Group: [
+                {
+                  ...schoolForCitizens,
+                  myRole: 'pending',
+                },
+              ],
+            })
+          })
+
+          it('has group name – to verificate the group', () => {
+            expect(wrapper.text()).toContain('School For Citizens')
+          })
+
+          it('has not(!) AvatarUploader', () => {
+            expect(wrapper.find('.avatar-uploader').exists()).toBe(false)
+          })
+
+          it('has ProfileAvatar', () => {
+            expect(wrapper.find('.profile-avatar').exists()).toBe(true)
+          })
+
+          it('has group slug', () => {
+            expect(wrapper.text()).toContain('@school-for-citizens')
+          })
+
+          describe('displays group location', () => {
+            it('has group location icon "map-marker"', () => {
+              expect(wrapper.find('[data-test="map-marker"]').exists()).toBe(true)
+            })
+
+            it('has group location name "Paris"', () => {
+              expect(wrapper.text()).toContain('Paris')
+            })
+          })
+
+          it('has group foundation', () => {
+            expect(wrapper.text()).toContain('group.foundation')
+          })
+
+          it('has no(!) members count', () => {
+            expect(wrapper.text()).not.toContain('group.membersCount')
+          })
+
+          it('has join/leave button enabled', () => {
+            expect(wrapper.find('.join-leave-button').exists()).toBe(true)
+            expect(wrapper.find('.join-leave-button').attributes('disabled')).toBeFalsy()
+          })
+
+          it('has group role "pending"', () => {
+            expect(wrapper.text()).toContain('group.role')
+            expect(wrapper.text()).toContain('group.roles.pending')
+          })
+
+          it('has group type "closed"', () => {
+            expect(wrapper.text()).toContain('group.type')
+            expect(wrapper.text()).toContain('group.types.closed')
+          })
+
+          it('has group action radius "national"', () => {
+            expect(wrapper.text()).toContain('group.actionRadius')
+            expect(wrapper.text()).toContain('group.actionRadii.national')
+          })
+
+          it('has group categories "children", "science"', () => {
+            expect(wrapper.text()).toContain('group.categories')
+            expect(wrapper.text()).toContain('contribution.category.name.children')
+            expect(wrapper.text()).toContain('contribution.category.name.science')
+          })
+
+          it('has group goal', () => {
+            expect(wrapper.text()).toContain('group.goal')
+            expect(wrapper.text()).toContain('Our children shall receive education for life.')
+          })
+        })
+
+        describe('as none(!) member – "huey"', () => {
+          beforeEach(() => {
+            mocks.$store = {
+              getters: {
+                'auth/user': huey,
+              },
+            }
+            wrapper = Wrapper()
+            wrapper.setData({
+              Group: [
+                {
+                  ...schoolForCitizens,
+                  myRole: null,
+                },
+              ],
+            })
+          })
+
+          it('has group name – to verificate the group', () => {
+            expect(wrapper.text()).toContain('School For Citizens')
+          })
+
+          it('has not(!) AvatarUploader', () => {
+            expect(wrapper.find('.avatar-uploader').exists()).toBe(false)
+          })
+
+          it('has ProfileAvatar', () => {
+            expect(wrapper.find('.profile-avatar').exists()).toBe(true)
+          })
+
+          it('has group slug', () => {
+            expect(wrapper.text()).toContain('@school-for-citizens')
+          })
+
+          describe('displays group location', () => {
+            it('has group location icon "map-marker"', () => {
+              expect(wrapper.find('[data-test="map-marker"]').exists()).toBe(true)
+            })
+
+            it('has group location name "Paris"', () => {
+              expect(wrapper.text()).toContain('Paris')
+            })
+          })
+
+          it('has group foundation', () => {
+            expect(wrapper.text()).toContain('group.foundation')
+          })
+
+          it('has no(!) members count', () => {
+            expect(wrapper.text()).not.toContain('group.membersCount')
+          })
+
+          it('has join/leave button enabled', () => {
+            expect(wrapper.find('.join-leave-button').exists()).toBe(true)
+            expect(wrapper.find('.join-leave-button').attributes('disabled')).toBeFalsy()
+          })
+
+          it('has no(!) group role', () => {
+            expect(wrapper.text()).not.toContain('group.role')
+            expect(wrapper.text()).not.toContain('group.roles')
+          })
+
+          it('has group type "closed"', () => {
+            expect(wrapper.text()).toContain('group.type')
+            expect(wrapper.text()).toContain('group.types.closed')
+          })
+
+          it('has group action radius "national"', () => {
+            expect(wrapper.text()).toContain('group.actionRadius')
+            expect(wrapper.text()).toContain('group.actionRadii.national')
+          })
+
+          it('has group categories "children", "science"', () => {
+            expect(wrapper.text()).toContain('group.categories')
+            expect(wrapper.text()).toContain('contribution.category.name.children')
+            expect(wrapper.text()).toContain('contribution.category.name.science')
+          })
+
+          it('has group goal', () => {
+            expect(wrapper.text()).toContain('group.goal')
+            expect(wrapper.text()).toContain('Our children shall receive education for life.')
+          })
+        })
+      })
+    })
+
+    describe('given a hidden group – "investigative-journalism"', () => {
+      describe('given a current user', () => {
+        describe('as group owner – "peter-lustig"', () => {
+          beforeEach(() => {
+            mocks.$store = {
+              getters: {
+                'auth/user': peterLustig,
+              },
+            }
+            wrapper = Wrapper()
+            wrapper.setData({
+              Group: [
+                {
+                  ...investigativeJournalism,
+                  myRole: 'owner',
+                },
+              ],
+            })
+          })
+
+          it('has group name – to verificate the group', () => {
+            expect(wrapper.text()).toContain('Investigative Journalism')
+          })
+
+          it('has AvatarUploader', () => {
+            expect(wrapper.find('.avatar-uploader').exists()).toBe(true)
+          })
+
+          it('has ProfileAvatar', () => {
+            expect(wrapper.find('.profile-avatar').exists()).toBe(true)
+          })
+
+          it('has group slug', () => {
+            expect(wrapper.text()).toContain('@investigative-journalism')
+          })
+
+          describe('displays group location', () => {
+            it('has group location icon "map-marker"', () => {
+              expect(wrapper.find('[data-test="map-marker"]').exists()).toBe(true)
+            })
+
+            it('has group location name "Hamburg"', () => {
+              expect(wrapper.text()).toContain('Hamburg')
+            })
+          })
+
+          it('has group foundation', () => {
+            expect(wrapper.text()).toContain('group.foundation')
+          })
+
+          it('has members count', () => {
+            expect(wrapper.text()).toContain('group.membersCount')
+          })
+
+          it('has join/leave button disabled(!)', () => {
+            expect(wrapper.find('.join-leave-button').exists()).toBe(true)
+            expect(wrapper.find('.join-leave-button').attributes('disabled')).toBe('disabled')
+          })
+
+          it('has group role "owner"', () => {
+            expect(wrapper.text()).toContain('group.role')
+            expect(wrapper.text()).toContain('group.roles.owner')
+          })
+
+          it('has group type "hidden"', () => {
+            expect(wrapper.text()).toContain('group.type')
+            expect(wrapper.text()).toContain('group.types.hidden')
+          })
+
+          it('has group action radius "global"', () => {
+            expect(wrapper.text()).toContain('group.actionRadius')
+            expect(wrapper.text()).toContain('group.actionRadii.global')
+          })
+
+          it('has group categories "law", "politics", "it-and-media"', () => {
+            expect(wrapper.text()).toContain('group.categories')
+            expect(wrapper.text()).toContain('contribution.category.name.law')
+            expect(wrapper.text()).toContain('contribution.category.name.politics')
+            expect(wrapper.text()).toContain('contribution.category.name.it-and-media')
+          })
+        })
+
+        describe('as usual member – "jenny-rostock"', () => {
+          beforeEach(() => {
+            mocks.$store = {
+              getters: {
+                'auth/user': jennyRostock,
+              },
+            }
+            wrapper = Wrapper()
+            wrapper.setData({
+              Group: [
+                {
+                  ...investigativeJournalism,
+                  myRole: 'usual',
+                },
+              ],
+            })
+          })
+
+          it('has group name – to verificate the group', () => {
+            expect(wrapper.text()).toContain('Investigative Journalism')
+          })
+
+          it('has not(!) AvatarUploader', () => {
+            expect(wrapper.find('.avatar-uploader').exists()).toBe(false)
+          })
+
+          it('has ProfileAvatar', () => {
+            expect(wrapper.find('.profile-avatar').exists()).toBe(true)
+          })
+
+          it('has group slug', () => {
+            expect(wrapper.text()).toContain('@investigative-journalism')
+          })
+
+          describe('displays group location', () => {
+            it('has group location icon "map-marker"', () => {
+              expect(wrapper.find('[data-test="map-marker"]').exists()).toBe(true)
+            })
+
+            it('has group location name "Hamburg"', () => {
+              expect(wrapper.text()).toContain('Hamburg')
+            })
+          })
+
+          it('has group foundation', () => {
+            expect(wrapper.text()).toContain('group.foundation')
+          })
+
+          it('has members count', () => {
+            expect(wrapper.text()).toContain('group.membersCount')
+          })
+
+          it('has join/leave button enabled', () => {
+            expect(wrapper.find('.join-leave-button').exists()).toBe(true)
+            expect(wrapper.find('.join-leave-button').attributes('disabled')).toBeFalsy()
+          })
+
+          it('has group role "usual"', () => {
+            expect(wrapper.text()).toContain('group.role')
+            expect(wrapper.text()).toContain('group.roles.usual')
+          })
+
+          it('has group type "hidden"', () => {
+            expect(wrapper.text()).toContain('group.type')
+            expect(wrapper.text()).toContain('group.types.hidden')
+          })
+
+          it('has group action radius "global"', () => {
+            expect(wrapper.text()).toContain('group.actionRadius')
+            expect(wrapper.text()).toContain('group.actionRadii.global')
+          })
+
+          it('has group categories "law", "politics", "it-and-media"', () => {
+            expect(wrapper.text()).toContain('group.categories')
+            expect(wrapper.text()).toContain('contribution.category.name.law')
+            expect(wrapper.text()).toContain('contribution.category.name.politics')
+            expect(wrapper.text()).toContain('contribution.category.name.it-and-media')
+          })
+        })
+
+        describe('as pending member – "bob-der-baumeister"', () => {
+          beforeEach(() => {
+            mocks.$store = {
+              getters: {
+                'auth/user': bobDerBaumeister,
+              },
+            }
+            wrapper = Wrapper()
+            wrapper.setData({
+              Group: [
+                {
+                  ...investigativeJournalism,
+                  myRole: 'pending',
+                },
+              ],
+            })
+          })
+
+          it('has no(!) group name – to verificate the group', () => {
+            expect(wrapper.text()).not.toContain('Investigative Journalism')
+          })
+
+          it('has not(!) AvatarUploader', () => {
+            expect(wrapper.find('.avatar-uploader').exists()).toBe(false)
+          })
+
+          it('has not(!) ProfileAvatar', () => {
+            expect(wrapper.find('.profile-avatar').exists()).toBe(false)
+          })
+
+          it('has not(!) group slug', () => {
+            expect(wrapper.text()).not.toContain('@investigative-journalism')
+          })
+
+          describe('displays not(!) group location', () => {
+            it('has no(!) group location icon "map-marker"', () => {
+              expect(wrapper.find('[data-test="map-marker"]').exists()).toBe(false)
+            })
+
+            it('has no(!) group location name "Hamburg"', () => {
+              expect(wrapper.text()).not.toContain('Hamburg')
+            })
+          })
+
+          it('has no(!) group foundation', () => {
+            expect(wrapper.text()).not.toContain('group.foundation')
+          })
+
+          it('has no(!) members count', () => {
+            expect(wrapper.text()).not.toContain('group.membersCount')
+          })
+
+          it('has no(!) join/leave button', () => {
+            expect(wrapper.find('.join-leave-button').exists()).toBe(false)
+          })
+
+          it('has no(!) group role', () => {
+            expect(wrapper.text()).not.toContain('group.role')
+            expect(wrapper.text()).not.toContain('group.roles')
+          })
+
+          it('has no(!) group type', () => {
+            expect(wrapper.text()).not.toContain('group.type')
+            expect(wrapper.text()).not.toContain('group.types')
+          })
+
+          it('has no(!) group action radius', () => {
+            expect(wrapper.text()).not.toContain('group.actionRadius')
+            expect(wrapper.text()).not.toContain('group.actionRadii')
+          })
+
+          it('has no(!) group categories "law", "politics", "it-and-media"', () => {
+            expect(wrapper.text()).not.toContain('group.categories')
+            expect(wrapper.text()).not.toContain('contribution.category.name.law')
+            expect(wrapper.text()).not.toContain('contribution.category.name.politics')
+            expect(wrapper.text()).not.toContain('contribution.category.name.it-and-media')
+          })
+        })
+
+        describe('as none(!) member – "huey"', () => {
+          beforeEach(() => {
+            mocks.$store = {
+              getters: {
+                'auth/user': huey,
+              },
+            }
+            wrapper = Wrapper()
+            wrapper.setData({
+              Group: [
+                {
+                  ...investigativeJournalism,
+                  myRole: null,
+                },
+              ],
+            })
+          })
+
+          it('has no(!) group name – to verificate the group', () => {
+            expect(wrapper.text()).not.toContain('Investigative Journalism')
+          })
+
+          it('has not(!) AvatarUploader', () => {
+            expect(wrapper.find('.avatar-uploader').exists()).toBe(false)
+          })
+
+          it('has not(!) ProfileAvatar', () => {
+            expect(wrapper.find('.profile-avatar').exists()).toBe(false)
+          })
+
+          it('has not(!) group slug', () => {
+            expect(wrapper.text()).not.toContain('@investigative-journalism')
+          })
+
+          describe('displays not(!) group location', () => {
+            it('has no(!) group location icon "map-marker"', () => {
+              expect(wrapper.find('[data-test="map-marker"]').exists()).toBe(false)
+            })
+
+            it('has no(!) group location name "Hamburg"', () => {
+              expect(wrapper.text()).not.toContain('Hamburg')
+            })
+          })
+
+          it('has no(!) group foundation', () => {
+            expect(wrapper.text()).not.toContain('group.foundation')
+          })
+
+          it('has no(!) members count', () => {
+            expect(wrapper.text()).not.toContain('group.membersCount')
+          })
+
+          it('has no(!) join/leave button', () => {
+            expect(wrapper.find('.join-leave-button').exists()).toBe(false)
+          })
+
+          it('has no(!) group role', () => {
+            expect(wrapper.text()).not.toContain('group.role')
+            expect(wrapper.text()).not.toContain('group.roles')
+          })
+
+          it('has no(!) group type', () => {
+            expect(wrapper.text()).not.toContain('group.type')
+            expect(wrapper.text()).not.toContain('group.types')
+          })
+
+          it('has no(!) group action radius', () => {
+            expect(wrapper.text()).not.toContain('group.actionRadius')
+            expect(wrapper.text()).not.toContain('group.actionRadii')
+          })
+
+          it('has no(!) group categories "law", "politics", "it-and-media"', () => {
+            expect(wrapper.text()).not.toContain('group.categories')
+            expect(wrapper.text()).not.toContain('contribution.category.name.law')
+            expect(wrapper.text()).not.toContain('contribution.category.name.politics')
+            expect(wrapper.text()).not.toContain('contribution.category.name.it-and-media')
+          })
+        })
+      })
+    })
+  })
+})
diff --git a/webapp/pages/group/_id/_slug.vue b/webapp/pages/group/_id/_slug.vue
index 9297ad7ef..70c3bd5dc 100644
--- a/webapp/pages/group/_id/_slug.vue
+++ b/webapp/pages/group/_id/_slug.vue
@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div v-if="isGroupVisible">
     <ds-space />
     <ds-flex v-if="group" :width="{ base: '100%' }" gutter="base">
       <ds-flex-item :width="{ base: '100%', sm: 2, md: 2, lg: 1 }">
@@ -41,7 +41,7 @@
             </ds-text>
             <!-- Group location -->
             <ds-text v-if="group && group.location" align="center" color="soft" size="small">
-              <base-icon name="map-marker" />
+              <base-icon name="map-marker" data-test="map-marker" />
               {{ group && group.location ? group.location.name : '' }}
             </ds-text>
             <!-- Group created at -->
@@ -196,7 +196,7 @@
         </ds-heading>
         <!-- Group members list -->
         <profile-list
-          :uniqueName="`groupMembersFilter`"
+          :uniqueName="'groupMembersFilter'"
           :title="$t('group.membersListTitle')"
           :titleNobody="
             !isAllowedSeeingGroupMembers
@@ -393,7 +393,7 @@ export default {
       return this.$store.getters['auth/user']
     },
     group() {
-      return this.Group[0] ? this.Group[0] : {}
+      return this.Group && this.Group[0] ? this.Group[0] : {}
     },
     groupName() {
       const { name } = this.group || {}
@@ -404,6 +404,7 @@ export default {
       return slug && `@${slug}`
     },
     groupDescriptionExcerpt() {
+      // Wolle: console.log('groupDescriptionExcerpt: ', this.group ? this.$filters.removeLinks(this.group.descriptionExcerpt) : '')
       return this.group ? this.$filters.removeLinks(this.group.descriptionExcerpt) : ''
     },
     isGroupOwner() {
@@ -415,6 +416,9 @@ export default {
     isGroupMemberNonePending() {
       return this.group ? ['usual', 'admin', 'owner'].includes(this.group.myRole) : false
     },
+    isGroupVisible() {
+      return this.group && !(this.group.groupType === 'hidden' && !this.isGroupMemberNonePending)
+    },
     groupMembers() {
       return this.GroupMembers ? this.GroupMembers : []
     },