chore: use detail/summary for html reporter attachments

Author: mxschmitt

packages/html-reporter/src/links.tsx

@@ -17,7 +17,6 @@
 import type { TestAttachment, TestCase, TestCaseSummary, TestResult, TestResultSummary } from './types';
 import * as React from 'react';
 import * as icons from './icons';
-import { TreeItem } from './treeItem';
 import { CopyToClipboard } from './copyToClipboard';
 import './links.css';
 import { linkifyText } from '@web/renderUtils';
@@ -78,30 +77,61 @@ export const AttachmentLink: React.FunctionComponent<{
   openInNewTab?: boolean,
 }> = ({ attachment, result, href, linkName, openInNewTab }) => {
   const [flash, triggerFlash] = useFlash();
+  const [expanded, setExpanded] = React.useState(false);
   useAnchor('attachment-' + result.attachments.indexOf(attachment), triggerFlash);
-  return <TreeItem title={<span>
-    {attachment.contentType === kMissingContentType ? icons.warning() : icons.attachment()}
-    {attachment.path && (
-      openInNewTab
-        ? <a href={href || attachment.path} target='_blank' rel='noreferrer'>{linkName || attachment.name}</a>
-        : <a href={href || attachment.path} download={downloadFileNameForAttachment(attachment)}>{linkName || attachment.name}</a>
-    )}
-    {!attachment.path && (
-      openInNewTab
-        ? (
-          <a
-            href={URL.createObjectURL(new Blob([attachment.body!], { type: attachment.contentType }))}
-            target='_blank' rel='noreferrer'
-            onClick={e => e.stopPropagation() /* dont expand the tree item */}
-          >
-            {attachment.name}
-          </a>
-        )
-        : <span>{linkifyText(attachment.name)}</span>
-    )}
-  </span>} loadChildren={attachment.body ? () => {
-    return [<div key={1} className='attachment-body'><CopyToClipboard value={attachment.body!}/>{linkifyText(attachment.body!)}</div>];
-  } : undefined} depth={0} style={{ lineHeight: '32px' }} flash={flash}></TreeItem>;
+
+  const summaryContent = (
+    <span>
+      {attachment.contentType === kMissingContentType ? icons.warning() : icons.attachment()}
+      {attachment.path && (
+        openInNewTab
+          ? <a href={href || attachment.path} target='_blank' rel='noreferrer'>{linkName || attachment.name}</a>
+          : <a href={href || attachment.path} download={downloadFileNameForAttachment(attachment)}>{linkName || attachment.name}</a>
+      )}
+      {!attachment.path && (
+        openInNewTab
+          ? (
+            <a
+              href={URL.createObjectURL(new Blob([attachment.body!], { type: attachment.contentType }))}
+              target='_blank' rel='noreferrer'
+              onClick={e => e.stopPropagation() /* dont expand the details */}
+            >
+              {attachment.name}
+            </a>
+          )
+          : <span>{linkifyText(attachment.name)}</span>
+      )}
+    </span>
+  );
+
+  if (!attachment.body) {
+    return (
+      <div
+        style={{ lineHeight: '32px', whiteSpace: 'nowrap', paddingLeft: 4 }}
+        className={clsx(flash && 'flash')}
+      >
+        <span style={{ visibility: 'hidden' }}>{icons.rightArrow()}</span>
+        {summaryContent}
+      </div>
+    );
+  }
+
+  return (
+    <details
+      style={{ lineHeight: '32px' }}
+      className={clsx(flash && 'flash')}
+      onToggle={e => setExpanded(e.currentTarget.open)}
+    >
+      <summary style={{ cursor: 'pointer', listStyle: 'none', whiteSpace: 'nowrap', paddingLeft: 4 }}>
+        {expanded ? icons.downArrow() : icons.rightArrow()}
+        {summaryContent}
+      </summary>
+      <div className='attachment-body'>
+        <CopyToClipboard value={attachment.body!}/>
+        {linkifyText(attachment.body!)}
+      </div>
+    </details>
+  );
 };
 
 export const TraceLink: React.FC<{ test: TestCaseSummary, trailingSeparator?: boolean, dim?: boolean }> = ({ test, trailingSeparator, dim }) => {

tests/playwright-test/reporter-html.spec.ts

@@ -513,9 +513,9 @@ for (const useIntermediateMergeReport of [true, false] as const) {
 
       await showReport();
       await page.getByRole('link', { name: 'fails' }).click();
-      await page.locator('text=stdout').click();
-      await expect(page.locator('.attachment-body')).toHaveText('First line\nSecond line');
-      await page.locator('text=stderr').click();
+      await page.getByText('stdout').click();
+      await expect(page.locator('.attachment-body').nth(0)).toHaveText('First line\nSecond line');
+      await page.getByText('stderr').click();
       await expect(page.locator('.attachment-body').nth(1)).toHaveText('Third line');
     });
 
@@ -2960,7 +2960,7 @@ for (const useIntermediateMergeReport of [true, false] as const) {
 
       await showReport();
       await page.getByText('my test').click();
-      await expect(page.locator('.tree-item', { hasText: 'stdout' })).toHaveCount(1);
+      await expect(page.getByTestId('attachments').getByText('stdout')).toHaveCount(1);
     });
 
     test('should include diff in AI prompt', async ({ runInlineTest, writeFiles, showReport, page }) => {