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

tweak: use div instead of textarea to display text attachments

Browse source
This commit is contained in:
alvaromartmart 2024-06-15 23:50:01 +02:00
parent c034a4e9de
commit 3520c7a86b
3 changed files with 12 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
packages/trace-viewer/src/ui/attachmentsTab.css
View file

@ -49,5 +49,7 @@
.attachment-item .attachment-item__text { .attachment-item .attachment-item__text {
display: block; display: block;
width: 100%; width: 100%;
border: 1px solid var(--vscode-panel-border);
border-radius: 2px; border-radius: 2px;
padding: 0.5rem;
} }

4
packages/trace-viewer/src/ui/attachmentsTab.tsx
View file

@ -41,7 +41,9 @@ const TextAttachment: React.FunctionComponent<TextAttachmentProps> = ({ attachme
}; };
}, [attachment]); }, [attachment]);
return <textarea aria-label={attachment.name} className="attachment-item__text" disabled value={text!}/>; return <div aria-label={attachment.name} className="attachment-item__text">
{text!}
</div>;
}; };
export const AttachmentsTab: React.FunctionComponent<{ export const AttachmentsTab: React.FunctionComponent<{

11
tests/playwright-test/ui-mode-test-attachments.spec.ts
View file

@ -25,6 +25,7 @@ test('should contain text attachment', async ({ runUITest }) => {
test('attach test', async () => { test('attach test', async () => {
await test.info().attach('note', { path: __filename }); await test.info().attach('note', { path: __filename });
await test.info().attach('🎭', { body: 'hi tester!', contentType: 'text/plain' }); await test.info().attach('🎭', { body: 'hi tester!', contentType: 'text/plain' });
await test.info().attach('escaped', { body: '<div>\\nFoo\\nBar\\n</div>', contentType: 'text/plain' });
}); });
`, `,
}); });
@ -32,13 +33,15 @@ test('should contain text attachment', async ({ runUITest }) => {
await page.getByTitle('Run all').click(); await page.getByTitle('Run all').click();
await expect(page.getByTestId('status-line')).toHaveText('1/1 passed (100%)'); await expect(page.getByTestId('status-line')).toHaveText('1/1 passed (100%)');
await page.getByText('Attachments').click(); await page.getByText('Attachments').click();
for (const { name, content } of [ for (const { name, content, displayedAsText } of [
{ name: 'note', content: 'attach test' }, { name: 'note', content: 'attach test', displayedAsText: false },
{ name: '🎭', content: 'hi tester!' } { name: '🎭', content: 'hi tester!', displayedAsText: true },
{ name: 'escaped', content: '<div>\nFoo\nBar\n</div>', displayedAsText: true },
]) { ]) {
await page.getByText(`attach "${name}"`, { exact: true }).click(); await page.getByText(`attach "${name}"`, { exact: true }).click();
const downloadPromise = page.waitForEvent('download'); const downloadPromise = page.waitForEvent('download');
await expect(page.getByLabel('🎭')).toHaveText('hi tester!'); if (displayedAsText)
await expect(page.getByLabel(name)).toHaveText(content);
await page.getByRole('link', { name: name }).click(); await page.getByRole('link', { name: name }).click();
const download = await downloadPromise; const download = await downloadPromise;
expect(download.suggestedFilename()).toBe(name); expect(download.suggestedFilename()).toBe(name);