Skip to content

Commit aedf7e5

Browse files
lubieowocelubieowoce
committed
replace waitFor(1000) with retry() in flaky test
1 parent b2dfb17 commit aedf7e5

File tree

1 file changed

+102
-96
lines changed

1 file changed

+102
-96
lines changed

‎test/integration/next-image-new/app-dir/test/index.test.ts

Lines changed: 102 additions & 96 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,6 @@ import {
1616
nextStart,
1717
renderViaHTTP,
1818
retry,
19-
waitFor,
2019
} from 'next-test-utils'
2120
import webdriver from 'next-webdriver'
2221
import { join } from 'path'
@@ -612,16 +611,17 @@ function runTests(mode: 'dev' | 'server') {
612611
`/_next/image?url=%2Ftest.png&w=640&q=75 1x, /_next/image?url=%2Ftest.png&w=828&q=75 2x`
613612
)
614613
if (mode === 'dev') {
615-
await waitFor(1000)
616-
const warnings = (await browser.log())
617-
.map((log) => log.message)
618-
.join('\n')
619-
expect(warnings).toMatch(
620-
/Image with src "\/wide.png" has either width or height modified, but not the other./gm
621-
)
622-
expect(warnings).not.toMatch(
623-
/Image with src "\/test.png" has either width or height modified, but not the other./gm
624-
)
614+
await retry(async () => {
615+
const warnings = (await browser.log())
616+
.map((log) => log.message)
617+
.join('\n')
618+
expect(warnings).toMatch(
619+
/Image with src "\/wide.png" has either width or height modified, but not the other./gm
620+
)
621+
expect(warnings).not.toMatch(
622+
/Image with src "\/test.png" has either width or height modified, but not the other./gm
623+
)
624+
})
625625
}
626626
})
627627

@@ -923,7 +923,6 @@ function runTests(mode: 'dev' | 'server') {
923923

924924
it('should show error when invalid height prop', async () => {
925925
const browser = await webdriver(appPort, '/invalid-height')
926-
927926
await assertHasRedbox(browser)
928927
expect(await getRedboxHeader(browser)).toContain(
929928
`Image with src "/test.jpg" has invalid "height" property. Expected a numeric value in pixels but received "50vh".`
@@ -1025,14 +1024,15 @@ function runTests(mode: 'dev' | 'server') {
10251024
}
10261025
return 'done'
10271026
}, 'done')
1028-
await waitFor(1000)
1029-
const warnings = (await browser.log())
1030-
.map((log) => log.message)
1031-
.join('\n')
1032-
await assertNoRedbox(browser)
1033-
expect(warnings).toMatch(
1034-
/Image with src (.*)test(.*) was detected as the Largest Contentful Paint/gm
1035-
)
1027+
await retry(async () => {
1028+
const warnings = (await browser.log())
1029+
.map((log) => log.message)
1030+
.join('\n')
1031+
await assertNoRedbox(browser)
1032+
expect(warnings).toMatch(
1033+
/Image with src (.*)test(.*) was detected as the Largest Contentful Paint/gm
1034+
)
1035+
})
10361036
})
10371037

10381038
it('should warn when loader is missing width', async () => {
@@ -1112,14 +1112,15 @@ function runTests(mode: 'dev' | 'server') {
11121112
}
11131113
return 'done'
11141114
}, 'done')
1115-
await waitFor(1000)
1116-
const warnings = (await browser.log())
1117-
.map((log) => log.message)
1118-
.filter((log) => log.startsWith('Image with src'))
1119-
expect(warnings[0]).toMatch(
1120-
'Image with src "/test.png" was detected as the Largest Contentful Paint (LCP).'
1121-
)
1122-
expect(warnings.length).toBe(1)
1115+
await retry(async () => {
1116+
const warnings = (await browser.log())
1117+
.map((log) => log.message)
1118+
.filter((log) => log.startsWith('Image with src'))
1119+
expect(warnings[0]).toMatch(
1120+
'Image with src "/test.png" was detected as the Largest Contentful Paint (LCP).'
1121+
)
1122+
expect(warnings.length).toBe(1)
1123+
})
11231124
})
11241125
} else {
11251126
//server-only tests
@@ -1178,11 +1179,11 @@ function runTests(mode: 'dev' | 'server') {
11781179
return 'result-correct'
11791180
}, /result-correct/)
11801181

