mirror of
https://github.com/vercel/next.js.git
synced 2026-09-20 02:25:18 +08:00
Hendrik Liebau
9f181bd11a
[Flakiness metric](https://app.datadoghq.com/ci/test/runs?query=test_level%3Atest%20%40git.repository.id%3A%22github.com%2Fvercel%2Fnext.js%22%20%40test.name%3A%28%22Build%20Activity%20Indicator%20Enabled%20-%20%28app%29%20Shows%20build%20indicator%20when%20page%20is%20built%20from%20modifying%22%20OR%20%22Build%20Activity%20Indicator%20Enabled%20-%20%28pages%29%20Shows%20build%20indicator%20when%20page%20is%20built%20from%20modifying%22%20OR%20%22Dev%20Rendering%20Indicator%20Shows%20build%20indicator%20when%20page%20is%20built%20from%20modifying%22%29%20%40test.status%3Afail&agg_m=count&agg_m_source=base&agg_t=count&fromUser=false&index=citest&start=1773322068865&end=1773926868865&paused=false) In #85083 we introduced a delay of 400 ms before showing the building/rendering indicator, to avoid flashing it for fast operations. For now, we skip the building indicator tests because our simple test apps usually compile much faster than that, and we haven't found a good way to reliably test the indicator without flakiness. We do keep the rendering indicator test, but increase the timeout in the pages to ensure the indicator is shown for long enough to be detected by the test.
51 lines
1.7 KiB
TypeScript
51 lines
1.7 KiB
TypeScript
/* eslint-env jest */
|
|
|
|
import { nextTestSetup } from 'e2e-utils'
|
|
import { retry } from 'next-test-utils'
|
|
|
|
const installCheckVisible = (browser) => {
|
|
return browser.eval(`(function() {
|
|
window.checkInterval = setInterval(function() {
|
|
const root = document.querySelector('nextjs-portal').shadowRoot;
|
|
const statusElement = root.querySelector('[data-indicator-status]')
|
|
const badge = root.querySelector('[data-next-badge]')
|
|
const status = badge ? badge.getAttribute('data-status') : null
|
|
|
|
// Check if we're showing any status (rendering, compiling, etc.)
|
|
window.showedIndicator = window.showedIndicator || (
|
|
statusElement !== null || (status && status !== 'none')
|
|
)
|
|
if (window.showedIndicator) clearInterval(window.checkInterval)
|
|
}, 5)
|
|
})()`)
|
|
}
|
|
|
|
describe('Dev Rendering Indicator', () => {
|
|
const { next } = nextTestSetup({
|
|
files: __dirname,
|
|
})
|
|
|
|
it('Shows rendering indicator when navigating between pages', async () => {
|
|
// Ensure both pages are built first so that we don't confuse it with build indicator
|
|
await Promise.all([
|
|
next.fetch('/app/rendering/a'),
|
|
next.fetch('/app/rendering/b'),
|
|
])
|
|
const browser = await next.browser('/app/rendering/a')
|
|
await installCheckVisible(browser)
|
|
await browser.eval('window.showedIndicator = false')
|
|
|
|
await browser.elementByCss('[href="/app/rendering/b"]').click()
|
|
await retry(async () => {
|
|
await browser.elementByCss('[href="/app/rendering/a"]')
|
|
})
|
|
|
|
const showedRenderingIndicator = await browser.eval(
|
|
'window.showedIndicator'
|
|
)
|
|
expect({ showedRenderingIndicator }).toEqual({
|
|
showedRenderingIndicator: true,
|
|
})
|
|
})
|
|
})
|