feat: display differentPixels, if available

gemini-testing · Mar 4, 2024 · 6b9556b · 6b9556b
1 parent f7a60d5
commit 6b9556b
Show file tree

Hide file tree

Showing 5 changed files with 41 additions and 7 deletions.
diff --git a/lib/errors/index.ts b/lib/errors/index.ts
@@ -22,6 +22,8 @@ export interface ImageDiffError {
     diffClusters: CoordBounds[];
     diffBuffer?: ArrayBuffer;
     diffImg?: ImageFile;
+    differentPixels?: number; // defined if hermione >= 8.2.0
+    diffRatio?: number; // defined if hermione >= 8.2.0
 }
 
 export interface NoRefImageError {

diff --git a/lib/static/components/state/index.jsx b/lib/static/components/state/index.jsx
@@ -125,7 +125,23 @@ class State extends Component {
         );
     }
 
-    _getStateTitle() {
+    _getDisplayedDiffPercentValue(ratio) {
+        const percent = ratio * 100;
+        const percentThreshold = 0.001;
+        const percentString = String(percent);
+
+        if (percent < percentThreshold) {
+            return `< ${percentThreshold}`
+        }
+
+        if (percent > 1) {
+            return percentString.slice(0, 4);
+        }
+
+        return percentString.slice(0, 5);
+    }
+
+    _getStateTitleWithDiffCount() {
         const {image, shouldImageBeOpened} = this.props;
 
         if (!image.stateName) {
@@ -138,15 +154,23 @@ class State extends Component {
             `state-title_${image.status}`
         );
 
-        return <div className={className} onClick={this.onToggleStateResult}>{image.stateName}</div>;
+        let displayedText = image.stateName;
+
+        if (image.differentPixels && image.diffRatio) {
+            const displayedDiffPercent = this._getDisplayedDiffPercentValue(image.diffRatio);
+
+            displayedText += ` (diff: ${image.differentPixels}px, ${displayedDiffPercent}%)`;
+        }
+
+        return <div className={className} onClick={this.onToggleStateResult}>{displayedText}</div>;
     }
 
     render() {
         if (!this.props.shouldImageBeOpened) {
             return (
                 <Fragment>
                     <hr className="tab__separator" />
-                    {this._getStateTitle()}
+                    {this._getStateTitleWithDiffCount()}
                 </Fragment>
             );
         }
@@ -168,7 +192,7 @@ class State extends Component {
         return (
             <Fragment>
                 <hr className="tab__separator"/>
-                {this._getStateTitle()}
+                {this._getStateTitleWithDiffCount()}
                 {this._drawFailImageControls()}
                 {this._drawUpdatedImageControls()}
                 {elem ? <div className='image-box__container'>{elem}</div> : null}

diff --git a/lib/test-adapter/hermione.ts b/lib/test-adapter/hermione.ts
@@ -112,7 +112,9 @@ export class HermioneTestAdapter implements ReporterTestResult {
                     ...(diffImg ? {diffImg} : {}),
                     expectedImg: _.clone(assertResult.refImg),
                     diffClusters: assertResult.diffClusters,
-                    diffOptions: assertResult.diffOpts
+                    diffOptions: assertResult.diffOpts,
+                    differentPixels: assertResult.differentPixels,
+                    diffRatio: assertResult.diffRatio
                 } satisfies ImageInfoDiff;
             } else if (isNoRefImageError(assertResult)) {
                 return {

diff --git a/lib/types.ts b/lib/types.ts
@@ -72,6 +72,8 @@ export interface ImageInfoDiff {
     actualImg: ImageFile;
     diffImg?: ImageFile | ImageBuffer;
     diffOptions: DiffOptions;
+    differentPixels?: number; // defined if hermione >= 8.2.0
+    diffRatio?: number; // defined if hermione >= 8.2.0
 }
 
 interface AssertViewSuccess {

diff --git a/test/unit/lib/test-adapter/hermione.ts b/test/unit/lib/test-adapter/hermione.ts
@@ -237,7 +237,9 @@ describe('HermioneTestAdapter', () => {
                     name: 'ImageDiffError',
                     refImg: {path: 'ref-path', size: {width: 25, height: 15}},
                     stack: 'some-stack',
-                    stateName: 'some-state'
+                    stateName: 'some-state',
+                    differentPixels: 100,
+                    diffRatio: 0.01
                 }]
             });
 
@@ -251,7 +253,9 @@ describe('HermioneTestAdapter', () => {
                     expectedImg: {path: 'ref-path', size: {height: 15, width: 25}},
                     refImg: {path: 'ref-path', size: {height: 15, width: 25}},
                     diffClusters: [],
-                    diffOptions: {diffColor: '#000'} as any
+                    diffOptions: {diffColor: '#000'} as any,
+                    differentPixels: 100,
+                    diffRatio: 0.01
                 }
             ]);
         });