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

move attachments into steps

Browse source
This commit is contained in:
Simon Knott 2024-10-16 12:03:09 +02:00
parent 64ed6e724c
commit 97c11e4940
No known key found for this signature in database
GPG key ID: 8CEDC00028084AEC
1 changed files with 17 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

22
packages/html-reporter/src/testResultView.tsx
View file

@ -84,12 +84,19 @@ export const TestResultView: React.FC<{
const screenshots = new Set(attachments.filter(a => getAttachmentCategory(a) === 'screenshot')); const screenshots = new Set(attachments.filter(a => getAttachmentCategory(a) === 'screenshot'));
const videos = attachments.filter(a => getAttachmentCategory(a) === 'video'); const videos = attachments.filter(a => getAttachmentCategory(a) === 'video');
const traces = attachments.filter(a => getAttachmentCategory(a) === 'trace'); const traces = attachments.filter(a => getAttachmentCategory(a) === 'trace');
const htmls = attachments.filter(a => getAttachmentCategory(a) === 'html');
const otherAttachments = attachments.filter(a => getAttachmentCategory(a) === 'other');
const diffs = groupImageDiffs(screenshots); const diffs = groupImageDiffs(screenshots);
const errors = classifyErrors(result.errors, diffs); const errors = classifyErrors(result.errors, diffs);
const collectAttachments = (step: TestStep): number[] => step.attachments.concat(...step.steps.map(collectAttachments));
const stepAttachments = result.steps.flatMap(collectAttachments);
const topLevelAttachments = result.attachments.filter((_, index) => !stepAttachments.includes(index));
const htmls = topLevelAttachments.filter(a => getAttachmentCategory(a) === 'html');
const otherAttachments = topLevelAttachments.filter(a => getAttachmentCategory(a) === 'other');
return { screenshots: [...screenshots], videos, traces, otherAttachments, diffs, errors, htmls }; return { screenshots: [...screenshots], videos, traces, otherAttachments, diffs, errors, htmls };
}, [result.attachments, result.errors]); }, [result]);
const videoRef = React.useRef<HTMLDivElement>(null); const videoRef = React.useRef<HTMLDivElement>(null);
const imageDiffRef = React.useRef<HTMLDivElement>(null); const imageDiffRef = React.useRef<HTMLDivElement>(null);
@ -115,6 +122,8 @@ export const TestResultView: React.FC<{
</AutoChip>} </AutoChip>}
{!!result.steps.length && <AutoChip header='Test Steps' dataTestId='test-steps-chip'> {!!result.steps.length && <AutoChip header='Test Steps' dataTestId='test-steps-chip'>
{result.steps.map((step, i) => <StepTreeItem key={`step-${i}`} step={step} attachments={result.attachments} depth={0}></StepTreeItem>)} {result.steps.map((step, i) => <StepTreeItem key={`step-${i}`} step={step} attachments={result.attachments} depth={0}></StepTreeItem>)}
{htmls.map((a, i) => <AttachmentLink key={`html-link-${i}`} attachment={a} openInNewTab />)}
{otherAttachments.map((a, i) => <AttachmentLink key={`attachment-link-${i}`} attachment={a}/>)}
</AutoChip>} </AutoChip>}
{diffs.map((diff, index) => {diffs.map((diff, index) =>
@ -152,7 +161,7 @@ export const TestResultView: React.FC<{
</div>)} </div>)}
</AutoChip>} </AutoChip>}
{!!(otherAttachments.length + htmls.length) && <AutoChip header='Attachments'> {!result.steps.length && !!(otherAttachments.length + htmls.length) && <AutoChip header='Attachments'>
{[...htmls].map((a, i) => ( {[...htmls].map((a, i) => (
<AttachmentLink key={`html-link-${i}`} attachment={a} openInNewTab />) <AttachmentLink key={`html-link-${i}`} attachment={a} openInNewTab />)
)} )}
@ -189,6 +198,9 @@ const StepTreeItem: React.FC<{
depth: number, depth: number,
attachments: TestAttachment[], attachments: TestAttachment[],
}> = ({ step, depth, attachments }) => { }> = ({ step, depth, attachments }) => {
if (step.category === 'attach')
return;
return <TreeItem title={<span> return <TreeItem title={<span>
<span style={{ float: 'right' }}>{msToString(step.duration)}</span> <span style={{ float: 'right' }}>{msToString(step.duration)}</span>
{statusIcon(step.error || step.duration === -1 ? 'failed' : 'passed')} {statusIcon(step.error || step.duration === -1 ? 'failed' : 'passed')}
@ -198,7 +210,7 @@ const StepTreeItem: React.FC<{
{step.attachments.length > 0 && <span className='attachments-icon' title={`${step.attachments} attachment${step.attachments.length > 1 ? 's' : ''}`}>{icons.paperclip()}</span>} {step.attachments.length > 0 && <span className='attachments-icon' title={`${step.attachments} attachment${step.attachments.length > 1 ? 's' : ''}`}>{icons.paperclip()}</span>}
</span>} loadChildren={step.steps.length + step.attachments.length + (step.snippet ? 1 : 0) ? () => { </span>} loadChildren={step.steps.length + step.attachments.length + (step.snippet ? 1 : 0) ? () => {
const children = step.steps.map((s, i) => <StepTreeItem key={i} step={s} depth={depth + 1} attachments={attachments}></StepTreeItem>); const children = step.steps.map((s, i) => <StepTreeItem key={i} step={s} depth={depth + 1} attachments={attachments}></StepTreeItem>);
children.unshift(...step.attachments.map(a => { children.push(...step.attachments.map(a => {
const attachment = attachments[a]; const attachment = attachments[a];
return <AttachmentLink key={`attachment-${a}`} attachment={attachment} depth={depth + 1} openInNewTab={getAttachmentCategory(attachment) === 'html'}/>; return <AttachmentLink key={`attachment-${a}`} attachment={attachment} depth={depth + 1} openInNewTab={getAttachmentCategory(attachment) === 'html'}/>;
})); }));