Write test cases for copy annotation text feature

microsoft · Mar 28, 2024 · 01c472f · 01c472f
1 parent 9c6be91
commit 01c472f
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 2 deletions.
diff --git a/packages/html-reporter/src/testCaseView.spec.tsx b/packages/html-reporter/src/testCaseView.spec.tsx
@@ -64,7 +64,11 @@ 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();
+  const firstAnnotationElement = component.getByText('Annotation text', { exact: false }).first();
+  await expect(firstAnnotationElement).toBeVisible();
+  await expect(component.getByTestId('annotation-copy-button').first()).not.toBeVisible();
+  await firstAnnotationElement.hover();
+  await expect(component.getByTestId('annotation-copy-button').first()).toBeVisible();
   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
@@ -78,7 +78,7 @@ function TestCaseAnnotationView({ annotation: { type, description } }: { annotat
     <div className='test-case-annotation'>
       <span style={{ fontWeight: 'bold', display: 'inline-block', marginBlock: '3px' }}>{type}</span>
       {description && <span>: {renderAnnotationDescription(description)}</span>}
-      <span id='annotation-copy-button'>{description && <CopyToClipboard value={description} />}</span>
+      <span id='annotation-copy-button' data-testid='annotation-copy-button' >{description && <CopyToClipboard value={description} />}</span>
     </div>
   );
 }