This commit is contained in:
Yury Semikhatsky 2024-10-09 17:24:15 -07:00
parent c6d47bda9f
commit 8196a6ba1e
3 changed files with 10 additions and 11 deletions

View file

@ -35,10 +35,10 @@ export const TestScreenshotErrorView: React.FC<{
const prefixHtml = React.useMemo(() => ansiErrorToHtml(errorPrefix), [errorPrefix]); const prefixHtml = React.useMemo(() => ansiErrorToHtml(errorPrefix), [errorPrefix]);
const suffixHtml = React.useMemo(() => ansiErrorToHtml(errorSuffix), [errorSuffix]); const suffixHtml = React.useMemo(() => ansiErrorToHtml(errorSuffix), [errorSuffix]);
return <div className='test-error-message'> return <div className='test-error-message'>
<div dangerouslySetInnerHTML={{ __html: prefixHtml || '' }}></div> <div dangerouslySetInnerHTML={{ __html: prefixHtml || '' }}></div>
<ImageDiffView key='image-diff' diff={diff} hideDetails={true} ></ImageDiffView> <ImageDiffView key='image-diff' diff={diff} hideDetails={true} ></ImageDiffView>
<div dangerouslySetInnerHTML={{ __html: suffixHtml || '' }}></div> <div dangerouslySetInnerHTML={{ __html: suffixHtml || '' }}></div>
</div> </div>;
}; };
function ansiErrorToHtml(text?: string): string { function ansiErrorToHtml(text?: string): string {

View file

@ -98,9 +98,9 @@ export const TestResultView: React.FC<{
{!!errors.length && <AutoChip header='Errors'> {!!errors.length && <AutoChip header='Errors'>
{errors.map((error, index) => { {errors.map((error, index) => {
if (error.type === 'screenshot') if (error.type === 'screenshot')
return <TestScreenshotErrorView errorPrefix={error.errorPrefix} diff={error.diff!} errorSuffix={error.errorSuffix}></TestScreenshotErrorView>; return <TestScreenshotErrorView key={'test-result-error-message-' + index} errorPrefix={error.errorPrefix} diff={error.diff!} errorSuffix={error.errorSuffix}></TestScreenshotErrorView>;
return <TestErrorView key={'test-result-error-message-' + index} error={error.error!}></TestErrorView> return <TestErrorView key={'test-result-error-message-' + index} error={error.error!}></TestErrorView>;
})} })}
</AutoChip>} </AutoChip>}
{!!result.steps.length && <AutoChip header='Test Steps'> {!!result.steps.length && <AutoChip header='Test Steps'>
{result.steps.map((step, i) => <StepTreeItem key={`step-${i}`} step={step} depth={0}></StepTreeItem>)} {result.steps.map((step, i) => <StepTreeItem key={`step-${i}`} step={step} depth={0}></StepTreeItem>)}
@ -156,8 +156,8 @@ function classifyErrors(testErrors: string[], diffs: ImageDiff[]) {
let screenshotError; let screenshotError;
if (error.includes('Screenshot comparison failed:')) { if (error.includes('Screenshot comparison failed:')) {
for (const diff of diffs) { for (const diff of diffs) {
if (!diff.actual?.attachment.name) if (!diff.actual?.attachment.name)
continue; continue;
if (!error.includes(diff.actual!.attachment.name)) if (!error.includes(diff.actual!.attachment.name))
continue; continue;
const index = error.search(/Expected:|Previous:|Received:/); const index = error.search(/Expected:|Previous:|Received:/);

View file

@ -63,7 +63,6 @@ export const ImageDiffView: React.FC<{
noTargetBlank?: boolean, noTargetBlank?: boolean,
hideDetails?: boolean, hideDetails?: boolean,
}> = ({ diff, noTargetBlank, hideDetails }) => { }> = ({ diff, noTargetBlank, hideDetails }) => {
console.log('hideDetails', hideDetails);
const [mode, setMode] = React.useState<'diff' | 'actual' | 'expected' | 'slider' | 'sxs'>(diff.diff ? 'diff' : 'actual'); const [mode, setMode] = React.useState<'diff' | 'actual' | 'expected' | 'slider' | 'sxs'>(diff.diff ? 'diff' : 'actual');
const [showSxsDiff, setShowSxsDiff] = React.useState<boolean>(false); const [showSxsDiff, setShowSxsDiff] = React.useState<boolean>(false);
@ -138,7 +137,7 @@ export const ImageDiffSlider: React.FC<{
canvasHeight: number, canvasHeight: number,
scale: number, scale: number,
expectedTitle: string, expectedTitle: string,
hideSize?: boolean, hideSize?: boolean,
}> = ({ expectedImage, actualImage, canvasWidth, canvasHeight, scale, expectedTitle, hideSize }) => { }> = ({ expectedImage, actualImage, canvasWidth, canvasHeight, scale, expectedTitle, hideSize }) => {
const absoluteStyle: React.CSSProperties = { const absoluteStyle: React.CSSProperties = {
position: 'absolute', position: 'absolute',