test: add ProfileLink component tests (#12)

apps/mobile/__tests__/ProfileLink.test.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import { fireEvent, render, screen } from '@testing-library/react-native';
+import ProfileLink from '../src/components/ProfileLink';
+
+describe('ProfileLink', () => {
+  test('renders the platform and username', () => {
+    render(
+      <ProfileLink platform="github" username="octocat" onPress={() => {}} />,
+    );
+
+    expect(screen.getByText('GitHub')).toBeTruthy();
+    expect(screen.getByText('octocat')).toBeTruthy();
+  });
+
+  test('calls onPress when pressed', () => {
+    const onPress = jest.fn();
+
+    render(<ProfileLink platform="github" username="octocat" onPress={onPress} />);
+    fireEvent.press(screen.getByTestId('profile-link'));
+
+    expect(onPress).toHaveBeenCalledTimes(1);
+  });
+});

apps/mobile/jest.setup.js

@@ -1,4 +1,3 @@
-/* eslint-env jest */
 import 'react-native-gesture-handler/jestSetup';
 
 global.__reanimatedWorkletInit = () => {};

apps/mobile/package.json

@@ -48,6 +48,7 @@
     "@react-native/gradle-plugin": "0.84.1",
     "@react-native/metro-config": "0.84.1",
     "@react-native/typescript-config": "0.84.1",
+    "@testing-library/react-native": "^13.3.3",
     "@types/jest": "^29.5.13",
     "@types/react": "^19.1.17",
     "@types/react-native-vector-icons": "^6.4.18",

apps/mobile/src/components/ProfileLink.tsx

@@ -0,0 +1,133 @@
+import React from 'react';
+import {
+  ActivityIndicator,
+  StyleSheet,
+  Text,
+  TouchableOpacity,
+  View,
+} from 'react-native';
+import { PLATFORMS } from '@devcard/shared';
+import { BORDER_RADIUS, COLORS, FONT_SIZE, SPACING } from '../theme/tokens';
+
+export type ProfileLinkStatus = 'idle' | 'loading' | 'success' | 'error';
+
+type ProfileLinkProps = {
+  platform: string;
+  username: string;
+  onPress: () => void;
+  actionLabel?: string;
+  status?: ProfileLinkStatus;
+};
+
+export default function ProfileLink({
+  platform,
+  username,
+  onPress,
+  actionLabel = 'Open',
+  status = 'idle',
+}: ProfileLinkProps) {
+  const platformDef = PLATFORMS[platform];
+  const platformName = platformDef?.name || platform;
+  const isLoading = status === 'loading';
+
+  return (
+    <TouchableOpacity
+      testID="profile-link"
+      style={[styles.container, status === 'success' && styles.containerDone]}
+      onPress={onPress}
+      activeOpacity={0.8}
+      disabled={isLoading}>
+      <View
+        style={[
+          styles.icon,
+          { backgroundColor: platformDef?.color || COLORS.primary },
+        ]}>
+        <Text style={styles.iconText}>{platformName.charAt(0) || '?'}</Text>
+      </View>
+      <View style={styles.info}>
+        <Text style={styles.platform}>{platformName}</Text>
+        <Text style={styles.username}>{username}</Text>
+      </View>
+      <View
+        style={[
+          styles.action,
+          status === 'success' && styles.actionDone,
+          isLoading && styles.actionLoading,
+        ]}>
+        {isLoading ? (
+          <ActivityIndicator size="small" color={COLORS.white} />
+        ) : (
+          <Text
+            style={[
+              styles.actionText,
+              status === 'success' && styles.actionTextDone,
+            ]}>
+            {actionLabel}
+          </Text>
+        )}
+      </View>
+    </TouchableOpacity>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    backgroundColor: COLORS.bgCard,
+    borderRadius: BORDER_RADIUS.md,
+    padding: SPACING.md,
+    borderWidth: 1,
+    borderColor: COLORS.border,
+  },
+  containerDone: {
+    borderColor: COLORS.success,
+    backgroundColor: 'rgba(34, 197, 94, 0.05)',
+  },
+  icon: {
+    width: 40,
+    height: 40,
+    borderRadius: 10,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  iconText: {
+    color: COLORS.white,
+    fontWeight: '700',
+    fontSize: FONT_SIZE.md,
+  },
+  info: {
+    flex: 1,
+    marginLeft: SPACING.md,
+  },
+  platform: {
+    fontSize: FONT_SIZE.md,
+    fontWeight: '600',
+    color: COLORS.textPrimary,
+  },
+  username: {
+    fontSize: FONT_SIZE.sm,
+    color: COLORS.textMuted,
+    marginTop: 1,
+  },
+  action: {
+    backgroundColor: COLORS.primary,
+    borderRadius: BORDER_RADIUS.sm,
+    paddingHorizontal: SPACING.md,
+    paddingVertical: SPACING.xs,
+    minWidth: 72,
+    alignItems: 'center',
+  },
+  actionDone: {
+    backgroundColor: COLORS.success,
+  },
+  actionLoading: {
+    backgroundColor: COLORS.primaryDark,
+  },
+  actionText: {
+    color: COLORS.white,
+    fontWeight: '700',
+    fontSize: FONT_SIZE.sm,
+  },
+  actionTextDone: {},
+});

apps/mobile/src/navigation/MainTabs.tsx

@@ -63,39 +63,66 @@ function TabIcon({ name, focused }: { name: string; focused: boolean }) {
   );
 }
 