1181-
await waitFor(1000)
1182-
1183-
const computedWidth = await getComputed(browser, id, 'width')
1184-
const computedHeight = await getComputed(browser, id, 'height')
1185-
expect(getRatio(computedWidth, computedHeight)).toBeCloseTo(1, 1)
1182+
await retry(async () => {
1183+
const computedWidth = await getComputed(browser, id, 'width')
1184+
const computedHeight = await getComputed(browser, id, 'height')
1185+
expect(getRatio(computedWidth, computedHeight)).toBeCloseTo(1, 1)
1186+
})
11861187
})
11871188

11881189
it('should apply style inheritance for img elements but not wrapper elements', async () => {
@@ -1222,33 +1223,34 @@ function runTests(mode: 'dev' | 'server') {
12221223
const browser = await webdriver(appPort, '/style-filter')
12231224
await check(() => getSrc(browser, 'img-plain'), /^\/_next\/image/)
12241225
await check(() => getSrc(browser, 'img-blur'), /^\/_next\/image/)
1225-
await waitFor(1000)
12261226

1227-
expect(await getComputedStyle(browser, 'img-plain', 'filter')).toBe(
1228-
'opacity(0.5)'
1229-
)
1230-
expect(
1231-
await getComputedStyle(browser, 'img-plain', 'background-size')
1232-
).toBe('30%')
1233-
expect(
1234-
await getComputedStyle(browser, 'img-plain', 'background-image')
1235-
).toMatch('iVBORw0KGgo=')
1236-
expect(
1237-
await getComputedStyle(browser, 'img-plain', 'background-position')
1238-
).toBe('1px 2px')
1227+
await retry(async () => {
1228+
expect(await getComputedStyle(browser, 'img-plain', 'filter')).toBe(
1229+
'opacity(0.5)'
1230+
)
1231+
expect(
1232+
await getComputedStyle(browser, 'img-plain', 'background-size')
1233+
).toBe('30%')
1234+
expect(
1235+
await getComputedStyle(browser, 'img-plain', 'background-image')
1236+
).toMatch('iVBORw0KGgo=')
1237+
expect(
1238+
await getComputedStyle(browser, 'img-plain', 'background-position')
1239+
).toBe('1px 2px')
12391240

1240-
expect(await getComputedStyle(browser, 'img-blur', 'filter')).toBe(
1241-
'opacity(0.5)'
1242-
)
1243-
expect(await getComputedStyle(browser, 'img-blur', 'background-size')).toBe(
1244-
'30%'
1245-
)
1246-
expect(
1247-
await getComputedStyle(browser, 'img-blur', 'background-image')
1248-
).toMatch('iVBORw0KGgo=')
1249-
expect(
1250-
await getComputedStyle(browser, 'img-blur', 'background-position')
1251-
).toBe('1px 2px')
1241+
expect(await getComputedStyle(browser, 'img-blur', 'filter')).toBe(
1242+
'opacity(0.5)'
1243+
)
1244+
expect(
1245+
await getComputedStyle(browser, 'img-blur', 'background-size')
1246+
).toBe('30%')
1247+
expect(
1248+
await getComputedStyle(browser, 'img-blur', 'background-image')
1249+
).toMatch('iVBORw0KGgo=')
1250+
expect(
1251+
await getComputedStyle(browser, 'img-blur', 'background-position')
1252+
).toBe('1px 2px')
1253+
})
12521254
})
12531255

12541256
it('should emit image for next/dynamic with non ssr case', async () => {
@@ -1298,43 +1300,46 @@ function runTests(mode: 'dev' | 'server') {
12981300
if (mode === 'dev') {
12991301
it('should not log incorrect warnings', async () => {
13001302
const browser = await webdriver(appPort, '/fill')
1301-
await waitFor(1000)
1302-
const warnings = (await browser.log())
1303-
.map((log) => log.message)
1304-
.join('\n')
1305-
expect(warnings).not.toMatch(/Image with src (.*) has "fill"/gm)
1306-
expect(warnings).not.toMatch(
1307-
/Image with src (.*) is smaller than 40x40. Consider removing(.*)/gm
1308-
)
1303+
await retry(async () => {
1304+
const warnings = (await browser.log())
1305+
.map((log) => log.message)
1306+
.join('\n')
1307+
expect(warnings).not.toMatch(/Image with src (.*) has "fill"/gm)
1308+
expect(warnings).not.toMatch(
1309+
/Image with src (.*) is smaller than 40x40. Consider removing(.*)/gm
1310+
)
1311+
})
13091312
})
13101313
it('should log warnings when using fill mode incorrectly', async () => {
13111314
const browser = await webdriver(appPort, '/fill-warnings')
1312-
await waitFor(1000)
1313-
const warnings = (await browser.log())
1314-
.map((log) => log.message)
1315-
.join('\n')
1316-
expect(warnings).toContain(
1317-
'Image with src "/wide.png" has "fill" and parent element with invalid "position". Provided "static" should be one of absolute,fixed,relative.'
1318-
)
1319-
expect(warnings).toContain(
1320-
'Image with src "/wide.png" has "fill" and a height value of 0. This is likely because the parent element of the image has not been styled to have a set height.'
1321-
)
1322-
expect(warnings).toContain(
1323-
'Image with src "/wide.png" has "fill" but is missing "sizes" prop. Please add it to improve page performance. Read more:'
1324-
)
1325-
expect(warnings).toContain(
1326-
'Image with src "/test.png" has "fill" prop and "sizes" prop of "100vw", but image is not rendered at full viewport width. Please adjust "sizes" to improve page performance. Read more:'
1327-
)
1315+
await retry(async () => {
1316+
const warnings = (await browser.log())
1317+
.map((log) => log.message)
1318+
.join('\n')
1319+
expect(warnings).toContain(
1320+
'Image with src "/wide.png" has "fill" and parent element with invalid "position". Provided "static" should be one of absolute,fixed,relative.'
1321+
)
1322+
expect(warnings).toContain(
1323+
'Image with src "/wide.png" has "fill" and a height value of 0. This is likely because the parent element of the image has not been styled to have a set height.'
1324+
)
1325+
expect(warnings).toContain(
1326+
'Image with src "/wide.png" has "fill" but is missing "sizes" prop. Please add it to improve page performance. Read more:'
1327+
)
1328+
expect(warnings).toContain(
1329+
'Image with src "/test.png" has "fill" prop and "sizes" prop of "100vw", but image is not rendered at full viewport width. Please adjust "sizes" to improve page performance. Read more:'
1330+
)
1331+
})
13281332
})
13291333
it('should not log warnings when image unmounts', async () => {
13301334
const browser = await webdriver(appPort, '/should-not-warn-unmount')
1331-
await waitFor(1000)
1332-
const warnings = (await browser.log())
1333-
.map((log) => log.message)
1334-
.join('\n')
1335-
expect(warnings).not.toContain(
1336-
'Image with src "/test.jpg" has "fill" and parent element'
1337-
)
1335+
await retry(async () => {
1336+
const warnings = (await browser.log())
1337+
.map((log) => log.message)
1338+
.join('\n')
1339+
expect(warnings).not.toContain(
1340+
'Image with src "/test.jpg" has "fill" and parent element'
1341+
)
1342+
})
13381343
})
13391344
}
13401345
})
@@ -1358,11 +1363,11 @@ function runTests(mode: 'dev' | 'server') {
13581363
return 'result-correct'
13591364
}, /result-correct/)
13601365

1361-
await waitFor(500)
1362-
1363-
const computedWidth = await getComputed(browser, id, 'width')
1364-
const computedHeight = await getComputed(browser, id, 'height')
1365-
expect(getRatio(computedHeight, computedWidth)).toBeCloseTo(0.75, 1)
1366+
await retry(async () => {
1367+
const computedWidth = await getComputed(browser, id, 'width')
1368+
const computedHeight = await getComputed(browser, id, 'height')
1369+
expect(getRatio(computedHeight, computedWidth)).toBeCloseTo(0.75, 1)
1370+
})
13661371
})
13671372
}
13681373

@@ -1500,8 +1505,9 @@ function runTests(mode: 'dev' | 'server') {
15001505

15011506
it('should be valid HTML', async () => {
15021507
const browser = await webdriver(appPort, '/valid-html-w3c')
1503-
await waitFor(1000)
1504-
expect(await browser.hasElementByCssSelector('img')).toBeTruthy()
1508+
await retry(async () =>
1509+
expect(await browser.hasElementByCssSelector('img')).toBeTruthy()
1510+
)
15051511
const url = await browser.url()
15061512
const result = (await validateHTML({
15071513
url,

0 commit comments

Comments
 (0)