From cb784b8231eab82b5941abc77aa147de38b0247c Mon Sep 17 00:00:00 2001 From: Steven Date: Fri, 24 Jun 2022 14:53:32 -0400 Subject: [PATCH 1/2] Fix flaky `onLoad()` test for `next/image/future` --- docs/api-reference/next/future/image.md | 8 +++ .../image-future/default/pages/on-load.js | 44 +++++--------- .../image-future/default/test/index.test.js | 58 +++++++------------ 3 files changed, 44 insertions(+), 66 deletions(-) diff --git a/docs/api-reference/next/future/image.md b/docs/api-reference/next/future/image.md index 11785b5cce74f..65ce609c681df 100644 --- a/docs/api-reference/next/future/image.md +++ b/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 or it might occur before 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. diff --git a/test/integration/image-future/default/pages/on-load.js b/test/integration/image-future/default/pages/on-load.js index b868235bbeb93..ebea826debeee 100644 --- a/test/integration/image-future/default/pages/on-load.js +++ b/test/integration/image-future/default/pages/on-load.js @@ -2,10 +2,11 @@ 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 (

Test onLoad

@@ -13,59 +14,50 @@ const Page = () => { This is the native onLoad which doesn't work as many places as onLoadingComplete

+ + - ) } -function ImageWithMessage({ id, idToCount, setIdToCount, ...props }) { +function ImageWithMessage({ id, ...props }) { const [msg, setMsg] = useState('[LOADING]') return ( <> @@ -73,13 +65,7 @@ function ImageWithMessage({ id, idToCount, setIdToCount, ...props }) { { - 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} /> diff --git a/test/integration/image-future/default/test/index.test.js b/test/integration/image-future/default/test/index.test.js index 09b77797f309f..881d053d5d349 100644 --- a/test/integration/image-future/default/test/index.test.js +++ b/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/ ) }) From ed66a676fa8d42073c4ff722c1abd77a7defd93b Mon Sep 17 00:00:00 2001 From: Steven Date: Fri, 24 Jun 2022 14:55:52 -0400 Subject: [PATCH 2/2] Fix typo --- docs/api-reference/next/future/image.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/api-reference/next/future/image.md b/docs/api-reference/next/future/image.md index 65ce609c681df..99219d930ee0b 100644 --- a/docs/api-reference/next/future/image.md +++ b/docs/api-reference/next/future/image.md @@ -137,7 +137,7 @@ The callback function will be called with one argument, an object with the follo A callback function that is invoked when the image is loaded. -Note that the load event might occur before client-side hydration completes or it might occur before so this callback might not be invoked in that case. +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).