Skip to content

Commit

Permalink
fix: fixed deploy tests for failing ppr tests
Browse files Browse the repository at this point in the history
  • Loading branch information
@wyattjoh
wyattjoh committed Nov 6, 2024
1 parent f6e9bd9 commit 58f2d33
Show file tree
Hide file tree
Showing 2 changed files with 97 additions and 105 deletions.
200 changes: 96 additions & 104 deletions test/e2e/app-dir/ppr-full/ppr-full.test.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -351,143 +351,135 @@ describe('ppr-full', () => {
expect($('[data-agent]').closest('[hidden]').length).toBe(1)
})

it('should render the dynamic shell on the second visit', async () => {
const random = Math.random().toString(16).slice(2)
const pathname = `/fallback/dynamic/params/on-second-visit-${random}`

let $ = await next.render$(pathname)
expect($('[data-slug]').closest('[hidden]').length).toBe(1)
expect($('[data-agent]').closest('[hidden]').length).toBe(1)
if (!isNextDeploy) {
it('should render the route shell on the second visit', async () => {
const random = Math.random().toString(16).slice(2)
const pathname = `/fallback/dynamic/params/on-second-visit-${random}`

await retry(async () => {
$ = await next.render$(pathname)
expect($('[data-slug]').closest('[hidden]').length).toBe(0)
let $ = await next.render$(pathname)
expect($('[data-slug]').closest('[hidden]').length).toBe(1)
expect($('[data-agent]').closest('[hidden]').length).toBe(1)

await retry(async () => {
$ = await next.render$(pathname)
expect($('[data-slug]').closest('[hidden]').length).toBe(0)
expect($('[data-agent]').closest('[hidden]').length).toBe(1)
})
})
})

it('should render the dynamic shell as static if the page is static', async () => {
const random = Math.random().toString(16).slice(2)
const pathname = `/fallback/params/on-second-visit-${random}`
it('should render the dynamic shell as static if the page is static', async () => {
const random = Math.random().toString(16).slice(2)
const pathname = `/fallback/params/on-second-visit-${random}`

// Expect that the slug had to be resumed.
let $ = await next.render$(pathname)
expect($('[data-slug]').closest('[hidden]').length).toBe(1)
// Expect that the slug had to be resumed.
let $ = await next.render$(pathname)
expect($('[data-slug]').closest('[hidden]').length).toBe(1)

// The slug didn't have to be resumed, and it should all be static.
await retry(async () => {
$ = await next.render$(pathname)
expect($('[data-slug]').closest('[hidden]').length).toBe(0)
// The slug didn't have to be resumed, and it should all be static.
await retry(async () => {
$ = await next.render$(pathname)
expect($('[data-slug]').closest('[hidden]').length).toBe(1)

const {
timings: { streamFirstChunk, start, streamEnd },
chunks,
} = await measurePPRTimings(async () => {
const res = await next.fetch(pathname)
expect(res.status).toBe(200)
if (isNextDeploy) {
expect(res.headers.get('x-vercel-cache')).toBe('HIT')
} else {
const {
timings: { streamFirstChunk, start, streamEnd },
chunks,
} = await measurePPRTimings(async () => {
const res = await next.fetch(pathname)
expect(res.status).toBe(200)
expect(res.headers.get('x-nextjs-cache')).toBe('HIT')
}

return res.body
}, 1000)
return res.body
}, 1000)

expect(chunks.dynamic).toBe('')
expect(streamFirstChunk - start).toBeLessThan(500)
expect(streamEnd - start).toBeLessThan(500)
expect(chunks.dynamic).toBe('')
expect(streamFirstChunk - start).toBeLessThan(500)
expect(streamEnd - start).toBeLessThan(500)
})
})
})

it('will only revalidate the page', async () => {
const random = Math.random().toString(16).slice(2)
const pathname = `/fallback/dynamic/params/revalidate-${random}`
it('will only revalidate the page', async () => {
const random = Math.random().toString(16).slice(2)
const pathname = `/fallback/dynamic/params/revalidate-${random}`

let $ = await next.render$(pathname)
const fallbackID = $('[data-layout]').data('layout') as string
let $ = await next.render$(pathname)
const fallbackID = $('[data-layout]').data('layout') as string

let dynamicID: string
await retry(async () => {
$ = await next.render$(pathname)
dynamicID = $('[data-layout]').data('layout') as string
let dynamicID: string
await retry(async () => {
$ = await next.render$(pathname)
dynamicID = $('[data-layout]').data('layout') as string

// These should be different,
expect(dynamicID).not.toBe(fallbackID)
})
// These should be different,
expect(dynamicID).not.toBe(fallbackID)
})

// Now let's revalidate the page.
await next.fetch(
`/api/revalidate?pathname=${encodeURIComponent(pathname)}`
)
// Now let's revalidate the page.
await next.fetch(
`/api/revalidate?pathname=${encodeURIComponent(pathname)}`
)

// We expect to get the fallback shell again.
if (!isNextDeploy) {
// We expect to get the fallback shell again.
$ = await next.render$(pathname)
expect($('[data-layout]').data('layout')).toBe(fallbackID)
}

// Let's wait for the page to be revalidated.
await retry(async () => {
$ = await next.render$(pathname)
const newDynamicID = $('[data-layout]').data('layout') as string
expect(newDynamicID).not.toBe(dynamicID)
// Let's wait for the page to be revalidated.
await retry(async () => {
$ = await next.render$(pathname)
const newDynamicID = $('[data-layout]').data('layout') as string
expect(newDynamicID).not.toBe(dynamicID)
})
})
})

it('will revalidate the page and fallback shell', async () => {
const random = Math.random().toString(16).slice(2)
const pathname = `/fallback/dynamic/params/revalidate-${random}`
it('will revalidate the page and fallback shell', async () => {
const random = Math.random().toString(16).slice(2)
const pathname = `/fallback/dynamic/params/revalidate-${random}`

let $ = await next.render$(pathname)
const fallbackID = $('[data-layout]').data('layout') as string
let $ = await next.render$(pathname)
const fallbackID = $('[data-layout]').data('layout') as string

let dynamicID: string
await retry(async () => {
$ = await next.render$(pathname)
dynamicID = $('[data-layout]').data('layout') as string
let dynamicID: string
await retry(async () => {
$ = await next.render$(pathname)
dynamicID = $('[data-layout]').data('layout') as string

// These should be different,
expect(dynamicID).not.toBe(fallbackID)
})
// These should be different,
expect(dynamicID).not.toBe(fallbackID)
})

// Now let's revalidate the page.
await next.fetch(
`/api/revalidate?pathname=${encodeURIComponent(pathname)}`
)
// Now let's revalidate the page.
await next.fetch(
`/api/revalidate?pathname=${encodeURIComponent(pathname)}`
)

// We expect to get the fallback shell.
$ = await next.render$(pathname)
// We expect to get the fallback shell.
$ = await next.render$(pathname)

// When deployed to Vercel, it will serve a stale version of the dynamic shell
// Whereas with `next start` it will serve the fallback shell
if (isNextDeploy) {
expect($('[data-layout]').data('layout')).toBe(dynamicID)
} else {
// When deployed to Vercel, it will serve a stale version of the dynamic shell
// Whereas with `next start` it will serve the fallback shell
expect($('[data-layout]').data('layout')).toBe(fallbackID)
}

// Let's wait for the page to be revalidated.
let revalidatedDynamicID: string
await retry(async () => {
$ = await next.render$(pathname)
revalidatedDynamicID = $('[data-layout]').data('layout') as string
expect(revalidatedDynamicID).not.toBe(dynamicID)
expect(revalidatedDynamicID).not.toBe(fallbackID)
// Let's wait for the page to be revalidated.
let revalidatedDynamicID: string
await retry(async () => {
$ = await next.render$(pathname)
revalidatedDynamicID = $('[data-layout]').data('layout') as string
expect(revalidatedDynamicID).not.toBe(dynamicID)
expect(revalidatedDynamicID).not.toBe(fallbackID)
})
})
})

/**
* This test is really here to just to force the the suite to have the expected route
* as part of the build. If this failed we'd get a build error and all the tests would fail
*/
it('will allow dynamic fallback shells even when static is enforced', async () => {
const random = Math.random().toString(16).slice(2)
const pathname = `/fallback/dynamic/params/revalidate-${random}`
/**
* This test is really here to just to force the the suite to have the expected route
* as part of the build. If this failed we'd get a build error and all the tests would fail
*/
it('will allow dynamic fallback shells even when static is enforced', async () => {
const random = Math.random().toString(16).slice(2)
const pathname = `/fallback/dynamic/params/revalidate-${random}`

let $ = await next.render$(pathname)
expect($('[data-slug]').text()).toBe(`revalidate-${random}`)
})
let $ = await next.render$(pathname)
expect($('[data-slug]').text()).toBe(`revalidate-${random}`)
})
}
})

it('should allow client layouts without postponing fallback if params are not accessed', async () => {
Expand Down
2 changes: 1 addition & 1 deletion test/lib/next-modes/next-deploy.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -150,7 +150,7 @@ export class NextDeployInstance extends NextInstance {
// Use the vercel inspect command to get the CLI output from the build.
const buildLogs = await execa(
'vercel',
['inspect', '--logs', this._url, ...vercelFlags],
['logs', this._url, ...vercelFlags],
{
env: vercelEnv,
reject: false,
Expand Down

0 comments on commit 58f2d33

Please sign in to comment.