Add E2E and unit test for site url utilities

Author: webstackdev

@types/window.d.ts

@@ -32,6 +32,10 @@ interface EnvironmentApiSnapshot {
   privacyPolicyVersion: string
 }
 
+interface SiteUrlSnapshot {
+  siteUrl: string
+}
+
 declare global {
   interface Window {
     /**
@@ -55,6 +59,16 @@ declare global {
      * Snapshot of environment-api (server helper) results for Playwright assertions
      */
     environmentApiSnapshot?: EnvironmentApiSnapshot
+
+    /**
+     * Snapshot of client-side site URL helper
+     */
+    siteUrlClientSnapshot?: SiteUrlSnapshot
+
+    /**
+     * Snapshot of server-side site URL helper
+     */
+    siteUrlApiSnapshot?: SiteUrlSnapshot
   }
 }
 

_TODO.md

@@ -5,7 +5,20 @@
 1. build Supabase-aware fixtures to cover the GDPR endpoints (consent/request/export/verify) end-to-end
 2. add integration-style tests that exercise the DSAR flow using a lightweight fake DB layer.
 
-Files with Skipped Tests:
+## Unit tests failure groups
+
+1. client.spec.ts, Navigation specs, Forms/Download specs, and multiple selector tests crash because document isn't defined or Astro can't render component fixtures. These need a DOM-aware environment (// @vitest-environment happy-dom) plus Container-based fixtures per repo standards.
+
+2. Selector tests in selectors.spec.ts and download form selectors expect thrown errors, but the helper functions currently return [object Object]; check that error helpers throw ClientScriptError (or similar) and ensure mocks expose the ClientScriptError export (see bootstrap tests complaining about missing export).
+
+3. pageTitle.spec.ts and absoluteUrl.spec.ts also show [object Object] instead of the expected message, indicating the helpers throw non-Error values; update them to throw Error (or a typed error) with the asserted message.
+
+4. rateLimit.spec.ts fails because isDev/isTest mocks aren't mocked functions; wrap the @lib/config/environment import with vi.mock and provide spies so .mockReturnValue works.
+dsarVerificationEmails.spec.ts can't run because RESEND_API_KEY isn't set. Provide a fake key via process.env.RESEND_API_KEY = 'test' in the suite (and mock Resend client) so tests don't hit real env requirements.
+
+5. componentDiscovery.spec.ts expects an error string but receives an object; ensure the helper throws an Error with the message the test asserts.
+
+## Files with Skipped Tests
 
 social-shares.spec.ts - 12 @wip
 gdpr-consent.spec.ts - 10 @wip
@@ -254,7 +267,7 @@ https://www.kirilv.com/canvas-confetti/
 
 ## @TODO: Use the Page Visibility API to pause videos, image carousels, and animations
 
-Stop unnecessary processes when the user doesn’t see the page or inversely to perform background actions.
+Stop unnecessary processes when the user doesn't see the page or inversely to perform background actions.
 
 ## @TODO: "Add to Calendar" button
 

src/lib/config/__tests__/siteUrlServer.spec.ts

@@ -0,0 +1,56 @@
+import { describe, it, expect, vi, afterEach } from 'vitest'
+
+const originalDevServerPort = process.env['DEV_SERVER_PORT']
+
+// Reload the module with a fresh environment snapshot and mocked dependencies.
+const importSiteUrlServer = async () => {
+  vi.resetModules()
+  const isVercelMock = vi.fn(() => false)
+  vi.doMock('../environmentServer', () => ({
+    isVercel: isVercelMock,
+  }))
+  vi.doMock('../../../../package.json', () => ({
+    domain: 'webstackbuilders.com',
+    default: { domain: 'webstackbuilders.com' },
+  }))
+  const module = await import('../siteUrlServer')
+  return { getSiteUrl: module.getSiteUrl, isVercelMock }
+}
+
+afterEach(() => {
+  if (originalDevServerPort === undefined) {
+    delete process.env['DEV_SERVER_PORT']
+  } else {
+    process.env['DEV_SERVER_PORT'] = originalDevServerPort
+  }
+  vi.restoreAllMocks()
+})
+
+describe('getSiteUrl', () => {
+  it('returns the production domain when Vercel runtime is detected', async () => {
+    const { getSiteUrl, isVercelMock } = await importSiteUrlServer()
+    isVercelMock.mockReturnValue(true)
+    expect(getSiteUrl()).toBe('https://webstackbuilders.com')
+  })
+
+  it('uses the provided DEV_SERVER_PORT when not running on Vercel', async () => {
+    process.env['DEV_SERVER_PORT'] = '8888'
+    const { getSiteUrl, isVercelMock } = await importSiteUrlServer()
+    isVercelMock.mockReturnValue(false)
+    expect(getSiteUrl()).toBe('http://localhost:8888')
+  })
+
+  it('falls back to the default localhost:4321 when DEV_SERVER_PORT is unset', async () => {
+    delete process.env['DEV_SERVER_PORT']
+    const { getSiteUrl, isVercelMock } = await importSiteUrlServer()
+    isVercelMock.mockReturnValue(false)
+    expect(getSiteUrl()).toBe('http://localhost:4321')
+  })
+
+  it('falls back to the default when DEV_SERVER_PORT is whitespace', async () => {
+    process.env['DEV_SERVER_PORT'] = '   '
+    const { getSiteUrl, isVercelMock } = await importSiteUrlServer()
+    isVercelMock.mockReturnValue(false)
+    expect(getSiteUrl()).toBe('http://localhost:4321')
+  })
+})

src/pages/api/_environment/environmentApi.ts

@@ -18,8 +18,6 @@ export {
   isVercel,
 } from '@lib/config/environmentServer'
 
-//export { getSiteUrl } from '@lib/config/siteUrlServer'
-
 /**
  * Privacy Policy Version Utility
  *

src/pages/api/_environment/siteUrlApi.ts

@@ -2,14 +2,12 @@
  * Server-side method to determine correct URL
  */
 
-// @TODO: package.json isn't available from SSR serverless functions !!!!
-
 import packageJson from '../../../../package.json' with { type: 'json' }
-import { isVercel } from './'
+import { isVercel } from './environmentApi'
 
-const { domain } = packageJson
 const devServerPort = process.env['DEV_SERVER_PORT']?.trim()
 const resolvedDevServerPort = devServerPort && devServerPort.length > 0 ? devServerPort : '4321'
+const { domain } = packageJson
 
 /** Called from astro.config.ts to determine "site" config key */
 export const getSiteUrl = (): string => {

src/pages/testing/site-url-api.astro

@@ -0,0 +1,29 @@
+---
+import { getSiteUrl } from '@pages/api/_environment/siteUrlApi'
+
+const snapshot = {
+  siteUrl: getSiteUrl(),
+}
+
+const formattedSnapshot = JSON.stringify(snapshot, null, 2)
+const scriptContent = `window.siteUrlApiSnapshot = ${JSON.stringify(snapshot).replace(/</g, '\\u003c')}`
+---
+
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <title>Site URL API Diagnostics</title>
+    <meta name="robots" content="noindex, nofollow">
+  </head>
+  <body>
+    <main>
+      <h1>Site URL API Diagnostics</h1>
+      <p data-testid="site-url-api-notice">
+        This page captures the server-side URL resolution for automated testing only.
+      </p>
+      <pre id="site-url-api-json">{formattedSnapshot}</pre>
+    </main>
+    <script type="module" set:html={scriptContent}></script>
+  </body>
+</html>

src/pages/testing/site-url-client.astro

@@ -0,0 +1,29 @@
+---
+import { getSiteUrl } from '@components/scripts/utils/siteUrlClient'
+
+const snapshot = {
+  siteUrl: getSiteUrl(),
+}
+
+const formattedSnapshot = JSON.stringify(snapshot, null, 2)
+const scriptContent = `window.siteUrlClientSnapshot = ${JSON.stringify(snapshot).replace(/</g, '\\u003c')}`
+---
+
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <title>Site URL Client Diagnostics</title>
+    <meta name="robots" content="noindex, nofollow">
+  </head>
+  <body>
+    <main>
+      <h1>Site URL Client Diagnostics</h1>
+      <p data-testid="site-url-client-notice">
+        This page captures the client-side URL resolution for automated testing only.
+      </p>
+      <pre id="site-url-client-json">{formattedSnapshot}</pre>
+    </main>
+    <script type="module" set:html={scriptContent}></script>
+  </body>
+</html>

test/e2e/specs/14-system/siteUrlApi.spec.ts

@@ -0,0 +1,30 @@
+import { test, expect } from '@test/e2e/helpers'
+import { BasePage } from '@test/e2e/helpers/pageObjectModels/BasePage'
+
+type SiteUrlSnapshot = {
+  siteUrl: string
+}
+
+const navigateToDiagnosticsPage = async (page: BasePage) => {
+  await page.goto('/testing/site-url-api', { skipCookieDismiss: true })
+  await page.waitForLoadState('networkidle')
+  await page.waitForFunction(() => Boolean(window.siteUrlApiSnapshot))
+}
+
+const getSnapshot = async (page: BasePage): Promise<SiteUrlSnapshot> => {
+  await navigateToDiagnosticsPage(page)
+  return await page.evaluate(() => {
+    if (!window.siteUrlApiSnapshot) {
+      throw new Error('Site URL api snapshot not initialized')
+    }
+    return window.siteUrlApiSnapshot
+  })
+}
+
+test.describe('Site URL API Diagnostics', () => {
+  test('should resolve localhost URL for non-Vercel dev runtime', async ({ page: playwrightPage }) => {
+    const page = await BasePage.init(playwrightPage)
+    const snapshot = await getSnapshot(page)
+    expect(snapshot.siteUrl).toContain('http://localhost:')
+  })
+})

test/e2e/specs/14-system/siteUrlClient.spec.ts

@@ -0,0 +1,30 @@
+import { test, expect } from '@test/e2e/helpers'
+import { BasePage } from '@test/e2e/helpers/pageObjectModels/BasePage'
+
+type SiteUrlSnapshot = {
+  siteUrl: string
+}
+
+const navigateToDiagnosticsPage = async (page: BasePage) => {
+  await page.goto('/testing/site-url-client', { skipCookieDismiss: true })
+  await page.waitForLoadState('networkidle')
+  await page.waitForFunction(() => Boolean(window.siteUrlClientSnapshot))
+}
+
+const getSnapshot = async (page: BasePage): Promise<SiteUrlSnapshot> => {
+  await navigateToDiagnosticsPage(page)
+  return await page.evaluate(() => {
+    if (!window.siteUrlClientSnapshot) {
+      throw new Error('Site URL client snapshot not initialized')
+    }
+    return window.siteUrlClientSnapshot
+  })
+}
+
+test.describe('Site URL Client Diagnostics', () => {
+  test('should resolve localhost URL in dev server', async ({ page: playwrightPage }) => {
+    const page = await BasePage.init(playwrightPage)
+    const snapshot = await getSnapshot(page)
+    expect(snapshot.siteUrl).toContain('http://localhost:')
+  })
+})