chore(test): test image preload below the fold (#65528)
Follow up to https://github.com/vercel/next.js/pull/65058 to ensure preloads work below the fold. Closes NEXT-3364
This commit is contained in:
parent
067eac6383
commit
01db9854d0
6 changed files with 79 additions and 0 deletions
|
@ -60,6 +60,15 @@ const Page = () => {
|
|||
layout="responsive"
|
||||
/>
|
||||
<p id="stubtext">This is the priority page</p>
|
||||
<div style={{ height: '1000vh' }} />
|
||||
<Image
|
||||
priority
|
||||
id="belowthefold"
|
||||
src="/test.tiff"
|
||||
width="400"
|
||||
height="400"
|
||||
alt=""
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
|
@ -146,6 +146,11 @@ function runTests(mode) {
|
|||
imagesrcset:
|
||||
'/_next/image?url=%2Fwide.png&w=640&q=75 640w, /_next/image?url=%2Fwide.png&w=750&q=75 750w, /_next/image?url=%2Fwide.png&w=828&q=75 828w, /_next/image?url=%2Fwide.png&w=1080&q=75 1080w, /_next/image?url=%2Fwide.png&w=1200&q=75 1200w, /_next/image?url=%2Fwide.png&w=1920&q=75 1920w, /_next/image?url=%2Fwide.png&w=2048&q=75 2048w, /_next/image?url=%2Fwide.png&w=3840&q=75 3840w',
|
||||
},
|
||||
{
|
||||
imagesizes: '',
|
||||
imagesrcset:
|
||||
'/_next/image?url=%2Ftest.tiff&w=640&q=75 1x, /_next/image?url=%2Ftest.tiff&w=828&q=75 2x',
|
||||
},
|
||||
])
|
||||
|
||||
// When priority={true}, we should _not_ set loading="lazy"
|
||||
|
@ -171,6 +176,9 @@ function runTests(mode) {
|
|||
expect(
|
||||
await browser.elementById('responsive2').getAttribute('loading')
|
||||
).toBe(null)
|
||||
expect(
|
||||
await browser.elementById('belowthefold').getAttribute('loading')
|
||||
).toBe(null)
|
||||
|
||||
const warnings = (await browser.log())
|
||||
.map((log) => log.message)
|
||||
|
|
|
@ -66,6 +66,15 @@ const Page = () => {
|
|||
fetchPriority="low"
|
||||
/>
|
||||
<p id="stubtext">This is the priority page</p>
|
||||
<div style={{ height: '1000vh' }} />
|
||||
<Image
|
||||
priority
|
||||
id="belowthefold"
|
||||
src="/test.tiff"
|
||||
width="400"
|
||||
height="400"
|
||||
alt=""
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
|
@ -180,6 +180,21 @@ function runTests(mode) {
|
|||
referrerpolicy: 'no-referrer',
|
||||
})
|
||||
|
||||
expect(
|
||||
entries.find(
|
||||
(item) =>
|
||||
item.imagesrcset ===
|
||||
'/_next/image?url=%2Ftest.tiff&w=640&q=75 1x, /_next/image?url=%2Ftest.tiff&w=828&q=75 2x'
|
||||
)
|
||||
).toEqual({
|
||||
fetchpriority: 'high',
|
||||
imagesizes: '',
|
||||
imagesrcset:
|
||||
'/_next/image?url=%2Ftest.tiff&w=640&q=75 1x, /_next/image?url=%2Ftest.tiff&w=828&q=75 2x',
|
||||
crossorigin: '',
|
||||
referrerpolicy: '',
|
||||
})
|
||||
|
||||
// When priority={true}, we should _not_ set loading="lazy"
|
||||
expect(
|
||||
await browser.elementById('basic-image').getAttribute('loading')
|
||||
|
@ -216,6 +231,13 @@ function runTests(mode) {
|
|||
'lazy'
|
||||
)
|
||||
|
||||
expect(
|
||||
await browser.elementById('belowthefold').getAttribute('fetchpriority')
|
||||
).toBe('high')
|
||||
expect(
|
||||
await browser.elementById('belowthefold').getAttribute('loading')
|
||||
).toBe(null)
|
||||
|
||||
const warnings = (await browser.log('browser'))
|
||||
.map((log) => log.message)
|
||||
.join('\n')
|
||||
|
|
|
@ -66,6 +66,15 @@ const Page = () => {
|
|||
fetchPriority="low"
|
||||
/>
|
||||
<p id="stubtext">This is the priority page</p>
|
||||
<div style={{ height: '1000vh' }} />
|
||||
<Image
|
||||
priority
|
||||
id="belowthefold"
|
||||
src="/test.tiff"
|
||||
width="400"
|
||||
height="400"
|
||||
alt=""
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
|
@ -181,6 +181,21 @@ function runTests(mode) {
|
|||
referrerpolicy: 'no-referrer',
|
||||
})
|
||||
|
||||
expect(
|
||||
entries.find(
|
||||
(item) =>
|
||||
item.imagesrcset ===
|
||||
'/_next/image?url=%2Ftest.tiff&w=640&q=75 1x, /_next/image?url=%2Ftest.tiff&w=828&q=75 2x'
|
||||
)
|
||||
).toEqual({
|
||||
fetchpriority: 'high',
|
||||
imagesizes: '',
|
||||
imagesrcset:
|
||||
'/_next/image?url=%2Ftest.tiff&w=640&q=75 1x, /_next/image?url=%2Ftest.tiff&w=828&q=75 2x',
|
||||
crossorigin: '',
|
||||
referrerpolicy: '',
|
||||
})
|
||||
|
||||
// When priority={true}, we should _not_ set loading="lazy"
|
||||
expect(
|
||||
await browser.elementById('basic-image').getAttribute('loading')
|
||||
|
@ -217,6 +232,13 @@ function runTests(mode) {
|
|||
'lazy'
|
||||
)
|
||||
|
||||
expect(
|
||||
await browser.elementById('belowthefold').getAttribute('fetchpriority')
|
||||
).toBe('high')
|
||||
expect(
|
||||
await browser.elementById('belowthefold').getAttribute('loading')
|
||||
).toBe(null)
|
||||
|
||||
const warnings = (await browser.log('browser'))
|
||||
.map((log) => log.message)
|
||||
.join('\n')
|
||||
|
|
Loading…
Reference in a new issue