e8fcf8b569
Adds `data-next-font` data attribute to the preload tag if added by `@next/font`. ```js // Using `size-adjust` fallback font. <link data-next-font="size-adjust" rel="preload" href="..." as="font" type="font/woff2" crossorigin="anonymous"> // Not using `size-adjust` fallback font. <link data-next-font="" rel="preload" href="..." as="font" type="font/woff2" crossorigin="anonymous"> ``` If no fonts are preloaded, the tag is added on the preconnect tag. Fixes NEXT-350 ## Bug - [ ] Related issues linked using `fixes #number` - [ ] Integration tests added - [ ] Errors have a helpful link attached, see [`contributing.md`](https://github.com/vercel/next.js/blob/canary/contributing.md) ## Feature - [ ] Implements an existing feature request or RFC. Make sure the feature request has been accepted for implementation before opening a PR. - [ ] Related issues linked using `fixes #number` - [ ] [e2e](https://github.com/vercel/next.js/blob/canary/contributing/core/testing.md#writing-tests-for-nextjs) tests added - [ ] Documentation added - [ ] Telemetry added. In case of a feature if it's used or not. - [ ] Errors have a helpful link attached, see [`contributing.md`](https://github.com/vercel/next.js/blob/canary/contributing.md) ## Documentation / Examples - [ ] Make sure the linting passes by running `pnpm build && pnpm lint` - [ ] The "examples guidelines" are followed from [our contributing doc](https://github.com/vercel/next.js/blob/canary/contributing/examples/adding-examples.md)
151 lines
4.4 KiB
TypeScript
151 lines
4.4 KiB
TypeScript
import cheerio from 'cheerio'
|
|
import { createNext, FileRef } from 'e2e-utils'
|
|
import { NextInstance } from 'test/lib/next-modes/base'
|
|
import { renderViaHTTP } from 'next-test-utils'
|
|
import { join } from 'path'
|
|
|
|
const mockedGoogleFontResponses = require.resolve(
|
|
'./google-font-mocked-responses.js'
|
|
)
|
|
|
|
const isDev = (global as any).isNextDev
|
|
|
|
describe('@next/font/google with-font-declarations-file', () => {
|
|
let next: NextInstance
|
|
|
|
if ((global as any).isNextDeploy) {
|
|
it('should skip next deploy for now', () => {})
|
|
return
|
|
}
|
|
|
|
beforeAll(async () => {
|
|
next = await createNext({
|
|
files: {
|
|
pages: new FileRef(
|
|
join(__dirname, 'with-font-declarations-file/pages')
|
|
),
|
|
components: new FileRef(
|
|
join(__dirname, 'with-font-declarations-file/components')
|
|
),
|
|
'fonts.js': new FileRef(
|
|
join(__dirname, 'with-font-declarations-file/fonts.js')
|
|
),
|
|
'my-font.woff2': new FileRef(
|
|
join(__dirname, 'with-font-declarations-file/my-font.woff2')
|
|
),
|
|
'next.config.js': new FileRef(
|
|
join(__dirname, 'with-font-declarations-file/next.config.js')
|
|
),
|
|
},
|
|
dependencies: {
|
|
'@next/font': 'canary',
|
|
},
|
|
env: {
|
|
NEXT_FONT_GOOGLE_MOCKED_RESPONSES: mockedGoogleFontResponses,
|
|
},
|
|
})
|
|
})
|
|
afterAll(() => next.destroy())
|
|
|
|
test('preload correct files at /inter', async () => {
|
|
const html = await renderViaHTTP(next.url, '/inter')
|
|
const $ = cheerio.load(html)
|
|
|
|
// Preconnect
|
|
expect($('link[rel="preconnect"]').length).toBe(0)
|
|
|
|
if (isDev) {
|
|
// In dev all fonts will be preloaded since it's before DCE
|
|
expect($('link[as="font"]').length).toBe(4)
|
|
} else {
|
|
// Preload
|
|
expect($('link[as="font"]').length).toBe(2)
|
|
// From /_app
|
|
expect($('link[as="font"]').get(0).attribs).toEqual({
|
|
as: 'font',
|
|
crossorigin: 'anonymous',
|
|
href: '/_next/static/media/0812efcfaefec5ea-s.p.woff2',
|
|
rel: 'preload',
|
|
type: 'font/woff2',
|
|
'data-next-font': 'size-adjust',
|
|
})
|
|
// From /inter
|
|
expect($('link[as="font"]').get(1).attribs).toEqual({
|
|
as: 'font',
|
|
crossorigin: 'anonymous',
|
|
href: '/_next/static/media/4a7f86e553ee7e51-s.p.woff2',
|
|
rel: 'preload',
|
|
type: 'font/woff2',
|
|
'data-next-font': 'size-adjust',
|
|
})
|
|
}
|
|
})
|
|
|
|
test('preload correct files at /roboto', async () => {
|
|
const html = await renderViaHTTP(next.url, '/roboto')
|
|
const $ = cheerio.load(html)
|
|
|
|
// Preconnect
|
|
expect($('link[rel="preconnect"]').length).toBe(0)
|
|
|
|
if (isDev) {
|
|
// In dev all fonts will be preloaded since it's before DCE
|
|
expect($('link[as="font"]').length).toBe(4)
|
|
} else {
|
|
// Preload
|
|
expect($('link[as="font"]').length).toBe(2)
|
|
// From /_app
|
|
expect($('link[as="font"]').get(0).attribs).toEqual({
|
|
as: 'font',
|
|
crossorigin: 'anonymous',
|
|
href: '/_next/static/media/0812efcfaefec5ea-s.p.woff2',
|
|
rel: 'preload',
|
|
type: 'font/woff2',
|
|
'data-next-font': 'size-adjust',
|
|
})
|
|
// From /roboto
|
|
expect($('link[as="font"]').get(1).attribs).toEqual({
|
|
as: 'font',
|
|
crossorigin: 'anonymous',
|
|
href: '/_next/static/media/9a7e84b4dd095b33-s.p.woff2',
|
|
rel: 'preload',
|
|
type: 'font/woff2',
|
|
'data-next-font': 'size-adjust',
|
|
})
|
|
}
|
|
})
|
|
|
|
test('preload correct files at /local-font', async () => {
|
|
const html = await renderViaHTTP(next.url, '/local-font')
|
|
const $ = cheerio.load(html)
|
|
|
|
// Preconnect
|
|
expect($('link[rel="preconnect"]').length).toBe(0)
|
|
|
|
if (isDev) {
|
|
// In dev all fonts will be preloaded since it's before DCE
|
|
expect($('link[as="font"]').length).toBe(4)
|
|
} else {
|
|
// Preload
|
|
expect($('link[as="font"]').length).toBe(2)
|
|
// From /_app
|
|
expect($('link[as="font"]').get(0).attribs).toEqual({
|
|
as: 'font',
|
|
crossorigin: 'anonymous',
|
|
href: '/_next/static/media/0812efcfaefec5ea-s.p.woff2',
|
|
rel: 'preload',
|
|
type: 'font/woff2',
|
|
'data-next-font': 'size-adjust',
|
|
})
|
|
// From /local-font
|
|
expect($('link[as="font"]').get(1).attribs).toEqual({
|
|
as: 'font',
|
|
crossorigin: 'anonymous',
|
|
href: '/_next/static/media/2a931eed088772c9-s.p.woff2',
|
|
rel: 'preload',
|
|
type: 'font/woff2',
|
|
'data-next-font': 'size-adjust',
|
|
})
|
|
}
|
|
})
|
|
})
|