From 161f3f144a13034704d893822b4f35afab247cdd Mon Sep 17 00:00:00 2001
From: Max Schmitt <max@schmitt.mx>
Date: Wed, 8 Feb 2023 01:07:25 +0100
Subject: [PATCH] fix(html-reporter): do not show empty project name (#20735)

---
 packages/html-reporter/src/headerView.spec.tsx | 10 ++++++++++
 packages/html-reporter/src/headerView.tsx      |  2 +-
 2 files changed, 11 insertions(+), 1 deletion(-)

diff --git a/packages/html-reporter/src/headerView.spec.tsx b/packages/html-reporter/src/headerView.spec.tsx
index d276b57dbe..32112305c5 100644
--- a/packages/html-reporter/src/headerView.spec.tsx
+++ b/packages/html-reporter/src/headerView.spec.tsx
@@ -85,6 +85,16 @@ test('should show the project names', async ({ mount }) => {
     </HeaderView>);
     await expect(component.getByText('Project: my-project')).toBeVisible();
   });
+  await test.step('with 1 project and empty projectName', async () => {
+    const component = await mount(<HeaderView
+      stats={stats}
+      filterText=''
+      setFilterText={() => {}}
+      projectNames={['']}
+    >
+    </HeaderView>);
+    await expect(component.getByText('Project:')).toBeHidden();
+  });
   await test.step('with more than 1 project', async () => {
     const component = await mount(<HeaderView
       stats={stats}
diff --git a/packages/html-reporter/src/headerView.tsx b/packages/html-reporter/src/headerView.tsx
index ef8519e66a..5ffa12ce45 100644
--- a/packages/html-reporter/src/headerView.tsx
+++ b/packages/html-reporter/src/headerView.tsx
@@ -60,7 +60,7 @@ export const HeaderView: React.FC<React.PropsWithChildren<{
     </div>
     {reportLoaderError && <div className='header-view-status-line pt-2' data-testid='loader-error' style={{ color: 'var(--color-danger-emphasis)', textAlign: 'right' }}>{reportLoaderError}</div>}
     <div className='header-view-status-line pt-2'>
-      {projectNames.length === 1 && <span data-testid="project-name" style={{ color: 'var(--color-fg-subtle)', float: 'left' }}>Project: {projectNames[0]}</span>}
+      {projectNames.length === 1 && !!projectNames[0] && <span data-testid="project-name" style={{ color: 'var(--color-fg-subtle)', float: 'left' }}>Project: {projectNames[0]}</span>}
       <span data-testid="overall-duration" style={{ color: 'var(--color-fg-subtle)', float: 'right' }}>Total time: {msToString(stats.duration)}</span>
     </div>
   </>);