hello world
- - ) -} diff --git a/test/e2e/app-dir/next-font/app-old/(preconnect)/no-preconnect/styles.module.css b/test/e2e/app-dir/next-font/app-old/(preconnect)/no-preconnect/styles.module.css deleted file mode 100644 index c8cf8ee5c5b2c..0000000000000 --- a/test/e2e/app-dir/next-font/app-old/(preconnect)/no-preconnect/styles.module.css +++ /dev/null @@ -1,3 +0,0 @@ -.p { - color: wheat; -} diff --git a/test/e2e/app-dir/next-font/app-old/(preconnect)/preconnect-component/comp-font-merriweather.woff2 b/test/e2e/app-dir/next-font/app-old/(preconnect)/preconnect-component/comp-font-merriweather.woff2 deleted file mode 100644 index 74cebc52c1c56..0000000000000 Binary files a/test/e2e/app-dir/next-font/app-old/(preconnect)/preconnect-component/comp-font-merriweather.woff2 and /dev/null differ diff --git a/test/e2e/app-dir/next-font/app-old/(preconnect)/preconnect-component/comp.js b/test/e2e/app-dir/next-font/app-old/(preconnect)/preconnect-component/comp.js deleted file mode 100644 index 2634ec525600e..0000000000000 --- a/test/e2e/app-dir/next-font/app-old/(preconnect)/preconnect-component/comp.js +++ /dev/null @@ -1,12 +0,0 @@ -import localFont from '@next/font/local' - -const componentFont = localFont({ - src: './comp-font-merriweather.woff2', - preload: false, -}) - -export default function Component() { - return ( -{JSON.stringify(componentFont)}
- ) -} diff --git a/test/e2e/app-dir/next-font/app-old/(preconnect)/preconnect-component/page.js b/test/e2e/app-dir/next-font/app-old/(preconnect)/preconnect-component/page.js deleted file mode 100644 index 2bd70262127ef..0000000000000 --- a/test/e2e/app-dir/next-font/app-old/(preconnect)/preconnect-component/page.js +++ /dev/null @@ -1,5 +0,0 @@ -import Comp from './comp' - -export default function Page() { - return{JSON.stringify(layoutFont)}
- {children} - - ) -} diff --git a/test/e2e/app-dir/next-font/app-old/(preconnect)/preconnect-layout/page.js b/test/e2e/app-dir/next-font/app-old/(preconnect)/preconnect-layout/page.js deleted file mode 100644 index c17431379f962..0000000000000 --- a/test/e2e/app-dir/next-font/app-old/(preconnect)/preconnect-layout/page.js +++ /dev/null @@ -1,3 +0,0 @@ -export default function Page() { - return null -} diff --git a/test/e2e/app-dir/next-font/app-old/(preconnect)/preconnect-page/page-font-ubuntu-regular.woff2 b/test/e2e/app-dir/next-font/app-old/(preconnect)/preconnect-page/page-font-ubuntu-regular.woff2 deleted file mode 100644 index 1640b1387a9f9..0000000000000 Binary files a/test/e2e/app-dir/next-font/app-old/(preconnect)/preconnect-page/page-font-ubuntu-regular.woff2 and /dev/null differ diff --git a/test/e2e/app-dir/next-font/app-old/(preconnect)/preconnect-page/page.js b/test/e2e/app-dir/next-font/app-old/(preconnect)/preconnect-page/page.js deleted file mode 100644 index 2d9de20c39d47..0000000000000 --- a/test/e2e/app-dir/next-font/app-old/(preconnect)/preconnect-page/page.js +++ /dev/null @@ -1,15 +0,0 @@ -'use client' -import localFont from '@next/font/local' - -const pageFont = localFont({ - src: './page-font-ubuntu-regular.woff2', - preload: false, -}) - -export default function Page() { - return ( - <> -{JSON.stringify(pageFont)}
- - ) -} diff --git a/test/e2e/app-dir/next-font/app-old/(preload)/Comp.js b/test/e2e/app-dir/next-font/app-old/(preload)/Comp.js deleted file mode 100644 index 07a0875d88947..0000000000000 --- a/test/e2e/app-dir/next-font/app-old/(preload)/Comp.js +++ /dev/null @@ -1,9 +0,0 @@ -import { font3 } from '../../fonts' - -export default function Component() { - return ( -- {JSON.stringify(font3)} -
- ) -} diff --git a/test/e2e/app-dir/next-font/app-old/(preload)/client/Comp.js b/test/e2e/app-dir/next-font/app-old/(preload)/client/Comp.js deleted file mode 100644 index 2679352a57119..0000000000000 --- a/test/e2e/app-dir/next-font/app-old/(preload)/client/Comp.js +++ /dev/null @@ -1,10 +0,0 @@ -'use client' -import { font6 } from '../../../fonts' - -export default function Component() { - return ( -- {JSON.stringify(font6)} -
- ) -} diff --git a/test/e2e/app-dir/next-font/app-old/(preload)/client/layout.js b/test/e2e/app-dir/next-font/app-old/(preload)/client/layout.js deleted file mode 100644 index 83816c21a59b9..0000000000000 --- a/test/e2e/app-dir/next-font/app-old/(preload)/client/layout.js +++ /dev/null @@ -1,13 +0,0 @@ -'use client' -import { font4 } from '../../../fonts' - -export default function Root({ children }) { - return ( - <> -- {JSON.stringify(font4)} -
- {children} - - ) -} diff --git a/test/e2e/app-dir/next-font/app-old/(preload)/client/page.js b/test/e2e/app-dir/next-font/app-old/(preload)/client/page.js deleted file mode 100644 index 9606c96a020d9..0000000000000 --- a/test/e2e/app-dir/next-font/app-old/(preload)/client/page.js +++ /dev/null @@ -1,14 +0,0 @@ -'use client' -import Comp from './Comp' -import { font5 } from '../../../fonts' - -export default function HomePage() { - return ( - <> -- {JSON.stringify(font5)} -
-- {JSON.stringify(layoutFont)} -
- {children} - - ) -} diff --git a/test/e2e/app-dir/next-font/app-old/(preload)/layout-with-fonts/page.js b/test/e2e/app-dir/next-font/app-old/(preload)/layout-with-fonts/page.js deleted file mode 100644 index 338cd4773f66c..0000000000000 --- a/test/e2e/app-dir/next-font/app-old/(preload)/layout-with-fonts/page.js +++ /dev/null @@ -1,3 +0,0 @@ -export default function HomePage() { - returnOnly layout
-} diff --git a/test/e2e/app-dir/next-font/app-old/(preload)/layout.js b/test/e2e/app-dir/next-font/app-old/(preload)/layout.js deleted file mode 100644 index 82758ca4f485d..0000000000000 --- a/test/e2e/app-dir/next-font/app-old/(preload)/layout.js +++ /dev/null @@ -1,17 +0,0 @@ -import { font1 } from '../../fonts' - -export default function Root({ children }) { - return ( - - -- {JSON.stringify(font1)} -
- {children} - - - ) -} diff --git a/test/e2e/app-dir/next-font/app-old/(preload)/page-with-fonts/layout.js b/test/e2e/app-dir/next-font/app-old/(preload)/page-with-fonts/layout.js deleted file mode 100644 index f927b11a8caad..0000000000000 --- a/test/e2e/app-dir/next-font/app-old/(preload)/page-with-fonts/layout.js +++ /dev/null @@ -1,4 +0,0 @@ -'use client' -export default function Layout({ children }) { - return children -} diff --git a/test/e2e/app-dir/next-font/app-old/(preload)/page-with-fonts/page-font-raleway-thin.woff2 b/test/e2e/app-dir/next-font/app-old/(preload)/page-with-fonts/page-font-raleway-thin.woff2 deleted file mode 100644 index 026545486b932..0000000000000 Binary files a/test/e2e/app-dir/next-font/app-old/(preload)/page-with-fonts/page-font-raleway-thin.woff2 and /dev/null differ diff --git a/test/e2e/app-dir/next-font/app-old/(preload)/page-with-fonts/page.js b/test/e2e/app-dir/next-font/app-old/(preload)/page-with-fonts/page.js deleted file mode 100644 index 109e8b8be0fc7..0000000000000 --- a/test/e2e/app-dir/next-font/app-old/(preload)/page-with-fonts/page.js +++ /dev/null @@ -1,11 +0,0 @@ -import localFont from '@next/font/local' - -const pageFont = localFont({ src: './page-font-raleway-thin.woff2' }) - -export default function HomePage() { - return ( -- {JSON.stringify(pageFont)} -
- ) -} diff --git a/test/e2e/app-dir/next-font/app-old/(preload)/page.js b/test/e2e/app-dir/next-font/app-old/(preload)/page.js deleted file mode 100644 index 64e1768d9e36c..0000000000000 --- a/test/e2e/app-dir/next-font/app-old/(preload)/page.js +++ /dev/null @@ -1,16 +0,0 @@ -import Comp from './Comp' -import { font1, font2 } from '../../fonts' - -export default function HomePage() { - return ( - <> -Hello world
-- {JSON.stringify(font2)} -
-- {JSON.stringify(font1)} -
- ) -} diff --git a/test/e2e/app-dir/next-font/app-old/navigation/font-noto-sans.woff2 b/test/e2e/app-dir/next-font/app-old/navigation/font-noto-sans.woff2 deleted file mode 100644 index 4c6991f869b5b..0000000000000 Binary files a/test/e2e/app-dir/next-font/app-old/navigation/font-noto-sans.woff2 and /dev/null differ diff --git a/test/e2e/app-dir/next-font/app-old/navigation/font.js b/test/e2e/app-dir/next-font/app-old/navigation/font.js deleted file mode 100644 index 23b4523b9ea5f..0000000000000 --- a/test/e2e/app-dir/next-font/app-old/navigation/font.js +++ /dev/null @@ -1,3 +0,0 @@ -import localFont from '@next/font/local' - -export const font = localFont({ src: './font-noto-sans.woff2' }) diff --git a/test/e2e/app-dir/next-font/app-old/navigation/layout.js b/test/e2e/app-dir/next-font/app-old/navigation/layout.js deleted file mode 100644 index 94510513cf944..0000000000000 --- a/test/e2e/app-dir/next-font/app-old/navigation/layout.js +++ /dev/null @@ -1,12 +0,0 @@ -import { font } from './font' - -export default function RootLayout({ children }) { - return ( - - -LAYOUT1
- {children} - - - ) -} diff --git a/test/e2e/app-dir/next-font/app-old/navigation/page-with-same-font/page.js b/test/e2e/app-dir/next-font/app-old/navigation/page-with-same-font/page.js deleted file mode 100644 index 1c72f6175dc30..0000000000000 --- a/test/e2e/app-dir/next-font/app-old/navigation/page-with-same-font/page.js +++ /dev/null @@ -1,9 +0,0 @@ -import { font } from '../font' - -export default function Page() { - return ( -- Page with same font -
- ) -} diff --git a/test/e2e/app-dir/next-font/app-old/navigation/page.js b/test/e2e/app-dir/next-font/app-old/navigation/page.js deleted file mode 100644 index 2b8721e190b0a..0000000000000 --- a/test/e2e/app-dir/next-font/app-old/navigation/page.js +++ /dev/null @@ -1,11 +0,0 @@ -import Link from 'next/link' - -export default function Page() { - return ( - <> - - Go to page with same font - - - ) -} diff --git a/test/e2e/app-dir/next-font/next-font.test.ts b/test/e2e/app-dir/next-font/next-font.test.ts index a42906e84d32c..ae0119df149ed 100644 --- a/test/e2e/app-dir/next-font/next-font.test.ts +++ b/test/e2e/app-dir/next-font/next-font.test.ts @@ -18,481 +18,470 @@ const getAttrs = (elems: Cheerio) => .sort((a, b) => (a.href < b.href ? -1 : 1)) describe('app dir - next/font', () => { - for (const fixture of ['app', 'app-old']) { - describe(fixture, () => { - // Turbopack only support `next/font` as `@next/font` is going to be removed in the next major version. - if (process.env.TURBOPACK && fixture === 'app-old') { - return - } - - describe('app dir - next-font', () => { - const { - next, - isNextDev: isDev, - skipped, - } = nextTestSetup({ - files: { - app: new FileRef(join(__dirname, fixture)), - fonts: new FileRef(join(__dirname, 'fonts')), - node_modules: new FileRef(join(__dirname, 'node_modules')), - 'next.config.js': new FileRef(join(__dirname, 'next.config.js')), + describe('app dir - next-font', () => { + const { + next, + isNextDev: isDev, + skipped, + } = nextTestSetup({ + files: { + app: new FileRef(join(__dirname, 'app')), + fonts: new FileRef(join(__dirname, 'fonts')), + node_modules: new FileRef(join(__dirname, 'node_modules')), + 'next.config.js': new FileRef(join(__dirname, 'next.config.js')), + }, + dependencies: { + '@next/font': 'canary', + }, + skipDeployment: true, + }) + + if (skipped) { + return + } + + describe('import values', () => { + it('should have correct values at /', async () => { + const $ = await next.render$('/') + + // layout + expect(JSON.parse($('#root-layout').text())).toEqual({ + className: expect.stringMatching( + process.env.TURBOPACK ? /.*_className$/ : /^__className_.*/ + ), + variable: expect.stringMatching( + process.env.TURBOPACK ? /.*_variable$/ : /^__variable_.*/ + ), + style: { + fontFamily: expect.stringMatching( + /^'__font1_.{6}', '__font1_Fallback_.{6}'$/ + ), }, - dependencies: { - '@next/font': 'canary', + }) + // page + expect(JSON.parse($('#root-page').text())).toEqual({ + className: expect.stringMatching( + process.env.TURBOPACK ? /.*_className$/ : /^__className_.*/ + ), + variable: expect.stringMatching( + process.env.TURBOPACK ? /.*_variable$/ : /^__variable_.*/ + ), + style: { + fontFamily: expect.stringMatching( + /^'__font2_.{6}', '__font2_Fallback_.{6}'$/ + ), }, - skipDeployment: true, }) + // Comp + expect(JSON.parse($('#root-comp').text())).toEqual({ + className: expect.stringMatching( + process.env.TURBOPACK ? /.*_className$/ : /^__className_.*/ + ), + style: { + fontFamily: expect.stringMatching( + /^'__font3_.{6}', '__font3_Fallback_.{6}'$/ + ), + fontStyle: 'italic', + fontWeight: 900, + }, + }) + }) - if (skipped) { - return - } - - describe('import values', () => { - it('should have correct values at /', async () => { - const $ = await next.render$('/') - - // layout - expect(JSON.parse($('#root-layout').text())).toEqual({ - className: expect.stringMatching( - process.env.TURBOPACK ? /.*_className$/ : /^__className_.*/ - ), - variable: expect.stringMatching( - process.env.TURBOPACK ? /.*_variable$/ : /^__variable_.*/ - ), - style: { - fontFamily: expect.stringMatching( - /^'__font1_.{6}', '__font1_Fallback_.{6}'$/ - ), - }, - }) - // page - expect(JSON.parse($('#root-page').text())).toEqual({ - className: expect.stringMatching( - process.env.TURBOPACK ? /.*_className$/ : /^__className_.*/ - ), - variable: expect.stringMatching( - process.env.TURBOPACK ? /.*_variable$/ : /^__variable_.*/ - ), - style: { - fontFamily: expect.stringMatching( - /^'__font2_.{6}', '__font2_Fallback_.{6}'$/ - ), - }, - }) - // Comp - expect(JSON.parse($('#root-comp').text())).toEqual({ - className: expect.stringMatching( - process.env.TURBOPACK ? /.*_className$/ : /^__className_.*/ - ), - style: { - fontFamily: expect.stringMatching( - /^'__font3_.{6}', '__font3_Fallback_.{6}'$/ - ), - fontStyle: 'italic', - fontWeight: 900, - }, - }) - }) - - it('should have correct values at /client', async () => { - const $ = await next.render$('/client') - - // root layout - expect(JSON.parse($('#root-layout').text())).toEqual({ - className: expect.stringMatching( - process.env.TURBOPACK ? /.*_className$/ : /^__className_.*/ - ), - variable: expect.stringMatching( - process.env.TURBOPACK ? /.*_variable$/ : /^__variable_.*/ - ), - style: { - fontFamily: expect.stringMatching( - /^'__font1_.{6}', '__font1_Fallback_.{6}'$/ - ), - }, - }) - - // layout - expect(JSON.parse($('#client-layout').text())).toEqual({ - className: expect.stringMatching( - process.env.TURBOPACK ? /.*_className$/ : /^__className_.*/ - ), - style: { - fontFamily: expect.stringMatching( - /^'__font4_.{6}', '__font4_Fallback_.{6}'$/ - ), - fontWeight: 100, - }, - }) - // page - expect(JSON.parse($('#client-page').text())).toEqual({ - className: expect.stringMatching( - process.env.TURBOPACK ? /.*_className$/ : /^__className_.*/ - ), - style: { - fontFamily: expect.stringMatching( - /^'__font5_.{6}', '__font5_Fallback_.{6}'$/ - ), - fontStyle: 'italic', - }, - }) - // Comp - expect(JSON.parse($('#client-comp').text())).toEqual({ - className: expect.stringMatching( - process.env.TURBOPACK ? /.*_className$/ : /^__className_.*/ - ), - style: { - fontFamily: expect.stringMatching( - /^'__font6_.{6}', '__font6_Fallback_.{6}'$/ - ), - }, - }) - }) - - it('should transform code in node_modules', async () => { - const $ = await next.render$('/third-party') - expect(JSON.parse($('#third-party-page').text())).toEqual({ - className: expect.stringMatching( - process.env.TURBOPACK ? /.*_className$/ : /^__className_.*/ - ), - style: { - fontFamily: expect.stringMatching( - /^'__font1_.{6}', '__font1_Fallback_.{6}'$/ - ), - }, - variable: expect.stringMatching( - process.env.TURBOPACK ? /.*_variable$/ : /^__variable_.*/ - ), - }) - }) + it('should have correct values at /client', async () => { + const $ = await next.render$('/client') + + // root layout + expect(JSON.parse($('#root-layout').text())).toEqual({ + className: expect.stringMatching( + process.env.TURBOPACK ? /.*_className$/ : /^__className_.*/ + ), + variable: expect.stringMatching( + process.env.TURBOPACK ? /.*_variable$/ : /^__variable_.*/ + ), + style: { + fontFamily: expect.stringMatching( + /^'__font1_.{6}', '__font1_Fallback_.{6}'$/ + ), + }, }) - describe('computed styles', () => { - it('should have correct styles at /', async () => { - const browser = await next.browser('/') + // layout + expect(JSON.parse($('#client-layout').text())).toEqual({ + className: expect.stringMatching( + process.env.TURBOPACK ? /.*_className$/ : /^__className_.*/ + ), + style: { + fontFamily: expect.stringMatching( + /^'__font4_.{6}', '__font4_Fallback_.{6}'$/ + ), + fontWeight: 100, + }, + }) + // page + expect(JSON.parse($('#client-page').text())).toEqual({ + className: expect.stringMatching( + process.env.TURBOPACK ? /.*_className$/ : /^__className_.*/ + ), + style: { + fontFamily: expect.stringMatching( + /^'__font5_.{6}', '__font5_Fallback_.{6}'$/ + ), + fontStyle: 'italic', + }, + }) + // Comp + expect(JSON.parse($('#client-comp').text())).toEqual({ + className: expect.stringMatching( + process.env.TURBOPACK ? /.*_className$/ : /^__className_.*/ + ), + style: { + fontFamily: expect.stringMatching( + /^'__font6_.{6}', '__font6_Fallback_.{6}'$/ + ), + }, + }) + }) - // layout - expect( - await browser.eval( - 'getComputedStyle(document.querySelector("#root-layout")).fontFamily' - ) - ).toMatch(/^__font1_.{6}, __font1_Fallback_.{6}$/) - expect( - await browser.eval( - 'getComputedStyle(document.querySelector("#root-layout")).fontWeight' - ) - ).toBe('400') - expect( - await browser.eval( - 'getComputedStyle(document.querySelector("#root-layout")).fontStyle' - ) - ).toBe('normal') + it('should transform code in node_modules', async () => { + const $ = await next.render$('/third-party') + expect(JSON.parse($('#third-party-page').text())).toEqual({ + className: expect.stringMatching( + process.env.TURBOPACK ? /.*_className$/ : /^__className_.*/ + ), + style: { + fontFamily: expect.stringMatching( + /^'__font1_.{6}', '__font1_Fallback_.{6}'$/ + ), + }, + variable: expect.stringMatching( + process.env.TURBOPACK ? /.*_variable$/ : /^__variable_.*/ + ), + }) + }) + }) - // page - expect( - await browser.eval( - 'getComputedStyle(document.querySelector("#root-page")).fontFamily' - ) - ).toMatch(/^__font2_.{6}, __font2_Fallback_.{6}$/) - expect( - await browser.eval( - 'getComputedStyle(document.querySelector("#root-page")).fontWeight' - ) - ).toBe('400') - expect( - await browser.eval( - 'getComputedStyle(document.querySelector("#root-page")).fontStyle' - ) - ).toBe('normal') + describe('computed styles', () => { + it('should have correct styles at /', async () => { + const browser = await next.browser('/') + + // layout + expect( + await browser.eval( + 'getComputedStyle(document.querySelector("#root-layout")).fontFamily' + ) + ).toMatch(/^__font1_.{6}, __font1_Fallback_.{6}$/) + expect( + await browser.eval( + 'getComputedStyle(document.querySelector("#root-layout")).fontWeight' + ) + ).toBe('400') + expect( + await browser.eval( + 'getComputedStyle(document.querySelector("#root-layout")).fontStyle' + ) + ).toBe('normal') + + // page + expect( + await browser.eval( + 'getComputedStyle(document.querySelector("#root-page")).fontFamily' + ) + ).toMatch(/^__font2_.{6}, __font2_Fallback_.{6}$/) + expect( + await browser.eval( + 'getComputedStyle(document.querySelector("#root-page")).fontWeight' + ) + ).toBe('400') + expect( + await browser.eval( + 'getComputedStyle(document.querySelector("#root-page")).fontStyle' + ) + ).toBe('normal') + + // Comp + expect( + await browser.eval( + 'getComputedStyle(document.querySelector("#root-comp")).fontFamily' + ) + ).toMatch(/^__font3_.{6}, __font3_Fallback_.{6}$/) + expect( + await browser.eval( + 'getComputedStyle(document.querySelector("#root-comp")).fontWeight' + ) + ).toBe('900') + expect( + await browser.eval( + 'getComputedStyle(document.querySelector("#root-comp")).fontStyle' + ) + ).toBe('italic') + }) - // Comp - expect( - await browser.eval( - 'getComputedStyle(document.querySelector("#root-comp")).fontFamily' - ) - ).toMatch(/^__font3_.{6}, __font3_Fallback_.{6}$/) - expect( - await browser.eval( - 'getComputedStyle(document.querySelector("#root-comp")).fontWeight' - ) - ).toBe('900') - expect( - await browser.eval( - 'getComputedStyle(document.querySelector("#root-comp")).fontStyle' - ) - ).toBe('italic') - }) + it('should have correct styles at /client', async () => { + const browser = await next.browser('/client') + + // root layout + expect( + await browser.eval( + 'getComputedStyle(document.querySelector("#root-layout")).fontFamily' + ) + ).toMatch(/^__font1_.{6}, __font1_Fallback_.{6}$/) + expect( + await browser.eval( + 'getComputedStyle(document.querySelector("#root-layout")).fontWeight' + ) + ).toBe('400') + expect( + await browser.eval( + 'getComputedStyle(document.querySelector("#root-layout")).fontStyle' + ) + ).toBe('normal') + + // layout + expect( + await browser.eval( + 'getComputedStyle(document.querySelector("#client-layout")).fontFamily' + ) + ).toMatch(/^__font4_.{6}, __font4_Fallback_.{6}$/) + expect( + await browser.eval( + 'getComputedStyle(document.querySelector("#client-layout")).fontWeight' + ) + ).toBe('100') + expect( + await browser.eval( + 'getComputedStyle(document.querySelector("#client-layout")).fontStyle' + ) + ).toBe('normal') + + // page + expect( + await browser.eval( + 'getComputedStyle(document.querySelector("#client-page")).fontFamily' + ) + ).toMatch(/^__font5_.{6}, __font5_Fallback_.{6}$/) + expect( + await browser.eval( + 'getComputedStyle(document.querySelector("#client-page")).fontWeight' + ) + ).toBe('400') + expect( + await browser.eval( + 'getComputedStyle(document.querySelector("#client-page")).fontStyle' + ) + ).toBe('italic') + + // Comp + expect( + await browser.eval( + 'getComputedStyle(document.querySelector("#client-comp")).fontFamily' + ) + ).toMatch(/^__font6_.{6}, __font6_Fallback_.{6}$/) + expect( + await browser.eval( + 'getComputedStyle(document.querySelector("#client-comp")).fontWeight' + ) + ).toBe('400') + expect( + await browser.eval( + 'getComputedStyle(document.querySelector("#client-comp")).fontStyle' + ) + ).toBe('normal') + }) + }) - it('should have correct styles at /client', async () => { - const browser = await next.browser('/client') + if (!isDev) { + describe('preload', () => { + it('should preload correctly with server components', async () => { + const result = await next.fetch('/') + const headers = result.headers + + const html = await result.text() + const $ = cheerio.load(html) + + // Preconnect + expect($('link[rel="preconnect"]').length).toBe(0) + + const fontPreloadlinksInHeaders = headers + .get('link') + .split(', ') + .filter((link) => link.match(/as=.*font/)) + expect(fontPreloadlinksInHeaders.length).toBeGreaterThan(2) + for (const link of fontPreloadlinksInHeaders) { + expect(link).toMatch(/<[^>]*?_next[^>]*?\.woff2>/) + expect(link).toMatch(/rel=.*preload/) + expect(link).toMatch(/crossorigin=""/) + } + + const items = getAttrs($('link[as="font"]')) + + // We expect the font preloads to be in headers exclusively + expect(items.length).toBe(0) + }) - // root layout - expect( - await browser.eval( - 'getComputedStyle(document.querySelector("#root-layout")).fontFamily' - ) - ).toMatch(/^__font1_.{6}, __font1_Fallback_.{6}$/) - expect( - await browser.eval( - 'getComputedStyle(document.querySelector("#root-layout")).fontWeight' - ) - ).toBe('400') - expect( - await browser.eval( - 'getComputedStyle(document.querySelector("#root-layout")).fontStyle' - ) - ).toBe('normal') + it('should preload correctly with client components', async () => { + const $ = await next.render$('/client') - // layout - expect( - await browser.eval( - 'getComputedStyle(document.querySelector("#client-layout")).fontFamily' - ) - ).toMatch(/^__font4_.{6}, __font4_Fallback_.{6}$/) - expect( - await browser.eval( - 'getComputedStyle(document.querySelector("#client-layout")).fontWeight' - ) - ).toBe('100') - expect( - await browser.eval( - 'getComputedStyle(document.querySelector("#client-layout")).fontStyle' - ) - ).toBe('normal') + // Preconnect + expect($('link[rel="preconnect"]').length).toBe(0) - // page - expect( - await browser.eval( - 'getComputedStyle(document.querySelector("#client-page")).fontFamily' - ) - ).toMatch(/^__font5_.{6}, __font5_Fallback_.{6}$/) - expect( - await browser.eval( - 'getComputedStyle(document.querySelector("#client-page")).fontWeight' - ) - ).toBe('400') - expect( - await browser.eval( - 'getComputedStyle(document.querySelector("#client-page")).fontStyle' - ) - ).toBe('italic') + const links = getAttrs($('link[as="font"]')) - // Comp - expect( - await browser.eval( - 'getComputedStyle(document.querySelector("#client-comp")).fontFamily' - ) - ).toMatch(/^__font6_.{6}, __font6_Fallback_.{6}$/) - expect( - await browser.eval( - 'getComputedStyle(document.querySelector("#client-comp")).fontWeight' + for (const link of links) { + expect(link.as).toBe('font') + expect(link.crossorigin).toBe('') + if (process.env.TURBOPACK) { + expect(link.href).toMatch( + /\/_next\/static\/media\/(.*)-s.p.(.*)\.woff2/ ) - ).toBe('400') - expect( - await browser.eval( - 'getComputedStyle(document.querySelector("#client-comp")).fontStyle' + } else { + expect(link.href).toMatch( + /\/_next\/static\/media\/(.*)-s.p.woff2/ ) - ).toBe('normal') - }) + } + expect(link.rel).toBe('preload') + expect(link.type).toBe('font/woff2') + } }) - if (!isDev) { - describe('preload', () => { - it('should preload correctly with server components', async () => { - const result = await next.fetch('/') - const headers = result.headers - - const html = await result.text() - const $ = cheerio.load(html) - - // Preconnect - expect($('link[rel="preconnect"]').length).toBe(0) - - const fontPreloadlinksInHeaders = headers - .get('link') - .split(', ') - .filter((link) => link.match(/as=.*font/)) - expect(fontPreloadlinksInHeaders.length).toBeGreaterThan(2) - for (const link of fontPreloadlinksInHeaders) { - expect(link).toMatch(/<[^>]*?_next[^>]*?\.woff2>/) - expect(link).toMatch(/rel=.*preload/) - expect(link).toMatch(/crossorigin=""/) - } - - const items = getAttrs($('link[as="font"]')) - - // We expect the font preloads to be in headers exclusively - expect(items.length).toBe(0) - }) - - it('should preload correctly with client components', async () => { - const $ = await next.render$('/client') - - // Preconnect - expect($('link[rel="preconnect"]').length).toBe(0) - - const links = getAttrs($('link[as="font"]')) - - for (const link of links) { - expect(link.as).toBe('font') - expect(link.crossorigin).toBe('') - if (process.env.TURBOPACK) { - expect(link.href).toMatch( - /\/_next\/static\/media\/(.*)-s.p.(.*)\.woff2/ - ) - } else { - expect(link.href).toMatch( - /\/_next\/static\/media\/(.*)-s.p.woff2/ - ) - } - expect(link.rel).toBe('preload') - expect(link.type).toBe('font/woff2') - } - }) - - it('should preload correctly with layout using fonts', async () => { - const $ = await next.render$('/layout-with-fonts') - - // Preconnect - expect($('link[rel="preconnect"]').length).toBe(0) - - const links = getAttrs($('link[as="font"]')) - - for (const link of links) { - expect(link.as).toBe('font') - expect(link.crossorigin).toBe('') - if (process.env.TURBOPACK) { - expect(link.href).toMatch( - /\/_next\/static\/media\/(.*)-s.p.(.*)\.woff2/ - ) - } else { - expect(link.href).toMatch( - /\/_next\/static\/media\/(.*)-s.p.woff2/ - ) - } - expect(link.rel).toBe('preload') - expect(link.type).toBe('font/woff2') - } - }) + it('should preload correctly with layout using fonts', async () => { + const $ = await next.render$('/layout-with-fonts') - it('should preload correctly with page using fonts', async () => { - const $ = await next.render$('/page-with-fonts') - - // Preconnect - expect($('link[rel="preconnect"]').length).toBe(0) - - const links = getAttrs($('link[as="font"]')) - - for (const link of links) { - expect(link.as).toBe('font') - expect(link.crossorigin).toBe('') - if (process.env.TURBOPACK) { - expect(link.href).toMatch( - /\/_next\/static\/media\/(.*)-s.p.(.*)\.woff2/ - ) - } else { - expect(link.href).toMatch( - /\/_next\/static\/media\/(.*)-s.p.woff2/ - ) - } - expect(link.rel).toBe('preload') - expect(link.type).toBe('font/woff2') - } - }) - }) - - describe('preconnect', () => { - it.each([['page'], ['layout'], ['component']])( - 'should add preconnect when preloading is disabled in %s', - async (type: string) => { - const $ = await next.render$(`/preconnect-${type}`) - - // Preconnect - expect($('link[rel="preconnect"]').length).toBe(1) - expect($('link[rel="preconnect"]').get(0).attribs).toEqual({ - crossorigin: '', - href: '/', - rel: 'preconnect', - }) - // Preload - expect($('link[as="font"]').length).toBe(0) - } - ) + // Preconnect + expect($('link[rel="preconnect"]').length).toBe(0) - it('should not preconnect when css is used but no fonts', async () => { - const $ = await next.render$('/no-preconnect') + const links = getAttrs($('link[as="font"]')) - // Preconnect - expect($('link[rel="preconnect"]').length).toBe(0) - // Preload - expect(getAttrs($('link[as="font"]'))).toEqual([]) - }) - }) - } - - describe('navigation', () => { - it('should not have duplicate preload tags on navigation', async () => { - const browser = await next.browser('/navigation') - - // Before navigation, root layout imports the font - const preloadBeforeNavigation = - await browser.elementsByCss('link[as="font"]') - expect(preloadBeforeNavigation.length).toBe(1) - const href = await preloadBeforeNavigation[0].getAttribute('href') + for (const link of links) { + expect(link.as).toBe('font') + expect(link.crossorigin).toBe('') if (process.env.TURBOPACK) { - expect(href).toMatch( - /\/_next\/static\/media\/(.*)-s\.p\.(.*)\.woff2/ + expect(link.href).toMatch( + /\/_next\/static\/media\/(.*)-s.p.(.*)\.woff2/ ) } else { - expect(href).toMatch(/\/_next\/static\/media\/(.*)-s\.p\.woff2/) + expect(link.href).toMatch( + /\/_next\/static\/media\/(.*)-s.p.woff2/ + ) } + expect(link.rel).toBe('preload') + expect(link.type).toBe('font/woff2') + } + }) + + it('should preload correctly with page using fonts', async () => { + const $ = await next.render$('/page-with-fonts') - // Navigate to a page that also imports that font - await browser.elementByCss('a').click() - await browser.waitForElementByCss('#page-with-same-font') + // Preconnect + expect($('link[rel="preconnect"]').length).toBe(0) - // After navigating - const preloadAfterNavigation = - await browser.elementsByCss('link[as="font"]') - expect(preloadAfterNavigation.length).toBe(1) + const links = getAttrs($('link[as="font"]')) - const href2 = await preloadAfterNavigation[0].getAttribute('href') + for (const link of links) { + expect(link.as).toBe('font') + expect(link.crossorigin).toBe('') if (process.env.TURBOPACK) { - expect(href2).toMatch( - /\/_next\/static\/media\/(.*)-s\.p\.(.*)\.woff2/ + expect(link.href).toMatch( + /\/_next\/static\/media\/(.*)-s.p.(.*)\.woff2/ ) } else { - expect(href2).toMatch(/\/_next\/static\/media\/(.*)-s\.p\.woff2/) + expect(link.href).toMatch( + /\/_next\/static\/media\/(.*)-s.p.woff2/ + ) } - }) + expect(link.rel).toBe('preload') + expect(link.type).toBe('font/woff2') + } }) + }) - if (isDev) { - describe('Dev errors', () => { - it('should recover on font loader error', async () => { - const browser = await next.browser('/') - const font1Content = await next.readFile('fonts/index.js') - - // Break file - await next.patchFile( - 'fonts/index.js', - font1Content.replace( - './font1_roboto.woff2', - './does-not-exist.woff2' - ) - ) - expect(await hasRedbox(browser)).toBeTrue() - expect(await getRedboxSource(browser)).toInclude( - "Can't resolve './does-not-exist.woff2'" - ) - - // Fix file - await next.patchFile('fonts/index.js', font1Content) - await browser.waitForElementByCss('#root-page') + describe('preconnect', () => { + it.each([['page'], ['layout'], ['component']])( + 'should add preconnect when preloading is disabled in %s', + async (type: string) => { + const $ = await next.render$(`/preconnect-${type}`) + + // Preconnect + expect($('link[rel="preconnect"]').length).toBe(1) + expect($('link[rel="preconnect"]').get(0).attribs).toEqual({ + crossorigin: '', + href: '/', + rel: 'preconnect', }) - }) + // Preload + expect($('link[as="font"]').length).toBe(0) + } + ) + + it('should not preconnect when css is used but no fonts', async () => { + const $ = await next.render$('/no-preconnect') + + // Preconnect + expect($('link[rel="preconnect"]').length).toBe(0) + // Preload + expect(getAttrs($('link[as="font"]'))).toEqual([]) + }) + }) + } + + describe('navigation', () => { + it('should not have duplicate preload tags on navigation', async () => { + const browser = await next.browser('/navigation') + + // Before navigation, root layout imports the font + const preloadBeforeNavigation = + await browser.elementsByCss('link[as="font"]') + expect(preloadBeforeNavigation.length).toBe(1) + const href = await preloadBeforeNavigation[0].getAttribute('href') + if (process.env.TURBOPACK) { + expect(href).toMatch(/\/_next\/static\/media\/(.*)-s\.p\.(.*)\.woff2/) + } else { + expect(href).toMatch(/\/_next\/static\/media\/(.*)-s\.p\.woff2/) + } + + // Navigate to a page that also imports that font + await browser.elementByCss('a').click() + await browser.waitForElementByCss('#page-with-same-font') + + // After navigating + const preloadAfterNavigation = + await browser.elementsByCss('link[as="font"]') + expect(preloadAfterNavigation.length).toBe(1) + + const href2 = await preloadAfterNavigation[0].getAttribute('href') + if (process.env.TURBOPACK) { + expect(href2).toMatch( + /\/_next\/static\/media\/(.*)-s\.p\.(.*)\.woff2/ + ) + } else { + expect(href2).toMatch(/\/_next\/static\/media\/(.*)-s\.p\.woff2/) } }) }) - } + + if (isDev) { + describe('Dev errors', () => { + it('should recover on font loader error', async () => { + const browser = await next.browser('/') + const font1Content = await next.readFile('fonts/index.js') + + // Break file + await next.patchFile( + 'fonts/index.js', + font1Content.replace( + './font1_roboto.woff2', + './does-not-exist.woff2' + ) + ) + expect(await hasRedbox(browser)).toBeTrue() + expect(await getRedboxSource(browser)).toInclude( + "Can't resolve './does-not-exist.woff2'" + ) + + // Fix file + await next.patchFile('fonts/index.js', font1Content) + await browser.waitForElementByCss('#root-page') + }) + }) + } + }) }) diff --git a/test/e2e/next-font/app-old/components/CompWithFonts.js b/test/e2e/next-font/app-old/components/CompWithFonts.js deleted file mode 100644 index 69f77d15c00d1..0000000000000 --- a/test/e2e/next-font/app-old/components/CompWithFonts.js +++ /dev/null @@ -1,27 +0,0 @@ -import { Inter, Roboto } from '@next/font/google' -const inter = Inter({ - weight: '900', - display: 'swap', - preload: false, - subsets: ['latin'], -}) -const roboto = Roboto({ - weight: '100', - style: 'italic', - display: 'swap', - preload: true, - subsets: ['vietnamese'], -}) - -export default function Component() { - return ( - <> -{JSON.stringify(singleDay)}
-} diff --git a/test/e2e/next-font/app-old/pages/variable-font-without-weight-range.js b/test/e2e/next-font/app-old/pages/variable-font-without-weight-range.js deleted file mode 100644 index 03c192d1d85cf..0000000000000 --- a/test/e2e/next-font/app-old/pages/variable-font-without-weight-range.js +++ /dev/null @@ -1,11 +0,0 @@ -import { Nabla } from '@next/font/google' - -const nabla = Nabla({ subsets: ['latin'] }) - -export default function VariableFontWithoutWeightRange() { - return ( -- {JSON.stringify(nabla)} -
- ) -} diff --git a/test/e2e/next-font/app-old/pages/variables.js b/test/e2e/next-font/app-old/pages/variables.js deleted file mode 100644 index 6af422a3c510c..0000000000000 --- a/test/e2e/next-font/app-old/pages/variables.js +++ /dev/null @@ -1,69 +0,0 @@ -import { Fira_Code, Roboto } from '@next/font/google' -import localFont from '@next/font/local' - -const firaCode = Fira_Code({ variable: '--fira-code', subsets: ['latin'] }) -const roboto = Roboto({ - weight: '100', - style: 'italic', - display: 'swap', - preload: true, - variable: '--roboto-100-italic', - subsets: ['latin'], -}) -const myFont = localFont({ - src: '../fonts/my-font.woff2', - preload: false, - variable: '--my-font', - subsets: ['latin'], -}) - -export default function WithFonts() { - return ( - <> - {/* Fira Code Variable */} -Hello world
-} diff --git a/test/e2e/next-font/index.test.ts b/test/e2e/next-font/index.test.ts index bd113b94a7b1a..d45cbfa92e4fd 100644 --- a/test/e2e/next-font/index.test.ts +++ b/test/e2e/next-font/index.test.ts @@ -39,618 +39,610 @@ function hrefMatchesFontWithoutSizeAdjust(href: string) { } describe('next/font', () => { - for (const fixture of ['app', 'app-old']) { - describe(fixture, () => { - // Turbopack only support `next/font` as `@next/font` is going to be removed in the next major version. - if (process.env.TURBOPACK && fixture === 'app-old') { - return - } - let next: NextInstance + let next: NextInstance - if ((global as any).isNextDeploy) { - it('should skip next deploy for now', () => {}) - return - } + if ((global as any).isNextDeploy) { + it('should skip next deploy for now', () => {}) + return + } - beforeAll(async () => { - next = await createNext({ - files: { - pages: new FileRef(join(__dirname, `${fixture}/pages`)), - components: new FileRef(join(__dirname, `${fixture}/components`)), - fonts: new FileRef(join(__dirname, `${fixture}/fonts`)), - }, - dependencies: { - '@next/font': 'canary', - }, - env: { - NEXT_FONT_GOOGLE_MOCKED_RESPONSES: mockedGoogleFontResponses, - }, - }) + beforeAll(async () => { + next = await createNext({ + files: { + pages: new FileRef(join(__dirname, `app/pages`)), + components: new FileRef(join(__dirname, `app/components`)), + fonts: new FileRef(join(__dirname, `app/fonts`)), + }, + dependencies: { + '@next/font': 'canary', + }, + env: { + NEXT_FONT_GOOGLE_MOCKED_RESPONSES: mockedGoogleFontResponses, + }, + }) + }) + afterAll(() => next.destroy()) + + if ((global as any).isNextDev) { + it('should use production cache control for fonts', async () => { + const $ = await next.render$('/') + const link = $('[rel="preload"][as="font"]').attr('href') + expect(link).toBeDefined() + const res = await next.fetch(link) + expect(res.headers.get('cache-control')).toBe( + 'public, max-age=31536000, immutable' + ) + }) + } + + describe('import values', () => { + test('page with font', async () => { + const html = await renderViaHTTP(next.url, '/with-fonts') + const $ = cheerio.load(html) + + // _app.js + expect(JSON.parse($('#app-open-sans').text())).toEqual({ + className: expect.stringMatching(getClassNameRegex('className')), + variable: expect.stringMatching(getClassNameRegex('variable')), + style: { + fontFamily: expect.stringMatching( + /^'__Open_Sans_.{6}', '__Open_Sans_Fallback_.{6}'$/ + ), + fontStyle: 'normal', + }, }) - afterAll(() => next.destroy()) - - if ((global as any).isNextDev) { - it('should use production cache control for fonts', async () => { - const $ = await next.render$('/') - const link = $('[rel="preload"][as="font"]').attr('href') - expect(link).toBeDefined() - const res = await next.fetch(link) - expect(res.headers.get('cache-control')).toBe( - 'public, max-age=31536000, immutable' - ) - }) + + // with-fonts.js + expect(JSON.parse($('#with-fonts-open-sans').text())).toEqual({ + className: expect.stringMatching(getClassNameRegex('className')), + variable: expect.stringMatching(getClassNameRegex('variable')), + style: { + fontFamily: expect.stringMatching( + /^'__Open_Sans_.{6}', '__Open_Sans_Fallback_.{6}'$/ + ), + fontStyle: 'normal', + }, + }) + + // CompWithFonts.js + expect(JSON.parse($('#comp-with-fonts-inter').text())).toEqual({ + className: expect.stringMatching(getClassNameRegex('className')), + style: { + fontFamily: expect.stringMatching( + /^'__Inter_.{6}', '__Inter_Fallback_.{6}'$/ + ), + fontWeight: 900, + fontStyle: 'normal', + }, + }) + expect(JSON.parse($('#comp-with-fonts-roboto').text())).toEqual({ + className: expect.stringMatching(getClassNameRegex('className')), + style: { + fontFamily: expect.stringMatching( + /^'__Roboto_.{6}', '__Roboto_Fallback_.{6}'$/ + ), + fontStyle: 'italic', + fontWeight: 100, + }, + }) + }) + + test('page with local fonts', async () => { + const html = await renderViaHTTP(next.url, '/with-local-fonts') + const $ = cheerio.load(html) + + // _app.js + expect(JSON.parse($('#app-open-sans').text())).toEqual({ + className: expect.stringMatching(getClassNameRegex('className')), + variable: expect.stringMatching(getClassNameRegex('variable')), + style: { + fontFamily: expect.stringMatching( + /^'__Open_Sans_.{6}', '__Open_Sans_Fallback_.{6}'$/ + ), + fontStyle: 'normal', + }, + }) + + // with-local-fonts.js + expect(JSON.parse($('#first-local-font').text())).toEqual({ + className: expect.stringMatching(getClassNameRegex('className')), + style: { + fontFamily: expect.stringMatching( + /^'__myFont1_.{6}', '__myFont1_Fallback_.{6}', system-ui$/ + ), + fontStyle: 'italic', + fontWeight: 100, + }, + }) + expect(JSON.parse($('#second-local-font').text())).toEqual({ + className: expect.stringMatching(getClassNameRegex('className')), + variable: expect.stringMatching(getClassNameRegex('variable')), + style: { + fontFamily: expect.stringMatching( + /^'__myFont2_.{6}', '__myFont2_Fallback_.{6}'$/ + ), + }, + }) + }) + + test('Variable font without weight range', async () => { + const html = await renderViaHTTP( + next.url, + '/variable-font-without-weight-range' + ) + const $ = cheerio.load(html) + + expect(JSON.parse($('#nabla').text())).toEqual({ + className: expect.stringMatching(getClassNameRegex('className')), + style: { + fontFamily: expect.stringMatching( + /^'__Nabla_.{6}', '__Nabla_Fallback_.{6}'$/ + ), + fontStyle: 'normal', + }, + }) + }) + }) + + describe('computed styles', () => { + test('page with fonts', async () => { + const browser = await webdriver(next.url, '/with-fonts') + + // _app.js + expect( + await browser.eval( + 'getComputedStyle(document.querySelector("#app-open-sans")).fontFamily' + ) + ).toMatch(/^__Open_Sans_.{6}, __Open_Sans_Fallback_.{6}$/) + expect( + await browser.eval( + 'getComputedStyle(document.querySelector("#app-open-sans")).fontWeight' + ) + ).toBe('400') + expect( + await browser.eval( + 'getComputedStyle(document.querySelector("#app-open-sans")).fontStyle' + ) + ).toBe('normal') + + // with-fonts.js + expect( + await browser.eval( + 'getComputedStyle(document.querySelector("#with-fonts-open-sans")).fontFamily' + ) + ).toMatch(/^__Open_Sans_.{6}, __Open_Sans_Fallback_.{6}$/) + expect( + await browser.eval( + 'getComputedStyle(document.querySelector("#with-fonts-open-sans")).fontWeight' + ) + ).toBe('400') + expect( + await browser.eval( + 'getComputedStyle(document.querySelector("#with-fonts-open-sans")).fontStyle' + ) + ).toBe('normal') + expect( + await browser.eval( + 'getComputedStyle(document.querySelector("#with-fonts-open-sans-style")).fontWeight' + ) + ).toBe('400') + expect( + await browser.eval( + 'getComputedStyle(document.querySelector("#with-fonts-open-sans-style")).fontStyle' + ) + ).toBe('normal') + + // CompWithFonts.js + expect( + await browser.eval( + 'getComputedStyle(document.querySelector("#comp-with-fonts-inter")).fontFamily' + ) + ).toMatch(/^__Inter_.{6}, __Inter_Fallback_.{6}$/) + expect( + await browser.eval( + 'getComputedStyle(document.querySelector("#comp-with-fonts-inter")).fontWeight' + ) + ).toBe('900') + expect( + await browser.eval( + 'getComputedStyle(document.querySelector("#comp-with-fonts-inter")).fontStyle' + ) + ).toBe('normal') + + expect( + await browser.eval( + 'getComputedStyle(document.querySelector("#comp-with-fonts-roboto")).fontFamily' + ) + ).toMatch(/^__Roboto_.{6}, __Roboto_Fallback_.{6}$/) + expect( + await browser.eval( + 'getComputedStyle(document.querySelector("#comp-with-fonts-roboto")).fontWeight' + ) + ).toBe('100') + expect( + await browser.eval( + 'getComputedStyle(document.querySelector("#comp-with-fonts-roboto")).fontStyle' + ) + ).toBe('italic') + }) + + test('page using variables', async () => { + const browser = await webdriver(next.url, '/variables') + + // Fira Code Variable + const firaCodeRegex = /^__Fira_Code_.{6}, __Fira_Code_Fallback_.{6}$/ + expect( + await browser.eval( + 'getComputedStyle(document.querySelector("#variables-fira-code")).fontFamily' + ) + ).toMatch(firaCodeRegex) + expect( + await browser.eval( + 'getComputedStyle(document.querySelector("#without-variables-fira-code")).fontFamily' + ) + ).not.toMatch(firaCodeRegex) + + // Roboto 100 Italic + const roboto100ItalicRegex = /^__Roboto_.{6}, __Roboto_Fallback_.{6}$/ + expect( + await browser.eval( + 'getComputedStyle(document.querySelector("#variables-roboto-100-italic")).fontFamily' + ) + ).toMatch(roboto100ItalicRegex) + expect( + await browser.eval( + 'getComputedStyle(document.querySelector("#without-variables-roboto-100-italic")).fontFamily' + ) + ).not.toMatch(roboto100ItalicRegex) + + // Local font + const localFontRegex = /^__myFont_.{6}, __myFont_Fallback_.{6}$/ + expect( + await browser.eval( + 'getComputedStyle(document.querySelector("#variables-local-font")).fontFamily' + ) + ).toMatch(localFontRegex) + expect( + await browser.eval( + 'getComputedStyle(document.querySelector("#without-variables-local-font")).fontFamily' + ) + ).not.toMatch(localFontRegex) + }) + + test('page using fallback fonts', async () => { + const browser = await webdriver(next.url, '/with-fallback') + + // .className + expect( + await browser.eval( + 'getComputedStyle(document.querySelector("#with-fallback-fonts-classname")).fontFamily' + ) + ).toMatch(/^__Open_Sans_.{6}, system-ui, Arial$/) + + // .style + expect( + await browser.eval( + 'getComputedStyle(document.querySelector("#with-fallback-fonts-style")).fontFamily' + ) + ).toMatch(/^__Open_Sans_.{6}, system-ui, Arial$/) + + // .variable + expect( + await browser.eval( + 'getComputedStyle(document.querySelector("#with-fallback-fonts-variable")).fontFamily' + ) + ).toMatch(/^__Open_Sans_.{6}, system-ui, Arial$/) + }) + }) + + describe('preload', () => { + test('page with fonts', async () => { + const html = await renderViaHTTP(next.url, '/with-fonts') + const $ = cheerio.load(html) + + // Preconnect + expect($('link[rel="preconnect"]').length).toBe(0) + + expect($('link[as="font"]').length).toBe(2) + const links = Array.from($('link[as="font"]')).sort((a, b) => { + return a.attribs.href.localeCompare(b.attribs.href) + }) + // From /_app + const attributes = links[0].attribs + expect(attributes.as).toBe('font') + expect(attributes.crossorigin).toBe('anonymous') + hrefMatchesFontWithSizeAdjust(attributes.href) + expect(attributes.rel).toBe('preload') + expect(attributes.type).toBe('font/woff2') + expect(attributes['data-next-font']).toBe('size-adjust') + + const attributes2 = links[1].attribs + expect(attributes2.as).toBe('font') + expect(attributes2.crossorigin).toBe('anonymous') + hrefMatchesFontWithSizeAdjust(attributes2.href) + expect(attributes2.rel).toBe('preload') + expect(attributes2.type).toBe('font/woff2') + expect(attributes2['data-next-font']).toBe('size-adjust') + }) + + test('page without fonts', async () => { + const html = await renderViaHTTP(next.url, '/without-fonts') + const $ = cheerio.load(html) + + // Preconnect + expect($('link[rel="preconnect"]').length).toBe(0) + + // From _app + expect($('link[as="font"]').length).toBe(1) + + const attributes = $('link[as="font"]').get(0).attribs + expect(attributes.as).toBe('font') + expect(attributes.crossorigin).toBe('anonymous') + hrefMatchesFontWithSizeAdjust(attributes.href) + expect(attributes.rel).toBe('preload') + expect(attributes.type).toBe('font/woff2') + expect(attributes['data-next-font']).toBe('size-adjust') + }) + + test('page with local fonts', async () => { + const html = await renderViaHTTP(next.url, '/with-local-fonts') + const $ = cheerio.load(html) + + // Preconnect + expect($('link[rel="preconnect"]').length).toBe(0) + + // Preload + expect($('link[as="font"]').length).toBe(5) + const hrefs = Array.from($('link[as="font"]')) + .map((el) => el.attribs.href) + .sort() + for (const href of hrefs) { + hrefMatchesFontWithSizeAdjust(href) } + expect(hrefs.length).toBe(5) + }) - describe('import values', () => { - test('page with font', async () => { - const html = await renderViaHTTP(next.url, '/with-fonts') - const $ = cheerio.load(html) - - // _app.js - expect(JSON.parse($('#app-open-sans').text())).toEqual({ - className: expect.stringMatching(getClassNameRegex('className')), - variable: expect.stringMatching(getClassNameRegex('variable')), - style: { - fontFamily: expect.stringMatching( - /^'__Open_Sans_.{6}', '__Open_Sans_Fallback_.{6}'$/ - ), - fontStyle: 'normal', - }, - }) - - // with-fonts.js - expect(JSON.parse($('#with-fonts-open-sans').text())).toEqual({ - className: expect.stringMatching(getClassNameRegex('className')), - variable: expect.stringMatching(getClassNameRegex('variable')), - style: { - fontFamily: expect.stringMatching( - /^'__Open_Sans_.{6}', '__Open_Sans_Fallback_.{6}'$/ - ), - fontStyle: 'normal', - }, - }) - - // CompWithFonts.js - expect(JSON.parse($('#comp-with-fonts-inter').text())).toEqual({ - className: expect.stringMatching(getClassNameRegex('className')), - style: { - fontFamily: expect.stringMatching( - /^'__Inter_.{6}', '__Inter_Fallback_.{6}'$/ - ), - fontWeight: 900, - fontStyle: 'normal', - }, - }) - expect(JSON.parse($('#comp-with-fonts-roboto').text())).toEqual({ - className: expect.stringMatching(getClassNameRegex('className')), - style: { - fontFamily: expect.stringMatching( - /^'__Roboto_.{6}', '__Roboto_Fallback_.{6}'$/ - ), - fontStyle: 'italic', - fontWeight: 100, - }, - }) - }) + test('google fonts with multiple weights/styles', async () => { + const html = await renderViaHTTP(next.url, '/with-google-fonts') + const $ = cheerio.load(html) - test('page with local fonts', async () => { - const html = await renderViaHTTP(next.url, '/with-local-fonts') - const $ = cheerio.load(html) - - // _app.js - expect(JSON.parse($('#app-open-sans').text())).toEqual({ - className: expect.stringMatching(getClassNameRegex('className')), - variable: expect.stringMatching(getClassNameRegex('variable')), - style: { - fontFamily: expect.stringMatching( - /^'__Open_Sans_.{6}', '__Open_Sans_Fallback_.{6}'$/ - ), - fontStyle: 'normal', - }, - }) - - // with-local-fonts.js - expect(JSON.parse($('#first-local-font').text())).toEqual({ - className: expect.stringMatching(getClassNameRegex('className')), - style: { - fontFamily: expect.stringMatching( - /^'__myFont1_.{6}', '__myFont1_Fallback_.{6}', system-ui$/ - ), - fontStyle: 'italic', - fontWeight: 100, - }, - }) - expect(JSON.parse($('#second-local-font').text())).toEqual({ - className: expect.stringMatching(getClassNameRegex('className')), - variable: expect.stringMatching(getClassNameRegex('variable')), - style: { - fontFamily: expect.stringMatching( - /^'__myFont2_.{6}', '__myFont2_Fallback_.{6}'$/ - ), - }, - }) - }) + // Preconnect + expect($('link[rel="preconnect"]').length).toBe(0) + + // Preload + expect($('link[as="font"]').length).toBe(8) + + const hrefs = Array.from($('link[as="font"]')) + .map((el) => el.attribs.href) + .sort() + + for (const href of hrefs) { + hrefMatchesFontWithSizeAdjust(href) + } - test('Variable font without weight range', async () => { - const html = await renderViaHTTP( - next.url, - '/variable-font-without-weight-range' - ) - const $ = cheerio.load(html) - - expect(JSON.parse($('#nabla').text())).toEqual({ - className: expect.stringMatching(getClassNameRegex('className')), - style: { - fontFamily: expect.stringMatching( - /^'__Nabla_.{6}', '__Nabla_Fallback_.{6}'$/ - ), - fontStyle: 'normal', - }, - }) + expect(hrefs.length).toBe(8) + }) + + test('font without preloadable subsets', async () => { + const html = await renderViaHTTP( + next.url, + '/font-without-preloadable-subsets' + ) + const $ = cheerio.load(html) + + // Preconnect + expect($('link[rel="preconnect"]').length).toBe(0) + + // From _app + expect($('link[as="font"]').length).toBe(1) + const attributes = $('link[as="font"]').get(0).attribs + + expect(attributes.as).toBe('font') + expect(attributes.crossorigin).toBe('anonymous') + hrefMatchesFontWithSizeAdjust(attributes.href) + expect(attributes.rel).toBe('preload') + expect(attributes.type).toBe('font/woff2') + expect(attributes['data-next-font']).toBe('size-adjust') + }) + + test('font without size adjust', async () => { + const html = await renderViaHTTP(next.url, '/with-fallback') + const $ = cheerio.load(html) + const links = Array.from($('link[as="font"]')) + .map((node) => node.attribs) + .sort((a, b) => { + return a.href.localeCompare(b.href) }) + const attributes = links[1] + expect(attributes.as).toBe('font') + expect(attributes.crossorigin).toBe('anonymous') + hrefMatchesFontWithoutSizeAdjust(attributes.href) + expect(attributes.rel).toBe('preload') + expect(attributes.type).toBe('font/woff2') + expect(attributes['data-next-font']).toBe('') + + const attributes2 = links[2] + + expect(attributes2.as).toBe('font') + expect(attributes2.crossorigin).toBe('anonymous') + hrefMatchesFontWithoutSizeAdjust(attributes2.href) + expect(attributes2.rel).toBe('preload') + expect(attributes2.type).toBe('font/woff2') + expect(attributes2['data-next-font']).toBe('') + }) + }) + + describe('Fallback fontfaces', () => { + describe('local', () => { + test('Indie flower', async () => { + const browser = await webdriver(next.url, '/with-local-fonts') + + const ascentOverride = await browser.eval( + 'Array.from(document.fonts.values()).find(font => font.family.includes("myFont2_Fallback")).ascentOverride' + ) + expect(ascentOverride).toBe('103.26%') + + const descentOverride = await browser.eval( + 'Array.from(document.fonts.values()).find(font => font.family.includes("myFont2_Fallback")).descentOverride' + ) + expect(descentOverride).toBe('51.94%') + + const lineGapOverride = await browser.eval( + 'Array.from(document.fonts.values()).find(font => font.family.includes("myFont2_Fallback")).lineGapOverride' + ) + expect(lineGapOverride).toBe('0%') + + const sizeAdjust = await browser.eval( + 'Array.from(document.fonts.values()).find(font => font.family.includes("myFont2_Fallback")).sizeAdjust' + ) + expect(sizeAdjust).toBe('94%') }) - describe('computed styles', () => { - test('page with fonts', async () => { - const browser = await webdriver(next.url, '/with-fonts') - - // _app.js - expect( - await browser.eval( - 'getComputedStyle(document.querySelector("#app-open-sans")).fontFamily' - ) - ).toMatch(/^__Open_Sans_.{6}, __Open_Sans_Fallback_.{6}$/) - expect( - await browser.eval( - 'getComputedStyle(document.querySelector("#app-open-sans")).fontWeight' - ) - ).toBe('400') - expect( - await browser.eval( - 'getComputedStyle(document.querySelector("#app-open-sans")).fontStyle' - ) - ).toBe('normal') - - // with-fonts.js - expect( - await browser.eval( - 'getComputedStyle(document.querySelector("#with-fonts-open-sans")).fontFamily' - ) - ).toMatch(/^__Open_Sans_.{6}, __Open_Sans_Fallback_.{6}$/) - expect( - await browser.eval( - 'getComputedStyle(document.querySelector("#with-fonts-open-sans")).fontWeight' - ) - ).toBe('400') - expect( - await browser.eval( - 'getComputedStyle(document.querySelector("#with-fonts-open-sans")).fontStyle' - ) - ).toBe('normal') - expect( - await browser.eval( - 'getComputedStyle(document.querySelector("#with-fonts-open-sans-style")).fontWeight' - ) - ).toBe('400') - expect( - await browser.eval( - 'getComputedStyle(document.querySelector("#with-fonts-open-sans-style")).fontStyle' - ) - ).toBe('normal') - - // CompWithFonts.js - expect( - await browser.eval( - 'getComputedStyle(document.querySelector("#comp-with-fonts-inter")).fontFamily' - ) - ).toMatch(/^__Inter_.{6}, __Inter_Fallback_.{6}$/) - expect( - await browser.eval( - 'getComputedStyle(document.querySelector("#comp-with-fonts-inter")).fontWeight' - ) - ).toBe('900') - expect( - await browser.eval( - 'getComputedStyle(document.querySelector("#comp-with-fonts-inter")).fontStyle' - ) - ).toBe('normal') - - expect( - await browser.eval( - 'getComputedStyle(document.querySelector("#comp-with-fonts-roboto")).fontFamily' - ) - ).toMatch(/^__Roboto_.{6}, __Roboto_Fallback_.{6}$/) - expect( - await browser.eval( - 'getComputedStyle(document.querySelector("#comp-with-fonts-roboto")).fontWeight' - ) - ).toBe('100') - expect( - await browser.eval( - 'getComputedStyle(document.querySelector("#comp-with-fonts-roboto")).fontStyle' - ) - ).toBe('italic') - }) + test('Fraunces', async () => { + const browser = await webdriver(next.url, '/with-local-fonts') - test('page using variables', async () => { - const browser = await webdriver(next.url, '/variables') - - // Fira Code Variable - const firaCodeRegex = /^__Fira_Code_.{6}, __Fira_Code_Fallback_.{6}$/ - expect( - await browser.eval( - 'getComputedStyle(document.querySelector("#variables-fira-code")).fontFamily' - ) - ).toMatch(firaCodeRegex) - expect( - await browser.eval( - 'getComputedStyle(document.querySelector("#without-variables-fira-code")).fontFamily' - ) - ).not.toMatch(firaCodeRegex) - - // Roboto 100 Italic - const roboto100ItalicRegex = /^__Roboto_.{6}, __Roboto_Fallback_.{6}$/ - expect( - await browser.eval( - 'getComputedStyle(document.querySelector("#variables-roboto-100-italic")).fontFamily' - ) - ).toMatch(roboto100ItalicRegex) - expect( - await browser.eval( - 'getComputedStyle(document.querySelector("#without-variables-roboto-100-italic")).fontFamily' - ) - ).not.toMatch(roboto100ItalicRegex) - - // Local font - const localFontRegex = /^__myFont_.{6}, __myFont_Fallback_.{6}$/ - expect( - await browser.eval( - 'getComputedStyle(document.querySelector("#variables-local-font")).fontFamily' - ) - ).toMatch(localFontRegex) - expect( - await browser.eval( - 'getComputedStyle(document.querySelector("#without-variables-local-font")).fontFamily' - ) - ).not.toMatch(localFontRegex) - }) + const ascentOverride = await browser.eval( + 'Array.from(document.fonts.values()).find(font => font.family.includes("myFont1_Fallback")).ascentOverride' + ) + expect(ascentOverride).toBe('84.71%') - test('page using fallback fonts', async () => { - const browser = await webdriver(next.url, '/with-fallback') - - // .className - expect( - await browser.eval( - 'getComputedStyle(document.querySelector("#with-fallback-fonts-classname")).fontFamily' - ) - ).toMatch(/^__Open_Sans_.{6}, system-ui, Arial$/) - - // .style - expect( - await browser.eval( - 'getComputedStyle(document.querySelector("#with-fallback-fonts-style")).fontFamily' - ) - ).toMatch(/^__Open_Sans_.{6}, system-ui, Arial$/) - - // .variable - expect( - await browser.eval( - 'getComputedStyle(document.querySelector("#with-fallback-fonts-variable")).fontFamily' - ) - ).toMatch(/^__Open_Sans_.{6}, system-ui, Arial$/) - }) + const descentOverride = await browser.eval( + 'Array.from(document.fonts.values()).find(font => font.family.includes("myFont1_Fallback")).descentOverride' + ) + expect(descentOverride).toBe('22.09%') + + const lineGapOverride = await browser.eval( + 'Array.from(document.fonts.values()).find(font => font.family.includes("myFont1_Fallback")).lineGapOverride' + ) + expect(lineGapOverride).toBe('0%') + + const sizeAdjust = await browser.eval( + 'Array.from(document.fonts.values()).find(font => font.family.includes("myFont1_Fallback")).sizeAdjust' + ) + expect(sizeAdjust).toBe('115.45%') }) - describe('preload', () => { - test('page with fonts', async () => { - const html = await renderViaHTTP(next.url, '/with-fonts') - const $ = cheerio.load(html) - - // Preconnect - expect($('link[rel="preconnect"]').length).toBe(0) - - expect($('link[as="font"]').length).toBe(2) - const links = Array.from($('link[as="font"]')).sort((a, b) => { - return a.attribs.href.localeCompare(b.attribs.href) - }) - // From /_app - const attributes = links[0].attribs - expect(attributes.as).toBe('font') - expect(attributes.crossorigin).toBe('anonymous') - hrefMatchesFontWithSizeAdjust(attributes.href) - expect(attributes.rel).toBe('preload') - expect(attributes.type).toBe('font/woff2') - expect(attributes['data-next-font']).toBe('size-adjust') - - const attributes2 = links[1].attribs - expect(attributes2.as).toBe('font') - expect(attributes2.crossorigin).toBe('anonymous') - hrefMatchesFontWithSizeAdjust(attributes2.href) - expect(attributes2.rel).toBe('preload') - expect(attributes2.type).toBe('font/woff2') - expect(attributes2['data-next-font']).toBe('size-adjust') - }) + test('Roboto multiple weights and styles', async () => { + const browser = await webdriver(next.url, '/with-local-fonts') - test('page without fonts', async () => { - const html = await renderViaHTTP(next.url, '/without-fonts') - const $ = cheerio.load(html) + const ascentOverride = await browser.eval( + 'Array.from(document.fonts.values()).find(font => font.family.includes("roboto_Fallback")).ascentOverride' + ) + expect(ascentOverride).toBe('92.49%') - // Preconnect - expect($('link[rel="preconnect"]').length).toBe(0) + const descentOverride = await browser.eval( + 'Array.from(document.fonts.values()).find(font => font.family.includes("roboto_Fallback")).descentOverride' + ) + expect(descentOverride).toBe('24.34%') - // From _app - expect($('link[as="font"]').length).toBe(1) + const lineGapOverride = await browser.eval( + 'Array.from(document.fonts.values()).find(font => font.family.includes("roboto_Fallback")).lineGapOverride' + ) + expect(lineGapOverride).toBe('0%') - const attributes = $('link[as="font"]').get(0).attribs - expect(attributes.as).toBe('font') - expect(attributes.crossorigin).toBe('anonymous') - hrefMatchesFontWithSizeAdjust(attributes.href) - expect(attributes.rel).toBe('preload') - expect(attributes.type).toBe('font/woff2') - expect(attributes['data-next-font']).toBe('size-adjust') - }) + const sizeAdjust = await browser.eval( + 'Array.from(document.fonts.values()).find(font => font.family.includes("roboto_Fallback")).sizeAdjust' + ) + expect(sizeAdjust).toBe('100.3%') + }) - test('page with local fonts', async () => { - const html = await renderViaHTTP(next.url, '/with-local-fonts') - const $ = cheerio.load(html) - - // Preconnect - expect($('link[rel="preconnect"]').length).toBe(0) - - // Preload - expect($('link[as="font"]').length).toBe(5) - const hrefs = Array.from($('link[as="font"]')) - .map((el) => el.attribs.href) - .sort() - for (const href of hrefs) { - hrefMatchesFontWithSizeAdjust(href) - } - expect(hrefs.length).toBe(5) - }) + test('Roboto multiple weights and styles - variable 1', async () => { + const browser = await webdriver(next.url, '/with-local-fonts') - test('google fonts with multiple weights/styles', async () => { - const html = await renderViaHTTP(next.url, '/with-google-fonts') - const $ = cheerio.load(html) + const ascentOverride = await browser.eval( + 'Array.from(document.fonts.values()).find(font => font.family.includes("robotoVar1_Fallback")).ascentOverride' + ) + expect(ascentOverride).toBe('92.49%') - // Preconnect - expect($('link[rel="preconnect"]').length).toBe(0) + const descentOverride = await browser.eval( + 'Array.from(document.fonts.values()).find(font => font.family.includes("robotoVar1_Fallback")).descentOverride' + ) + expect(descentOverride).toBe('24.34%') - // Preload - expect($('link[as="font"]').length).toBe(8) + const lineGapOverride = await browser.eval( + 'Array.from(document.fonts.values()).find(font => font.family.includes("robotoVar1_Fallback")).lineGapOverride' + ) + expect(lineGapOverride).toBe('0%') - const hrefs = Array.from($('link[as="font"]')) - .map((el) => el.attribs.href) - .sort() + const sizeAdjust = await browser.eval( + 'Array.from(document.fonts.values()).find(font => font.family.includes("robotoVar1_Fallback")).sizeAdjust' + ) + expect(sizeAdjust).toBe('100.3%') + }) - for (const href of hrefs) { - hrefMatchesFontWithSizeAdjust(href) - } + test('Roboto multiple weights and styles - variable 2', async () => { + const browser = await webdriver(next.url, '/with-local-fonts') - expect(hrefs.length).toBe(8) - }) + const ascentOverride = await browser.eval( + 'Array.from(document.fonts.values()).find(font => font.family.includes("robotoVar2_Fallback")).ascentOverride' + ) + expect(ascentOverride).toBe('92.49%') - test('font without preloadable subsets', async () => { - const html = await renderViaHTTP( - next.url, - '/font-without-preloadable-subsets' - ) - const $ = cheerio.load(html) - - // Preconnect - expect($('link[rel="preconnect"]').length).toBe(0) - - // From _app - expect($('link[as="font"]').length).toBe(1) - const attributes = $('link[as="font"]').get(0).attribs - - expect(attributes.as).toBe('font') - expect(attributes.crossorigin).toBe('anonymous') - hrefMatchesFontWithSizeAdjust(attributes.href) - expect(attributes.rel).toBe('preload') - expect(attributes.type).toBe('font/woff2') - expect(attributes['data-next-font']).toBe('size-adjust') - }) + const descentOverride = await browser.eval( + 'Array.from(document.fonts.values()).find(font => font.family.includes("robotoVar2_Fallback")).descentOverride' + ) + expect(descentOverride).toBe('24.34%') - test('font without size adjust', async () => { - const html = await renderViaHTTP(next.url, '/with-fallback') - const $ = cheerio.load(html) - const links = Array.from($('link[as="font"]')) - .map((node) => node.attribs) - .sort((a, b) => { - return a.href.localeCompare(b.href) - }) - const attributes = links[1] - expect(attributes.as).toBe('font') - expect(attributes.crossorigin).toBe('anonymous') - hrefMatchesFontWithoutSizeAdjust(attributes.href) - expect(attributes.rel).toBe('preload') - expect(attributes.type).toBe('font/woff2') - expect(attributes['data-next-font']).toBe('') - - const attributes2 = links[2] - - expect(attributes2.as).toBe('font') - expect(attributes2.crossorigin).toBe('anonymous') - hrefMatchesFontWithoutSizeAdjust(attributes2.href) - expect(attributes2.rel).toBe('preload') - expect(attributes2.type).toBe('font/woff2') - expect(attributes2['data-next-font']).toBe('') - }) + const lineGapOverride = await browser.eval( + 'Array.from(document.fonts.values()).find(font => font.family.includes("robotoVar2_Fallback")).lineGapOverride' + ) + expect(lineGapOverride).toBe('0%') + + const sizeAdjust = await browser.eval( + 'Array.from(document.fonts.values()).find(font => font.family.includes("robotoVar2_Fallback")).sizeAdjust' + ) + expect(sizeAdjust).toBe('100.3%') }) + }) - describe('Fallback fontfaces', () => { - describe('local', () => { - test('Indie flower', async () => { - const browser = await webdriver(next.url, '/with-local-fonts') - - const ascentOverride = await browser.eval( - 'Array.from(document.fonts.values()).find(font => font.family.includes("myFont2_Fallback")).ascentOverride' - ) - expect(ascentOverride).toBe('103.26%') - - const descentOverride = await browser.eval( - 'Array.from(document.fonts.values()).find(font => font.family.includes("myFont2_Fallback")).descentOverride' - ) - expect(descentOverride).toBe('51.94%') - - const lineGapOverride = await browser.eval( - 'Array.from(document.fonts.values()).find(font => font.family.includes("myFont2_Fallback")).lineGapOverride' - ) - expect(lineGapOverride).toBe('0%') - - const sizeAdjust = await browser.eval( - 'Array.from(document.fonts.values()).find(font => font.family.includes("myFont2_Fallback")).sizeAdjust' - ) - expect(sizeAdjust).toBe('94%') - }) - - test('Fraunces', async () => { - const browser = await webdriver(next.url, '/with-local-fonts') - - const ascentOverride = await browser.eval( - 'Array.from(document.fonts.values()).find(font => font.family.includes("myFont1_Fallback")).ascentOverride' - ) - expect(ascentOverride).toBe('84.71%') - - const descentOverride = await browser.eval( - 'Array.from(document.fonts.values()).find(font => font.family.includes("myFont1_Fallback")).descentOverride' - ) - expect(descentOverride).toBe('22.09%') - - const lineGapOverride = await browser.eval( - 'Array.from(document.fonts.values()).find(font => font.family.includes("myFont1_Fallback")).lineGapOverride' - ) - expect(lineGapOverride).toBe('0%') - - const sizeAdjust = await browser.eval( - 'Array.from(document.fonts.values()).find(font => font.family.includes("myFont1_Fallback")).sizeAdjust' - ) - expect(sizeAdjust).toBe('115.45%') - }) - - test('Roboto multiple weights and styles', async () => { - const browser = await webdriver(next.url, '/with-local-fonts') - - const ascentOverride = await browser.eval( - 'Array.from(document.fonts.values()).find(font => font.family.includes("roboto_Fallback")).ascentOverride' - ) - expect(ascentOverride).toBe('92.49%') - - const descentOverride = await browser.eval( - 'Array.from(document.fonts.values()).find(font => font.family.includes("roboto_Fallback")).descentOverride' - ) - expect(descentOverride).toBe('24.34%') - - const lineGapOverride = await browser.eval( - 'Array.from(document.fonts.values()).find(font => font.family.includes("roboto_Fallback")).lineGapOverride' - ) - expect(lineGapOverride).toBe('0%') - - const sizeAdjust = await browser.eval( - 'Array.from(document.fonts.values()).find(font => font.family.includes("roboto_Fallback")).sizeAdjust' - ) - expect(sizeAdjust).toBe('100.3%') - }) - - test('Roboto multiple weights and styles - variable 1', async () => { - const browser = await webdriver(next.url, '/with-local-fonts') - - const ascentOverride = await browser.eval( - 'Array.from(document.fonts.values()).find(font => font.family.includes("robotoVar1_Fallback")).ascentOverride' - ) - expect(ascentOverride).toBe('92.49%') - - const descentOverride = await browser.eval( - 'Array.from(document.fonts.values()).find(font => font.family.includes("robotoVar1_Fallback")).descentOverride' - ) - expect(descentOverride).toBe('24.34%') - - const lineGapOverride = await browser.eval( - 'Array.from(document.fonts.values()).find(font => font.family.includes("robotoVar1_Fallback")).lineGapOverride' - ) - expect(lineGapOverride).toBe('0%') - - const sizeAdjust = await browser.eval( - 'Array.from(document.fonts.values()).find(font => font.family.includes("robotoVar1_Fallback")).sizeAdjust' - ) - expect(sizeAdjust).toBe('100.3%') - }) - - test('Roboto multiple weights and styles - variable 2', async () => { - const browser = await webdriver(next.url, '/with-local-fonts') - - const ascentOverride = await browser.eval( - 'Array.from(document.fonts.values()).find(font => font.family.includes("robotoVar2_Fallback")).ascentOverride' - ) - expect(ascentOverride).toBe('92.49%') - - const descentOverride = await browser.eval( - 'Array.from(document.fonts.values()).find(font => font.family.includes("robotoVar2_Fallback")).descentOverride' - ) - expect(descentOverride).toBe('24.34%') - - const lineGapOverride = await browser.eval( - 'Array.from(document.fonts.values()).find(font => font.family.includes("robotoVar2_Fallback")).lineGapOverride' - ) - expect(lineGapOverride).toBe('0%') - - const sizeAdjust = await browser.eval( - 'Array.from(document.fonts.values()).find(font => font.family.includes("robotoVar2_Fallback")).sizeAdjust' - ) - expect(sizeAdjust).toBe('100.3%') - }) - }) + describe('google', () => { + test('Indie flower', async () => { + const browser = await webdriver(next.url, '/with-google-fonts') + + const ascentOverride = await browser.eval( + 'Array.from(document.fonts.values()).find(font => font.family.includes("Indie_Flower_Fallback")).ascentOverride' + ) + expect(ascentOverride).toBe('103.05%') + + const descentOverride = await browser.eval( + 'Array.from(document.fonts.values()).find(font => font.family.includes("Indie_Flower_Fallback")).descentOverride' + ) + expect(descentOverride).toBe('51.84%') + + const lineGapOverride = await browser.eval( + 'Array.from(document.fonts.values()).find(font => font.family.includes("Indie_Flower_Fallback")).lineGapOverride' + ) + expect(lineGapOverride).toBe('0%') + + const sizeAdjust = await browser.eval( + 'Array.from(document.fonts.values()).find(font => font.family.includes("Indie_Flower_Fallback")).sizeAdjust' + ) + expect(sizeAdjust).toBe('94.19%') + }) - describe('google', () => { - test('Indie flower', async () => { - const browser = await webdriver(next.url, '/with-google-fonts') - - const ascentOverride = await browser.eval( - 'Array.from(document.fonts.values()).find(font => font.family.includes("Indie_Flower_Fallback")).ascentOverride' - ) - expect(ascentOverride).toBe('103.05%') - - const descentOverride = await browser.eval( - 'Array.from(document.fonts.values()).find(font => font.family.includes("Indie_Flower_Fallback")).descentOverride' - ) - expect(descentOverride).toBe('51.84%') - - const lineGapOverride = await browser.eval( - 'Array.from(document.fonts.values()).find(font => font.family.includes("Indie_Flower_Fallback")).lineGapOverride' - ) - expect(lineGapOverride).toBe('0%') - - const sizeAdjust = await browser.eval( - 'Array.from(document.fonts.values()).find(font => font.family.includes("Indie_Flower_Fallback")).sizeAdjust' - ) - expect(sizeAdjust).toBe('94.19%') - }) - - test('Fraunces', async () => { - const browser = await webdriver(next.url, '/with-google-fonts') - - const ascentOverride = await browser.eval( - 'Array.from(document.fonts.values()).find(font => font.family.includes("Fraunces_Fallback")).ascentOverride' - ) - expect(ascentOverride).toBe('84.71%') - - const descentOverride = await browser.eval( - 'Array.from(document.fonts.values()).find(font => font.family.includes("Fraunces_Fallback")).descentOverride' - ) - expect(descentOverride).toBe('22.09%') - - const lineGapOverride = await browser.eval( - 'Array.from(document.fonts.values()).find(font => font.family.includes("Fraunces_Fallback")).lineGapOverride' - ) - expect(lineGapOverride).toBe('0%') - - const sizeAdjust = await browser.eval( - 'Array.from(document.fonts.values()).find(font => font.family.includes("Fraunces_Fallback")).sizeAdjust' - ) - expect(sizeAdjust).toBe('115.45%') - }) - }) + test('Fraunces', async () => { + const browser = await webdriver(next.url, '/with-google-fonts') + + const ascentOverride = await browser.eval( + 'Array.from(document.fonts.values()).find(font => font.family.includes("Fraunces_Fallback")).ascentOverride' + ) + expect(ascentOverride).toBe('84.71%') + + const descentOverride = await browser.eval( + 'Array.from(document.fonts.values()).find(font => font.family.includes("Fraunces_Fallback")).descentOverride' + ) + expect(descentOverride).toBe('22.09%') + + const lineGapOverride = await browser.eval( + 'Array.from(document.fonts.values()).find(font => font.family.includes("Fraunces_Fallback")).lineGapOverride' + ) + expect(lineGapOverride).toBe('0%') + + const sizeAdjust = await browser.eval( + 'Array.from(document.fonts.values()).find(font => font.family.includes("Fraunces_Fallback")).sizeAdjust' + ) + expect(sizeAdjust).toBe('115.45%') }) }) - } + }) }) diff --git a/test/production/next-font/telemetry-old.test.ts b/test/production/next-font/telemetry-old.test.ts deleted file mode 100644 index 353a6f9b2566c..0000000000000 --- a/test/production/next-font/telemetry-old.test.ts +++ /dev/null @@ -1,78 +0,0 @@ -import { createNext, FileRef } from 'e2e-utils' -import { NextInstance } from 'e2e-utils' -import { findAllTelemetryEvents } from 'next-test-utils' -import { join } from 'path' - -const mockedGoogleFontResponses = require.resolve( - './google-font-mocked-responses.js' -) - -describe('@next/font used telemetry', () => { - let next: NextInstance - - beforeAll(async () => { - next = await createNext({ - files: { - pages: new FileRef(join(__dirname, 'telemetry-old/pages')), - }, - dependencies: { - '@next/font': 'canary', - }, - env: { - NEXT_FONT_GOOGLE_MOCKED_RESPONSES: mockedGoogleFontResponses, - NEXT_TELEMETRY_DEBUG: '1', - }, - }) - }) - afterAll(() => next.destroy()) - - it('should send @next/font/google and @next/font/local usage event', async () => { - const events = findAllTelemetryEvents( - next.cliOutput, - 'NEXT_BUILD_FEATURE_USAGE' - ) - expect(events).toContainEqual({ - featureName: '@next/font/google', - invocationCount: 1, - }) - expect(events).toContainEqual({ - featureName: '@next/font/local', - invocationCount: 1, - }) - }) -}) - -describe('@next/font unused telemetry', () => { - let next: NextInstance - - beforeAll(async () => { - next = await createNext({ - files: { - pages: new FileRef(join(__dirname, 'telemetry/pages-unused')), - }, - dependencies: { - '@next/font': 'canary', - }, - env: { - NEXT_FONT_GOOGLE_MOCKED_RESPONSES: mockedGoogleFontResponses, - NEXT_TELEMETRY_DEBUG: '1', - }, - }) - }) - afterAll(() => next.destroy()) - - it('should not send @next/font/google and @next/font/local usage event', async () => { - const events = findAllTelemetryEvents( - next.cliOutput, - 'NEXT_BUILD_FEATURE_USAGE' - ) - expect(events).toContainEqual({ - featureName: '@next/font/google', - invocationCount: 0, - }) - expect(events).toContainEqual({ - featureName: '@next/font/local', - invocationCount: 0, - }) - }) -}) diff --git a/test/production/next-font/telemetry-old/pages-unused/index.js b/test/production/next-font/telemetry-old/pages-unused/index.js deleted file mode 100644 index a681aa7ce257c..0000000000000 --- a/test/production/next-font/telemetry-old/pages-unused/index.js +++ /dev/null @@ -1,3 +0,0 @@ -export default function Page() { - returnHello world
-} diff --git a/test/production/next-font/telemetry-old/pages/_app.js b/test/production/next-font/telemetry-old/pages/_app.js deleted file mode 100644 index 05702a3dc4834..0000000000000 --- a/test/production/next-font/telemetry-old/pages/_app.js +++ /dev/null @@ -1,13 +0,0 @@ -import localFont from '@next/font/local' - -const myFont = localFont({ src: './my-font.woff2' }) - -function MyApp({ Component, pageProps }) { - return ( -Hello world 1
-Hello world 2
- - ) -} diff --git a/test/production/next-font/telemetry-old/pages/my-font.woff2 b/test/production/next-font/telemetry-old/pages/my-font.woff2 deleted file mode 100644 index a6b3c3a9d69fa..0000000000000 Binary files a/test/production/next-font/telemetry-old/pages/my-font.woff2 and /dev/null differ diff --git a/test/turbopack-build-tests-manifest.json b/test/turbopack-build-tests-manifest.json index 2c15dbe3ec15a..911858d2116d0 100644 --- a/test/turbopack-build-tests-manifest.json +++ b/test/turbopack-build-tests-manifest.json @@ -2097,22 +2097,22 @@ }, "test/e2e/app-dir/next-font/next-font.test.ts": { "passed": [ - "app dir - next/font app app dir - next-font computed styles should have correct styles at /", - "app dir - next/font app app dir - next-font computed styles should have correct styles at /client", - "app dir - next/font app app dir - next-font import values should have correct values at /", - "app dir - next/font app app dir - next-font import values should have correct values at /client", - "app dir - next/font app app dir - next-font import values should transform code in node_modules", - "app dir - next/font app app dir - next-font navigation should not have duplicate preload tags on navigation", - "app dir - next/font app app dir - next-font preconnect should add preconnect when preloading is disabled in component", - "app dir - next/font app app dir - next-font preconnect should add preconnect when preloading is disabled in layout", - "app dir - next/font app app dir - next-font preconnect should not preconnect when css is used but no fonts", - "app dir - next/font app app dir - next-font preload should preload correctly with client components", - "app dir - next/font app app dir - next-font preload should preload correctly with layout using fonts", - "app dir - next/font app app dir - next-font preload should preload correctly with page using fonts" - ], - "failed": [ - "app dir - next/font app app dir - next-font preconnect should add preconnect when preloading is disabled in page", - "app dir - next/font app app dir - next-font preload should preload correctly with server components" + "app dir - next/font app dir - next-font computed styles should have correct styles at /", + "app dir - next/font app dir - next-font computed styles should have correct styles at /client", + "app dir - next/font app dir - next-font import values should have correct values at /", + "app dir - next/font app dir - next-font import values should have correct values at /client", + "app dir - next/font app dir - next-font import values should transform code in node_modules", + "app dir - next/font app dir - next-font navigation should not have duplicate preload tags on navigation", + "app dir - next/font app dir - next-font preconnect should add preconnect when preloading is disabled in component", + "app dir - next/font app dir - next-font preconnect should add preconnect when preloading is disabled in layout", + "app dir - next/font app dir - next-font preconnect should not preconnect when css is used but no fonts", + "app dir - next/font app dir - next-font preload should preload correctly with client components", + "app dir - next/font app dir - next-font preload should preload correctly with layout using fonts", + "app dir - next/font app dir - next-font preload should preload correctly with page using fonts" + ], + "failed": [ + "app dir - next/font app dir - next-font preconnect should add preconnect when preloading is disabled in page", + "app dir - next/font app dir - next-font preload should preload correctly with server components" ], "pending": [], "flakey": [], diff --git a/test/turbopack-dev-tests-manifest.json b/test/turbopack-dev-tests-manifest.json index e401de659af8b..44186cb43a69b 100644 --- a/test/turbopack-dev-tests-manifest.json +++ b/test/turbopack-dev-tests-manifest.json @@ -4290,15 +4290,15 @@ }, "test/e2e/app-dir/next-font/next-font.test.ts": { "passed": [ - "app dir - next/font app app dir - next-font computed styles should have correct styles at /", - "app dir - next/font app app dir - next-font computed styles should have correct styles at /client", - "app dir - next/font app app dir - next-font import values should have correct values at /", - "app dir - next/font app app dir - next-font import values should have correct values at /client", - "app dir - next/font app app dir - next-font import values should transform code in node_modules", - "app dir - next/font app app dir - next-font navigation should not have duplicate preload tags on navigation" + "app dir - next/font app dir - next-font computed styles should have correct styles at /", + "app dir - next/font app dir - next-font computed styles should have correct styles at /client", + "app dir - next/font app dir - next-font import values should have correct values at /", + "app dir - next/font app dir - next-font import values should have correct values at /client", + "app dir - next/font app dir - next-font import values should transform code in node_modules", + "app dir - next/font app dir - next-font navigation should not have duplicate preload tags on navigation" ], "failed": [ - "app dir - next/font app app dir - next-font Dev errors should recover on font loader error" + "app dir - next/font app dir - next-font Dev errors should recover on font loader error" ], "pending": [], "flakey": [],