From 8a76a8f0499faba1f96b69317edf49c5dd1e31bb Mon Sep 17 00:00:00 2001
From: Max Proske <max@mproske.com>
Date: Thu, 30 Jun 2022 14:10:16 -0700
Subject: [PATCH] Replace placeholder.com images with *.vercel.app in
 image-component tests (#38090)

Adds to https://github.com/vercel/next.js/pull/38081 by fixing all remaining flaky renderViaHTTP tests when placeholder.com is down.

Fixes https://github.com/vercel/next.js/pull/38080#issuecomment-1168036939

## Bug

- [X] Related issues linked using `fixes #number`

## Documentation / Examples

- [X] Make sure the linting passes by running `pnpm lint`
---
 .../image-component/typescript/next.config.js |  2 +-
 .../typescript/pages/invalid.tsx              |  6 ++---
 .../typescript/pages/valid.tsx                | 25 +++++++++++--------
 .../image-future/typescript/next.config.js    |  2 +-
 .../image-future/typescript/pages/invalid.tsx |  4 +--
 .../image-future/typescript/pages/valid.tsx   | 17 +++++++------
 6 files changed, 31 insertions(+), 25 deletions(-)

diff --git a/test/integration/image-component/typescript/next.config.js b/test/integration/image-component/typescript/next.config.js
index 51d2e7ea8f73..7e24969d36ee 100644
--- a/test/integration/image-component/typescript/next.config.js
+++ b/test/integration/image-component/typescript/next.config.js
@@ -1,6 +1,6 @@
 module.exports = {
   images: {
-    domains: ['via.placeholder.com'],
+    domains: ['image-optimization-test.vercel.app'],
     // disableStaticImages: true,
   },
 }
diff --git a/test/integration/image-component/typescript/pages/invalid.tsx b/test/integration/image-component/typescript/pages/invalid.tsx
index 0347d3d24adc..bb61eb14303c 100644
--- a/test/integration/image-component/typescript/pages/invalid.tsx
+++ b/test/integration/image-component/typescript/pages/invalid.tsx
@@ -8,20 +8,20 @@ const Invalid = () => {
       <Image id="invalid-src" src={new Date()} width={500} height={500}></Image>
       <Image
         id="invalid-width"
-        src="https://via.placeholder.com/500"
+        src="https://image-optimization-test.vercel.app/test.jpg"
         width={new Date()}
         height={500}
       ></Image>
       <Image
         id="invalid-layout"
-        src="https://via.placeholder.com/500"
+        src="https://image-optimization-test.vercel.app/test.jpg"
         width="500"
         height="500"
         layout="invalid"
       ></Image>
       <Image
         id="invalid-placeholder"
-        src="https://via.placeholder.com/500"
+        src="https://image-optimization-test.vercel.app/test.jpg"
         width="500"
         height="500"
         placeholder="invalid"
diff --git a/test/integration/image-component/typescript/pages/valid.tsx b/test/integration/image-component/typescript/pages/valid.tsx
index 8747c8e81369..14230a45ab1b 100644
--- a/test/integration/image-component/typescript/pages/valid.tsx
+++ b/test/integration/image-component/typescript/pages/valid.tsx
@@ -12,33 +12,33 @@ const Page = () => {
       <p>Valid TS</p>
       <Image
         id="width-and-height-num"
-        src="https://via.placeholder.com/500"
+        src="https://image-optimization-test.vercel.app/test.jpg"
         width={500}
         height={500}
       />
       <Image
         id="width-and-height-str"
-        src="https://via.placeholder.com/500"
+        src="https://image-optimization-test.vercel.app/test.jpg"
         width="500"
         height="500"
       />
       <div style={{ position: 'relative', width: 100, height: 100 }}>
         <Image
           id="layout-fill"
-          src="https://via.placeholder.com/100"
+          src="https://image-optimization-test.vercel.app/test.jpg"
           layout="fill"
         />
       </div>
       <Image
         id="quality-num"
-        src="https://via.placeholder.com/500"
+        src="https://image-optimization-test.vercel.app/test.jpg"
         quality={80}
         width={500}
         height={500}
       />
       <Image
         id="quality-str"
-        src="https://via.placeholder.com/500"
+        src="https://image-optimization-test.vercel.app/test.jpg"
         quality="80"
         width={500}
         height={500}
@@ -51,21 +51,21 @@ const Page = () => {
       />
       <Image
         id="object-fit-cover-position-right"
-        src="https://via.placeholder.com/500"
+        src="https://image-optimization-test.vercel.app/test.jpg"
         layout="fill"
         objectFit="cover"
         objectPosition="right"
       />
       <Image
         id="object-fit-scale-down-position-50px"
-        src="https://via.placeholder.com/500"
+        src="https://image-optimization-test.vercel.app/test.jpg"
         layout="fill"
         objectFit="scale-down"
         objectPosition="50px"
       />
       <Image
         id="placeholder-and-blur-data-url"
-        src="https://via.placeholder.com/500"
+        src="https://image-optimization-test.vercel.app/test.jpg"
         width={500}
         height={500}
         placeholder="blur"
@@ -81,15 +81,18 @@ const Page = () => {
       <Image id="object-src-with-avif" src={avif} />
       <Image
         id="fill-with-unused-width-height"
-        src="https://via.placeholder.com/200"
+        src="https://image-optimization-test.vercel.app/test.jpg"
         layout="fill"
         width={100}
         height={100}
       />
-      <ImageCard id="image-card" src="https://via.placeholder.com/300" />
+      <ImageCard
+        id="image-card"
+        src="https://image-optimization-test.vercel.app/test.jpg"
+      />
       <DynamicSrcImage
         id="dynamic-src"
-        src="https://via.placeholder.com/400"
+        src="https://image-optimization-test.vercel.app/test.jpg"
         width={400}
         height={400}
       />
diff --git a/test/integration/image-future/typescript/next.config.js b/test/integration/image-future/typescript/next.config.js
index 8a6c42add680..b58d7a90bd11 100644
--- a/test/integration/image-future/typescript/next.config.js
+++ b/test/integration/image-future/typescript/next.config.js
@@ -1,6 +1,6 @@
 module.exports = {
   images: {
-    domains: ['via.placeholder.com'],
+    domains: ['image-optimization-test.vercel.app'],
     // disableStaticImages: true,
   },
   experimental: {
diff --git a/test/integration/image-future/typescript/pages/invalid.tsx b/test/integration/image-future/typescript/pages/invalid.tsx
index 734ebc6fec9f..85a60daa6773 100644
--- a/test/integration/image-future/typescript/pages/invalid.tsx
+++ b/test/integration/image-future/typescript/pages/invalid.tsx
@@ -8,13 +8,13 @@ const Invalid = () => {
       <Image id="invalid-src" src={new Date()} width={500} height={500}></Image>
       <Image
         id="invalid-width"
-        src="https://via.placeholder.com/500"
+        src="https://image-optimization-test.vercel.app/test.jpg"
         width={new Date()}
         height={500}
       ></Image>
       <Image
         id="invalid-placeholder"
-        src="https://via.placeholder.com/500"
+        src="https://image-optimization-test.vercel.app/test.jpg"
         width="500"
         height="500"
         placeholder="invalid"
diff --git a/test/integration/image-future/typescript/pages/valid.tsx b/test/integration/image-future/typescript/pages/valid.tsx
index 03480e53c3f7..ef1f75907a3f 100644
--- a/test/integration/image-future/typescript/pages/valid.tsx
+++ b/test/integration/image-future/typescript/pages/valid.tsx
@@ -12,26 +12,26 @@ const Page = () => {
       <p>Valid TS</p>
       <Image
         id="width-and-height-num"
-        src="https://via.placeholder.com/500"
+        src="https://image-optimization-test.vercel.app/test.jpg"
         width={500}
         height={500}
       />
       <Image
         id="width-and-height-str"
-        src="https://via.placeholder.com/500"
+        src="https://image-optimization-test.vercel.app/test.jpg"
         width="500"
         height="500"
       />
       <Image
         id="quality-num"
-        src="https://via.placeholder.com/500"
+        src="https://image-optimization-test.vercel.app/test.jpg"
         quality={80}
         width={500}
         height={500}
       />
       <Image
         id="quality-str"
-        src="https://via.placeholder.com/500"
+        src="https://image-optimization-test.vercel.app/test.jpg"
         quality="80"
         width={500}
         height={500}
@@ -44,7 +44,7 @@ const Page = () => {
       />
       <Image
         id="placeholder-and-blur-data-url"
-        src="https://via.placeholder.com/500"
+        src="https://image-optimization-test.vercel.app/test.jpg"
         width={500}
         height={500}
         placeholder="blur"
@@ -58,10 +58,13 @@ const Page = () => {
       />
       <Image id="object-src-with-svg" src={svg} />
       <Image id="object-src-with-avif" src={avif} />
-      <ImageCard id="image-card" src="https://via.placeholder.com/300" />
+      <ImageCard
+        id="image-card"
+        src="https://image-optimization-test.vercel.app/test.jpg"
+      />
       <DynamicSrcImage
         id="dynamic-src"
-        src="https://via.placeholder.com/400"
+        src="https://image-optimization-test.vercel.app/test.jpg"
         width={400}
         height={400}
       />