feat: add data-test attributes for improved testing in various components

packages/features/fischerei/src/components/fischerei-tab-navigation.tsx

@@ -1,8 +1,8 @@
 'use client';
 
 import Link from 'next/link';
-import { usePathname } from 'next/navigation';
 
+import { Trans } from '@kit/ui/trans';
 import { cn } from '@kit/ui/utils';
 
 interface FischereiTabNavigationProps {
@@ -11,15 +11,27 @@ interface FischereiTabNavigationProps {
 }
 
 const TABS = [
-  { id: 'overview', label: 'Übersicht', path: '' },
-  { id: 'waters', label: 'Gewässer', path: '/waters' },
-  { id: 'species', label: 'Fischarten', path: '/species' },
-  { id: 'stocking', label: 'Besatz', path: '/stocking' },
-  { id: 'leases', label: 'Pachten', path: '/leases' },
-  { id: 'catch-books', label: 'Fangbücher', path: '/catch-books' },
-  { id: 'permits', label: 'Erlaubnisscheine', path: '/permits' },
-  { id: 'competitions', label: 'Wettbewerbe', path: '/competitions' },
-  { id: 'statistics', label: 'Statistiken', path: '/statistics' },
+  { id: 'overview', i18nKey: 'fischerei:nav.overview', path: '' },
+  { id: 'waters', i18nKey: 'fischerei:nav.waters', path: '/waters' },
+  { id: 'species', i18nKey: 'fischerei:nav.species', path: '/species' },
+  { id: 'stocking', i18nKey: 'fischerei:nav.stocking', path: '/stocking' },
+  { id: 'leases', i18nKey: 'fischerei:nav.leases', path: '/leases' },
+  {
+    id: 'catch-books',
+    i18nKey: 'fischerei:nav.catchBooks',
+    path: '/catch-books',
+  },
+  { id: 'permits', i18nKey: 'fischerei:nav.permits', path: '/permits' },
+  {
+    id: 'competitions',
+    i18nKey: 'fischerei:nav.competitions',
+    path: '/competitions',
+  },
+  {
+    id: 'statistics',
+    i18nKey: 'fischerei:nav.statistics',
+    path: '/statistics',
+  },
 ] as const;
 
 export function FischereiTabNavigation({
@@ -32,7 +44,7 @@ export function FischereiTabNavigation({
     <div className="mb-6 border-b">
       <nav
         className="-mb-px flex space-x-1 overflow-x-auto"
-        aria-label="Fischerei Navigation"
+        aria-label="Fisheries Navigation"
       >
         {TABS.map((tab) => {
           const isActive = tab.id === activeTab;
@@ -41,6 +53,7 @@ export function FischereiTabNavigation({
             <Link
               key={tab.id}
               href={`${basePath}${tab.path}`}
+              data-test={`fischerei-tab-${tab.id}`}
               className={cn(
                 'border-b-2 px-4 py-2.5 text-sm font-medium whitespace-nowrap transition-colors',
                 isActive
@@ -48,7 +61,7 @@ export function FischereiTabNavigation({
                   : 'text-muted-foreground hover:border-muted-foreground/30 hover:text-foreground border-transparent',
               )}
             >
-              {tab.label}
+              <Trans i18nKey={tab.i18nKey} />
             </Link>
           );
         })}