fix: set base URL to '/' and add comprehensive tests (#1393)

Co-authored-by: claude[bot] <41898282+claude[bot]@users.noreply.github.com>
Co-authored-by: Aviv <AvivAbachi@users.noreply.github.com>
Co-authored-by: Noam Gaash <NoamGaash@users.noreply.github.com>

Author: 3 people

.env

@@ -1,4 +1,14 @@
 # solves issues with stylis-plugin-rtl : https://github.com/styled-components/stylis-plugin-rtl/issues/35#issuecomment-1550877823
 GENERATE_SOURCEMAP=false
+
+# Stride API endpoint for bus routing and transit data
 VITE_STRIDE_API=https://open-bus-stride-api.hasadna.org.il
-VITE_BACKEND_API=https://open-bus-backend.k8s.hasadna.org.il
+
+# Backend API endpoint for application data and services
+VITE_BACKEND_API=https://open-bus-backend.k8s.hasadna.org.il
+
+# Optional: URL for preview environment
+# VITE_BASE_PATH=
+
+# Optional: Enable coverage reporting for tests
+# VITE_COVERAGE=

.github/workflows/build.yml

@@ -7,7 +7,7 @@ permissions:
   issues: write
 
 env:
-  VITE_MSW_S3_URL: https://s3.amazonaws.com/noam-gaash.co.il/${{ github.run_id }}/open-bus/${{ github.run_number }}/storybook/mockServiceWorker.js
+  VITE_BASE_PATH: /noam-gaash.co.il/${{ github.run_id }}/open-bus/${{ github.run_number }}/
 
 jobs:
   build:
@@ -24,6 +24,8 @@ jobs:
       - name: Run install
         run: npm ci
       - name: Build
+        env:
+          VITE_BASE_PATH: ${{ env.VITE_BASE_PATH }}
         run: npm run build
       - name: Upload artifact (build)
         uses: actions/upload-artifact@v4
@@ -43,6 +45,8 @@ jobs:
       - name: Run install
         run: npm ci
       - name: Build Storybook
+        env:
+          VITE_BASE_PATH: ${{ env.VITE_BASE_PATH }}
         run: npm run build-storybook -- -o dist/storybook
       - name: Upload artifact (storybook)
         uses: actions/upload-artifact@v4

src/routes/index.tsx

@@ -177,6 +177,6 @@ window.addEventListener('vite:preloadError', () => {
 
 const routes = createRoutesFromElements(getRoutesList())
 
-const router = createBrowserRouter(routes)
+const router = createBrowserRouter(routes, { basename: import.meta.env.VITE_BASE_PATH })
 
 export default router

tests/baseUrl.spec.ts

@@ -0,0 +1,109 @@
+import { expect, setupTest, test } from './utils'
+
+test.describe('Base URL configuration tests', () => {
+  test('assets should load from root path on nested routes', async ({ page }) => {
+    await setupTest(page)
+
+    // Navigate to a nested route (e.g., /profile/:id)
+    // We'll use a direct navigation to simulate the issue scenario
+    await page.goto('/profile/8235701')
+
+    // Wait for the page to load
+    await page.waitForLoadState('networkidle')
+
+    // Check that JavaScript assets are loaded from the correct path
+    const scriptTags = await page.locator('script[src]').all()
+    const scriptSources = await Promise.all(scriptTags.map((tag) => tag.getAttribute('src')))
+
+    // Filter for internal scripts with absolute paths
+    const assetScripts = scriptSources.filter(
+      (src) => src && src.startsWith('/') && !src.startsWith('http'),
+    )
+
+    // Verify that we found asset scripts to test
+    expect(assetScripts.length).toBeGreaterThan(0)
+
+    // Verify that asset paths start with / (absolute) and not from current path
+    const currentPath = new URL(page.url()).pathname
+    for (const src of assetScripts) {
+      if (src) {
+        expect(src.startsWith('/')).toBeTruthy()
+        expect(src.startsWith(currentPath + '/')).toBeFalsy()
+      }
+    }
+
+    // Also verify that internal script resources loaded successfully (no 404s)
+    const failedRequests: string[] = []
+    page.on('requestfailed', (request) => {
+      if (
+        request.resourceType() === 'script' &&
+        request.url().startsWith('http://localhost:3000/')
+      ) {
+        failedRequests.push(request.url())
+      }
+    })
+
+    // Reload the page to trigger all resource loads again
+    await page.reload()
+    await page.waitForLoadState('networkidle')
+
+    // Check that no internal script requests failed
+    expect(failedRequests.length).toBe(0)
+  })
+
+  test('assets should load correctly on dashboard page', async ({ page }) => {
+    await setupTest(page)
+
+    // Navigate to dashboard (a top-level route)
+    await page.goto('/dashboard')
+    await page.waitForLoadState('networkidle')
+
+    // Check that JavaScript assets are loaded from the correct path
+    const scriptTags = await page.locator('script[src]').all()
+    const scriptSources = await Promise.all(scriptTags.map((tag) => tag.getAttribute('src')))
+
+    // Filter for internal scripts with absolute paths
+    const assetScripts = scriptSources.filter(
+      (src) => src && src.startsWith('/') && !src.startsWith('http'),
+    )
+
+    // Verify that we found asset scripts to test
+    expect(assetScripts.length).toBeGreaterThan(0)
+
+    // Verify that asset paths start with / (absolute)
+    for (const src of assetScripts) {
+      if (src) {
+        expect(src.startsWith('/')).toBeTruthy()
+      }
+    }
+  })
+
+  test('CSS assets should load from root path on nested routes', async ({ page }) => {
+    await setupTest(page)
+
+    // Navigate to a nested route
+    await page.goto('/profile/8235701')
+    await page.waitForLoadState('networkidle')
+
+    // Check that CSS assets are loaded from the correct path
+    const linkTags = await page.locator('link[rel="stylesheet"]').all()
+    const linkHrefs = await Promise.all(linkTags.map((tag) => tag.getAttribute('href')))
+
+    // Filter for internal links with absolute paths
+    const assetLinks = linkHrefs.filter(
+      (href) => href && href.startsWith('/') && !href.startsWith('http'),
+    )
+
+    // If there are asset links, verify their paths
+    if (assetLinks.length > 0) {
+      // Verify that asset paths start with / (absolute) and not from current path
+      const currentPath = new URL(page.url()).pathname
+      for (const href of assetLinks) {
+        if (href) {
+          expect(href.startsWith('/')).toBeTruthy()
+          expect(href.startsWith(currentPath + '/')).toBeFalsy()
+        }
+      }
+    }
+  })
+})

vite.config.ts

@@ -1,14 +1,13 @@
 import react from '@vitejs/plugin-react-oxc'
-import { loadEnv } from 'vite'
+import { defineConfig, loadEnv } from 'vite'
 import IstanbulPlugin from 'vite-plugin-istanbul'
-import { defineConfig } from 'vitest/config'
 
 // https://vitejs.dev/config/
 export default defineConfig(({ mode }) => {
   const env = loadEnv(mode, process.cwd())
 
   return {
-    base: env?.ASSET_URL || '',
+    base: env?.VITE_BASE_PATH || '/',
     plugins: [
       react(),
       ...(env?.VITE_COVERAGE