+const renderHomeIcon = ({ focused }: { focused: boolean }) => (
+  <TabIcon name="Home" focused={focused} />
+);
+const renderLinksIcon = ({ focused }: { focused: boolean }) => (
+  <TabIcon name="Links" focused={focused} />
+);
+const renderCardsIcon = ({ focused }: { focused: boolean }) => (
+  <TabIcon name="Cards" focused={focused} />
+);
+const renderSettingsIcon = ({ focused }: { focused: boolean }) => (
+  <TabIcon name="Settings" focused={focused} />
+);
+const renderScanIcon = () => (
+  <View style={styles.scanButton}>
+    <Text style={styles.scanEmoji}>📷</Text>
+  </View>
+);
+
 // ─── Tab Navigator ───
 
 const Tab = createBottomTabNavigator<MainTabsParamList>();
 
 function TabNavigator() {
   return (
     <Tab.Navigator
-      screenOptions={({ route }) => ({
+      screenOptions={{
         headerShown: false,
         tabBarStyle: styles.tabBar,
         tabBarActiveTintColor: COLORS.primary,
         tabBarInactiveTintColor: COLORS.textMuted,
         tabBarLabelStyle: styles.tabLabel,
-        tabBarIcon: ({ focused }) => (
-          <TabIcon name={route.name} focused={focused} />
-        ),
-      })}>
-      <Tab.Screen name="Home" component={HomeScreen} />
-      <Tab.Screen name="Links" component={LinksScreen} />
+      }}>
+      <Tab.Screen
+        name="Home"
+        component={HomeScreen}
+        options={{ tabBarIcon: renderHomeIcon }}
+      />
+      <Tab.Screen
+        name="Links"
+        component={LinksScreen}
+        options={{ tabBarIcon: renderLinksIcon }}
+      />
       <Tab.Screen
         name="Scan"
         component={ScanScreen}
         options={{
           tabBarLabel: '',
-          tabBarIcon: ({ focused }) => (
-            <View style={styles.scanButton}>
-              <Text style={styles.scanEmoji}>📷</Text>
-            </View>
-          ),
+          tabBarIcon: renderScanIcon,
         }}
       />
-      <Tab.Screen name="Cards" component={CardsScreen} />
-      <Tab.Screen name="Settings" component={SettingsScreen} />
+      <Tab.Screen
+        name="Cards"
+        component={CardsScreen}
+        options={{ tabBarIcon: renderCardsIcon }}
+      />
+      <Tab.Screen
+        name="Settings"
+        component={SettingsScreen}
+        options={{ tabBarIcon: renderSettingsIcon }}
+      />
     </Tab.Navigator>
   );
 }

apps/mobile/src/screens/CardsScreen.tsx

@@ -93,7 +93,7 @@ export default function CardsScreen() {
         setSelectedLinkIds([]);
         fetchData();
       }
-    } catch (err) {
+    } catch {
       Alert.alert('Error', 'Failed to create card');
     }
   };

