chore: run all tests for next/image against app dir

test/integration/next-image-new/app-dir/app/blob/page.js

@@ -0,0 +1,27 @@
+'use client'
+import React, { useEffect, useState } from 'react'
+import Image from 'next/image'
+
+const Page = () => {
+  const [src, setSrc] = useState()
+
+  useEffect(() => {
+    fetch('/test.jpg')
+      .then((res) => {
+        return res.blob()
+      })
+      .then((blob) => {
+        const url = URL.createObjectURL(blob)
+        setSrc(url)
+      })
+  }, [])
+
+  return (
+    <div>
+      <p>Blob URL</p>
+      {src ? <Image id="blob-image" src={src} width="10" height="10" /> : null}
+    </div>
+  )
+}
+
+export default Page

test/integration/next-image-new/app-dir/app/blurry-placeholder/page.js

@@ -0,0 +1,31 @@
+import React from 'react'
+import Image from 'next/image'
+
+export default function Page() {
+  return (
+    <div>
+      <p>Blurry Placeholder</p>
+
+      <Image
+        priority
+        id="blurry-placeholder-raw"
+        src="/test.ico"
+        width="400"
+        height="400"
+        placeholder="blur"
+        blurDataURL="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8P4nhDwAGuAKPn6cicwAAAABJRU5ErkJggg=="
+      />
+
+      <div id="spacer" style={{ height: '1000vh' }} />
+
+      <Image
+        id="blurry-placeholder-with-lazy"
+        src="/test.bmp"
+        width="400"
+        height="400"
+        placeholder="blur"
+        blurDataURL="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mO0/8/wBwAE/wI85bEJ6gAAAABJRU5ErkJggg=="
+      />
+    </div>
+  )
+}

test/integration/next-image-new/app-dir/app/data-url-with-fill-and-sizes/page.js

@@ -0,0 +1,16 @@
+import React from 'react'
+import Image from 'next/image'
+
+export default function Page() {
+  return (
+    <div style={{ position: 'absolute', width: '200px', height: '200px' }}>
+      <p>Data Url With Fill And Sizes</p>
+      <Image
+        src="data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http%3A//www.w3.org/2000/svg' %3E%3Cfilter id='b' color-interpolation-filters='sRGB'%3E%3CfeGaussianBlur stdDeviation='20'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='discrete' tableValues='1 1'/%3E%3C/feComponentTransfer%3E%%3C/filter%3E%3Cimage filter='url(%23b)' x='0' y='0' height='100%' width='100%' preserveAspectRatio='none' href='data:image/jpeg;base64,/9j/2wBDAAYEBQYFBAYGBQYHBwYIChAKCgkJChQODwwQFxQYGBcUFhYaHSUfGhsjHBYWICwgIyYnKSopGR8tMC0oMCUoKSj/2wBDAQcHBwoIChMKChMoGhYaKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCj/wAARCAAIAAgDASIAAhEBAxEB/8QAFQABAQAAAAAAAAAAAAAAAAAAAAL/xAAeEAABBAIDAQAAAAAAAAAAAAACAAEDBAUhBhRRsf/EABQBAQAAAAAAAAAAAAAAAAAAAAL/xAAWEQEBAQAAAAAAAAAAAAAAAAABAgD/2gAMAwEAAhEDEQA/ALPk+UoW6g46eca0oGFouu7NoNE3m/iIiZEmLbv/2Q=='/%3E%3C/svg%3E"
+        alt="test"
+        fill
+        sizes="200px"
+      />
+    </div>
+  )
+}

test/integration/next-image-new/app-dir/app/drop-srcset/page.js

@@ -0,0 +1,20 @@
+import React from 'react'
+import Image from 'next/image'
+
+const Page = () => {
+  return (
+    <div>
+      <p>Drop srcSet prop (cannot be manually provided)</p>
+      <Image
+        src="/truck.jpg"
+        width={300}
+        height={100}
+        srcSet="/truck375.jpg 375w, /truck640.jpg 640w, /truck.jpg"
+        sizes="(max-width: 375px) 375px, 100%"
+      />
+      <p>Assign sizes prop</p>
+    </div>
+  )
+}
+
+export default Page

test/integration/next-image-new/app-dir/app/dynamic-static-img/page.js

@@ -0,0 +1,13 @@
+import dynamic from 'next/dynamic'
+
+const DynamicStaticImg = dynamic(() => import('../../components/static-img'), {
+  ssr: false,
+})
+
+export default () => {
+  return (
+    <div>
+      <DynamicStaticImg />
+    </div>
+  )
+}

test/integration/next-image-new/app-dir/app/fill-blur/page.js

@@ -0,0 +1,49 @@
+import React from 'react'
+import Image from 'next/image'
+
+// We don't use a static import intentionally
+const blurDataURL =
+  'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAFCAAAAABd+vKJAAAANklEQVR42mNg4GRwdWBgZ2BgUGI4dYhBmYFBgiHy308PBlEGKYbr//9fYJBlYDBYv3nzGkUGANGMDBq2MCnBAAAAAElFTkSuQmCC'
+
+export default function Page() {
+  return (
+    <>
+      <p>Image with fill with blurDataURL</p>
+      <div style={{ position: 'relative', display: 'flex', minHeight: '30vh' }}>
+        <Image
+          fill
+          alt="alt"
+          src="/wide.png"
+          placeholder="blur"
+          blurDataURL={blurDataURL}
+          id="fit-cover"
+          style={{ objectFit: 'cover' }}
+        />
+      </div>
+
+      <div style={{ position: 'relative', display: 'flex', minHeight: '30vh' }}>
+        <Image
+          fill
+          alt="alt"
+          src="/wide.png"
+          placeholder="blur"
+          blurDataURL={blurDataURL}
+          id="fit-contain"
+          style={{ objectFit: 'contain' }}
+        />
+      </div>
+
+      <div style={{ position: 'relative', display: 'flex', minHeight: '30vh' }}>
+        <Image
+          fill
+          alt="alt"
+          src="/wide.png"
+          placeholder="blur"
+          blurDataURL={blurDataURL}
+          id="fit-fill"
+          style={{ objectFit: 'fill' }}
+        />
+      </div>
+    </>
+  )
+}

