code quality

apps/website/components/drivers/DriverCard.tsx

@@ -27,10 +27,12 @@ interface DriverCardProps {
 export function DriverCard({ driver, onClick }: DriverCardProps) {
   return (
     <ProfileCard
+      data-testid="driver-card"
       onClick={() => onClick(driver.id)}
       variant="muted"
       identity={
         <DriverIdentity
+          data-testid="driver-identity"
           driver={{
             id: driver.id,
             name: driver.name,
@@ -41,7 +43,7 @@ export function DriverCard({ driver, onClick }: DriverCardProps) {
         />
       }
       actions={
-        <Badge variant="outline" size="sm">
+        <Badge data-testid="driver-rating" variant="outline" size="sm">
           {driver.ratingLabel}
         </Badge>
       }

apps/website/components/drivers/DriverProfileHeader.tsx

@@ -45,7 +45,7 @@ export function DriverProfileHeader({
 
       <Stack position="relative" display="flex" flexDirection={{ base: 'col', lg: 'row' }} gap={8}>
         {/* Avatar */}
-        <Stack position="relative" h={{ base: '32', lg: '40' }} w={{ base: '32', lg: '40' }} flexShrink={0} overflow="hidden" rounded="2xl" border={true} borderWidth="2px" borderColor="border-charcoal-outline" bg="bg-deep-graphite" shadow="2xl">
+        <Stack data-testid="driver-profile-avatar" position="relative" h={{ base: '32', lg: '40' }} w={{ base: '32', lg: '40' }} flexShrink={0} overflow="hidden" rounded="2xl" border={true} borderWidth="2px" borderColor="border-charcoal-outline" bg="bg-deep-graphite" shadow="2xl">
           <Image
             src={avatarUrl || defaultAvatar}
             alt={name}
@@ -59,9 +59,9 @@ export function DriverProfileHeader({
           <Stack display="flex" flexDirection={{ base: 'col', lg: 'row' }} alignItems={{ lg: 'center' }} justifyContent="between" gap={2}>
             <Stack>
               <Stack direction="row" align="center" gap={3} mb={1}>
-                <Heading level={1}>{name}</Heading>
+                <Heading data-testid="driver-profile-name" level={1}>{name}</Heading>
                 {globalRankLabel && (
-                  <Stack display="flex" alignItems="center" gap={1} rounded="md" bg="bg-warning-amber/10" px={2} py={0.5} border borderColor="border-warning-amber/20">
+                  <Stack data-testid="driver-profile-rank" display="flex" alignItems="center" gap={1} rounded="md" bg="bg-warning-amber/10" px={2} py={0.5} border borderColor="border-warning-amber/20">
                     <Trophy size={12} color="#FFBE4D" />
                     <Text size="xs" weight="bold" font="mono" color="text-warning-amber">
                       {globalRankLabel}
@@ -70,7 +70,7 @@ export function DriverProfileHeader({
                 )}
               </Stack>
               <Stack direction="row" align="center" gap={4}>
-                <Stack direction="row" align="center" gap={1.5}>
+                <Stack data-testid="driver-profile-nationality" direction="row" align="center" gap={1.5}>
                   <Globe size={14} color="#6B7280" />
                   <Text size="sm" color="text-gray-400">{nationality}</Text>
                 </Stack>
@@ -95,7 +95,7 @@ export function DriverProfileHeader({
           </Stack>
 
           {bio && (
-            <Stack maxWidth="3xl">
+            <Stack data-testid="driver-profile-bio" maxWidth="3xl">
               <Text size="sm" color="text-gray-400" leading="relaxed">
                 {bio}
               </Text>

apps/website/components/drivers/DriverProfileTabs.tsx

@@ -27,6 +27,7 @@ export function DriverProfileTabs({ activeTab, onTabChange }: DriverProfileTabsP
         return (
           <Box
             as="button"
+            data-testid={`profile-tab-${tab.id}`}
             key={tab.id}
             onClick={() => onTabChange(tab.id)}
             position="relative"

apps/website/components/drivers/DriverStatsPanel.tsx

@@ -16,17 +16,18 @@ interface DriverStatsPanelProps {
 
 export function DriverStatsPanel({ stats }: DriverStatsPanelProps) {
   return (
-    <Box display="grid" gridCols={{ base: 2, sm: 3, lg: 6 }} gap="px" overflow="hidden" rounded="xl" border borderColor="border-charcoal-outline" bg="bg-charcoal-outline">
+    <Box data-testid="driver-stats-panel-grid" display="grid" gridCols={{ base: 2, sm: 3, lg: 6 }} gap="px" overflow="hidden" rounded="xl" border borderColor="border-charcoal-outline" bg="bg-charcoal-outline">
       {stats.map((stat, index) => (
-        <Box key={index} display="flex" flexDirection="col" gap={1} bg="bg-deep-charcoal" p={5} transition hoverBg="bg-deep-charcoal/80">
-          <Text size="xs" weight="bold" color="text-gray-500" uppercase letterSpacing="wider">
+        <Box key={index} data-testid={`stat-item-${stat.label.toLowerCase().replace(/\s+/g, '-')}`} display="flex" flexDirection="col" gap={1} bg="bg-deep-charcoal" p={5} transition hoverBg="bg-deep-charcoal/80">
+          <Text data-testid={`stat-label-${stat.label.toLowerCase().replace(/\s+/g, '-')}`} size="xs" weight="bold" color="text-gray-500" uppercase letterSpacing="wider">
             {stat.label}
           </Text>
           <Box display="flex" alignItems="baseline" gap={1.5}>
-            <Text 
-              size="2xl" 
-              weight="bold" 
-              font="mono" 
+            <Text
+              data-testid={`stat-value-${stat.label.toLowerCase().replace(/\s+/g, '-')}`}
+              size="2xl"
+              weight="bold"
+              font="mono"
               color={stat.color || 'text-white'}
             >
               {stat.value}