Fix flaky onLoad() test for next/image/future (#37993)

This PR fixes flaky `onLoad()` test for `next/image/future`.

The test must modify the `src` after hydration to make sure it always works as expected.

This is because `next/image/future` uses native lazy loading and sometimes the event fires before hydration (docs were updated to mention this)

docs/api-reference/next/future/image.md

@@ -133,6 +133,14 @@ The callback function will be called with one argument, an object with the follo
 - [`naturalWidth`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/naturalWidth)
 - [`naturalHeight`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/naturalHeight)
 
+### onLoad
+
+A callback function that is invoked when the image is loaded.
+
+Note that the load event might occur before client-side hydration completes, so this callback might not be invoked in that case.
+
+Instead, use [`onLoadingComplete`](#onloadingcomplete).
+
 ### onError
 
 A callback function that is invoked if the image fails to load.

test/integration/image-future/default/pages/on-load.js

@@ -2,84 +2,70 @@ import { useState } from 'react'
 import Image from 'next/future/image'
 
 const Page = () => {
-  // Hoisted state to count each image load callback
-  const [idToCount, setIdToCount] = useState({})
   const [clicked, setClicked] = useState(false)
 
+  const red =
+    'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mO8ysv7HwAEngHwC+JqOgAAAABJRU5ErkJggg=='
+
   return (
     <div>
       <h1>Test onLoad</h1>
       <p>
         This is the native onLoad which doesn't work as many places as
         onLoadingComplete
       </p>
+      <button id="toggle" onClick={() => setClicked(!clicked)}>
+        Toggle
+      </button>
+
       <ImageWithMessage
         id="1"
-        src="/test.jpg"
+        src={clicked ? '/test.jpg' : red}
         width="128"
         height="128"
-        idToCount={idToCount}
-        setIdToCount={setIdToCount}
       />
 
       <ImageWithMessage
         id="2"
-        src={require('../public/test.png')}
-        placeholder="blur"
-        idToCount={idToCount}
-        setIdToCount={setIdToCount}
+        src={clicked ? require('../public/test.png') : red}
+        placeholder={clicked ? 'blur' : 'empty'}
       />
 
       <ImageWithMessage
         id="3"
-        src="/test.svg"
+        src={clicked ? '/test.svg' : red}
         width="1200"
         height="1200"
-        idToCount={idToCount}
-        setIdToCount={setIdToCount}
       />
 
       <ImageWithMessage
         id="4"
-        src="/test.ico"
+        src={clicked ? '/test.ico' : red}
         width={200}
         height={200}
-        idToCount={idToCount}
-        setIdToCount={setIdToCount}
       />
 
       <ImageWithMessage
         id="5"
-        src={clicked ? '/foo/test-rect.jpg' : '/wide.png'}
+        src={clicked ? '/wide.png' : red}
         width="500"
         height="500"
-        idToCount={idToCount}
-        setIdToCount={setIdToCount}
       />
 
-      <button id="toggle" onClick={() => setClicked(!clicked)}>
-        Toggle
-      </button>
       <div id="footer" />
     </div>
   )
 }
 
-function ImageWithMessage({ id, idToCount, setIdToCount, ...props }) {
+function ImageWithMessage({ id, ...props }) {
   const [msg, setMsg] = useState('[LOADING]')
   return (
     <>
       <div className="wrap">
         <Image
           id={`img${id}`}
           onLoad={(e) => {
-            let count = idToCount[id] || 0
-            count++
-            idToCount[id] = count
-            setIdToCount(idToCount)
-            const msg = `loaded ${count} ${e.target.id} with native onLoad`
-            setMsg(msg)
-            console.log(msg)
+            setMsg(`loaded ${e.target.id} with native onLoad`)
           }}
           {...props}
         />

test/integration/image-future/default/test/index.test.js

@@ -313,48 +313,31 @@ function runTests(mode) {
   it('should callback native onLoad in most cases', async () => {
     let browser = await webdriver(appPort, '/on-load')
 
-    for (let i = 1; i < 6; i++) {
-      await browser.eval(
-        `document.getElementById("img${i}").scrollIntoView({behavior: "smooth"})`
-      )
-      await waitFor(100)
-    }
+    await browser.eval('document.getElementById("toggle").click()')
 
-    await check(
-      () => browser.eval(`document.getElementById("img1").currentSrc`),
-      /test(.*)jpg/
-    )
-    await check(
-      () => browser.eval(`document.getElementById("img2").currentSrc`),
-      /test(.*).png/
-    )
-    await check(
-      () => browser.eval(`document.getElementById("img3").currentSrc`),
-      /test\.svg/
-    )
-    await check(
-      () => browser.eval(`document.getElementById("img4").currentSrc`),
-      /test(.*)ico/
+    await browser.eval(
+      `document.getElementById("footer").scrollIntoView({behavior: "smooth"})`
     )
+
     await check(
       () => browser.eval(`document.getElementById("msg1").textContent`),
-      'loaded 1 img1 with native onLoad'
+      'loaded img1 with native onLoad'
     )
     await check(
       () => browser.eval(`document.getElementById("msg2").textContent`),
-      'loaded 1 img2 with native onLoad'
+      'loaded img2 with native onLoad'
     )
     await check(
       () => browser.eval(`document.getElementById("msg3").textContent`),
-      'loaded 1 img3 with native onLoad'
+      'loaded img3 with native onLoad'
     )
     await check(
       () => browser.eval(`document.getElementById("msg4").textContent`),
-      'loaded 1 img4 with native onLoad'
+      'loaded img4 with native onLoad'
     )
     await check(
       () => browser.eval(`document.getElementById("msg5").textContent`),
-      'loaded 1 img5 with native onLoad'
+      'loaded img5 with native onLoad'
     )
     await check(
       () =>
@@ -363,25 +346,26 @@ function runTests(mode) {
         ),
       'future'
     )
+
     await check(
-      () => browser.eval(`document.getElementById("img5").currentSrc`),
-      /wide.png/
+      () => browser.eval(`document.getElementById("img1").currentSrc`),
+      /test(.*)jpg/
     )
-    await browser.eval('document.getElementById("toggle").click()')
     await check(
-      () => browser.eval(`document.getElementById("msg5").textContent`),
-      'loaded 2 img5 with native onLoad'
+      () => browser.eval(`document.getElementById("img2").currentSrc`),
+      /test(.*).png/
     )
     await check(
-      () =>
-        browser.eval(
-          `document.getElementById("img5").getAttribute("data-nimg")`
-        ),
-      'future'
+      () => browser.eval(`document.getElementById("img3").currentSrc`),
+      /test\.svg/
+    )
+    await check(
+      () => browser.eval(`document.getElementById("img4").currentSrc`),
+      /test(.*)ico/
     )
     await check(
       () => browser.eval(`document.getElementById("img5").currentSrc`),
-      /test-rect.jpg/
+      /wide.png/
     )
   })