Fix the tests in #779

solutions/testing/apps/main-site/next.config.js

@@ -2,6 +2,7 @@
 const nextConfig = {
   experimental: {
     serverActions: true,
+    appDir: true,
   },
 }
 

solutions/testing/apps/main-site/package.json

@@ -18,7 +18,7 @@
     "clsx": "^2.0.0",
     "cookie": "^0.5.0",
     "msw": "^1.2.3",
-    "next": "^13.4.19",
+    "next": "^13.4.20-canary.5",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "sluga": "^0.2.1",

solutions/testing/packages/playwright/integration/tests/todo.spec.ts

@@ -19,34 +19,55 @@ test.describe.only('Todo Page', () => {
     mockApi,
     next,
   }) => {
-    next.onFetch((req) => {
+    const rows: unknown[] = []
+
+    next.onFetch(async (req) => {
       return mockVercelPostgres(req, {
         'SELECT * FROM todos WHERE user_id = $1;': () => {
-          return new Response(
-            JSON.stringify({
+          return {
+            command: 'SELECT',
+            fields: [
+              { name: 'id', dataTypeID: 25 },
+              { name: 'title', dataTypeID: 25 },
+              { name: 'done', dataTypeID: 16 },
+              { name: 'user_id', dataTypeID: 23 },
+              { name: 'created_at', dataTypeID: 20 },
+              { name: 'updated_at', dataTypeID: 20 },
+            ],
+            rowCount: 1,
+            rowAsArray: false,
+            viaNeonFetch: true,
+            rows,
+          }
+        },
+        'INSERT INTO todos (title, done, user_id) VALUES ($1, false, $2) RETURNING *;':
+          (params) => {
+            const [title, userId] = params
+            const row = [
+              rows.length + 1,
+              title,
+              false,
+              Number(userId),
+              Date.now(),
+              Date.now(),
+            ]
+            rows.push(row)
+            return {
               command: 'SELECT',
-              fields: [],
+              fields: [
+                { name: 'id', dataTypeID: 25 },
+                { name: 'title', dataTypeID: 25 },
+                { name: 'done', dataTypeID: 16 },
+                { name: 'user_id', dataTypeID: 23 },
+                { name: 'created_at', dataTypeID: 20 },
+                { name: 'updated_at', dataTypeID: 20 },
+              ],
               rowCount: 1,
               rowAsArray: false,
               viaNeonFetch: true,
-              rows: [
-                {
-                  id: 1,
-                  title: 'Buy milk',
-                  done: false,
-                  user_id: 1,
-                  created_at: new Date(),
-                  updated_at: new Date(),
-                },
-              ],
-            }),
-            {
-              headers: {
-                'Content-Type': 'application/json',
-              },
+              rows: [row],
             }
-          )
-        },
+          },
       })
     })
 
@@ -55,13 +76,6 @@ test.describe.only('Todo Page', () => {
     const [waitForResponse] = await mockApi.todos.todo.get({
       body: { todos: [] },
     })
-    // msw.use(
-    //   rest.get('/api/todo', (_, res, ctx) => {
-    //     console.log('Hello there!')
-    //     return res.once(ctx.status(200), ctx.json(todosBody))
-    //   })
-    // )
-    nock('http://localhost:3000').get('/api/todo').reply(200, todosBody)
 
     // Navigate to the page and wait for a response from /api/todo
     await Promise.all([waitForResponse, todoPage.goto()])
@@ -77,11 +91,6 @@ test.describe.only('Todo Page', () => {
       const [waitForResponse] = await mockApi.todos.todo.post({
         body: { todos: [todos[0]] },
       })
-      // msw.use(
-      //   rest.post('/api/todo', (_, res, ctx) =>
-      //     res.once(ctx.status(200), ctx.json({ todos: [todos[0]] }))
-      //   )
-      // )
 
       await input.fill(todos[0].title)
       await Promise.all([waitForResponse, input.press('Enter')])
@@ -94,11 +103,6 @@ test.describe.only('Todo Page', () => {
       const [waitForResponse] = await mockApi.todos.todo.post({
         body: { todos: todos.slice(0, 2) },
       })
-      // msw.use(
-      //   rest.post('/api/todo', (_, res, ctx) =>
-      //     res.once(ctx.status(200), ctx.json({ todos: todos.slice(0, 2) }))
-      //   )
-      // )
 
       await input.fill(todos[1].title)
       // This time we'll click the button instead and validate that

solutions/testing/packages/playwright/integration/utils/mock-vercel-postgres.ts

@@ -1,21 +1,36 @@
 export function isVercelPostgres(req: Request) {
-  return req.url.endsWith('postgres.vercel-storage.com/sql')
+  return (
+    req.url.endsWith('postgres.vercel-storage.com/sql') ||
+    req.url.endsWith('localhost/sql')
+  )
 }
 
 export async function mockVercelPostgres(
   req: Request,
-  mocks: Record<string, (req: Request) => any>
+  mocks: Record<string, (params: string[], query: string, req: Request) => any>
 ) {
   if (!isVercelPostgres(req)) return
 
-  req.headers.forEach((v, k) => console.log('HEADER', k, v))
-
   const body: { query: string; params: string[] } = await req.json()
   const mock = mocks[body.query]
 
   if (!mock) {
     throw new Error(`No mock found for query: "${body.query}"`)
   }
 
-  return mock(req)
+  const output = mock(body.params, body.query, req)
+  if (output === null || output === undefined) {
+    return output
+  }
+  if (output instanceof Response) {
+    return output
+  }
+  if (typeof output === 'object') {
+    return new Response(JSON.stringify(output), {
+      headers: {
+        'Content-Type': 'application/json',
+      },
+    })
+  }
+  return output
 }