From ba4c2f2b4a04bfc24843c98309a6b7ae895f17dd Mon Sep 17 00:00:00 2001 From: Justin Ridgewell Date: Wed, 10 May 2023 07:17:49 -0400 Subject: [PATCH] Add test for appdir referenced images (#49242) ### What? Regression test for https://github.com/vercel/next.js/pull/49236 ### Why? ### How? --- .../next/image/app/input/app/layout.js | 7 ++++ .../next/image/app/input/app/page.js | 15 +++++++ .../next/image/app/input/app/test.js | 16 ++++++++ .../next/image/app/input/next.config.js | 8 ++++ .../image/app/input/public/triangle-black.png | Bin 0 -> 4289 bytes .../next/image/basic/input/pages/index.js | 38 ++++++++++++------ 6 files changed, 72 insertions(+), 12 deletions(-) create mode 100644 packages/next-swc/crates/next-dev-tests/tests/integration/next/image/app/input/app/layout.js create mode 100644 packages/next-swc/crates/next-dev-tests/tests/integration/next/image/app/input/app/page.js create mode 100644 packages/next-swc/crates/next-dev-tests/tests/integration/next/image/app/input/app/test.js create mode 100644 packages/next-swc/crates/next-dev-tests/tests/integration/next/image/app/input/next.config.js create mode 100644 packages/next-swc/crates/next-dev-tests/tests/integration/next/image/app/input/public/triangle-black.png 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 new file mode 100644 index 000000000000..803f17d863c8 --- /dev/null +++ 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 ( + + {children} + + ) +} 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 new file mode 100644 index 000000000000..ad16cac70058 --- /dev/null +++ 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 [ + test imported image, + , + ] +} 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 new file mode 100644 index 000000000000..4a166a45b8e7 --- /dev/null +++ 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/packages/next-swc/crates/next-dev-tests/tests/integration/next/image/app/input/next.config.js b/packages/next-swc/crates/next-dev-tests/tests/integration/next/image/app/input/next.config.js new file mode 100644 index 000000000000..d45ffa44885d --- /dev/null +++ b/packages/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/packages/next-swc/crates/next-dev-tests/tests/integration/next/image/app/input/public/triangle-black.png b/packages/next-swc/crates/next-dev-tests/tests/integration/next/image/app/input/public/triangle-black.png new file mode 100644 index 0000000000000000000000000000000000000000..351730591885f2b53625436ec159381ba160f355 GIT binary patch literal 4289 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 literal 0 HcmV?d00001 diff --git a/packages/next-swc/crates/next-dev-tests/tests/integration/next/image/basic/input/pages/index.js b/packages/next-swc/crates/next-dev-tests/tests/integration/next/image/basic/input/pages/index.js index 05907e12cf47..da8a04e47bb6 100644 --- a/packages/next-swc/crates/next-dev-tests/tests/integration/next/image/basic/input/pages/index.js +++ b/packages/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) }) }