test: clean up duplicated tests (#36871)

Clean up integration tests

* app-document: Merge multi fetch reuqests into 1, add checking for `__NEXT_DATA__`
* rsc/streaming: Merge duplicated tests, move the head tests to client-navigation since they're running under react 18 now
* remove runtime subtest suite under rsc tests since it's covered in switchable runtime test suite

test/integration/app-document/test/rendering.js

@@ -12,14 +12,18 @@ export default function ({ app }, suiteName, render, fetch) {
 
   describe(suiteName, () => {
     describe('_document', () => {
-      test('It has a custom html class', async () => {
+      test('should include required elements in rendered html', async () => {
         const $ = await get$('/')
+        // It has a custom html class
         expect($('html').hasClass('test-html-props')).toBe(true)
-      })
-
-      test('It has a custom body class', async () => {
-        const $ = await get$('/')
+        // It has a custom body class
         expect($('body').hasClass('custom_class')).toBe(true)
+        // It injects custom head tags
+        expect($('head').text()).toMatch('body { margin: 0 }')
+        // It has __NEXT_DATA__ script tag
+        expect($('script#__NEXT_DATA__')).toBeTruthy()
+        // It passes props from Document.getInitialProps to Document
+        expect($('#custom-property').text()).toBe('Hello Document')
       })
 
       it('Document.getInitialProps returns html prop representing app shell', async () => {
@@ -30,16 +34,6 @@ export default function ({ app }, suiteName, render, fetch) {
         expect($about('#css-in-cjs-count').text()).toBe('0')
       })
 
-      test('It injects custom head tags', async () => {
-        const $ = await get$('/')
-        expect($('head').text()).toMatch('body { margin: 0 }')
-      })
-
-      test('It passes props from Document.getInitialProps to Document', async () => {
-        const $ = await get$('/')
-        expect($('#custom-property').text()).toBe('Hello Document')
-      })
-
       test('It adds nonces to all scripts and preload links', async () => {
         const $ = await get$('/')
         const nonce = 'test-nonce'

test/integration/client-navigation/test/index.test.js

@@ -1438,6 +1438,82 @@ describe('Client Navigation', () => {
       }
     })
 
+    it('should warn when stylesheets or scripts are in head', async () => {
+      let browser
+      try {
+        browser = await webdriver(context.appPort, '/head')
+
+        await browser.waitForElementByCss('h1')
+        await waitFor(1000)
+        const browserLogs = await browser.log('browser')
+        let foundStyles = false
+        let foundScripts = false
+        const logs = []
+        browserLogs.forEach(({ message }) => {
+          if (message.includes('Do not add stylesheets using next/head')) {
+            foundStyles = true
+            logs.push(message)
+          }
+          if (message.includes('Do not add <script> tags using next/head')) {
+            foundScripts = true
+            logs.push(message)
+          }
+        })
+
+        expect(foundStyles).toEqual(true)
+        expect(foundScripts).toEqual(true)
+
+        // Warnings are unique
+        expect(logs.length).toEqual(new Set(logs).size)
+      } finally {
+        if (browser) {
+          await browser.close()
+        }
+      }
+    })
+
+    it('should warn when scripts are in head', async () => {
+      let browser
+      try {
+        browser = await webdriver(context.appPort, '/head')
+        await browser.waitForElementByCss('h1')
+        await waitFor(1000)
+        const browserLogs = await browser.log('browser')
+        let found = false
+        browserLogs.forEach((log) => {
+          if (log.message.includes('Use next/script instead')) {
+            found = true
+          }
+        })
+        expect(found).toEqual(true)
+      } finally {
+        if (browser) {
+          await browser.close()
+        }
+      }
+    })
+
+    it('should not warn when application/ld+json scripts are in head', async () => {
+      let browser
+      try {
+        browser = await webdriver(context.appPort, '/head-with-json-ld-snippet')
+        await browser.waitForElementByCss('h1')
+        await waitFor(1000)
+        const browserLogs = await browser.log('browser')
+        let found = false
+        browserLogs.forEach((log) => {
+          if (log.message.includes('Use next/script instead')) {
+            found = true
+          }
+        })
+        expect(found).toEqual(false)
+      } finally {
+        if (browser) {
+          await browser.close()
+        }
+      }
+    })
+
     it('should update head during client routing', async () => {
       let browser
       try {

test/integration/react-streaming-and-server-components/test/basic.js

@@ -1,32 +1,6 @@
-import webdriver from 'next-webdriver'
 import { renderViaHTTP } from 'next-test-utils'
 
 export default async function basic(context, { env }) {
-  it('should render 404 error correctly', async () => {
-    const path404HTML = await renderViaHTTP(context.appPort, '/404')
-    const pathNotFoundHTML = await renderViaHTTP(context.appPort, '/not-found')
-
-    expect(path404HTML).toContain('custom-404-page')
-    expect(pathNotFoundHTML).toContain('custom-404-page')
-  })
-
-  it('should render title correctly', async () => {
-    const res = await renderViaHTTP(context.appPort, '/')
-    expect(res).toContain('<title>hello, env_var_test</title>')
-  })
-
-  it('should support api routes', async () => {
-    const res = await renderViaHTTP(context.appPort, '/api/ping')
-    expect(res).toContain('pong')
-  })
-
-  it('should handle suspense error page correctly (node stream)', async () => {
-    const browser = await webdriver(context.appPort, '/404')
-    const hydrationContent = await browser.waitForElementByCss('#__next').text()
-
-    expect(hydrationContent).toBe('custom-404-pagenext_streaming_data')
-  })
-
   it('should render 500 error correctly', async () => {
     const errPaths = ['/err', '/err/render']
     const promises = errPaths.map(async (pagePath) => {
@@ -45,22 +19,4 @@ export default async function basic(context, { env }) {
     const html = await renderViaHTTP(context.appPort, '/err/suspense')
     expect(html).toContain('error-fallback')
   })
-
-  it('should support React.lazy and dynamic imports', async () => {
-    const html = await renderViaHTTP(context.appPort, '/dynamic-imports')
-    expect(html).toContain('foo.client')
-
-    const browser = await webdriver(context.appPort, '/dynamic-imports')
-    const content = await browser.eval(`window.document.body.innerText`)
-    const dynamicIds = await browser.eval(`__NEXT_DATA__.dynamicIds`)
-    expect(content).toMatchInlineSnapshot('"foo.clientbar.client"')
-    expect(dynamicIds).toBe(undefined)
-  })
-
-  if (env === 'prod') {
-    it(`should not display custom _app or _app.server in treeview if there's not any`, () => {
-      const { stdout } = context
-      expect(stdout).not.toMatch(/\s\/_app(\.server)?/)
-    })
-  }
 }

test/integration/react-streaming-and-server-components/test/index.test.js

@@ -22,7 +22,6 @@ import css from './css'
 import rsc from './rsc'
 import streaming from './streaming'
 import basic from './basic'
-import runtime from './runtime'
 import { getNodeBuiltinModuleNotSupportedInEdgeRuntimeMessage } from 'next/dist/build/utils'
 
 const appWithGlobalCss = `
@@ -59,7 +58,6 @@ const edgeRuntimeBasicSuite = {
     basic(context, options)
     streaming(context, options)
     rsc(context, options)
-    runtime(context, options)
 
     if (env === 'dev') {
       it('should have content-type and content-encoding headers', async () => {

test/integration/react-streaming-and-server-components/test/rsc.js

@@ -7,6 +7,12 @@ import { getNodeBySelector } from './utils'
 
 export default function (context, { runtime, env }) {
   const distDir = join(context.appDir, '.next')
+
+  it('should support api routes', async () => {
+    const res = await renderViaHTTP(context.appPort, '/api/ping')
+    expect(res).toContain('pong')
+  })
+
   it('should render server components correctly', async () => {
     const homeHTML = await renderViaHTTP(context.appPort, '/', null, {
       headers: {
@@ -22,6 +28,7 @@ export default function (context, { runtime, env }) {
     expect(homeHTML).toContain('component:index.server')
     expect(homeHTML).toContain('env:env_var_test')
     expect(homeHTML).toContain('header:test-util')
+    expect(homeHTML).toMatch(/<\/body><\/html>$/)
     expect(scriptTagContent).toBe(';')
   })