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
529 lines
14 KiB
TypeScript
529 lines
14 KiB
TypeScript
import webdriver, { Playwright } from 'next-webdriver'
|
|
import { createNext } from 'e2e-utils'
|
|
import { NextInstance } from 'e2e-utils'
|
|
import { check } from 'next-test-utils'
|
|
|
|
describe('beforeInteractive in document Head', () => {
|
|
let next: NextInstance
|
|
|
|
beforeAll(async () => {
|
|
next = await createNext({
|
|
files: {
|
|
'pages/_document.js': `
|
|
import { Html, Head, Main, NextScript } from 'next/document'
|
|
import Script from 'next/script'
|
|
|
|
export default function Document() {
|
|
return (
|
|
<Html>
|
|
<Head>
|
|
<Script
|
|
src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.20/lodash.min.js"
|
|
strategy="beforeInteractive"
|
|
></Script>
|
|
</Head>
|
|
<body>
|
|
<Main />
|
|
<NextScript />
|
|
</body>
|
|
</Html>
|
|
)
|
|
}
|
|
`,
|
|
'pages/index.js': `
|
|
export default function Home() {
|
|
return (
|
|
<>
|
|
<p>Home page</p>
|
|
</>
|
|
)
|
|
}
|
|
`,
|
|
},
|
|
})
|
|
})
|
|
afterAll(() => next.destroy())
|
|
|
|
it('Script is injected server-side', async () => {
|
|
let browser: Playwright
|
|
|
|
try {
|
|
browser = await webdriver(next.url, '/')
|
|
|
|
const script = await browser.eval(
|
|
`document.querySelector('script[data-nscript="beforeInteractive"]')`
|
|
)
|
|
expect(script).not.toBeNull()
|
|
} finally {
|
|
if (browser) await browser.close()
|
|
}
|
|
})
|
|
})
|
|
|
|
describe('beforeInteractive in document body', () => {
|
|
let next: NextInstance
|
|
|
|
beforeAll(async () => {
|
|
next = await createNext({
|
|
files: {
|
|
'pages/_document.js': `
|
|
import { Html, Head, Main, NextScript } from 'next/document'
|
|
import Script from 'next/script'
|
|
|
|
export default function Document() {
|
|
return (
|
|
<Html>
|
|
<Head />
|
|
<body>
|
|
<Main />
|
|
<NextScript />
|
|
<Script
|
|
src="https://www.google-analytics.com/analytics.js"
|
|
strategy="beforeInteractive"
|
|
/>
|
|
</body>
|
|
</Html>
|
|
)
|
|
}
|
|
`,
|
|
'pages/index.js': `
|
|
export default function Home() {
|
|
return (
|
|
<>
|
|
<p>Home page</p>
|
|
</>
|
|
)
|
|
}
|
|
`,
|
|
},
|
|
})
|
|
})
|
|
afterAll(() => next.destroy())
|
|
|
|
it('Script is injected server-side', async () => {
|
|
let browser: Playwright
|
|
|
|
try {
|
|
browser = await webdriver(next.url, '/')
|
|
|
|
const script = await browser.eval(
|
|
`document.querySelector('script[data-nscript="beforeInteractive"]')`
|
|
)
|
|
|
|
expect(script).not.toBeNull()
|
|
} finally {
|
|
if (browser) await browser.close()
|
|
}
|
|
})
|
|
})
|
|
|
|
describe('empty strategy in document Head', () => {
|
|
let next: NextInstance
|
|
|
|
beforeAll(async () => {
|
|
next = await createNext({
|
|
files: {
|
|
'pages/_document.js': `
|
|
import { Html, Head, Main, NextScript } from 'next/document'
|
|
import Script from 'next/script'
|
|
|
|
export default function Document() {
|
|
return (
|
|
<Html>
|
|
<Head>
|
|
<Script
|
|
src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.20/lodash.min.js"
|
|
></Script>
|
|
</Head>
|
|
<body>
|
|
<Main />
|
|
<NextScript />
|
|
</body>
|
|
</Html>
|
|
)
|
|
}
|
|
`,
|
|
'pages/index.js': `
|
|
export default function Home() {
|
|
return (
|
|
<>
|
|
<p>Home page</p>
|
|
</>
|
|
)
|
|
}
|
|
`,
|
|
},
|
|
})
|
|
})
|
|
afterAll(() => next.destroy())
|
|
|
|
it('Script is injected server-side', async () => {
|
|
let browser: Playwright
|
|
|
|
try {
|
|
browser = await webdriver(next.url, '/')
|
|
|
|
const script = await browser.eval(
|
|
`document.querySelector('script[data-nscript="afterInteractive"]')`
|
|
)
|
|
expect(script).not.toBeNull()
|
|
} finally {
|
|
if (browser) await browser.close()
|
|
}
|
|
})
|
|
})
|
|
|
|
describe('empty strategy in document body', () => {
|
|
let next: NextInstance
|
|
|
|
beforeAll(async () => {
|
|
next = await createNext({
|
|
files: {
|
|
'pages/_document.js': `
|
|
import { Html, Head, Main, NextScript } from 'next/document'
|
|
import Script from 'next/script'
|
|
|
|
export default function Document() {
|
|
return (
|
|
<Html>
|
|
<Head/>
|
|
<body>
|
|
<Main />
|
|
<NextScript />
|
|
<Script
|
|
src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.20/lodash.min.js"
|
|
/>
|
|
</body>
|
|
</Html>
|
|
)
|
|
}
|
|
`,
|
|
'pages/index.js': `
|
|
export default function Home() {
|
|
return (
|
|
<>
|
|
<p>Home page</p>
|
|
</>
|
|
)
|
|
}
|
|
`,
|
|
},
|
|
})
|
|
})
|
|
afterAll(() => next.destroy())
|
|
|
|
it('Script is injected server-side', async () => {
|
|
let browser: Playwright
|
|
|
|
try {
|
|
browser = await webdriver(next.url, '/')
|
|
|
|
const script = await browser.eval(
|
|
`document.querySelector('script[data-nscript="afterInteractive"]')`
|
|
)
|
|
expect(script).not.toBeNull()
|
|
} finally {
|
|
if (browser) await browser.close()
|
|
}
|
|
})
|
|
})
|
|
;(process.env.IS_TURBOPACK_TEST ? describe.skip : describe)(
|
|
'experimental.nextScriptWorkers',
|
|
() => {
|
|
describe('experimental.nextScriptWorkers: false with no Partytown dependency', () => {
|
|
let next: NextInstance
|
|
|
|
beforeAll(async () => {
|
|
next = await createNext({
|
|
files: {
|
|
'pages/index.js': `
|
|
import Script from 'next/script'
|
|
|
|
export default function Page() {
|
|
return (
|
|
<>
|
|
<Script
|
|
src="https://cdn.jsdelivr.net/npm/cookieconsent@3/build/cookieconsent.min.js"
|
|
strategy="worker"
|
|
/>
|
|
</>
|
|
)
|
|
}
|
|
`,
|
|
},
|
|
})
|
|
})
|
|
afterAll(() => next.destroy())
|
|
|
|
it('Partytown snippet is not injected to head if not enabled in configuration', async () => {
|
|
let browser: Playwright
|
|
|
|
try {
|
|
browser = await webdriver(next.url, '/')
|
|
|
|
const snippetScript = await browser.eval(
|
|
`document.querySelector('script[data-partytown]')`
|
|
)
|
|
|
|
expect(snippetScript).toEqual(null)
|
|
} finally {
|
|
if (browser) await browser.close()
|
|
}
|
|
})
|
|
})
|
|
|
|
describe('experimental.nextScriptWorkers: true with required Partytown dependency for external script', () => {
|
|
let next: NextInstance
|
|
|
|
beforeAll(async () => {
|
|
next = await createNext({
|
|
nextConfig: {
|
|
experimental: {
|
|
nextScriptWorkers: true,
|
|
},
|
|
},
|
|
files: {
|
|
'pages/index.js': `
|
|
import Script from 'next/script'
|
|
|
|
export default function Page() {
|
|
return (
|
|
<>
|
|
<Script
|
|
src="https://cdn.jsdelivr.net/npm/cookieconsent@3/build/cookieconsent.min.js"
|
|
strategy="worker"
|
|
/>
|
|
</>
|
|
)
|
|
}
|
|
`,
|
|
},
|
|
dependencies: {
|
|
'@builder.io/partytown': '0.4.2',
|
|
},
|
|
})
|
|
})
|
|
afterAll(() => next.destroy())
|
|
|
|
it('Partytown snippets are injected to head if enabled in configuration', async () => {
|
|
let browser: Playwright
|
|
|
|
try {
|
|
browser = await webdriver(next.url, '/')
|
|
|
|
const snippetScript = await browser.eval(
|
|
`document.querySelector('script[data-partytown]').innerHTML`
|
|
)
|
|
const configScript = await browser.eval(
|
|
`document.querySelector('script[data-partytown-config]').innerHTML`
|
|
)
|
|
|
|
expect(snippetScript).not.toEqual(null)
|
|
|
|
// A default config is included that points to the correct folder that hosts partytown's static files
|
|
expect(configScript).not.toEqual(null)
|
|
expect(configScript.replace(/(?: *[\n\r])+ */g, '')).toEqual(
|
|
'partytown = {lib: "/_next/static/~partytown/"};'
|
|
)
|
|
} finally {
|
|
if (browser) await browser.close()
|
|
}
|
|
})
|
|
|
|
it('Worker scripts are modified by Partytown to execute on a worker thread', async () => {
|
|
let browser: Playwright
|
|
|
|
try {
|
|
browser = await webdriver(next.url, '/')
|
|
|
|
// Partytown modifies type to "text/partytown-x" after it has been executed in the web worker
|
|
await check(async () => {
|
|
const processedWorkerScripts = await browser.eval(
|
|
`document.querySelectorAll('script[type="text/partytown-x"]').length`
|
|
)
|
|
return processedWorkerScripts > 0
|
|
? 'success'
|
|
: processedWorkerScripts
|
|
}, 'success')
|
|
} finally {
|
|
if (browser) await browser.close()
|
|
}
|
|
})
|
|
})
|
|
|
|
describe('experimental.nextScriptWorkers: true with required Partytown dependency for inline script', () => {
|
|
let next: NextInstance
|
|
|
|
// Note: previously we were using `finally` cluase inside of test assertion. However, if the test times out
|
|
// exceeding jest.setTimeout() value, the finally clause is not executed and subsequent tests will fail due to
|
|
// hanging next instance.
|
|
afterEach(async () => {
|
|
if (next) {
|
|
await next.destroy()
|
|
next = undefined
|
|
}
|
|
})
|
|
|
|
const createNextApp = async (script) =>
|
|
await createNext({
|
|
nextConfig: {
|
|
experimental: {
|
|
nextScriptWorkers: true,
|
|
},
|
|
},
|
|
files: {
|
|
'pages/index.js': `
|
|
import Script from 'next/script'
|
|
|
|
export default function Page() {
|
|
return (
|
|
<>
|
|
${script}
|
|
<div id="text" />
|
|
</>
|
|
)
|
|
}
|
|
`,
|
|
},
|
|
dependencies: {
|
|
'@builder.io/partytown': '0.4.2',
|
|
},
|
|
})
|
|
|
|
it('Inline worker script through children is modified by Partytown to execute on a worker thread', async () => {
|
|
let browser: Playwright
|
|
|
|
next = await createNextApp(
|
|
`<Script id="inline-script" strategy="worker">{"document.getElementById('text').textContent += 'abc'"}</Script>`
|
|
)
|
|
|
|
try {
|
|
browser = await webdriver(next.url, '/')
|
|
|
|
// Partytown modifies type to "text/partytown-x" after it has been executed in the web worker
|
|
await check(async () => {
|
|
const processedWorkerScripts = await browser.eval(
|
|
`document.querySelectorAll('script[type="text/partytown-x"]').length`
|
|
)
|
|
return processedWorkerScripts + ''
|
|
}, '1')
|
|
|
|
const text = await browser.elementById('text').text()
|
|
expect(text).toBe('abc')
|
|
} finally {
|
|
if (browser) await browser.close()
|
|
}
|
|
})
|
|
|
|
it('Inline worker script through dangerouslySetInnerHtml is modified by Partytown to execute on a worker thread', async () => {
|
|
let browser: Playwright
|
|
|
|
next = await createNextApp(
|
|
`<Script id="inline-script" strategy="worker" dangerouslySetInnerHTML={{__html: "document.getElementById('text').textContent += 'abcd'"}}/>`
|
|
)
|
|
|
|
try {
|
|
browser = await webdriver(next.url, '/')
|
|
|
|
// Partytown modifies type to "text/partytown-x" after it has been executed in the web worker
|
|
await check(async () => {
|
|
const processedWorkerScripts = await browser.eval(
|
|
`document.querySelectorAll('script[type="text/partytown-x"]').length`
|
|
)
|
|
return processedWorkerScripts + ''
|
|
}, '1')
|
|
|
|
const text = await browser.elementById('text').text()
|
|
expect(text).toBe('abcd')
|
|
} finally {
|
|
if (browser) await browser.close()
|
|
}
|
|
})
|
|
})
|
|
|
|
describe('experimental.nextScriptWorkers: true with config override', () => {
|
|
let next: NextInstance
|
|
|
|
beforeAll(async () => {
|
|
next = await createNext({
|
|
nextConfig: {
|
|
experimental: {
|
|
nextScriptWorkers: true,
|
|
},
|
|
},
|
|
files: {
|
|
'pages/_document.js': `
|
|
import Document, { Html, Head, Main, NextScript } from "next/document";
|
|
|
|
class MyDocument extends Document {
|
|
render() {
|
|
return (
|
|
<Html>
|
|
<Head>
|
|
<script
|
|
data-partytown-config
|
|
dangerouslySetInnerHTML={{
|
|
__html: \`
|
|
partytown = {
|
|
lib: "/_next/static/~partytown/",
|
|
debug: true
|
|
};
|
|
\`,
|
|
}}
|
|
/>
|
|
</Head>
|
|
<body>
|
|
<Main />
|
|
<NextScript />
|
|
</body>
|
|
</Html>
|
|
);
|
|
}
|
|
}
|
|
|
|
export default MyDocument;
|
|
`,
|
|
'pages/index.js': `
|
|
import Script from 'next/script'
|
|
|
|
export default function Page() {
|
|
return (
|
|
<>
|
|
<Script
|
|
src="https://cdn.jsdelivr.net/npm/cookieconsent@3/build/cookieconsent.min.js"
|
|
strategy="worker"
|
|
/>
|
|
</>
|
|
)
|
|
}
|
|
`,
|
|
},
|
|
dependencies: {
|
|
'@builder.io/partytown': '0.4.2',
|
|
},
|
|
})
|
|
})
|
|
afterAll(() => next.destroy())
|
|
|
|
it('Partytown config script is overwritten', async () => {
|
|
let browser: Playwright
|
|
|
|
try {
|
|
browser = await webdriver(next.url, '/')
|
|
|
|
const configScript = await browser.eval(
|
|
`document.querySelector('script[data-partytown-config]').innerHTML`
|
|
)
|
|
|
|
expect(configScript).not.toEqual(null)
|
|
expect(configScript.replace(/(?: *[\n\r])+ */g, '')).toEqual(
|
|
'partytown = {lib: "/_next/static/~partytown/",debug: true};'
|
|
)
|
|
} finally {
|
|
if (browser) await browser.close()
|
|
}
|
|
})
|
|
})
|
|
}
|
|
)
|