feat(tests): update test files and improve code structure

- Remove unused mocks in reportWebVitals.test.ts
- Simplify imports in Header.test.tsx
- Add fetchPriority to ImageCard component
- Use window.requestIdleCallback in Layout component
- Lazy-load CodeHighlighter in SpecTabs component
- Update font-face properties in fonts.css
- Add Vitest globals to eslint configuration
- Improve nginx configuration comments
- Add vite-plugin-compression2 to package.json
- Create CodeHighlighter component for syntax highlighting

Author: MarkusNeusinger

app/eslint.config.js

@@ -55,6 +55,7 @@ export default [
         MessageEvent: 'readonly',
         // APIs
         AbortController: 'readonly',
+        AbortSignal: 'readonly',
         RequestInit: 'readonly',
         Response: 'readonly',
         ResizeObserver: 'readonly',
@@ -82,6 +83,23 @@ export default [
       'react-hooks/refs': 'off',
     },
   },
+  {
+    files: ['src/**/*.test.{ts,tsx}'],
+    languageOptions: {
+      globals: {
+        // Vitest globals
+        describe: 'readonly',
+        it: 'readonly',
+        expect: 'readonly',
+        vi: 'readonly',
+        beforeEach: 'readonly',
+        afterEach: 'readonly',
+        beforeAll: 'readonly',
+        afterAll: 'readonly',
+        globalThis: 'readonly',
+      },
+    },
+  },
   {
     ignores: ['dist/**', 'node_modules/**', '*.config.js'],
   },

app/nginx.conf

@@ -38,11 +38,12 @@ server {
     root /usr/share/nginx/html;
     index index.html;
 
-    # Compression
+    # Compression - serve pre-compressed gzip files from Vite build when available
     gzip on;
     gzip_vary on;
     gzip_min_length 1024;
     gzip_types text/plain text/css text/xml text/javascript application/javascript application/xml+rss application/json;
+    gzip_static on;
 
     # Cache static assets
     location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg|woff|woff2|ttf|eot)$ {

app/package.json

@@ -49,6 +49,7 @@
     "jsdom": "^29.0.1",
     "typescript": "^5.9.2",
     "vite": "^7.3.1",
+    "vite-plugin-compression2": "^2.5.3",
     "vitest": "^4.0.18"
   }
 }

app/src/analytics/reportWebVitals.test.ts

