fix: redundant re-renders in StatsCards (#164)

src/components/features/StatsCards.tsx

@@ -1,6 +1,6 @@
 
 "use client";
-import React from "react";
+import React, { memo } from "react";
 
 import { useTrust } from "@/components/hooks/useTrust";
 import TrustScoreTooltip from "@/components/ui/TrustScoreTooltip";
@@ -12,7 +12,7 @@ interface StatsCardsProps {
   isLoading?: boolean;
 }
 
-export default function StatsCards({ isLoading = false }: StatsCardsProps) {
+const StatsCards = memo(function StatsCards({ isLoading = false }: StatsCardsProps) {
   const trust = useTrust();
   const userTrustValue = trust.reputation.toString();
 
@@ -45,4 +45,6 @@ export default function StatsCards({ isLoading = false }: StatsCardsProps) {
       ))}
     </div>
   );
-}
+});
+
+export default StatsCards;

src/components/features/__tests__/StatsCards.test.tsx

@@ -0,0 +1,53 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import StatsCards from '../StatsCards';
+import { platformStats } from '@/data/mock-data';
+
+// Mock useTrust hook
+jest.mock('@/components/hooks/useTrust', () => ({
+  useTrust: () => ({
+    reputation: 95,
+  }),
+}));
+
+// Mock StatsCardsSkeleton
+jest.mock('@/components/skeletons', () => ({
+  StatsCardsSkeleton: () => <div data-testid="stats-cards-skeleton" />,
+}));
+
+// Mock TrustScoreTooltip
+jest.mock('@/components/ui/TrustScoreTooltip', () => {
+  return function DummyTrustScoreTooltip() {
+    return <div data-testid="trust-score-tooltip" />;
+  };
+});
+
+describe('StatsCards Component', () => {
+  it('renders loading skeleton when isLoading is true', () => {
+    render(<StatsCards isLoading={true} />);
+    expect(screen.getByTestId('stats-cards-skeleton')).toBeInTheDocument();
+  });
+
+  it('renders "My Trust" stat and platform stats when isLoading is false', () => {
+    render(<StatsCards isLoading={false} />);
+
+    // Check "My Trust" value is rendered
+    expect(screen.getByText('95')).toBeInTheDocument();
+    expect(screen.getByText('My Trust')).toBeInTheDocument();
+
+    // Check tooltip is rendered for "My Trust"
+    expect(screen.getByTestId('trust-score-tooltip')).toBeInTheDocument();
+
+    // Check platform stats are rendered
+    platformStats.forEach(stat => {
+      expect(screen.getByText(stat.label)).toBeInTheDocument();
+      expect(screen.getByText(stat.value)).toBeInTheDocument();
+    });
+  });
+
+  it('matches snapshot to ensure no unexpected changes', () => {
+    const { container } = render(<StatsCards isLoading={false} />);
+    expect(container).toMatchSnapshot();
+  });
+});