Add tests

test/e2e/app-dir/next-font.test.ts

@@ -230,4 +230,102 @@ describe('app dir next-font', () => {
       ).toBe('normal')
     })
   })
+
+  describe('preload', () => {
+    it('should preload correctly with server components', async () => {
+      const html = await renderViaHTTP(next.url, '/')
+      const $ = cheerio.load(html)
+
+      // Preconnect
+      expect($('link[rel="preconnect"]').length).toBe(1)
+      expect($('link[rel="preconnect"]').get(0).attribs).toEqual({
+        crossorigin: 'anonymous',
+        href: '/',
+        rel: 'preconnect',
+      })
+
+      expect($('link[as="font"]').length).toBe(3)
+      expect($('link[as="font"]').get(0).attribs).toEqual({
+        as: 'font',
+        crossorigin: 'anonymous',
+        href: '/_next/static/media/e9b9dc0d8ba35f48.p.woff2',
+        rel: 'preload',
+        type: 'font/woff2',
+      })
+      expect($('link[as="font"]').get(1).attribs).toEqual({
+        as: 'font',
+        crossorigin: 'anonymous',
+        href: '/_next/static/media/b2104791981359ae.p.woff2',
+        rel: 'preload',
+        type: 'font/woff2',
+      })
+      expect($('link[as="font"]').get(2).attribs).toEqual({
+        as: 'font',
+        crossorigin: 'anonymous',
+        href: '/_next/static/media/b61859a50be14c53.p.woff2',
+        rel: 'preload',
+        type: 'font/woff2',
+      })
+    })
+
+    it('should preload correctly with client components', async () => {
+      const html = await renderViaHTTP(next.url, '/client')
+      const $ = cheerio.load(html)
+
+      // Preconnect
+      expect($('link[rel="preconnect"]').length).toBe(1)
+      expect($('link[rel="preconnect"]').get(0).attribs).toEqual({
+        crossorigin: 'anonymous',
+        href: '/',
+        rel: 'preconnect',
+      })
+
+      expect($('link[as="font"]').length).toBe(3)
+      // From root layout
+      expect($('link[as="font"]').get(0).attribs).toEqual({
+        as: 'font',
+        crossorigin: 'anonymous',
+        href: '/_next/static/media/e9b9dc0d8ba35f48.p.woff2',
+        rel: 'preload',
+        type: 'font/woff2',
+      })
+
+      expect($('link[as="font"]').get(1).attribs).toEqual({
+        as: 'font',
+        crossorigin: 'anonymous',
+        href: '/_next/static/media/e1053f04babc7571.p.woff2',
+        rel: 'preload',
+        type: 'font/woff2',
+      })
+      expect($('link[as="font"]').get(2).attribs).toEqual({
+        as: 'font',
+        crossorigin: 'anonymous',
+        href: '/_next/static/media/feab2c68f2a8e9a4.p.woff2',
+        rel: 'preload',
+        type: 'font/woff2',
+      })
+    })
+
+    it('should add preconnect when no fonts are preloaded', async () => {
+      const html = await renderViaHTTP(next.url, '/without-preload')
+      const $ = cheerio.load(html)
+
+      expect($('link[rel="preconnect"]').length).toBe(1)
+      expect($('link[rel="preconnect"]').get(0).attribs).toEqual({
+        crossorigin: 'anonymous',
+        href: '/',
+        rel: 'preconnect',
+      })
+
+      expect($('link[as="font"]').length).toBe(0)
+    })
+
+    it("should not add preconnect when there's no fonts", async () => {
+      const html = await renderViaHTTP(next.url, '/without-fonts')
+      const $ = cheerio.load(html)
+
+      expect($('link[rel="preconnect"]').length).toBe(0)
+      expect($('link[as="font"]').length).toBe(0)
+    })
+  })
 })

test/e2e/app-dir/next-font/app/Comp.js → test/e2e/app-dir/next-font/app/(with-preloaded-fonts)/Comp.js

