Merge branch 'master' into 208-feat-change-url-on-language-switch

presenter/scripts/tests/plugin.pinia.ts

@@ -1,4 +1,4 @@
 import { createTestingPinia } from '@pinia/testing'
 import { config } from '@vue/test-utils'
 
-config.global.plugins.push(createTestingPinia())
+config.global.plugins.push(createTestingPinia({ stubActions: false }))

presenter/src/components/language/LanguageSelector.vue

@@ -54,6 +54,7 @@ const updateLanguage = () => {
 @import '#root/src/assets/scss/style';
 
 .language-select {
+  min-width: 70px;
   max-width: 80px;
 
   @include section-content-font;

presenter/src/components/menu/HeaderMenu.test.ts

@@ -5,6 +5,7 @@ import { Component, h } from 'vue'
 import { VApp } from 'vuetify/components'
 
 import { AUTH } from '#src/env'
+import { useAuthStore } from '#stores/authStore'
 import { authService } from '#tests/mock.authService'
 
 import HeaderMenu from './HeaderMenu.vue'
@@ -80,20 +81,104 @@ describe('HeaderMenu', () => {
       })
     })
 
-    /*
     describe('sign up button', () => {
+      const spy = vi.spyOn(authService, 'signUp')
+
       beforeEach(() => {
         vi.clearAllMocks()
-        wrapper.find('button.sign-up').trigger('click')
       })
 
-      // how to redirect correctly (navigate vs recirect)?
-      it('redirects to sign up url', () => {
-        expect(true).toBe(true)
+      describe('without error', () => {
+        beforeEach(async () => {
+          await wrapper.find('button.sign-up').trigger('click')
+        })
+
+        it('call auth service signUp', () => {
+          expect(spy).toBeCalled()
+        })
+      })
+
+      describe('with error', () => {
+        const consoleSpy = vi.spyOn(console, 'log')
+
+        beforeEach(async () => {
+          spy.mockRejectedValue('Oh no!')
+          await wrapper.find('button.sign-up').trigger('click')
+        })
+
+        it('logs the error', () => {
+          expect(consoleSpy).toBeCalledWith('auth error', 'Oh no!')
+        })
       })
     })
 
-    describe('logged in', () => {})
-    */
+    describe('logged in', () => {
+      const authStore = useAuthStore()
+
+      beforeEach(() => {
+        authStore.save({
+          access_token: 'access_token',
+          profile: {
+            aud: 'aud',
+            sub: 'sub',
+            exp: 1,
+            iat: 1,
+            iss: 'iss',
+          },
+          token_type: 'token_type',
+          session_state: null,
+          state: null,
+          expires_in: 0,
+          expired: false,
+          scopes: ['email'],
+          toStorageString: () => 'toStorageString',
+        })
+      })
+
+      it('has a sign out button', () => {
+        expect(wrapper.find('button.sign-out').exists()).toBe(true)
+      })
+
+      it('has no sign in/up button', () => {
+        expect(wrapper.find('button.sign-up').exists()).toBe(false)
+        expect(wrapper.find('button.sign-in').exists()).toBe(false)
+      })
+
+      describe('click sign out', () => {
+        const authSpy = vi.spyOn(authService, 'signOut')
+        const storeSpy = vi.spyOn(authStore, 'clear')
+
+        beforeEach(() => {
+          vi.clearAllMocks()
+        })
+
+        describe('without error', () => {
+          beforeEach(async () => {
+            await wrapper.find('button.sign-out').trigger('click')
+          })
+
+          it('calls auth service sign out', () => {
+            expect(authSpy).toBeCalled()
+          })
+
+          it('clears the store', () => {
+            expect(storeSpy).toBeCalled()
+          })
+        })
+
+        describe('with error', () => {
+          const consoleSpy = vi.spyOn(console, 'log')
+
+          beforeEach(async () => {
+            authSpy.mockRejectedValue('Error!')
+            await wrapper.find('button.sign-out').trigger('click')
+          })
+
+          it('logs the error', () => {
+            expect(consoleSpy).toBeCalledWith('auth error', 'Error!')
+          })
+        })
+      })
+    })
   })
 })

