Skip to content

Commit

Permalink
Make sure tests don't break on hash change
Browse files Browse the repository at this point in the history
  • Loading branch information
Hannes Bornö committed Sep 27, 2022
1 parent 4413469 commit ce70a0d
Show file tree
Hide file tree
Showing 2 changed files with 75 additions and 61 deletions.
56 changes: 28 additions & 28 deletions test/e2e/app-dir/next-font.test.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,26 +38,26 @@ describe('app dir next-font', () => {

// layout
expect(JSON.parse($('#root-layout').text())).toEqual({
className: '__className_93eede',
variable: '__variable_93eede',
className: expect.stringMatching(/^__className_.{6}$/),
variable: expect.stringMatching(/^__variable_.{6}$/),
style: {
fontFamily: "'__font1_93eede'",
fontFamily: expect.stringMatching(/^'__font1_.{6}'$/),
},
})
// page
expect(JSON.parse($('#root-page').text())).toEqual({
className: '__className_4b5678',
variable: '__variable_4b5678',
className: expect.stringMatching(/^__className_.{6}$/),
variable: expect.stringMatching(/^__variable_.{6}$/),
style: {
fontFamily: "'__font2_4b5678'",
fontFamily: expect.stringMatching(/^'__font2_.{6}'$/),
},
})
// Comp
expect(JSON.parse($('#root-comp').text())).toEqual({
className: '__className_6bca31',
variable: '__variable_6bca31',
className: expect.stringMatching(/^__className_.{6}$/),
variable: expect.stringMatching(/^__variable_.{6}$/),
style: {
fontFamily: "'__font3_6bca31'",
fontFamily: expect.stringMatching(/^'__font3_.{6}'$/),
fontStyle: 'italic',
fontWeight: 900,
},
Expand All @@ -70,37 +70,37 @@ describe('app dir next-font', () => {

// root layout
expect(JSON.parse($('#root-layout').text())).toEqual({
className: '__className_93eede',
variable: '__variable_93eede',
className: expect.stringMatching(/^__className_.{6}$/),
variable: expect.stringMatching(/^__variable_.{6}$/),
style: {
fontFamily: "'__font1_93eede'",
fontFamily: expect.stringMatching(/^'__font1_.{6}'$/),
},
})

// layout
expect(JSON.parse($('#client-layout').text())).toEqual({
className: '__className_d04ca7',
variable: '__variable_d04ca7',
className: expect.stringMatching(/^__className_.{6}$/),
variable: expect.stringMatching(/^__variable_.{6}$/),
style: {
fontFamily: "'__font4_d04ca7'",
fontFamily: expect.stringMatching(/^'__font4_.{6}'$/),
fontWeight: 100,
},
})
// page
expect(JSON.parse($('#client-page').text())).toEqual({
className: '__className_946a38',
variable: '__variable_946a38',
className: expect.stringMatching(/^__className_.{6}$/),
variable: expect.stringMatching(/^__variable_.{6}$/),
style: {
fontFamily: "'__font5_946a38'",
fontFamily: expect.stringMatching(/^'__font5_.{6}'$/),
fontStyle: 'italic',
},
})
// Comp
expect(JSON.parse($('#client-comp').text())).toEqual({
className: '__className_325599',
variable: '__variable_325599',
className: expect.stringMatching(/^__className_.{6}$/),
variable: expect.stringMatching(/^__variable_.{6}$/),
style: {
fontFamily: "'__font6_325599'",
fontFamily: expect.stringMatching(/^'__font6_.{6}'$/),
},
})
})
Expand All @@ -115,7 +115,7 @@ describe('app dir next-font', () => {
await browser.eval(
'getComputedStyle(document.querySelector("#root-layout")).fontFamily'
)
).toBe('__font1_93eede')
).toMatch(/^__font1_.{6}$/)
expect(
await browser.eval(
'getComputedStyle(document.querySelector("#root-layout")).fontWeight'
Expand All @@ -132,7 +132,7 @@ describe('app dir next-font', () => {
await browser.eval(
'getComputedStyle(document.querySelector("#root-page")).fontFamily'
)
).toBe('__font2_4b5678')
).toMatch(/^__font2_.{6}$/)
expect(
await browser.eval(
'getComputedStyle(document.querySelector("#root-page")).fontWeight'
Expand All @@ -149,7 +149,7 @@ describe('app dir next-font', () => {
await browser.eval(
'getComputedStyle(document.querySelector("#root-comp")).fontFamily'
)
).toBe('__font3_6bca31')
).toMatch(/^__font3_.{6}$/)
expect(
await browser.eval(
'getComputedStyle(document.querySelector("#root-comp")).fontWeight'
Expand All @@ -170,7 +170,7 @@ describe('app dir next-font', () => {
await browser.eval(
'getComputedStyle(document.querySelector("#root-layout")).fontFamily'
)
).toBe('__font1_93eede')
).toMatch(/^__font1_.{6}$/)
expect(
await browser.eval(
'getComputedStyle(document.querySelector("#root-layout")).fontWeight'
Expand All @@ -187,7 +187,7 @@ describe('app dir next-font', () => {
await browser.eval(
'getComputedStyle(document.querySelector("#client-layout")).fontFamily'
)
).toBe('__font4_d04ca7')
).toMatch(/^__font4_.{6}$/)
expect(
await browser.eval(
'getComputedStyle(document.querySelector("#client-layout")).fontWeight'
Expand All @@ -204,7 +204,7 @@ describe('app dir next-font', () => {
await browser.eval(
'getComputedStyle(document.querySelector("#client-page")).fontFamily'
)
).toBe('__font5_946a38')
).toMatch(/^__font5_.{6}$/)
expect(
await browser.eval(
'getComputedStyle(document.querySelector("#client-page")).fontWeight'
Expand All @@ -221,7 +221,7 @@ describe('app dir next-font', () => {
await browser.eval(
'getComputedStyle(document.querySelector("#client-comp")).fontFamily'
)
).toBe('__font6_325599')
).toMatch(/^__font6_.{6}$/)
expect(
await browser.eval(
'getComputedStyle(document.querySelector("#client-comp")).fontWeight'
Expand Down
80 changes: 47 additions & 33 deletions test/e2e/next-font/index.test.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,39 +42,47 @@ describe('@next/font/google', () => {

// _app.js
expect(JSON.parse($('#app-open-sans').text())).toEqual({
className: '__className_f32d04',
variable: '__variable_f32d04',
className: expect.stringMatching(/^__className_.{6}$/),
variable: expect.stringMatching(/^__variable_.{6}$/),
style: {
fontFamily: "'__Open_Sans_f32d04', '__open-sans-fallback_f32d04'",
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: '__className_f32d04',
variable: '__variable_f32d04',
className: expect.stringMatching(/^__className_.{6}$/),
variable: expect.stringMatching(/^__variable_.{6}$/),
style: {
fontFamily: "'__Open_Sans_f32d04', '__open-sans-fallback_f32d04'",
fontFamily: expect.stringMatching(
/^'__Open_Sans_.{6}', '__open-sans-fallback_.{6}'$/
),
fontStyle: 'normal',
},
})

// CompWithFonts.js
expect(JSON.parse($('#comp-with-fonts-inter').text())).toEqual({
className: '__className_55e413',
variable: '__variable_55e413',
className: expect.stringMatching(/^__className_.{6}$/),
variable: expect.stringMatching(/^__variable_.{6}$/),
style: {
fontFamily: "'__Inter_55e413', '__inter-fallback_55e413'",
fontFamily: expect.stringMatching(
/^'__Inter_.{6}', '__inter-fallback_.{6}'$/
),
fontStyle: 'normal',
fontWeight: 900,
},
})
expect(JSON.parse($('#comp-with-fonts-roboto').text())).toEqual({
className: '__className_29a3c6',
variable: '__variable_29a3c6',
className: expect.stringMatching(/^__className_.{6}$/),
variable: expect.stringMatching(/^__variable_.{6}$/),
style: {
fontFamily: "'__Roboto_29a3c6', '__roboto-fallback_29a3c6'",
fontFamily: expect.stringMatching(
/^'__Roboto_.{6}', '__roboto-fallback_.{6}'$/
),
fontStyle: 'italic',
fontWeight: 100,
},
Expand All @@ -90,7 +98,9 @@ describe('@next/font/google', () => {
className: '__className_f32d04',
variable: '__variable_f32d04',
style: {
fontFamily: "'__Open_Sans_f32d04', '__open-sans-fallback_f32d04'",
fontFamily: expect.stringMatching(
/^'__Open_Sans_.{6}', '__open-sans-fallback_.{6}'$/
),
fontStyle: 'normal',
},
})
Expand All @@ -100,7 +110,7 @@ describe('@next/font/google', () => {
className: '__className_410624',
variable: '__variable_410624',
style: {
fontFamily: "'__my-font_410624'",
fontFamily: expect.stringMatching(/^'__my-font_.{6}'$/),
fontStyle: 'italic',
fontWeight: 100,
},
Expand All @@ -109,7 +119,7 @@ describe('@next/font/google', () => {
className: '__className_3ff726',
variable: '__variable_3ff726',
style: {
fontFamily: "'__my-other-font_3ff726'",
fontFamily: expect.stringMatching(/^'__my-other-font_.{6}'$/),
},
})
})
Expand All @@ -124,7 +134,7 @@ describe('@next/font/google', () => {
await browser.eval(
'getComputedStyle(document.querySelector("#app-open-sans")).fontFamily'
)
).toBe('__Open_Sans_f32d04, __open-sans-fallback_f32d04')
).toMatch(/^__Open_Sans_.{6}, __open-sans-fallback_.{6}$/)
expect(
await browser.eval(
'getComputedStyle(document.querySelector("#app-open-sans")).fontWeight'
Expand All @@ -141,7 +151,7 @@ describe('@next/font/google', () => {
await browser.eval(
'getComputedStyle(document.querySelector("#with-fonts-open-sans")).fontFamily'
)
).toBe('__Open_Sans_f32d04, __open-sans-fallback_f32d04')
).toMatch(/^__Open_Sans_.{6}, __open-sans-fallback_.{6}$/)
expect(
await browser.eval(
'getComputedStyle(document.querySelector("#with-fonts-open-sans")).fontWeight'
Expand All @@ -168,7 +178,7 @@ describe('@next/font/google', () => {
await browser.eval(
'getComputedStyle(document.querySelector("#comp-with-fonts-inter")).fontFamily'
)
).toBe('__Inter_55e413, __inter-fallback_55e413')
).toMatch(/^__Inter_.{6}, __inter-fallback_.{6}$/)
expect(
await browser.eval(
'getComputedStyle(document.querySelector("#comp-with-fonts-inter")).fontWeight'
Expand All @@ -184,7 +194,7 @@ describe('@next/font/google', () => {
await browser.eval(
'getComputedStyle(document.querySelector("#comp-with-fonts-roboto")).fontFamily'
)
).toBe('__Roboto_29a3c6, __roboto-fallback_29a3c6')
).toMatch(/^__Roboto_.{6}, __roboto-fallback_.{6}$/)
expect(
await browser.eval(
'getComputedStyle(document.querySelector("#comp-with-fonts-roboto")).fontWeight'
Expand All @@ -201,52 +211,56 @@ describe('@next/font/google', () => {
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'
)
).toBe('__Fira_Code_8d0076, __fira-code-fallback_8d0076')
).toMatch(firaCodeRegex)
expect(
await browser.eval(
'getComputedStyle(document.querySelector("#without-variables-fira-code")).fontFamily'
)
).not.toBe('__Fira_Code_8d0076, __fira-code-fallback_8d0076')
).not.toMatch(firaCodeRegex)

// Albert Sant Variable Italic
const albertSansItalicRegex = /^__Albert_Sans_.{6}$/
expect(
await browser.eval(
'getComputedStyle(document.querySelector("#variables-albert-sans-italic")).fontFamily'
)
).toBe('__Albert_Sans_3a491b')
).toMatch(albertSansItalicRegex)
expect(
await browser.eval(
'getComputedStyle(document.querySelector("#without-variables-albert-sans-italic")).fontFamily'
)
).not.toBe('__Albert_Sans_3a491b')
).not.toMatch(albertSansItalicRegex)

// Inter 900
const inter900Regex = /^__Inter_.{6}, __inter-fallback_.{6}$/
expect(
await browser.eval(
'getComputedStyle(document.querySelector("#variables-inter-900")).fontFamily'
)
).toBe('__Inter_09d70c, __inter-fallback_09d70c')
).toMatch(inter900Regex)
expect(
await browser.eval(
'getComputedStyle(document.querySelector("#without-variables-inter-900")).fontFamily'
)
).not.toBe('__Inter_09d70c, __inter-fallback_09d70c')
).not.toMatch(inter900Regex)

// Roboto 100 Italic
const roboto100ItalicRegex = /^__Roboto_.{6}, __roboto-fallback_.{6}$/
expect(
await browser.eval(
'getComputedStyle(document.querySelector("#variables-roboto-100-italic")).fontFamily'
)
).toBe('__Roboto_29a3c6, __roboto-fallback_29a3c6')
).toMatch(roboto100ItalicRegex)
expect(
await browser.eval(
'getComputedStyle(document.querySelector("#without-variables-roboto-100-italic")).fontFamily'
)
).not.toBe('__Roboto_29a3c6, __roboto-fallback_29a3c6')
).not.toMatch(roboto100ItalicRegex)
})

test('page using fallback fonts', async () => {
Expand All @@ -257,26 +271,26 @@ describe('@next/font/google', () => {
await browser.eval(
'getComputedStyle(document.querySelector("#with-fallback-fonts-classname")).fontFamily'
)
).toBe(
'__Open_Sans_f32d04, system-ui, Arial, __open-sans-fallback_f32d04'
).toMatch(
/^__Open_Sans_.{6}, system-ui, Arial, __open-sans-fallback_.{6}$/
)

// .style
expect(
await browser.eval(
'getComputedStyle(document.querySelector("#with-fallback-fonts-style")).fontFamily'
)
).toBe(
'__Open_Sans_f32d04, system-ui, Arial, __open-sans-fallback_f32d04'
).toMatch(
/^__Open_Sans_.{6}, system-ui, Arial, __open-sans-fallback_.{6}$/
)

// .variable
expect(
await browser.eval(
'getComputedStyle(document.querySelector("#with-fallback-fonts-variable")).fontFamily'
)
).toBe(
'__Open_Sans_f32d04, system-ui, Arial, __open-sans-fallback_f32d04'
).toMatch(
/^__Open_Sans_.{6}, system-ui, Arial, __open-sans-fallback_.{6}$/
)
})
})
Expand Down

0 comments on commit ce70a0d

Please sign in to comment.