diff --git a/src/components/features/StatsCards.tsx b/src/components/features/StatsCards.tsx index bac24a5..2d27441 100644 --- a/src/components/features/StatsCards.tsx +++ b/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) { ))} ); -} +}); + +export default StatsCards; diff --git a/src/components/features/__tests__/StatsCards.test.tsx b/src/components/features/__tests__/StatsCards.test.tsx new file mode 100644 index 0000000..c86ff23 --- /dev/null +++ b/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: () =>
, +})); + +// Mock TrustScoreTooltip +jest.mock('@/components/ui/TrustScoreTooltip', () => { + return function DummyTrustScoreTooltip() { + return
; + }; +}); + +describe('StatsCards Component', () => { + it('renders loading skeleton when isLoading is true', () => { + render(); + expect(screen.getByTestId('stats-cards-skeleton')).toBeInTheDocument(); + }); + + it('renders "My Trust" stat and platform stats when isLoading is false', () => { + render(); + + // 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(); + expect(container).toMatchSnapshot(); + }); +});