Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Add test for appdir referenced images #49242

Merged
merged 4 commits into from May 10, 2023
Merged

Add test for appdir referenced images #49242

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
5213fea
Add test for appdir referenced images
jridgewell May 4, 2023
fb13553
Remove console.log
jridgewell May 5, 2023
b6854fd
Merge branch 'canary' into jrl-image-source
sokra May 9, 2023
03ff886
Merge branch 'canary' into jrl-image-source
sokra May 10, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
7 changes: 7 additions & 0 deletions packages/next-swc/crates/next-dev-tests/tests/integration/next/image/app/input/app/layout.js
View file
Open in desktop
@@ -0,0 +1,7 @@
export default function RootLayout({ children }) {
return (
<html>
<body>{children}</body>
</html>
)
}
15 changes: 15 additions & 0 deletions packages/next-swc/crates/next-dev-tests/tests/integration/next/image/app/input/app/page.js
View file
Open in desktop
@@ -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 />,
]
}
16 changes: 16 additions & 0 deletions packages/next-swc/crates/next-dev-tests/tests/integration/next/image/app/input/app/test.js
View file
Open in desktop
@@ -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)
})
}
8 changes: 8 additions & 0 deletions ...ages/next-swc/crates/next-dev-tests/tests/integration/next/image/app/input/next.config.js
View file
Open in desktop
@@ -0,0 +1,8 @@
/**
* @type {import('next').NextConfig}
*/
module.exports = {
experimental: {
appDir: true,
},
}
Binary file added ...next-dev-tests/tests/integration/next/image/app/input/public/triangle-black.png
View file
Open in desktop
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
38 changes: 26 additions & 12 deletions ...es/next-swc/crates/next-dev-tests/tests/integration/next/image/basic/input/pages/index.js
View file
Open in desktop
Expand Up @@ -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/)
Expand All @@ -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:')
Expand All @@ -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)
})
}