Merge branch '349389-fix-image-diff-saving' into 'master'

Fix occasional failure of adding image diff note

See merge request gitlab-org/gitlab!77864

app/assets/javascripts/diffs/components/image_diff_overlay.vue

@@ -4,8 +4,8 @@ import { isArray } from 'lodash';
 import { mapActions, mapGetters } from 'vuex';
 import imageDiffMixin from 'ee_else_ce/diffs/mixins/image_diff';
 
-function calcPercent(pos, size, renderedSize) {
-  return (((pos / size) * 100) / ((renderedSize / size) * 100)) * 100;
+function calcPercent(pos, renderedSize) {
+  return (100 * pos) / renderedSize;
 }
 
 export default {
@@ -65,8 +65,8 @@ export default {
     ...mapActions('diffs', ['openDiffFileCommentForm']),
     getImageDimensions() {
       return {
-        width: this.$parent.width,
-        height: this.$parent.height,
+        width: Math.round(this.$parent.width),
+        height: Math.round(this.$parent.height),
       };
     },
     getPositionForObject(meta) {
@@ -87,15 +87,15 @@ export default {
     },
     clickedImage(x, y) {
       const { width, height } = this.getImageDimensions();
-      const xPercent = calcPercent(x, width, this.renderedWidth);
-      const yPercent = calcPercent(y, height, this.renderedHeight);
+      const xPercent = calcPercent(x, this.renderedWidth);
+      const yPercent = calcPercent(y, this.renderedHeight);
 
       this.openDiffFileCommentForm({
         fileHash: this.fileHash,
         width,
         height,
-        x: width * (xPercent / 100),
-        y: height * (yPercent / 100),
+        x: Math.round(width * (xPercent / 100)),
+        y: Math.round(height * (yPercent / 100)),
         xPercent,
         yPercent,
       });

spec/frontend/diffs/components/image_diff_overlay_spec.js

@@ -6,8 +6,8 @@ import { imageDiffDiscussions } from '../mock_data/diff_discussions';
 
 describe('Diffs image diff overlay component', () => {
   const dimensions = {
-    width: 100,
-    height: 200,
+    width: 99.9,
+    height: 199.5,
   };
   let wrapper;
   let dispatch;
@@ -38,7 +38,6 @@ describe('Diffs image diff overlay component', () => {
 
   afterEach(() => {
     wrapper.destroy();
-    wrapper = null;
   });
 
   it('renders comment badges', () => {
@@ -81,17 +80,21 @@ describe('Diffs image diff overlay component', () => {
 
   it('dispatches openDiffFileCommentForm when clicking overlay', () => {
     createComponent({ canComment: true });
-    wrapper.find('.js-add-image-diff-note-button').trigger('click', { offsetX: 0, offsetY: 0 });
+    wrapper.find('.js-add-image-diff-note-button').trigger('click', { offsetX: 1.2, offsetY: 3.8 });
 
     expect(dispatch).toHaveBeenCalledWith('diffs/openDiffFileCommentForm', {
       fileHash: 'ABC',
-      x: 0,
-      y: 0,
+      x: 1,
+      y: 4,
       width: 100,
       height: 200,
-      xPercent: 0,
-      yPercent: 0,
+      xPercent: expect.any(Number),
+      yPercent: expect.any(Number),
     });
+
+    const { xPercent, yPercent } = dispatch.mock.calls[0][1];
+    expect(xPercent).toBeCloseTo(0.6);
+    expect(yPercent).toBeCloseTo(1.9);
   });
 
   describe('toggle discussion', () => {