Commit Graph

3 Commits

Author SHA1 Message Date
Radosław Gierwiało
9d1af60f30 test(pwa): add comprehensive PWA and Vitest test suite
- Install Vitest and React Testing Library for frontend tests
- Configure Vitest with jsdom environment and coverage
- Add test setup file with global mocks (matchMedia, IntersectionObserver)
- Write InstallPWA component tests (14 tests):
  - iOS detection and manual installation instructions
  - Android/Chrome beforeinstallprompt event handling
  - Install and dismiss functionality
  - 7-day dismissal persistence (localStorage)
  - Installed state detection (standalone mode)
- Write PWA configuration tests (28 tests):
  - App icons existence (PNG and SVG)
  - iOS splash screens for multiple devices
  - Vite PWA plugin configuration
  - index.html meta tags (iOS PWA support)
  - Manifest schema validation
  - Service worker configuration (Workbox)
- Write service worker tests (24 tests):
  - Service worker registration and lifecycle
  - Workbox integration
  - Cache Storage API operations
- Migrate existing WebRTC tests from Jest to Vitest (25 tests):
  - Update imports to use Vitest (vi.fn, describe, it, expect)
  - Fix WebRTCWarning and webrtcDetection test expectations
- Add test scripts to package.json (test, test:watch, test:ui, test:coverage)

All 91 tests passing (InstallPWA: 14, PWA config: 28, Service Worker: 24,
WebRTC: 25 total across 2 files)
2025-11-19 21:24:34 +01:00
Radosław Gierwiało
91962ab4d5 test: add comprehensive WebRTC test suite
Add test coverage for WebRTC signaling and detection:

Backend tests (socket-webrtc.test.js):
- WebRTC offer/answer relay via Socket.IO
- ICE candidate exchange
- Authorization checks for match access
- Full WebRTC signaling flow
- All 7 tests passing

Frontend tests (ready for test runner):
- webrtcDetection.test.js: Browser WebRTC capability detection
- WebRTCWarning.test.jsx: Warning component rendering and interaction

Note: Frontend tests require test runner setup (e.g., Vitest)
2025-11-15 16:29:15 +01:00
Radosław Gierwiało
d23a12e5e3 feat: implement WebRTC P2P file transfer with detection and fallback
Implemented complete WebRTC peer-to-peer file transfer system for match chat:

**Core WebRTC Implementation:**
- Created useWebRTC hook with RTCPeerConnection and RTCDataChannel
- P2P file transfer with 16KB chunking for large files (tested up to 700MB)
- Real-time progress monitoring for sender and receiver
- Automatic file download on receiver side
- End-to-end encryption via DTLS (native WebRTC)
- ICE candidate exchange via Socket.IO signaling
- Support for host candidates (localhost testing)

**WebRTC Detection & User Experience:**
- Automatic WebRTC capability detection on page load
- Detects if ICE candidates can be generated (fails in Opera, privacy-focused browsers, VPNs)
- User-friendly warning component with fix suggestions
- Graceful degradation: disables WebRTC button when blocked
- Suggests alternative methods (video links via Google Drive/Dropbox)

**Socket.IO Improvements:**
- Fixed multiple socket instance creation issue
- Implemented socket instance reuse pattern
- Disabled React.StrictMode to prevent reconnection loops in development

**Technical Details:**
- RTCPeerConnection with configurable STUN servers (currently using localhost config)
- RTCDataChannel with ordered delivery
- Comprehensive logging for debugging (ICE gathering, connection states, signaling)
- Match room-based signaling relay via Socket.IO
- Authorization checks for all WebRTC signaling events

**Files Changed:**
- frontend/src/hooks/useWebRTC.js - Complete WebRTC implementation
- frontend/src/utils/webrtcDetection.js - WebRTC capability detection
- frontend/src/components/WebRTCWarning.jsx - User warning component
- frontend/src/pages/MatchChatPage.jsx - WebRTC integration
- frontend/src/services/socket.js - Socket instance reuse
- frontend/src/main.jsx - Disabled StrictMode for Socket.IO stability

**Testing:**
-  Verified working in Chrome (ICE candidates generated)
-  Tested with 700MB file transfer
-  Detection working in Opera (shows warning when WebRTC blocked)
-  P2P connection establishment and DataChannel opening
-  File chunking and progress monitoring

**TODO:**
- Add STUN server configuration for production (NAT traversal)
- Consider server-based upload fallback for blocked users
2025-11-15 16:12:02 +01:00