From 1e55a084bc0ce65dbd8026ff3e265fdd9dfc60e1 Mon Sep 17 00:00:00 2001
From: Vitaliy Potapov <noginsk@rambler.ru>
Date: Wed, 3 Jul 2024 03:46:24 +0400
Subject: [PATCH] feat(html-reporter): hide annotations started with "_"
 (#31489)

Fixes: https://github.com/microsoft/playwright/issues/30179
---
 docs/src/test-annotations-js.md                  | 2 +-
 packages/html-reporter/src/testCaseView.spec.tsx | 2 ++
 packages/html-reporter/src/testCaseView.tsx      | 8 ++++++--
 3 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/docs/src/test-annotations-js.md b/docs/src/test-annotations-js.md
index 68bdd79848..5fc2f78955 100644
--- a/docs/src/test-annotations-js.md
+++ b/docs/src/test-annotations-js.md
@@ -159,7 +159,7 @@ You can also filter tests in the configuration file via [`property: TestConfig.g
 
 ## Annotate tests
 
-If you would like to annotate your tests with something more substantial than a tag, you can do that when declaring a test. Annotations have a `type` and a `description` for more context, and will be visible in the test report.
+If you would like to annotate your tests with something more substantial than a tag, you can do that when declaring a test. Annotations have a `type` and a `description` for more context and available in reporter API. Playwright's built-in HTML reporter shows all annotations, except those where `type` starts with `_` symbol.
 
 For example, to annotate a test with an issue url:
 
diff --git a/packages/html-reporter/src/testCaseView.spec.tsx b/packages/html-reporter/src/testCaseView.spec.tsx
index c306843107..3bde6e8a83 100644
--- a/packages/html-reporter/src/testCaseView.spec.tsx
+++ b/packages/html-reporter/src/testCaseView.spec.tsx
@@ -54,6 +54,7 @@ const testCase: TestCase = {
   annotations: [
     { type: 'annotation', description: 'Annotation text' },
     { type: 'annotation', description: 'Another annotation text' },
+    { type: '_annotation', description: 'Hidden annotation' },
   ],
   tags: [],
   outcome: 'expected',
@@ -65,6 +66,7 @@ const testCase: TestCase = {
 test('should render test case', async ({ mount }) => {
   const component = await mount(<TestCaseView projectNames={['chromium', 'webkit']} test={testCase} run={0} anchor=''></TestCaseView>);
   await expect(component.getByText('Annotation text', { exact: false }).first()).toBeVisible();
+  await expect(component.getByText('Hidden annotation')).toBeHidden();
   await component.getByText('Annotations').click();
   await expect(component.getByText('Annotation text')).not.toBeVisible();
   await expect(component.getByText('Outer step')).toBeVisible();
diff --git a/packages/html-reporter/src/testCaseView.tsx b/packages/html-reporter/src/testCaseView.tsx
index 66555598f2..507ddf4ffb 100644
--- a/packages/html-reporter/src/testCaseView.tsx
+++ b/packages/html-reporter/src/testCaseView.tsx
@@ -40,6 +40,10 @@ export const TestCaseView: React.FC<{
     return test.tags;
   }, [test]);
 
+  const visibleAnnotations = React.useMemo(() => {
+    return test?.annotations?.filter(annotation => !annotation.type.startsWith('_')) || [];
+  }, [test?.annotations]);
+
   return <div className='test-case-column vbox'>
     {test && <div className='test-case-path'>{test.path.join(' › ')}</div>}
     {test && <div className='test-case-title'>{test?.title}</div>}
@@ -52,8 +56,8 @@ export const TestCaseView: React.FC<{
       {test && !!test.projectName && <ProjectLink projectNames={projectNames} projectName={test.projectName}></ProjectLink>}
       {labels && <LabelsLinkView labels={labels} />}
     </div>}
-    {test && !!test.annotations.length && <AutoChip header='Annotations'>
-      {test?.annotations.map(annotation => <TestCaseAnnotationView annotation={annotation} />)}
+    {!!visibleAnnotations.length && <AutoChip header='Annotations'>
+      {visibleAnnotations.map(annotation => <TestCaseAnnotationView annotation={annotation} />)}
     </AutoChip>}
     {test && <TabbedPane tabs={
       test.results.map((result, index) => ({