1 files changed, 10 insertions, 4 deletions
diff --git a/spec/frontend/diffs/components/image_diff_overlay_spec.js b/spec/frontend/diffs/components/image_diff_overlay_spec.js
index 5a88a3cabd1..087715111b4 100644
--- a/spec/frontend/diffs/components/image_diff_overlay_spec.js
+++ b/spec/frontend/diffs/components/image_diff_overlay_spec.js
@@ -24,6 +24,8 @@ describe('Diffs image diff overlay component', () => {
       propsData: {
         discussions: [...imageDiffDiscussions],
         fileHash: 'ABC',
+        renderedWidth: 200,
+        renderedHeight: 200,
         ...props,
       },
       methods: {
@@ -71,8 +73,8 @@ describe('Diffs image diff overlay component', () => {
     createComponent();
     const imageBadges = getAllImageBadges();
 
-    expect(imageBadges.at(0).attributes('style')).toBe('left: 10px; top: 10px;');
-    expect(imageBadges.at(1).attributes('style')).toBe('left: 5px; top: 5px;');
+    expect(imageBadges.at(0).attributes('style')).toBe('left: 10%; top: 5%;');
+    expect(imageBadges.at(1).attributes('style')).toBe('left: 5%; top: 2.5%;');
   });
 
   it('renders single badge for discussion object', () => {
@@ -95,6 +97,8 @@ describe('Diffs image diff overlay component', () => {
       y: 0,
       width: 100,
       height: 200,
+      xPercent: 0,
+      yPercent: 0,
     });
   });
 
@@ -120,11 +124,13 @@ describe('Diffs image diff overlay component', () => {
   describe('comment form', () => {
     const getCommentIndicator = () => wrapper.find('.comment-indicator');
     beforeEach(() => {
-      createComponent({}, store => {
+      createComponent({ canComment: true }, store => {
         store.state.diffs.commentForms.push({
           fileHash: 'ABC',
           x: 20,
           y: 10,
+          xPercent: 10,
+          yPercent: 10,
         });
       });
     });
@@ -134,7 +140,7 @@ describe('Diffs image diff overlay component', () => {
     });
 
     it('sets comment form badge position', () => {
-      expect(getCommentIndicator().attributes('style')).toBe('left: 20px; top: 10px;');
+      expect(getCommentIndicator().attributes('style')).toBe('left: 10%; top: 10%;');
     });
   });
 });