apps/mobile/src/screens/DevCardViewScreen.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 import {
   View,
   Text,
@@ -9,12 +9,12 @@ import {
   Linking,
   Clipboard,
   StatusBar,
-  ActivityIndicator,
   Alert,
 } from 'react-native';
 import { SafeAreaView } from 'react-native-safe-area-context';
 import { COLORS, SPACING, FONT_SIZE, BORDER_RADIUS, SHADOWS } from '../theme/tokens';
 import { Skeleton } from '../components/Skeleton';
+import ProfileLink from '../components/ProfileLink';
 import { PLATFORMS, getProfileUrl, getWebViewUrl } from '@devcard/shared';
 import { API_BASE_URL } from '../config';
 import { useAuth } from '../context/AuthContext';
@@ -133,7 +133,11 @@ export default function DevCardViewScreen({ navigation, route }: Props) {
     } finally {
       setLoading(false);
     }
-  };
+  }, [username]);
+
+  useEffect(() => {
+    fetchProfile();
+  }, [fetchProfile]);
 
   // ─── Hybrid Follow Engine ───
 
@@ -305,7 +309,11 @@ export default function DevCardViewScreen({ navigation, route }: Props) {
             <View style={styles.cardMid}>
               <Skeleton width={70} height={70} borderRadius={35} />
               <View style={styles.mainInfo}>
-                <Skeleton width="80%" height={24} style={{ marginBottom: 8 }} />
+                <Skeleton
+                  width="80%"
+                  height={24}
+                  style={styles.headerSkeletonLine}
+                />
                 <Skeleton width="60%" height={16} />
               </View>
             </View>
@@ -317,9 +325,20 @@ export default function DevCardViewScreen({ navigation, route }: Props) {
 
           {/* Tiles Skeleton */}
           <View style={styles.tilesSection}>
-            <Skeleton width={120} height={14} style={{ marginBottom: 12 }} />
+            <Skeleton
+              width={120}
+              height={14}
+              style={styles.tilesSkeletonLabel}
+            />
             {[1, 2, 3].map(i => (
               <View key={i} style={styles.platformTile}>
+                <Skeleton width={40} height={40} borderRadius={10} />
+                <View style={styles.tileInfo}>
+                  <Skeleton
+                    width="50%"
+                    height={16}
+                    style={styles.tileSkeletonLine}
+                  />
                 <Skeleton width={44} height={44} borderRadius={12} />
                 <View style={[styles.tileInfo, { marginLeft: 16 }]}>
                   <Skeleton width="50%" height={16} style={{ marginBottom: 6 }} />
@@ -420,13 +439,18 @@ export default function DevCardViewScreen({ navigation, route }: Props) {
           </View>
 
           {profile.links.map(link => {
-            const platform = PLATFORMS[link.platform];
             const state = followStates[link.id] || 'idle';
             const btnColor = getButtonColor(link, state);
             const isDone = state === 'success';
             return (
-              <TouchableOpacity
+              <ProfileLink
                 key={link.id}
+                platform={link.platform}
+                username={link.username}
+                status={state}
+                actionLabel={getButtonLabel(link)}
+                onPress={() => handlePlatformAction(link)}
+              />
                 style={[styles.platformTile, isDone && styles.tileDone]}
                 onPress={() => handlePlatformAction(link)}
                 onLongPress={() => {
@@ -572,6 +596,9 @@ const styles = StyleSheet.create({
 
   // ─── Tiles ───
   tilesSection: { gap: SPACING.sm },
+  headerSkeletonLine: { marginBottom: 8 },
+  tilesSkeletonLabel: { marginBottom: 12 },
+  tileSkeletonLine: { marginBottom: 6 },
   tilesHeader: {
     flexDirection: 'row', alignItems: 'center',
     justifyContent: 'space-between', marginBottom: SPACING.xs,

apps/mobile/src/screens/HomeScreen.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 import {
   View,
   Text,
@@ -44,11 +44,7 @@ export default function HomeScreen({ navigation }: Props) {
     ? `${APP_URL}/devcard/${user.defaultCardId}`
     : `${APP_URL}/u/${user?.username}`;
 
-  useEffect(() => {
-    fetchData();
-  }, []);
-
-  const fetchData = async () => {
+  const fetchData = useCallback(async () => {
     try {
       const [profileRes, analyticsRes] = await Promise.all([
         fetch(`${API_BASE_URL}/api/profiles/me`, {
@@ -69,7 +65,11 @@ export default function HomeScreen({ navigation }: Props) {
     } catch (err) {
       console.error('Failed to fetch dashboard data:', err);
     }
-  };
+  }, [token]);
+
+  useEffect(() => {
+    fetchData();
+  }, [fetchData]);
 
   const onRefresh = async () => {
     setRefreshing(true);