init tests

Author: kentcdodds

exercises/01.simple/01.problem.raw-html/test/globalSetup.ts

@@ -8,15 +8,19 @@ declare module 'vitest' {
 	}
 }
 
+type OutputBuffer = Array<{ channel: 'stdout' | 'stderr'; data: Buffer }>
+
 export default async function setup(project: TestProject) {
 	const mcpServerPort = await getPort()
 
 	project.provide('mcpServerPort', mcpServerPort)
 
+	let appServerProcess: ReturnType<typeof execa> | null = null
 	let mcpServerProcess: ReturnType<typeof execa> | null = null
 
 	// Buffers to store output for potential error display
-	const mcpServerOutput: Array<string> = []
+	const appServerOutput: OutputBuffer = []
+	const mcpServerOutput: OutputBuffer = []
 
 	/**
 	 * Wait for a server to be ready by monitoring its output for a specific text pattern
@@ -30,7 +34,7 @@ export default async function setup(project: TestProject) {
 		process: ReturnType<typeof execa> | null
 		textMatch: string
 		name: string
-		outputBuffer: Array<string>
+		outputBuffer: OutputBuffer
 	}) {
 		if (!childProcess) return
 
@@ -40,9 +44,12 @@ export default async function setup(project: TestProject) {
 				reject(new Error(`${name} failed to start within 10 seconds`))
 			}, 10_000)
 
-			function searchForMatch(data: Buffer) {
+			function searchForMatch(
+				channel: OutputBuffer[number]['channel'],
+				data: Buffer,
+			) {
+				outputBuffer.push({ channel, data })
 				const str = data.toString()
-				outputBuffer.push(str)
 				if (str.includes(textMatch)) {
 					clearTimeout(timeout)
 					// Remove the listeners after finding the match
@@ -51,8 +58,9 @@ export default async function setup(project: TestProject) {
 					resolve()
 				}
 			}
-			childProcess?.stdout?.on('data', searchForMatch)
-			childProcess?.stderr?.on('data', searchForMatch)
+
+			childProcess?.stdout?.on('data', searchForMatch.bind(null, 'stdout'))
+			childProcess?.stderr?.on('data', searchForMatch.bind(null, 'stderr'))
 
 			childProcess?.on('error', (err) => {
 				clearTimeout(timeout)
@@ -72,17 +80,54 @@ export default async function setup(project: TestProject) {
 	 * Display buffered output when there's a failure
 	 */
 	function displayBufferedOutput() {
+		if (appServerOutput.length > 0) {
+			console.log('=== App Server Output ===')
+			for (const { channel, data } of appServerOutput) {
+				process[channel].write(data)
+			}
+		}
 		if (mcpServerOutput.length > 0) {
 			console.log('=== MCP Server Output ===')
-			for (const line of mcpServerOutput) {
-				process.stdout.write(line)
+			for (const { channel, data } of mcpServerOutput) {
+				process[channel].write(data)
 			}
 		}
 	}
 
+	async function startAppServerIfNecessary() {
+		const isAppRunning = await fetch('http://localhost:7787/healthcheck').catch(
+			() => ({ ok: false }),
+		)
+		if (isAppRunning.ok) {
+			return
+		}
+
+		const rootDir = process.cwd().replace(/exercises\/.*$/, '')
+
+		// Start the app server from the root directory
+		console.log(`Starting app server on port 7787...`)
+		const command = 'npm'
+		// prettier-ignore
+		const args = [
+			'run', 'dev',
+			'--prefix', './epicshop/epic-me',
+			'--',
+			'--clearScreen=false',
+			'--strictPort',
+		]
+
+		appServerProcess = execa(command, args, {
+			cwd: rootDir,
+			stdio: ['ignore', 'pipe', 'pipe'],
+		})
+	}
+
 	async function startServers() {
 		console.log('Starting servers...')
 
+		// Start app server if necessary
+		await startAppServerIfNecessary()
+
 		// Start the MCP server from the exercise directory
 		console.log(`Starting MCP server on port ${mcpServerPort}...`)
 		mcpServerProcess = execa(
@@ -99,13 +144,25 @@ export default async function setup(project: TestProject) {
 		)
 
 		try {
-			// Wait for MCP server to be ready
-			await waitForServerReady({
-				process: mcpServerProcess,
-				textMatch: mcpServerPort.toString(),
-				name: '[MCP-SERVER]',
-				outputBuffer: mcpServerOutput,
-			})
+			// Wait for both servers to be ready simultaneously
+			await Promise.all([
+				appServerProcess
+					? waitForServerReady({
+							process: appServerProcess,
+							textMatch: '7787',
+							name: '[APP-SERVER]',
+							outputBuffer: appServerOutput,
+						}).then(() =>
+							waitForResourceReady('http://localhost:7787/healthcheck'),
+						)
+					: Promise.resolve(),
+				waitForServerReady({
+					process: mcpServerProcess,
+					textMatch: mcpServerPort.toString(),
+					name: '[MCP-SERVER]',
+					outputBuffer: mcpServerOutput,
+				}),
+			])
 
 			console.log('Servers started successfully')
 		} catch (error) {
@@ -124,12 +181,12 @@ export default async function setup(project: TestProject) {
 			cleanupPromises.push(
 				(async () => {
 					mcpServerProcess.kill('SIGTERM')
-					// Give it 2 seconds to gracefully shutdown, then force kill
+					// Give it time to gracefully shutdown, then force kill
 					const timeout = setTimeout(() => {
 						if (mcpServerProcess && !mcpServerProcess.killed) {
 							mcpServerProcess.kill('SIGKILL')
 						}
-					}, 2000)
+					}, 500)
 
 					try {
 						await mcpServerProcess
@@ -142,6 +199,28 @@ export default async function setup(project: TestProject) {
 			)
 		}
 
+		if (appServerProcess && !appServerProcess.killed) {
+			cleanupPromises.push(
+				(async () => {
+					appServerProcess.kill('SIGTERM')
+					// Give time to gracefully shutdown, then force kill
+					const timeout = setTimeout(() => {
+						if (appServerProcess && !appServerProcess.killed) {
+							appServerProcess.kill('SIGKILL')
+						}
+					}, 500)
+
+					try {
+						await appServerProcess
+					} catch {
+						// Process was killed, which is expected
+					} finally {
+						clearTimeout(timeout)
+					}
+				})(),
+			)
+		}
+
 		// Wait for all cleanup to complete, but with an overall timeout
 		try {
 			await Promise.race([
@@ -159,6 +238,9 @@ export default async function setup(project: TestProject) {
 			if (mcpServerProcess && !mcpServerProcess.killed) {
 				mcpServerProcess.kill('SIGKILL')
 			}
+			if (appServerProcess && !appServerProcess.killed) {
+				appServerProcess.kill('SIGKILL')
+			}
 		}
 
 		console.log('Servers cleaned up')
@@ -170,3 +252,41 @@ export default async function setup(project: TestProject) {
 	// Return cleanup function
 	return cleanup
 }
+
+function waitForResourceReady(resourceUrl: string) {
+	const timeoutSignal = AbortSignal.timeout(10_000)
+	let lastError: Error | null = null
+	return new Promise<void>((resolve, reject) => {
+		timeoutSignal.addEventListener('abort', () => {
+			const error = lastError ?? new Error('No other errors detected')
+			error.message = `Timed out waiting for ${resourceUrl}:\n Last Error:${error.message}`
+			reject(error)
+		})
+		async function checkResource() {
+			try {
+				const response = await fetch(resourceUrl)
+				if (response.ok) return resolve()
+			} catch (error) {
+				lastError = error instanceof Error ? error : new Error(String(error))
+			}
+			await sleep(100, timeoutSignal)
+			await checkResource()
+		}
+		return checkResource()
+	})
+}
+
+function sleep(ms: number, signal?: AbortSignal) {
+	return new Promise<void>((resolve, reject) => {
+		const timeout = setTimeout(() => {
+			signal?.removeEventListener('abort', onAbort)
+			resolve()
+		}, ms)
+
+		function onAbort() {
+			clearTimeout(timeout)
+			reject(new Error('Sleep aborted'))
+		}
+		signal?.addEventListener('abort', onAbort)
+	})
+}

exercises/01.simple/01.problem.raw-html/test/index.test.ts

@@ -1,4 +1,4 @@
-import { Client } from '@modelcontextprotocol/sdk/client/index.js'
+import { Client } from '@modelcontextprotocol/sdk/client'
 import { StreamableHTTPClientTransport } from '@modelcontextprotocol/sdk/client/streamableHttp.js'
 import { test, expect, inject } from 'vitest'
 
@@ -27,10 +27,15 @@ async function setupClient() {
 	}
 }
 
-test('listing tools works', async () => {
+test('get raw html', async () => {
 	await using setup = await setupClient()
 	const { client } = setup
 
-	const result = await client.listTools()
-	expect(result.tools.length).toBeGreaterThan(0)
+	const result = await client.callTool({
+		name: 'view_tag',
+		params: {
+			id: 1,
+		},
+	})
+	console.log(result)
 })

exercises/01.simple/01.problem.raw-html/vitest.config.ts

@@ -0,0 +1,7 @@
+import { defineConfig } from 'vitest/config'
+
+export default defineConfig({
+	test: {
+		globalSetup: './test/globalSetup.ts',
+	},
+})