Merge branch 'himkp-jest-image-diffs' into 'master'

Migrate spec/javascripts/image_diff tests to Jest

Closes #194239

See merge request gitlab-org/gitlab!31359

app/assets/javascripts/image_diff/helpers/badge_helper.js

@@ -15,7 +15,7 @@ export function createImageBadge(noteId, { x, y }, classNames = []) {
 
 export function addImageBadge(containerEl, { coordinate, badgeText, noteId }) {
   const buttonEl = createImageBadge(noteId, coordinate, ['badge', 'badge-pill']);
-  buttonEl.innerText = badgeText;
+  buttonEl.textContent = badgeText;
 
   containerEl.appendChild(buttonEl);
 }
@@ -32,6 +32,6 @@ export function addAvatarBadge(el, event) {
 
   // Add badge to new comment
   const avatarBadgeEl = el.querySelector(`#${noteId} .badge`);
-  avatarBadgeEl.innerText = badgeNumber;
+  avatarBadgeEl.textContent = badgeNumber;
   avatarBadgeEl.classList.remove('hidden');
 }

app/assets/javascripts/image_diff/helpers/dom_helper.js

@@ -11,12 +11,12 @@ export function setPositionDataAttribute(el, options) {
 
 export function updateDiscussionAvatarBadgeNumber(discussionEl, newBadgeNumber) {
   const avatarBadgeEl = discussionEl.querySelector('.image-diff-avatar-link .badge');
-  avatarBadgeEl.innerText = newBadgeNumber;
+  avatarBadgeEl.textContent = newBadgeNumber;
 }
 
 export function updateDiscussionBadgeNumber(discussionEl, newBadgeNumber) {
   const discussionBadgeEl = discussionEl.querySelector('.badge');
-  discussionBadgeEl.innerText = newBadgeNumber;
+  discussionBadgeEl.textContent = newBadgeNumber;
 }
 
 export function toggleCollapsed(event) {

app/assets/javascripts/image_diff/image_diff.js

@@ -128,7 +128,7 @@ export default class ImageDiff {
           const updatedBadgeNumber = index;
           const discussionEl = this.el.querySelector(`#discussion_${discussionId}`);
 
-          imageBadgeEls[index].innerText = updatedBadgeNumber;
+          imageBadgeEls[index].textContent = updatedBadgeNumber;
 
           imageDiffHelper.updateDiscussionBadgeNumber(discussionEl, updatedBadgeNumber);
           imageDiffHelper.updateDiscussionAvatarBadgeNumber(discussionEl, updatedBadgeNumber);

spec/javascripts/image_diff/helpers/badge_helper_spec.js → spec/frontend/image_diff/helpers/badge_helper_spec.js

@@ -66,7 +66,7 @@ describe('badge helper', () => {
     });
 
     it('should set the badge text', () => {
-      expect(buttonEl.innerText).toEqual(badgeText);
+      expect(buttonEl.textContent).toEqual(badgeText);
     });
 
     it('should set the button coordinates', () => {
@@ -120,7 +120,7 @@ describe('badge helper', () => {
     });
 
     it('should update badge number', () => {
-      expect(avatarBadgeEl.innerText).toEqual(badgeNumber.toString());
+      expect(avatarBadgeEl.textContent).toEqual(badgeNumber.toString());
     });
 
     it('should remove hidden class', () => {

spec/javascripts/image_diff/helpers/comment_indicator_helper_spec.js → spec/frontend/image_diff/helpers/comment_indicator_helper_spec.js

@@ -128,8 +128,8 @@ describe('commentIndicatorHelper', () => {
         currentTarget: containerEl.querySelector('button'),
       };
 
-      spyOn(event, 'stopPropagation');
-      spyOn(textAreaEl, 'focus');
+      jest.spyOn(event, 'stopPropagation').mockImplementation(() => {});
+      jest.spyOn(textAreaEl, 'focus').mockImplementation(() => {});
       commentIndicatorHelper.commentIndicatorOnClick(event);
     });
 

spec/javascripts/image_diff/helpers/dom_helper_spec.js → spec/frontend/image_diff/helpers/dom_helper_spec.js

@@ -44,7 +44,7 @@ describe('domHelper', () => {
     });
 
     it('should update avatar badge number', () => {
-      expect(discussionEl.querySelector('.badge').innerText).toEqual(badgeNumber.toString());
+      expect(discussionEl.querySelector('.badge').textContent).toEqual(badgeNumber.toString());
     });
   });
 
@@ -60,7 +60,7 @@ describe('domHelper', () => {
     });
 
     it('should update discussion badge number', () => {
-      expect(discussionEl.querySelector('.badge').innerText).toEqual(badgeNumber.toString());
+      expect(discussionEl.querySelector('.badge').textContent).toEqual(badgeNumber.toString());
     });
   });
 

spec/javascripts/image_diff/image_badge_spec.js → spec/frontend/image_diff/image_badge_spec.js

@@ -71,7 +71,7 @@ describe('ImageBadge', () => {
 
   describe('imageEl property is provided and not browser property', () => {
     beforeEach(() => {
-      spyOn(imageDiffHelper, 'resizeCoordinatesToImageElement').and.returnValue(true);
+      jest.spyOn(imageDiffHelper, 'resizeCoordinatesToImageElement').mockReturnValue(true);
     });
 
     it('should generate browser property', () => {

spec/javascripts/image_diff/image_diff_spec.js → spec/frontend/image_diff/image_diff_spec.js

@@ -75,7 +75,7 @@ describe('ImageDiff', () => {
 
   describe('init', () => {
     beforeEach(() => {
-      spyOn(ImageDiff.prototype, 'bindEvents').and.callFake(() => {});
+      jest.spyOn(ImageDiff.prototype, 'bindEvents').mockImplementation(() => {});
       imageDiff = new ImageDiff(element);
       imageDiff.init();
     });
@@ -97,19 +97,19 @@ describe('ImageDiff', () => {
     let imageEl;
 
     beforeEach(() => {
-      spyOn(imageDiffHelper, 'toggleCollapsed').and.callFake(() => {});
-      spyOn(imageDiffHelper, 'commentIndicatorOnClick').and.callFake(() => {});
-      spyOn(imageDiffHelper, 'removeCommentIndicator').and.callFake(() => {});
-      spyOn(ImageDiff.prototype, 'imageClicked').and.callFake(() => {});
-      spyOn(ImageDiff.prototype, 'addBadge').and.callFake(() => {});
-      spyOn(ImageDiff.prototype, 'removeBadge').and.callFake(() => {});
-      spyOn(ImageDiff.prototype, 'renderBadges').and.callFake(() => {});
+      jest.spyOn(imageDiffHelper, 'toggleCollapsed').mockImplementation(() => {});
+      jest.spyOn(imageDiffHelper, 'commentIndicatorOnClick').mockImplementation(() => {});
+      jest.spyOn(imageDiffHelper, 'removeCommentIndicator').mockImplementation(() => {});
+      jest.spyOn(ImageDiff.prototype, 'imageClicked').mockImplementation(() => {});
+      jest.spyOn(ImageDiff.prototype, 'addBadge').mockImplementation(() => {});
+      jest.spyOn(ImageDiff.prototype, 'removeBadge').mockImplementation(() => {});
+      jest.spyOn(ImageDiff.prototype, 'renderBadges').mockImplementation(() => {});
       imageEl = element.querySelector('.diff-file .js-image-frame img');
     });
 
     describe('default', () => {
       beforeEach(() => {
-        spyOn(imageUtility, 'isImageLoaded').and.returnValue(false);
+        jest.spyOn(imageUtility, 'isImageLoaded').mockReturnValue(false);
         imageDiff = new ImageDiff(element);
         imageDiff.imageEl = imageEl;
         imageDiff.bindEvents();
@@ -130,7 +130,7 @@ describe('ImageDiff', () => {
 
     describe('image not loaded', () => {
       beforeEach(() => {
-        spyOn(imageUtility, 'isImageLoaded').and.returnValue(false);
+        jest.spyOn(imageUtility, 'isImageLoaded').mockReturnValue(false);
         imageDiff = new ImageDiff(element);
         imageDiff.imageEl = imageEl;
         imageDiff.bindEvents();
@@ -146,7 +146,7 @@ describe('ImageDiff', () => {
 
     describe('canCreateNote', () => {
       beforeEach(() => {
-        spyOn(imageUtility, 'isImageLoaded').and.returnValue(false);
+        jest.spyOn(imageUtility, 'isImageLoaded').mockReturnValue(false);
         imageDiff = new ImageDiff(element, {
           canCreateNote: true,
         });
@@ -185,7 +185,7 @@ describe('ImageDiff', () => {
 
     describe('canCreateNote is false', () => {
       beforeEach(() => {
-        spyOn(imageUtility, 'isImageLoaded').and.returnValue(false);
+        jest.spyOn(imageUtility, 'isImageLoaded').mockReturnValue(false);
         imageDiff = new ImageDiff(element);
         imageDiff.imageEl = imageEl;
         imageDiff.bindEvents();
@@ -202,12 +202,12 @@ describe('ImageDiff', () => {
 
   describe('imageClicked', () => {
     beforeEach(() => {
-      spyOn(imageDiffHelper, 'getTargetSelection').and.returnValue({
+      jest.spyOn(imageDiffHelper, 'getTargetSelection').mockReturnValue({
         actual: {},
         browser: {},
       });
-      spyOn(imageDiffHelper, 'setPositionDataAttribute').and.callFake(() => {});
-      spyOn(imageDiffHelper, 'showCommentIndicator').and.callFake(() => {});
+      jest.spyOn(imageDiffHelper, 'setPositionDataAttribute').mockImplementation(() => {});
+      jest.spyOn(imageDiffHelper, 'showCommentIndicator').mockImplementation(() => {});
       imageDiff = new ImageDiff(element);
       imageDiff.imageClicked({
         detail: {
@@ -231,7 +231,7 @@ describe('ImageDiff', () => {
 
   describe('renderBadges', () => {
     beforeEach(() => {
-      spyOn(ImageDiff.prototype, 'renderBadge').and.callFake(() => {});
+      jest.spyOn(ImageDiff.prototype, 'renderBadge').mockImplementation(() => {});
       imageDiff = new ImageDiff(element);
       imageDiff.renderBadges();
     });
@@ -239,7 +239,7 @@ describe('ImageDiff', () => {
     it('should call renderBadge for each discussionEl', () => {
       const discussionEls = element.querySelectorAll('.note-container .discussion-notes .notes');
 
-      expect(imageDiff.renderBadge.calls.count()).toEqual(discussionEls.length);
+      expect(imageDiff.renderBadge.mock.calls.length).toEqual(discussionEls.length);
     });
   });
 
@@ -247,9 +247,9 @@ describe('ImageDiff', () => {
     let discussionEls;
 
     beforeEach(() => {
-      spyOn(imageDiffHelper, 'addImageBadge').and.callFake(() => {});
-      spyOn(imageDiffHelper, 'addImageCommentBadge').and.callFake(() => {});
-      spyOn(imageDiffHelper, 'generateBadgeFromDiscussionDOM').and.returnValue({
+      jest.spyOn(imageDiffHelper, 'addImageBadge').mockImplementation(() => {});
+      jest.spyOn(imageDiffHelper, 'addImageCommentBadge').mockImplementation(() => {});
+      jest.spyOn(imageDiffHelper, 'generateBadgeFromDiscussionDOM').mockReturnValue({
         browser: {},
         noteId: 'noteId',
       });
@@ -282,9 +282,9 @@ describe('ImageDiff', () => {
 
   describe('addBadge', () => {
     beforeEach(() => {
-      spyOn(imageDiffHelper, 'addImageBadge').and.callFake(() => {});
-      spyOn(imageDiffHelper, 'addAvatarBadge').and.callFake(() => {});
-      spyOn(imageDiffHelper, 'updateDiscussionBadgeNumber').and.callFake(() => {});
+      jest.spyOn(imageDiffHelper, 'addImageBadge').mockImplementation(() => {});
+      jest.spyOn(imageDiffHelper, 'addAvatarBadge').mockImplementation(() => {});
+      jest.spyOn(imageDiffHelper, 'updateDiscussionBadgeNumber').mockImplementation(() => {});
       imageDiff = new ImageDiff(element);
       imageDiff.imageFrameEl = element.querySelector('.diff-file .js-image-frame');
       imageDiff.addBadge({
@@ -320,8 +320,8 @@ describe('ImageDiff', () => {
     beforeEach(() => {
       const { imageMeta } = mockData;
 
-      spyOn(imageDiffHelper, 'updateDiscussionBadgeNumber').and.callFake(() => {});
-      spyOn(imageDiffHelper, 'updateDiscussionAvatarBadgeNumber').and.callFake(() => {});
+      jest.spyOn(imageDiffHelper, 'updateDiscussionBadgeNumber').mockImplementation(() => {});
+      jest.spyOn(imageDiffHelper, 'updateDiscussionAvatarBadgeNumber').mockImplementation(() => {});
       imageDiff = new ImageDiff(element);
       imageDiff.imageBadges = [imageMeta, imageMeta, imageMeta];
       imageDiff.imageFrameEl = element.querySelector('.diff-file .js-image-frame');
@@ -336,8 +336,8 @@ describe('ImageDiff', () => {
       it('should update next imageBadgeEl value', () => {
         const imageBadgeEls = imageDiff.imageFrameEl.querySelectorAll('.badge');
 
-        expect(imageBadgeEls[0].innerText).toEqual('1');
-        expect(imageBadgeEls[1].innerText).toEqual('2');
+        expect(imageBadgeEls[0].textContent).toEqual('1');
+        expect(imageBadgeEls[1].textContent).toEqual('2');
         expect(imageBadgeEls.length).toEqual(2);
       });
 

spec/javascripts/image_diff/replaced_image_diff_spec.js → spec/frontend/image_diff/replaced_image_diff_spec.js

@@ -76,8 +76,8 @@ describe('ReplacedImageDiff', () => {
 
   describe('init', () => {
     beforeEach(() => {
-      spyOn(ReplacedImageDiff.prototype, 'bindEvents').and.callFake(() => {});
-      spyOn(ReplacedImageDiff.prototype, 'generateImageEls').and.callFake(() => {});
+      jest.spyOn(ReplacedImageDiff.prototype, 'bindEvents').mockImplementation(() => {});
+      jest.spyOn(ReplacedImageDiff.prototype, 'generateImageEls').mockImplementation(() => {});
 
       replacedImageDiff = new ReplacedImageDiff(element);
       replacedImageDiff.init();
@@ -140,7 +140,7 @@ describe('ReplacedImageDiff', () => {
 
   describe('generateImageEls', () => {
     beforeEach(() => {
-      spyOn(ReplacedImageDiff.prototype, 'bindEvents').and.callFake(() => {});
+      jest.spyOn(ReplacedImageDiff.prototype, 'bindEvents').mockImplementation(() => {});
 
       replacedImageDiff = new ReplacedImageDiff(element, {
         canCreateNote: false,
@@ -163,7 +163,7 @@ describe('ReplacedImageDiff', () => {
 
   describe('bindEvents', () => {
     beforeEach(() => {
-      spyOn(ImageDiff.prototype, 'bindEvents').and.callFake(() => {});
+      jest.spyOn(ImageDiff.prototype, 'bindEvents').mockImplementation(() => {});
       replacedImageDiff = new ReplacedImageDiff(element);
 
       setupViewModesEls();
@@ -176,7 +176,7 @@ describe('ReplacedImageDiff', () => {
     });
 
     it('should register click eventlistener to 2-up view mode', done => {
-      spyOn(ReplacedImageDiff.prototype, 'changeView').and.callFake(viewMode => {
+      jest.spyOn(ReplacedImageDiff.prototype, 'changeView').mockImplementation(viewMode => {
         expect(viewMode).toEqual(viewTypes.TWO_UP);
         done();
       });
@@ -186,7 +186,7 @@ describe('ReplacedImageDiff', () => {
     });
 
     it('should register click eventlistener to swipe view mode', done => {
-      spyOn(ReplacedImageDiff.prototype, 'changeView').and.callFake(viewMode => {
+      jest.spyOn(ReplacedImageDiff.prototype, 'changeView').mockImplementation(viewMode => {
         expect(viewMode).toEqual(viewTypes.SWIPE);
         done();
       });
@@ -196,7 +196,7 @@ describe('ReplacedImageDiff', () => {
     });
 
     it('should register click eventlistener to onion skin view mode', done => {
-      spyOn(ReplacedImageDiff.prototype, 'changeView').and.callFake(viewMode => {
+      jest.spyOn(ReplacedImageDiff.prototype, 'changeView').mockImplementation(viewMode => {
         expect(viewMode).toEqual(viewTypes.SWIPE);
         done();
       });
@@ -247,7 +247,7 @@ describe('ReplacedImageDiff', () => {
   describe('changeView', () => {
     beforeEach(() => {
       replacedImageDiff = new ReplacedImageDiff(element);
-      spyOn(imageDiffHelper, 'removeCommentIndicator').and.returnValue({
+      jest.spyOn(imageDiffHelper, 'removeCommentIndicator').mockReturnValue({
         removed: false,
       });
       setupImageFrameEls();
@@ -265,13 +265,12 @@ describe('ReplacedImageDiff', () => {
 
     describe('valid viewType', () => {
       beforeEach(() => {
-        jasmine.clock().install();
-        spyOn(ReplacedImageDiff.prototype, 'renderNewView').and.callFake(() => {});
+        jest.spyOn(ReplacedImageDiff.prototype, 'renderNewView').mockImplementation(() => {});
         replacedImageDiff.changeView(viewTypes.ONION_SKIN);
       });
 
       afterEach(() => {
-        jasmine.clock().uninstall();
+        jest.clearAllTimers();
       });
 
       it('should call removeCommentIndicator', () => {
@@ -287,7 +286,7 @@ describe('ReplacedImageDiff', () => {
       });
 
       it('should call renderNewView', () => {
-        jasmine.clock().tick(251);
+        jest.advanceTimersByTime(251);
 
         expect(replacedImageDiff.renderNewView).toHaveBeenCalled();
       });
@@ -300,7 +299,7 @@ describe('ReplacedImageDiff', () => {
     });
 
     it('should call renderBadges', () => {
-      spyOn(ReplacedImageDiff.prototype, 'renderBadges').and.callFake(() => {});
+      jest.spyOn(ReplacedImageDiff.prototype, 'renderBadges').mockImplementation(() => {});
 
       replacedImageDiff.renderNewView({
         removed: false,
@@ -326,14 +325,16 @@ describe('ReplacedImageDiff', () => {
       });
 
       it('should pass showCommentIndicator normalized indicator values', done => {
-        spyOn(imageDiffHelper, 'showCommentIndicator').and.callFake(() => {});
-        spyOn(imageDiffHelper, 'resizeCoordinatesToImageElement').and.callFake((imageEl, meta) => {
-          expect(meta.x).toEqual(indicator.x);
-          expect(meta.y).toEqual(indicator.y);
-          expect(meta.width).toEqual(indicator.image.width);
-          expect(meta.height).toEqual(indicator.image.height);
-          done();
-        });
+        jest.spyOn(imageDiffHelper, 'showCommentIndicator').mockImplementation(() => {});
+        jest
+          .spyOn(imageDiffHelper, 'resizeCoordinatesToImageElement')
+          .mockImplementation((imageEl, meta) => {
+            expect(meta.x).toEqual(indicator.x);
+            expect(meta.y).toEqual(indicator.y);
+            expect(meta.width).toEqual(indicator.image.width);
+            expect(meta.height).toEqual(indicator.image.height);
+            done();
+          });
         replacedImageDiff.renderNewView(indicator);
       });
 
@@ -341,13 +342,13 @@ describe('ReplacedImageDiff', () => {
         const normalized = {
           normalized: true,
         };
-        spyOn(imageDiffHelper, 'resizeCoordinatesToImageElement').and.returnValue(normalized);
-        spyOn(imageDiffHelper, 'showCommentIndicator').and.callFake(
-          (imageFrameEl, normalizedIndicator) => {
+        jest.spyOn(imageDiffHelper, 'resizeCoordinatesToImageElement').mockReturnValue(normalized);
+        jest
+          .spyOn(imageDiffHelper, 'showCommentIndicator')
+          .mockImplementation((imageFrameEl, normalizedIndicator) => {
             expect(normalizedIndicator).toEqual(normalized);
             done();
-          },
-        );
+          });
         replacedImageDiff.renderNewView(indicator);
       });
     });