Add unit tests for <AnimatedCounter /> component

frontend/package.json

@@ -11,8 +11,9 @@
     "lint": "eslint . --config eslint.config.mjs --fix --max-warnings=0",
     "lint:check": "eslint . --config eslint.config.mjs --max-warnings=0",
     "start": "next start",
-    "test:e2e": "npx playwright test",
-    "test:unit": "tsc --noEmit && NODE_OPTIONS='--experimental-vm-modules --no-warnings=DEP0040' jest"
+    "test": "cross-env NODE_OPTIONS=--experimental-vm-modules jest",
+    "test:unit": "tsc --noEmit && cross-env NODE_OPTIONS=--experimental-vm-modules jest",
+    "test:e2e": "npx playwright test"
   },
   "dependencies": {
     "@apollo/client": "^3.13.9",
@@ -83,6 +84,7 @@
     "@typescript-eslint/eslint-plugin": "^8.38.0",
     "@typescript-eslint/parser": "^8.38.0",
     "autoprefixer": "^10.4.21",
+    "cross-env": "^10.0.0",
     "eslint": "^9.32.0",
     "eslint-config-next": "^15.4.5",
     "eslint-config-prettier": "^10.1.8",
@@ -104,11 +106,11 @@
     "prettier-plugin-tailwindcss": "^0.6.14",
     "require-in-the-middle": "^7.5.2",
     "tailwindcss": "^3.4.17",
-    "ts-jest": "^29.4.0",
     "ts-node": "^10.9.2",
     "typescript": "^5.8.3",
     "typescript-eslint": "^8.38.0",
-    "util": "^0.12.5"
+    "util": "^0.12.5",
+    "which": "^2.0.2"
   },
   "engines": {
     "node": "22"

frontend/src/components/AnimatedCounter.test.tsx

@@ -0,0 +1,57 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import AnimatedCounter from './AnimatedCounter';
+import '@testing-library/jest-dom';
+import { act } from 'react-dom/test-utils';
+
+describe('AnimatedCounter', () => {
+  beforeEach(() => {
+    jest.useFakeTimers();
+  });
+
+  afterEach(() => {
+    jest.runOnlyPendingTimers();
+    jest.useRealTimers();
+  });
+
+  it('renders without crashing', () => {
+  render(<AnimatedCounter end={100} duration={1000} />);
+    expect(screen.getByRole('status')).toBeInTheDocument();
+  });
+
+  it('renders initial value as 0', () => {
+  render(<AnimatedCounter end={100} duration={1000} />);
+    expect(screen.getByText('0')).toBeInTheDocument();
+  });
+
+  it('animates from 0 to end value over time', () => {
+    render(<AnimatedCounter end={100} duration={1000} />);
+    act(() => {
+      jest.advanceTimersByTime(500);
+    });
+    const midValue = parseInt(screen.getByRole('status').textContent || '', 10);
+    expect(midValue).toBeGreaterThan(0);
+    expect(midValue).toBeLessThan(100);
+
+    act(() => {
+      jest.advanceTimersByTime(500);
+    });
+    expect(screen.getByText('100')).toBeInTheDocument();
+  });
+
+  it('handles duration 0 (renders instantly)', () => {
+    render(<AnimatedCounter end={42} duration={0} />);
+    expect(screen.getByText('42')).toBeInTheDocument();
+  });
+
+  it('does not animate if start and end are equal', () => {
+  render(<AnimatedCounter end={50} duration={1000} />);
+    expect(screen.getByText('50')).toBeInTheDocument();
+  });
+
+  it('has proper accessibility attributes', () => {
+    render(<AnimatedCounter end={10} duration={1000} />);
+    const counter = screen.getByRole('status');
+    expect(counter).toHaveAttribute('aria-label');
+  });
+});

frontend/src/components/AnimatedCounter.tsx

@@ -2,12 +2,20 @@ import millify from 'millify'
 import { useEffect, useRef, useState } from 'react'
 
 interface AnimatedCounterProps {
-  className?: string
-  duration: number
   end: number
+  duration: number
+  className?: string
+  'aria-label'?: string
+  onEnd?: () => void
 }
 
-export default function AnimatedCounter({ end, duration, className }: AnimatedCounterProps) {
+export default function AnimatedCounter({
+  end,
+  duration,
+  className,
+  onEnd,
+  'aria-label': ariaLabel,
+}: AnimatedCounterProps) {
   const [count, setCount] = useState(0)
   const countRef = useRef(count)
   const startTime = useRef(Date.now())
@@ -25,11 +33,21 @@ export default function AnimatedCounter({ end, duration, className }: AnimatedCo
 
       if (progress < 1) {
         requestAnimationFrame(animate)
+      } else {
+        if (onEnd) onEnd()
       }
     }
 
     requestAnimationFrame(animate)
-  }, [end, duration])
+  }, [end, duration, onEnd])
 
-  return <span className={className}>{millify(count)}</span>
+  return (
+    <span
+      className={className}
+      role="status"
+      aria-label={ariaLabel || 'animated counter'}
+    >
+      {millify(count)}
+    </span>
+  )
 }

frontend/src/sentry.server.config.ts

@@ -1,6 +1,7 @@
 import * as Sentry from '@sentry/nextjs'
 import { SENTRY_DSN, ENVIRONMENT, RELEASE_VERSION } from 'utils/credentials'
 
+
 Sentry.init({
   dsn: SENTRY_DSN || '',
   enabled: !!SENTRY_DSN,

package.json

@@ -0,0 +1,5 @@
+{
+	"devDependencies": {
+		"which": "^5.0.0"
+	}
+}