Merge pull request #475 from gemini-testing/HERMIONE-1023.3-up_scaled…

…_to_fit_diff_bubble fix: 3-up scaled to fit diff bubble
gemini-testing · May 30, 2023 · 04a01c4 · 04a01c4
2 parents 3490295 + 58aefb8
commit 04a01c4
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 4 deletions.
diff --git a/lib/static/components/state/screenshot/diff-circle.js b/lib/static/components/state/screenshot/diff-circle.js
@@ -7,16 +7,17 @@ import {CIRCLE_RADIUS} from '../../../../constants/defaults';
 
 export default class DiffCircle extends Component {
     static propTypes = {
+        originalImageWidth: PropTypes.number.isRequired,
         diffTarget: PropTypes.object.isRequired,
         diffBounds: PropTypes.object.isRequired,
         display: PropTypes.bool.isRequired,
         toggleDiff: PropTypes.func.isRequired
     };
 
     _getRect() {
-        const {diffBounds, diffTarget} = this.props;
+        const {originalImageWidth, diffBounds, diffTarget} = this.props;
         const targetRect = diffTarget.getBoundingClientRect();
-        const sizeCoeff = diffTarget.offsetWidth / parseInt(diffTarget.style.width);
+        const sizeCoeff = diffTarget.offsetWidth / originalImageWidth;
 
         const rectHeight = Math.ceil(sizeCoeff * (diffBounds.bottom - diffBounds.top + 1));
         const rectWidth = Math.ceil(sizeCoeff * (diffBounds.right - diffBounds.left + 1));

diff --git a/lib/static/components/state/screenshot/resized.js b/lib/static/components/state/screenshot/resized.js
@@ -33,6 +33,7 @@ class ResizedScreenshot extends Component {
     _getScreenshotComponent(elem, diffClusters) {
         return <Fragment>
             {diffClusters && diffClusters.map((c, id) => <DiffCircle
+                originalImageWidth={this.props.image.size.width}
                 diffTarget={this.state.diffTarget}
                 display={this.state.showDiffCircle}
                 toggleDiff={this.toggleDiff}

diff --git a/test/unit/lib/static/components/state/screenshot/diff-circle.js b/test/unit/lib/static/components/state/screenshot/diff-circle.js
@@ -10,7 +10,8 @@ describe('DiffCircle component', () => {
     it('should set "debounce" option', () => {
         const stateComponent = mkConnectedComponent(
             <DiffCircle
-                diffTarget = {{offsetWidth: 10, style: {width: 10}, getBoundingClientRect: () => ({left: 10, top: 10})}}
+                originalImageWidth = {10}
+                diffTarget = {{offsetWidth: 10, getBoundingClientRect: () => ({left: 10, top: 10})}}
                 diffBounds = {{left: 5, top: 5, right: 5, bottom: 5}}
                 display = {true}
                 toggleDiff = {() => {}}
@@ -26,7 +27,8 @@ describe('DiffCircle component', () => {
         const toggleDiff = sandbox.stub();
         const stateComponent = mkConnectedComponent(
             <DiffCircle
-                diffTarget = {{offsetWidth: 30, style: {width: 10}, getBoundingClientRect: () => ({left: 10, top: 10})}}
+                originalImageWidth = {10}
+                diffTarget = {{offsetWidth: 30, getBoundingClientRect: () => ({left: 10, top: 10})}}
                 diffBounds = {{left: 5, top: 5, right: 5, bottom: 5}}
                 display = {true}
                 toggleDiff = {toggleDiff}