From 0cb125363885c42c8fa78189c947e320e1a620b4 Mon Sep 17 00:00:00 2001
From: Steven <steven@ceriously.com>
Date: Mon, 27 Jun 2022 20:58:50 -0400
Subject: [PATCH] Remove unnecessary `<noscript>` from `next/future/image`
 (#38080)

We don't need to include `<noscript>` for `next/future/image` since it uses native lazy loading instead of the `IntersectionObserver` (https://github.com/vercel/next.js/pull/37927).

The only case when we still need `<noscript>` is for `placeholder="blur"` because it requires client-side JS to switch the from blur image to final image on load.
---
 packages/next/client/future/image.tsx         |  2 +-
 .../image-future/default/test/index.test.js   |  6 +--
 .../image-future/noscript/pages/index.js      | 10 +++-
 .../image-future/noscript/test/index.test.js  | 52 ++++++++++++-------
 4 files changed, 44 insertions(+), 26 deletions(-)

diff --git a/packages/next/client/future/image.tsx b/packages/next/client/future/image.tsx
index 26d88f8dff..121acda416 100644
--- a/packages/next/client/future/image.tsx
+++ b/packages/next/client/future/image.tsx
@@ -677,7 +677,7 @@ const ImageElement = ({
           }
         }}
       />
-      {(isLazy || placeholder === 'blur') && (
+      {placeholder === 'blur' && (
         <noscript>
           <img
             {...rest}
diff --git a/test/integration/image-future/default/test/index.test.js b/test/integration/image-future/default/test/index.test.js
index 2e0375dfb5..920e0f1d6b 100644
--- a/test/integration/image-future/default/test/index.test.js
+++ b/test/integration/image-future/default/test/index.test.js
@@ -169,11 +169,9 @@ function runTests(mode) {
     const $html = cheerio.load(html)
 
     const els = [].slice.apply($html('img'))
-    expect(els.length).toBe(2)
+    expect(els.length).toBe(1)
 
-    const [el, noscriptEl] = els
-    expect(noscriptEl.attribs.src).toBeDefined()
-    expect(noscriptEl.attribs.srcset).toBeDefined()
+    const [el] = els
 
     expect(el.attribs.src).not.toBe('/truck.jpg')
     expect(el.attribs.srcset).not.toBe(
diff --git a/test/integration/image-future/noscript/pages/index.js b/test/integration/image-future/noscript/pages/index.js
index a753d136f9..37a6af0f20 100644
--- a/test/integration/image-future/noscript/pages/index.js
+++ b/test/integration/image-future/noscript/pages/index.js
@@ -9,7 +9,7 @@ const Page = () => {
   return (
     <div>
       <p>noscript images</p>
-      <Image id="basic-image" src="/basic-image.jpg" width={640} height={360} />
+      <Image id="basic-image" src="/basic.jpg" width={640} height={360} />
       <Image
         loader={myLoader}
         id="image-with-loader"
@@ -17,6 +17,14 @@ const Page = () => {
         width={640}
         height={360}
       />
+      <Image
+        id="image-with-blur"
+        src="/blur.jpg"
+        width={640}
+        height={360}
+        placeholder="blur"
+        blurDataURL="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mMU/M9QDwADygGR4qH9qQAAAABJRU5ErkJggg=="
+      />
     </div>
   )
 }
diff --git a/test/integration/image-future/noscript/test/index.test.js b/test/integration/image-future/noscript/test/index.test.js
index 01d4260b83..ed4ed1ed31 100644
--- a/test/integration/image-future/noscript/test/index.test.js
+++ b/test/integration/image-future/noscript/test/index.test.js
@@ -3,8 +3,9 @@
 import { join } from 'path'
 import cheerio from 'cheerio'
 import {
-  killApp,
   findPort,
+  killApp,
+  launchApp,
   nextStart,
   nextBuild,
   renderViaHTTP,
@@ -14,29 +15,40 @@ const appDir = join(__dirname, '../')
 let appPort
 let app
 
-describe('Noscript Tests', () => {
-  beforeAll(async () => {
-    await nextBuild(appDir)
-    appPort = await findPort()
-    app = await nextStart(appDir, appPort)
+function runTests() {
+  it('should include noscript for placeholder=blur but not others', async () => {
+    const html = await renderViaHTTP(appPort, '/')
+    const $ = cheerio.load(html)
+
+    expect($('noscript > img#basic-image').attr('src')).toBeUndefined()
+    expect($('noscript > img#image-with-loader').attr('src')).toBeUndefined()
+    expect($('noscript > img#image-with-blur').attr('src')).toMatch('blur.jpg')
   })
-  afterAll(() => killApp(app))
-  describe('Noscript page source tests', () => {
-    it('should use local API for noscript img#basic-image src attribute', async () => {
-      const html = await renderViaHTTP(appPort, '/')
-      const $ = cheerio.load(html)
+}
 
-      expect($('noscript > img#basic-image').attr('src')).toMatch(
-        /^\/_next\/image/
-      )
+describe('Future Image Component Noscript Tests', () => {
+  describe('dev mode', () => {
+    beforeAll(async () => {
+      appPort = await findPort()
+      app = await launchApp(appDir, appPort)
+    })
+    afterAll(async () => {
+      await killApp(app)
     })
-    it('should use loader url for noscript img#image-with-loader src attribute', async () => {
-      const html = await renderViaHTTP(appPort, '/')
-      const $ = cheerio.load(html)
 
-      expect($('noscript > img#image-with-loader').attr('src')).toMatch(
-        /^https:\/\/example\.vercel\.sh/
-      )
+    runTests()
+  })
+
+  describe('server mode', () => {
+    beforeAll(async () => {
+      await nextBuild(appDir)
+      appPort = await findPort()
+      app = await nextStart(appDir, appPort)
     })
+    afterAll(async () => {
+      await killApp(app)
+    })
+
+    runTests()
   })
 })