test/integration/next-image-new/app-dir/app/fill-warnings/page.js

@@ -0,0 +1,35 @@
+import React from 'react'
+import Image from 'next/image'
+
+const Page = () => {
+  return (
+    <div>
+      <h1>Fill Mode</h1>
+      <div
+        id="image-container-1"
+        style={{
+          height: '300px',
+          width: '300px',
+          position: 'relative',
+          overflow: 'hidden',
+        }}
+      >
+        <Image id="fill-image-1" src="/wide.png" fill />
+      </div>
+      <div id="image-container-2">
+        <Image id="fill-image-2" src="/wide.png" fill />
+      </div>
+      <div
+        id="image-container-3"
+        style={{
+          position: 'relative',
+          overflow: 'hidden',
+        }}
+      >
+        <Image id="fill-image-3" src="/wide.png" fill />
+      </div>
+    </div>
+  )
+}
+
+export default Page

test/integration/next-image-new/app-dir/app/fill/page.js

@@ -0,0 +1,42 @@
+import React from 'react'
+import Image from 'next/image'
+
+import test from '../../public/test.jpg'
+
+const Page = () => {
+  return (
+    <div>
+      <h1>Fill Mode</h1>
+      <div
+        id="image-container-1"
+        style={{
+          height: '300px',
+          width: '300px',
+          position: 'relative',
+          overflow: 'hidden',
+        }}
+      >
+        <Image id="fill-image-1" src="/wide.png" sizes="300px" fill />
+      </div>
+      <div
+        id="image-container-blur"
+        style={{
+          height: '300px',
+          width: '300px',
+          position: 'relative',
+          overflow: 'hidden',
+        }}
+      >
+        <Image
+          id="fill-image-blur"
+          src={test}
+          sizes="300px"
+          placeholder="blur"
+          fill
+        />
+      </div>
+    </div>
+  )
+}
+
+export default Page

test/integration/next-image-new/app-dir/app/flex/page.js

@@ -0,0 +1,20 @@
+'use client'
+import React from 'react'
+import Image from 'next/image'
+
+const Page = () => {
+  return (
+    <div>
+      <p>Hello World</p>
+      <Image id="basic-image" src="/test.jpg" width={400} height={400}></Image>
+      <p id="stubtext">This is the index page</p>
+      <style jsx>{`
+        div {
+          display: flex;
+        }
+      `}</style>
+    </div>
+  )
+}
+
+export default Page

test/integration/next-image-new/app-dir/app/hidden-parent/page.js

@@ -0,0 +1,21 @@
+import Image from 'next/image'
+import React from 'react'
+
+const Page = () => {
+  return (
+    <div>
+      <p>Hello World</p>
+      <div style={{ visibility: 'hidden' }}>
+        <Image
+          id="hidden-image"
+          src="/test.jpg"
+          width="400"
+          height="400"
+        ></Image>
+      </div>
+      <p id="stubtext">This is the hidden parent page</p>
+    </div>
+  )
+}
+
+export default Page

test/integration/next-image-new/app-dir/app/inside-paragraph/page.js

@@ -0,0 +1,13 @@
+import React from 'react'
+import Image from 'next/image'
+import img from '../../public/test.jpg'
+
+const Page = () => {
+  return (
+    <p>
+      <Image id="inside-paragraph" src={img} />
+    </p>
+  )
+}
+
+export default Page

test/integration/next-image-new/app-dir/app/invalid-fill-position/page.js

@@ -0,0 +1,28 @@
+import React from 'react'
+import Image from 'next/image'
+
+const Page = () => {
+  return (
+    <div>
+      <h1>Fill Mode</h1>
+      <div
+        id="image-container-1"
+        style={{
+          height: '300px',
+          width: '300px',
+          position: 'relative',
+          overflow: 'hidden',
+        }}
+      >
+        <Image
+          id="fill-image-1"
+          src="/wide.png"
+          fill
+          style={{ position: 'relative' }}
+        />
+      </div>
+    </div>
+  )
+}
+
+export default Page

test/integration/next-image-new/app-dir/app/invalid-fill-width/page.js

@@ -0,0 +1,29 @@
+import React from 'react'
+import Image from 'next/image'
+
+const Page = () => {
+  return (
+    <div>
+      <h1>Fill Mode</h1>
+      <div
+        id="image-container-1"
+        style={{
+          height: '300px',
+          width: '300px',
+          position: 'relative',
+          overflow: 'hidden',
+        }}
+      >
+        <Image
+          id="fill-image-1"
+          src="/wide.png"
+          width="500px"
+          height="400px"
+          fill
+        />
+      </div>
+    </div>
+  )
+}
+
+export default Page

test/integration/next-image-new/app-dir/app/invalid-height/page.js

@@ -0,0 +1,12 @@
+import React from 'react'
+import Image from 'next/image'
+
+export default function Page() {
+  return (
+    <div>
+      <p>Invalid height</p>
+
+      <Image src="/test.jpg" width={400} height="50vh" />
+    </div>
+  )
+}