From 34d9d4fc33d54a35834c6c46e981812d3617d6ac Mon Sep 17 00:00:00 2001
From: Yury Semikhatsky <yurys@chromium.org>
Date: Thu, 6 Feb 2025 13:30:25 -0800
Subject: [PATCH] chore(html-report): show run duration for each retry (#34647)

---
 packages/html-reporter/src/testCaseView.css   |  5 +++
 .../html-reporter/src/testCaseView.spec.tsx   | 36 ++++++++++++++++++-
 packages/html-reporter/src/testCaseView.tsx   |  5 ++-
 3 files changed, 44 insertions(+), 2 deletions(-)

diff --git a/packages/html-reporter/src/testCaseView.css b/packages/html-reporter/src/testCaseView.css
index ff20288cbf..9ae47b179d 100644
--- a/packages/html-reporter/src/testCaseView.css
+++ b/packages/html-reporter/src/testCaseView.css
@@ -50,6 +50,11 @@
   line-height: 24px;
 }
 
+.test-case-run-duration {
+  color: var(--color-fg-subtle);
+  padding-left: 8px;
+}
+
 .test-case-path {
   flex: none;
   align-items: center;
diff --git a/packages/html-reporter/src/testCaseView.spec.tsx b/packages/html-reporter/src/testCaseView.spec.tsx
index 7cc9f8991c..8aa3fafc8f 100644
--- a/packages/html-reporter/src/testCaseView.spec.tsx
+++ b/packages/html-reporter/src/testCaseView.spec.tsx
@@ -59,7 +59,7 @@ const testCase: TestCase = {
   ],
   tags: [],
   outcome: 'expected',
-  duration: 10,
+  duration: 200,
   ok: true,
   results: [result]
 };
@@ -215,3 +215,37 @@ test('should correctly render prev and next', async ({ mount }) => {
     - text: "My test test.spec.ts:42 10ms"
   `);
 });
+
+
+const testCaseWithTwoAttempts: TestCase = {
+  ...testCase,
+  results: [
+    {
+      ...result,
+      errors: ['Error message'],
+      status: 'failed',
+      duration: 50,
+    },
+    {
+      ...result,
+      duration: 150,
+      status: 'passed',
+    },
+  ],
+};
+
+test('total duration is selected run duration', async ({ mount, page }) => {
+  const component = await mount(<TestCaseView projectNames={['chromium', 'webkit']} test={testCaseWithTwoAttempts} prev={undefined} next={undefined} run={0}></TestCaseView>);
+  await expect(component).toMatchAriaSnapshot(`
+    - text: "My test test.spec.ts:42 200ms"
+    - text: "Run 50ms Retry #1 150ms"
+  `);
+  await page.locator('.tabbed-pane-tab-label', { hasText: 'Run50ms' }).click();
+  await expect(component).toMatchAriaSnapshot(`
+    - text: "My test test.spec.ts:42 200ms"
+  `);
+  await page.locator('.tabbed-pane-tab-label', { hasText: 'Retry #1150ms' }).click();
+  await expect(component).toMatchAriaSnapshot(`
+    - text: "My test test.spec.ts:42 200ms"
+  `);
+});
diff --git a/packages/html-reporter/src/testCaseView.tsx b/packages/html-reporter/src/testCaseView.tsx
index e4ffa9c15b..ca5ff6d2e2 100644
--- a/packages/html-reporter/src/testCaseView.tsx
+++ b/packages/html-reporter/src/testCaseView.tsx
@@ -77,7 +77,10 @@ export const TestCaseView: React.FC<{
     {test && <TabbedPane tabs={
       test.results.map((result, index) => ({
         id: String(index),
-        title: <div style={{ display: 'flex', alignItems: 'center' }}>{statusIcon(result.status)} {retryLabel(index)}</div>,
+        title: <div style={{ display: 'flex', alignItems: 'center' }}>
+          {statusIcon(result.status)} {retryLabel(index)}
+          {(test.results.length > 1) && <span className='test-case-run-duration'>{msToString(result.duration)}</span>}
+        </div>,
         render: () => <TestResultView test={test!} result={result} />
       })) || []} selectedTab={String(selectedResultIndex)} setSelectedTab={id => setSelectedResultIndex(+id)} />}
   </div>;