microsoft/playwright
1
1
Fork 0
mirror of https://github.com/microsoft/playwright.git synced 2024-09-11 20:37:54 +03:00
Code Issues Projects Releases Wiki Activity

chore: follow up to the attachments preview change (#31598)

Browse Source
This commit is contained in:
Pavel Feldman 2024-07-09 09:58:59 -07:00 committed by GitHub
parent 067e423d14
commit f374f8db38
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 43 additions and 51 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

58
packages/trace-viewer/src/ui/attachmentsTab.tsx
View File

@ -32,41 +32,41 @@ type ExpandableAttachmentProps = {
const ExpandableAttachment: React.FunctionComponent<ExpandableAttachmentProps> = ({ attachment }) => { const ExpandableAttachment: React.FunctionComponent<ExpandableAttachmentProps> = ({ attachment }) => {
const [expanded, setExpanded] = React.useState(false); const [expanded, setExpanded] = React.useState(false);
const [loaded, setLoaded] = React.useState(false);
const [attachmentText, setAttachmentText] = React.useState<string | null>(null); const [attachmentText, setAttachmentText] = React.useState<string | null>(null);
const [emptyContentReason, setEmptyContentReason] = React.useState<string>(''); const [placeholder, setPlaceholder] = React.useState<string | null>(null);
React.useMemo(() => { const isTextAttachment = isTextualMimeType(attachment.contentType);
if (!isTextualMimeType(attachment.contentType)) {
setEmptyContentReason('no preview available'); React.useEffect(() => {
return; if (expanded && attachmentText === null && placeholder === null) {
} setPlaceholder('Loading ...');
if (expanded && !loaded) {
setEmptyContentReason('loading...');
fetch(attachmentURL(attachment)).then(response => response.text()).then(text => { fetch(attachmentURL(attachment)).then(response => response.text()).then(text => {
setAttachmentText(text); setAttachmentText(text);
setLoaded(true); setPlaceholder(null);
}).catch(err => setEmptyContentReason('failed to load: ' + err.message)); }).catch(e => {
setPlaceholder('Failed to load: ' + e.message);
});
} }
}, [attachment, expanded, loaded]); }, [expanded, attachmentText, placeholder, attachment]);
return <Expandable title={ const title = <>
<> {attachment.name} <a style={{ marginLeft: 5 }} href={attachmentURL(attachment) + '&download'}>download</a>
{attachment.name} </>;
<a href={attachmentURL(attachment) + '&download'}
className={'codicon codicon-cloud-download'} if (!isTextAttachment)
style={{ cursor: 'pointer', color: 'var(--vscode-foreground)', marginLeft: '0.5rem' }} return <div style={{ marginLeft: 20 }}>{title}</div>;
onClick={$event => $event.stopPropagation()}>
</a> return <>
</> <Expandable title={title} expanded={expanded} setExpanded={setExpanded} expandOnTitleClick={true}>
} expanded={expanded} expandOnTitleClick={true} setExpanded={exp => setExpanded(exp)}> {placeholder && <i>{placeholder}</i>}
<div aria-label={attachment.name}> </Expandable>
{ attachmentText ? {expanded && attachmentText !== null && <CodeMirrorWrapper
<CodeMirrorWrapper text={attachmentText!} readOnly wrapLines={false}></CodeMirrorWrapper> : text={attachmentText}
<i>{emptyContentReason}</i> readOnly
} lineNumbers={true}
</div> wrapLines={false}>
</Expandable>; </CodeMirrorWrapper>}
</>;
}; };
export const AttachmentsTab: React.FunctionComponent<{ export const AttachmentsTab: React.FunctionComponent<{

36
tests/playwright-test/ui-mode-test-attachments.spec.ts
View File

@ -23,9 +23,8 @@ test('should contain text attachment', async ({ runUITest }) => {
'a.test.ts': ` 'a.test.ts': `
import { test } from '@playwright/test'; import { test } from '@playwright/test';
test('attach test', async () => { test('attach test', async () => {
await test.info().attach('note', { path: __filename }); await test.info().attach('file attachment', { path: __filename });
await test.info().attach('🎭', { body: 'hi tester!', contentType: 'text/plain' }); await test.info().attach('text attachment', { body: 'hi tester!', contentType: 'text/plain' });
await test.info().attach('escaped', { body: '## Header\\n\\n> TODO: some todo\\n- _Foo_\\n- **Bar**', contentType: 'text/plain' });
}); });
`, `,
}); });
@ -33,23 +32,17 @@ 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, displayedAsText } of [
{ name: 'note', content: 'attach test', displayedAsText: false }, await page.locator('.tab-attachments').getByText('text attachment').click();
{ name: '🎭', content: 'hi tester!', displayedAsText: true }, await expect(page.locator('.tab-attachments')).toContainText('hi tester!');
{ name: 'escaped', content: '## Header\n\n> TODO: some todo\n- _Foo_\n- **Bar**', displayedAsText: true }, await page.locator('.tab-attachments').getByText('file attachment').click();
]) { await expect(page.locator('.tab-attachments')).not.toContainText('attach test');
await page.getByText(`attach "${name}"`, { exact: true }).click();
const downloadPromise = page.waitForEvent('download'); const downloadPromise = page.waitForEvent('download');
await page.locator('.expandable-title', { hasText: name }).click(); await page.getByRole('link', { name: 'download' }).first().click();
await expect(page.getByLabel(name)).toContainText(displayedAsText ? const download = await downloadPromise;
content.split('\n')?.[0] : expect(download.suggestedFilename()).toBe('file attachment');
'no preview available' expect((await readAllFromStream(await download.createReadStream())).toString()).toContain('attach test');
);
await page.locator('.expandable-title', { hasText: name }).getByRole('link').click();
const download = await downloadPromise;
expect(download.suggestedFilename()).toBe(name);
expect((await readAllFromStream(await download.createReadStream())).toString()).toContain(content);
}
}); });
test('should contain binary attachment', async ({ runUITest }) => { test('should contain binary attachment', async ({ runUITest }) => {
@ -65,9 +58,8 @@ test('should contain binary 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();
await page.getByText('attach "data"', { exact: true }).click();
const downloadPromise = page.waitForEvent('download'); const downloadPromise = page.waitForEvent('download');
await page.locator('.expandable-title', { hasText: 'data' }).getByRole('link').click(); await page.getByRole('link', { name: 'download' }).click();
const download = await downloadPromise; const download = await downloadPromise;
expect(download.suggestedFilename()).toBe('data'); expect(download.suggestedFilename()).toBe('data');
expect(await readAllFromStream(await download.createReadStream())).toEqual(Buffer.from([1, 2, 3])); expect(await readAllFromStream(await download.createReadStream())).toEqual(Buffer.from([1, 2, 3]));