chore(test): test image preload below the fold (#65528)

Follow up to #65058 to ensure preloads work below the fold. Closes NEXT-3364
vercel · May 9, 2024 · 01db985 · 01db985
1 parent 067eac6
commit 01db985
Show file tree

Hide file tree

Showing 6 changed files with 79 additions and 0 deletions.
diff --git a/test/integration/next-image-legacy/default/pages/priority.js b/test/integration/next-image-legacy/default/pages/priority.js
@@ -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>
   )
 }

diff --git a/test/integration/next-image-legacy/default/test/index.test.ts b/test/integration/next-image-legacy/default/test/index.test.ts
@@ -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)

diff --git a/test/integration/next-image-new/app-dir/app/priority/page.js b/test/integration/next-image-new/app-dir/app/priority/page.js
@@ -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>
   )
 }

diff --git a/test/integration/next-image-new/app-dir/test/index.test.ts b/test/integration/next-image-new/app-dir/test/index.test.ts
@@ -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')

diff --git a/test/integration/next-image-new/default/pages/priority.js b/test/integration/next-image-new/default/pages/priority.js
@@ -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>
   )
 }

diff --git a/test/integration/next-image-new/default/test/index.test.ts b/test/integration/next-image-new/default/test/index.test.ts
@@ -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')