Skip to content

Commit

Permalink
Fix applyFocusAndScroll with server patch (#45782)
Browse files Browse the repository at this point in the history 
fix #42492



## Bug

- [ ] Related issues linked using `fixes #number`
- [ ] Integration tests added
- [ ] Errors have a helpful link attached, see [`contributing.md`](https://github.com/vercel/next.js/blob/canary/contributing.md)

## Feature

- [ ] Implements an existing feature request or RFC. Make sure the feature request has been accepted for implementation before opening a PR.
- [ ] Related issues linked using `fixes #number`
- [ ] [e2e](https://github.com/vercel/next.js/blob/canary/contributing/core/testing.md#writing-tests-for-nextjs) tests added
- [ ] Documentation added
- [ ] Telemetry added. In case of a feature if it's used or not.
- [ ] Errors have a helpful link attached, see [`contributing.md`](https://github.com/vercel/next.js/blob/canary/contributing.md)

## Documentation / Examples

- [ ] Make sure the linting passes by running `pnpm build && pnpm lint`
- [ ] The "examples guidelines" are followed from [our contributing doc](https://github.com/vercel/next.js/blob/canary/contributing/examples/adding-examples.md)
  • Loading branch information
@timneutkens
timneutkens committed Feb 10, 2023
1 parent 98d6e47 commit e13ace5
Show file tree
Hide file tree
Showing 2 changed files with 256 additions and 16 deletions.
271 changes: 256 additions & 15 deletions packages/next/src/client/components/router-reducer/reducers/server-patch-reducer.test.tsx
View file
@@ -1,28 +1,69 @@
import React from 'react'
import { FlightData, FlightRouterState } from '../../../../server/app-render'
import type { fetchServerResponse as fetchServerResponseType } from '../fetch-server-response'
import type {
FlightData,
FlightRouterState,
} from '../../../../server/app-render'
jest.mock('../fetch-server-response', () => {
const flightData: FlightData = [
[
'children',
'linking',
'children',
'about',
[
'about',
{
children: ['', {}],
},
],
<h1>About Page!</h1>,
<>
<title>About page!</title>
</>,
],
]
return {
fetchServerResponse: (
url: URL
): ReturnType<typeof fetchServerResponseType> => {
if (url.pathname === '/linking/about') {
return Promise.resolve([flightData, undefined])
}

throw new Error('unknown url in mock')
},
}
})
import {
CacheNode,
CacheStates,
} from '../../../../shared/lib/app-router-context'
import { createInitialRouterState } from '../create-initial-router-state'
import { ServerPatchAction, ACTION_SERVER_PATCH } from '../router-reducer-types'
import {
ServerPatchAction,
ACTION_SERVER_PATCH,
NavigateAction,
ACTION_NAVIGATE,
} from '../router-reducer-types'
import { navigateReducer } from './navigate-reducer'
import { serverPatchReducer } from './server-patch-reducer'

const flightData: FlightData = [
const flightDataForPatch: FlightData = [
[
'children',
'linking',
'children',
'about',
'somewhere-else',
[
'about',
'somewhere-else',
{
children: ['', {}],
},
],
<h1>About Page!</h1>,
<h1>Somewhere Page!</h1>,
<>
<title>About page!</title>
<title>Somewhere page!</title>
</>,
],
]
Expand Down Expand Up @@ -107,7 +148,7 @@ describe('serverPatchReducer', () => {
})
const action: ServerPatchAction = {
type: ACTION_SERVER_PATCH,
flightData,
flightData: flightDataForPatch,
previousTree: [
'',
{
Expand Down Expand Up @@ -177,11 +218,11 @@ describe('serverPatchReducer', () => {
},
],
[
'about',
'somewhere-else',
{
status: CacheStates.READY,
data: null,
subTreeData: <h1>About Page!</h1>,
subTreeData: <h1>Somewhere Page!</h1>,
parallelRoutes: new Map([
[
'children',
Expand All @@ -193,7 +234,7 @@ describe('serverPatchReducer', () => {
data: null,
head: (
<>
<title>About page!</title>
<title>Somewhere page!</title>
</>
),
parallelRoutes: new Map(),
Expand Down Expand Up @@ -222,7 +263,7 @@ describe('serverPatchReducer', () => {
children: [
'linking',
{
children: ['about', { children: ['', {}] }],
children: ['somewhere-else', { children: ['', {}] }],
},
],
},
Expand Down Expand Up @@ -296,14 +337,14 @@ describe('serverPatchReducer', () => {

const action: ServerPatchAction = {
type: ACTION_SERVER_PATCH,
flightData,
flightData: flightDataForPatch,
previousTree: [
'',
{
children: [
'linking',
{
children: ['about', { children: ['', {}] }],
children: ['somewhere-else', { children: ['', {}] }],
},
],
},
Expand Down Expand Up @@ -337,6 +378,177 @@ describe('serverPatchReducer', () => {
apply: false,
},
canonicalUrl: '/linking/about',
cache: {
status: CacheStates.READY,
data: null,
subTreeData: (
<html>
<head></head>
<body>Root layout</body>
</html>
),
parallelRoutes: new Map([
[
'children',
new Map([
[
'linking',
{
status: CacheStates.READY,
parallelRoutes: new Map([
[
'children',
new Map([
[
'',
{
status: CacheStates.READY,
data: null,
subTreeData: <>Linking page</>,
parallelRoutes: new Map(),
},
],
]),
],
]),
data: null,
subTreeData: <>Linking layout level</>,
},
],
]),
],
]),
},
tree: [
'',
{
children: [
'linking',
{
children: ['about', { children: ['', {}] }],
},
],
},
undefined,
undefined,
true,
],
}

expect(newState).toMatchObject(expectedState)
})

it('should apply server patch without affecting focusAndScrollRef', async () => {
const initialTree = getInitialRouterStateTree()
const initialCanonicalUrl = '/linking'
const children = (
<html>
<head></head>
<body>Root layout</body>
</html>
)
const initialParallelRoutes: CacheNode['parallelRoutes'] = new Map([
[
'children',
new Map([
[
'linking',
{
status: CacheStates.READY,
parallelRoutes: new Map([
[
'children',
new Map([
[
'',
{
status: CacheStates.READY,
data: null,
subTreeData: <>Linking page</>,
parallelRoutes: new Map(),
},
],
]),
],
]),
data: null,
subTreeData: <>Linking layout level</>,
},
],
]),
],
])

const navigateAction: NavigateAction = {
type: ACTION_NAVIGATE,
url: new URL('/linking/about', 'https://localhost'),
isExternalUrl: false,
locationSearch: '',
navigateType: 'push',
forceOptimisticNavigation: false,
cache: {
status: CacheStates.LAZY_INITIALIZED,
data: null,
subTreeData: null,
parallelRoutes: new Map(),
},
mutable: {},
}

const state = createInitialRouterState({
initialTree,
initialCanonicalUrl,
children,
initialParallelRoutes,
isServer: false,
location: new URL(initialCanonicalUrl, 'https://localhost') as any,
})

const stateAfterNavigate = await runPromiseThrowChain(() =>
navigateReducer(state, navigateAction)
)

const action: ServerPatchAction = {
type: ACTION_SERVER_PATCH,
flightData: flightDataForPatch,
previousTree: [
'',
{
children: [
'linking',
{
children: ['about', { children: ['', {}] }],
},
],
},
undefined,
undefined,
true,
],
overrideCanonicalUrl: undefined,
cache: {
status: CacheStates.LAZY_INITIALIZED,
data: null,
subTreeData: null,
parallelRoutes: new Map(),
},
mutable: {},
}

const newState = await runPromiseThrowChain(() =>
serverPatchReducer(stateAfterNavigate, action)
)

const expectedState: ReturnType<typeof serverPatchReducer> = {
prefetchCache: new Map(),
pushRef: {
mpaNavigation: false,
pendingPush: true,
},
focusAndScrollRef: {
apply: true,
},
canonicalUrl: '/linking/about',
cache: {
status: CacheStates.READY,
data: null,
Expand Down Expand Up @@ -396,6 +608,35 @@ describe('serverPatchReducer', () => {
]),
},
],
[
'somewhere-else',
{
status: CacheStates.READY,
data: null,
subTreeData: <h1>Somewhere Page!</h1>,
parallelRoutes: new Map([
[
'children',
new Map([
[
'',
{
status: CacheStates.LAZY_INITIALIZED,
data: null,
head: (
<>
<title>Somewhere page!</title>
</>
),
parallelRoutes: new Map(),
subTreeData: null,
},
],
]),
],
]),
},
],
]),
],
]),
Expand All @@ -413,7 +654,7 @@ describe('serverPatchReducer', () => {
children: [
'linking',
{
children: ['about', { children: ['', {}] }],
children: ['somewhere-else', { children: ['', {}] }],
},
],
},
Expand Down
1 change: 0 additions & 1 deletion packages/next/src/client/components/router-reducer/reducers/server-patch-reducer.ts
View file
Expand Up @@ -85,7 +85,6 @@ export function serverPatchReducer(
mutable.previousTree = state.tree
mutable.patchedTree = newTree
mutable.cache = cache
mutable.applyFocusAndScroll = false

return handleMutable(state, mutable)
}

0 comments on commit e13ace5

Please sign in to comment.