From 3f8bd36a3a5e62c2c7c32375c279f06d91908127 Mon Sep 17 00:00:00 2001
From: Pavel Feldman <pavel.feldman@gmail.com>
Date: Wed, 6 Nov 2024 08:31:55 -0800
Subject: [PATCH] fix(html): align prev/next with the group title (#33462)

---
 packages/html-reporter/src/common.css            |  4 ++++
 packages/html-reporter/src/testCaseView.spec.tsx |  3 ++-
 packages/html-reporter/src/testCaseView.tsx      | 11 ++++++-----
 3 files changed, 12 insertions(+), 6 deletions(-)

diff --git a/packages/html-reporter/src/common.css b/packages/html-reporter/src/common.css
index 02e01a103b..12241fd861 100644
--- a/packages/html-reporter/src/common.css
+++ b/packages/html-reporter/src/common.css
@@ -46,6 +46,10 @@ svg {
   position: relative;
 }
 
+.hidden {
+  visibility: hidden;
+}
+
 .d-flex {
   display: flex !important;
 }
diff --git a/packages/html-reporter/src/testCaseView.spec.tsx b/packages/html-reporter/src/testCaseView.spec.tsx
index a8ad110887..892ad51b7f 100644
--- a/packages/html-reporter/src/testCaseView.spec.tsx
+++ b/packages/html-reporter/src/testCaseView.spec.tsx
@@ -154,7 +154,7 @@ const resultWithAttachment: TestResult = {
 const attachmentLinkRenderingTestCase: TestCase = {
   testId: 'testid',
   title: 'My test',
-  path: [],
+  path: ['group'],
   projectName: 'chromium',
   location: { file: 'test.spec.ts', line: 42, column: 0 },
   tags: [],
@@ -206,6 +206,7 @@ test('should correctly render links in attachment name', async ({ mount }) => {
 test('should correctly render prev and next', async ({ mount }) => {
   const component = await mount(<TestCaseView projectNames={['chromium', 'webkit']} test={attachmentLinkRenderingTestCase} prev={testCaseSummary} next={testCaseSummary} run={0} anchor=''></TestCaseView>);
   await expect(component).toMatchAriaSnapshot(`
+    - text: group
     - link "« previous"
     - link "next »"
     - text: "My test test.spec.ts:42 10ms"
diff --git a/packages/html-reporter/src/testCaseView.tsx b/packages/html-reporter/src/testCaseView.tsx
index cb3cc95cef..320722fa9b 100644
--- a/packages/html-reporter/src/testCaseView.tsx
+++ b/packages/html-reporter/src/testCaseView.tsx
@@ -51,12 +51,13 @@ export const TestCaseView: React.FC<{
   }, [test?.annotations]);
 
   return <div className='test-case-column vbox'>
-    <div className='hbox'>
-      {prev && <Link href={`#?testId=${prev.testId}${filterParam}`}>« previous</Link>}
+    {test && <div className='hbox'>
+      <div className='test-case-path'>{test.path.join(' › ')}</div>
       <div style={{ flex: 'auto' }}></div>
-      {next && <Link href={`#?testId=${next.testId}${filterParam}`}>next »</Link>}
-    </div>
-    {test && <div className='test-case-path'>{test.path.join(' › ')}</div>}
+      <div className={clsx(!prev && 'hidden')}><Link href={`#?testId=${prev?.testId}${filterParam}`}>« previous</Link></div>
+      <div style={{ width: 10 }}></div>
+      <div className={clsx(!next && 'hidden')}><Link href={`#?testId=${next?.testId}${filterParam}`}>next »</Link></div>
+    </div>}
     {test && <div className='test-case-title'>{test?.title}</div>}
     {test && <div className='hbox'>
       <div className='test-case-location'>