chore(test): test remote image from proxy (#56895)

This PR adds a test to ensure we don't regress again when using proxies
in front of Next.js with `connection: 'upgrade'`.

- Regression introduced in https://github.com/vercel/next.js/pull/56226
- Issue reported in https://github.com/vercel/next.js/issues/56038
- Rolled back in https://github.com/vercel/next.js/pull/56836

test/e2e/app-dir/next-image/app/page.js

@@ -7,6 +7,13 @@ export default function Page() {
     <>
       <h2>app-page</h2>
       <Image id="app-page" src={testPng} quality={90} />
+      <Image
+        id="remote-app-page"
+        src="https://image-optimization-test.vercel.app/test.jpg"
+        width="200"
+        height="200"
+        quality={90}
+      />
       <Comp />
     </>
   )

test/e2e/app-dir/next-image/next-image-proxy.test.ts

@@ -73,19 +73,34 @@ createNextDescribe(
         },
       })
 
-      const image = browser.elementByCss('#app-page')
-      const src = await image.getAttribute('src')
-
-      expect(src).toContain(
+      const local = await browser.elementByCss('#app-page').getAttribute('src')
+      expect(local).toContain(
         '/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Ftest.3f1a293b.png&w=828&q=90'
       )
 
-      await check(() => {
-        // we expect 3 images to load and for none of them to have errors
-        if (fulfilledCount === 3 && failCount === 0) {
-          return 'success'
-        }
-      }, 'success')
+      const remote = await browser
+        .elementByCss('#remote-app-page')
+        .getAttribute('src')
+      expect(remote).toBe(
+        '/_next/image?url=https%3A%2F%2Fimage-optimization-test.vercel.app%2Ftest.jpg&w=640&q=90'
+      )
+
+      const expected = JSON.stringify({ fulfilledCount: 4, failCount: 0 })
+      await check(() => JSON.stringify({ fulfilledCount, failCount }), expected)
+    })
+
+    it('should work with connection upgrade by removing it via filterReqHeaders()', async () => {
+      const opts = { headers: { connection: 'upgrade' } }
+      const res1 = await next.fetch(
+        '/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Ftest.3f1a293b.png&w=828&q=90',
+        opts
+      )
+      expect(res1.status).toBe(200)
+      const res2 = await next.fetch(
+        '/_next/image?url=https%3A%2F%2Fimage-optimization-test.vercel.app%2Ftest.jpg&w=640&q=90',
+        opts
+      )
+      expect(res2.status).toBe(200)
     })
 
     afterAll(() => {

test/e2e/app-dir/next-image/next.config.js

@@ -1 +1,5 @@
-module.exports = {}
+module.exports = {
+  images: {
+    remotePatterns: [{ hostname: 'image-optimization-test.vercel.app' }],
+  },
+}