feat: display differentPixels, if available

Author: KuznetsovRoman

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 {

lib/static/components/state/index.jsx

@@ -125,7 +125,19 @@ class State extends Component {
         );
     }
 
-    _getStateTitle() {
+    _getDisplayedDiffPercentValue() {
+        const percent = this.props.image.diffRatio * 100;
+        const percentRounded = Math.ceil(percent * 100) / 100;
+        const percentThreshold = 0.01;
+
+        if (percent < percentThreshold) {
+            return `< ${percentThreshold}`
+        }
+
+        return String(percentRounded);
+    }
+
+    _getStateTitleWithDiffCount() {
         const {image, shouldImageBeOpened} = this.props;
 
         if (!image.stateName) {
@@ -138,15 +150,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();
+
+            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 +188,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}

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 {

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 {

package-lock.json

@@ -138,7 +138,7 @@
     "eslint-plugin-react": "^7.32.2",
     "events": "^3.3.0",
     "fork-ts-checker-webpack-plugin": "^9.0.0",
-    "hermione": "^8.0.5",
+    "hermione": "^8.2.1",
     "hermione-global-hook": "^1.0.1",
     "hermione-test-repeater": "^0.0.8",
     "html-react-parser": "^0.4.0",

package.json

@@ -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
                 }
             ]);
         });