Maintenance: Desktop-View - Add base transition layer

app/frontend/apps/desktop/components/CommonPopover/CommonPopover.vue

@@ -17,6 +17,8 @@ import { useLocaleStore } from '#shared/stores/locale.ts'
 import stopEvent from '#shared/utils/events.ts'
 import testFlags from '#shared/utils/testFlags.ts'
 
+import { useTransitionConfig } from '#desktop/composables/useTransitionConfig.ts'
+
 import { usePopoverInstances } from './usePopoverInstances.ts'
 
 import type {
@@ -292,12 +294,12 @@ onUnmounted(() => {
 
 defineExpose(exposedInstance)
 
-const duration = VITE_TEST_MODE ? undefined : { enter: 300, leave: 200 }
+const { durations } = useTransitionConfig()
 </script>
 
 <template>
   <Teleport to="body">
-    <Transition name="fade" :duration="duration">
+    <Transition name="fade" :duration="durations.normal">
       <div
         v-if="showPopover"
         :id="id"

app/frontend/apps/desktop/components/NavigationMenu/NavigationMenuFilter.vue

@@ -8,6 +8,7 @@ import CommonIcon from '#shared/components/CommonIcon/CommonIcon.vue'
 import { i18n } from '#shared/i18n.ts'
 
 import CommonButton from '#desktop/components/CommonButton/CommonButton.vue'
+import { useTransitionConfig } from '#desktop/composables/useTransitionConfig.ts'
 
 const filterFieldOpen = ref(false)
 const containerNode = ref<HTMLDivElement>()
@@ -41,7 +42,7 @@ watchEffect(() => {
   closeFilterField()
 })
 
-const duration = VITE_TEST_MODE ? undefined : 500
+const { durations } = useTransitionConfig()
 </script>
 
 <template>
@@ -79,7 +80,7 @@ const duration = VITE_TEST_MODE ? undefined : 500
       type="text"
       role="searchbox"
     />
-    <Transition name="fade-move" :duration="duration">
+    <Transition name="fade-move" :duration="durations.normal">
       <CommonButton
         v-if="filterFieldOpen"
         icon="x-lg"

app/frontend/apps/desktop/composables/__tests__/useTransitionConfig.spec.ts

@@ -0,0 +1,12 @@
+// Copyright (C) 2012-2024 Zammad Foundation, https://zammad-foundation.org/
+
+import { useTransitionConfig } from '#desktop/composables/useTransitionConfig.ts'
+
+describe('useTransitionConfig', () => {
+  it('sets transition time to undefined in test environment', () => {
+    const { durations } = useTransitionConfig()
+
+    expect(durations.normal?.enter).toBeFalsy()
+    expect(durations.normal?.leave).toBeFalsy()
+  })
+})

app/frontend/apps/desktop/composables/useTransitionCollapse.ts

@@ -1,7 +1,10 @@
 // Copyright (C) 2012-2024 Zammad Foundation, https://zammad-foundation.org/
 
+import { useTransitionConfig } from '#desktop/composables/useTransitionConfig.ts'
+
 export const useTransitionCollapse = () => {
-  const collapseDuration = VITE_TEST_MODE ? undefined : 200
+  const { durations } = useTransitionConfig()
+  const collapseDuration = durations.normal
 
   const collapseEnter = (element: Element | HTMLElement) => {
     if (!(element instanceof HTMLElement)) return

app/frontend/apps/desktop/composables/useTransitionConfig.ts

@@ -5,5 +5,7 @@ export const useTransitionConfig = () => {
     normal: VITE_TEST_MODE ? undefined : { enter: 300, leave: 200 },
   }
 
-  return { durations }
+  const isTestMode = VITE_TEST_MODE
+
+  return { durations, isTestMode }
 }