add test to assert indicator count

vercel · Feb 9, 2025 · 3aa0cd4 · 3aa0cd4
1 parent 0b15ef4
commit 3aa0cd4
Show file tree

Hide file tree

Showing 4 changed files with 61 additions and 0 deletions.
diff --git a/test/development/app-dir/missing-required-html-tags-new-overlay/app/layout.js b/test/development/app-dir/missing-required-html-tags-new-overlay/app/layout.js
@@ -0,0 +1,3 @@
+export default function Layout({ children }) {
+  return <body>{children}</body>
+}
diff --git a/test/development/app-dir/missing-required-html-tags-new-overlay/app/page.js b/test/development/app-dir/missing-required-html-tags-new-overlay/app/page.js
@@ -0,0 +1,3 @@
+export default function Page() {
+  return <p>hello world</p>
+}
diff --git a/...ment/app-dir/missing-required-html-tags-new-overlay/missing-html-tags-new-overlay.test.ts b/...ment/app-dir/missing-required-html-tags-new-overlay/missing-html-tags-new-overlay.test.ts
@@ -0,0 +1,47 @@
+import { nextTestSetup } from 'e2e-utils'
+import {
+  assertHasRedbox,
+  assertNoRedbox,
+  getRedboxDescription,
+  getToastErrorCount,
+  hasErrorToast,
+  retry,
+} from 'next-test-utils'
+import { outdent } from 'outdent'
+
+// TODO: merge with test/development/app-dir/missing-required-html-tags/index.test.ts
+//  once new overlay is stable
+describe('app-dir - missing required html tags', () => {
+  const { next } = nextTestSetup({
+    files: __dirname,
+  })
+
+  it('should display correct error count in dev indicator', async () => {
+    const browser = await next.browser('/')
+
+    retry(async () => {
+      expect(await hasErrorToast(browser)).toBe(true)
+    })
+    // Dev indicator should show 1 error
+    expect(await getToastErrorCount(browser)).toBe(1)
+
+    await assertHasRedbox(browser)
+
+    await retry(async () => {
+      expect(await getRedboxDescription(browser)).toEqual(outdent`
+        The following tags are missing in the Root Layout: <html>.
+        Read more at https://nextjs.org/docs/messages/missing-root-layout-tags
+      `)
+    })
+
+    await next.patchFile('app/layout.js', (code) =>
+      code.replace(
+        'return <body>{children}</body>',
+        'return <html><body>{children}</body></html>'
+      )
+    )
+
+    await assertNoRedbox(browser)
+    expect(await browser.elementByCss('p').text()).toBe('hello world')
+  })
+})
diff --git a/test/development/app-dir/missing-required-html-tags-new-overlay/next.config.js b/test/development/app-dir/missing-required-html-tags-new-overlay/next.config.js
@@ -0,0 +1,8 @@
+/**
+ * @type {import('next').NextConfig}
+ */
+module.exports = {
+  experimental: {
+    newDevOverlay: true,
+  },
+}