feat: add testing infrastructure, dev tooling, and CONTRIBUTING.md

.cursor/rules/mcp-document-query.mdc

@@ -0,0 +1,12 @@
+---
+description: 使用MCP README服务器获取相关文档
+globs: 
+alwaysApply: false
+---
+       在处理需求前，我将先查询 MCP README 服务获取相关文档内容:
+
+       文件路径: {{currentFilePath}}
+       模块名: {{fileBasename}}
+
+       请先阅读以下相关文档，再开始编写代码:
+       {{fetch('http://localhost:8374/api/find-readmes', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: { filePath: '{{currentFilePath}}', moduleName: '{{fileBasename}}' } })}}

.eslintrc.json

@@ -0,0 +1,40 @@
+{
+  "root": true,
+  "env": {
+    "browser": true,
+    "es2021": true,
+    "node": true,
+    "jest": true
+  },
+  "extends": [
+    "eslint:recommended",
+    "plugin:react/recommended",
+    "plugin:react-hooks/recommended",
+    "plugin:jsx-a11y/recommended"
+  ],
+  "parserOptions": {
+    "ecmaFeatures": {
+      "jsx": true
+    },
+    "ecmaVersion": "latest",
+    "sourceType": "module"
+  },
+  "plugins": [
+    "react",
+    "react-hooks",
+    "jsx-a11y"
+  ],
+  "rules": {
+    "react/react-in-jsx-scope": "off",
+    "react/prop-types": "off"
+  },
+  "settings": {
+    "react": {
+      "version": "detect"
+    }
+  },
+  "globals": {
+    "import": "readonly",
+    "import.meta": "readonly"
+  }
+}

.github/copilot-instructions.md

@@ -37,19 +37,19 @@
 - Implement card-based interfaces for content display
 - Use tabs for organizing different view modes (compact, categorized, detailed)
 - Provide toggle features for viewing raw vs rendered content
-- Implement consistent view options:
+- Implement consistent view options using i18n translations:
   ```jsx
-  <TabPane tab={locale === 'zh' ? "紧凑视图" : "Compact View"} key="compact">
+  <TabPane tab={t('components.viewModes.compact')} key="compact">
   ```
 - Follow established patterns for loading states:
   ```jsx
   {loadingStates[id] ? <Spin size="small" /> : <Content />}
   ```
 
 ## Internationalization
-- Use the `useI18n` hook to access the current locale
-- Include both Chinese and English text options for all user-facing content
-- Format language conditionals as: `locale === 'zh' ? "中文" : "English"`
+- Never hard-code string literals in components
+- Always place all text strings in the i18n translation files
+- Use the `useI18n` hook to access translations
 - Group translations by component or feature
 - Maintain consistent terminology across languages
 
@@ -73,8 +73,29 @@
 ## Performance Considerations
 - Implement virtualization for long lists
 - Use pagination for data fetching (limit/offset pattern)
+- Implement both client-side and server-side pagination where appropriate
 - Memoize expensive calculations or rendering
 - Use proper loading states during asynchronous operations
 - Optimize re-renders with appropriate dependency arrays
 - Batch state updates where possible
 - Pre-render content that requires heavy processing (like LaTeX formulas)
+- Use React.memo for components that receive the same props frequently
+- Lazy load components that aren't needed for initial rendering
+
+## API Communication
+- Always use schema validation for API requests and responses
+- Look for corresponding schema files in the `schemas/` directory to verify data
+- Use try/catch blocks for all API calls with proper error handling
+- Implement data caching strategies where appropriate
+- Follow established patterns for loading and error states
+- Use consistent approach for handling API errors:
+  ```jsx
+  try {
+    const response = await apiCall(data);
+    // Process response
+  } catch (error) {
+    handleApiError(error);
+  }
+  ```
+- Validate data against schemas before sending to the server
+- Validate responses against schemas after receiving from the server

.github/workflows/test-coverage.yml

