Filip/playwright
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

Write test cases for copy annotation text feature

Browse source
This commit is contained in:
Aman Kumar 2024-03-28 23:16:38 +05:30
parent ac45994ca8
commit e2f9bfb69e
4 changed files with 11 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
packages/html-reporter/src/copyToClipboard.tsx
View file

@ -34,5 +34,5 @@ export const CopyToClipboard: React.FunctionComponent<{
}); });
}, [value]); }, [value]);
const iconElement = icon === 'check' ? icons.check() : icon === 'cross' ? icons.cross() : icons.copy(); 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' onClick={handleCopy} aria-label="copy to clipboard">{iconElement}</button>;
}; };

4
packages/html-reporter/src/testCaseView.css
View file

@ -75,12 +75,12 @@
flex-wrap: wrap; flex-wrap: wrap;
} }
#annotation-copy-button{ .annotation-copy-button{
padding-left: 3px; padding-left: 3px;
display: none; display: none;
} }
.test-case-annotation:hover #annotation-copy-button{ .test-case-annotation:hover .annotation-copy-button{
padding-left: 3px; padding-left: 3px;
display: inline; display: inline;
} }

8
packages/html-reporter/src/testCaseView.spec.tsx
View file

@ -64,7 +64,13 @@ const testCase: TestCase = {
test('should render test case', async ({ mount }) => { test('should render test case', async ({ mount }) => {
const component = await mount(<TestCaseView projectNames={['chromium', 'webkit']} test={testCase} run={0} anchor=''></TestCaseView>); 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.getByRole('button', { name: 'copy to clipboard' }).first()).not.toBeVisible();
await expect(component.getByRole('button', { name: 'copy to clipboard' }).nth(1)).not.toBeVisible();
await firstAnnotationElement.hover();
await expect(component.getByRole('button', { name: 'copy to clipboard' }).first()).toBeVisible();
await expect(component.getByRole('button', { name: 'copy to clipboard' }).nth(1)).not.toBeVisible();
await component.getByText('Annotations').click(); await component.getByText('Annotations').click();
await expect(component.getByText('Annotation text')).not.toBeVisible(); await expect(component.getByText('Annotation text')).not.toBeVisible();
await expect(component.getByText('Outer step')).toBeVisible(); await expect(component.getByText('Outer step')).toBeVisible();

2
packages/html-reporter/src/testCaseView.tsx
View file

@ -78,7 +78,7 @@ function TestCaseAnnotationView({ annotation: { type, description } }: { annotat
<div className='test-case-annotation'> <div className='test-case-annotation'>
<span style={{ fontWeight: 'bold', display: 'inline-block', marginBlock: '3px' }}>{type}</span> <span style={{ fontWeight: 'bold', display: 'inline-block', marginBlock: '3px' }}>{type}</span>
{description && <span>: {renderAnnotationDescription(description)}</span>} {description && <span>: {renderAnnotationDescription(description)}</span>}
<span id='annotation-copy-button'>{description && <CopyToClipboard value={description} />}</span> <span className='annotation-copy-button'>{description && <CopyToClipboard value={description} />}</span>
</div> </div>
); );
} }