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

aboqasem · Jun 18, 2022 · 990b58a · 990b58a
1 parent 1e22020
commit 990b58a
Show file tree

Hide file tree

Showing 3 changed files with 114 additions and 25 deletions.
diff --git a/test/integration/script-loader/base/pages/_document.js b/test/integration/script-loader/base/pages/_document.js
@@ -16,15 +16,41 @@ export default function Document() {
           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="script-bi-inline-in-doc-in-head"
           strategy="beforeInteractive"
-          dangerouslySetInnerHTML={{
-            __html: `console.log('inline beforeInteractive')`,
-          }}
-        ></Script>
+        >{`console.log('script-bi-inline-in-doc-in-head')`}</Script>
+        <Script
+          id="script-ai-inline-in-doc-in-head"
+          strategy="afterInteractive"
+        >{`console.log('script-ai-inline-in-doc-in-head')`}</Script>
+        <Script
+          id="script-lo-inline-in-doc-in-head"
+          strategy="lazyOnload"
+        >{`console.log('script-lo-inline-in-doc-in-head')`}</Script>
+        {/* <Script
+          id="script-w-inline-in-doc-in-head"
+          strategy="worker"
+        >{`console.log('script-w-inline-in-doc-in-head')`}</Script> */}
       </Head>
       <body>
+        <Script
+          id="script-bi-inline-in-doc-out-head"
+          strategy="beforeInteractive"
+        >{`console.log('script-bi-inline-in-doc-out-head')`}</Script>
+        <Script
+          id="script-ai-inline-in-doc-out-head"
+          strategy="afterInteractive"
+        >{`console.log('script-ai-inline-in-doc-out-head')`}</Script>
+        <Script
+          id="script-lo-inline-in-doc-out-head"
+          strategy="lazyOnload"
+        >{`console.log('script-lo-inline-in-doc-out-head')`}</Script>
+        {/* <Script
+          id="script-w-inline-in-doc-out-head"
+          strategy="worker"
+        >{`console.log('script-w-inline-in-doc-out-head')`}</Script> */}
         <Main />
         <NextScript />
         <div id="text" />

diff --git a/test/integration/script-loader/base/pages/index.js b/test/integration/script-loader/base/pages/index.js
@@ -1,9 +1,45 @@
 import Script from 'next/script'
 import Link from 'next/link'
+import Head from 'next/head'
 
 const Page = () => {
   return (
     <div class="container">
+      <Head>
+        <Script
+          id="script-bi-inline-in-page-in-head"
+          strategy="beforeInteractive"
+        >{`console.log('script-bi-inline-in-page-in-head')`}</Script>
+        <Script
+          id="script-ai-inline-in-page-in-head"
+          strategy="afterInteractive"
+        >{`console.log('script-ai-inline-in-page-in-head')`}</Script>
+        <Script
+          id="script-lo-inline-in-page-in-head"
+          strategy="lazyOnload"
+        >{`console.log('script-lo-inline-in-page-in-head')`}</Script>
+        {/* <Script
+          id="script-w-inline-in-page-in-head"
+          strategy="worker"
+        >{`console.log('script-w-inline-in-page-in-head')`}</Script> */}
+      </Head>
+      <Script
+        id="script-bi-inline-in-page-out-head"
+        strategy="beforeInteractive"
+      >{`console.log('script-bi-inline-in-page-out-head')`}</Script>
+      <Script
+        id="script-ai-inline-in-page-out-head"
+        strategy="afterInteractive"
+      >{`console.log('script-ai-inline-in-page-out-head')`}</Script>
+      <Script
+        id="script-lo-inline-in-page-out-head"
+        strategy="lazyOnload"
+      >{`console.log('script-lo-inline-in-page-out-head')`}</Script>
+      {/* <Script
+        id="script-w-inline-in-page-out-head"
+        strategy="worker"
+      >{`console.log('script-w-inline-in-page-out-head')`}</Script> */}
+
       <Script
         id="scriptAfterInteractive"
         src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.20/lodash.min.js?a=scriptAfterInteractive"

diff --git a/test/integration/script-loader/test/index.test.js b/test/integration/script-loader/test/index.test.js
@@ -38,6 +38,50 @@ describe('Next.js Script - Primary Strategies', () => {
     stopApp(server)
   })
 
+  it('should execute scripts with any strategy in Document or Page inside or outside of Head', async () => {
+    const expected = {
+      'script-bi-inline-in-doc-in-head': true,
+      'script-ai-inline-in-doc-in-head': true,
+      'script-lo-inline-in-doc-in-head': true,
+      // 'script-w-inline-in-doc-in-head': true,
+      'script-bi-inline-in-doc-out-head': true,
+      'script-ai-inline-in-doc-out-head': true,
+      'script-lo-inline-in-doc-out-head': true,
+      // 'script-w-inline-in-doc-out-head': true,
+      'script-bi-inline-in-page-in-head': true,
+      'script-ai-inline-in-page-in-head': true,
+      'script-lo-inline-in-page-in-head': true,
+      // 'script-w-inline-in-page-in-head': true,
+      'script-bi-inline-in-page-out-head': true,
+      'script-ai-inline-in-page-out-head': true,
+      'script-lo-inline-in-page-out-head': true,
+      // 'script-w-inline-in-page-out-head': true,
+    }
+    const scripts = Object.keys(expected)
+
+    const actual = scripts.reduce((acc, script) => {
+      acc[script] = false
+      return acc
+    }, {})
+
+    let browser
+    try {
+      browser = await webdriver(appPort, '/')
+      await waitFor(1000)
+      const logs = await browser.log()
+
+      logs.forEach(({ message }) => {
+        if (message in actual) {
+          actual[message] = true
+        }
+      })
+
+      expect(actual).toEqual(expected)
+    } finally {
+      if (browser) await browser.close()
+    }
+  })
+
   it('priority afterInteractive', async () => {
     let browser
     try {
@@ -194,33 +238,16 @@ describe('Next.js Script - Primary Strategies', () => {
     const html = await renderViaHTTP(appPort, '/page5')
     const $ = cheerio.load(html)
 
-    const script = $('#inline-before')
+    const script = $('#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
+      $(`#script-bi-inline-in-doc-in-head ~ link[href^="/_next/static/css"]`)
+        .length
     ).toBeGreaterThan(0)
   })
 
-  it('priority beforeInteractive with inline script should execute', async () => {
-    let browser
-    try {
-      browser = await webdriver(appPort, '/page7')
-
-      await waitFor(1000)
-
-      const logs = await browser.log()
-      expect(
-        logs.some((log) =>
-          log.message.includes('beforeInteractive inline script run')
-        )
-      ).toBe(true)
-    } finally {
-      if (browser) await browser.close()
-    }
-  })
-
   it('Does not duplicate inline scripts', async () => {
     let browser
     try {