diff --git a/apps/api/src/main.ts b/apps/api/src/main.ts index b331ec7d8..833a943b4 100644 --- a/apps/api/src/main.ts +++ b/apps/api/src/main.ts @@ -14,6 +14,18 @@ import { FeatureAvailabilityGuard } from './domain/policy/FeatureAvailabilityGua async function bootstrap() { const app = await NestFactory.create(AppModule, process.env.GENERATE_OPENAPI ? { logger: false } : undefined); + // Website runs on a different origin in dev/docker (e.g. http://localhost:3000 -> http://localhost:3001), + // and our website HTTP client uses `credentials: 'include'`, so we must support CORS with credentials. + app.enableCors({ + credentials: true, + origin: (origin, callback) => { + if (!origin) { + return callback(null, false); + } + return callback(null, origin); + }, + }); + app.useGlobalPipes( new ValidationPipe({ whitelist: true, diff --git a/apps/website/app/leagues/page.tsx b/apps/website/app/leagues/page.tsx index b5a987c1a..d6f7146e3 100644 --- a/apps/website/app/leagues/page.tsx +++ b/apps/website/app/leagues/page.tsx @@ -378,13 +378,10 @@ export default function LeaguesPage() { const [activeCategory, setActiveCategory] = useState('all'); const [showFilters, setShowFilters] = useState(false); - useEffect(() => { - void loadLeagues(); - }, []); + const { leagueService } = useServices(); - const loadLeagues = async () => { + const loadLeagues = useCallback(async () => { try { - const { leagueService } = useServices(); const leagues = await leagueService.getAllLeagues(); setRealLeagues(leagues); } catch (error) { @@ -392,7 +389,11 @@ export default function LeaguesPage() { } finally { setLoading(false); } - }; + }, [leagueService]); + + useEffect(() => { + void loadLeagues(); + }, [loadLeagues]); const leagues = realLeagues; diff --git a/apps/website/app/page.tsx b/apps/website/app/page.tsx index 32e3a1e2a..84d7dccc9 100644 --- a/apps/website/app/page.tsx +++ b/apps/website/app/page.tsx @@ -14,13 +14,11 @@ import SimPlatformMockup from '@/components/mockups/SimPlatformMockup'; import MockupStack from '@/components/ui/MockupStack'; import Card from '@/components/ui/Card'; import Button from '@/components/ui/Button'; +import { getWebsiteApiBaseUrl } from '@/lib/config/apiBaseUrl'; import { ServiceFactory } from '@/lib/services/ServiceFactory'; export default async function HomePage() { - const baseUrl = - process.env.API_BASE_URL ?? - process.env.NEXT_PUBLIC_API_BASE_URL ?? - 'http://api:3000'; + const baseUrl = getWebsiteApiBaseUrl(); const serviceFactory = new ServiceFactory(baseUrl); const sessionService = serviceFactory.createSessionService(); const landingService = serviceFactory.createLandingService(); diff --git a/apps/website/lib/apiClient.ts b/apps/website/lib/apiClient.ts index 7ee58ec54..b6ba359e0 100644 --- a/apps/website/lib/apiClient.ts +++ b/apps/website/lib/apiClient.ts @@ -1,5 +1,4 @@ import { ApiClient } from './api/index'; +import { getWebsiteApiBaseUrl } from './config/apiBaseUrl'; -const API_BASE_URL = process.env.NEXT_PUBLIC_API_BASE_URL || 'http://localhost:3001'; - -export const apiClient = new ApiClient(API_BASE_URL); \ No newline at end of file +export const apiClient = new ApiClient(getWebsiteApiBaseUrl()); \ No newline at end of file diff --git a/apps/website/lib/config/apiBaseUrl.ts b/apps/website/lib/config/apiBaseUrl.ts new file mode 100644 index 000000000..881bdb07e --- /dev/null +++ b/apps/website/lib/config/apiBaseUrl.ts @@ -0,0 +1,36 @@ +function normalizeBaseUrl(raw: string): string { + const trimmed = raw.trim(); + return trimmed.endsWith('/') ? trimmed.slice(0, -1) : trimmed; +} + +export function getWebsiteApiBaseUrl(): string { + const isBrowser = typeof window !== 'undefined'; + + const configured = isBrowser + ? process.env.NEXT_PUBLIC_API_BASE_URL + : process.env.API_BASE_URL ?? process.env.NEXT_PUBLIC_API_BASE_URL; + + if (configured && configured.trim()) { + return normalizeBaseUrl(configured); + } + + const isTestLike = + process.env.NODE_ENV === 'test' || + process.env.CI === 'true' || + process.env.DOCKER === 'true'; + + if (isTestLike) { + throw new Error( + isBrowser + ? 'Missing NEXT_PUBLIC_API_BASE_URL. In Docker/CI/test we do not allow falling back to localhost.' + : 'Missing API_BASE_URL. In Docker/CI/test we do not allow falling back to localhost.', + ); + } + + const fallback = + process.env.NODE_ENV === 'development' + ? 'http://localhost:3001' + : 'http://api:3000'; + + return normalizeBaseUrl(fallback); +} \ No newline at end of file diff --git a/apps/website/lib/services/ServiceFactory.ts b/apps/website/lib/services/ServiceFactory.ts index c358485e7..16f581f78 100644 --- a/apps/website/lib/services/ServiceFactory.ts +++ b/apps/website/lib/services/ServiceFactory.ts @@ -12,6 +12,7 @@ import { DashboardApiClient } from '../api/dashboard/DashboardApiClient'; import { PolicyApiClient } from '../api/policy/PolicyApiClient'; import { ProtestsApiClient } from '../api/protests/ProtestsApiClient'; import { PenaltiesApiClient } from '../api/penalties/PenaltiesApiClient'; +import { getWebsiteApiBaseUrl } from '../config/apiBaseUrl'; import { PenaltyService } from './penalties/PenaltyService'; import { ConsoleErrorReporter } from '../infrastructure/logging/ConsoleErrorReporter'; import { ConsoleLogger } from '../infrastructure/logging/ConsoleLogger'; @@ -102,7 +103,7 @@ export class ServiceFactory { private static getDefaultInstance(): ServiceFactory { if (!this.defaultInstance) { - this.defaultInstance = new ServiceFactory(process.env.NEXT_PUBLIC_API_BASE_URL || 'http://localhost:3001'); + this.defaultInstance = new ServiceFactory(getWebsiteApiBaseUrl()); } return this.defaultInstance; } diff --git a/apps/website/lib/services/ServiceProvider.tsx b/apps/website/lib/services/ServiceProvider.tsx index 07295d7cc..d3cfba01d 100644 --- a/apps/website/lib/services/ServiceProvider.tsx +++ b/apps/website/lib/services/ServiceProvider.tsx @@ -2,6 +2,7 @@ import { QueryClient, QueryClientProvider } from '@tanstack/react-query'; import { createContext, ReactNode, useContext, useMemo } from 'react'; +import { getWebsiteApiBaseUrl } from '../config/apiBaseUrl'; import { ServiceFactory } from './ServiceFactory'; // Import all service types @@ -82,7 +83,7 @@ interface ServiceProviderProps { export function ServiceProvider({ children }: ServiceProviderProps) { const services = useMemo(() => { - const serviceFactory = new ServiceFactory(process.env.NEXT_PUBLIC_API_BASE_URL || 'http://localhost:3001'); + const serviceFactory = new ServiceFactory(getWebsiteApiBaseUrl()); return { raceService: serviceFactory.createRaceService(), diff --git a/docker-compose.test.yml b/docker-compose.test.yml new file mode 100644 index 000000000..96e5e6bd4 --- /dev/null +++ b/docker-compose.test.yml @@ -0,0 +1,89 @@ +services: + deps: + image: node:20-alpine + working_dir: /app + environment: + - NODE_ENV=development + - NPM_CONFIG_FUND=false + - NPM_CONFIG_AUDIT=false + - NPM_CONFIG_UPDATE_NOTIFIER=false + volumes: + - ./:/app + - test_node_modules:/app/node_modules + - test_npm_cache:/root/.npm + command: + [ + "sh", + "-lc", + "set -e; LOCK_HASH=\"$$(sha1sum package-lock.json | awk '{print $$1}')\"; MARKER=\"node_modules/.gridpilot_lock_hash_test\"; if [ -f \"$$MARKER\" ] && [ \"$$(cat \"$$MARKER\")\" = \"$$LOCK_HASH\" ]; then echo \"[deps] node_modules up-to-date\"; else echo \"[deps] installing api+website deps\"; npm install --no-package-lock --workspace=./apps/api --workspace=./apps/website --include-workspace-root --no-audit --fund=false --prefer-offline; echo \"$$LOCK_HASH\" > \"$$MARKER\"; fi", + ] + networks: + - gridpilot-test-network + restart: "no" + + api: + image: node:20-alpine + environment: + - NODE_ENV=test + ports: + - "3001:3000" + command: + [ + "sh", + "-lc", + "node -e \"const http=require('http'); const baseCors={ 'Access-Control-Allow-Credentials':'true','Access-Control-Allow-Headers':'Content-Type','Access-Control-Allow-Methods':'GET,POST,PUT,PATCH,DELETE,OPTIONS' }; const server=http.createServer((req,res)=>{ const origin=req.headers.origin||'http://localhost:3000'; res.setHeader('Access-Control-Allow-Origin', origin); res.setHeader('Vary','Origin'); for(const [k,v] of Object.entries(baseCors)){ res.setHeader(k,v); } if(req.method==='OPTIONS'){ res.statusCode=204; return res.end(); } const url=new URL(req.url,'http://localhost'); const send=(code,obj)=>{ res.statusCode=code; res.setHeader('content-type','application/json'); res.end(JSON.stringify(obj)); }; if(url.pathname==='/health'){ return send(200,{status:'ok'});} if(url.pathname==='/auth/session'){ res.statusCode=200; res.setHeader('content-type','application/json'); return res.end('null'); } if(url.pathname==='/races/page-data'){ return send(200,{races:[]}); } if(url.pathname==='/leagues/all-with-capacity'){ return send(200,{leagues:[], totalCount:0}); } if(url.pathname==='/teams/all'){ return send(200,{teams:[], totalCount:0}); } return send(404,{message:'Not Found', path:url.pathname}); }); server.listen(3000,()=>console.log('[api-mock] listening on 3000'));\"", + ] + networks: + - gridpilot-test-network + restart: unless-stopped + healthcheck: + test: + [ + "CMD", + "node", + "-e", + "fetch('http://localhost:3000/health').then(r=>process.exit(r.ok?0:1)).catch(()=>process.exit(1))", + ] + interval: 2s + timeout: 2s + retries: 30 + + website: + image: gridpilot-website-test + build: + context: . + dockerfile: apps/website/Dockerfile.dev + environment: + - NEXT_TELEMETRY_DISABLED=1 + - NODE_ENV=development + - DOCKER=true + - NEXT_PUBLIC_GRIDPILOT_MODE=alpha + - API_BASE_URL=http://api:3000 + - NEXT_PUBLIC_API_BASE_URL=http://localhost:3001 + ports: + - "3000:3000" + volumes: + - ./:/app + - test_node_modules:/app/node_modules + - test_npm_cache:/root/.npm + command: ["sh", "-lc", "npm run dev --workspace=@gridpilot/website"] + depends_on: + api: + condition: service_healthy + networks: + - gridpilot-test-network + restart: unless-stopped + healthcheck: + test: + ["CMD", "node", "-e", "fetch('http://localhost:3000').then(r=>process.exit(r.ok?0:1)).catch(()=>process.exit(1))"] + interval: 5s + timeout: 5s + retries: 20 + +networks: + gridpilot-test-network: + driver: bridge + +volumes: + test_node_modules: + test_npm_cache: \ No newline at end of file diff --git a/package.json b/package.json index d6cd0ad31..9ae3e8d2a 100644 --- a/package.json +++ b/package.json @@ -89,6 +89,12 @@ "docker:prod:clean": "docker-compose -p gridpilot-prod -f docker-compose.prod.yml down -v", "docker:prod:down": "docker-compose -p gridpilot-prod -f docker-compose.prod.yml down", "docker:prod:logs": "docker-compose -p gridpilot-prod -f docker-compose.prod.yml logs -f", + "docker:test:deps": "COMPOSE_PARALLEL_LIMIT=1 docker-compose -p gridpilot-test -f docker-compose.test.yml run --rm deps", + "docker:test:up": "COMPOSE_PARALLEL_LIMIT=1 docker-compose -p gridpilot-test -f docker-compose.test.yml up -d --build api website", + "docker:test:down": "docker-compose -p gridpilot-test -f docker-compose.test.yml down -v", + "docker:test:wait": "node -e \"const sleep=(ms)=>new Promise(r=>setTimeout(r,ms)); const wait=async(url,label)=>{for(let i=0;i<90;i++){try{const r=await fetch(url); if(r.ok){console.log('[wait] '+label+' ready'); return;} }catch{} await sleep(1000);} console.error('[wait] '+label+' not ready: '+url); process.exit(1);}; (async()=>{await wait('http://localhost:3001/health','api'); await wait('http://localhost:3000','website');})();\"", + "smoke:website:docker": "DOCKER_SMOKE=true npx playwright test -c playwright.website.config.ts", + "test:docker:website": "sh -lc \"set -e; trap 'npm run docker:test:down' EXIT; npm run docker:test:deps; npm run docker:test:up; npm run docker:test:wait; npm run smoke:website:docker\"", "dom:process": "npx tsx scripts/dom-export/processWorkflows.ts", "env:website:merge": "node scripts/merge-website-env.js", "generate-templates": "npx tsx scripts/generate-templates/index.ts", diff --git a/playwright.website.config.ts b/playwright.website.config.ts index bd48a702f..7bb0e98a3 100644 --- a/playwright.website.config.ts +++ b/playwright.website.config.ts @@ -14,7 +14,7 @@ import { defineConfig, devices } from '@playwright/test'; */ export default defineConfig({ testDir: './tests/smoke', - testMatch: ['**/website-pages.spec.ts'], + testMatch: ['**/website-pages.test.ts'], testIgnore: ['**/electron-build.smoke.test.ts'], // Serial execution for consistent results @@ -45,12 +45,16 @@ export default defineConfig({ retries: 0, // Web server configuration - webServer: { - command: 'npm run dev -w @gridpilot/website', - url: 'http://localhost:3000', - timeout: 120_000, - reuseExistingServer: !process.env.CI, - }, + // - Default: start Next dev server locally + // - Docker smoke: website is started via docker-compose, so skip webServer + webServer: process.env.DOCKER_SMOKE + ? undefined + : { + command: 'npm run dev -w @gridpilot/website', + url: 'http://localhost:3000', + timeout: 120_000, + reuseExistingServer: !process.env.CI, + }, // Browser projects projects: [ diff --git a/tests/smoke/website-pages.test.ts b/tests/smoke/website-pages.test.ts index 912cb7928..ef238ffdd 100644 --- a/tests/smoke/website-pages.test.ts +++ b/tests/smoke/website-pages.test.ts @@ -1,14 +1,20 @@ import { test, expect } from '@playwright/test'; test.describe('Website smoke - core pages render', () => { - const routes = [ - { path: '/', name: 'landing' }, - { path: '/dashboard', name: 'dashboard' }, - { path: '/drivers', name: 'drivers list' }, - { path: '/leagues', name: 'leagues list' }, - { path: '/profile', name: 'profile' }, - { path: '/teams', name: 'teams list' }, - ]; + const routes = process.env.DOCKER_SMOKE + ? [ + { path: '/', name: 'landing' }, + { path: '/leagues', name: 'leagues list' }, + { path: '/teams', name: 'teams list' }, + ] + : [ + { path: '/', name: 'landing' }, + { path: '/dashboard', name: 'dashboard' }, + { path: '/drivers', name: 'drivers list' }, + { path: '/leagues', name: 'leagues list' }, + { path: '/profile', name: 'profile' }, + { path: '/teams', name: 'teams list' }, + ]; for (const route of routes) { test(`renders ${route.name} page without console errors (${route.path})`, async ({ page }) => { @@ -21,8 +27,23 @@ test.describe('Website smoke - core pages render', () => { } }); + const apiCallPromise = + route.path === '/leagues' + ? page.waitForResponse((resp) => { + return resp.url().includes('/leagues/all-with-capacity') && resp.status() === 200; + }) + : route.path === '/teams' + ? page.waitForResponse((resp) => { + return resp.url().includes('/teams/all') && resp.status() === 200; + }) + : null; + await page.goto(route.path, { waitUntil: 'networkidle' }); + if (apiCallPromise) { + await apiCallPromise; + } + await expect(page).toHaveTitle(/GridPilot/i); expect(