From 5fa7d19f1c0becf203c4f3a80cc0c801fef8ba36 Mon Sep 17 00:00:00 2001
From: Pavel Feldman <pavel.feldman@gmail.com>
Date: Thu, 6 Jan 2022 09:29:55 -0800
Subject: [PATCH] feat(html): render inline attachments as monospace (#11214)

---
 packages/html-reporter/src/links.css        | 3 ++-
 packages/html-reporter/src/links.tsx        | 2 +-
 tests/playwright-test/reporter-html.spec.ts | 8 ++++----
 3 files changed, 7 insertions(+), 6 deletions(-)

diff --git a/packages/html-reporter/src/links.css b/packages/html-reporter/src/links.css
index a7ee4a8f7b..73ae3e64d4 100644
--- a/packages/html-reporter/src/links.css
+++ b/packages/html-reporter/src/links.css
@@ -95,10 +95,11 @@
   }
 }
 
-.attachment-link {
+.attachment-body {
   white-space: pre-wrap;
   background-color: var(--color-canvas-subtle);
   margin-left: 24px;
   line-height: normal;
   padding: 8px;
+  font-family: monospace;
 }
diff --git a/packages/html-reporter/src/links.tsx b/packages/html-reporter/src/links.tsx
index 7e2c220589..f94e4f7e6a 100644
--- a/packages/html-reporter/src/links.tsx
+++ b/packages/html-reporter/src/links.tsx
@@ -74,7 +74,7 @@ export const AttachmentLink: React.FunctionComponent<{
     {attachment.path && <a href={href || attachment.path} target='_blank'>{attachment.name}</a>}
     {attachment.body && <span>{attachment.name}</span>}
   </span>} loadChildren={attachment.body ? () => {
-    return [<div className='attachment-link'>{attachment.body}</div>];
+    return [<div className='attachment-body'>{attachment.body}</div>];
   } : undefined} depth={0}></TreeItem>;
 };
 
diff --git a/tests/playwright-test/reporter-html.spec.ts b/tests/playwright-test/reporter-html.spec.ts
index 31cb900292..a6a36c014b 100644
--- a/tests/playwright-test/reporter-html.spec.ts
+++ b/tests/playwright-test/reporter-html.spec.ts
@@ -88,7 +88,7 @@ test('should not throw when attachment is missing', async ({ runInlineTest, page
   await page.click('text=passes');
   await page.locator('text=Missing attachment "screenshot"').click();
   const screenshotFile = testInfo.outputPath('test-results' , 'a-passes', 'screenshot.png');
-  await expect(page.locator('.attachment-link')).toHaveText(`Attachment file ${screenshotFile} is missing`);
+  await expect(page.locator('.attachment-body')).toHaveText(`Attachment file ${screenshotFile} is missing`);
 });
 
 test('should include image diff', async ({ runInlineTest, page, showReport }) => {
@@ -203,9 +203,9 @@ test('should include stdio', async ({ runInlineTest, page, showReport }) => {
   await showReport();
   await page.click('text=fails');
   await page.locator('text=stdout').click();
-  await expect(page.locator('.attachment-link')).toHaveText('First line\nSecond line');
+  await expect(page.locator('.attachment-body')).toHaveText('First line\nSecond line');
   await page.locator('text=stderr').click();
-  await expect(page.locator('.attachment-link').nth(1)).toHaveText('Third line');
+  await expect(page.locator('.attachment-body').nth(1)).toHaveText('Third line');
 });
 
 test('should highlight error', async ({ runInlineTest, page, showReport }) => {
@@ -402,7 +402,7 @@ test('should render text attachments as text', async ({ runInlineTest, page, sho
   await page.click('text=example.txt');
   await page.click('text=example.json');
   await page.click('text=example-utf16.txt');
-  await expect(page.locator('.attachment-link')).toHaveText(['foo', '{"foo":1}', 'utf16 encoded']);
+  await expect(page.locator('.attachment-body')).toHaveText(['foo', '{"foo":1}', 'utf16 encoded']);
 });
 
 test('should strikethough textual diff', async ({ runInlineTest, showReport, page }) => {