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

feat(html report): show video inline (#8293)

Browse source
This commit is contained in:
Dmitry Gozman 2021-08-18 14:30:55 -07:00 committed by GitHub
parent 6ef76e333e
commit ee9863387b
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 11 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
src/web/htmlReport/htmlReport.tsx
View file

@ -128,7 +128,8 @@ const SuiteTreeItem: React.FC<{
</div> </div>
} loadChildren={() => { } loadChildren={() => {
const suiteChildren = suite?.suites.map((s, i) => <SuiteTreeItem key={i} suite={s} setSelectedTest={setSelectedTest} selectedTest={selectedTest} depth={depth + 1} showFileName={false}></SuiteTreeItem>) || []; const suiteChildren = suite?.suites.map((s, i) => <SuiteTreeItem key={i} suite={s} setSelectedTest={setSelectedTest} selectedTest={selectedTest} depth={depth + 1} showFileName={false}></SuiteTreeItem>) || [];
const testChildren = suite?.tests.map((t, i) => <TestTreeItem key={i} test={t} setSelectedTest={setSelectedTest} selectedTest={selectedTest} showFileName={false} depth={depth + 1}></TestTreeItem>) || []; const suiteCount = suite ? suite.suites.length : 0;
const testChildren = suite?.tests.map((t, i) => <TestTreeItem key={i + suiteCount} test={t} setSelectedTest={setSelectedTest} selectedTest={selectedTest} showFileName={false} depth={depth + 1}></TestTreeItem>) || [];
return [...suiteChildren, ...testChildren]; return [...suiteChildren, ...testChildren];
}} depth={depth}></TreeItem>; }} depth={depth}></TreeItem>;
}; };
@ -169,12 +170,13 @@ const TestOverview: React.FC<{
test: JsonTestCase, test: JsonTestCase,
result: JsonTestResult, result: JsonTestResult,
}> = ({ test, result }) => { }> = ({ test, result }) => {
const { screenshots, attachmentsMap } = React.useMemo(() => { const { screenshots, video, attachmentsMap } = React.useMemo(() => {
const attachmentsMap = new Map<string, JsonAttachment>(); const attachmentsMap = new Map<string, JsonAttachment>();
const screenshots = result.attachments.filter(a => a.name === 'screenshot'); const screenshots = result.attachments.filter(a => a.name === 'screenshot');
const video = result.attachments.filter(a => a.name === 'video');
for (const a of result.attachments) for (const a of result.attachments)
attachmentsMap.set(a.name, a); attachmentsMap.set(a.name, a);
return { attachmentsMap, screenshots }; return { attachmentsMap, screenshots, video };
}, [ result ]); }, [ result ]);
return <div className="test-result"> return <div className="test-result">
<div className='test-overview-title'>{test?.title}</div> <div className='test-overview-title'>{test?.title}</div>
@ -184,6 +186,12 @@ const TestOverview: React.FC<{
{attachmentsMap.has('expected') && attachmentsMap.has('actual') && <ImageDiff actual={attachmentsMap.get('actual')!} expected={attachmentsMap.get('expected')!} diff={attachmentsMap.get('diff')}></ImageDiff>} {attachmentsMap.has('expected') && attachmentsMap.has('actual') && <ImageDiff actual={attachmentsMap.get('actual')!} expected={attachmentsMap.get('expected')!} diff={attachmentsMap.get('diff')}></ImageDiff>}
{!!screenshots.length && <div className='test-overview-title'>Screenshots</div>} {!!screenshots.length && <div className='test-overview-title'>Screenshots</div>}
{screenshots.map(a => <div className='image-preview'><img src={'resources/' + a.sha1} /></div>)} {screenshots.map(a => <div className='image-preview'><img src={'resources/' + a.sha1} /></div>)}
{!!video.length && <div className='test-overview-title'>Video</div>}
{video.map(a => <div className='image-preview'>
<video controls>
<source src={'resources/' + a.sha1} type={a.contentType}/>
</video>
</div>)}
{!!result.attachments && <div className='test-overview-title'>Attachments</div>} {!!result.attachments && <div className='test-overview-title'>Attachments</div>}
{result.attachments.map(a => <AttachmentLink attachment={a}></AttachmentLink>)} {result.attachments.map(a => <AttachmentLink attachment={a}></AttachmentLink>)}
<div className='test-overview-title'></div> <div className='test-overview-title'></div>