mirror of
https://github.com/hanzoai/next.js.git
synced 2026-10-30 14:46:38 +00:00
Niklas MischkulnigandGitHub
02af7ed3a4
*This doesn't enable skew protection for any new tests, only preparation* Prepare a lot of test assertions so that they work correctly when a `?dpl=123` query param is present: - some regexes should accept the query - some places assumed that the `<script>`'s `src` is a valid pathname, whereas it might have a query param that has to be stripped before removing the path - some hardcoded build ids instead of `next.buildId`
231 lines
6.8 KiB
TypeScript
231 lines
6.8 KiB
TypeScript
/* eslint-env jest */
|
|
|
|
import { nextTestSetup } from 'e2e-utils'
|
|
|
|
const nextConfig = {
|
|
productionBrowserSourceMaps: true,
|
|
}
|
|
|
|
describe.each([
|
|
{ dependencies: { sass: '1.54.0' }, nextConfig },
|
|
{
|
|
dependencies: { 'sass-embedded': '1.75.0' },
|
|
nextConfig: {
|
|
...nextConfig,
|
|
sassOptions: {
|
|
implementation: 'sass-embedded',
|
|
},
|
|
},
|
|
},
|
|
])('SCSS Support ($dependencies)', ({ dependencies, nextConfig }) => {
|
|
const { next, isNextDev, skipped } = nextTestSetup({
|
|
files: __dirname,
|
|
// This test is skipped because it is reading files in the `.next` file which
|
|
// isn't available/necessary in a deployment environment.
|
|
skipDeployment: true,
|
|
dependencies,
|
|
nextConfig,
|
|
})
|
|
|
|
if (skipped) return // TODO: Figure out this test for dev and Turbopack
|
|
;(isNextDev ? describe.skip : describe)('Production only', () => {
|
|
describe('CSS Compilation and Prefixing', () => {
|
|
it(`should've compiled and prefixed`, async () => {
|
|
const $ = await next.render$('/')
|
|
|
|
const cssSheet = $('link[rel="stylesheet"]')
|
|
expect(cssSheet.length).toBe(1)
|
|
|
|
const stylesheetUrl = cssSheet.attr('href')
|
|
|
|
const cssContent = await next
|
|
.fetch(stylesheetUrl)
|
|
.then((res) => res.text())
|
|
const cssContentWithoutSourceMap = cssContent
|
|
.replace(/\/\*.*?\*\//g, '')
|
|
.trim()
|
|
|
|
if (process.env.IS_TURBOPACK_TEST) {
|
|
if (dependencies.sass) {
|
|
expect(cssContentWithoutSourceMap).toMatchInlineSnapshot(
|
|
`".redText ::placeholder{color:red}.flex-parsing{flex:0 0 calc(50% - var(--vertical-gutter))}"`
|
|
)
|
|
} else {
|
|
expect(cssContentWithoutSourceMap).toMatchInlineSnapshot(
|
|
`".redText ::placeholder{color:red}.flex-parsing{flex:0 0 calc(50% - var(--vertical-gutter))}"`
|
|
)
|
|
}
|
|
} else {
|
|
if (dependencies.sass) {
|
|
expect(cssContentWithoutSourceMap).toMatchInlineSnapshot(
|
|
`".redText ::placeholder{color:red}.flex-parsing{flex:0 0 calc(50% - var(--vertical-gutter))}"`
|
|
)
|
|
} else {
|
|
expect(cssContentWithoutSourceMap).toMatchInlineSnapshot(
|
|
`".redText ::placeholder{color:red}.flex-parsing{flex:0 0 calc(50% - var(--vertical-gutter))}"`
|
|
)
|
|
}
|
|
}
|
|
|
|
// Contains a source map
|
|
expect(cssContent).toMatch(/\/\*#\s*sourceMappingURL=(.+\.map)\s*\*\//)
|
|
|
|
// Check sourcemap
|
|
const sourceMapUrl = /\/\*#\s*sourceMappingURL=(.+\.map)\s*\*\//.exec(
|
|
cssContent
|
|
)[1]
|
|
|
|
const actualSourceMapUrl = stylesheetUrl.replace(
|
|
/(?<=^|\/)[^/?]+(?=$|\?)/,
|
|
sourceMapUrl
|
|
)
|
|
const sourceMapContent = await next
|
|
.fetch(actualSourceMapUrl)
|
|
.then((res) => res.text())
|
|
const sourceMapContentParsed = JSON.parse(sourceMapContent)
|
|
// Ensure it doesn't have a specific path in the snapshot.
|
|
delete sourceMapContentParsed.file
|
|
delete sourceMapContentParsed.sources
|
|
|
|
if (process.env.IS_TURBOPACK_TEST) {
|
|
if (dependencies.sass) {
|
|
expect(sourceMapContentParsed).toMatchInlineSnapshot(`
|
|
{
|
|
"mappings": "AAEE,iCAKF",
|
|
"names": [],
|
|
"sourcesContent": [
|
|
"$var: red;
|
|
.redText {
|
|
::placeholder {
|
|
color: $var;
|
|
}
|
|
}
|
|
|
|
.flex-parsing {
|
|
flex: 0 0 calc(50% - var(--vertical-gutter));
|
|
}
|
|
",
|
|
],
|
|
"version": 3,
|
|
}
|
|
`)
|
|
} else {
|
|
expect(sourceMapContentParsed).toMatchInlineSnapshot(`
|
|
{
|
|
"mappings": "AAEE,iCAKF",
|
|
"names": [],
|
|
"sourcesContent": [
|
|
"$var: red;
|
|
.redText {
|
|
::placeholder {
|
|
color: $var;
|
|
}
|
|
}
|
|
|
|
.flex-parsing {
|
|
flex: 0 0 calc(50% - var(--vertical-gutter));
|
|
}
|
|
",
|
|
],
|
|
"version": 3,
|
|
}
|
|
`)
|
|
}
|
|
} else if (process.env.NEXT_RSPACK) {
|
|
if (dependencies.sass) {
|
|
expect(sourceMapContentParsed).toMatchInlineSnapshot(`
|
|
{
|
|
"mappings": "AAEE,uBACE,SAHE,CAON,cACE,2CAAA",
|
|
"names": [],
|
|
"sourcesContent": [
|
|
"$var: red;
|
|
.redText {
|
|
::placeholder {
|
|
color: $var;
|
|
}
|
|
}
|
|
|
|
.flex-parsing {
|
|
flex: 0 0 calc(50% - var(--vertical-gutter));
|
|
}
|
|
",
|
|
],
|
|
"version": 3,
|
|
}
|
|
`)
|
|
} else {
|
|
expect(sourceMapContentParsed).toMatchInlineSnapshot(`
|
|
{
|
|
"mappings": "AAEE,uBACE,SAHE,CAON,cACE,2CAAA",
|
|
"names": [],
|
|
"sourcesContent": [
|
|
"$var: red;
|
|
.redText {
|
|
::placeholder {
|
|
color: $var;
|
|
}
|
|
}
|
|
|
|
.flex-parsing {
|
|
flex: 0 0 calc(50% - var(--vertical-gutter));
|
|
}
|
|
",
|
|
],
|
|
"version": 3,
|
|
}
|
|
`)
|
|
}
|
|
} else {
|
|
if (dependencies.sass) {
|
|
expect(sourceMapContentParsed).toMatchInlineSnapshot(`
|
|
{
|
|
"ignoreList": [],
|
|
"mappings": "AAEE,uBACE,SAHE,CAON,cACE,2CAAA",
|
|
"names": [],
|
|
"sourceRoot": "",
|
|
"sourcesContent": [
|
|
"$var: red;
|
|
.redText {
|
|
::placeholder {
|
|
color: $var;
|
|
}
|
|
}
|
|
|
|
.flex-parsing {
|
|
flex: 0 0 calc(50% - var(--vertical-gutter));
|
|
}
|
|
",
|
|
],
|
|
"version": 3,
|
|
}
|
|
`)
|
|
} else {
|
|
expect(sourceMapContentParsed).toMatchInlineSnapshot(`
|
|
{
|
|
"ignoreList": [],
|
|
"mappings": "AAEE,uBACE,SAHE,CAON,cACE,2CAAA",
|
|
"names": [],
|
|
"sourceRoot": "",
|
|
"sourcesContent": [
|
|
"$var: red;
|
|
.redText {
|
|
::placeholder {
|
|
color: $var;
|
|
}
|
|
}
|
|
|
|
.flex-parsing {
|
|
flex: 0 0 calc(50% - var(--vertical-gutter));
|
|
}
|
|
",
|
|
],
|
|
"version": 3,
|
|
}
|
|
`)
|
|
}
|
|
}
|
|
})
|
|
})
|
|
})
|
|
})
|