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/
  )
  })