Skip to content

Commit b3c7e84

Browse files
webstackdevwebstackdev
committed
Refactor test page fixtures in src/pages/testing to all use BaseLayout instead of one-off HTML page boilerplate
1 parent 3ae221d commit b3c7e84

8 files changed

Lines changed: 216 additions & 202 deletions

‎src/pages/testing/environment-api.astro‎

Lines changed: 25 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
---
2+
import BaseLayout from '@layouts/BaseLayout.astro'
23
import {
34
getPackageRelease,
45
getPrivacyPolicyVersion,
@@ -15,6 +16,10 @@ import {
1516
*/
1617
export const prerender = true
1718
19+
const pageTitle = 'Environment API Diagnostics'
20+
const pageDescription = 'Server environment helper snapshot for automated testing only.'
21+
const pagePath = '/testing/environment-api'
22+
1823
const snapshot = {
1924
isUnitTest: isUnitTest(),
2025
isTest: isTest(),
@@ -29,21 +34,23 @@ const formattedSnapshot = JSON.stringify(snapshot, null, 2)
2934
const scriptContent = `window.environmentApiSnapshot = ${JSON.stringify(snapshot).replace(/</g, '\\u003c')}`
3035
---
3136

32-
<!DOCTYPE html>
33-
<html lang="en">
34-
<head>
35-
<meta charset="utf-8">
36-
<title>Environment API Diagnostics</title>
37-
<meta name="robots" content="noindex, nofollow">
38-
</head>
39-
<body>
40-
<main>
41-
<h1>Environment API Diagnostics</h1>
42-
<p data-testid="environment-api-notice">
43-
This page exposes server environment helpers for automated testing only.
44-
</p>
45-
<pre id="environment-api-json">{formattedSnapshot}</pre>
46-
</main>
47-
<script type="module" is:inline set:html={scriptContent}></script>
48-
</body>
49-
</html>
37+
<BaseLayout pageTitle={pageTitle} path={pagePath} description={pageDescription} noindex>
38+
<section class="mx-auto mb-6 max-w-3xl space-y-3 text-lg text-offset">
39+
<p>
40+
Use this fixture to validate the server-side environment helpers without relying on marketing pages.
41+
</p>
42+
<p data-testid="environment-api-notice">
43+
The JSON payload below mirrors the runtime snapshot that client scripts can also read via
44+
<code>window.environmentApiSnapshot</code>.
45+
</p>
46+
</section>
47+
48+
<section class="mx-auto max-w-3xl">
49+
<pre
50+
id="environment-api-json"
51+
class="overflow-auto rounded border border-border bg-bg-offset p-4 font-mono text-sm text-text"
52+
>{formattedSnapshot}</pre>
53+
</section>
54+
55+
<script type="module" is:inline set:html={scriptContent}></script>
56+
</BaseLayout>

‎src/pages/testing/environment-client.astro‎

Lines changed: 48 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -1,48 +1,54 @@
11
---
2+
import BaseLayout from '@layouts/BaseLayout.astro'
23
4+
const pageTitle = 'Environment Client Diagnostics'
5+
const pageDescription = 'Client-side environment helper snapshot for automated testing only.'
6+
const pagePath = '/testing/environment-client'
37
---
4-
<!DOCTYPE html>
5-
<html lang="en">
6-
<head>
7-
<meta charset="utf-8">
8-
<title>Environment Client Diagnostics</title>
9-
<meta name="robots" content="noindex, nofollow">
10-
</head>
11-
<body>
12-
<main>
13-
<h1>Environment Client Diagnostics</h1>
14-
<p data-testid="environment-client-notice">
15-
This page exposes environment utilities for automated testing only.
16-
</p>
17-
<pre id="environment-client-json">Collecting client environment data…</pre>
18-
</main>
19-
<script>
20-
import {
21-
getPackageRelease,
22-
getPrivacyPolicyVersion,
23-
isDev,
24-
isE2eTest,
25-
isProd,
26-
isTest,
27-
isUnitTest,
28-
} from '@components/scripts/utils/environmentClient'
298

30-
const snapshot = {
31-
isUnitTest: isUnitTest(),
32-
isTest: isTest(),
33-
isE2eTest: isE2eTest(),
34-
isDev: isDev(),
35-
isProd: isProd(),
36-
packageRelease: getPackageRelease(),
37-
privacyPolicyVersion: getPrivacyPolicyVersion(),
38-
}
9+
<BaseLayout pageTitle={pageTitle} path={pagePath} description={pageDescription} noindex>
10+
<section class="mx-auto mb-6 max-w-3xl space-y-3 text-lg text-offset">
11+
<p>
12+
Use this fixture to verify the client-side environment utility output without depending on marketing routes.
13+
</p>
14+
<p data-testid="environment-client-notice">
15+
Once the page hydrates, the JSON snapshot below is mirrored to <code>window.environmentClientSnapshot</code>.
16+
</p>
17+
</section>
3918

40-
window.environmentClientSnapshot = snapshot
19+
<section class="mx-auto max-w-3xl">
20+
<pre
21+
id="environment-client-json"
22+
class="overflow-auto rounded border border-border bg-bg-offset p-4 font-mono text-sm text-text"
23+
>Collecting client environment data…</pre>
24+
</section>
4125

42-
const output = document.getElementById('environment-client-json')
43-
if (output) {
44-
output.textContent = JSON.stringify(snapshot, null, 2)
45-
}
46-
</script>
47-
</body>
48-
</html>
26+
<script type="module" is:inline>
27+
import {
28+
getPackageRelease,
29+
getPrivacyPolicyVersion,
30+
isDev,
31+
isE2eTest,
32+
isProd,
33+
isTest,
34+
isUnitTest,
35+
} from '@components/scripts/utils/environmentClient'
36+
37+
const snapshot = {
38+
isUnitTest: isUnitTest(),
39+
isTest: isTest(),
40+
isE2eTest: isE2eTest(),
41+
isDev: isDev(),
42+
isProd: isProd(),
43+
packageRelease: getPackageRelease(),
44+
privacyPolicyVersion: getPrivacyPolicyVersion(),
45+
}
46+
47+
window.environmentClientSnapshot = snapshot
48+
49+
const output = document.getElementById('environment-client-json')
50+
if (output) {
51+
output.textContent = JSON.stringify(snapshot, null, 2)
52+
}
53+
</script>
54+
</BaseLayout>

‎src/pages/testing/icons.astro‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ const pageTitle = 'Icon Variant Gallery'
1414
const description = 'Preview every icon across each color variant to verify styling and availability.'
1515
---
1616

17-
<BaseLayout pageTitle={pageTitle} path="testing/icons" description={description}>
17+
<BaseLayout pageTitle={pageTitle} path="/testing/icons" description={description}>
1818
<main class="mx-auto flex max-w-7xl flex-col gap-12 px-6 py-12">
1919
<header class="text-center">
2020
<p class="text-sm uppercase tracking-wide text-text-muted">Design System</p>

‎src/pages/testing/network-status.astro‎

Lines changed: 30 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -1,44 +1,41 @@
11
---
2+
import BaseLayout from '@layouts/BaseLayout.astro'
23
import NetworkStatusComponent from '@components/Toasts/NetworkStatus/index.astro'
3-
import '@styles/index.css'
44
55
export const prerender = true
66
77
const pageTitle = 'Network Status Component Fixture'
88
const fixtureDescription = 'Sandbox route dedicated to validating the NetworkStatus toast web component and its connection indicator.'
9+
const pagePath = '/testing/network-status'
910
---
10-
<!DOCTYPE html>
11-
<html lang="en" data-theme="light">
12-
<head>
13-
<meta charset="utf-8">
14-
<title>{pageTitle}</title>
15-
<meta name="robots" content="noindex, nofollow">
16-
</head>
17-
<body class="bg-bg text-text">
18-
<main class="min-h-screen flex flex-col items-center gap-8 py-16 px-4">
19-
<header class="max-w-3xl text-center space-y-4">
20-
<p class="text-xs uppercase tracking-widest text-text-offset">Testing Fixture</p>
21-
<h1 class="text-3xl font-semibold leading-tight">{pageTitle}</h1>
22-
<p class="text-text-offset" data-testid="network-status-test-description">
23-
{fixtureDescription}
24-
</p>
25-
</header>
2611

27-
<section class="w-full max-w-3xl space-y-6 bg-bg-offset rounded-lg p-6 shadow-sm" aria-label="Network status component fixture">
28-
<div class="space-y-4">
29-
<NetworkStatusComponent />
30-
<div class="border border-border rounded-lg p-4 space-y-3" data-testid="network-status-indicator-panel">
31-
<p class="text-sm text-text-offset">Connection Indicator</p>
32-
<div class="connection-status text-green-600 font-semibold" data-testid="connection-indicator">
33-
Online
34-
</div>
35-
<p class="text-xs text-text-offset">
36-
The indicator above is updated by NetworkStatus when window online/offline events fire. Tests can dispatch those
37-
events to simulate connectivity changes and verify toast behavior.
38-
</p>
12+
<BaseLayout pageTitle={pageTitle} path={pagePath} description={fixtureDescription} noindex>
13+
<section class="mx-auto flex max-w-4xl flex-col items-center gap-8 py-10">
14+
<header class="max-w-3xl text-center space-y-4">
15+
<p class="text-xs uppercase tracking-widest text-text-offset">Testing Fixture</p>
16+
<h1 class="text-3xl font-semibold leading-tight">{pageTitle}</h1>
17+
<p class="text-text-offset" data-testid="network-status-test-description">
18+
{fixtureDescription}
19+
</p>
20+
</header>
21+
22+
<section
23+
class="w-full max-w-3xl space-y-6 rounded-lg border border-border bg-bg-offset p-6 shadow-sm"
24+
aria-label="Network status component fixture"
25+
>
26+
<div class="space-y-4">
27+
<NetworkStatusComponent />
28+
<div class="space-y-3 rounded-lg border border-border p-4" data-testid="network-status-indicator-panel">
29+
<p class="text-sm text-text-offset">Connection Indicator</p>
30+
<div class="connection-status text-green-600 font-semibold" data-testid="connection-indicator">
31+
Online
3932
</div>
33+
<p class="text-xs text-text-offset">
34+
The indicator above is updated by NetworkStatus when window online/offline events fire. Tests can dispatch those
35+
events to simulate connectivity changes and verify toast behavior.
36+
</p>
4037
</div>
41-
</section>
42-
</main>
43-
</body>
44-
</html>
38+
</div>
39+
</section>
40+
</section>
41+
</BaseLayout>

‎src/pages/testing/newsletter.astro‎

Lines changed: 23 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -1,36 +1,31 @@
11
---
2+
import BaseLayout from '@layouts/BaseLayout.astro'
23
import NewsletterCta from '@components/CallToAction/Newsletter/index.astro'
3-
import '@styles/index.css'
44
55
export const prerender = true
66
77
const pageTitle = 'Newsletter Component Test Fixture'
88
const fixtureDescription = 'Dedicated route reserved for newsletter automation scenarios. Not intended for production traffic.'
9+
const pagePath = '/testing/newsletter'
910
---
10-
<!DOCTYPE html>
11-
<html lang="en" data-theme="light">
12-
<head>
13-
<meta charset="utf-8">
14-
<title>{pageTitle}</title>
15-
<meta name="robots" content="noindex, nofollow">
16-
</head>
17-
<body class="bg-bg text-text">
18-
<main class="min-h-screen flex flex-col items-center gap-8 py-16 px-4">
19-
<header class="max-w-3xl text-center space-y-4">
20-
<p class="text-xs uppercase tracking-widest text-text-offset">Testing Fixture</p>
21-
<h1 class="text-3xl font-semibold leading-tight">{pageTitle}</h1>
22-
<p class="text-text-offset" data-testid="newsletter-test-description">
23-
{fixtureDescription}
24-
</p>
25-
</header>
26-
<section class="w-full max-w-4xl" aria-label="Newsletter testing fixture">
27-
<NewsletterCta
28-
title="Testing Newsletter"
29-
description="Use this isolated page to validate newsletter flows without the rest of the marketing site."
30-
placeholder="Enter an email for automated testing"
31-
buttonText="Subscribe"
32-
/>
33-
</section>
34-
</main>
35-
</body>
36-
</html>
11+
12+
<BaseLayout pageTitle={pageTitle} path={pagePath} description={fixtureDescription} noindex>
13+
<section class="mx-auto flex max-w-4xl flex-col items-center gap-8 py-10">
14+
<header class="max-w-3xl text-center space-y-4">
15+
<p class="text-xs uppercase tracking-widest text-text-offset">Testing Fixture</p>
16+
<h1 class="text-3xl font-semibold leading-tight">{pageTitle}</h1>
17+
<p class="text-text-offset" data-testid="newsletter-test-description">
18+
{fixtureDescription}
19+
</p>
20+
</header>
21+
22+
<section class="w-full" aria-label="Newsletter testing fixture">
23+
<NewsletterCta
24+
title="Testing Newsletter"
25+
description="Use this isolated page to validate newsletter flows without the rest of the marketing site."
26+
placeholder="Enter an email for automated testing"
27+
buttonText="Subscribe"
28+
/>
29+
</section>
30+
</section>
31+
</BaseLayout>

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

Lines changed: 24 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,11 @@
11
---
2+
import BaseLayout from '@layouts/BaseLayout.astro'
23
import { getSiteUrl } from '@pages/api/_environment/siteUrlApi'
34
5+
const pageTitle = 'Site URL API Diagnostics'
6+
const pageDescription = 'Server-side site URL snapshot for automated testing only.'
7+
const pagePath = '/testing/site-url-api'
8+
49
const snapshot = {
510
siteUrl: getSiteUrl(),
611
}
@@ -9,21 +14,22 @@ const formattedSnapshot = JSON.stringify(snapshot, null, 2)
914
const scriptContent = `window.siteUrlApiSnapshot = ${JSON.stringify(snapshot).replace(/</g, '\\u003c')}`
1015
---
1116

12-
<!DOCTYPE html>
13-
<html lang="en">
14-
<head>
15-
<meta charset="utf-8">
16-
<title>Site URL API Diagnostics</title>
17-
<meta name="robots" content="noindex, nofollow">
18-
</head>
19-
<body>
20-
<main>
21-
<h1>Site URL API Diagnostics</h1>
22-
<p data-testid="site-url-api-notice">
23-
This page captures the server-side URL resolution for automated testing only.
24-
</p>
25-
<pre id="site-url-api-json">{formattedSnapshot}</pre>
26-
</main>
27-
<script type="module" is:inline set:html={scriptContent}></script>
28-
</body>
29-
</html>
17+
<BaseLayout pageTitle={pageTitle} path={pagePath} description={pageDescription} noindex>
18+
<section class="mx-auto mb-6 max-w-3xl space-y-3 text-lg text-offset">
19+
<p>
20+
This fixture exposes the resolved site URL value generated on the server so automated tests can assert the same output.
21+
</p>
22+
<p data-testid="site-url-api-notice">
23+
The JSON snapshot is also written to <code>window.siteUrlApiSnapshot</code> for convenience.
24+
</p>
25+
</section>
26+
27+
<section class="mx-auto max-w-3xl">
28+
<pre
29+
id="site-url-api-json"
30+
class="overflow-auto rounded border border-border bg-bg-offset p-4 font-mono text-sm text-text"
31+
>{formattedSnapshot}</pre>
32+
</section>
33+
34+
<script type="module" is:inline set:html={scriptContent}></script>
35+
</BaseLayout>

0 commit comments

Comments
 (0)