@@ -0,0 +1,146 @@
+name: Test Coverage
+
+on:
+  push:
+    branches: [ main, develop ]
+  pull_request:
+    branches: [ main, develop ]
+
+jobs:
+  coverage:
+    runs-on: ubuntu-latest
+
+    steps:
+    - uses: actions/checkout@v3
+
+    - name: Setup Node.js
+      uses: actions/setup-node@v3
+      with:
+        node-version: '18'
+        cache: 'npm'
+
+    - name: Install dependencies
+      run: npm ci
+
+    - name: Run tests with coverage
+      run: npm run test:coverage
+
+    - name: Generate coverage report
+      run: npm run test:coverage:report
+      continue-on-error: true
+
+    - name: Upload coverage to Codecov
+      uses: codecov/codecov-action@v3
+      with:
+        file: ./coverage/lcov.info
+        flags: unittests
+        name: codecov-umbrella
+        fail_ci_if_error: false
+
+    - name: Upload coverage reports
+      uses: actions/upload-artifact@v3
+      with:
+        name: coverage-report
+        path: |
+          coverage/
+          coverage-report.md
+
+    - name: Comment PR with coverage
+      if: github.event_name == 'pull_request'
+      uses: actions/github-script@v6
+      with:
+        script: |
+          const fs = require('fs');
+
+          // Read coverage summary
+          let coverageComment = '## 📊 Test Coverage Report\n\n';
+
+          try {
+            const coverage = JSON.parse(fs.readFileSync('coverage/coverage-summary.json', 'utf8'));
+            const total = coverage.total;
+
+            coverageComment += '| Metric | Coverage | Details |\n';
+            coverageComment += '|--------|----------|---------|\\n';
+            coverageComment += `| Statements | ${total.statements.pct}% | ${total.statements.covered}/${total.statements.total} |\n`;
+            coverageComment += `| Branches | ${total.branches.pct}% | ${total.branches.covered}/${total.branches.total} |\n`;
+            coverageComment += `| Functions | ${total.functions.pct}% | ${total.functions.covered}/${total.functions.total} |\n`;
+            coverageComment += `| Lines | ${total.lines.pct}% | ${total.lines.covered}/${total.lines.total} |\n`;
+
+            // Check if coverage meets thresholds
+            const threshold = 40; // Current threshold
+            const passed = total.lines.pct >= threshold;
+
+            coverageComment += '\n';
+            coverageComment += passed 
+              ? '✅ Coverage threshold met!' 
+              : `❌ Coverage below threshold (${threshold}%)`;
+
+          } catch (error) {
+            coverageComment += '⚠️ Could not read coverage data\n';
+          }
+
+          // Find and update or create comment
+          const { data: comments } = await github.rest.issues.listComments({
+            owner: context.repo.owner,
+            repo: context.repo.repo,
+            issue_number: context.issue.number,
+          });
+
+          const botComment = comments.find(comment => 
+            comment.user.type === 'Bot' && comment.body.includes('Test Coverage Report')
+          );
+
+          if (botComment) {
+            await github.rest.issues.updateComment({
+              owner: context.repo.owner,
+              repo: context.repo.repo,
+              comment_id: botComment.id,
+              body: coverageComment
+            });
+          } else {
+            await github.rest.issues.createComment({
+              owner: context.repo.owner,
+              repo: context.repo.repo,
+              issue_number: context.issue.number,
+              body: coverageComment
+            });
+          }
+
+    - name: Coverage Badge
+      if: github.ref == 'refs/heads/main'
+      run: |
+        COVERAGE=$(node -p "require('./coverage/coverage-summary.json').total.lines.pct")
+        echo "COVERAGE=$COVERAGE" >> $GITHUB_ENV
+
+    - name: Create Badge
+      if: github.ref == 'refs/heads/main'
+      uses: schneegans/dynamic-badges-action@v1.6.0
+      with:
+        auth: ${{ secrets.GIST_SECRET }}
+        gistID: your-gist-id-here
+        filename: math-project-coverage.json
+        label: Coverage
+        message: ${{ env.COVERAGE }}%
+        color: ${{ env.COVERAGE > 80 && 'brightgreen' || env.COVERAGE > 60 && 'yellow' || 'red' }}
+
+  test-matrix:
+    runs-on: ${{ matrix.os }}
+    strategy:
+      matrix:
+        os: [ubuntu-latest, windows-latest, macos-latest]
+        node: [16, 18, 20]
+
+    steps:
+    - uses: actions/checkout@v3
+
+    - name: Setup Node.js ${{ matrix.node }}
+      uses: actions/setup-node@v3
+      with:
+        node-version: ${{ matrix.node }}
+        cache: 'npm'
+
+    - name: Install dependencies
+      run: npm ci
+
+    - name: Run tests
+      run: npm test -- --ci --coverage=false

.gitignore

@@ -7,16 +7,21 @@
 
 # testing
 /coverage
+/coverage-reports
+coverage-dashboard.html
 
 # production
 /build
 
 # misc
 .DS_Store
+.env
 .env.local
+.env.development
 .env.development.local
-.env.test.local
+.env.production
 .env.production.local
+.env.test.local
 
 npm-debug.log*
 yarn-debug.log*

.husky/pre-commit

@@ -0,0 +1,27 @@
+#!/bin/sh
+. "$(dirname "$0")/_/husky.sh"
+
+echo "🧪 Running tests before commit..."
+
+# Run tests
+npm test -- --watchAll=false --passWithNoTests --bail
+
+# Check if tests passed
+if [ $? -ne 0 ]; then
+  echo "❌ Tests failed! Please fix the failing tests before committing."
+  echo "💡 You can run 'npm test' to see the test results in detail."
+  exit 1
+fi
+
+echo "✅ All tests passed!"
+
+# Optional: Run lint-staged for code quality checks
+# Uncomment the following lines if you want to enforce linting as well
+# echo "🔍 Running code quality checks..."
+# npx lint-staged
+# if [ $? -ne 0 ]; then
+#   echo "❌ Code quality checks failed! Please fix the issues before committing."
+#   exit 1
+# fi
+
+echo "✅ Pre-commit checks passed! Proceeding with commit..."

.lintstagedrc.json

@@ -0,0 +1,9 @@
+{
+  "*.{js,jsx}": [
+    "eslint --fix",
+    "prettier --write"
+  ],
+  "*.{json,css,md}": [
+    "prettier --write"
+  ]
+}

.npmrc

@@ -0,0 +1,2 @@
+@iamtouchskyer:registry=https://npm.pkg.github.com
+//npm.pkg.github.com/:_authToken=${GITHUB_TOKEN}

.prettierrc

@@ -0,0 +1,9 @@
+{
+  "semi": true,
+  "tabWidth": 2,
+  "printWidth": 100,
+  "singleQuote": true,
+  "trailingComma": "es5",
+  "bracketSpacing": true,
+  "jsxBracketSameLine": false
+}