Update logbox tests

vercel · Jul 24, 2024 · ae4a2e1 · ae4a2e1
1 parent 8c62af4
commit ae4a2e1
Showing 1 changed file with 106 additions and 54 deletions.
diff --git a/test/development/acceptance-app/ReactRefreshLogBox.test.ts b/test/development/acceptance-app/ReactRefreshLogBox.test.ts
@@ -777,39 +777,24 @@ describe.each(['default', 'turbo'])('ReactRefreshLogBox app %s', () => {
     await cleanup()
   })
 
-  test.each([
-    [
-      'client',
-      new Map([
-        [
-          'app/page.js',
-          outdent`
-        'use client'
-        export default function Page() {
-          if (typeof window !== 'undefined') {
-            throw new Error('Client error')
-          }
-          return null
-        }
-      `,
-        ],
-      ]),
-    ],
-    [
-      'server',
+  test('Call stack count for client error', async () => {
+    const { session, browser, cleanup } = await sandbox(
+      next,
       new Map([
         [
           'app/page.js',
           outdent`
-        export default function Page() {
-          throw new Error('Server error')
-        }
-      `,
+            'use client'
+            export default function Page() {
+              if (typeof window !== 'undefined') {
+                throw new Error('Client error')
+              }
+              return null
+            }
+          `,
         ],
-      ]),
-    ],
-  ])('Call stack count is correct for %s error', async (_, fixture) => {
-    const { session, browser, cleanup } = await sandbox(next, fixture)
+      ])
+    )
 
     await session.assertHasRedbox()
 
@@ -832,6 +817,47 @@ describe.each(['default', 'turbo'])('ReactRefreshLogBox app %s', () => {
     await cleanup()
   })
 
+  test('Call stack for server error', async () => {
+    const { session, browser, cleanup } = await sandbox(
+      next,
+      new Map([
+        [
+          'app/page.js',
+          outdent`
+      export default function Page() {
+        throw new Error('Server error')
+      }
+    `,
+        ],
+      ])
+    )
+
+    try {
+      await session.assertHasRedbox()
+
+      // Should still show the errored line in source code
+      const source = await session.getRedboxSource()
+      expect(source).toContain('app/page.js')
+      expect(source).toContain(`throw new Error('Server error')`)
+
+      await expect(
+        browser.hasElementByCssSelector(
+          '[data-nextjs-data-runtime-error-collapsed-action]'
+        )
+      ).resolves.toEqual(false)
+
+      const stackFrameElements = await browser.elementsByCss(
+        '[data-nextjs-call-stack-frame]'
+      )
+      const stackFrames = await Promise.all(
+        stackFrameElements.map((f) => f.innerText())
+      )
+      expect(stackFrames).toEqual([])
+    } finally {
+      await cleanup()
+    }
+  })
+
   test('should hide unrelated frames in stack trace with unknown anonymous calls', async () => {
     const { session, browser, cleanup } = await sandbox(
       next,
@@ -852,18 +878,38 @@ describe.each(['default', 'turbo'])('ReactRefreshLogBox app %s', () => {
         ],
       ])
     )
-    await session.assertHasRedbox()
-    await expandCallStack(browser)
-    let callStackFrames = await browser.elementsByCss(
-      '[data-nextjs-call-stack-frame]'
-    )
-    const text = (
-      await Promise.all(callStackFrames.map((f) => f.innerText()))
-    ).join('')
-    expect(text).not.toContain('<anonymous>')
-    expect(text).toContain('app/page.js')
 
-    await cleanup()
+    try {
+      await session.assertHasRedbox()
+
+      // Should still show the errored line in source code
+      const source = await session.getRedboxSource()
+      expect(source).toContain('app/page.js')
+      expect(source).toContain(
+        `throw new Error("This is an error from an anonymous function")`
+      )
+
+      await expect(
+        browser.hasElementByCssSelector(
+          '[data-nextjs-data-runtime-error-collapsed-action]'
+        )
+      ).resolves.toEqual(false)
+
+      const stackFrameElements = await browser.elementsByCss(
+        '[data-nextjs-call-stack-frame]'
+      )
+      const stackFrames = await Promise.all(
+        stackFrameElements.map((f) => f.innerText())
+      )
+      expect(stackFrames).toEqual([
+        outdent`
+          Page
+          app/page.js (5:5)
+        `,
+      ])
+    } finally {
+      await cleanup()
+    }
   })
 
   test('should hide unrelated frames in stack trace with nodejs internal calls', async () => {
@@ -881,24 +927,30 @@ describe.each(['default', 'turbo'])('ReactRefreshLogBox app %s', () => {
       ])
     )
 
-    await session.assertHasRedbox()
-    await expandCallStack(browser)
-
-    // Should still show the errored line in source code
-    const source = await session.getRedboxSource()
-    expect(source).toContain('app/page.js')
-    expect(source).toContain(`new URL("/", "invalid")`)
+    try {
+      await session.assertHasRedbox()
 
-    await expandCallStack(browser)
-    const callStackFrames = await browser.elementsByCss(
-      '[data-nextjs-call-stack-frame]'
-    )
-    const texts = await Promise.all(callStackFrames.map((f) => f.innerText()))
+      // Should still show the errored line in source code
+      const source = await session.getRedboxSource()
+      expect(source).toContain('app/page.js')
+      expect(source).toContain(`new URL("/", "invalid")`)
 
-    expect(texts.filter((t) => t.includes('node:internal'))).toHaveLength(0)
-    expect(texts.filter((t) => t.includes('node:async_hooks'))).toHaveLength(0)
+      await expect(
+        browser.hasElementByCssSelector(
+          '[data-nextjs-data-runtime-error-collapsed-action]'
+        )
+      ).resolves.toEqual(false)
 
-    await cleanup()
+      const stackFrameElements = await browser.elementsByCss(
+        '[data-nextjs-call-stack-frame]'
+      )
+      const stackFrames = await Promise.all(
+        stackFrameElements.map((f) => f.innerText())
+      )
+      expect(stackFrames).toEqual([])
+    } finally {
+      await cleanup()
+    }
   })
 
   test('Server component errors should open up in fullscreen', async () => {