From 0037acffc6b38d3d8d42f4c44705ced2ae1f7843 Mon Sep 17 00:00:00 2001
From: Yury Semikhatsky <yurys@chromium.org>
Date: Wed, 16 Feb 2022 09:56:13 -0800
Subject: [PATCH] cherry-pick(1.19): open all test traces in one viewer
 (#12142) (#12163)

---
 packages/html-reporter/src/links.tsx          |  5 +--
 packages/html-reporter/src/testResultView.tsx |  8 ++---
 tests/playwright-test/reporter-html.spec.ts   | 34 +++++++++++++++++++
 3 files changed, 41 insertions(+), 6 deletions(-)

diff --git a/packages/html-reporter/src/links.tsx b/packages/html-reporter/src/links.tsx
index 424f780f5dae0..dbcd125974c1e 100644
--- a/packages/html-reporter/src/links.tsx
+++ b/packages/html-reporter/src/links.tsx
@@ -68,10 +68,11 @@ export const ProjectLink: React.FunctionComponent<{
 export const AttachmentLink: React.FunctionComponent<{
   attachment: TestAttachment,
   href?: string,
-}> = ({ attachment, href }) => {
+  linkName?: string,
+}> = ({ attachment, href, linkName }) => {
   return <TreeItem title={<span>
     {attachment.contentType === kMissingContentType ? icons.warning() : icons.attachment()}
-    {attachment.path && <a href={href || attachment.path} target='_blank'>{attachment.name}</a>}
+    {attachment.path && <a href={href || attachment.path} target='_blank'>{linkName || attachment.name}</a>}
     {attachment.body && <span>{attachment.name}</span>}
   </span>} loadChildren={attachment.body ? () => {
     return [<div className='attachment-body'>{attachment.body}</div>];
diff --git a/packages/html-reporter/src/testResultView.tsx b/packages/html-reporter/src/testResultView.tsx
index 764cb25a1429e..c4622e7405557 100644
--- a/packages/html-reporter/src/testResultView.tsx
+++ b/packages/html-reporter/src/testResultView.tsx
@@ -75,12 +75,12 @@ export const TestResultView: React.FC<{
     </AutoChip>}
 
     {!!traces.length && <AutoChip header='Traces'>
-      {traces.map((a, i) => <div key={`trace-${i}`}>
-        <a href={`trace/index.html?trace=${new URL(a.path!, window.location.href)}`}>
+      {<div>
+        <a href={`trace/index.html?${traces.map((a, i) => `trace=${new URL(a.path!, window.location.href)}`).join('&')}`}>
           <img src={traceImage} style={{ width: 192, height: 117, marginLeft: 20 }} />
         </a>
-        <AttachmentLink attachment={a}></AttachmentLink>
-      </div>)}
+        {traces.map((a, i) => <AttachmentLink key={`trace-${i}`} attachment={a} linkName={traces.length === 1 ? 'trace' : `trace-${i + 1}`}></AttachmentLink>)}
+      </div>}
     </AutoChip>}
 
     {!!videos.length && <AutoChip header='Videos'>
diff --git a/tests/playwright-test/reporter-html.spec.ts b/tests/playwright-test/reporter-html.spec.ts
index 64ac0dbffeefa..f93c51044c218 100644
--- a/tests/playwright-test/reporter-html.spec.ts
+++ b/tests/playwright-test/reporter-html.spec.ts
@@ -279,6 +279,40 @@ test('should show trace title', async ({ runInlineTest, page, showReport }) => {
   await expect(page.locator('.workbench .title')).toHaveText('a.test.js:6 › passes');
 });
 
+test('should show multi trace source', async ({ runInlineTest, page, server, showReport }) => {
+  const result = await runInlineTest({
+    'playwright.config.js': `
+      module.exports = { use: { trace: 'on' } };
+    `,
+    'a.test.js': `
+      const { test } = pwt;
+      test('passes', async ({ playwright, page }) => {
+        await page.evaluate('2 + 2');
+        const request = await playwright.request.newContext();
+        await request.get('${server.EMPTY_PAGE}');
+        await request.dispose();
+      });
+    `,
+  }, { reporter: 'dot,html' });
+  expect(result.exitCode).toBe(0);
+  expect(result.passed).toBe(1);
+
+  await showReport();
+  await page.click('text=passes');
+  // Expect one image-link to trace viewer and 2 separate download links
+  await expect(page.locator('img')).toHaveCount(1);
+  await expect(page.locator('a', { hasText: 'trace' })).toHaveText(['trace-1', 'trace-2']);
+
+  await page.click('img');
+  await page.click('.action-title >> text=page.evaluate');
+  await page.click('text=Source');
+  await expect(page.locator('.source-line-running')).toContainText('page.evaluate');
+
+  await page.click('.action-title >> text=apiRequestContext.get');
+  await page.click('text=Source');
+  await expect(page.locator('.source-line-running')).toContainText('request.get');
+});
+
 test('should show timed out steps', async ({ runInlineTest, page, showReport }) => {
   const result = await runInlineTest({
     'playwright.config.js': `