@@ -1,4 +1,4 @@
-import { font3 } from '../fonts/fonts'
+import font3 from '../../fonts/font3'
 
 export default function Component() {
   return (

test/e2e/app-dir/next-font/app/client/Comp.js → test/e2e/app-dir/next-font/app/(with-preloaded-fonts)/client/Comp.js

@@ -1,5 +1,5 @@
 'client'
-import { font6 } from '../../fonts/fonts'
+import font6 from '../../../fonts/font6'
 
 export default function Component() {
   return (

test/e2e/app-dir/next-font/app/client/layout.js → test/e2e/app-dir/next-font/app/(with-preloaded-fonts)/client/layout.js

@@ -1,5 +1,5 @@
 'client'
-import { font4 } from '../../fonts/fonts'
+import font4 from '../../../fonts/font4'
 
 export default function Root({ children }) {
   return (

test/e2e/app-dir/next-font/app/client/page.js → test/e2e/app-dir/next-font/app/(with-preloaded-fonts)/client/page.js

@@ -1,6 +1,6 @@
 'client'
 import Comp from './Comp'
-import { font5 } from '../../fonts/fonts'
+import font5 from '../../../fonts/font5'
 
 export default function HomePage() {
   return (

test/e2e/app-dir/next-font/app/layout.js → test/e2e/app-dir/next-font/app/(with-preloaded-fonts)/layout.js

@@ -1,4 +1,4 @@
-import { font1 } from '../fonts/fonts'
+import font1 from '../../fonts/font1'
 
 export default function Root({ children }) {
   return (

test/e2e/app-dir/next-font/app/page.js → test/e2e/app-dir/next-font/app/(with-preloaded-fonts)/page.js

@@ -1,5 +1,5 @@
 import Comp from './Comp'
-import { font2 } from '../fonts/fonts'
+import font2 from '../../fonts/font2'
 
 export default function HomePage() {
   return (

test/e2e/app-dir/next-font/app/without-fonts/layout.js

@@ -0,0 +1,10 @@
+export default function Root({ children }) {
+  return (
+    <html>
+      <head>
+        <title>Hello World</title>
+      </head>
+      <body>{children}</body>
+    </html>
+  )
+}

test/e2e/app-dir/next-font/app/without-fonts/page.js

@@ -0,0 +1,3 @@
+export default function HomePage() {
+  return <p>Page</p>
+}

test/e2e/app-dir/next-font/app/without-preload/layout.js

@@ -0,0 +1,10 @@
+export default function Root({ children }) {
+  return (
+    <html>
+      <head>
+        <title>Hello World</title>
+      </head>
+      <body>{children}</body>
+    </html>
+  )
+}

test/e2e/app-dir/next-font/app/without-preload/page.js

@@ -0,0 +1,5 @@
+import font5 from '../../fonts/font5'
+
+export default function HomePage() {
+  return <p className={font5.className}>Page</p>
+}

test/e2e/app-dir/next-font/fonts/font1.js

@@ -0,0 +1,5 @@
+import localFont from '@next/font/local'
+
+const font1 = localFont({ src: './font1.woff2', variable: '--font-1' })
+
+export default font1

test/e2e/app-dir/next-font/fonts/font2.js

@@ -0,0 +1,5 @@
+import localFont from '@next/font/local'
+
+export const font2 = localFont({ src: './font2.woff2', variable: '--font-2' })
+
+export default font2

test/e2e/app-dir/next-font/fonts/font3.js

@@ -0,0 +1,9 @@
+import localFont from '@next/font/local'
+
+export const font3 = localFont({
+  src: './font3.woff2',
+  weight: '900',
+  style: 'italic',
+})
+
+export default font3

test/e2e/app-dir/next-font/fonts/font4.js

@@ -0,0 +1,5 @@
+import localFont from '@next/font/local'
+
+export const font4 = localFont({ src: './font4.woff2', weight: '100' })
+
+export default font4

test/e2e/app-dir/next-font/fonts/font5.js

@@ -0,0 +1,9 @@
+import localFont from '@next/font/local'
+
+export const font5 = localFont({
+  src: './font5.woff2',
+  style: 'italic',
+  preload: false,
+})
+
+export default font5

test/e2e/app-dir/next-font/fonts/font6.js

@@ -0,0 +1,5 @@
+import localFont from '@next/font/local'
+
+export const font6 = localFont({ src: './font6.woff2' })
+
+export default font6