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

tweak: properly apply label, fix tests

Browse source
This commit is contained in:
alvaromartmart 2024-06-25 23:06:17 +02:00
parent e27aa15e12
commit 612cd17365
2 changed files with 12 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -28,9 +28,10 @@ type Attachment = AfterActionTraceEventAttachment & { traceUrl: string };
type TextAttachmentProps = { type TextAttachmentProps = {
attachment: Attachment; attachment: Attachment;
label?: string;
}; };
const TextAttachment: React.FunctionComponent<TextAttachmentProps> = ({ attachment }) => { const TextAttachment: React.FunctionComponent<TextAttachmentProps> = ({ attachment, label }) => {
const [text, setText] = React.useState<string | null>(null); const [text, setText] = React.useState<string | null>(null);
React.useEffect(() => { React.useEffect(() => {
@ -43,9 +44,13 @@ const TextAttachment: React.FunctionComponent<TextAttachmentProps> = ({ attachme
isMounted = false; isMounted = false;
}; };
}, [attachment]); }, [attachment]);
return text ? return <div aria-label={label}>
<CodeMirrorWrapper text={text} readOnly wrapLines={false}></CodeMirrorWrapper> : {
<div><i>Loading...</i></div>; text ?
<CodeMirrorWrapper text={text} readOnly wrapLines={false}></CodeMirrorWrapper> :
<div><i>Loading...</i></div>
}
</div>;
}; };
export const AttachmentsTab: React.FunctionComponent<{ export const AttachmentsTab: React.FunctionComponent<{
@ -111,7 +116,7 @@ export const AttachmentsTab: React.FunctionComponent<{
<div className='attachment-item' key={`attachment-${i}`}> <div className='attachment-item' key={`attachment-${i}`}>
<a href={attachmentURL(a) + '&download'}>{a.name}</a> <a href={attachmentURL(a) + '&download'}>{a.name}</a>
{ isTextualMimeType(a.contentType) ? { isTextualMimeType(a.contentType) ?
<TextAttachment attachment={a} /> : <TextAttachment attachment={a} label={a.name}/> :
<div><i>no preview available</i></div> <div><i>no preview available</i></div>
} }
</div> </div>

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

@ -36,18 +36,17 @@ test('should contain text attachment', async ({ runUITest }) => {
for (const { name, content, displayedAsText } of [ for (const { name, content, displayedAsText } of [
{ name: 'note', content: 'attach test', displayedAsText: false }, { name: 'note', content: 'attach test', displayedAsText: false },
{ name: '🎭', content: 'hi tester!', displayedAsText: true }, { name: '🎭', content: 'hi tester!', displayedAsText: true },
{ name: 'escaped', content: '## Header\\n\\n> TODO: some todo\\n- _Foo_\\n- **Bar**', 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(); await page.getByText(`attach "${name}"`, { exact: true }).click();
const downloadPromise = page.waitForEvent('download'); const downloadPromise = page.waitForEvent('download');
if (displayedAsText) if (displayedAsText)
await expect(page.getByLabel(name)).toHaveText(content); await expect(page.getByLabel(name)).toContainText(content.split('\n')?.[0]);
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);
expect((await readAllFromStream(await download.createReadStream())).toString()).toContain(content); expect((await readAllFromStream(await download.createReadStream())).toString()).toContain(content);
} }
await page.pause();
}); });
test('should contain binary attachment', async ({ runUITest }) => { test('should contain binary attachment', async ({ runUITest }) => {