Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(#40025): run next/script beforeInteractive test in both dev & prod #40541

Merged
merged 2 commits into from Sep 14, 2022
Merged
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
156 changes: 78 additions & 78 deletions test/integration/script-loader/test/index.test.js
Expand Up @@ -94,74 +94,72 @@ const runTests = (isDev = false) => {
}
})

if (!isDev) {
it('priority beforeInteractive', async () => {
const html = await renderViaHTTP(appPort, '/page1')
const $ = cheerio.load(html)
it('priority beforeInteractive', async () => {
const html = await renderViaHTTP(appPort, '/page1')
const $ = cheerio.load(html)

function test(id) {
const script = $(`#${id}`)
function test(id) {
const script = $(`#${id}`)

// Renders script tag
expect(script.length).toBe(1)
expect(script.attr('data-nscript')).toBeDefined()
// Renders script tag
expect(script.length).toBe(1)
expect(script.attr('data-nscript')).toBeDefined()

// Script is inserted before NextScripts
expect(
$(`#${id} ~ script[src^="/_next/static/chunks/main"]`).length
).toBeGreaterThan(0)
}
// Script is inserted before NextScripts
expect(
$(`#${id} ~ script[src^="/_next/static/chunks/main"]`).length
).toBeGreaterThan(0)
}

test('scriptBeforeInteractive')
})
test('scriptBeforeInteractive')
})

// Warning - Will be removed in the next major release
it('priority beforeInteractive - older version', async () => {
const html = await renderViaHTTP(appPort, '/page6')
const $ = cheerio.load(html)
// Warning - Will be removed in the next major release
it('priority beforeInteractive - older version', async () => {
const html = await renderViaHTTP(appPort, '/page6')
const $ = cheerio.load(html)

function test(id) {
const script = $(`#${id}`)
function test(id) {
const script = $(`#${id}`)

// Renders script tag
expect(script.length).toBe(1)
expect(script.attr('data-nscript')).toBeDefined()
// Renders script tag
expect(script.length).toBe(1)
expect(script.attr('data-nscript')).toBeDefined()

// Script is inserted before NextScripts
expect(
$(`#${id} ~ script[src^="/_next/static/chunks/main"]`).length
).toBeGreaterThan(0)
}
// Script is inserted before NextScripts
expect(
$(`#${id} ~ script[src^="/_next/static/chunks/main"]`).length
).toBeGreaterThan(0)
}

test('scriptBeforePageRenderOld')
})
test('scriptBeforePageRenderOld')
})

it('priority beforeInteractive on navigate', async () => {
let browser
try {
browser = await webdriver(appPort, '/')
it('priority beforeInteractive on navigate', async () => {
let browser
try {
browser = await webdriver(appPort, '/')

// beforeInteractive scripts should load once
let documentBIScripts = await browser.elementsByCss(
'[src$="scriptBeforeInteractive"]'
)
expect(documentBIScripts.length).toBe(2)
// beforeInteractive scripts should load once
let documentBIScripts = await browser.elementsByCss(
'[src$="scriptBeforeInteractive"]'
)
expect(documentBIScripts.length).toBe(2)

await browser.waitForElementByCss('[href="/page1"]')
await browser.click('[href="/page1"]')
await browser.waitForElementByCss('[href="/page1"]')
await browser.click('[href="/page1"]')

await browser.waitForElementByCss('.container')
await browser.waitForElementByCss('.container')

// Ensure beforeInteractive script isn't duplicated on navigation
documentBIScripts = await browser.elementsByCss(
'[src$="scriptBeforeInteractive"]'
)
expect(documentBIScripts.length).toBe(2)
} finally {
if (browser) await browser.close()
}
})
}
// Ensure beforeInteractive script isn't duplicated on navigation
documentBIScripts = await browser.elementsByCss(
'[src$="scriptBeforeInteractive"]'
)
expect(documentBIScripts.length).toBe(2)
} finally {
if (browser) await browser.close()
}
})

it('onload fires correctly', async () => {
let browser
Expand All @@ -187,37 +185,39 @@ const runTests = (isDev = false) => {
}
})

if (!isDev) {
it('priority beforeInteractive with inline script', async () => {
const html = await renderViaHTTP(appPort, '/page5')
const $ = cheerio.load(html)
it('priority beforeInteractive with inline script', async () => {
const html = await renderViaHTTP(appPort, '/page5')
const $ = cheerio.load(html)

const script = $('#inline-before')
expect(script.length).toBe(1)
const script = $('#inline-before')
expect(script.length).toBe(1)

// css bundle is only generated in production, so only perform inline script position check in production
if (!isDev) {
// Script is inserted before CSS
expect(
$(`#inline-before ~ link[href^="/_next/static/css"]`).length
).toBeGreaterThan(0)
})
}
Comment on lines +195 to +201
Copy link
Contributor Author

@SukkaW SukkaW Sep 14, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Note that there is no /_next/static/css bundle generated in dev mode (where HMR CSS is used instead), so this expect is skipped in dev.

})

it('priority beforeInteractive with inline script should execute', async () => {
let browser
try {
browser = await webdriver(appPort, '/page7')
await waitFor(1000)

const logs = await browser.log()
expect(
logs.some((log) =>
log.message.includes('beforeInteractive inline script run')
)
).toBe(true)
} finally {
if (browser) await browser.close()
}
})
}
it('priority beforeInteractive with inline script should execute', async () => {
let browser
try {
browser = await webdriver(appPort, '/page7')
await waitFor(1000)

const logs = await browser.log()
// not only should inline script run, but also should only run once
expect(
logs.filter((log) =>
log.message.includes('beforeInteractive inline script run')
).length
).toBe(1)
} finally {
if (browser) await browser.close()
}
})

it('Does not duplicate inline scripts', async () => {
let browser
Expand Down