9d1af60f30
- 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)
116 lines
2.9 KiB
JavaScript
116 lines
2.9 KiB
JavaScript
import { defineConfig } from 'vite'
|
|
import react from '@vitejs/plugin-react'
|
|
import { VitePWA } from 'vite-plugin-pwa'
|
|
import path from 'path'
|
|
|
|
// Parse allowed hosts from environment variable
|
|
const getAllowedHosts = () => {
|
|
const hosts = process.env.VITE_ALLOWED_HOSTS;
|
|
|
|
// If set to 'all', allow all hosts
|
|
if (hosts === 'all') {
|
|
return 'all';
|
|
}
|
|
|
|
// If set, parse comma-separated list
|
|
if (hosts) {
|
|
return hosts.split(',').map(h => h.trim());
|
|
}
|
|
|
|
// Default: localhost only
|
|
return ['localhost'];
|
|
};
|
|
|
|
// https://vite.dev/config/
|
|
export default defineConfig({
|
|
plugins: [
|
|
react(),
|
|
VitePWA({
|
|
registerType: 'autoUpdate',
|
|
includeAssets: ['favicon.ico', 'robots.txt', 'apple-touch-icon.png'],
|
|
manifest: {
|
|
name: 'spotlight.cam - Dance Event Video Exchange',
|
|
short_name: 'spotlight',
|
|
description: 'P2P video exchange platform for dance event participants',
|
|
theme_color: '#6366f1',
|
|
background_color: '#ffffff',
|
|
display: 'standalone',
|
|
orientation: 'portrait',
|
|
scope: '/',
|
|
start_url: '/',
|
|
icons: [
|
|
{
|
|
src: '/icons/icon-192x192.png',
|
|
sizes: '192x192',
|
|
type: 'image/png',
|
|
purpose: 'any maskable',
|
|
},
|
|
{
|
|
src: '/icons/icon-512x512.png',
|
|
sizes: '512x512',
|
|
type: 'image/png',
|
|
purpose: 'any maskable',
|
|
},
|
|
{
|
|
src: '/icons/apple-touch-icon.png',
|
|
sizes: '180x180',
|
|
type: 'image/png',
|
|
},
|
|
],
|
|
},
|
|
workbox: {
|
|
// Cache only static assets (no API caching)
|
|
globPatterns: ['**/*.{js,css,html,ico,png,svg,woff2}'],
|
|
runtimeCaching: [
|
|
{
|
|
// Cache images from ui-avatars.com
|
|
urlPattern: /^https:\/\/ui-avatars\.com\/.*/i,
|
|
handler: 'CacheFirst',
|
|
options: {
|
|
cacheName: 'avatar-images',
|
|
expiration: {
|
|
maxEntries: 100,
|
|
maxAgeSeconds: 60 * 60 * 24 * 7, // 7 days
|
|
},
|
|
cacheableResponse: {
|
|
statuses: [0, 200],
|
|
},
|
|
},
|
|
},
|
|
],
|
|
navigateFallback: null, // Disable offline fallback (app requires internet)
|
|
},
|
|
devOptions: {
|
|
enabled: false, // Disable in dev to avoid conflicts
|
|
},
|
|
}),
|
|
],
|
|
server: {
|
|
host: '0.0.0.0',
|
|
port: 5173,
|
|
allowedHosts: getAllowedHosts(),
|
|
watch: {
|
|
usePolling: true,
|
|
},
|
|
hmr: {
|
|
clientPort: 8080,
|
|
},
|
|
},
|
|
test: {
|
|
globals: true,
|
|
environment: 'jsdom',
|
|
setupFiles: './src/test/setup.js',
|
|
css: true,
|
|
coverage: {
|
|
provider: 'v8',
|
|
reporter: ['text', 'json', 'html'],
|
|
exclude: [
|
|
'node_modules/',
|
|
'src/test/',
|
|
'**/*.config.js',
|
|
'**/*.config.ts',
|
|
],
|
|
},
|
|
},
|
|
})
|