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

tweak: use CodeMirrorWrapper to display text attachments

Browse source
This commit is contained in:
alvaromartmart 2024-06-24 23:31:04 +02:00
parent c8d8cd0283
commit e4f773e3ea
2 changed files with 10 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -20,7 +20,7 @@ import { ImageDiffView } from '@web/shared/imageDiffView';
import type { MultiTraceModel } from './modelUtil';
import { PlaceholderPanel } from './placeholderPanel';
import type { AfterActionTraceEventAttachment } from '@trace/trace';
import { CodeMirrorWrapper } from '@web/components/codeMirrorWrapper';
import { isTextualMimeType } from '@isomorphic/mimeType';
@ -43,10 +43,9 @@ const TextAttachment: React.FunctionComponent<TextAttachmentProps> = ({ attachme
isMounted = false;
};
}, [attachment]);
return <div aria-label={attachment.name} className="attachment-item__text">
{text!}
</div>;
return text ?
<CodeMirrorWrapper text={text} readOnly wrapLines={false}></CodeMirrorWrapper> :
<div><i>Loading...</i></div>;
};
export const AttachmentsTab: React.FunctionComponent<{
@ -109,8 +108,9 @@ export const AttachmentsTab: React.FunctionComponent<{
{[...attachments.values()].map((a, i) => {
return <div className='attachment-item' key={`attachment-${i}`}>
<a href={attachmentURL(a) + '&download'}>{a.name}</a>
{ isTextualMimeType(a.contentType) &&
<TextAttachment attachment={a} />
{ isTextualMimeType(a.contentType) ?
<TextAttachment attachment={a} /> :
<div><i>no preview available</i></div>
}
</div>;
})}

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

@ -25,7 +25,7 @@ test('should contain text attachment', async ({ runUITest }) => {
test('attach test', async () => {
await test.info().attach('note', { path: __filename });
await test.info().attach('🎭', { body: 'hi tester!', contentType: 'text/plain' });
await test.info().attach('escaped', { body: '<div>\\nFoo\\nBar\\n</div>', contentType: 'text/plain' });
await test.info().attach('escaped', { body: '## Header\\n\\n> TODO: some todo\\n- _Foo_\\n- **Bar**', contentType: 'text/plain' });
});
`,
});
@ -36,7 +36,7 @@ test('should contain text attachment', async ({ runUITest }) => {
for (const { name, content, displayedAsText } of [
{ name: 'note', content: 'attach test', displayedAsText: false },
{ name: '🎭', content: 'hi tester!', displayedAsText: true },
{ name: 'escaped', content: '<div>\nFoo\nBar\n</div>', displayedAsText: true },
{ name: 'escaped', content: '## Header\\n\\n> TODO: some todo\\n- _Foo_\\n- **Bar**', displayedAsText: true },
]) {
await page.getByText(`attach "${name}"`, { exact: true }).click();
const downloadPromise = page.waitForEvent('download');
@ -47,6 +47,7 @@ test('should contain text attachment', async ({ runUITest }) => {
expect(download.suggestedFilename()).toBe(name);
expect((await readAllFromStream(await download.createReadStream())).toString()).toContain(content);
}
await page.pause();
});
test('should contain binary attachment', async ({ runUITest }) => {