test(sse): add cors middleware for testing

Author: kettanaito

test/browser/playwright.config.ts

@@ -9,7 +9,7 @@ const config: PlaywrightTestConfig = {
     },
   ],
   timeout: 10_000,
-  retries: 1,
+  retries: process.env.PWDEBUG ? 0 : 1,
   use: {
     trace: 'on-first-retry',
     launchOptions: {

test/browser/sse-api/sse.server.connect.test.ts

@@ -1,5 +1,8 @@
 import { setupWorker, sse } from 'msw/browser'
-import { createTestHttpServer } from '@epic-web/test-server/http'
+import {
+  createTestHttpServer,
+  TestHttpServerOptions,
+} from '@epic-web/test-server/http'
 import { test, expect } from '../playwright.extend'
 
 declare namespace window {
@@ -9,6 +12,17 @@ declare namespace window {
   }
 }
 
+function applyCorsMiddleware(
+  routes: Parameters<NonNullable<TestHttpServerOptions['defineRoutes']>>[0],
+) {
+  routes.use(async (ctx, next) => {
+    ctx.res.headers.set('Access-Control-Allow-Origin', '*')
+    ctx.res.headers.set('Access-Control-Allow-Methods', '*')
+    ctx.res.headers.set('Access-Control-Allow-Headers', '*')
+    await next()
+  })
+}
+
 test('makes the actual request when called "server.connect()"', async ({
   loadExample,
   page,
@@ -19,6 +33,8 @@ test('makes the actual request when called "server.connect()"', async ({
 
   await using server = await createTestHttpServer({
     defineRoutes(routes) {
+      applyCorsMiddleware(routes)
+
       routes.get('/stream', () => {
         return new Response(null, {
           headers: {
@@ -65,6 +81,8 @@ test('forwards message event from the server to the client automatically', async
 
   await using server = await createTestHttpServer({
     defineRoutes(routes) {
+      applyCorsMiddleware(routes)
+
       routes.get('/stream', () => {
         const stream = new ReadableStream({
           start(controller) {
@@ -123,6 +141,8 @@ test('forwards custom event from the server to the client automatically', async
 
   await using server = await createTestHttpServer({
     defineRoutes(routes) {
+      applyCorsMiddleware(routes)
+
       routes.get('/stream', () => {
         const stream = new ReadableStream({
           start(controller) {
@@ -151,7 +171,7 @@ test('forwards custom event from the server to the client automatically', async
     const { setupWorker, sse } = window.msw
 
     const worker = setupWorker(
-      sse(url, ({ client, server }) => {
+      sse(url, ({ server }) => {
         server.connect()
       }),
     )
@@ -181,6 +201,8 @@ test('forwards error event from the server to the client automatically', async (
 
   await using server = await createTestHttpServer({
     defineRoutes(routes) {
+      applyCorsMiddleware(routes)
+
       routes.get('/stream', () => {
         const stream = new ReadableStream({
           start(controller) {
@@ -204,17 +226,18 @@ test('forwards error event from the server to the client automatically', async (
     const { setupWorker, sse } = window.msw
 
     const worker = setupWorker(
-      sse(url, ({ client, server }) => {
+      sse(url, ({ server }) => {
         server.connect()
       }),
     )
     await worker.start()
   }, url)
 
   const errorPromise = page.evaluate((url) => {
-    return new Promise<void>((resolve) => {
+    return new Promise<void>((resolve, reject) => {
       const source = new EventSource(url)
       source.onerror = () => resolve()
+      source.onmessage = () => reject(new Error('Must not receive a message'))
     })
   }, url)