Skip to content

Commit 801e1b0

Browse files
ochafikochafik
authored
add EXAMPLE=folder-name support for tests & basic-host (#292)
* add EXAMPLE=folder-name support for tests & basic-host * style: format e2e test files * style: format threejs-server files
1 parent 6c5aa52 commit 801e1b0

File tree

8 files changed

+177
-41
lines changed

8 files changed

+177
-41
lines changed

‎examples/run-all.ts‎

Lines changed: 28 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,9 @@
66
* bun examples/run-all.ts start - Build and start all examples
77
* bun examples/run-all.ts dev - Run all examples in dev/watch mode
88
* bun examples/run-all.ts build - Build all examples
9+
*
10+
* Environment:
11+
* EXAMPLE=<folder> - Run only a single example (e.g., EXAMPLE=say-server)
912
*/
1013

1114
import { readdirSync, statSync, existsSync } from "fs";
@@ -14,21 +17,36 @@ import concurrently from "concurrently";
1417
const BASE_PORT = 3101;
1518
const BASIC_HOST = "basic-host";
1619

20+
// Optional: filter to a single example via EXAMPLE env var (folder name)
21+
const EXAMPLE_FILTER = process.env.EXAMPLE;
22+
1723
// Find all example directories except basic-host that have a package.json,
1824
// assign ports, and build URL list
19-
const servers = readdirSync("examples")
25+
const allServers = readdirSync("examples")
2026
.filter(
2127
(d) =>
2228
d !== BASIC_HOST &&
2329
statSync(`examples/${d}`).isDirectory() &&
2430
existsSync(`examples/${d}/package.json`),
2531
)
26-
.sort() // Sort for consistent port assignment
27-
.map((dir, i) => ({
28-
dir,
29-
port: BASE_PORT + i,
30-
url: `http://localhost:${BASE_PORT + i}/mcp`,
31-
}));
32+
.sort(); // Sort for consistent port assignment
33+
34+
// Filter servers if EXAMPLE is specified
35+
const filteredDirs = EXAMPLE_FILTER
36+
? allServers.filter((d) => d === EXAMPLE_FILTER)
37+
: allServers;
38+
39+
if (EXAMPLE_FILTER && filteredDirs.length === 0) {
40+
console.error(`Error: No example found matching EXAMPLE=${EXAMPLE_FILTER}`);
41+
console.error(`Available examples: ${allServers.join(", ")}`);
42+
process.exit(1);
43+
}
44+
45+
const servers = filteredDirs.map((dir, i) => ({
46+
dir,
47+
port: BASE_PORT + i,
48+
url: `http://localhost:${BASE_PORT + i}/mcp`,
49+
}));
3250

3351
const COMMANDS = ["start", "dev", "build"];
3452

@@ -43,6 +61,9 @@ if (!command || !COMMANDS.includes(command)) {
4361
const serversEnv = JSON.stringify(servers.map((s) => s.url));
4462

4563
console.log(`Running command: ${command}`);
64+
if (EXAMPLE_FILTER) {
65+
console.log(`Filtering to single example: ${EXAMPLE_FILTER}`);
66+
}
4667
console.log(
4768
`Server examples: ${servers.map((s) => `${s.dir}:${s.port}`).join(", ")}`,
4869
);

‎examples/threejs-server/README.md‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -127,7 +127,11 @@ This is transparent to user code - just use `requestAnimationFrame` normally.
127127
Supports alpha transparency for seamless host UI integration:
128128

129129
```javascript
130-
const renderer = new THREE.WebGLRenderer({ canvas, antialias: true, alpha: true });
130+
const renderer = new THREE.WebGLRenderer({
131+
canvas,
132+
antialias: true,
133+
alpha: true,
134+
});
131135
renderer.setClearColor(0x000000, 0); // Fully transparent
132136
```
133137

‎examples/threejs-server/src/threejs-app.tsx‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -207,7 +207,9 @@ export default function ThreeJSApp({
207207
const [error, setError] = useState<string | null>(null);
208208
const canvasRef = useRef<HTMLCanvasElement>(null);
209209
const containerRef = useRef<HTMLDivElement>(null);
210-
const animControllerRef = useRef<ReturnType<typeof createAnimationController> | null>(null);
210+
const animControllerRef = useRef<ReturnType<
211+
typeof createAnimationController
212+
> | null>(null);
211213

212214
const height = toolInputs?.height ?? toolInputsPartial?.height ?? 400;
213215
const code = toolInputs?.code || DEFAULT_THREEJS_CODE;

‎package.json‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -54,8 +54,8 @@
5454
"test:e2e": "playwright test",
5555
"test:e2e:update": "playwright test --update-snapshots",
5656
"test:e2e:ui": "playwright test --ui",
57-
"test:e2e:docker": "docker run --rm -v $(pwd):/work -w /work -it mcr.microsoft.com/playwright:v1.57.0-noble sh -c 'apt-get update -qq && apt-get install -qq -y python3-venv curl > /dev/null && curl -LsSf https://astral.sh/uv/install.sh | sh && export PATH=\"$HOME/.local/bin:$PATH\" && npm i -g bun && npm ci && npx playwright test'",
58-
"test:e2e:docker:update": "npm run build:all && docker run --rm -v $(pwd):/work -w /work -it mcr.microsoft.com/playwright:v1.57.0-noble sh -c 'apt-get update -qq && apt-get install -qq -y python3-venv curl > /dev/null && curl -LsSf https://astral.sh/uv/install.sh | sh && export PATH=\"$HOME/.local/bin:$PATH\" && npm i -g bun && npm ci && npx playwright test --update-snapshots'",
57+
"test:e2e:docker": "docker run --rm -e EXAMPLE -v $(pwd):/work -w /work -it mcr.microsoft.com/playwright:v1.57.0-noble sh -c 'apt-get update -qq && apt-get install -qq -y python3-venv curl > /dev/null && curl -LsSf https://astral.sh/uv/install.sh | sh && export PATH=\"$HOME/.local/bin:$PATH\" && npm i -g bun && npm ci && npx playwright test'",
58+
"test:e2e:docker:update": "npm run build:all && docker run --rm -e EXAMPLE -v $(pwd):/work -w /work -it mcr.microsoft.com/playwright:v1.57.0-noble sh -c 'apt-get update -qq && apt-get install -qq -y python3-venv curl > /dev/null && curl -LsSf https://astral.sh/uv/install.sh | sh && export PATH=\"$HOME/.local/bin:$PATH\" && npm i -g bun && npm ci && npx playwright test --update-snapshots'",
5959
"preexamples:build": "npm run build",
6060
"examples:build": "bun examples/run-all.ts build",
6161
"examples:start": "NODE_ENV=development npm run build && bun examples/run-all.ts start",
@@ -64,7 +64,7 @@
6464
"prepare": "node scripts/setup-bun.mjs && npm run build && husky",
6565
"docs": "typedoc",
6666
"docs:watch": "typedoc --watch",
67-
"generate:screenshots": "npm run build:all && docker run --rm -v $(pwd):/work -w /work mcr.microsoft.com/playwright:v1.57.0-noble sh -c 'apt-get update -qq && apt-get install -qq -y python3-venv curl > /dev/null && curl -LsSf https://astral.sh/uv/install.sh | sh && export PATH=\"$HOME/.local/bin:$PATH\" && npm i -g bun && npm ci && npx playwright test tests/e2e/generate-grid-screenshots.spec.ts'",
67+
"generate:screenshots": "npm run build:all && docker run --rm -e EXAMPLE -v $(pwd):/work -w /work mcr.microsoft.com/playwright:v1.57.0-noble sh -c 'apt-get update -qq && apt-get install -qq -y python3-venv curl > /dev/null && curl -LsSf https://astral.sh/uv/install.sh | sh && export PATH=\"$HOME/.local/bin:$PATH\" && npm i -g bun && npm ci && npx playwright test tests/e2e/generate-grid-screenshots.spec.ts'",
6868
"prettier": "prettier -u \"**/*.{js,jsx,ts,tsx,mjs,json,md,yml,yaml}\" --check",
6969
"prettier:fix": "prettier -u \"**/*.{js,jsx,ts,tsx,mjs,json,md,yml,yaml}\" --write",
7070
"check:versions": "node scripts/check-versions.mjs"

‎playwright.config.ts‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -27,13 +27,19 @@ export default defineConfig({
2727
},
2828
],
2929
// Run examples server before tests
30+
// Supports EXAMPLE=<folder> env var to run a single example (e.g., EXAMPLE=say-server npm run test:e2e)
3031
webServer: {
3132
command: "npm run examples:start",
3233
url: "http://localhost:8080",
3334
// Always start fresh servers to avoid stale state issues
3435
reuseExistingServer: false,
3536
// 3 minutes to allow uv to download Python dependencies on first run
3637
timeout: 180000,
38+
// Pass through EXAMPLE env var to filter to a single server
39+
env: {
40+
...process.env,
41+
EXAMPLE: process.env.EXAMPLE ?? "",
42+
},
3743
},
3844
// Snapshot configuration
3945
expect: {

‎tests/e2e/generate-grid-screenshots.spec.ts‎

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -30,8 +30,11 @@ const SKIP_SERVERS = new Set([
3030
"video-resource", // Uses custom screenshot from PR comment
3131
]);
3232

33+
// Optional: filter to a single example via EXAMPLE env var (folder name)
34+
const EXAMPLE_FILTER = process.env.EXAMPLE;
35+
3336
// Server configurations (excludes integration-server which is for E2E testing)
34-
const SERVERS = [
37+
const ALL_SERVERS = [
3538
{
3639
key: "basic-react",
3740
name: "Basic MCP App Server (React)",
@@ -55,7 +58,6 @@ const SERVERS = [
5558
{ key: "map-server", name: "Map Server", dir: "map-server" },
5659
{ key: "pdf-server", name: "PDF Server", dir: "pdf-server" },
5760
{ key: "qr-server", name: "QR Code Server", dir: "qr-server" },
58-
{ key: "say-server", name: "Say Demo", dir: "say-server" },
5961
{
6062
key: "scenario-modeler",
6163
name: "SaaS Scenario Modeler",
@@ -82,6 +84,11 @@ const SERVERS = [
8284
{ key: "wiki-explorer", name: "Wiki Explorer", dir: "wiki-explorer-server" },
8385
];
8486

87+
// Filter servers if EXAMPLE is specified
88+
const SERVERS = EXAMPLE_FILTER
89+
? ALL_SERVERS.filter((s) => s.dir === EXAMPLE_FILTER)
90+
: ALL_SERVERS;
91+
8592
/**
8693
* Wait for the MCP App to load inside nested iframes.
8794
*/

‎tests/e2e/security.spec.ts‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,9 +9,24 @@
99
* Note: True cross-origin attack testing would require a multi-origin test
1010
* setup. These tests verify the security infrastructure is in place and
1111
* functioning correctly for valid communication paths.
12+
*
13+
* Note: These tests require the integration-server. When using EXAMPLE filter,
14+
* set EXAMPLE=integration-server to run these tests.
1215
*/
1316
import { test, expect, type Page, type ConsoleMessage } from "@playwright/test";
1417

18+
// Optional: filter to a single example via EXAMPLE env var (folder name)
19+
// Security tests require integration-server, skip if filtering to a different example
20+
const EXAMPLE_FILTER = process.env.EXAMPLE;
21+
const SKIP_SECURITY_TESTS =
22+
EXAMPLE_FILTER && EXAMPLE_FILTER !== "integration-server";
23+
24+
// Skip all security tests if filtering to a non-integration example
25+
test.skip(
26+
() => !!SKIP_SECURITY_TESTS,
27+
"Skipped: security tests require integration-server",
28+
);
29+
1530
/**
1631
* Capture console messages matching a pattern
1732
*/

‎tests/e2e/servers.spec.ts‎

Lines changed: 108 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -35,30 +35,92 @@ const SLOW_SERVERS: Record<string, number> = {
3535
threejs: 2000, // Three.js WebGL initialization
3636
};
3737

38-
// Server configurations (key is used for screenshot filenames, name is the MCP server name)
39-
const SERVERS = [
40-
{ key: "integration", name: "Integration Test Server" },
41-
{ key: "basic-preact", name: "Basic MCP App Server (Preact)" },
42-
{ key: "basic-react", name: "Basic MCP App Server (React)" },
43-
{ key: "basic-solid", name: "Basic MCP App Server (Solid)" },
44-
{ key: "basic-svelte", name: "Basic MCP App Server (Svelte)" },
45-
{ key: "basic-vanillajs", name: "Basic MCP App Server (Vanilla JS)" },
46-
{ key: "basic-vue", name: "Basic MCP App Server (Vue)" },
47-
{ key: "budget-allocator", name: "Budget Allocator Server" },
48-
{ key: "cohort-heatmap", name: "Cohort Heatmap Server" },
49-
{ key: "customer-segmentation", name: "Customer Segmentation Server" },
50-
{ key: "map-server", name: "Map Server" },
51-
{ key: "pdf-server", name: "PDF Server" },
52-
{ key: "qr-server", name: "QR Code Server" },
53-
{ key: "scenario-modeler", name: "SaaS Scenario Modeler" },
54-
{ key: "shadertoy", name: "ShaderToy Server" },
55-
{ key: "sheet-music", name: "Sheet Music Server" },
56-
{ key: "system-monitor", name: "System Monitor Server" },
57-
{ key: "threejs", name: "Three.js Server" },
58-
{ key: "transcript", name: "Transcript Server" },
59-
{ key: "wiki-explorer", name: "Wiki Explorer" },
38+
// Servers to skip in CI (require special resources like GPU, large ML models)
39+
const SKIP_SERVERS = new Set<string>([
40+
// None currently - say-server widget works without TTS model for screenshots
41+
]);
42+
43+
// Optional: filter to a single example via EXAMPLE env var (folder name)
44+
const EXAMPLE_FILTER = process.env.EXAMPLE;
45+
46+
// Server configurations (key is used for screenshot filenames, name is the MCP server name, dir is the folder name)
47+
const ALL_SERVERS = [
48+
{
49+
key: "integration",
50+
name: "Integration Test Server",
51+
dir: "integration-server",
52+
},
53+
{
54+
key: "basic-preact",
55+
name: "Basic MCP App Server (Preact)",
56+
dir: "basic-server-preact",
57+
},
58+
{
59+
key: "basic-react",
60+
name: "Basic MCP App Server (React)",
61+
dir: "basic-server-react",
62+
},
63+
{
64+
key: "basic-solid",
65+
name: "Basic MCP App Server (Solid)",
66+
dir: "basic-server-solid",
67+
},
68+
{
69+
key: "basic-svelte",
70+
name: "Basic MCP App Server (Svelte)",
71+
dir: "basic-server-svelte",
72+
},
73+
{
74+
key: "basic-vanillajs",
75+
name: "Basic MCP App Server (Vanilla JS)",
76+
dir: "basic-server-vanillajs",
77+
},
78+
{
79+
key: "basic-vue",
80+
name: "Basic MCP App Server (Vue)",
81+
dir: "basic-server-vue",
82+
},
83+
{
84+
key: "budget-allocator",
85+
name: "Budget Allocator Server",
86+
dir: "budget-allocator-server",
87+
},
88+
{
89+
key: "cohort-heatmap",
90+
name: "Cohort Heatmap Server",
91+
dir: "cohort-heatmap-server",
92+
},
93+
{
94+
key: "customer-segmentation",
95+
name: "Customer Segmentation Server",
96+
dir: "customer-segmentation-server",
97+
},
98+
{ key: "map-server", name: "Map Server", dir: "map-server" },
99+
{ key: "pdf-server", name: "PDF Server", dir: "pdf-server" },
100+
{ key: "qr-server", name: "QR Code Server", dir: "qr-server" },
101+
{ key: "say-server", name: "Say Demo", dir: "say-server" },
102+
{
103+
key: "scenario-modeler",
104+
name: "SaaS Scenario Modeler",
105+
dir: "scenario-modeler-server",
106+
},
107+
{ key: "shadertoy", name: "ShaderToy Server", dir: "shadertoy-server" },
108+
{ key: "sheet-music", name: "Sheet Music Server", dir: "sheet-music-server" },
109+
{
110+
key: "system-monitor",
111+
name: "System Monitor Server",
112+
dir: "system-monitor-server",
113+
},
114+
{ key: "threejs", name: "Three.js Server", dir: "threejs-server" },
115+
{ key: "transcript", name: "Transcript Server", dir: "transcript-server" },
116+
{ key: "wiki-explorer", name: "Wiki Explorer", dir: "wiki-explorer-server" },
60117
];
61118

119+
// Filter servers if EXAMPLE is specified
120+
const SERVERS = EXAMPLE_FILTER
121+
? ALL_SERVERS.filter((s) => s.dir === EXAMPLE_FILTER)
122+
: ALL_SERVERS;
123+
62124
/**
63125
* Helper to get the app frame locator (nested: sandbox > app)
64126
*/
@@ -129,12 +191,23 @@ test.describe("Host UI", () => {
129191

130192
// Define tests for each server using forEach to avoid for-loop issues
131193
SERVERS.forEach((server) => {
194+
// Skip servers that require special resources (GPU, large ML models)
195+
const shouldSkip = SKIP_SERVERS.has(server.key);
196+
132197
test.describe(server.name, () => {
133198
test("loads app UI", async ({ page }) => {
199+
if (shouldSkip) {
200+
test.skip();
201+
return;
202+
}
134203
await loadServer(page, server.name);
135204
});
136205

137206
test("screenshot matches golden", async ({ page }) => {
207+
if (shouldSkip) {
208+
test.skip();
209+
return;
210+
}
138211
await loadServer(page, server.name);
139212

140213
// Some servers (WebGL, tile-based) need extra stabilization time
@@ -153,12 +226,20 @@ SERVERS.forEach((server) => {
153226
});
154227

155228
// Interaction tests for integration server (tests all SDK communication APIs)
156-
const integrationServer = SERVERS.find((s) => s.key === "integration")!;
229+
// Only run if integration-server is included (either no filter or EXAMPLE=integration-server)
230+
const integrationServer = SERVERS.find((s) => s.key === "integration");
231+
const integrationServerName =
232+
integrationServer?.name ?? "Integration Test Server";
233+
234+
test.describe(`Integration Test Server - Interactions`, () => {
235+
test.skip(
236+
() => !integrationServer,
237+
"Skipped: integration-server not in EXAMPLE filter",
238+
);
157239

158-
test.describe(`${integrationServer.name} - Interactions`, () => {
159240
test("Send Message button triggers host callback", async ({ page }) => {
160241
const logs = captureHostLogs(page);
161-
await loadServer(page, integrationServer.name);
242+
await loadServer(page, integrationServerName);
162243

163244
const appFrame = getAppFrame(page);
164245
await appFrame.locator('button:has-text("Send Message")').click();
@@ -171,7 +252,7 @@ test.describe(`${integrationServer.name} - Interactions`, () => {
171252

172253
test("Send Log button triggers host callback", async ({ page }) => {
173254
const logs = captureHostLogs(page);
174-
await loadServer(page, integrationServer.name);
255+
await loadServer(page, integrationServerName);
175256

176257
const appFrame = getAppFrame(page);
177258
await appFrame.locator('button:has-text("Send Log")').click();
@@ -185,7 +266,7 @@ test.describe(`${integrationServer.name} - Interactions`, () => {
185266

186267
test("Open Link button triggers host callback", async ({ page }) => {
187268
const logs = captureHostLogs(page);
188-
await loadServer(page, integrationServer.name);
269+
await loadServer(page, integrationServerName);
189270

190271
const appFrame = getAppFrame(page);
191272
await appFrame.locator('button:has-text("Open Link")').click();

0 commit comments

Comments
 (0)