@@ -45,10 +45,6 @@ describe('reportWebVitals', () => {
     window.plausible = vi.fn();
 
     // Mock the dynamic import
-    const mockOnLCP = vi.fn();
-    const mockOnCLS = vi.fn();
-    const mockOnINP = vi.fn();
-
     vi.mock('web-vitals', () => ({
       onLCP: (cb: (m: { value: number; rating: string }) => void) => cb({ value: 2500, rating: 'good' }),
       onCLS: (cb: (m: { value: number; rating: string }) => void) => cb({ value: 0.15, rating: 'needs-improvement' }),

app/src/components/CodeHighlighter.tsx

@@ -0,0 +1,26 @@
+import SyntaxHighlighter from 'react-syntax-highlighter/dist/esm/prism-light';
+import { oneLight } from 'react-syntax-highlighter/dist/esm/styles/prism';
+import python from 'react-syntax-highlighter/dist/esm/languages/prism/python';
+
+SyntaxHighlighter.registerLanguage('python', python);
+
+interface CodeHighlighterProps {
+  code: string;
+}
+
+export default function CodeHighlighter({ code }: CodeHighlighterProps) {
+  return (
+    <SyntaxHighlighter
+      language="python"
+      style={oneLight}
+      customStyle={{
+        margin: 0,
+        fontSize: '0.85rem',
+        fontFamily: '"MonoLisa", "MonoLisa Fallback", monospace',
+        background: 'transparent',
+      }}
+    >
+      {code}
+    </SyntaxHighlighter>
+  );
+}

app/src/components/Header.test.tsx

@@ -1,4 +1,4 @@
-import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
+import { describe, it, expect, vi, beforeEach } from 'vitest';
 import { fireEvent } from '@testing-library/react';
 import { render, screen, userEvent } from '../test-utils';
 import { Header } from './Header';

app/src/components/ImageCard.tsx

@@ -150,6 +150,7 @@ export const ImageCard = memo(function ImageCard({
         <CardMedia
           component="img"
           loading={index < BATCH_SIZE ? 'eager' : 'lazy'}
+          fetchPriority={index === 0 ? 'high' : undefined}
           image={image.thumb || image.url}
           alt={viewMode === 'library' ? `${image.spec_id} - ${image.library}` : `${selectedSpec} - ${image.library}`}
           sx={{

app/src/components/Layout.tsx

@@ -36,7 +36,7 @@ export function AppDataProvider({ children }: { children: ReactNode }) {
 
   // Load shared data after browser is idle — gives /plots/filter bandwidth priority
   useEffect(() => {
-    const id = requestIdleCallback(async () => {
+    const id = window.requestIdleCallback(async () => {
       try {
         const [specsRes, libsRes, statsRes] = await Promise.all([
           fetch(`${API_URL}/specs`),
@@ -62,7 +62,7 @@ export function AppDataProvider({ children }: { children: ReactNode }) {
         console.error('Error loading initial data:', err);
       }
     });
-    return () => cancelIdleCallback(id);
+    return () => window.cancelIdleCallback(id);
   }, []);
 
   return (

app/src/components/SpecTabs.tsx

@@ -1,4 +1,4 @@
-import { useState, useCallback, useMemo } from 'react';
+import { useState, useCallback, lazy, Suspense } from 'react';
 import Box from '@mui/material/Box';
 import Tabs from '@mui/material/Tabs';
 import Tab from '@mui/material/Tab';
@@ -15,11 +15,8 @@ import ContentCopyIcon from '@mui/icons-material/ContentCopy';
 import CheckIcon from '@mui/icons-material/Check';
 import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
 import ExpandLessIcon from '@mui/icons-material/ExpandLess';
-import SyntaxHighlighter from 'react-syntax-highlighter/dist/esm/prism-light';
-import { oneLight } from 'react-syntax-highlighter/dist/esm/styles/prism';
-import python from 'react-syntax-highlighter/dist/esm/languages/prism/python';
 
-SyntaxHighlighter.registerLanguage('python', python);
+const CodeHighlighter = lazy(() => import('./CodeHighlighter'));
 
 // Map tag category names to URL parameter names
 const SPEC_TAG_PARAM_MAP: Record<string, string> = {
@@ -217,24 +214,16 @@ export function SpecTabs({
     }
   };
 
-  // Memoize syntax-highlighted code
-  const highlightedCode = useMemo(() => {
-    if (!code) return null;
-    return (
-      <SyntaxHighlighter
-        language="python"
-        style={oneLight}
-        customStyle={{
-          margin: 0,
-          fontSize: '0.85rem',
-          fontFamily: '"MonoLisa", "MonoLisa Fallback", monospace',
-          background: 'transparent',
-        }}
-      >
+  // Lazy-loaded syntax highlighter - only loads when Code tab is opened
+  const highlightedCode = code ? (
+    <Suspense fallback={
+      <Box sx={{ fontFamily: '"MonoLisa", "MonoLisa Fallback", monospace', fontSize: '0.85rem', whiteSpace: 'pre-wrap', color: '#4b5563' }}>
         {code}
-      </SyntaxHighlighter>
-    );
-  }, [code]);
+      </Box>
+    }>
+      <CodeHighlighter code={code} />
+    </Suspense>
+  ) : null;
 
   // Format date
   const formatDate = (dateStr?: string) => {

app/src/hooks/useCopyCode.test.ts

@@ -1,4 +1,4 @@
-import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
 import { renderHook, act } from '@testing-library/react';
 import { useCopyCode } from './useCopyCode';