@@ -16,6 +16,28 @@ function getClassNameRegex(className: string): RegExp {
1616 : new RegExp ( `^__${ className } ) // e.g. `__className_a8cc56`
1717}
1818
19+ function hrefMatchesFontWithSizeAdjust ( href : string ) {
20+ if ( process . env . TURBOPACK ) {
21+ expect ( href ) . toMatch (
22+ // Turbopack includes the file hash
23+ / \/ _ n e x t \/ s t a t i c \/ m e d i a \/ ( .* ) - s \. p \. ( .* ) \. w o f f 2 /
24+ )
25+ } else {
26+ expect ( href ) . toMatch ( / \/ _ n e x t \/ s t a t i c \/ m e d i a \/ ( .* ) - s \. p \. w o f f 2 / )
27+ }
28+ }
29+
30+ function hrefMatchesFontWithoutSizeAdjust ( href : string ) {
31+ if ( process . env . TURBOPACK ) {
32+ expect ( href ) . toMatch (
33+ // Turbopack includes the file hash
34+ / \/ _ n e x t \/ s t a t i c \/ m e d i a \/ ( .* ) \. p \. ( .* ) \. w o f f 2 /
35+ )
36+ } else {
37+ expect ( href ) . toMatch ( / \/ _ n e x t \/ s t a t i c \/ m e d i a \/ ( .* ) \. p \. w o f f 2 / )
38+ }
39+ }
40+
1941describe ( 'next/font' , ( ) => {
2042 for ( const fixture of [ 'app' , 'app-old' ] ) {
2143 describe ( fixture , ( ) => {
@@ -49,8 +71,6 @@ describe('next/font', () => {
4971
5072 if ( ( global as any ) . isNextDev ) {
5173 it ( 'should use production cache control for fonts' , async ( ) => {
52- const html = await next . render ( '/' )
53- console . log ( { html } )
5474 const $ = await next . render$ ( '/' )
5575 const link = $ ( '[rel="preload"][as="font"]' ) . attr ( 'href' )
5676 expect ( link ) . toBeDefined ( )
@@ -334,22 +354,21 @@ describe('next/font', () => {
334354 return a . attribs . href . localeCompare ( b . attribs . href )
335355 } )
336356 // From /_app
337- expect ( links [ 0 ] . attribs ) . toEqual ( {
338- as : 'font' ,
339- crossorigin : 'anonymous' ,
340- href : '/_next/static/media/0812efcfaefec5ea-s.p.woff2' ,
341- rel : 'preload' ,
342- type : 'font/woff2' ,
343- 'data-next-font' : 'size-adjust' ,
344- } )
345- expect ( links [ 1 ] . attribs ) . toEqual ( {
346- as : 'font' ,
347- crossorigin : 'anonymous' ,
348- href : '/_next/static/media/675c25f648fd6a30-s.p.woff2' ,
349- rel : 'preload' ,
350- type : 'font/woff2' ,
351- 'data-next-font' : 'size-adjust' ,
352- } )
357+ const attributes = links [ 0 ] . attribs
358+ expect ( attributes . as ) . toBe ( 'font' )
359+ expect ( attributes . crossorigin ) . toBe ( 'anonymous' )
360+ hrefMatchesFontWithSizeAdjust ( attributes . href )
361+ expect ( attributes . rel ) . toBe ( 'preload' )
362+ expect ( attributes . type ) . toBe ( 'font/woff2' )
363+ expect ( attributes [ 'data-next-font' ] ) . toBe ( 'size-adjust' )
364+
365+ const attributes2 = links [ 1 ] . attribs
366+ expect ( attributes2 . as ) . toBe ( 'font' )
367+ expect ( attributes2 . crossorigin ) . toBe ( 'anonymous' )
368+ hrefMatchesFontWithSizeAdjust ( attributes2 . href )
369+ expect ( attributes2 . rel ) . toBe ( 'preload' )
370+ expect ( attributes2 . type ) . toBe ( 'font/woff2' )
371+ expect ( attributes2 [ 'data-next-font' ] ) . toBe ( 'size-adjust' )
353372 } )
354373
355374 test ( 'page without fonts' , async ( ) => {
@@ -361,14 +380,14 @@ describe('next/font', () => {
361380
362381 // From _app
363382 expect ( $ ( 'link[as="font"]' ) . length ) . toBe ( 1 )
364- expect ( $ ( 'link[as="font"]' ) . get ( 0 ) . attribs ) . toEqual ( {
365- as : ' font' ,
366- crossorigin : 'anonymous' ,
367- href : '/_next/static/media/0812efcfaefec5ea-s.p.woff2' ,
368- rel : 'preload' ,
369- type : 'font/woff2' ,
370- 'data-next- font' : 'size-adjust' ,
371- } )
383+
384+ const attributes = $ ( 'link[as=" font"]' ) . get ( 0 ) . attribs
385+ expect ( attributes . as ) . toBe ( 'font' )
386+ expect ( attributes . crossorigin ) . toBe ( 'anonymous' )
387+ hrefMatchesFontWithSizeAdjust ( attributes . href )
388+ expect ( attributes . rel ) . toBe ( 'preload' )
389+ expect ( attributes . type ) . toBe ( ' font/woff2' )
390+ expect ( attributes [ 'data-next-font' ] ) . toBe ( 'size-adjust' )
372391 } )
373392
374393 test ( 'page with local fonts' , async ( ) => {
@@ -380,17 +399,13 @@ describe('next/font', () => {
380399
381400 // Preload
382401 expect ( $ ( 'link[as="font"]' ) . length ) . toBe ( 5 )
383- expect (
384- Array . from ( $ ( 'link[as="font"]' ) )
385- . map ( ( el ) => el . attribs . href )
386- . sort ( )
387- ) . toEqual ( [
388- '/_next/static/media/02205c9944024f15-s.p.woff2' ,
389- '/_next/static/media/0812efcfaefec5ea-s.p.woff2' ,
390- '/_next/static/media/1deec1af325840fd-s.p.woff2' ,
391- '/_next/static/media/ab6fdae82d1a8d92-s.p.woff2' ,
392- '/_next/static/media/d55edb6f37902ebf-s.p.woff2' ,
393- ] )
402+ const hrefs = Array . from ( $ ( 'link[as="font"]' ) )
403+ . map ( ( el ) => el . attribs . href )
404+ . sort ( )
405+ for ( const href of hrefs ) {
406+ hrefMatchesFontWithSizeAdjust ( href )
407+ }
408+ expect ( hrefs . length ) . toBe ( 5 )
394409 } )
395410
396411 test ( 'google fonts with multiple weights/styles' , async ( ) => {
@@ -403,20 +418,15 @@ describe('next/font', () => {
403418 // Preload
404419 expect ( $ ( 'link[as="font"]' ) . length ) . toBe ( 8 )
405420
406- expect (
407- Array . from ( $ ( 'link[as="font"]' ) )
408- . map ( ( el ) => el . attribs . href )
409- . sort ( )
410- ) . toEqual ( [
411- '/_next/static/media/0812efcfaefec5ea-s.p.woff2' ,
412- '/_next/static/media/4f3dcdf40b3ca86d-s.p.woff2' ,
413- '/_next/static/media/560a6db6ac485cb1-s.p.woff2' ,
414- '/_next/static/media/686d1702f12625fe-s.p.woff2' ,
415- '/_next/static/media/86d92167ff02c708-s.p.woff2' ,
416- '/_next/static/media/9ac01b894b856187-s.p.woff2' ,
417- '/_next/static/media/c9baea324111137d-s.p.woff2' ,
418- '/_next/static/media/fb68b4558e2a718e-s.p.woff2' ,
419- ] )
421+ const hrefs = Array . from ( $ ( 'link[as="font"]' ) )
422+ . map ( ( el ) => el . attribs . href )
423+ . sort ( )
424+
425+ for ( const href of hrefs ) {
426+ hrefMatchesFontWithSizeAdjust ( href )
427+ }
428+
429+ expect ( hrefs . length ) . toBe ( 8 )
420430 } )
421431
422432 test ( 'font without preloadable subsets' , async ( ) => {
@@ -431,39 +441,40 @@ describe('next/font', () => {
431441
432442 // From _app
433443 expect ( $ ( 'link[as="font"]' ) . length ) . toBe ( 1 )
434- expect ( $ ( 'link[as="font"]' ) . get ( 0 ) . attribs ) . toEqual ( {
435- as : 'font' ,
436- crossorigin : 'anonymous' ,
437- href : '/_next/static/media/0812efcfaefec5ea-s.p.woff2' ,
438- rel : 'preload' ,
439- type : 'font/woff2' ,
440- 'data-next- font' : 'size-adjust' ,
441- } )
444+ const attributes = $ ( 'link[as="font"]' ) . get ( 0 ) . attribs
445+
446+ expect ( attributes . as ) . toBe ( 'font' )
447+ expect ( attributes . crossorigin ) . toBe ( 'anonymous' )
448+ hrefMatchesFontWithSizeAdjust ( attributes . href )
449+ expect ( attributes . rel ) . toBe ( 'preload' )
450+ expect ( attributes . type ) . toBe ( ' font/woff2' )
451+ expect ( attributes [ 'data-next-font' ] ) . toBe ( 'size-adjust' )
442452 } )
443453
444454 test ( 'font without size adjust' , async ( ) => {
445455 const html = await renderViaHTTP ( next . url , '/with-fallback' )
446456 const $ = cheerio . load ( html )
447- const links = Array . from ( $ ( 'link[as="font"]' ) ) . sort ( ( a , b ) => {
448- return a . attribs . href . localeCompare ( b . attribs . href )
449- } )
450- expect ( links [ 1 ] . attribs ) . toEqual ( {
451- as : 'font' ,
452- crossorigin : 'anonymous' ,
453- href : '/_next/static/media/0812efcfaefec5ea.p.woff2' ,
454- rel : 'preload' ,
455- type : 'font/woff2' ,
456- 'data-next-font' : '' ,
457- } )
458-
459- expect ( links [ 2 ] . attribs ) . toEqual ( {
460- as : 'font' ,
461- crossorigin : 'anonymous' ,
462- href : '/_next/static/media/ab6fdae82d1a8d92.p.woff2' ,
463- rel : 'preload' ,
464- type : 'font/woff2' ,
465- 'data-next-font' : '' ,
466- } )
457+ const links = Array . from ( $ ( 'link[as="font"]' ) )
458+ . map ( ( node ) => node . attribs )
459+ . sort ( ( a , b ) => {
460+ return a . href . localeCompare ( b . href )
461+ } )
462+ const attributes = links [ 1 ]
463+ expect ( attributes . as ) . toBe ( 'font' )
464+ expect ( attributes . crossorigin ) . toBe ( 'anonymous' )
465+ hrefMatchesFontWithoutSizeAdjust ( attributes . href )
466+ expect ( attributes . rel ) . toBe ( 'preload' )
467+ expect ( attributes . type ) . toBe ( 'font/woff2' )
468+ expect ( attributes [ 'data-next-font' ] ) . toBe ( '' )
469+
470+ const attributes2 = links [ 2 ]
471+
472+ expect ( attributes2 . as ) . toBe ( 'font' )
473+ expect ( attributes2 . crossorigin ) . toBe ( 'anonymous' )
474+ hrefMatchesFontWithoutSizeAdjust ( attributes2 . href )
475+ expect ( attributes2 . rel ) . toBe ( 'preload' )
476+ expect ( attributes2 . type ) . toBe ( 'font/woff2' )
477+ expect ( attributes2 [ 'data-next-font' ] ) . toBe ( '' )
467478 } )
468479 } )
469480
0 commit comments