test(next/script): failing beforeInteractive tests for bug #37741

vercel · Jun 16, 2022 · 5cdc750 · 5cdc750
1 parent ea89854
commit 5cdc750
Show file tree

Hide file tree

Showing 3 changed files with 57 additions and 14 deletions.
diff --git a/test/integration/script-loader/base/pages/_document.js b/test/integration/script-loader/base/pages/_document.js
@@ -15,19 +15,26 @@ export default function Document() {
           id="scriptBeforeInteractive"
           src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.20/lodash.min.js?a=scriptBeforeInteractive"
           strategy="beforeInteractive"
-        ></Script>
+        />
         <Script
-          id="inline-before"
+          id="bi-inline-in-doc-in-head"
           strategy="beforeInteractive"
           dangerouslySetInnerHTML={{
-            __html: `console.log('inline beforeInteractive')`,
+            __html: `console.log('bi-inline-in-doc-in-head')`,
           }}
-        ></Script>
+        />
       </Head>
       <body>
         <Main />
         <NextScript />
         <div id="text" />
+        <Script
+          id="bi-inline-in-doc-out-head"
+          strategy="beforeInteractive"
+          dangerouslySetInnerHTML={{
+            __html: `console.log('bi-inline-in-doc-out-head')`,
+          }}
+        />
       </body>
     </Html>
   )

diff --git a/test/integration/script-loader/base/pages/page7.js b/test/integration/script-loader/base/pages/page7.js
@@ -1,12 +1,19 @@
+import Head from 'next/head'
 import Script from 'next/script'
 
 const Page = () => {
   return (
     <div class="container">
+      <Head>
+        <Script
+          id="bi-inline-in-page-in-head"
+          strategy="beforeInteractive"
+        >{`console.log('bi-inline-in-page-in-head')`}</Script>
+      </Head>
       <Script
-        id="beforeInteractiveInlineScript"
+        id="bi-inline-in-page-out-head"
         strategy="beforeInteractive"
-      >{`console.log('beforeInteractive inline script run')`}</Script>
+      >{`console.log('bi-inline-in-page-out-head')`}</Script>
       <div>page7</div>
     </div>
   )

diff --git a/test/integration/script-loader/test/index.test.js b/test/integration/script-loader/test/index.test.js
@@ -190,16 +190,16 @@ describe('Next.js Script - Primary Strategies', () => {
     }
   })
 
-  it('priority beforeInteractive with inline script', async () => {
+  it('priority beforeInteractive with inline script in <Head>', async () => {
     const html = await renderViaHTTP(appPort, '/page5')
     const $ = cheerio.load(html)
 
-    const script = $('#inline-before')
+    const script = $('#bi-inline-in-doc-in-head')
     expect(script.length).toBe(1)
 
     // Script is inserted before CSS
     expect(
-      $(`#inline-before ~ link[href^="/_next/static/css"]`).length
+      $(`#bi-inline-in-doc-in-head ~ link[href^="/_next/static/css"]`).length
     ).toBeGreaterThan(0)
   })
 
@@ -211,11 +211,40 @@ describe('Next.js Script - Primary Strategies', () => {
       await waitFor(1000)
 
       const logs = await browser.log()
-      expect(
-        logs.some((log) =>
-          log.message.includes('beforeInteractive inline script run')
-        )
-      ).toBe(true)
+
+      let inDocInHead, inDocOutHead, inPageInHead, inPageOutHead
+
+      for (const log of logs) {
+        if (
+          [inDocInHead, inDocOutHead, inPageInHead, inPageOutHead].every(
+            Boolean
+          )
+        ) {
+          break
+        }
+
+        if (log.message.includes('bi-inline-in-doc-in-head')) {
+          inDocInHead = true
+        } else if (log.message.includes('bi-inline-in-doc-out-head')) {
+          inDocOutHead = true
+        } else if (log.message.includes('bi-inline-in-page-in-head')) {
+          inPageInHead = true
+        } else if (log.message.includes('bi-inline-in-page-out-head')) {
+          inPageOutHead = true
+        }
+      }
+
+      expect({
+        inDocInHead,
+        inDocOutHead,
+        inPageInHead,
+        inPageOutHead,
+      }).toEqual({
+        inDocInHead: true,
+        inDocOutHead: true,
+        inPageInHead: true,
+        inPageOutHead: true,
+      })
     } finally {
       if (browser) await browser.close()
     }