presenter/src/components/menu/HeaderMenu.vue

@@ -25,7 +25,7 @@
           <div class="d-flex align-center mr-0 mr-md-8 language-column">
             <LanguageSelector />
           </div>
-          <div v-if="showAuthentication" class="d-flex align-center mr-0 mr-md-8">
+          <div v-if="showAuthentication" class="d-none d-md-flex align-center mr-0 mr-md-8">
             <div v-if="auth.isLoggedIn">
               <!--<MainButton
                    variant="third-inverse"
@@ -36,25 +36,27 @@
                    />-->
               <MainButton
                 class="sign-out"
+                :class="[buttonsInBackground ? 'video-helper' : '']"
                 variant="third"
                 label="Sign Out"
-                size="small"
+                size="auto"
                 @click="signOut"
               />
             </div>
-            <div v-else>
+            <div v-else class="d-flex">
               <MainButton
                 variant="third-inverse"
-                class="mr-1 sign-in"
+                class="mr-4 sign-in"
                 label="Sign in"
-                size="small"
+                size="auto"
                 @click="signIn"
               />
               <MainButton
                 class="sign-up"
+                :class="[buttonsInBackground ? 'video-helper' : '']"
                 variant="third"
                 label="Sign up"
-                size="small"
+                size="auto"
                 @click="signUp"
               />
             </div>
@@ -72,7 +74,7 @@
       location="right"
       class="nav-drawer d-flex d-md-none"
     >
-      <div class="d-flex flex-column py-8">
+      <div class="d-flex flex-column pt-8">
         <!-- TODO same as above: refactor -->
         <AnchorLink
           class="ma-4"
@@ -93,6 +95,34 @@
           @click="mobileMenu = !mobileMenu"
         ></AnchorLink>
       </div>
+      <div v-if="showAuthentication" class="">
+        <v-divider class="ma-4"></v-divider>
+        <div v-if="auth.isLoggedIn" class="d-flex flex-column justify-center align-center">
+          <MainButton
+            class="sign-out ma-4"
+            variant="third"
+            label="Sign Out"
+            size="auto"
+            @click="signOut"
+          />
+        </div>
+        <div v-else class="d-flex flex-column justify-center align-center">
+          <MainButton
+            variant="third-inverse"
+            class="sign-in ma-4"
+            label="Sign in"
+            size="auto"
+            @click="signIn"
+          />
+          <MainButton
+            class="sign-up ma-4"
+            variant="third"
+            label="Sign up"
+            size="auto"
+            @click="signUp"
+          />
+        </div>
+      </div>
     </v-navigation-drawer>
   </div>
 </template>
