Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Add test fixture
e2e/app-dir/next-image
(#41609)
This PR adds a test fixture `e2e/app-dir/next-image` to ensure `next/image` works with the `app` dir.
- Loading branch information
Showing
13 changed files
with
441 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,318 @@ | ||
import { createNext, FileRef } from 'e2e-utils' | ||
import { NextInstance } from 'test/lib/next-modes/base' | ||
import { fetchViaHTTP, renderViaHTTP } from 'next-test-utils' | ||
import cheerio from 'cheerio' | ||
import path from 'path' | ||
import webdriver from 'next-webdriver' | ||
|
||
describe('app dir next-image', () => { | ||
if ((global as any).isNextDeploy) { | ||
it('should skip next deploy for now', () => {}) | ||
return | ||
} | ||
|
||
if (process.env.NEXT_TEST_REACT_VERSION === '^17') { | ||
it('should skip for react v17', () => {}) | ||
return | ||
} | ||
let next: NextInstance | ||
|
||
beforeAll(async () => { | ||
next = await createNext({ | ||
files: new FileRef(path.join(__dirname, 'next-image')), | ||
dependencies: { | ||
react: 'experimental', | ||
'react-dom': 'experimental', | ||
}, | ||
skipStart: true, | ||
}) | ||
await next.start() | ||
}) | ||
afterAll(() => next.destroy()) | ||
|
||
describe('ssr content', () => { | ||
it('should render images on / route', async () => { | ||
const html = await renderViaHTTP(next.url, '/') | ||
const $ = cheerio.load(html) | ||
|
||
const layout = $('#app-layout') | ||
expect(layout.attr('src')).toBe( | ||
'/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Ftest.3f1a293b.png&w=828&q=85' | ||
) | ||
expect(layout.attr('srcset')).toBe( | ||
'/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Ftest.3f1a293b.png&w=640&q=85 1x, /_next/image?url=%2F_next%2Fstatic%2Fmedia%2Ftest.3f1a293b.png&w=828&q=85 2x' | ||
) | ||
|
||
const page = $('#app-page') | ||
expect(page.attr('src')).toBe( | ||
'/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Ftest.3f1a293b.png&w=828&q=90' | ||
) | ||
expect(page.attr('srcset')).toBe( | ||
'/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Ftest.3f1a293b.png&w=640&q=90 1x, /_next/image?url=%2F_next%2Fstatic%2Fmedia%2Ftest.3f1a293b.png&w=828&q=90 2x' | ||
) | ||
|
||
const comp = $('#app-comp') | ||
expect(comp.attr('src')).toBe( | ||
'/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Ftest.3f1a293b.png&w=828&q=80' | ||
) | ||
expect(comp.attr('srcset')).toBe( | ||
'/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Ftest.3f1a293b.png&w=640&q=80 1x, /_next/image?url=%2F_next%2Fstatic%2Fmedia%2Ftest.3f1a293b.png&w=828&q=80 2x' | ||
) | ||
}) | ||
|
||
it('should render images on /client route', async () => { | ||
const html = await renderViaHTTP(next.url, '/client') | ||
const $ = cheerio.load(html) | ||
|
||
const root = $('#app-layout') | ||
expect(root.attr('src')).toBe( | ||
'/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Ftest.3f1a293b.png&w=828&q=85' | ||
) | ||
expect(root.attr('srcset')).toBe( | ||
'/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Ftest.3f1a293b.png&w=640&q=85 1x, /_next/image?url=%2F_next%2Fstatic%2Fmedia%2Ftest.3f1a293b.png&w=828&q=85 2x' | ||
) | ||
|
||
const layout = $('#app-client-layout') | ||
expect(layout.attr('src')).toBe( | ||
'/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Ftest.3f1a293b.png&w=828&q=55' | ||
) | ||
expect(layout.attr('srcset')).toBe( | ||
'/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Ftest.3f1a293b.png&w=640&q=55 1x, /_next/image?url=%2F_next%2Fstatic%2Fmedia%2Ftest.3f1a293b.png&w=828&q=55 2x' | ||
) | ||
|
||
const page = $('#app-client-page') | ||
expect(page.attr('src')).toBe( | ||
'/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Ftest.3f1a293b.png&w=828&q=60' | ||
) | ||
expect(page.attr('srcset')).toBe( | ||
'/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Ftest.3f1a293b.png&w=640&q=60 1x, /_next/image?url=%2F_next%2Fstatic%2Fmedia%2Ftest.3f1a293b.png&w=828&q=60 2x' | ||
) | ||
|
||
const comp = $('#app-client-comp') | ||
expect(comp.attr('src')).toBe( | ||
'/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Ftest.3f1a293b.png&w=828&q=50' | ||
) | ||
expect(comp.attr('srcset')).toBe( | ||
'/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Ftest.3f1a293b.png&w=640&q=50 1x, /_next/image?url=%2F_next%2Fstatic%2Fmedia%2Ftest.3f1a293b.png&w=828&q=50 2x' | ||
) | ||
}) | ||
|
||
it('should render images nested under page dir on /nested route', async () => { | ||
const html = await renderViaHTTP(next.url, '/nested') | ||
const $ = cheerio.load(html) | ||
|
||
const root = $('#app-layout') | ||
expect(root.attr('src')).toBe( | ||
'/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Ftest.3f1a293b.png&w=828&q=85' | ||
) | ||
expect(root.attr('srcset')).toBe( | ||
'/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Ftest.3f1a293b.png&w=640&q=85 1x, /_next/image?url=%2F_next%2Fstatic%2Fmedia%2Ftest.3f1a293b.png&w=828&q=85 2x' | ||
) | ||
|
||
const layout = $('#app-nested-layout') | ||
expect(layout.attr('src')).toBe( | ||
'/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Ftest.fab2915d.jpg&w=828&q=70' | ||
) | ||
expect(layout.attr('srcset')).toBe( | ||
'/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Ftest.fab2915d.jpg&w=640&q=70 1x, /_next/image?url=%2F_next%2Fstatic%2Fmedia%2Ftest.fab2915d.jpg&w=828&q=70 2x' | ||
) | ||
|
||
const page = $('#app-nested-page') | ||
expect(page.attr('src')).toBe( | ||
'/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Ftest.fab2915d.jpg&w=828&q=75' | ||
) | ||
expect(page.attr('srcset')).toBe( | ||
'/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Ftest.fab2915d.jpg&w=640&q=75 1x, /_next/image?url=%2F_next%2Fstatic%2Fmedia%2Ftest.fab2915d.jpg&w=828&q=75 2x' | ||
) | ||
|
||
const comp = $('#app-nested-comp') | ||
expect(comp.attr('src')).toBe( | ||
'/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Ftest.fab2915d.jpg&w=828&q=65' | ||
) | ||
expect(comp.attr('srcset')).toBe( | ||
'/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Ftest.fab2915d.jpg&w=640&q=65 1x, /_next/image?url=%2F_next%2Fstatic%2Fmedia%2Ftest.fab2915d.jpg&w=828&q=65 2x' | ||
) | ||
}) | ||
}) | ||
|
||
describe('browser content', () => { | ||
it('should render images on / route', async () => { | ||
const browser = await webdriver(next.url, '/') | ||
|
||
const layout = await browser.elementById('app-layout') | ||
expect(await layout.getAttribute('src')).toBe( | ||
'/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Ftest.3f1a293b.png&w=828&q=85' | ||
) | ||
expect(await layout.getAttribute('srcset')).toBe( | ||
'/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Ftest.3f1a293b.png&w=640&q=85 1x, /_next/image?url=%2F_next%2Fstatic%2Fmedia%2Ftest.3f1a293b.png&w=828&q=85 2x' | ||
) | ||
|
||
const page = await browser.elementById('app-page') | ||
expect(await page.getAttribute('src')).toBe( | ||
'/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Ftest.3f1a293b.png&w=828&q=90' | ||
) | ||
expect(await page.getAttribute('srcset')).toBe( | ||
'/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Ftest.3f1a293b.png&w=640&q=90 1x, /_next/image?url=%2F_next%2Fstatic%2Fmedia%2Ftest.3f1a293b.png&w=828&q=90 2x' | ||
) | ||
|
||
const comp = await browser.elementById('app-comp') | ||
expect(await comp.getAttribute('src')).toBe( | ||
'/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Ftest.3f1a293b.png&w=828&q=80' | ||
) | ||
expect(await comp.getAttribute('srcset')).toBe( | ||
'/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Ftest.3f1a293b.png&w=640&q=80 1x, /_next/image?url=%2F_next%2Fstatic%2Fmedia%2Ftest.3f1a293b.png&w=828&q=80 2x' | ||
) | ||
}) | ||
|
||
it('should render images on /client route', async () => { | ||
const browser = await webdriver(next.url, '/client') | ||
|
||
const root = await browser.elementById('app-layout') | ||
expect(await root.getAttribute('src')).toBe( | ||
'/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Ftest.3f1a293b.png&w=828&q=85' | ||
) | ||
expect(await root.getAttribute('srcset')).toBe( | ||
'/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Ftest.3f1a293b.png&w=640&q=85 1x, /_next/image?url=%2F_next%2Fstatic%2Fmedia%2Ftest.3f1a293b.png&w=828&q=85 2x' | ||
) | ||
|
||
const layout = await browser.elementById('app-client-layout') | ||
expect(await layout.getAttribute('src')).toBe( | ||
'/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Ftest.3f1a293b.png&w=828&q=55' | ||
) | ||
expect(await layout.getAttribute('srcset')).toBe( | ||
'/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Ftest.3f1a293b.png&w=640&q=55 1x, /_next/image?url=%2F_next%2Fstatic%2Fmedia%2Ftest.3f1a293b.png&w=828&q=55 2x' | ||
) | ||
|
||
const page = await browser.elementById('app-client-page') | ||
expect(await page.getAttribute('src')).toBe( | ||
'/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Ftest.3f1a293b.png&w=828&q=60' | ||
) | ||
expect(await page.getAttribute('srcset')).toBe( | ||
'/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Ftest.3f1a293b.png&w=640&q=60 1x, /_next/image?url=%2F_next%2Fstatic%2Fmedia%2Ftest.3f1a293b.png&w=828&q=60 2x' | ||
) | ||
|
||
const comp = await browser.elementById('app-client-comp') | ||
expect(await comp.getAttribute('src')).toBe( | ||
'/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Ftest.3f1a293b.png&w=828&q=50' | ||
) | ||
expect(await comp.getAttribute('srcset')).toBe( | ||
'/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Ftest.3f1a293b.png&w=640&q=50 1x, /_next/image?url=%2F_next%2Fstatic%2Fmedia%2Ftest.3f1a293b.png&w=828&q=50 2x' | ||
) | ||
}) | ||
|
||
it('should render images nested under page dir on /nested route', async () => { | ||
const browser = await webdriver(next.url, '/nested') | ||
|
||
const root = await browser.elementById('app-layout') | ||
expect(await root.getAttribute('src')).toBe( | ||
'/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Ftest.3f1a293b.png&w=828&q=85' | ||
) | ||
expect(await root.getAttribute('srcset')).toBe( | ||
'/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Ftest.3f1a293b.png&w=640&q=85 1x, /_next/image?url=%2F_next%2Fstatic%2Fmedia%2Ftest.3f1a293b.png&w=828&q=85 2x' | ||
) | ||
|
||
const layout = await browser.elementById('app-nested-layout') | ||
expect(await layout.getAttribute('src')).toBe( | ||
'/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Ftest.fab2915d.jpg&w=828&q=70' | ||
) | ||
expect(await layout.getAttribute('srcset')).toBe( | ||
'/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Ftest.fab2915d.jpg&w=640&q=70 1x, /_next/image?url=%2F_next%2Fstatic%2Fmedia%2Ftest.fab2915d.jpg&w=828&q=70 2x' | ||
) | ||
|
||
const page = await browser.elementById('app-nested-page') | ||
expect(await page.getAttribute('src')).toBe( | ||
'/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Ftest.fab2915d.jpg&w=828&q=75' | ||
) | ||
expect(await page.getAttribute('srcset')).toBe( | ||
'/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Ftest.fab2915d.jpg&w=640&q=75 1x, /_next/image?url=%2F_next%2Fstatic%2Fmedia%2Ftest.fab2915d.jpg&w=828&q=75 2x' | ||
) | ||
|
||
const comp = await browser.elementById('app-nested-comp') | ||
expect(await comp.getAttribute('src')).toBe( | ||
'/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Ftest.fab2915d.jpg&w=828&q=65' | ||
) | ||
expect(await comp.getAttribute('srcset')).toBe( | ||
'/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Ftest.fab2915d.jpg&w=640&q=65 1x, /_next/image?url=%2F_next%2Fstatic%2Fmedia%2Ftest.fab2915d.jpg&w=828&q=65 2x' | ||
) | ||
}) | ||
}) | ||
|
||
describe('image content', () => { | ||
it('should render images on / route', async () => { | ||
const html = await renderViaHTTP(next.url, '/') | ||
const $ = cheerio.load(html) | ||
|
||
const res1 = await fetchViaHTTP(next.url, $('#app-layout').attr('src')) | ||
expect(res1.status).toBe(200) | ||
expect(res1.headers.get('content-type')).toBe('image/png') | ||
|
||
const res2 = await fetchViaHTTP(next.url, $('#app-page').attr('src')) | ||
expect(res2.status).toBe(200) | ||
expect(res2.headers.get('content-type')).toBe('image/png') | ||
|
||
const res3 = await fetchViaHTTP(next.url, $('#app-comp').attr('src')) | ||
expect(res3.status).toBe(200) | ||
expect(res3.headers.get('content-type')).toBe('image/png') | ||
}) | ||
|
||
it('should render images on /client route', async () => { | ||
const html = await renderViaHTTP(next.url, '/client') | ||
const $ = cheerio.load(html) | ||
|
||
const res1 = await fetchViaHTTP(next.url, $('#app-layout').attr('src')) | ||
expect(res1.status).toBe(200) | ||
expect(res1.headers.get('content-type')).toBe('image/png') | ||
|
||
const res2 = await fetchViaHTTP( | ||
next.url, | ||
$('#app-client-layout').attr('src') | ||
) | ||
expect(res2.status).toBe(200) | ||
expect(res2.headers.get('content-type')).toBe('image/png') | ||
|
||
const res3 = await fetchViaHTTP( | ||
next.url, | ||
$('#app-client-page').attr('src') | ||
) | ||
expect(res3.status).toBe(200) | ||
expect(res3.headers.get('content-type')).toBe('image/png') | ||
|
||
const res4 = await fetchViaHTTP( | ||
next.url, | ||
$('#app-client-comp').attr('src') | ||
) | ||
expect(res4.status).toBe(200) | ||
expect(res4.headers.get('content-type')).toBe('image/png') | ||
}) | ||
|
||
it('should render images nested under page dir on /nested route', async () => { | ||
const html = await renderViaHTTP(next.url, '/nested') | ||
const $ = cheerio.load(html) | ||
|
||
const res1 = await fetchViaHTTP(next.url, $('#app-layout').attr('src')) | ||
expect(res1.status).toBe(200) | ||
expect(res1.headers.get('content-type')).toBe('image/png') | ||
|
||
const res2 = await fetchViaHTTP( | ||
next.url, | ||
$('#app-nested-layout').attr('src') | ||
) | ||
expect(res2.status).toBe(200) | ||
expect(res2.headers.get('content-type')).toBe('image/jpeg') | ||
|
||
const res3 = await fetchViaHTTP( | ||
next.url, | ||
$('#app-nested-page').attr('src') | ||
) | ||
expect(res3.status).toBe(200) | ||
expect(res3.headers.get('content-type')).toBe('image/jpeg') | ||
|
||
const res4 = await fetchViaHTTP( | ||
next.url, | ||
$('#app-nested-comp').attr('src') | ||
) | ||
expect(res4.status).toBe(200) | ||
expect(res4.headers.get('content-type')).toBe('image/jpeg') | ||
}) | ||
}) | ||
}) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,11 @@ | ||
import Image from 'next/image' | ||
import testPng from '../images/test.png' | ||
|
||
export default function Comp() { | ||
return ( | ||
<div> | ||
<h2>app-comp</h2> | ||
<Image id="app-comp" src={testPng} quality={80} /> | ||
</div> | ||
) | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,12 @@ | ||
'use client' | ||
import Image from 'next/image' | ||
import testPng from '../../images/test.png' | ||
|
||
export default function Comp() { | ||
return ( | ||
<div> | ||
<h2>app-client-comp</h2> | ||
<Image id="app-client-comp" src={testPng} quality={50} /> | ||
</div> | ||
) | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,13 @@ | ||
'use client' | ||
import Image from 'next/image' | ||
import testPng from '../../images/test.png' | ||
|
||
export default function ClientLayout({ children }) { | ||
return ( | ||
<> | ||
<h2>app-client-layout</h2> | ||
<Image id="app-client-layout" src={testPng} quality={55} /> | ||
{children} | ||
</> | ||
) | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,14 @@ | ||
'use client' | ||
import Comp from './Comp' | ||
import Image from 'next/image' | ||
import testPng from '../../images/test.png' | ||
|
||
export default function ClientPage() { | ||
return ( | ||
<> | ||
<h2>app-client-page</h2> | ||
<Image id="app-client-page" src={testPng} quality={60} /> | ||
<Comp /> | ||
</> | ||
) | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,17 @@ | ||
import Image from 'next/image' | ||
import testPng from '../images/test.png' | ||
|
||
export default function Layout({ children }) { | ||
return ( | ||
<html> | ||
<head> | ||
<title>Hello World</title> | ||
</head> | ||
<body> | ||
<h2>app-layout</h2> | ||
<Image id="app-layout" src={testPng} quality={85} /> | ||
{children} | ||
</body> | ||
</html> | ||
) | ||
} |
Oops, something went wrong.