mirror of
https://github.com/hanzoai/next.js.git
synced 2026-09-24 17:00:51 +00:00
Niklas MischkulnigandGitHub
4d5840e3b7
This allows specifying a different deployment id for static immutable assets - [x] rename `getImmutableAssetToken` to `getAssetToken` (because it can be non-immutable as well) - [x] disable for webpack Closes PACK-6534 For https://github.com/nextjs/adapter-vercel/pull/25 Part of PACK-6802
217 lines
7.0 KiB
TypeScript
217 lines
7.0 KiB
TypeScript
/* eslint-env jest */
|
|
import React from 'react'
|
|
import ReactDOM from 'react-dom/server'
|
|
import Image from 'next/legacy/image'
|
|
import cheerio from 'cheerio'
|
|
|
|
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('Image Legacy Rendering', () => {
|
|
it('should render Image on its own', async () => {
|
|
const element = React.createElement(Image, {
|
|
id: 'unit-image',
|
|
src: '/test.png',
|
|
width: 100,
|
|
height: 100,
|
|
loading: 'eager',
|
|
})
|
|
const html = ReactDOM.renderToString(element)
|
|
const $ = cheerio.load(html)
|
|
const img = $('#unit-image')
|
|
expect(img.attr('id')).toBe('unit-image')
|
|
expect(img.attr('src')).toContain('test.png')
|
|
expect(img.attr('srcset')).toContain('test.png')
|
|
})
|
|
|
|
it('should only render noscript element when lazy loading', async () => {
|
|
const element = React.createElement(Image, {
|
|
src: '/test.png',
|
|
width: 100,
|
|
height: 100,
|
|
loading: 'eager',
|
|
})
|
|
const element2 = React.createElement(Image, {
|
|
src: '/test.png',
|
|
width: 100,
|
|
height: 100,
|
|
priority: true,
|
|
})
|
|
const elementLazy = React.createElement(Image, {
|
|
src: '/test.png',
|
|
width: 100,
|
|
height: 100,
|
|
})
|
|
const $ = cheerio.load(ReactDOM.renderToString(element))
|
|
const $2 = cheerio.load(ReactDOM.renderToString(element2))
|
|
const $lazy = cheerio.load(ReactDOM.renderToString(elementLazy))
|
|
expect($('noscript').length).toBe(0)
|
|
expect($2('noscript').length).toBe(0)
|
|
expect($lazy('noscript').length).toBe(1)
|
|
})
|
|
|
|
it('should render noscript element when placeholder=blur', async () => {
|
|
const element1 = React.createElement(Image, {
|
|
src: '/test.png',
|
|
width: 100,
|
|
height: 100,
|
|
loading: 'eager',
|
|
placeholder: 'blur',
|
|
blurDataURL: 'data:image/png;base64',
|
|
})
|
|
const element2 = React.createElement(Image, {
|
|
src: '/test.png',
|
|
width: 100,
|
|
height: 100,
|
|
placeholder: 'blur',
|
|
blurDataURL: 'data:image/png;base64',
|
|
loading: 'eager',
|
|
})
|
|
const element3 = React.createElement(Image, {
|
|
src: '/test.png',
|
|
width: 100,
|
|
height: 100,
|
|
placeholder: 'blur',
|
|
blurDataURL: 'data:image/png;base64',
|
|
priority: true,
|
|
})
|
|
const $1 = cheerio.load(ReactDOM.renderToString(element1))
|
|
const $2 = cheerio.load(ReactDOM.renderToString(element2))
|
|
const $3 = cheerio.load(ReactDOM.renderToString(element3))
|
|
expect($1('noscript').length).toBe(1)
|
|
expect($2('noscript').length).toBe(1)
|
|
expect($3('noscript').length).toBe(1)
|
|
})
|
|
|
|
it('should render the correct sizes passed when a noscript element is rendered', async () => {
|
|
const element = React.createElement(Image, {
|
|
src: '/test.png',
|
|
width: 100,
|
|
height: 100,
|
|
sizes: '50vw',
|
|
})
|
|
const $ = cheerio.load(ReactDOM.renderToString(element))
|
|
const noscriptImg = $('noscript img')
|
|
expect(noscriptImg.attr('sizes')).toBe('50vw')
|
|
expect(noscriptImg.attr('srcset')).toContain(
|
|
'/_next/image?url=%2Ftest.png&w=384&q=75 384w'
|
|
)
|
|
})
|
|
|
|
it.each([
|
|
{
|
|
name: 'without deployment add',
|
|
src: '/_next/static/media/test.3f1a293b.png',
|
|
expected: `/_next/image?url=${encodeURIComponent('/_next/static/media/test.3f1a293b.png')}&w=3840&q=75`,
|
|
},
|
|
{
|
|
name: 'adding a deployment id',
|
|
src: '/_next/static/media/test.3f1a293b.png',
|
|
dpl: 'dpl_123',
|
|
expected: `/_next/image?url=${encodeURIComponent('/_next/static/media/test.3f1a293b.png')}&w=3840&q=75&dpl=dpl_123`,
|
|
},
|
|
{
|
|
name: 'respect existing deployment id',
|
|
src: '/_next/static/media/test.3f1a293b.png?dpl=dpl_existing',
|
|
dpl: 'dpl_123',
|
|
expected: `/_next/image?url=${encodeURIComponent('/_next/static/media/test.3f1a293b.png')}&w=3840&q=75&dpl=dpl_existing`,
|
|
},
|
|
{
|
|
name: 'unoptimized without deployment add',
|
|
unoptimized: true,
|
|
src: '/_next/static/media/test.3f1a293b.png',
|
|
expected: '/_next/static/media/test.3f1a293b.png',
|
|
},
|
|
{
|
|
name: 'unoptimized adding a deployment id',
|
|
unoptimized: true,
|
|
src: '/_next/static/media/test.3f1a293b.png',
|
|
dpl: 'dpl_123',
|
|
expected: '/_next/static/media/test.3f1a293b.png?dpl=dpl_123',
|
|
},
|
|
{
|
|
name: 'unoptimized respect existing deployment id',
|
|
unoptimized: true,
|
|
src: '/_next/static/media/test.3f1a293b.png?dpl=dpl_existing',
|
|
dpl: 'dpl_123',
|
|
expected: '/_next/static/media/test.3f1a293b.png?dpl=dpl_existing',
|
|
},
|
|
{
|
|
name: 'unicode: without deployment add',
|
|
src: '/_next/static/media/äöüščří.3f1a293b.png',
|
|
expected: `/_next/image?url=${encodeURIComponent('/_next/static/media/äöüščří.3f1a293b.png')}&w=3840&q=75`,
|
|
},
|
|
{
|
|
name: 'unicode: adding a deployment id',
|
|
src: '/_next/static/media/äöüščří.3f1a293b.png',
|
|
dpl: 'dpl_123',
|
|
expected: `/_next/image?url=${encodeURIComponent('/_next/static/media/äöüščří.3f1a293b.png')}&w=3840&q=75&dpl=dpl_123`,
|
|
},
|
|
{
|
|
name: 'unicode: respect existing deployment id',
|
|
src: '/_next/static/media/äöüščří.3f1a293b.png?dpl=dpl_existing',
|
|
dpl: 'dpl_123',
|
|
expected: `/_next/image?url=${encodeURIComponent('/_next/static/media/äöüščří.3f1a293b.png')}&w=3840&q=75&dpl=dpl_existing`,
|
|
},
|
|
{
|
|
name: 'unicode: unoptimized without deployment add',
|
|
unoptimized: true,
|
|
src: '/_next/static/media/äöüščří.3f1a293b.png',
|
|
expected: '/_next/static/media/äöüščří.3f1a293b.png',
|
|
},
|
|
{
|
|
name: 'unicode: unoptimized adding a deployment id',
|
|
unoptimized: true,
|
|
src: '/_next/static/media/äöüščří.3f1a293b.png',
|
|
dpl: 'dpl_123',
|
|
expected: '/_next/static/media/äöüščří.3f1a293b.png?dpl=dpl_123',
|
|
},
|
|
{
|
|
name: 'unicode: unoptimized respect existing deployment id',
|
|
unoptimized: true,
|
|
src: '/_next/static/media/äöüščří.3f1a293b.png?dpl=dpl_existing',
|
|
dpl: 'dpl_123',
|
|
expected: '/_next/static/media/äöüščří.3f1a293b.png?dpl=dpl_existing',
|
|
},
|
|
])(
|
|
'should correctly handle deployment ids: $name',
|
|
async ({ src, unoptimized, dpl, expected }) => {
|
|
deploymentId = dpl
|
|
try {
|
|
const element = React.createElement(Image, {
|
|
src,
|
|
unoptimized,
|
|
width: 100,
|
|
height: 100,
|
|
sizes: '50vw',
|
|
})
|
|
const $ = cheerio.load(ReactDOM.renderToString(element))
|
|
const noscriptImg = $('noscript img')
|
|
expect(noscriptImg.attr('src')).toBe(expected)
|
|
} finally {
|
|
deploymentId = undefined
|
|
}
|
|
}
|
|
)
|
|
})
|