archive/rsnext
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

next/font tests: support Turbopack css module format (#46658)

Browse source 
Turbopack uses a different format for its css module classnames [0].
This adds and uses a helper function to the next-font tests to assert
against these classnames when testing with Turbopack. Ideally these
tests could be more behavioral (e.g. asserting on rendered dimensions),
but these can't capture things like fallback fonts.

[0] https://github.com/vercel/turbo/pull/3437
This commit is contained in:
Will Binns-Smith 2023-03-06 06:06:36 -08:00 committed by GitHub
parent 440b95e289
commit a9be890292
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 20 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

33
test/e2e/next-font/index.test.ts
View file

@ -1,7 +1,7 @@
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 { renderViaHTTP, shouldRunTurboDevTest } from 'next-test-utils'
import { join } from 'path'
import webdriver from 'next-webdriver'
@ -9,6 +9,13 @@ const mockedGoogleFontResponses = require.resolve(
'./google-font-mocked-responses.js'
)
function getClassNameRegex(className: string): RegExp {
// Turbopack uses a different format for its css modules than webpack-based Next.js
return shouldRunTurboDevTest()
? new RegExp(`^${className}__.*__.{8}$`) // e.g. `className__inter_c6e282f1__a8cc5613`
: new RegExp(`^__${className}_.{6}$`) // e.g. `__className_a8cc56`
}
describe('next/font', () => {
describe.each([['app'], ['app-old']])('%s', (fixture: string) => {
let next: NextInstance
@ -45,8 +52,8 @@ describe('next/font', () => {
// _app.js
expect(JSON.parse($('#app-open-sans').text())).toEqual({
className: expect.stringMatching(/^__className_.{6}$/),
variable: expect.stringMatching(/^__variable_.{6}$/),
className: expect.stringMatching(getClassNameRegex('className')),
variable: expect.stringMatching(getClassNameRegex('variable')),
style: {
fontFamily: expect.stringMatching(
/^'__Open_Sans_.{6}', '__Open_Sans_Fallback_.{6}'$/
@ -57,8 +64,8 @@ describe('next/font', () => {
// with-fonts.js
expect(JSON.parse($('#with-fonts-open-sans').text())).toEqual({
className: expect.stringMatching(/^__className_.{6}$/),
variable: expect.stringMatching(/^__variable_.{6}$/),
className: expect.stringMatching(getClassNameRegex('className')),
variable: expect.stringMatching(getClassNameRegex('variable')),
style: {
fontFamily: expect.stringMatching(
/^'__Open_Sans_.{6}', '__Open_Sans_Fallback_.{6}'$/
@ -69,7 +76,7 @@ describe('next/font', () => {
// CompWithFonts.js
expect(JSON.parse($('#comp-with-fonts-inter').text())).toEqual({
className: expect.stringMatching(/^__className_.{6}$/),
className: expect.stringMatching(getClassNameRegex('className')),
style: {
fontFamily: expect.stringMatching(
/^'__Inter_.{6}', '__Inter_Fallback_.{6}'$/
@ -79,7 +86,7 @@ describe('next/font', () => {
},
})
expect(JSON.parse($('#comp-with-fonts-roboto').text())).toEqual({
className: expect.stringMatching(/^__className_.{6}$/),
className: expect.stringMatching(getClassNameRegex('className')),
style: {
fontFamily: expect.stringMatching(
/^'__Roboto_.{6}', '__Roboto_Fallback_.{6}'$/
@ -96,8 +103,8 @@ describe('next/font', () => {
// _app.js
expect(JSON.parse($('#app-open-sans').text())).toEqual({
className: expect.stringMatching(/__className_.{6}/),
variable: expect.stringMatching(/__variable_.{6}/),
className: expect.stringMatching(getClassNameRegex('className')),
variable: expect.stringMatching(getClassNameRegex('variable')),
style: {
fontFamily: expect.stringMatching(
/^'__Open_Sans_.{6}', '__Open_Sans_Fallback_.{6}'$/
@ -108,7 +115,7 @@ describe('next/font', () => {
// with-local-fonts.js
expect(JSON.parse($('#first-local-font').text())).toEqual({
className: expect.stringMatching(/__className_.{6}/),
className: expect.stringMatching(getClassNameRegex('className')),
style: {
fontFamily: expect.stringMatching(
/^'__myFont1_.{6}', '__myFont1_Fallback_.{6}', system-ui$/
@ -118,8 +125,8 @@ describe('next/font', () => {
},
})
expect(JSON.parse($('#second-local-font').text())).toEqual({
className: expect.stringMatching(/^__className_.{6}$/),
variable: expect.stringMatching(/^__variable_.{6}$/),
className: expect.stringMatching(getClassNameRegex('className')),
variable: expect.stringMatching(getClassNameRegex('variable')),
style: {
fontFamily: expect.stringMatching(
/^'__myFont2_.{6}', '__myFont2_Fallback_.{6}'$/
@ -136,7 +143,7 @@ describe('next/font', () => {
const $ = cheerio.load(html)
expect(JSON.parse($('#nabla').text())).toEqual({
className: expect.stringMatching(/__className_.{6}/),
className: expect.stringMatching(getClassNameRegex('className')),
style: {
fontFamily: expect.stringMatching(/^'__Nabla_.{6}'$/),
fontStyle: 'normal',