From dc064d414f98501aab5f087c0a86789073183ee1 Mon Sep 17 00:00:00 2001
From: Simon Knott <info@simonknott.de>
Date: Tue, 19 Nov 2024 14:02:14 +0100
Subject: [PATCH] refactor: separate anchor from autochip

---
 packages/html-reporter/src/chip.tsx           | 27 +++++++++----------
 packages/html-reporter/src/links.tsx          |  5 +++-
 packages/html-reporter/src/testResultView.tsx | 18 +++++++------
 3 files changed, 27 insertions(+), 23 deletions(-)

diff --git a/packages/html-reporter/src/chip.tsx b/packages/html-reporter/src/chip.tsx
index 5a27faadc1..f94dcbc6d6 100644
--- a/packages/html-reporter/src/chip.tsx
+++ b/packages/html-reporter/src/chip.tsx
@@ -20,7 +20,7 @@ import './colors.css';
 import './common.css';
 import * as icons from './icons';
 import { clsx } from '@web/uiUtils';
-import { Anchor } from './links';
+import { useAnchor } from './links';
 
 export const Chip: React.FC<{
   header: JSX.Element | string,
@@ -53,19 +53,18 @@ export const AutoChip: React.FC<{
   noInsets?: boolean,
   children?: any,
   dataTestId?: string,
-  anchorId?: string,
-}> = ({ header, initialExpanded, noInsets, children, dataTestId, anchorId }) => {
+  revealOnAnchorId?: string,
+}> = ({ header, initialExpanded, noInsets, children, dataTestId, revealOnAnchorId }) => {
   const [expanded, setExpanded] = React.useState(initialExpanded ?? true);
   const onReveal = React.useCallback(() => setExpanded(true), []);
-  return <Anchor id={anchorId} onReveal={onReveal}>
-    <Chip
-      header={header}
-      expanded={expanded}
-      setExpanded={setExpanded}
-      noInsets={noInsets}
-      dataTestId={dataTestId}
-    >
-      {children}
-    </Chip>
-  </Anchor>;
+  useAnchor(revealOnAnchorId, onReveal);
+  return <Chip
+    header={header}
+    expanded={expanded}
+    setExpanded={setExpanded}
+    noInsets={noInsets}
+    dataTestId={dataTestId}
+  >
+    {children}
+  </Chip>;
 };
diff --git a/packages/html-reporter/src/links.tsx b/packages/html-reporter/src/links.tsx
index f2d92c232e..f4a5a48bc5 100644
--- a/packages/html-reporter/src/links.tsx
+++ b/packages/html-reporter/src/links.tsx
@@ -116,8 +116,11 @@ const kMissingContentType = 'x-playwright/missing';
 
 type AnchorID = string | ((id: string | null) => boolean) | undefined;
 
-function useAnchor(id: AnchorID, onReveal: () => void) {
+export function useAnchor(id: AnchorID, onReveal: () => void) {
   React.useEffect(() => {
+    if (typeof id === 'undefined')
+      return;
+
     const listener = () => {
       const params = new URLSearchParams(window.location.hash.slice(1));
       const anchor = params.get('anchor');
diff --git a/packages/html-reporter/src/testResultView.tsx b/packages/html-reporter/src/testResultView.tsx
index 289ef2560d..9170f2023d 100644
--- a/packages/html-reporter/src/testResultView.tsx
+++ b/packages/html-reporter/src/testResultView.tsx
@@ -20,7 +20,7 @@ import { TreeItem } from './treeItem';
 import { msToString } from './utils';
 import { AutoChip } from './chip';
 import { traceImage } from './images';
-import { AttachmentLink, generateTraceUrl } from './links';
+import { Anchor, AttachmentLink, generateTraceUrl } from './links';
 import { statusIcon } from './statusIcon';
 import type { ImageDiff } from '@web/shared/imageDiffView';
 import { ImageDiffView } from '@web/shared/imageDiffView';
@@ -91,9 +91,11 @@ export const TestResultView: React.FC<{
     </AutoChip>}
 
     {diffs.map((diff, index) =>
-      <AutoChip key={`diff-${index}`} dataTestId='test-results-image-diff' header={`Image mismatch: ${diff.name}`} anchorId={`diff-${index}`}>
-        <ImageDiffView diff={diff}/>
-      </AutoChip>
+      <Anchor key={`diff-${index}`} id={`diff-${index}`}>
+        <AutoChip dataTestId='test-results-image-diff' header={`Image mismatch: ${diff.name}`} revealOnAnchorId={`diff-${index}`}>
+          <ImageDiffView diff={diff}/>
+        </AutoChip>
+      </Anchor>
     )}
 
     {!!screenshots.length && <AutoChip header='Screenshots'>
@@ -107,23 +109,23 @@ export const TestResultView: React.FC<{
       })}
     </AutoChip>}
 
-    {!!traces.length && <AutoChip header='Traces' anchorId='traces'>
+    {!!traces.length && <Anchor id='traces'><AutoChip header='Traces' revealOnAnchorId='traces'>
       {<div>
         <a href={generateTraceUrl(traces)}>
           <img className='screenshot' src={traceImage} style={{ width: 192, height: 117, marginLeft: 20 }} />
         </a>
         {traces.map((a, i) => <AttachmentLink key={`trace-${i}`} attachment={a} linkName={traces.length === 1 ? 'trace' : `trace-${i + 1}`}></AttachmentLink>)}
       </div>}
-    </AutoChip>}
+    </AutoChip></Anchor>}
 
-    {!!videos.length && <AutoChip header='Videos' anchorId='videos'>
+    {!!videos.length && <Anchor id='videos'><AutoChip header='Videos' revealOnAnchorId='videos'>
       {videos.map((a, i) => <div key={`video-${i}`}>
         <video controls>
           <source src={a.path} type={a.contentType}/>
         </video>
         <AttachmentLink attachment={a}></AttachmentLink>
       </div>)}
-    </AutoChip>}
+    </AutoChip></Anchor>}
 
     {!!(otherAttachments.size + htmls.length) && <AutoChip header='Attachments'>
       {[...htmls].map((a, i) => (