Add test for appdir referenced images (#49242)

### What? Regression test for #49236 ### Why? ### How?
vercel · May 10, 2023 · ba4c2f2 · ba4c2f2
1 parent 4743dc6
commit ba4c2f2
Show file tree

Hide file tree

Showing 6 changed files with 72 additions and 12 deletions.
diff --git a/packages/next-swc/crates/next-dev-tests/tests/integration/next/image/app/input/app/layout.js b/packages/next-swc/crates/next-dev-tests/tests/integration/next/image/app/input/app/layout.js
@@ -0,0 +1,7 @@
+export default function RootLayout({ children }) {
+  return (
+    <html>
+      <body>{children}</body>
+    </html>
+  )
+}
diff --git a/packages/next-swc/crates/next-dev-tests/tests/integration/next/image/app/input/app/page.js b/packages/next-swc/crates/next-dev-tests/tests/integration/next/image/app/input/app/page.js
@@ -0,0 +1,15 @@
+import Image from 'next/image'
+import img from '../public/triangle-black.png'
+import Test from './test'
+
+export default function Home() {
+  return [
+    <Image
+      id="imported"
+      alt="test imported image"
+      src={img}
+      placeholder="blur"
+    />,
+    <Test />,
+  ]
+}
diff --git a/packages/next-swc/crates/next-dev-tests/tests/integration/next/image/app/input/app/test.js b/packages/next-swc/crates/next-dev-tests/tests/integration/next/image/app/input/app/test.js
@@ -0,0 +1,16 @@
+'use client'
+import { useTestHarness } from '@turbo/pack-test-harness'
+
+export default function Test() {
+  useTestHarness(runTests)
+}
+
+function runTests() {
+  it('should link to imported image', async () => {
+    const img = document.querySelector('#imported')
+    expect(img.src).toContain(encodeURIComponent('_next/static/assets'))
+
+    const res = await fetch(img.src)
+    expect(res.status).toBe(200)
+  })
+}
diff --git a/...ages/next-swc/crates/next-dev-tests/tests/integration/next/image/app/input/next.config.js b/...ages/next-swc/crates/next-dev-tests/tests/integration/next/image/app/input/next.config.js
@@ -0,0 +1,8 @@
+/**
+ * @type {import('next').NextConfig}
+ */
+module.exports = {
+  experimental: {
+    appDir: true,
+  },
+}
diff --git a/...next-dev-tests/tests/integration/next/image/app/input/public/triangle-black.png b/...next-dev-tests/tests/integration/next/image/app/input/public/triangle-black.png
diff --git a/...es/next-swc/crates/next-dev-tests/tests/integration/next/image/basic/input/pages/index.js b/...es/next-swc/crates/next-dev-tests/tests/integration/next/image/basic/input/pages/index.js
@@ -39,26 +39,25 @@ export default function Home() {
   )
 }
 
-console.log(img)
 function runTests() {
-  it('should return image size', function () {
+  it('should return image size', () => {
     expect(img).toHaveProperty('width', 116)
     expect(img).toHaveProperty('height', 100)
   })
 
-  it('should return image size for svg', function () {
+  it('should return image size for svg', () => {
     expect(svg).toHaveProperty('width', 400)
     expect(svg).toHaveProperty('height', 400)
   })
 
-  it('should return fake image size for broken images', function () {
+  it('should return fake image size for broken images', () => {
     expect(broken).toHaveProperty('width', 100)
     expect(broken).toHaveProperty('height', 100)
     expect(brokenSvg).toHaveProperty('width', 100)
     expect(brokenSvg).toHaveProperty('height', 100)
   })
 
-  it('should have blur placeholder', function () {
+  it('should have blur placeholder', () => {
     expect(img).toHaveProperty(
       'blurDataURL',
       expect.stringMatching(/^data:image\/png;base64/)
@@ -67,13 +66,13 @@ function runTests() {
     expect(img).toHaveProperty('blurHeight', 7)
   })
 
-  it('should not have blur placeholder for svg', function () {
+  it('should not have blur placeholder for svg', () => {
     expect(svg).toHaveProperty('blurDataURL', null)
     expect(svg).toHaveProperty('blurWidth', 0)
     expect(svg).toHaveProperty('blurHeight', 0)
   })
 
-  it('should have fake blur placeholder for broken images', function () {
+  it('should have fake blur placeholder for broken images', () => {
     expect(broken).toHaveProperty(
       'blurDataURL',
       expect.stringContaining('data:')
@@ -82,28 +81,43 @@ function runTests() {
     expect(broken).toHaveProperty('blurHeight', 1)
   })
 
-  it('should link to imported image', function () {
+  it('should link to imported image', async () => {
     const img = document.querySelector('#imported')
     expect(img.src).toContain(encodeURIComponent('_next/static/assets'))
+
+    const res = await fetch(img.src)
+    expect(res.status).toBe(200)
   })
 
-  it('should link to imported svg image', function () {
+  it('should link to imported svg image', async () => {
     const img = document.querySelector('#svg')
     expect(img.src).toContain('_next/static/assets')
+
+    const res = await fetch(img.src)
+    expect(res.status).toBe(200)
   })
 
-  it('should link to local src image', function () {
+  it('should link to local src image', async () => {
     const img = document.querySelector('#local')
     expect(img.src).toContain('triangle-black')
+
+    const res = await fetch(img.src)
+    expect(res.status).toBe(200)
   })
 
-  it('should link to imported broken image', function () {
+  it('should link to imported broken image', async () => {
     const img = document.querySelector('#broken')
     expect(img.src).toContain(encodeURIComponent('_next/static/assets'))
+
+    const res = await fetch(img.src)
+    expect(res.status).toBe(404)
   })
 
-  it('should link to imported broken svg image', function () {
+  it('should link to imported broken svg image', async () => {
     const img = document.querySelector('#broken-svg')
     expect(img.src).toContain('_next/static/assets')
+
+    const res = await fetch(img.src)
+    expect(res.status).toBe(200)
   })
 }