kinemotion 0.43.0__tar.gz → 0.45.0__tar.gz

{kinemotion-0.43.0 → kinemotion-0.45.0}/CHANGELOG.md

@@ -7,6 +7,38 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 <!-- version list -->
 
+## v0.45.0 (2025-12-11)
+
+### Bug Fixes
+
+- **frontend**: Align Quality Check with Key Performance Indicators
+  ([`b071025`](https://github.com/feniix/kinemotion/commit/b0710259c25f501473b9bda3d5f22258a4bb2bb8))
+
+- **frontend**: Exclude test files from tsconfig.json
+  ([`493a2ef`](https://github.com/feniix/kinemotion/commit/493a2efb36113717ef1c1e94e7f10e53a5be1366))
+
+### Features
+
+- **frontend**: Implement comprehensive testing suite and UI refactoring
+  ([`6dce4c6`](https://github.com/feniix/kinemotion/commit/6dce4c619a73c6594944d713e493e94a1abcb965))
+
+- **frontend**: Improve validation banner display and fix type error
+  ([`d9be44d`](https://github.com/feniix/kinemotion/commit/d9be44d0c7100c9de055311556f1bf58f0733fa5))
+
+### Testing
+
+- Update sonar project version
+  ([`7f132ea`](https://github.com/feniix/kinemotion/commit/7f132ea20935e9d74303a7e8ad348577cd6c40a0))
+
+
+## v0.44.0 (2025-12-11)
+
+### Features
+
+- Optimize debug video generation and fix logging warning
+  ([`619ccd5`](https://github.com/feniix/kinemotion/commit/619ccd53a4013457033749481cf6792f44529d93))
+
+
 ## v0.43.0 (2025-12-11)
 
 ### Continuous Integration

{kinemotion-0.43.0 → kinemotion-0.45.0}/PKG-INFO

@@ -1,6 +1,6 @@
 Metadata-Version: 2.4
 Name: kinemotion
-Version: 0.43.0
+Version: 0.45.0
 Summary: Video-based kinematic analysis for athletic performance
 Project-URL: Homepage, https://github.com/feniix/kinemotion
 Project-URL: Repository, https://github.com/feniix/kinemotion

{kinemotion-0.43.0 → kinemotion-0.45.0}/backend/src/kinemotion_backend/logging_config.py

@@ -64,7 +64,6 @@ def setup_logging(*, json_logs: bool = False, log_level: str = "INFO") -> None:
         structlog.configure(
             processors=shared_processors
             + [
-                structlog.processors.ExceptionRenderer(),
                 structlog.dev.ConsoleRenderer(colors=True),
             ],
             wrapper_class=structlog.stdlib.BoundLogger,

{kinemotion-0.43.0 → kinemotion-0.45.0}/frontend/package.json

@@ -8,7 +8,9 @@
     "dev": "vite",
     "build": "tsc && vite build",
     "preview": "vite preview",
-    "type-check": "tsc --noEmit"
+    "type-check": "tsc --noEmit",
+    "test": "vitest",
+    "test:ci": "vitest run"
   },
   "dependencies": {
     "@supabase/supabase-js": "^2.86.0",
@@ -16,12 +18,18 @@
     "react-dom": "^19.2.0"
   },
   "devDependencies": {
+    "@testing-library/dom": "^10.4.1",
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/react": "^16.3.0",
+    "@types/jsdom": "^27",
     "@types/node": "^20.12.0",
     "@types/react": "^19.0.1",
     "@types/react-dom": "^19.0.1",
     "@vitejs/plugin-react": "^5.0.2",
+    "jsdom": "^27.3.0",
     "terser": "^5.31.0",
     "typescript": "^5.9.3",
-    "vite": "^7.2.4"
+    "vite": "^7.2.4",
+    "vitest": "^4.0.15"
   }
 }

kinemotion-0.45.0/frontend/src/App.test.tsx

@@ -0,0 +1,206 @@
+import { render, screen, fireEvent, waitFor } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import App from './App';
+import { useAuth } from './hooks/useAuth';
+import { useAnalysis } from './hooks/useAnalysis';
+import { useRecentUploads } from './hooks/useRecentUploads';
+import { useBackendVersion } from './hooks/useBackendVersion';
+
+// Mock the custom hooks
+vi.mock('./hooks/useAuth');
+vi.mock('./hooks/useAnalysis');
+vi.mock('./hooks/useRecentUploads');
+vi.mock('./hooks/useBackendVersion');
+
+describe('App Integration', () => {
+  // Setup default mock return values
+  const mockAnalyze = vi.fn();
+  const mockRetry = vi.fn();
+  const mockSignOut = vi.fn();
+  const mockAddRecentUpload = vi.fn();
+  const mockClearRecentUploads = vi.fn();
+  const mockSetFile = vi.fn();
+  const mockSetJumpType = vi.fn();
+  const mockSetEnableDebug = vi.fn();
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+
+    // Default: Authenticated, no file, no analysis
+    (useAuth as any).mockReturnValue({
+      user: { email: 'test@example.com' },
+      loading: false,
+      signOut: mockSignOut,
+    });
+
+    (useAnalysis as any).mockReturnValue({
+      file: null,
+      jumpType: 'cmj',
+      loading: false,
+      uploadProgress: 0,
+      metrics: null,
+      error: null,
+      enableDebug: false,
+      setFile: mockSetFile,
+      setJumpType: mockSetJumpType,
+      setEnableDebug: mockSetEnableDebug,
+      analyze: mockAnalyze,
+      retry: mockRetry,
+    });
+
+    (useRecentUploads as any).mockReturnValue({
+      recentUploads: [],
+      addRecentUpload: mockAddRecentUpload,
+      clearRecentUploads: mockClearRecentUploads,
+    });
+
+    (useBackendVersion as any).mockReturnValue({
+      backendVersion: '1.0.0',
+      kinemotionVersion: '1.0.0',
+    });
+  });
+
+  it('renders loading spinner when checking auth', () => {
+    (useAuth as any).mockReturnValue({
+      user: null,
+      loading: true,
+      signOut: mockSignOut,
+    });
+
+    render(<App />);
+    // LoadingSpinner component usually has "Loading..." or we can find by class if needed
+    // In App.tsx: <LoadingSpinner uploadProgress={0} />
+    // Assuming LoadingSpinner renders text or we can just check if App structure is not fully there
+    // For now, let's assume LoadingSpinner renders something identifiable or check absence of header
+    expect(screen.queryByText('Kinemotion')).not.toBeInTheDocument();
+  });
+
+  it('renders Auth component when not logged in', () => {
+    (useAuth as any).mockReturnValue({
+      user: null,
+      loading: false,
+      signOut: mockSignOut,
+    });
+
+    render(<App />);
+    // Auth component likely has "Sign In" or similar
+    // Since we didn't mock Auth component explicitly, it renders the real one.
+    // Let's assume Auth component has a distinctive text.
+    // If Auth is complex, we might mock it, but integration tests usually like real components.
+    // However, for this high-level test, let's just check that main App content is missing.
+    expect(screen.queryByText('Sign Out')).not.toBeInTheDocument();
+  });
+
+  it('renders UploadForm when logged in and no results', () => {
+    render(<App />);
+
+    // Header should be present
+    expect(screen.getByText('Kinemotion')).toBeInTheDocument();
+    expect(screen.getByText('test@example.com')).toBeInTheDocument();
+
+    // UploadForm content should be present
+    expect(screen.getByText(/Drag analysis video here/i)).toBeInTheDocument();
+
+    // Footer should be present
+    expect(screen.getByText(/Backend v1.0.0/i)).toBeInTheDocument();
+  });
+
+  it('renders LoadingSpinner and Skeleton when analyzing', () => {
+    (useAnalysis as any).mockReturnValue({
+      ...useAnalysis(), // Get default mock values
+      loading: true,
+      uploadProgress: 50,
+      file: new File([''], 'video.mp4'),
+    });
+
+    render(<App />);
+
+    // LoadingSpinner should be present (UploadForm is also present in App.tsx structure)
+    // We need to check for LoadingSpinner specifically.
+    // Assuming LoadingSpinner displays progress
+    expect(screen.getByText(/50%/)).toBeInTheDocument();
+  });
+
+  it('renders ResultsSkeleton when processing (upload > 100%)', () => {
+    (useAnalysis as any).mockReturnValue({
+        ...useAnalysis(),
+        loading: true,
+        uploadProgress: 100,
+        file: new File([''], 'video.mp4'),
+    });
+
+    render(<App />);
+    // ResultsSkeleton should be present. It usually has "Processing Video..." text or similar.
+    // If not, we can rely on implementation details or mock the component.
+    // Let's assume ResultsSkeleton renders a specific class or ID, or we can check logic coverage.
+    // In App.tsx: {loading && uploadProgress >= 100 && <ResultsSkeleton />}
+    // Let's just check if it renders without crashing for now, or assume it has distinctive text.
+    // A safe bet for integration if we don't know the exact child text is checking if ResultsDisplay is NOT there.
+    expect(screen.queryByText('Analysis Results')).not.toBeInTheDocument();
+  });
+
+  it('renders ResultsDisplay when analysis is complete', () => {
+    (useAnalysis as any).mockReturnValue({
+      ...useAnalysis(),
+      metrics: {
+        status: 200,
+        message: 'Success',
+        metrics: { data: { jump_height_m: 0.5 } }
+      },
+      loading: false,
+      file: new File([''], 'video.mp4'),
+    });
+
+    render(<App />);
+
+    // ResultsDisplay header
+    expect(screen.getByText('Analysis Results')).toBeInTheDocument();
+    // Specific metric from our mock
+    expect(screen.getByText('Jump Height')).toBeInTheDocument();
+  });
+
+  it('renders ErrorDisplay when there is an error', () => {
+    const errorMessage = 'Failed to analyze video';
+    (useAnalysis as any).mockReturnValue({
+      ...useAnalysis(),
+      error: errorMessage,
+      loading: false,
+    });
+
+    render(<App />);
+
+    // Check that the error message is displayed (might appear multiple times)
+    const errorMessages = screen.getAllByText(errorMessage);
+    expect(errorMessages.length).toBeGreaterThan(0);
+    expect(errorMessages[0]).toBeInTheDocument();
+
+    // Test retry button
+    const retryBtn = screen.getByRole('button', { name: /Try Again/i });
+    fireEvent.click(retryBtn);
+    expect(mockRetry).toHaveBeenCalled();
+  });
+
+  it('triggers analyze and adds to recent uploads on form submit', async () => {
+    const file = new File([''], 'jump.mp4');
+    (useAnalysis as any).mockReturnValue({
+      ...useAnalysis(),
+      file: file,
+      jumpType: 'dropjump',
+    });
+
+    render(<App />);
+
+    // Find the Analyze button in UploadForm
+    const analyzeBtn = screen.getByRole('button', { name: /Run Analysis/i });
+    fireEvent.click(analyzeBtn);
+
+    await waitFor(() => {
+        expect(mockAnalyze).toHaveBeenCalled();
+    });
+
+    // In App.tsx, handleAnalyze calls addRecentUpload IF file exists
+    // Note: Since analyze is async and mocked, we need to ensure the promise resolves.
+    // But since it's a simple mock function, it returns undefined (sync) or we can make it return Promise.resolve()
+    expect(mockAddRecentUpload).toHaveBeenCalledWith('jump.mp4', 'dropjump');
+  });
+});

kinemotion-0.45.0/frontend/src/components/ResultsDisplay.test.tsx

@@ -0,0 +1,195 @@
+import { render, screen, within } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import ResultsDisplay from './ResultsDisplay';
+import { AnalysisResponse, ValidationResults } from '../types/api';
+
+describe('ResultsDisplay', () => {
+  const commonMetrics = {
+    status: 200,
+    message: 'Analysis successful',
+    metrics: {
+      data: {
+        tracking_method: 'MediaPipe',
+        processing_time_s: 15.5,
+      },
+      validation: {
+        status: 'PASS' as ValidationResults['status'],
+        issues: [],
+      },
+    },
+  };
+
+  it('renders CMJ scoreboard with correct metrics and units', () => {
+    const cmjMetrics: AnalysisResponse = {
+      ...commonMetrics,
+      metrics: {
+        ...commonMetrics.metrics,
+        data: {
+          ...commonMetrics.metrics?.data,
+          jump_height_m: 0.50,
+          peak_concentric_velocity_m_s: 3.25,
+          peak_power_w: 2500,
+          countermovement_depth_m: 0.30,
+        },
+      },
+    };
+
+    render(<ResultsDisplay metrics={cmjMetrics} />);
+
+    // Check for Jump Height in scoreboard (highlighted, large, in cm)
+    const kpiGrid = screen.getByRole('heading', { name: /key performance indicators/i }).nextElementSibling as HTMLElement;
+    const jumpHeightCard = within(kpiGrid).getByText('Jump Height').closest('.metric-card') as HTMLElement;
+    const jumpHeightValue = within(jumpHeightCard).getByText('50.00');
+    expect(jumpHeightValue).toBeInTheDocument();
+    expect(within(jumpHeightCard).getByText('cm')).toBeInTheDocument();
+    expect(jumpHeightValue.classList.contains('large')).toBe(true);
+
+    // Check for Peak Velocity in scoreboard
+    const peakVelocityCard = within(kpiGrid).getByText('Peak Velocity').closest('.metric-card') as HTMLElement;
+    expect(peakVelocityCard).toBeInTheDocument();
+    expect(within(peakVelocityCard).getByText('3.25')).toBeInTheDocument();
+    expect(within(peakVelocityCard).getByText('m/s')).toBeInTheDocument();
+
+    // Check for Peak Power in scoreboard
+    const peakPowerCard = within(kpiGrid).getByText('Peak Power').closest('.metric-card') as HTMLElement;
+    expect(peakPowerCard).toBeInTheDocument();
+    expect(within(peakPowerCard).getByText('2500.00')).toBeInTheDocument();
+    expect(within(peakPowerCard).getByText('W')).toBeInTheDocument();
+
+    // Check for Loading (Eccentric) phase metrics in timeline
+    const jumpTimeline = screen.getByRole('heading', { name: /jump phase analysis/i }).nextElementSibling as HTMLElement;
+    const loadingPhaseCard = within(jumpTimeline).getByText('Loading (Eccentric)').closest('.phase-card') as HTMLElement;
+    expect(loadingPhaseCard).toBeInTheDocument();
+    expect(within(loadingPhaseCard).getByText('Depth')).toBeInTheDocument();
+    expect(within(loadingPhaseCard).getByText('30.00')).toBeInTheDocument(); // Converted to cm
+
+    // Check for other details (not in scoreboard/timeline, but in additional metrics)
+    expect(screen.queryByText('Countermovement Depth')).not.toBeInTheDocument();
+  });
+
+  it('renders Drop Jump scoreboard with correct metrics and units', () => {
+    const dropJumpMetrics: AnalysisResponse = {
+      ...commonMetrics,
+      metrics: {
+        ...commonMetrics.metrics,
+        data: {
+          ...commonMetrics.metrics?.data,
+          reactive_strength_index: 2.15,
+          jump_height_m: 0.45,
+          ground_contact_time_ms: 250,
+          flight_time_ms: 300,
+        },
+      },
+    };
+
+    render(<ResultsDisplay metrics={dropJumpMetrics} />);
+
+    // Check for RSI in scoreboard (highlighted, large)
+    const kpiGrid = screen.getByRole('heading', { name: /key performance indicators/i }).nextElementSibling as HTMLElement;
+    const rsiCard = within(kpiGrid).getByText('RSI').closest('.metric-card') as HTMLElement;
+    const rsiValue = within(rsiCard).getByText('2.15');
+    expect(rsiValue).toBeInTheDocument();
+    expect(within(rsiCard).getByText('m/s')).toBeInTheDocument();
+    expect(rsiValue.classList.contains('large')).toBe(true);
+
+    // Check for Jump Height in scoreboard
+    const heightCard = within(kpiGrid).getByText('Height').closest('.metric-card') as HTMLElement;
+    expect(heightCard).toBeInTheDocument();
+    expect(within(heightCard).getByText('45.00')).toBeInTheDocument();
+    expect(within(heightCard).getByText('cm')).toBeInTheDocument();
+
+    // Check for Ground Contact Time in scoreboard
+    const gctCard = within(kpiGrid).getByText('Contact Time').closest('.metric-card') as HTMLElement;
+    expect(gctCard).toBeInTheDocument();
+    expect(within(gctCard).getByText('250.00')).toBeInTheDocument();
+    expect(within(gctCard).getByText('ms')).toBeInTheDocument();
+  });
+
+  it('renders validation banner when validation status is present', () => {
+    const failedMetrics: AnalysisResponse = {
+      ...commonMetrics,
+      metrics: {
+        ...commonMetrics.metrics,
+        validation: {
+          status: 'FAIL' as ValidationResults['status'],
+          issues: [{ metric: 'jump_height', severity: 'ERROR', message: 'Jump height too low' }],
+        },
+      },
+    };
+
+    render(<ResultsDisplay metrics={failedMetrics} />);
+    expect(screen.getByText('Quality Check: FAIL')).toBeInTheDocument();
+    expect(screen.getByText('Jump height too low')).toBeInTheDocument();
+  });
+
+  it('renders informational validation banner for PASS_WITH_WARNINGS with correct icon and text', () => {
+    const warningMetrics: AnalysisResponse = {
+      ...commonMetrics,
+      metrics: {
+        ...commonMetrics.metrics,
+        validation: {
+          status: 'PASS_WITH_WARNINGS' as ValidationResults['status'],
+          issues: [{ metric: 'form_detection', severity: 'INFO', message: 'Minor form inconsistencies detected.' }],
+        },
+      },
+    };
+
+    render(<ResultsDisplay metrics={warningMetrics} />);
+    expect(screen.getByText('Quality Check: PASS WITH WARNINGS')).toBeInTheDocument();
+    expect(screen.getByText('Minor form inconsistencies detected.')).toBeInTheDocument();
+    // Check for the info icon. Vitest/JSDOM might not render actual emojis, so we check content
+    const statusIcon = screen.getByText('ℹ');
+    expect(statusIcon).toBeInTheDocument();
+  });
+
+
+  it('renders video previews when debug_video_url or videoFile are provided', () => {
+    const metricsWithVideos: AnalysisResponse = {
+      ...commonMetrics,
+      debug_video_url: 'http://example.com/debug.mp4',
+      metrics: {
+        ...commonMetrics.metrics,
+        validation: {
+          status: 'PASS' as ValidationResults['status'],
+          issues: [],
+        },
+      },
+    };
+    const mockFile = new File([''], 'test.mp4', { type: 'video/mp4' });
+
+    const { rerender } = render(<ResultsDisplay metrics={metricsWithVideos} videoFile={mockFile} />);
+
+    expect(screen.getByTitle('Original Video')).toBeInTheDocument();
+    expect(screen.getByTitle('Analysis Overlay')).toBeInTheDocument();
+    expect(screen.getByText('Download Analysis Video')).toBeInTheDocument();
+
+    // Test with only original video
+    rerender(<ResultsDisplay metrics={{...commonMetrics, metrics: {...commonMetrics.metrics, validation: {status: 'PASS' as ValidationResults['status'], issues: []}}}} videoFile={mockFile} />);
+    expect(screen.getByTitle('Original Video')).toBeInTheDocument();
+    expect(screen.queryByTitle('Analysis Overlay')).not.toBeInTheDocument();
+    expect(screen.queryByText('Download Analysis Video')).not.toBeInTheDocument();
+  });
+
+  it('formats small numeric values to fixed 2 decimal places when not exponential', () => {
+    const smallValueMetrics: AnalysisResponse = {
+      ...commonMetrics,
+      metrics: {
+        ...commonMetrics.metrics,
+        data: {
+          reactive_strength_index: 0.005,
+          jump_height_m: 0.0001,
+        },
+        validation: {
+          status: 'PASS' as ValidationResults['status'],
+          issues: [],
+        },
+      },
+    };
+
+    render(<ResultsDisplay metrics={smallValueMetrics} />);
+    const kpiGrid = screen.getByRole('heading', { name: /key performance indicators/i }).nextElementSibling as HTMLElement;
+    const jumpHeightCard = within(kpiGrid).getByText('Height').closest('.metric-card') as HTMLElement;
+    expect(within(kpiGrid).getByText('5.00e-3')).toBeInTheDocument(); // RSI - this value is < 0.01, so it will be exponential
+    expect(within(jumpHeightCard).getByText('0.01')).toBeInTheDocument(); // Jump Height (0.0001m * 100 = 0.01cm, not exponential)
+  });
+});