test(vercel#53190): add test case

SukkaW · Oct 2, 2023 · b1772a3 · b1772a3
1 parent b20b130
commit b1772a3
Show file tree

Hide file tree

Showing 4 changed files with 81 additions and 0 deletions.
diff --git a/test/integration/app-config-crossorigin/app/layout.js b/test/integration/app-config-crossorigin/app/layout.js
@@ -0,0 +1,12 @@
+export const metadata = {
+  title: 'Next.js',
+  description: 'Generated by Next.js',
+}
+
+export default function RootLayout({ children }) {
+  return (
+    <html lang="en">
+      <body>{children}</body>
+    </html>
+  )
+}
diff --git a/test/integration/app-config-crossorigin/app/page.js b/test/integration/app-config-crossorigin/app/page.js
@@ -0,0 +1,3 @@
+export default function Index(props) {
+  return <p id="title">IndexPage</p>
+}
diff --git a/test/integration/app-config-crossorigin/next.config.js b/test/integration/app-config-crossorigin/next.config.js
@@ -0,0 +1,16 @@
+module.exports = {
+  /**
+   * The "assetPrefix" here doesn't needs to be real as we doesn't load the page in the browser in this test,
+   * we only care about if all assets prefixed with the "assetPrefix" are having correct "crossOrigin".
+   */
+  assetPrefix: 'https://example.vercel.sh',
+
+  /**
+   * According to HTML5 Spec (https://html.spec.whatwg.org/multipage/urls-and-fetching.html#cors-settings-attributes),
+   * crossorigin="" and crossorigin="anonymous" has the same effect. And ReactDOM's preload methods (preload, preconnect, etc.)
+   * will prefer crossorigin="" to save bytes.
+   *
+   * So we use "use-credentials" here for easier testing.
+   */
+  crossOrigin: 'use-credentials',
+}
diff --git a/test/integration/app-config-crossorigin/test/index.test.ts b/test/integration/app-config-crossorigin/test/index.test.ts
@@ -0,0 +1,50 @@
+/* eslint-env jest */
+import { join } from 'path'
+import {
+  killApp,
+  findPort,
+  launchApp,
+  renderViaHTTP,
+  File,
+} from 'next-test-utils'
+import cheerio from 'cheerio'
+
+const appDir = join(__dirname, '../')
+
+describe('App crossOrigin config', () => {
+  let appPort
+  let app
+
+  it('should render correctly with assetPrefix: "/"', async () => {
+    try {
+      appPort = await findPort()
+      app = await launchApp(appDir, appPort)
+
+      const html = await renderViaHTTP(appPort, '/')
+
+      const $ = cheerio.load(html)
+
+      // Only potential external (assetPrefix) <script /> and <link /> should have crossorigin attribute
+      $(
+        'script[src*="https://example.vercel.sh"], link[href*="https://example.vercel.sh"]'
+      ).each((_, el) => {
+        const crossOrigin = $(el).attr('crossorigin')
+        expect(crossOrigin).toBe('use-credentials')
+      })
+
+      // Inline <script /> (including RSC payload) and <link /> should not have crossorigin attribute
+      $('script:not([src]), link:not([href])').each((_, el) => {
+        const crossOrigin = $(el).attr('crossorigin')
+        expect(crossOrigin).toBeUndefined()
+      })
+
+      // Same origin <script /> and <link /> should not have crossorigin attribute either
+      $('script[src^="/"], link[href^="/"]').each((_, el) => {
+        const crossOrigin = $(el).attr('crossorigin')
+        expect(crossOrigin).toBeUndefined()
+      })
+    } finally {
+      killApp(app)
+    }
+  })
+})