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

fix(html): prevent image diff from flickering (#11184)

Browse source
This commit is contained in:
Pavel Feldman 2022-01-06 15:19:16 -08:00 committed by GitHub
parent e1772f15b5
commit 16dafba153
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 10 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -122,16 +122,23 @@ const ImageDiff: React.FunctionComponent<{
diff?: TestAttachment,
}> = ({ actual, expected, diff }) => {
const [selectedTab, setSelectedTab] = React.useState<string>('actual');
const diffElement = React.useRef<HTMLImageElement>(null);
const tabs = [];
tabs.push({
id: 'actual',
title: 'Actual',
render: () => <img src={actual.path}/>
render: () => <img src={actual.path} onLoad={() => {
if (diffElement.current)
diffElement.current.style.minHeight = diffElement.current.offsetHeight + 'px';
}}/>
});
tabs.push({
id: 'expected',
title: 'Expected',
render: () => <img src={expected.path}/>
render: () => <img src={expected.path} onLoad={() => {
if (diffElement.current)
diffElement.current.style.minHeight = diffElement.current.offsetHeight + 'px';
}}/>
});
if (diff) {
tabs.push({
@ -140,7 +147,7 @@ const ImageDiff: React.FunctionComponent<{
render: () => <img src={diff.path}/>
});
}
return <div className='vbox' data-testid='test-result-image-mismatch'>
return <div className='vbox' data-testid='test-result-image-mismatch' ref={diffElement}>
<TabbedPane tabs={tabs} selectedTab={selectedTab} setSelectedTab={setSelectedTab} />
</div>;
};