mirror of
https://github.com/hanzoai/next.js.git
synced 2026-10-30 14:46:38 +00:00
Hendrik LiebauandGitHub
4693685be1
[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%22Client%20navigation%20with%20URL%20hash%20when%20hash%20changes%20with%20state%20when%20passing%20state%20via%20hash%20change%20should%20increment%20the%20history%20state%20counter%22%20%40test.type%3A%22turbopack%22%20%40test.status%3A%22fail%22&agg_m=count&agg_m_source=base&agg_t=count&fromUser=false&index=citest&start=1773314950142&end=1773919750142&paused=false) (for one of them) Another case where the Playwright upgrade exposed missing `retry`s.
269 lines
8.1 KiB
TypeScript
269 lines
8.1 KiB
TypeScript
/* eslint-env jest */
|
|
|
|
import path from 'path'
|
|
import { nextTestSetup } from 'e2e-utils'
|
|
import { retry } from 'next-test-utils'
|
|
|
|
describe('Client navigation with URL hash', () => {
|
|
const { next } = nextTestSetup({
|
|
files: path.join(__dirname, 'fixture'),
|
|
env: {
|
|
TEST_STRICT_NEXT_HEAD: String(true),
|
|
},
|
|
})
|
|
|
|
describe('when hash changes', () => {
|
|
describe('check hydration mis-match', () => {
|
|
it('should not have hydration mis-match for hash link', async () => {
|
|
const browser = await next.browser('/nav/hash-changes')
|
|
const browserLogs = await browser.log()
|
|
let found = false
|
|
browserLogs.forEach((log) => {
|
|
console.log('log.message', log.message)
|
|
if (log.message.includes('Warning: Prop')) {
|
|
found = true
|
|
}
|
|
})
|
|
expect(found).toEqual(false)
|
|
})
|
|
})
|
|
|
|
describe('when hash change via Link', () => {
|
|
it('should not run getInitialProps', async () => {
|
|
const browser = await next.browser('/nav/hash-changes')
|
|
|
|
await browser.elementByCss('#via-link').click()
|
|
|
|
await retry(async () => {
|
|
expect(await browser.elementByCss('p').text()).toBe('COUNT: 0')
|
|
})
|
|
|
|
await browser.close()
|
|
})
|
|
|
|
it('should scroll to the specified position on the same page', async () => {
|
|
const browser = await next.browser('/nav/hash-changes')
|
|
|
|
// Scrolls to item 400 on the page
|
|
await browser.elementByCss('#scroll-to-item-400').click()
|
|
|
|
await retry(async () => {
|
|
expect(await browser.eval('window.pageYOffset')).toBe(7258)
|
|
})
|
|
|
|
// Scrolls back to top when scrolling to `#` with no value.
|
|
await browser.elementByCss('#via-empty-hash').click()
|
|
|
|
await retry(async () => {
|
|
expect(await browser.eval('window.pageYOffset')).toBe(0)
|
|
})
|
|
|
|
// Scrolls to item 400 on the page
|
|
await browser.elementByCss('#scroll-to-item-400').click()
|
|
|
|
await retry(async () => {
|
|
expect(await browser.eval('window.pageYOffset')).toBe(7258)
|
|
})
|
|
|
|
// Scrolls back to top when clicking link with href `#top`.
|
|
await browser.elementByCss('#via-top-hash').click()
|
|
|
|
await retry(async () => {
|
|
expect(await browser.eval('window.pageYOffset')).toBe(0)
|
|
})
|
|
|
|
// Scrolls to cjk anchor on the page
|
|
await browser.elementByCss('#scroll-to-cjk-anchor').click()
|
|
|
|
await retry(async () => {
|
|
expect(await browser.eval('window.pageYOffset')).toBe(17436)
|
|
})
|
|
})
|
|
|
|
it('should not scroll to hash when scroll={false} is set', async () => {
|
|
const browser = await next.browser('/nav/hash-changes')
|
|
const curScroll = await browser.eval(
|
|
'document.documentElement.scrollTop'
|
|
)
|
|
await browser.elementByCss('#scroll-to-name-item-400-no-scroll').click()
|
|
|
|
await retry(async () => {
|
|
expect(await browser.eval('document.documentElement.scrollTop')).toBe(
|
|
curScroll
|
|
)
|
|
})
|
|
})
|
|
|
|
it('should scroll to the specified position on the same page with a name property', async () => {
|
|
const browser = await next.browser('/nav/hash-changes')
|
|
|
|
// Scrolls to item 400 with name="name-item-400" on the page
|
|
await browser.elementByCss('#scroll-to-name-item-400').click()
|
|
|
|
await retry(async () => {
|
|
expect(await browser.eval('window.pageYOffset')).toBe(16258)
|
|
})
|
|
|
|
// Scrolls back to top when scrolling to `#` with no value.
|
|
await browser.elementByCss('#via-empty-hash').click()
|
|
|
|
await retry(async () => {
|
|
expect(await browser.eval('window.pageYOffset')).toBe(0)
|
|
})
|
|
})
|
|
|
|
it('should scroll to the specified position to a new page', async () => {
|
|
const browser = await next.browser('/nav')
|
|
|
|
// Scrolls to item 400 on the page
|
|
await browser
|
|
.elementByCss('#scroll-to-hash')
|
|
.click()
|
|
.waitForElementByCss('#hash-changes-page')
|
|
|
|
await retry(async () => {
|
|
expect(await browser.eval('window.pageYOffset')).toBe(7258)
|
|
})
|
|
})
|
|
|
|
it('should scroll to the specified CJK position to a new page', async () => {
|
|
const browser = await next.browser('/nav')
|
|
|
|
// Scrolls to CJK anchor on the page
|
|
await browser
|
|
.elementByCss('#scroll-to-cjk-hash')
|
|
.click()
|
|
.waitForElementByCss('#hash-changes-page')
|
|
|
|
await retry(async () => {
|
|
expect(await browser.eval('window.pageYOffset')).toBe(17436)
|
|
})
|
|
})
|
|
|
|
it('Should update asPath', async () => {
|
|
const browser = await next.browser('/nav/hash-changes')
|
|
|
|
await browser.elementByCss('#via-link').click()
|
|
|
|
await retry(async () => {
|
|
expect(await browser.elementByCss('div#asPath').text()).toBe(
|
|
'ASPATH: /nav/hash-changes#via-link'
|
|
)
|
|
})
|
|
})
|
|
})
|
|
|
|
describe('when hash change via A tag', () => {
|
|
it('should not run getInitialProps', async () => {
|
|
const browser = await next.browser('/nav/hash-changes')
|
|
|
|
await browser.elementByCss('#via-a').click()
|
|
|
|
await retry(async () => {
|
|
expect(await browser.elementByCss('p').text()).toBe('COUNT: 0')
|
|
})
|
|
|
|
await browser.close()
|
|
})
|
|
})
|
|
|
|
describe('when hash get removed', () => {
|
|
it('should not run getInitialProps', async () => {
|
|
const browser = await next.browser('/nav/hash-changes')
|
|
|
|
await browser
|
|
.elementByCss('#via-a')
|
|
.click()
|
|
.elementByCss('#page-url')
|
|
.click()
|
|
|
|
await retry(async () => {
|
|
expect(await browser.elementByCss('p').text()).toBe('COUNT: 1')
|
|
})
|
|
|
|
await browser.close()
|
|
})
|
|
|
|
it('should not run getInitialProps when removing via back', async () => {
|
|
const browser = await next.browser('/nav/hash-changes')
|
|
|
|
await browser.elementByCss('#scroll-to-item-400').click()
|
|
await browser.back()
|
|
|
|
await retry(async () => {
|
|
expect(await browser.elementByCss('p').text()).toBe('COUNT: 0')
|
|
})
|
|
|
|
await browser.close()
|
|
})
|
|
})
|
|
|
|
describe('when hash set to empty', () => {
|
|
it('should not run getInitialProps', async () => {
|
|
const browser = await next.browser('/nav/hash-changes')
|
|
|
|
await browser
|
|
.elementByCss('#via-a')
|
|
.click()
|
|
.elementByCss('#via-empty-hash')
|
|
.click()
|
|
|
|
await retry(async () => {
|
|
expect(await browser.elementByCss('p').text()).toBe('COUNT: 0')
|
|
})
|
|
|
|
await browser.close()
|
|
})
|
|
})
|
|
})
|
|
|
|
describe('when hash changes with state', () => {
|
|
describe('when passing state via hash change', () => {
|
|
it('should increment the history state counter', async () => {
|
|
const browser = await next.browser('/nav/hash-changes-with-state#')
|
|
|
|
await browser
|
|
.elementByCss('#increment-history-count')
|
|
.click()
|
|
.elementByCss('#increment-history-count')
|
|
.click()
|
|
|
|
await retry(async () => {
|
|
expect(await browser.elementByCss('div#history-count').text()).toBe(
|
|
'HISTORY COUNT: 2'
|
|
)
|
|
})
|
|
|
|
const counter = await browser.elementByCss('p').text()
|
|
|
|
// getInitialProps should not be called with only hash changes
|
|
expect(counter).toBe('COUNT: 0')
|
|
|
|
await browser.close()
|
|
})
|
|
|
|
it('should increment the shallow history state counter', async () => {
|
|
const browser = await next.browser('/nav/hash-changes-with-state#')
|
|
|
|
await browser
|
|
.elementByCss('#increment-shallow-history-count')
|
|
.click()
|
|
.elementByCss('#increment-shallow-history-count')
|
|
.click()
|
|
|
|
await retry(async () => {
|
|
expect(
|
|
await browser.elementByCss('div#shallow-history-count').text()
|
|
).toBe('SHALLOW HISTORY COUNT: 2')
|
|
})
|
|
|
|
const counter = await browser.elementByCss('p').text()
|
|
|
|
expect(counter).toBe('COUNT: 0')
|
|
|
|
await browser.close()
|
|
})
|
|
})
|
|
})
|
|
})
|