From 3e99f9678f031752835bcc477a98bf001a7136a0 Mon Sep 17 00:00:00 2001
From: Anthony Roberts <anthonycr0@users.noreply.github.com>
Date: Wed, 4 Sep 2024 17:39:26 +1000
Subject: [PATCH] add aria-label to copy button, improve tests

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

diff --git a/packages/html-reporter/src/copyToClipboard.tsx b/packages/html-reporter/src/copyToClipboard.tsx
index 207245c74d..17b1dfbf95 100644
--- a/packages/html-reporter/src/copyToClipboard.tsx
+++ b/packages/html-reporter/src/copyToClipboard.tsx
@@ -39,7 +39,7 @@ export const CopyToClipboard: React.FunctionComponent<CopyToClipboardProps> = ({
     });
   }, [value]);
   const iconElement = icon === 'check' ? icons.check() : icon === 'cross' ? icons.cross() : icons.copy();
-  return <button className='copy-icon' onClick={handleCopy}>{iconElement}</button>;
+  return <button className='copy-icon' aria-label='Copy to clipboard' onClick={handleCopy}>{iconElement}</button>;
 };
 
 type CopyToClipboardContainerProps = CopyToClipboardProps & {
diff --git a/packages/html-reporter/src/testCaseView.css b/packages/html-reporter/src/testCaseView.css
index f4d7448242..d87cf3aacb 100644
--- a/packages/html-reporter/src/testCaseView.css
+++ b/packages/html-reporter/src/testCaseView.css
@@ -73,5 +73,4 @@
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
-}
-
+}
\ No newline at end of file
diff --git a/packages/html-reporter/src/testCaseView.spec.tsx b/packages/html-reporter/src/testCaseView.spec.tsx
index 21b1535911..72552f5184 100644
--- a/packages/html-reporter/src/testCaseView.spec.tsx
+++ b/packages/html-reporter/src/testCaseView.spec.tsx
@@ -76,11 +76,17 @@ test('should render test case', async ({ mount }) => {
   await expect(component.getByText('My test')).toBeVisible();
 });
 
-test('should render copy buttons for annotations', async ({ mount }) => {
+test('should render copy buttons for annotations', async ({ mount, page, context }) => {
+  await context.grantPermissions(['clipboard-read', 'clipboard-write']);
+
   const component = await mount(<TestCaseView projectNames={['chromium', 'webkit']} test={testCase} run={0} anchor=''></TestCaseView>);
   await expect(component.getByText('Annotation text', { exact: false }).first()).toBeVisible();
   component.getByText('Annotation text', { exact: false }).first().hover();
-  await expect(component.getByRole('button').first()).toBeVisible();
+  await expect(component.getByLabel('Copy to clipboard').first()).toBeVisible();
+  await component.getByLabel('Copy to clipboard').first().click();
+  const handle = await page.evaluateHandle(() => navigator.clipboard.readText());
+  const clipboardContent = await handle.jsonValue();
+  expect(clipboardContent).toBe('Annotation text');
 });
 
 const annotationLinkRenderingTestCase: TestCase = {