61f56f997c
Some checks failed
Test examples / Test Examples (20) (push) Has been cancelled
Test examples / Test Examples (22) (push) Has been cancelled
Lock Threads / action (push) Has been cancelled
Trigger Release / start (push) Has been cancelled
Stale issue handler / stale (push) Has been cancelled
Update Font Data / create-pull-request (push) Has been cancelled
build-and-deploy / deploy-target (push) Has been cancelled
build-and-deploy / build (push) Has been cancelled
build-and-deploy / stable - aarch64-unknown-linux-musl - node@16 (push) Has been cancelled
build-and-deploy / stable - x86_64-unknown-linux-musl - node@16 (push) Has been cancelled
build-and-deploy / stable - aarch64-unknown-linux-gnu - node@16 (push) Has been cancelled
build-and-deploy / stable - x86_64-unknown-linux-gnu - node@16 (push) Has been cancelled
build-and-deploy / stable - aarch64-pc-windows-msvc - node@16 (push) Has been cancelled
build-and-deploy / stable - x86_64-pc-windows-msvc - node@16 (push) Has been cancelled
build-and-deploy / stable - aarch64-apple-darwin - node@16 (push) Has been cancelled
build-and-deploy / stable - x86_64-apple-darwin - node@16 (push) Has been cancelled
build-and-deploy / build-wasm (nodejs) (push) Has been cancelled
build-and-deploy / build-wasm (web) (push) Has been cancelled
build-and-deploy / Deploy preview tarball (push) Has been cancelled
build-and-deploy / Potentially publish release (push) Has been cancelled
build-and-deploy / publish-turbopack-npm-packages (push) Has been cancelled
build-and-deploy / Deploy examples (push) Has been cancelled
build-and-deploy / thank you, build (push) Has been cancelled
build-and-deploy / Upload Turbopack Bytesize metrics to Datadog (push) Has been cancelled
Rspack Next.js development integration tests / Rspack integration tests (push) Has been cancelled
Rspack Next.js production integration tests / Rspack integration tests (push) Has been cancelled
Turbopack Next.js development integration tests / Next.js integration tests (push) Has been cancelled
Turbopack Next.js production integration tests / Next.js integration tests (push) Has been cancelled
Update Rspack test manifest / Update and upload Rspack development test manifest (push) Has been cancelled
Update Rspack test manifest / Update and upload Rspack production test manifest (push) Has been cancelled
Upload bundler test manifests to areweturboyet.com / Upload test results (push) Has been cancelled
Update React / create-pull-request (push) Has been cancelled
test-e2e-project-reset-cron / reset-test-project (push) Has been cancelled
Notify about the top 15 issues/PRs/feature requests (most reacted) in the last 90 days / run (push) Has been cancelled
1037 lines
32 KiB
TypeScript
1037 lines
32 KiB
TypeScript
/* eslint-env jest */
|
|
import { getImageProps } from 'next/image'
|
|
|
|
let deploymentId: string | undefined
|
|
jest.mock('next/dist/shared/lib/deployment-id.js', () => {
|
|
return {
|
|
__esModule: true,
|
|
getDeploymentId() {
|
|
return deploymentId
|
|
},
|
|
getDeploymentIdQuery(ampersand = false): string {
|
|
let id = deploymentId
|
|
if (id) {
|
|
return `${ampersand ? '&' : '?'}dpl=${id}`
|
|
}
|
|
return ''
|
|
},
|
|
getAssetToken() {
|
|
throw new Error("getAssetToken shouldn't be called ")
|
|
},
|
|
getAssetTokenQuery(ampersand = false) {
|
|
throw new Error("getAssetTokenQuery shouldn't be called ")
|
|
},
|
|
}
|
|
})
|
|
|
|
describe('getImageProps()', () => {
|
|
let warningMessages: string[]
|
|
const originalConsoleWarn = console.warn
|
|
beforeEach(() => {
|
|
warningMessages = []
|
|
console.warn = (m: string) => {
|
|
warningMessages.push(m)
|
|
}
|
|
deploymentId = undefined
|
|
})
|
|
|
|
afterEach(() => {
|
|
console.warn = originalConsoleWarn
|
|
})
|
|
it('should return props in correct order', async () => {
|
|
const { props } = getImageProps({
|
|
alt: 'a nice desc',
|
|
id: 'my-image',
|
|
src: '/test.png',
|
|
width: 100,
|
|
height: 200,
|
|
})
|
|
expect(Object.entries(props)).toStrictEqual([
|
|
['alt', 'a nice desc'],
|
|
['id', 'my-image'],
|
|
['loading', 'lazy'],
|
|
['width', 100],
|
|
['height', 200],
|
|
['decoding', 'async'],
|
|
['style', { color: 'transparent' }],
|
|
[
|
|
'srcSet',
|
|
'/_next/image?url=%2Ftest.png&w=128&q=75 1x, /_next/image?url=%2Ftest.png&w=256&q=75 2x',
|
|
],
|
|
['src', '/_next/image?url=%2Ftest.png&w=256&q=75'],
|
|
])
|
|
})
|
|
|
|
it('should have correct type for props', async () => {
|
|
const { props } = getImageProps({
|
|
alt: 'a nice desc',
|
|
id: 'my-image',
|
|
src: '/test.png',
|
|
width: 100,
|
|
height: 200,
|
|
})
|
|
|
|
expect(props.alt).toBeString()
|
|
expect(props.id).toBeString()
|
|
expect(props.loading).toBeString()
|
|
|
|
expect(props.width).toBeNumber()
|
|
expect(props.height).toBeNumber()
|
|
|
|
expect(props.decoding).toBeString()
|
|
expect(props.style).toBeObject()
|
|
expect(props.style.color).toBeString()
|
|
expect(props.src).toBeString()
|
|
expect(props.srcSet).toBeString()
|
|
})
|
|
|
|
it('should handle preload', async () => {
|
|
const { props } = getImageProps({
|
|
alt: 'a nice desc',
|
|
id: 'my-image',
|
|
src: '/test.png',
|
|
width: 100,
|
|
height: 200,
|
|
preload: true,
|
|
})
|
|
expect(warningMessages).toStrictEqual([])
|
|
expect(Object.entries(props)).toStrictEqual([
|
|
['alt', 'a nice desc'],
|
|
['id', 'my-image'],
|
|
['width', 100],
|
|
['height', 200],
|
|
['decoding', 'async'],
|
|
['style', { color: 'transparent' }],
|
|
[
|
|
'srcSet',
|
|
'/_next/image?url=%2Ftest.png&w=128&q=75 1x, /_next/image?url=%2Ftest.png&w=256&q=75 2x',
|
|
],
|
|
['src', '/_next/image?url=%2Ftest.png&w=256&q=75'],
|
|
])
|
|
})
|
|
|
|
it('should error when both priority and preload are used', async () => {
|
|
expect(() =>
|
|
getImageProps({
|
|
alt: 'a nice desc',
|
|
id: 'my-image',
|
|
src: '/test.png',
|
|
width: 100,
|
|
height: 200,
|
|
preload: true,
|
|
priority: true,
|
|
})
|
|
).toThrow(
|
|
'Image with src "/test.png" has both "preload" and "priority" properties. Only "preload" should be used.'
|
|
)
|
|
})
|
|
|
|
it('should handle priority', async () => {
|
|
const { props } = getImageProps({
|
|
alt: 'a nice desc',
|
|
id: 'my-image',
|
|
src: '/test.png',
|
|
width: 100,
|
|
height: 200,
|
|
priority: true,
|
|
})
|
|
expect(warningMessages).toStrictEqual([])
|
|
expect(Object.entries(props)).toStrictEqual([
|
|
['alt', 'a nice desc'],
|
|
['id', 'my-image'],
|
|
['width', 100],
|
|
['height', 200],
|
|
['decoding', 'async'],
|
|
['style', { color: 'transparent' }],
|
|
[
|
|
'srcSet',
|
|
'/_next/image?url=%2Ftest.png&w=128&q=75 1x, /_next/image?url=%2Ftest.png&w=256&q=75 2x',
|
|
],
|
|
['src', '/_next/image?url=%2Ftest.png&w=256&q=75'],
|
|
])
|
|
})
|
|
it('should handle fetchPriority', async () => {
|
|
const { props } = getImageProps({
|
|
alt: 'a nice desc',
|
|
id: 'my-image',
|
|
src: '/test.png',
|
|
width: 100,
|
|
height: 200,
|
|
fetchPriority: 'high',
|
|
})
|
|
expect(warningMessages).toStrictEqual([])
|
|
expect(Object.entries(props)).toStrictEqual([
|
|
['alt', 'a nice desc'],
|
|
['id', 'my-image'],
|
|
['loading', 'lazy'],
|
|
['fetchPriority', 'high'],
|
|
['width', 100],
|
|
['height', 200],
|
|
['decoding', 'async'],
|
|
['style', { color: 'transparent' }],
|
|
[
|
|
'srcSet',
|
|
'/_next/image?url=%2Ftest.png&w=128&q=75 1x, /_next/image?url=%2Ftest.png&w=256&q=75 2x',
|
|
],
|
|
['src', '/_next/image?url=%2Ftest.png&w=256&q=75'],
|
|
])
|
|
})
|
|
it('should handle quality coercion from 50 to 75', async () => {
|
|
const { props } = getImageProps({
|
|
alt: 'a nice desc',
|
|
id: 'my-image',
|
|
src: '/test.png',
|
|
width: 100,
|
|
height: 200,
|
|
quality: 50,
|
|
})
|
|
expect(warningMessages).toStrictEqual([
|
|
'Image with src "/test.png" is using quality "50" which is not configured in images.qualities [75]. Please update your config to [50, 75].\nRead more: https://nextjs.org/docs/messages/next-image-unconfigured-qualities',
|
|
])
|
|
expect(Object.entries(props)).toStrictEqual([
|
|
['alt', 'a nice desc'],
|
|
['id', 'my-image'],
|
|
['loading', 'lazy'],
|
|
['width', 100],
|
|
['height', 200],
|
|
['decoding', 'async'],
|
|
['style', { color: 'transparent' }],
|
|
[
|
|
'srcSet',
|
|
'/_next/image?url=%2Ftest.png&w=128&q=75 1x, /_next/image?url=%2Ftest.png&w=256&q=75 2x',
|
|
],
|
|
['src', '/_next/image?url=%2Ftest.png&w=256&q=75'],
|
|
])
|
|
})
|
|
it('should handle quality exact match config and not warn', async () => {
|
|
const { props } = getImageProps({
|
|
alt: 'a nice desc',
|
|
id: 'my-image',
|
|
src: '/test.png',
|
|
width: 100,
|
|
height: 200,
|
|
quality: 75,
|
|
})
|
|
expect(warningMessages).toStrictEqual([])
|
|
expect(Object.entries(props)).toStrictEqual([
|
|
['alt', 'a nice desc'],
|
|
['id', 'my-image'],
|
|
['loading', 'lazy'],
|
|
['width', 100],
|
|
['height', 200],
|
|
['decoding', 'async'],
|
|
['style', { color: 'transparent' }],
|
|
[
|
|
'srcSet',
|
|
'/_next/image?url=%2Ftest.png&w=128&q=75 1x, /_next/image?url=%2Ftest.png&w=256&q=75 2x',
|
|
],
|
|
['src', '/_next/image?url=%2Ftest.png&w=256&q=75'],
|
|
])
|
|
})
|
|
it('should handle quality as a string and not warn', async () => {
|
|
const { props } = getImageProps({
|
|
alt: 'a nice desc',
|
|
id: 'my-image',
|
|
src: '/test.png',
|
|
width: 100,
|
|
height: 200,
|
|
quality: '75',
|
|
})
|
|
expect(warningMessages).toStrictEqual([])
|
|
expect(Object.entries(props)).toStrictEqual([
|
|
['alt', 'a nice desc'],
|
|
['id', 'my-image'],
|
|
['loading', 'lazy'],
|
|
['width', 100],
|
|
['height', 200],
|
|
['decoding', 'async'],
|
|
['style', { color: 'transparent' }],
|
|
[
|
|
'srcSet',
|
|
'/_next/image?url=%2Ftest.png&w=128&q=75 1x, /_next/image?url=%2Ftest.png&w=256&q=75 2x',
|
|
],
|
|
['src', '/_next/image?url=%2Ftest.png&w=256&q=75'],
|
|
])
|
|
})
|
|
it('should handle loading eager', async () => {
|
|
const { props } = getImageProps({
|
|
alt: 'a nice desc',
|
|
id: 'my-image',
|
|
src: '/test.png',
|
|
width: 100,
|
|
height: 200,
|
|
loading: 'eager',
|
|
})
|
|
expect(warningMessages).toStrictEqual([])
|
|
expect(Object.entries(props)).toStrictEqual([
|
|
['alt', 'a nice desc'],
|
|
['id', 'my-image'],
|
|
['loading', 'eager'],
|
|
['width', 100],
|
|
['height', 200],
|
|
['decoding', 'async'],
|
|
['style', { color: 'transparent' }],
|
|
[
|
|
'srcSet',
|
|
'/_next/image?url=%2Ftest.png&w=128&q=75 1x, /_next/image?url=%2Ftest.png&w=256&q=75 2x',
|
|
],
|
|
['src', '/_next/image?url=%2Ftest.png&w=256&q=75'],
|
|
])
|
|
})
|
|
it('should handle 16px image', async () => {
|
|
const { props } = getImageProps({
|
|
alt: 'a nice desc',
|
|
id: 'my-image',
|
|
src: '/test.png',
|
|
width: 16,
|
|
height: 16,
|
|
})
|
|
expect(warningMessages).toStrictEqual([])
|
|
expect(Object.entries(props)).toStrictEqual([
|
|
['alt', 'a nice desc'],
|
|
['id', 'my-image'],
|
|
['loading', 'lazy'],
|
|
['width', 16],
|
|
['height', 16],
|
|
['decoding', 'async'],
|
|
['style', { color: 'transparent' }],
|
|
['srcSet', '/_next/image?url=%2Ftest.png&w=32&q=75 1x'],
|
|
['src', '/_next/image?url=%2Ftest.png&w=32&q=75'],
|
|
])
|
|
})
|
|
it('should handle 32px image', async () => {
|
|
const { props } = getImageProps({
|
|
alt: 'a nice desc',
|
|
id: 'my-image',
|
|
src: '/test.png',
|
|
width: 32,
|
|
height: 32,
|
|
})
|
|
expect(warningMessages).toStrictEqual([])
|
|
expect(Object.entries(props)).toStrictEqual([
|
|
['alt', 'a nice desc'],
|
|
['id', 'my-image'],
|
|
['loading', 'lazy'],
|
|
['width', 32],
|
|
['height', 32],
|
|
['decoding', 'async'],
|
|
['style', { color: 'transparent' }],
|
|
[
|
|
'srcSet',
|
|
'/_next/image?url=%2Ftest.png&w=32&q=75 1x, /_next/image?url=%2Ftest.png&w=64&q=75 2x',
|
|
],
|
|
['src', '/_next/image?url=%2Ftest.png&w=64&q=75'],
|
|
])
|
|
})
|
|
it('should handle 256px image', async () => {
|
|
const { props } = getImageProps({
|
|
alt: 'a nice desc',
|
|
id: 'my-image',
|
|
src: '/test.png',
|
|
width: 256,
|
|
height: 256,
|
|
})
|
|
expect(warningMessages).toStrictEqual([])
|
|
expect(Object.entries(props)).toStrictEqual([
|
|
['alt', 'a nice desc'],
|
|
['id', 'my-image'],
|
|
['loading', 'lazy'],
|
|
['width', 256],
|
|
['height', 256],
|
|
['decoding', 'async'],
|
|
['style', { color: 'transparent' }],
|
|
[
|
|
'srcSet',
|
|
'/_next/image?url=%2Ftest.png&w=256&q=75 1x, /_next/image?url=%2Ftest.png&w=640&q=75 2x',
|
|
],
|
|
['src', '/_next/image?url=%2Ftest.png&w=640&q=75'],
|
|
])
|
|
})
|
|
it('should handle 512px image', async () => {
|
|
const { props } = getImageProps({
|
|
alt: 'a nice desc',
|
|
id: 'my-image',
|
|
src: '/test.png',
|
|
width: 512,
|
|
height: 512,
|
|
})
|
|
expect(warningMessages).toStrictEqual([])
|
|
expect(Object.entries(props)).toStrictEqual([
|
|
['alt', 'a nice desc'],
|
|
['id', 'my-image'],
|
|
['loading', 'lazy'],
|
|
['width', 512],
|
|
['height', 512],
|
|
['decoding', 'async'],
|
|
['style', { color: 'transparent' }],
|
|
[
|
|
'srcSet',
|
|
'/_next/image?url=%2Ftest.png&w=640&q=75 1x, /_next/image?url=%2Ftest.png&w=1080&q=75 2x',
|
|
],
|
|
['src', '/_next/image?url=%2Ftest.png&w=1080&q=75'],
|
|
])
|
|
})
|
|
it('should handle 3072px image', async () => {
|
|
const { props } = getImageProps({
|
|
alt: 'a nice desc',
|
|
id: 'my-image',
|
|
src: '/test.png',
|
|
width: 3072,
|
|
height: 3072,
|
|
})
|
|
expect(warningMessages).toStrictEqual([])
|
|
expect(Object.entries(props)).toStrictEqual([
|
|
['alt', 'a nice desc'],
|
|
['id', 'my-image'],
|
|
['loading', 'lazy'],
|
|
['width', 3072],
|
|
['height', 3072],
|
|
['decoding', 'async'],
|
|
['style', { color: 'transparent' }],
|
|
['srcSet', '/_next/image?url=%2Ftest.png&w=3840&q=75 1x'],
|
|
['src', '/_next/image?url=%2Ftest.png&w=3840&q=75'],
|
|
])
|
|
})
|
|
it('should handle sizes', async () => {
|
|
const { props } = getImageProps({
|
|
alt: 'a nice desc',
|
|
id: 'my-image',
|
|
src: '/test.png',
|
|
width: 100,
|
|
height: 200,
|
|
sizes: '100vw',
|
|
})
|
|
expect(warningMessages).toStrictEqual([])
|
|
expect(Object.entries(props)).toStrictEqual([
|
|
['alt', 'a nice desc'],
|
|
['id', 'my-image'],
|
|
['loading', 'lazy'],
|
|
['width', 100],
|
|
['height', 200],
|
|
['decoding', 'async'],
|
|
['style', { color: 'transparent' }],
|
|
['sizes', '100vw'],
|
|
[
|
|
'srcSet',
|
|
'/_next/image?url=%2Ftest.png&w=640&q=75 640w, /_next/image?url=%2Ftest.png&w=750&q=75 750w, /_next/image?url=%2Ftest.png&w=828&q=75 828w, /_next/image?url=%2Ftest.png&w=1080&q=75 1080w, /_next/image?url=%2Ftest.png&w=1200&q=75 1200w, /_next/image?url=%2Ftest.png&w=1920&q=75 1920w, /_next/image?url=%2Ftest.png&w=2048&q=75 2048w, /_next/image?url=%2Ftest.png&w=3840&q=75 3840w',
|
|
],
|
|
['src', '/_next/image?url=%2Ftest.png&w=3840&q=75'],
|
|
])
|
|
})
|
|
it('should handle fill', async () => {
|
|
const { props } = getImageProps({
|
|
alt: 'a nice desc',
|
|
id: 'my-image',
|
|
src: '/test.png',
|
|
fill: true,
|
|
})
|
|
expect(warningMessages).toStrictEqual([])
|
|
expect(Object.entries(props)).toStrictEqual([
|
|
['alt', 'a nice desc'],
|
|
['id', 'my-image'],
|
|
['loading', 'lazy'],
|
|
['decoding', 'async'],
|
|
[
|
|
'style',
|
|
{
|
|
bottom: 0,
|
|
color: 'transparent',
|
|
height: '100%',
|
|
left: 0,
|
|
objectFit: undefined,
|
|
objectPosition: undefined,
|
|
position: 'absolute',
|
|
right: 0,
|
|
top: 0,
|
|
width: '100%',
|
|
},
|
|
],
|
|
['sizes', '100vw'],
|
|
[
|
|
'srcSet',
|
|
'/_next/image?url=%2Ftest.png&w=640&q=75 640w, /_next/image?url=%2Ftest.png&w=750&q=75 750w, /_next/image?url=%2Ftest.png&w=828&q=75 828w, /_next/image?url=%2Ftest.png&w=1080&q=75 1080w, /_next/image?url=%2Ftest.png&w=1200&q=75 1200w, /_next/image?url=%2Ftest.png&w=1920&q=75 1920w, /_next/image?url=%2Ftest.png&w=2048&q=75 2048w, /_next/image?url=%2Ftest.png&w=3840&q=75 3840w',
|
|
],
|
|
['src', '/_next/image?url=%2Ftest.png&w=3840&q=75'],
|
|
])
|
|
})
|
|
it('should handle style', async () => {
|
|
const { props } = getImageProps({
|
|
alt: 'a nice desc',
|
|
id: 'my-image',
|
|
src: '/test.png',
|
|
width: 100,
|
|
height: 200,
|
|
style: { maxWidth: '100%', height: 'auto' },
|
|
})
|
|
expect(warningMessages).toStrictEqual([])
|
|
expect(Object.entries(props)).toStrictEqual([
|
|
['alt', 'a nice desc'],
|
|
['id', 'my-image'],
|
|
['loading', 'lazy'],
|
|
['width', 100],
|
|
['height', 200],
|
|
['decoding', 'async'],
|
|
['style', { color: 'transparent', maxWidth: '100%', height: 'auto' }],
|
|
[
|
|
'srcSet',
|
|
'/_next/image?url=%2Ftest.png&w=128&q=75 1x, /_next/image?url=%2Ftest.png&w=256&q=75 2x',
|
|
],
|
|
['src', '/_next/image?url=%2Ftest.png&w=256&q=75'],
|
|
])
|
|
})
|
|
it('should handle loader', async () => {
|
|
const { props } = getImageProps({
|
|
alt: 'a nice desc',
|
|
id: 'my-image',
|
|
src: '/test.png',
|
|
width: 100,
|
|
height: 200,
|
|
loader: ({ src, width, quality }) =>
|
|
`https://example.com${src}?w=${width}&q=${quality || 75}`,
|
|
})
|
|
expect(warningMessages).toStrictEqual([])
|
|
expect(Object.entries(props)).toStrictEqual([
|
|
['alt', 'a nice desc'],
|
|
['id', 'my-image'],
|
|
['loading', 'lazy'],
|
|
['width', 100],
|
|
['height', 200],
|
|
['decoding', 'async'],
|
|
['style', { color: 'transparent' }],
|
|
[
|
|
'srcSet',
|
|
'https://example.com/test.png?w=128&q=75 1x, https://example.com/test.png?w=256&q=75 2x',
|
|
],
|
|
['src', 'https://example.com/test.png?w=256&q=75'],
|
|
])
|
|
})
|
|
it('should handle arbitrary props', async () => {
|
|
const { props } = getImageProps({
|
|
alt: 'a nice desc',
|
|
src: '/test.png',
|
|
width: 100,
|
|
height: 200,
|
|
// @ts-ignore - testing arbitrary props
|
|
foo: true,
|
|
bar: 42,
|
|
baz: 'str',
|
|
})
|
|
expect(warningMessages).toStrictEqual([])
|
|
expect(Object.entries(props)).toStrictEqual([
|
|
['alt', 'a nice desc'],
|
|
['foo', true],
|
|
['bar', 42],
|
|
['baz', 'str'],
|
|
['loading', 'lazy'],
|
|
['width', 100],
|
|
['height', 200],
|
|
['decoding', 'async'],
|
|
['style', { color: 'transparent' }],
|
|
[
|
|
'srcSet',
|
|
'/_next/image?url=%2Ftest.png&w=128&q=75 1x, /_next/image?url=%2Ftest.png&w=256&q=75 2x',
|
|
],
|
|
['src', '/_next/image?url=%2Ftest.png&w=256&q=75'],
|
|
])
|
|
})
|
|
it('should override src', async () => {
|
|
const { props } = getImageProps({
|
|
alt: 'a nice desc',
|
|
src: '/test.png',
|
|
overrideSrc: '/override.png',
|
|
width: 100,
|
|
height: 200,
|
|
})
|
|
expect(warningMessages).toStrictEqual([])
|
|
expect(Object.entries(props)).toStrictEqual([
|
|
['alt', 'a nice desc'],
|
|
['loading', 'lazy'],
|
|
['width', 100],
|
|
['height', 200],
|
|
['decoding', 'async'],
|
|
['style', { color: 'transparent' }],
|
|
[
|
|
'srcSet',
|
|
'/_next/image?url=%2Ftest.png&w=128&q=75 1x, /_next/image?url=%2Ftest.png&w=256&q=75 2x',
|
|
],
|
|
['src', '/override.png'],
|
|
])
|
|
})
|
|
it('should handle decoding=sync', async () => {
|
|
const { props } = getImageProps({
|
|
alt: 'a nice desc',
|
|
src: '/test.png',
|
|
decoding: 'sync',
|
|
width: 100,
|
|
height: 200,
|
|
})
|
|
expect(warningMessages).toStrictEqual([])
|
|
expect(Object.entries(props)).toStrictEqual([
|
|
['alt', 'a nice desc'],
|
|
['loading', 'lazy'],
|
|
['width', 100],
|
|
['height', 200],
|
|
['decoding', 'sync'],
|
|
['style', { color: 'transparent' }],
|
|
[
|
|
'srcSet',
|
|
'/_next/image?url=%2Ftest.png&w=128&q=75 1x, /_next/image?url=%2Ftest.png&w=256&q=75 2x',
|
|
],
|
|
['src', '/_next/image?url=%2Ftest.png&w=256&q=75'],
|
|
])
|
|
})
|
|
it('should auto unoptimized for relative svg', async () => {
|
|
const { props } = getImageProps({
|
|
alt: 'a nice desc',
|
|
src: '/test.svg',
|
|
width: 100,
|
|
height: 200,
|
|
})
|
|
expect(warningMessages).toStrictEqual([])
|
|
expect(Object.entries(props)).toStrictEqual([
|
|
['alt', 'a nice desc'],
|
|
['loading', 'lazy'],
|
|
['width', 100],
|
|
['height', 200],
|
|
['decoding', 'async'],
|
|
['style', { color: 'transparent' }],
|
|
['src', '/test.svg'],
|
|
])
|
|
})
|
|
it('should auto unoptimized for absolute svg', async () => {
|
|
const { props } = getImageProps({
|
|
alt: 'a nice desc',
|
|
src: 'https://example.com/test.svg',
|
|
width: 100,
|
|
height: 200,
|
|
})
|
|
expect(warningMessages).toStrictEqual([])
|
|
expect(Object.entries(props)).toStrictEqual([
|
|
['alt', 'a nice desc'],
|
|
['loading', 'lazy'],
|
|
['width', 100],
|
|
['height', 200],
|
|
['decoding', 'async'],
|
|
['style', { color: 'transparent' }],
|
|
['src', 'https://example.com/test.svg'],
|
|
])
|
|
})
|
|
it('should auto unoptimized for absolute svg with query', async () => {
|
|
const { props } = getImageProps({
|
|
alt: 'a nice desc',
|
|
src: 'https://example.com/test.svg?v=1',
|
|
width: 100,
|
|
height: 200,
|
|
})
|
|
expect(warningMessages).toStrictEqual([])
|
|
expect(Object.entries(props)).toStrictEqual([
|
|
['alt', 'a nice desc'],
|
|
['loading', 'lazy'],
|
|
['width', 100],
|
|
['height', 200],
|
|
['decoding', 'async'],
|
|
['style', { color: 'transparent' }],
|
|
['src', 'https://example.com/test.svg?v=1'],
|
|
])
|
|
})
|
|
it('should add query string for imported local image when deployment id is defined', async () => {
|
|
try {
|
|
deploymentId = 'dpl_123'
|
|
const { props } = getImageProps({
|
|
alt: 'a nice desc',
|
|
src: '/_next/static/media/test.abc123.png',
|
|
width: 100,
|
|
height: 200,
|
|
})
|
|
expect(warningMessages).toStrictEqual([])
|
|
expect(Object.entries(props)).toStrictEqual([
|
|
['alt', 'a nice desc'],
|
|
['loading', 'lazy'],
|
|
['width', 100],
|
|
['height', 200],
|
|
['decoding', 'async'],
|
|
['style', { color: 'transparent' }],
|
|
[
|
|
'srcSet',
|
|
'/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Ftest.abc123.png&w=128&q=75&dpl=dpl_123 1x, /_next/image?url=%2F_next%2Fstatic%2Fmedia%2Ftest.abc123.png&w=256&q=75&dpl=dpl_123 2x',
|
|
],
|
|
[
|
|
'src',
|
|
'/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Ftest.abc123.png&w=256&q=75&dpl=dpl_123',
|
|
],
|
|
])
|
|
} finally {
|
|
deploymentId = undefined
|
|
}
|
|
})
|
|
it('should respect query string for imported local image when deployment id is defined', async () => {
|
|
try {
|
|
deploymentId = 'dpl_123'
|
|
const { props } = getImageProps({
|
|
alt: 'a nice desc',
|
|
src: '/_next/static/media/test.abc123.png?dpl=dpl_existing',
|
|
width: 100,
|
|
height: 200,
|
|
})
|
|
expect(warningMessages).toStrictEqual([])
|
|
expect(Object.entries(props)).toStrictEqual([
|
|
['alt', 'a nice desc'],
|
|
['loading', 'lazy'],
|
|
['width', 100],
|
|
['height', 200],
|
|
['decoding', 'async'],
|
|
['style', { color: 'transparent' }],
|
|
[
|
|
'srcSet',
|
|
'/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Ftest.abc123.png&w=128&q=75&dpl=dpl_existing 1x, /_next/image?url=%2F_next%2Fstatic%2Fmedia%2Ftest.abc123.png&w=256&q=75&dpl=dpl_existing 2x',
|
|
],
|
|
[
|
|
'src',
|
|
'/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Ftest.abc123.png&w=256&q=75&dpl=dpl_existing',
|
|
],
|
|
])
|
|
} finally {
|
|
deploymentId = undefined
|
|
}
|
|
})
|
|
it('should add query string for imported local image from microfrontend when deployment id is defined', async () => {
|
|
try {
|
|
deploymentId = 'dpl_123'
|
|
const { props } = getImageProps({
|
|
alt: 'a nice desc',
|
|
src: '/microfrontend/_next/static/media/test.abc123.png', // simulating microfrontend path
|
|
width: 100,
|
|
height: 200,
|
|
})
|
|
expect(warningMessages).toStrictEqual([])
|
|
expect(Object.entries(props)).toStrictEqual([
|
|
['alt', 'a nice desc'],
|
|
['loading', 'lazy'],
|
|
['width', 100],
|
|
['height', 200],
|
|
['decoding', 'async'],
|
|
['style', { color: 'transparent' }],
|
|
[
|
|
'srcSet',
|
|
'/_next/image?url=%2Fmicrofrontend%2F_next%2Fstatic%2Fmedia%2Ftest.abc123.png&w=128&q=75&dpl=dpl_123 1x, /_next/image?url=%2Fmicrofrontend%2F_next%2Fstatic%2Fmedia%2Ftest.abc123.png&w=256&q=75&dpl=dpl_123 2x',
|
|
],
|
|
[
|
|
'src',
|
|
'/_next/image?url=%2Fmicrofrontend%2F_next%2Fstatic%2Fmedia%2Ftest.abc123.png&w=256&q=75&dpl=dpl_123',
|
|
],
|
|
])
|
|
} finally {
|
|
deploymentId = undefined
|
|
}
|
|
})
|
|
it('should respect existing query string for imported local image from microfrontend when deployment id is defined', async () => {
|
|
try {
|
|
deploymentId = 'dpl_123'
|
|
const { props } = getImageProps({
|
|
alt: 'a nice desc',
|
|
src: '/microfrontend/_next/static/media/test.abc123.png?dpl=dpl_existing', // simulating microfrontend path
|
|
width: 100,
|
|
height: 200,
|
|
})
|
|
expect(warningMessages).toStrictEqual([])
|
|
expect(Object.entries(props)).toStrictEqual([
|
|
['alt', 'a nice desc'],
|
|
['loading', 'lazy'],
|
|
['width', 100],
|
|
['height', 200],
|
|
['decoding', 'async'],
|
|
['style', { color: 'transparent' }],
|
|
[
|
|
'srcSet',
|
|
'/_next/image?url=%2Fmicrofrontend%2F_next%2Fstatic%2Fmedia%2Ftest.abc123.png&w=128&q=75&dpl=dpl_existing 1x, /_next/image?url=%2Fmicrofrontend%2F_next%2Fstatic%2Fmedia%2Ftest.abc123.png&w=256&q=75&dpl=dpl_existing 2x',
|
|
],
|
|
[
|
|
'src',
|
|
'/_next/image?url=%2Fmicrofrontend%2F_next%2Fstatic%2Fmedia%2Ftest.abc123.png&w=256&q=75&dpl=dpl_existing',
|
|
],
|
|
])
|
|
} finally {
|
|
deploymentId = undefined
|
|
}
|
|
})
|
|
it('should add query string for imported local image with unicode when deployment id is defined', async () => {
|
|
try {
|
|
deploymentId = 'dpl_123'
|
|
const src = '/_next/static/media/äöüščří.3f1a293b.png'
|
|
const srcEncoded = encodeURIComponent(src)
|
|
const { props } = getImageProps({
|
|
alt: 'a nice desc',
|
|
src: src,
|
|
width: 100,
|
|
height: 200,
|
|
})
|
|
expect(warningMessages).toStrictEqual([])
|
|
expect(Object.entries(props)).toStrictEqual([
|
|
['alt', 'a nice desc'],
|
|
['loading', 'lazy'],
|
|
['width', 100],
|
|
['height', 200],
|
|
['decoding', 'async'],
|
|
['style', { color: 'transparent' }],
|
|
[
|
|
'srcSet',
|
|
`/_next/image?url=${srcEncoded}&w=128&q=75&dpl=dpl_123 1x, /_next/image?url=${srcEncoded}&w=256&q=75&dpl=dpl_123 2x`,
|
|
],
|
|
['src', `/_next/image?url=${srcEncoded}&w=256&q=75&dpl=dpl_123`],
|
|
])
|
|
} finally {
|
|
deploymentId = undefined
|
|
}
|
|
})
|
|
it('should respect query string for imported local image with unicode when deployment id is defined', async () => {
|
|
try {
|
|
deploymentId = 'dpl_123'
|
|
const src = '/_next/static/media/äöüščří.3f1a293b.png'
|
|
const srcEncoded = encodeURIComponent(src)
|
|
const { props } = getImageProps({
|
|
alt: 'a nice desc',
|
|
src: `${src}?dpl=dpl_existing`,
|
|
width: 100,
|
|
height: 200,
|
|
})
|
|
expect(warningMessages).toStrictEqual([])
|
|
expect(Object.entries(props)).toStrictEqual([
|
|
['alt', 'a nice desc'],
|
|
['loading', 'lazy'],
|
|
['width', 100],
|
|
['height', 200],
|
|
['decoding', 'async'],
|
|
['style', { color: 'transparent' }],
|
|
[
|
|
'srcSet',
|
|
`/_next/image?url=${srcEncoded}&w=128&q=75&dpl=dpl_existing 1x, /_next/image?url=${srcEncoded}&w=256&q=75&dpl=dpl_existing 2x`,
|
|
],
|
|
['src', `/_next/image?url=${srcEncoded}&w=256&q=75&dpl=dpl_existing`],
|
|
])
|
|
} finally {
|
|
deploymentId = undefined
|
|
}
|
|
})
|
|
it('should add query string for relative local image when deployment id defined', async () => {
|
|
try {
|
|
deploymentId = 'dpl_123'
|
|
const { props } = getImageProps({
|
|
alt: 'a nice desc',
|
|
src: '/test.png',
|
|
width: 100,
|
|
height: 200,
|
|
})
|
|
expect(warningMessages).toStrictEqual([])
|
|
expect(Object.entries(props)).toStrictEqual([
|
|
['alt', 'a nice desc'],
|
|
['loading', 'lazy'],
|
|
['width', 100],
|
|
['height', 200],
|
|
['decoding', 'async'],
|
|
['style', { color: 'transparent' }],
|
|
[
|
|
'srcSet',
|
|
'/_next/image?url=%2Ftest.png&w=128&q=75&dpl=dpl_123 1x, /_next/image?url=%2Ftest.png&w=256&q=75&dpl=dpl_123 2x',
|
|
],
|
|
['src', '/_next/image?url=%2Ftest.png&w=256&q=75&dpl=dpl_123'],
|
|
])
|
|
} finally {
|
|
deploymentId = undefined
|
|
}
|
|
})
|
|
it('should not add query string for absolute remote image when deployment id is defined', async () => {
|
|
try {
|
|
deploymentId = 'dpl_123'
|
|
const { props } = getImageProps({
|
|
alt: 'a nice desc',
|
|
src: 'http://example.com/test.png',
|
|
width: 100,
|
|
height: 200,
|
|
})
|
|
expect(warningMessages).toStrictEqual([])
|
|
expect(Object.entries(props)).toStrictEqual([
|
|
['alt', 'a nice desc'],
|
|
['loading', 'lazy'],
|
|
['width', 100],
|
|
['height', 200],
|
|
['decoding', 'async'],
|
|
['style', { color: 'transparent' }],
|
|
[
|
|
'srcSet',
|
|
'/_next/image?url=http%3A%2F%2Fexample.com%2Ftest.png&w=128&q=75 1x, /_next/image?url=http%3A%2F%2Fexample.com%2Ftest.png&w=256&q=75 2x',
|
|
],
|
|
[
|
|
'src',
|
|
'/_next/image?url=http%3A%2F%2Fexample.com%2Ftest.png&w=256&q=75',
|
|
],
|
|
])
|
|
} finally {
|
|
deploymentId = undefined
|
|
}
|
|
})
|
|
it('should add query string with question mark for unoptimized relative svg when deployment id is defined', async () => {
|
|
try {
|
|
deploymentId = 'dpl_123'
|
|
const { props } = getImageProps({
|
|
alt: 'a nice desc',
|
|
src: '/test.svg',
|
|
width: 100,
|
|
height: 200,
|
|
})
|
|
expect(warningMessages).toStrictEqual([])
|
|
expect(Object.entries(props)).toStrictEqual([
|
|
['alt', 'a nice desc'],
|
|
['loading', 'lazy'],
|
|
['width', 100],
|
|
['height', 200],
|
|
['decoding', 'async'],
|
|
['style', { color: 'transparent' }],
|
|
['src', '/test.svg?dpl=dpl_123'],
|
|
])
|
|
} finally {
|
|
deploymentId = undefined
|
|
}
|
|
})
|
|
it('should add query string with question mark for unoptimized relative svg with unicode when deployment id is defined', async () => {
|
|
try {
|
|
deploymentId = 'dpl_123'
|
|
const { props } = getImageProps({
|
|
alt: 'a nice desc',
|
|
src: '/äöüščří.svg',
|
|
width: 100,
|
|
height: 200,
|
|
})
|
|
expect(warningMessages).toStrictEqual([])
|
|
expect(Object.entries(props)).toStrictEqual([
|
|
['alt', 'a nice desc'],
|
|
['loading', 'lazy'],
|
|
['width', 100],
|
|
['height', 200],
|
|
['decoding', 'async'],
|
|
['style', { color: 'transparent' }],
|
|
['src', '/äöüščří.svg?dpl=dpl_123'],
|
|
])
|
|
} finally {
|
|
deploymentId = undefined
|
|
}
|
|
})
|
|
it('should add query string with ampersand for unoptimized relative svg when deployment id is defined', async () => {
|
|
try {
|
|
deploymentId = 'dpl_123'
|
|
const { props } = getImageProps({
|
|
alt: 'a nice desc',
|
|
src: '/test.svg?v=1',
|
|
width: 100,
|
|
height: 200,
|
|
})
|
|
expect(warningMessages).toStrictEqual([])
|
|
expect(Object.entries(props)).toStrictEqual([
|
|
['alt', 'a nice desc'],
|
|
['loading', 'lazy'],
|
|
['width', 100],
|
|
['height', 200],
|
|
['decoding', 'async'],
|
|
['style', { color: 'transparent' }],
|
|
['src', '/test.svg?v=1&dpl=dpl_123'],
|
|
])
|
|
} finally {
|
|
deploymentId = undefined
|
|
}
|
|
})
|
|
it('should not add query string for unoptimized absolute remote svg when deployment id is defined', async () => {
|
|
try {
|
|
deploymentId = 'dpl_123'
|
|
const { props } = getImageProps({
|
|
alt: 'a nice desc',
|
|
src: 'http://example.com/test.svg',
|
|
width: 100,
|
|
height: 200,
|
|
})
|
|
expect(warningMessages).toStrictEqual([])
|
|
expect(Object.entries(props)).toStrictEqual([
|
|
['alt', 'a nice desc'],
|
|
['loading', 'lazy'],
|
|
['width', 100],
|
|
['height', 200],
|
|
['decoding', 'async'],
|
|
['style', { color: 'transparent' }],
|
|
['src', 'http://example.com/test.svg'],
|
|
])
|
|
} finally {
|
|
deploymentId = undefined
|
|
}
|
|
})
|
|
it('should not add query string for unoptimized with no protocol when deployment id is defined', async () => {
|
|
try {
|
|
deploymentId = 'dpl_123'
|
|
const { props } = getImageProps({
|
|
alt: 'a nice desc',
|
|
src: '//example.com/test.png',
|
|
unoptimized: true,
|
|
width: 100,
|
|
height: 200,
|
|
})
|
|
expect(warningMessages).toStrictEqual([])
|
|
expect(Object.entries(props)).toStrictEqual([
|
|
['alt', 'a nice desc'],
|
|
['loading', 'lazy'],
|
|
['width', 100],
|
|
['height', 200],
|
|
['decoding', 'async'],
|
|
['style', { color: 'transparent' }],
|
|
['src', '//example.com/test.png'],
|
|
])
|
|
} finally {
|
|
deploymentId = undefined
|
|
}
|
|
})
|
|
it('should respect existing query string for unoptimized relative image when deployment id is defined', async () => {
|
|
try {
|
|
deploymentId = 'dpl_123'
|
|
const { props } = getImageProps({
|
|
alt: 'a nice desc',
|
|
src: '/_next/static/media/test.abc123.png?dpl=dpl_existing',
|
|
unoptimized: true,
|
|
width: 100,
|
|
height: 200,
|
|
})
|
|
expect(warningMessages).toStrictEqual([])
|
|
expect(Object.entries(props)).toStrictEqual([
|
|
['alt', 'a nice desc'],
|
|
['loading', 'lazy'],
|
|
['width', 100],
|
|
['height', 200],
|
|
['decoding', 'async'],
|
|
['style', { color: 'transparent' }],
|
|
['src', '/_next/static/media/test.abc123.png?dpl=dpl_existing'],
|
|
])
|
|
} finally {
|
|
deploymentId = undefined
|
|
}
|
|
})
|
|
it('should respect existing query string for unoptimized relative image with unicode when deployment id is defined', async () => {
|
|
try {
|
|
deploymentId = 'dpl_123'
|
|
const { props } = getImageProps({
|
|
alt: 'a nice desc',
|
|
src: `/_next/static/media/äöüščří.3f1a293b.png?dpl=dpl_existing`,
|
|
unoptimized: true,
|
|
width: 100,
|
|
height: 200,
|
|
})
|
|
expect(warningMessages).toStrictEqual([])
|
|
expect(Object.entries(props)).toStrictEqual([
|
|
['alt', 'a nice desc'],
|
|
['loading', 'lazy'],
|
|
['width', 100],
|
|
['height', 200],
|
|
['decoding', 'async'],
|
|
['style', { color: 'transparent' }],
|
|
['src', '/_next/static/media/äöüščří.3f1a293b.png?dpl=dpl_existing'],
|
|
])
|
|
} finally {
|
|
deploymentId = undefined
|
|
}
|
|
})
|
|
})
|