Skip to content

Commit

Permalink
fix dev overlay pseudo html collapsing
Browse files Browse the repository at this point in the history
  • Loading branch information
@huozhi
huozhi committed Mar 1, 2024
1 parent d12693e commit ec718e7
Show file tree
Hide file tree
Showing 5 changed files with 157 additions and 15 deletions.
4 changes: 2 additions & 2 deletions ...ponents/react-dev-overlay/internal/container/RuntimeError/component-stack-pseudo-html.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -86,7 +86,7 @@ export function PseudoHtmlDiff({
if ((isHtmlTagsWarning && isRelatedTag) || isLastFewFrames) {
const codeLine = (
<span>
<span>{spaces}</span>
{spaces}
<span
{...(isHighlightedTag
? {
Expand All @@ -112,7 +112,7 @@ export function PseudoHtmlDiff({
)
nestedHtmlStack.push(wrappedCodeLine)
} else {
if ((isHtmlTagsWarning && !isHtmlCollapsed) || isLastFewFrames) {
if (!isHtmlCollapsed || isLastFewFrames) {
nestedHtmlStack.push(
<span key={nestedHtmlStack.length}>
{spaces}
Expand Down
44 changes: 35 additions & 9 deletions test/development/acceptance-app/component-stack.test.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,16 +31,42 @@ describe('Component Stack in error overlay', () => {
"client""
`)

await session.toggleComponentStack()
await session.toggleCollapseComponentStack()
expect(await session.getRedboxComponentStack()).toMatchInlineSnapshot(`
"<InnerLayoutRouter>
<Mismatch>
<main>
<Component>
<div>
<p>
"server"
"client""
"<Root>
<ServerRoot>
<AppRouter>
<ErrorBoundary>
<ErrorBoundaryHandler>
<Router>
<HotReload>
<ReactDevOverlay>
<DevRootNotFoundBoundary>
<NotFoundBoundary>
<NotFoundErrorBoundary>
<RedirectBoundary>
<RedirectErrorBoundary>
<RootLayout>
<html>
<body>
<OuterLayoutRouter>
<RenderFromTemplateContext>
<ScrollAndFocusHandler>
<InnerScrollAndFocusHandler>
<ErrorBoundary>
<LoadingBoundary>
<NotFoundBoundary>
<NotFoundErrorBoundary>
<RedirectBoundary>
<RedirectErrorBoundary>
<InnerLayoutRouter>
<Mismatch>
<main>
<Component>
<div>
<p>
"server"
"client""
`)
} else {
expect(await session.getRedboxComponentStack()).toMatchInlineSnapshot(`
Expand Down
116 changes: 116 additions & 0 deletions test/development/acceptance-app/hydration-error.test.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -447,4 +447,120 @@ describe('Error overlay for hydration errors', () => {

await cleanup()
})

it('should collapse and uncollapse properly when there are many frames', async () => {
const { cleanup, session } = await sandbox(
next,
new Map([
[
'app/page.js',
outdent`
'use client'
const isServer = typeof window === 'undefined'
function Mismatch() {
return (
<p>
<span>
hello {isServer ? 'server' : 'client'}
</span>
</p>
)
}
export default function Page() {
return (
<div>
<div>
<div>
<div>
<Mismatch />
</div>
</div>
</div>
</div>
)
}
`,
],
])
)

await session.waitForAndOpenRuntimeError()
expect(await session.hasRedbox()).toBe(true)

const pseudoHtml = await session.getRedboxComponentStack()
expect(pseudoHtml).toMatchInlineSnapshot(`
"...
<div>
<div>
<div>
<Mismatch>
<p>
"server"
"client""
`)

await session.toggleCollapseComponentStack()

const fullPseudoHtml = await session.getRedboxComponentStack()
if (isTurbopack) {
expect(fullPseudoHtml).toMatchInlineSnapshot(`
"<Root>
<ServerRoot>
<AppRouter>
<ErrorBoundary>
<ErrorBoundaryHandler>
<Router>
<HotReload>
<ReactDevOverlay>
<DevRootNotFoundBoundary>
<NotFoundBoundary>
<NotFoundErrorBoundary>
<RedirectBoundary>
<RedirectErrorBoundary>
<RootLayout>
<html>
<body>
<OuterLayoutRouter>
<RenderFromTemplateContext>
<ScrollAndFocusHandler>
<InnerScrollAndFocusHandler>
<ErrorBoundary>
<LoadingBoundary>
<NotFoundBoundary>
<NotFoundErrorBoundary>
<RedirectBoundary>
<RedirectErrorBoundary>
<InnerLayoutRouter>
<Page>
<div>
<div>
<div>
<div>
<Mismatch>
<p>
<span>
"server"
"client""
`)
} else {
expect(fullPseudoHtml).toMatchInlineSnapshot(`
"<Page>
<div>
<div>
<div>
<div>
<Mismatch>
<p>
<span>
"server"
"client""
`)
}

await cleanup()
})
})
6 changes: 3 additions & 3 deletions test/lib/development-sandbox.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ import {
waitFor,
waitForAndOpenRuntimeError,
getRedboxDescriptionWarning,
toggleComponentStack,
toggleCollapseComponentStack,
} from './next-test-utils'
import webdriver from './next-webdriver'
import { NextInstance } from './next-modes/base'
Expand Down Expand Up @@ -139,8 +139,8 @@ export async function sandbox(
async getRedboxComponentStack() {
return getRedboxComponentStack(browser)
},
async toggleComponentStack() {
return toggleComponentStack(browser)
async toggleCollapseComponentStack() {
return toggleCollapseComponentStack(browser)
},
async getVersionCheckerText() {
return getVersionCheckerText(browser)
Expand Down
2 changes: 1 addition & 1 deletion test/lib/next-test-utils.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1068,7 +1068,7 @@ export async function getRedboxComponentStack(
return componentStackFrameTexts.join('\n').trim()
}

export async function toggleComponentStack(
export async function toggleCollapseComponentStack(
browser: BrowserInterface
): Promise<void> {
await browser
Expand Down

0 comments on commit ec718e7

Please sign in to comment.