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

feat(html): put diff first in image comparison (#12254)

Browse source
This commit is contained in:
Ben Lu 2022-02-22 19:29:58 +00:00 committed by GitHub
parent b08000e7c2
commit f933f65d03
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 10 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -26,7 +26,7 @@ import { AttachmentLink } from './links';
import { statusIcon } from './statusIcon'; import { statusIcon } from './statusIcon';
import './testResultView.css'; import './testResultView.css';
const imageDiffNames = ['expected', 'actual', 'diff']; const imageDiffNames = ['diff', 'expected', 'actual'];
export const TestResultView: React.FC<{ export const TestResultView: React.FC<{
test: TestCase, test: TestCase,
@ -46,9 +46,9 @@ export const TestResultView: React.FC<{
return { attachmentsMap, screenshots, videos, otherAttachments, traces }; return { attachmentsMap, screenshots, videos, otherAttachments, traces };
}, [ result ]); }, [ result ]);
const diff = attachmentsMap.get('diff');
const expected = attachmentsMap.get('expected'); const expected = attachmentsMap.get('expected');
const actual = attachmentsMap.get('actual'); const actual = attachmentsMap.get('actual');
const diff = attachmentsMap.get('diff');
const hasImages = [actual?.contentType, expected?.contentType, diff?.contentType].some(v => v && /^image\//i.test(v)); const hasImages = [actual?.contentType, expected?.contentType, diff?.contentType].some(v => v && /^image\//i.test(v));
return <div className='test-result'> return <div className='test-result'>
{!!result.errors.length && <AutoChip header='Errors'> {!!result.errors.length && <AutoChip header='Errors'>
@ -60,9 +60,9 @@ export const TestResultView: React.FC<{
{expected && actual && <AutoChip header={`${hasImages ? 'Image' : 'Snapshot'} mismatch`}> {expected && actual && <AutoChip header={`${hasImages ? 'Image' : 'Snapshot'} mismatch`}>
{hasImages && <ImageDiff actual={actual} expected={expected} diff={diff}></ImageDiff>} {hasImages && <ImageDiff actual={actual} expected={expected} diff={diff}></ImageDiff>}
{diff && <AttachmentLink key={`diff`} attachment={diff}></AttachmentLink>}
<AttachmentLink key={`expected`} attachment={expected}></AttachmentLink> <AttachmentLink key={`expected`} attachment={expected}></AttachmentLink>
<AttachmentLink key={`actual`} attachment={actual}></AttachmentLink> <AttachmentLink key={`actual`} attachment={actual}></AttachmentLink>
{diff && <AttachmentLink key={`diff`} attachment={diff}></AttachmentLink>}
</AutoChip>} </AutoChip>}
{!!screenshots.length && <AutoChip header='Screenshots'> {!!screenshots.length && <AutoChip header='Screenshots'>
@ -124,6 +124,13 @@ const ImageDiff: React.FunctionComponent<{
const [selectedTab, setSelectedTab] = React.useState<string>('actual'); const [selectedTab, setSelectedTab] = React.useState<string>('actual');
const diffElement = React.useRef<HTMLImageElement>(null); const diffElement = React.useRef<HTMLImageElement>(null);
const tabs = []; const tabs = [];
if (diff) {
tabs.push({
id: 'diff',
title: 'Diff',
render: () => <img src={diff.path}/>
});
}
tabs.push({ tabs.push({
id: 'actual', id: 'actual',
title: 'Actual', title: 'Actual',
@ -140,13 +147,6 @@ const ImageDiff: React.FunctionComponent<{
diffElement.current.style.minHeight = diffElement.current.offsetHeight + 'px'; diffElement.current.style.minHeight = diffElement.current.offsetHeight + 'px';
}}/> }}/>
}); });
if (diff) {
tabs.push({
id: 'diff',
title: 'Diff',
render: () => <img src={diff.path}/>
});
}
return <div className='vbox' data-testid='test-result-image-mismatch' ref={diffElement}> return <div className='vbox' data-testid='test-result-image-mismatch' ref={diffElement}>
<TabbedPane tabs={tabs} selectedTab={selectedTab} setSelectedTab={setSelectedTab} /> <TabbedPane tabs={tabs} selectedTab={selectedTab} setSelectedTab={setSelectedTab} />
</div>; </div>;