Write test cases for copy annotation text feature

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

View file

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

View file

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

View file

@ -64,7 +64,13 @@ 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.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 expect(component.getByText('Annotation text')).not.toBeVisible();
await expect(component.getByText('Outer step')).toBeVisible();

View file

@ -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 className='annotation-copy-button'>{description && <CopyToClipboard value={description} />}</span>
</div>
);
}