test: share stack frame util

Author: huozhi

test/development/app-dir/owner-stack-invalid-element-type/owner-stack-invalid-element-type.test.ts

@@ -1,32 +1,9 @@
 import { nextTestSetup } from 'e2e-utils'
-import { assertHasRedbox, getRedboxSource } from 'next-test-utils'
-
-async function getStackFramesContent(browser) {
-  const stackFrameElements = await browser.elementsByCss(
-    '[data-nextjs-call-stack-frame]'
-  )
-  const stackFramesContent = (
-    await Promise.all(
-      stackFrameElements.map(async (frame) => {
-        const functionNameEl = await frame.$('[data-nextjs-frame-expanded]')
-        const sourceEl = await frame.$('[data-has-source]')
-        const functionName = functionNameEl
-          ? await functionNameEl.innerText()
-          : ''
-        const source = sourceEl ? await sourceEl.innerText() : ''
-
-        if (!functionName) {
-          return ''
-        }
-        return `at ${functionName} (${source})`
-      })
-    )
-  )
-    .filter(Boolean)
-    .join('\n')
-
-  return stackFramesContent
-}
+import {
+  assertHasRedbox,
+  getRedboxSource,
+  getStackFramesContent,
+} from 'next-test-utils'
 
 describe('app-dir - owner-stack-invalid-element-type', () => {
   const { next } = nextTestSetup({

test/development/app-dir/owner-stack-react-missing-key-prop/owner-stack-react-missing-key-prop.test.ts

@@ -1,32 +1,9 @@
 import { nextTestSetup } from 'e2e-utils'
-import { getRedboxSource, waitForAndOpenRuntimeError } from 'next-test-utils'
-
-async function getStackFramesContent(browser) {
-  const stackFrameElements = await browser.elementsByCss(
-    '[data-nextjs-call-stack-frame]'
-  )
-  const stackFramesContent = (
-    await Promise.all(
-      stackFrameElements.map(async (frame) => {
-        const functionNameEl = await frame.$('[data-nextjs-frame-expanded]')
-        const sourceEl = await frame.$('[data-has-source]')
-        const functionName = functionNameEl
-          ? await functionNameEl.innerText()
-          : ''
-        const source = sourceEl ? await sourceEl.innerText() : ''
-
-        if (!functionName) {
-          return ''
-        }
-        return `at ${functionName} (${source})`
-      })
-    )
-  )
-    .filter(Boolean)
-    .join('\n')
-
-  return stackFramesContent
-}
+import {
+  getRedboxSource,
+  waitForAndOpenRuntimeError,
+  getStackFramesContent,
+} from 'next-test-utils'
 
 describe('owner-stack-react-missing-key-prop', () => {
   const { next } = nextTestSetup({

test/development/app-dir/owner-stack/owner-stack.test.ts

@@ -4,6 +4,7 @@ import {
   assertNoRedbox,
   waitForAndOpenRuntimeError,
   getRedboxDescription,
+  getStackFramesContent,
 } from 'next-test-utils'
 
 // TODO: parse the location and assert them in the future
@@ -17,33 +18,6 @@ function normalizeStackTrace(trace: string) {
     .trim()
 }
 
-async function getStackFramesContent(browser) {
-  const stackFrameElements = await browser.elementsByCss(
-    '[data-nextjs-call-stack-frame]'
-  )
-  const stackFramesContent = (
-    await Promise.all(
-      stackFrameElements.map(async (frame) => {
-        const functionNameEl = await frame.$('[data-nextjs-frame-expanded]')
-        const sourceEl = await frame.$('[data-has-source]')
-        const functionName = functionNameEl
-          ? await functionNameEl.innerText()
-          : ''
-        const source = sourceEl ? await sourceEl.innerText() : ''
-
-        if (!functionName) {
-          return ''
-        }
-        return `at ${functionName} (${source})`
-      })
-    )
-  )
-    .filter(Boolean)
-    .join('\n')
-
-  return stackFramesContent
-}
-
 describe('app-dir - owner-stack', () => {
   const { next } = nextTestSetup({
     files: __dirname,

test/lib/next-test-utils.ts

@@ -1492,3 +1492,32 @@ export const checkLink = (
   rel: string,
   content: string | string[]
 ) => checkMeta(browser, rel, content, 'rel', 'link', 'href')
+
+export async function getStackFramesContent(
+  browser: BrowserInterface
+): Promise<string> {
+  const stackFrameElements = await browser.elementsByCss(
+    '[data-nextjs-call-stack-frame]'
+  )
+  const stackFramesContent = (
+    await Promise.all(
+      stackFrameElements.map(async (frame) => {
+        const functionNameEl = await frame.$('[data-nextjs-frame-expanded]')
+        const sourceEl = await frame.$('[data-has-source]')
+        const functionName = functionNameEl
+          ? await functionNameEl.innerText()
+          : ''
+        const source = sourceEl ? await sourceEl.innerText() : ''
+
+        if (!functionName) {
+          return ''
+        }
+        return `at ${functionName} (${source})`
+      })
+    )
+  )
+    .filter(Boolean)
+    .join('\n')
+
+  return stackFramesContent
+}