@@ -165,20 +195,25 @@ async function signOut() {
 const appBackground = ref('transparent')
 const navBackground = ref('#d8d8d8')
 const mobileMenu = ref(false)
+const buttonsInBackground = ref(true)
 
 let videoSlideObserver: IntersectionObserver
 
 function changeAppBarBackground() {
   if (appBackground.value !== '#f5f5f5') {
     appBackground.value = '#f5f5f5'
     navBackground.value = '#f5f5f5'
+
+    buttonsInBackground.value = false
   }
 }
 
 function resetAppBarBackground() {
   if (appBackground.value !== 'transparent') {
     appBackground.value = 'transparent'
     navBackground.value = 'transparent'
+
+    buttonsInBackground.value = true
   }
 }
 
@@ -226,6 +261,12 @@ onMounted(() => {
     $background-color-primary 0.06%,
     $background-color-primary-transition 100%
   );
+
+  .video-helper {
+    color: $font-color-default !important;
+    background-color: transparent !important;
+    border: 1px solid $font-color-default !important;
+  }
 }
 </style>
 

presenter/src/components/menu/__snapshots__/HeaderMenu.test.ts.snap

@@ -367,7 +367,7 @@ exports[`HeaderMenu > renders 1`] = `
         >
           
           <div
-            class="d-flex flex-column py-8"
+            class="d-flex flex-column pt-8"
             data-v-5e2a2776=""
           >
             <!-- TODO same as above: refactor -->
@@ -456,6 +456,7 @@ exports[`HeaderMenu > renders 1`] = `
               <!---->
             </a>
           </div>
+          <!--v-if-->
           
         </div>
         <!---->

presenter/src/layouts/__snapshots__/DefaultLayout.test.ts.snap

@@ -377,7 +377,7 @@ exports[`DefaultLayout > renders 1`] = `
           >
             
             <div
-              class="d-flex flex-column py-8"
+              class="d-flex flex-column pt-8"
               data-v-5e2a2776=""
             >
               <!-- TODO same as above: refactor -->
@@ -466,6 +466,7 @@ exports[`DefaultLayout > renders 1`] = `
                 <!---->
               </a>
             </div>
+            <!--v-if-->
             
           </div>
           <!---->

presenter/src/locales/index.test.ts

@@ -0,0 +1,57 @@
+import { describe, expect, it } from 'vitest'
+
+import { extractLocale } from '.'
+
+describe('extractLocale', () => {
+  describe('on index page', () => {
+    it('has no locale in URL', () => {
+      const { locale, urlWithoutLocale } = extractLocale('/')
+      expect(locale).toBe('de')
+      expect(urlWithoutLocale).toBe('/')
+    })
+
+    it('has no locale in URL and is on section #about', () => {
+      const { locale, urlWithoutLocale } = extractLocale('/#about')
+      expect(locale).toBe('de')
+      expect(urlWithoutLocale).toBe('/#about')
+    })
+
+    it('has a locale in URL', () => {
+      const { locale, urlWithoutLocale } = extractLocale('/en/')
+      expect(locale).toBe('en')
+      expect(urlWithoutLocale).toBe('/')
+    })
+
+    it('has a locale in URL and is on #about section', () => {
+      const { locale, urlWithoutLocale } = extractLocale('/en/#about')
+      expect(locale).toBe('en')
+      expect(urlWithoutLocale).toBe('/#about')
+    })
+  })
+
+  describe('on impressum page', () => {
+    it('has no locale in URL', () => {
+      const { locale, urlWithoutLocale } = extractLocale('/impressum')
+      expect(locale).toBe('de')
+      expect(urlWithoutLocale).toBe('/impressum')
+    })
+
+    it('has no locale in URL and is on section #about', () => {
+      const { locale, urlWithoutLocale } = extractLocale('/impressum#about')
+      expect(locale).toBe('de')
+      expect(urlWithoutLocale).toBe('/impressum#about')
+    })
+
+    it('has a locale in URL', () => {
+      const { locale, urlWithoutLocale } = extractLocale('/en/impressum')
+      expect(locale).toBe('en')
+      expect(urlWithoutLocale).toBe('/impressum')
+    })
+
+    it('has a locale in URL and is on #about section', () => {
+      const { locale, urlWithoutLocale } = extractLocale('/en/impressum#about')
+      expect(locale).toBe('en')
+      expect(urlWithoutLocale).toBe('/impressum#about')
+    })
+  })
+})

presenter/src/pages/auth/__snapshots__/Page.test.ts.snap

@@ -378,7 +378,7 @@ exports[`AuthPage > signin callback without error > renders 1`] = `
           >
             
             <div
-              class="d-flex flex-column py-8"
+              class="d-flex flex-column pt-8"
               data-v-5e2a2776=""
             >
               <!-- TODO same as above: refactor -->
@@ -467,6 +467,7 @@ exports[`AuthPage > signin callback without error > renders 1`] = `
                 <!---->
               </a>
             </div>
+            <!--v-if-->
             
           </div>
           <!---->

presenter/src/pages/datenschutz/__snapshots__/Page.test.ts.snap

@@ -377,7 +377,7 @@ exports[`DataPrivacyPage > renders 1`] = `
           >
             
             <div
-              class="d-flex flex-column py-8"
+              class="d-flex flex-column pt-8"
               data-v-5e2a2776=""
             >
               <!-- TODO same as above: refactor -->
@@ -466,6 +466,7 @@ exports[`DataPrivacyPage > renders 1`] = `
                 <!---->
               </a>
             </div>
+            <!--v-if-->
             
           </div>
           <!---->