Merge pull request #413 from webstackdev/feature/sitemap

Refactors to e2e test cases

Author: webstackdev

.github/instructions/general.instructions.md

@@ -35,6 +35,7 @@ applyTo: "**"
 - JavaScript loading warnings from happy-dom are silenced in vitest.setup.ts for clean test output.
 - A working example test using the Container API is available at /home/kevin/Repos/Webstack Builders/Corporate Website/astro.webstackbuilders.com/src/components/Test/container.spec.ts
 - **NEVER hard-code content slugs in e2e tests** (e.g., `/articles/typescript-best-practices`, `/services/web-development`). Content can be deleted or renamed. Always dynamically fetch the first available item from listing pages (articles, services, case-studies, etc.) and navigate to it. This prevents test breakage when content changes.
+- **Playwright E2E Tests**: Set `DEBUG=1` environment variable to prevent the dev server from being launched by the Playwright test runner. This is useful when you want to run tests against an already running dev server.
 
 # Personality
 - Do not apologize

.vscode/settings.json

@@ -22,6 +22,7 @@
     "dango",
     "dbtable",
     "Dynatrace",
+    "ecommerce",
     "Favicons",
     "Fedi",
     "Fedibird",

TODO.md

@@ -36,6 +36,11 @@ https://github.com/modernweb-dev/rocket/tree/main/packages/check-html-links
 
 "Scaling/zooming animations are problematic for accessibility, as they are a common trigger for certain types of migraine. If you need to include such animations on your website, you should provide a control to allow users to turn off animations, preferably site-wide.  Also, consider making use of the prefers-reduced-motion media feature — use it to write a media query that will turn off animations if the user has reduced animation specified in their system preferences. "
 
+## Fix offline page
+
+- It should look like any other page, but have interactivity like navigation and other links disabled.
+- The test cases should check for if they're on the offline page, and return passed for an inverse. Like the smoke test that makes sure navigation is available, it would return true if navigation is present but disabled in the same test case.
+
 ## @TODO: Handle `@media (prefers-reduced-motion: reduce)`
 
 Stop the Hero Greensocks animation when `@media (prefers-reduced-motion: reduce)`, using `window.mediaQuery()`. Handle user preference for reduced motion on animations, doing this also with a listener like for browser theme preference
@@ -573,3 +578,27 @@ Repo is in root of Corporate Websites
 * [**typographic-permille**][typographic-permille]
 
   Micro module to replace `%o` with `‰` and optionally replace the preceding space.
+
+## Tests
+
+```typescript
+test('Critical Paths @smoke', async ({ context, page, allPaths }) => {
+  for (const path of allPaths) {
+    await test.step('@ready all main pages are accessible', async () => {
+      await page.goto(path)
+      await expect(page.locator('main')).toBeVisible()
+    })
+
+    await test.step('@ready cookie consent banner appears', async () => {
+      // Clear consent cookies to force banner to appear
+      await clearConsentCookies(context)
+
+      await page.goto(path)
+      await page.waitForLoadState('networkidle')
+
+      // Cookie modal should be visible
+      await expect(page.locator('#cookie-modal-id')).toBeVisible()
+    })
+  }
+})
+```

astro.config.ts

@@ -1,5 +1,6 @@
 import mdx from '@astrojs/mdx'
-import preact from "@astrojs/preact"
+import preact from '@astrojs/preact'
+import sitemap from '@astrojs/sitemap'
 import vercelStatic from '@astrojs/vercel'
 import sentry from "@sentry/astro"
 import tailwindcss from '@tailwindcss/vite'
@@ -14,6 +15,7 @@ import {
   vercelConfig,
 } from './src/lib/config'
 import { callToActionValidator } from './src/integrations/CtaValidator/call-to-action-validator'
+import { serializeSitemapItem, writePagesJson } from './src/lib/config/sitemap-serialize'
 
 // Type guard for required environment variables (only in CI)
 const IS_CI = process.env['CI'] === 'true'
@@ -42,6 +44,19 @@ export default defineConfig({
       org: "webstack-builders",
       authToken: SENTRY_AUTH_TOKEN,
     })] : []),
+    sitemap({
+      lastmod: new Date(),
+      serialize: serializeSitemapItem,
+    }),
+    // Custom integration to write pages.json after build
+    {
+      name: 'pages-json-writer',
+      hooks: {
+        'astro:build:done': () => {
+          writePagesJson()
+        },
+      },
+    },
   ],
   output: 'static',
   prefetch: true,