Add javascript unit testsch-add-specs

15 files changed, 1533 insertions, 47 deletions

diff --git a/app/assets/javascripts/image_diff/helpers/utils_helper.js b/app/assets/javascripts/image_diff/helpers/utils_helper.js
index d0cd42df073..4015f2db187 100644
--- a/app/assets/javascripts/image_diff/helpers/utils_helper.js
+++ b/app/assets/javascripts/image_diff/helpers/utils_helper.js
@@ -1,6 +1,7 @@
 import ImageBadge from '../image_badge';
 import ImageDiff from '../image_diff';
 import ReplacedImageDiff from '../replaced_image_diff';
+import '../../commit/image_file';
 
 export function resizeCoordinatesToImageElement(imageEl, meta) {
   const { x, y, width, height } = meta;
@@ -76,7 +77,7 @@ export function getTargetSelection(event) {
   };
 }
 
-export function initImageDiff(file, canCreateNote, renderCommentBadge) {
+export function initImageDiff(fileEl, canCreateNote, renderCommentBadge) {
   const options = {
     canCreateNote,
     renderCommentBadge,
@@ -84,13 +85,19 @@ export function initImageDiff(file, canCreateNote, renderCommentBadge) {
 
   // ImageFile needs to be invoked before initImageDiff so that badges
   // can mount to the correct location
-  new gl.ImageFile(file); // eslint-disable-line no-new
+  new gl.ImageFile(fileEl); // eslint-disable-line no-new
 
-  if (file.querySelector('.diff-file .js-single-image')) {
-    const imageDiff = new ImageDiff(file, options);
+  if (fileEl.querySelector('.diff-file .js-single-image')) {
+    const imageDiff = new ImageDiff(fileEl, options);
     imageDiff.init();
-  } else if (file.querySelector('.diff-file .js-replaced-image')) {
-    const replacedImageDiff = new ReplacedImageDiff(file, options);
+
+    return imageDiff;
+  } else if (fileEl.querySelector('.diff-file .js-replaced-image')) {
+    const replacedImageDiff = new ReplacedImageDiff(fileEl, options);
     replacedImageDiff.init();
+
+    return replacedImageDiff;
   }
+
+  return null;
 }
diff --git a/app/assets/javascripts/image_diff/image_diff.js b/app/assets/javascripts/image_diff/image_diff.js
index 64af534eeb4..e171319cb1a 100644
--- a/app/assets/javascripts/image_diff/image_diff.js
+++ b/app/assets/javascripts/image_diff/image_diff.js
@@ -23,7 +23,7 @@ export default class ImageDiff {
 
   bindEvents() {
     this.imageClickedWrapper = this.imageClicked.bind(this);
-    this.imageBlurredWrapper = this.imageBlurred.bind(this);
+    this.imageBlurredWrapper = imageDiffHelper.removeCommentIndicator.bind(null, this.imageFrameEl);
     this.addBadgeWrapper = this.addBadge.bind(this);
     this.removeBadgeWrapper = this.removeBadge.bind(this);
     this.renderBadgesWrapper = this.renderBadges.bind(this);
@@ -56,34 +56,31 @@ export default class ImageDiff {
     imageDiffHelper.showCommentIndicator(this.imageFrameEl, selection.browser);
   }
 
-  imageBlurred() {
-    return imageDiffHelper.removeCommentIndicator(this.imageFrameEl);
-  }
-
   renderBadges() {
     const discussionsEls = this.el.querySelectorAll('.note-container .discussion-notes .notes');
+    [...discussionsEls].forEach(this.renderBadge);
+  }
 
-    [...discussionsEls].forEach((discussionEl, index) => {
-      const imageBadge = imageDiffHelper
-        .generateBadgeFromDiscussionDOM(this.imageFrameEl, discussionEl);
+  renderBadge(discussionEl, index) {
+    const imageBadge = imageDiffHelper
+      .generateBadgeFromDiscussionDOM(this.imageFrameEl, discussionEl);
 
-      this.imageBadges.push(imageBadge);
+    this.imageBadges.push(imageBadge);
 
-      const options = {
-        coordinate: imageBadge.browser,
-        noteId: imageBadge.noteId,
-      };
+    const options = {
+      coordinate: imageBadge.browser,
+      noteId: imageBadge.noteId,
+    };
 
-      if (this.renderCommentBadge) {
-        imageDiffHelper.addImageCommentBadge(this.imageFrameEl, options);
-      } else {
-        const numberBadgeOptions = Object.assign(options, {
-          badgeText: index + 1,
-        });
+    if (this.renderCommentBadge) {
+      imageDiffHelper.addImageCommentBadge(this.imageFrameEl, options);
+    } else {
+      const numberBadgeOptions = Object.assign(options, {
+        badgeText: index + 1,
+      });
 
-        imageDiffHelper.addImageBadge(this.imageFrameEl, numberBadgeOptions);
-      }
-    });
+      imageDiffHelper.addImageBadge(this.imageFrameEl, numberBadgeOptions);
+    }
   }
 
   addBadge(event) {
diff --git a/app/assets/javascripts/image_diff/replaced_image_diff.js b/app/assets/javascripts/image_diff/replaced_image_diff.js
index 5c7e4d5e5a6..4abd13fb472 100644
--- a/app/assets/javascripts/image_diff/replaced_image_diff.js
+++ b/app/assets/javascripts/image_diff/replaced_image_diff.js
@@ -70,21 +70,23 @@ export default class ReplacedImageDiff extends ImageDiff {
     // Image_file.js has a fade animation of 200ms for loading the view
     // Need to wait an additional 250ms for the images to be displayed
     // on window in order to re-normalize their dimensions
-    setTimeout(() => {
-      // Generate badge coordinates on new view
-      this.renderBadges();
-
-      // Re-render indicator in new view
-      if (indicator.removed) {
-        const normalizedIndicator = imageDiffHelper
-          .resizeCoordinatesToImageElement(this.imageEl, {
-            x: indicator.x,
-            y: indicator.y,
-            width: indicator.image.width,
-            height: indicator.image.height,
-          });
-        imageDiffHelper.showCommentIndicator(this.imageFrameEl, normalizedIndicator);
-      }
-    }, 250);
+    setTimeout(this.renderNewView.bind(this, indicator), 250);
+  }
+
+  renderNewView(indicator) {
+    // Generate badge coordinates on new view
+    this.renderBadges();
+
+    // Re-render indicator in new view
+    if (indicator.removed) {
+      const normalizedIndicator = imageDiffHelper
+        .resizeCoordinatesToImageElement(this.imageEl, {
+          x: indicator.x,
+          y: indicator.y,
+          width: indicator.image.width,
+          height: indicator.image.height,
+        });
+      imageDiffHelper.showCommentIndicator(this.imageFrameEl, normalizedIndicator);
+    }
   }
 }
diff --git a/app/assets/javascripts/image_diff/view_types.js b/app/assets/javascripts/image_diff/view_types.js
index 2bcfe05420a..ab0a595571f 100644
--- a/app/assets/javascripts/image_diff/view_types.js
+++ b/app/assets/javascripts/image_diff/view_types.js
@@ -5,5 +5,5 @@ export const viewTypes = {
 };
 
 export function isValidViewType(validate) {
-  return Object.getOwnPropertyNames(viewTypes).find(viewType => viewType === validate);
+  return !!Object.getOwnPropertyNames(viewTypes).find(viewType => viewType === validate);
 }
diff --git a/app/assets/javascripts/lib/utils/image_utility.js b/app/assets/javascripts/lib/utils/image_utility.js
index f906e595cc7..2977ec821cb 100644
--- a/app/assets/javascripts/lib/utils/image_utility.js
+++ b/app/assets/javascripts/lib/utils/image_utility.js
@@ -1,3 +1,5 @@
 /* eslint-disable import/prefer-default-export */
 
-export const isImageLoaded = element => element.complete && element.naturalHeight !== 0;
+export function isImageLoaded(element) {
+  return element.complete && element.naturalHeight !== 0;
+}
diff --git a/app/assets/javascripts/notes.js b/app/assets/javascripts/notes.js
index 3935407f661..5898ce65c5b 100644
--- a/app/assets/javascripts/notes.js
+++ b/app/assets/javascripts/notes.js
@@ -1482,7 +1482,7 @@ export default class Notes {
         // Submission successful! remove placeholder
         $notesContainer.find(`#${noteUniqueId}`).remove();
 
-        let $diffFile = $form.closest('.diff-file');
+        const $diffFile = $form.closest('.diff-file');
         if ($diffFile.length > 0) {
           const blurEvent = new CustomEvent('blur.imageDiff', {
             detail: e,
diff --git a/spec/javascripts/image_diff/helpers/badge_helper_spec.js b/spec/javascripts/image_diff/helpers/badge_helper_spec.js
new file mode 100644
index 00000000000..e165d5aad16
--- /dev/null
+++ b/spec/javascripts/image_diff/helpers/badge_helper_spec.js
@@ -0,0 +1,139 @@
+import * as badgeHelper from '~/image_diff/helpers/badge_helper';
+
+describe('badge helper', () => {
+  const noteId = 'noteId';
+  const coordinate = {
+    x: 0,
+    y: 1,
+  };
+
+  let containerEl;
+  let buttonEl;
+
+  beforeEach(() => {
+    containerEl = document.createElement('div');
+  });
+
+  describe('createImageBadge', () => {
+    beforeEach(() => {
+      buttonEl = badgeHelper.createImageBadge(noteId, coordinate);
+    });
+
+    it('should create button', () => {
+      expect(buttonEl.tagName).toEqual('BUTTON');
+      expect(buttonEl.getAttribute('type')).toEqual('button');
+    });
+
+    it('should set disabled attribute', () => {
+      expect(buttonEl.hasAttribute('disabled')).toEqual(true);
+    });
+
+    it('should set noteId', () => {
+      expect(buttonEl.dataset.noteId).toEqual(noteId);
+    });
+
+    it('should set coordinate', () => {
+      expect(buttonEl.style.left).toEqual(`${coordinate.x}px`);
+      expect(buttonEl.style.top).toEqual(`${coordinate.y}px`);
+    });
+
+    describe('classNames', () => {
+      it('should set .js-image-badge by default', () => {
+        expect(buttonEl.className).toEqual('js-image-badge');
+      });
+
+      it('should add additional class names if parameter is passed', () => {
+        const classNames = ['first-class', 'second-class'];
+        buttonEl = badgeHelper.createImageBadge(noteId, coordinate, classNames);
+
+        expect(buttonEl.className).toEqual(classNames.concat('js-image-badge').join(' '));
+      });
+    });
+  });
+
+  describe('addImageBadge', () => {
+    const badgeText = 'badgeText';
+
+    beforeEach(() => {
+      badgeHelper.addImageBadge(containerEl, {
+        coordinate,
+        badgeText,
+        noteId,
+      });
+      buttonEl = containerEl.querySelector('button');
+    });
+
+    it('should appends button to container', () => {
+      expect(buttonEl).toBeDefined();
+    });
+
+    it('should set the badge text', () => {
+      expect(buttonEl.innerText).toEqual(badgeText);
+    });
+
+    it('should set the button coordinates', () => {
+      expect(buttonEl.style.left).toEqual(`${coordinate.x}px`);
+      expect(buttonEl.style.top).toEqual(`${coordinate.y}px`);
+    });
+
+    it('should set the button noteId', () => {
+      expect(buttonEl.dataset.noteId).toEqual(noteId);
+    });
+  });
+
+  describe('addImageCommentBadge', () => {
+    beforeEach(() => {
+      badgeHelper.addImageCommentBadge(containerEl, {
+        coordinate,
+        noteId,
+      });
+      buttonEl = containerEl.querySelector('button');
+    });
+
+    it('should append icon button to container', () => {
+      expect(buttonEl).toBeDefined();
+    });
+
+    it('should create icon comment button', () => {
+      const iconEl = buttonEl.querySelector('i');
+      expect(iconEl).toBeDefined();
+      expect(iconEl.classList.contains('fa')).toEqual(true);
+      expect(iconEl.classList.contains('fa-comment-o')).toEqual(true);
+    });
+
+    it('should have .image-comment-badge.inverted in button class', () => {
+      expect(buttonEl.classList.contains('image-comment-badge')).toEqual(true);
+      expect(buttonEl.classList.contains('inverted')).toEqual(true);
+    });
+  });
+
+  describe('addAvatarBadge', () => {
+    const badgeNumber = 5;
+    let avatarBadgeEl;
+
+    beforeEach(() => {
+      containerEl.innerHTML = `
+        <div id="${noteId}">
+          <div class="badge hidden">
+          </div>
+        </div>
+      `;
+
+      badgeHelper.addAvatarBadge(containerEl, {
+        detail: {
+          noteId,
+          badgeNumber,
+        },
+      });
+      avatarBadgeEl = containerEl.querySelector(`#${noteId} .badge`);
+    });
+
+    it('should update badge number', () => {
+      expect(avatarBadgeEl.innerText).toEqual(badgeNumber.toString());
+    });
+
+    it('should remove hidden class', () => {
+      expect(avatarBadgeEl.classList.contains('hidden')).toEqual(false);
+    });
+  });
+});
diff --git a/spec/javascripts/image_diff/helpers/comment_indicator_helper_spec.js b/spec/javascripts/image_diff/helpers/comment_indicator_helper_spec.js
new file mode 100644
index 00000000000..766f99bfc08
--- /dev/null
+++ b/spec/javascripts/image_diff/helpers/comment_indicator_helper_spec.js
@@ -0,0 +1,142 @@
+import * as commentIndicatorHelper from '~/image_diff/helpers/comment_indicator_helper';
+
+describe('commentIndicatorHelper', () => {
+  const coordinate = {
+    x: 0,
+    y: 1,
+  };
+
+  let containerEl;
+
+  beforeEach(() => {
+    containerEl = document.createElement('div');
+  });
+
+  describe('addCommentIndicator', () => {
+    let buttonEl;
+
+    beforeEach(() => {
+      commentIndicatorHelper.addCommentIndicator(containerEl, coordinate);
+      buttonEl = containerEl.querySelector('button');
+    });
+
+    it('should append button to container', () => {
+      expect(buttonEl).toBeDefined();
+    });
+
+    describe('button', () => {
+      it('should set coordinate', () => {
+        expect(buttonEl.style.left).toEqual(`${coordinate.x}px`);
+        expect(buttonEl.style.top).toEqual(`${coordinate.y}px`);
+      });
+
+      it('should contain image-comment-dark svg', () => {
+        const svgEl = buttonEl.querySelector('svg');
+        expect(svgEl).toBeDefined();
+
+        const svgLink = svgEl.querySelector('use').getAttribute('xlink:href');
+        expect(svgLink.indexOf('image-comment-dark') !== -1).toEqual(true);
+      });
+    });
+  });
+
+  describe('removeCommentIndicator', () => {
+    it('should return removed false if there is no comment-indicator', () => {
+      const result = commentIndicatorHelper.removeCommentIndicator(containerEl);
+      expect(result.removed).toEqual(false);
+    });
+
+    describe('has comment indicator', () => {
+      let result;
+
+      beforeEach(() => {
+        containerEl.innerHTML = `
+          <div class="comment-indicator" style="left:${coordinate.x}px; top: ${coordinate.y}px;">
+            <img src="${gl.TEST_HOST}/image.png">
+          </div>
+        `;
+        result = commentIndicatorHelper.removeCommentIndicator(containerEl);
+      });
+
+      it('should remove comment indicator', () => {
+        expect(containerEl.querySelector('.comment-indicator')).toBeNull();
+      });
+
+      it('should return removed true', () => {
+        expect(result.removed).toEqual(true);
+      });
+
+      it('should return indicator meta', () => {
+        expect(result.x).toEqual(coordinate.x);
+        expect(result.y).toEqual(coordinate.y);
+        expect(result.image).toBeDefined();
+        expect(result.image.width).toBeDefined();
+        expect(result.image.height).toBeDefined();
+      });
+    });
+  });
+
+  describe('showCommentIndicator', () => {
+    describe('commentIndicator exists', () => {
+      beforeEach(() => {
+        containerEl.innerHTML = `
+          <button class="comment-indicator"></button>
+        `;
+        commentIndicatorHelper.showCommentIndicator(containerEl, coordinate);
+      });
+
+      it('should set commentIndicator coordinates', () => {
+        const commentIndicatorEl = containerEl.querySelector('.comment-indicator');
+        expect(commentIndicatorEl.style.left).toEqual(`${coordinate.x}px`);
+        expect(commentIndicatorEl.style.top).toEqual(`${coordinate.y}px`);
+      });
+    });
+
+    describe('commentIndicator does not exist', () => {
+      beforeEach(() => {
+        commentIndicatorHelper.showCommentIndicator(containerEl, coordinate);
+      });
+
+      it('should addCommentIndicator', () => {
+        const buttonEl = containerEl.querySelector('.comment-indicator');
+        expect(buttonEl).toBeDefined();
+        expect(buttonEl.style.left).toEqual(`${coordinate.x}px`);
+        expect(buttonEl.style.top).toEqual(`${coordinate.y}px`);
+      });
+    });
+  });
+
+  describe('commentIndicatorOnClick', () => {
+    let event;
+    let textAreaEl;
+
+    beforeEach(() => {
+      containerEl.innerHTML = `
+        <div class="diff-viewer">
+          <button></button>
+          <div class="note-container">
+            <textarea class="note-textarea"></textarea>
+          </div>
+        </div>
+      `;
+      textAreaEl = containerEl.querySelector('textarea');
+
+      event = {
+        stopPropagation: () => {},
+        currentTarget: containerEl.querySelector('button'),
+      };
+
+      spyOn(event, 'stopPropagation');
+      spyOn(textAreaEl, 'focus');
+      commentIndicatorHelper.commentIndicatorOnClick(event);
+    });
+
+    it('should stopPropagation', () => {
+      expect(event.stopPropagation).toHaveBeenCalled();
+    });
+
+    it('should focus textAreaEl', () => {
+      expect(textAreaEl.focus).toHaveBeenCalled();
+    });
+  });
+});
diff --git a/spec/javascripts/image_diff/helpers/dom_helper_spec.js b/spec/javascripts/image_diff/helpers/dom_helper_spec.js
new file mode 100644
index 00000000000..b036376ac51
--- /dev/null
+++ b/spec/javascripts/image_diff/helpers/dom_helper_spec.js
@@ -0,0 +1,123 @@
+import * as domHelper from '~/image_diff/helpers/dom_helper';
+
+describe('domHelper', () => {
+  describe('setPositionDataAttribute', () => {
+    let containerEl;
+    let attributeAfterCall;
+    const position = {
+      myProperty: 'myProperty',
+    };
+    const options = {
+      x: 0,
+      y: 1,
+      width: 10,
+      height: 11,
+    };
+
+    beforeEach(() => {
+      containerEl = document.createElement('div');
+      containerEl.dataset.position = JSON.stringify(position);
+      domHelper.setPositionDataAttribute(containerEl, options);
+      attributeAfterCall = JSON.parse(containerEl.dataset.position);
+    });
+
+    it('should set x, y, width, height', () => {
+      expect(attributeAfterCall.x_axis).toEqual(options.x);
+      expect(attributeAfterCall.y_axis).toEqual(options.y);
+      expect(attributeAfterCall.width).toEqual(options.width);
+      expect(attributeAfterCall.height).toEqual(options.height);
+    });
+
+    it('should not override other properties', () => {
+      expect(attributeAfterCall.myProperty).toEqual('myProperty');
+    });
+  });
+
+  describe('updateDiscussionAvatarBadgeNumber', () => {
+    let discussionEl;
+    const badgeNumber = 1;
+
+    beforeEach(() => {
+      discussionEl = document.createElement('div');
+      discussionEl.innerHTML = `
+        <a href="#" class="image-diff-avatar-link">
+          <div class="badge"></div>
+        </a>
+      `;
+      domHelper.updateDiscussionAvatarBadgeNumber(discussionEl, badgeNumber);
+    });
+
+    it('should update avatar badge number', () => {
+      expect(discussionEl.querySelector('.badge').innerText).toEqual(badgeNumber.toString());
+    });
+  });
+
+  describe('updateDiscussionBadgeNumber', () => {
+    let discussionEl;
+    const badgeNumber = 1;
+
+    beforeEach(() => {
+      discussionEl = document.createElement('div');
+      discussionEl.innerHTML = `
+        <div class="badge"></div>
+      `;
+      domHelper.updateDiscussionBadgeNumber(discussionEl, badgeNumber);
+    });
+
+    it('should update discussion badge number', () => {
+      expect(discussionEl.querySelector('.badge').innerText).toEqual(badgeNumber.toString());
+    });
+  });
+
+  describe('toggleCollapsed', () => {
+    let element;
+    let discussionNotesEl;
+
+    beforeEach(() => {
+      element = document.createElement('div');
+      element.innerHTML = `
+        <div class="discussion-notes">
+          <button></button>
+          <form class="discussion-form"></form>
+        </div>
+      `;
+      discussionNotesEl = element.querySelector('.discussion-notes');
+    });
+
+    describe('not collapsed', () => {
+      beforeEach(() => {
+        domHelper.toggleCollapsed({
+          currentTarget: element.querySelector('button'),
+        });
+      });
+
+      it('should add collapsed class', () => {
+        expect(discussionNotesEl.classList.contains('collapsed')).toEqual(true);
+      });
+
+      it('should force formEl to display none', () => {
+        const formEl = element.querySelector('.discussion-form');
+        expect(formEl.style.display).toEqual('none');
+      });
+    });
+
+    describe('collapsed', () => {
+      beforeEach(() => {
+        discussionNotesEl.classList.add('collapsed');
+
+        domHelper.toggleCollapsed({
+          currentTarget: element.querySelector('button'),
+        });
+      });
+
+      it('should remove collapsed class', () => {
+        expect(discussionNotesEl.classList.contains('collapsed')).toEqual(false);
+      });
+
+      it('should force formEl to display block', () => {
+        const formEl = element.querySelector('.discussion-form');
+        expect(formEl.style.display).toEqual('block');
+      });
+    });
+  });
+});
diff --git a/spec/javascripts/image_diff/helpers/utils_helper_spec.js b/spec/javascripts/image_diff/helpers/utils_helper_spec.js
new file mode 100644
index 00000000000..a944cdf9008
--- /dev/null
+++ b/spec/javascripts/image_diff/helpers/utils_helper_spec.js
@@ -0,0 +1,224 @@
+import * as utilsHelper from '~/image_diff/helpers/utils_helper';
+import ImageDiff from '~/image_diff/image_diff';
+import ReplacedImageDiff from '~/image_diff/replaced_image_diff';
+import ImageBadge from '~/image_diff/image_badge';
+
+describe('utilsHelper', () => {
+  describe('resizeCoordinatesToImageElement', () => {
+    const imageEl = {
+      width: 100,
+      height: 100,
+    };
+    const meta = {
+      x: 100,
+      y: 100,
+      width: imageEl.width * 2,
+      height: imageEl.height * 2,
+    };
+    let result;
+
+    beforeEach(() => {
+      result = utilsHelper.resizeCoordinatesToImageElement(imageEl, meta);
+    });
+
+    it('should return x based on widthRatio', () => {
+      expect(result.x).toEqual(meta.x * 0.5);
+    });
+
+    it('should return y based on heightRatio', () => {
+      expect(result.y).toEqual(meta.y * 0.5);
+    });
+
+    it('should return image width', () => {
+      expect(result.width).toEqual(imageEl.width);
+    });
+
+    it('should return image height', () => {
+      expect(result.height).toEqual(imageEl.height);
+    });
+  });
+
+  describe('generateBadgeFromDiscussionDOM', () => {
+    let discussionEl;
+    let result;
+
+    const position = {
+      x_axis: 0,
+      y_axis: 1,
+      width: 100,
+      height: 100,
+    };
+
+    const noteId = 'noteId';
+    const discussionId = 'discussionId';
+
+    beforeEach(() => {
+      const imageFrameEl = document.createElement('div');
+      imageFrameEl.innerHTML = `
+        <img src="${gl.TEST_HOST}/image.png">
+      `;
+      discussionEl = document.createElement('div');
+      discussionEl.dataset.discussionId = discussionId;
+      discussionEl.innerHTML = `
+        <div class="note" id="${noteId}"></div>
+      `;
+      discussionEl.dataset.position = JSON.stringify(position);
+      result = utilsHelper.generateBadgeFromDiscussionDOM(imageFrameEl, discussionEl);
+    });
+
+    it('should return actual image properties', () => {
+      const { actual } = result;
+      expect(actual.x).toEqual(position.x_axis);
+      expect(actual.y).toEqual(position.y_axis);
+      expect(actual.width).toEqual(position.width);
+      expect(actual.height).toEqual(position.height);
+    });
+
+    it('should return browser image properties', () => {
+      const { browser } = result;
+      expect(browser.x).toBeDefined();
+      expect(browser.y).toBeDefined();
+      expect(browser.width).toBeDefined();
+      expect(browser.height).toBeDefined();
+    });
+
+    it('should return instance of ImageBadge', () => {
+      expect(result instanceof ImageBadge).toEqual(true);
+    });
+
+    it('should return noteId', () => {
+      expect(result.noteId).toEqual(noteId);
+    });
+
+    it('should return discussionId', () => {
+      expect(result.discussionId).toEqual(discussionId);
+    });
+  });
+
+  describe('getTargetSelection', () => {
+    let containerEl;
+    const imageElProperties = {
+      width: 100,
+      height: 100,
+      naturalWidth: 200,
+      naturalHeight: 200,
+    };
+
+    beforeEach(() => {
+      containerEl = {
+        querySelector: () => imageElProperties,
+      };
+    });
+
+    function generateEvent(offsetX, offsetY) {
+      return {
+        currentTarget: containerEl,
+        offsetX,
+        offsetY,
+      };
+    }
+
+    it('should return browser properties', () => {
+      const event = generateEvent(25, 25);
+      const result = utilsHelper.getTargetSelection(event);
+
+      const { browser } = result;
+      expect(browser.x).toEqual(event.offsetX);
+      expect(browser.y).toEqual(event.offsetY);
+      expect(browser.width).toEqual(imageElProperties.width);
+      expect(browser.height).toEqual(imageElProperties.height);
+    });
+
+    it('should return resized actual image properties', () => {
+      const event = generateEvent(50, 50);
+      const result = utilsHelper.getTargetSelection(event);
+
+      const { actual } = result;
+      expect(actual.x).toEqual(100);
+      expect(actual.y).toEqual(100);
+      expect(actual.width).toEqual(imageElProperties.naturalWidth);
+      expect(actual.height).toEqual(imageElProperties.naturalHeight);
+    });
+
+    describe('normalize coordinates', () => {
+      it('should return x = 0 if x < 0', () => {
+        const event = generateEvent(-5, 50);
+        const result = utilsHelper.getTargetSelection(event);
+        expect(result.browser.x).toEqual(0);
+      });
+
+      it('should return x = width if x > width', () => {
+        const event = generateEvent(1000, 50);
+        const result = utilsHelper.getTargetSelection(event);
+        expect(result.browser.x).toEqual(imageElProperties.width);
+      });
+
+      it('should return y = 0 if y < 0', () => {
+        const event = generateEvent(50, -10);
+        const result = utilsHelper.getTargetSelection(event);
+        expect(result.browser.y).toEqual(0);
+      });
+
+      it('should return y = height if y > height', () => {
+        const event = generateEvent(50, 1000);
+        const result = utilsHelper.getTargetSelection(event);
+        expect(result.browser.y).toEqual(imageElProperties.height);
+      });
+    });
+  });
+
+  describe('initImageDiff', () => {
+    let glBefore;
+    let fileEl;
+
+    beforeEach(() => {
+      window.gl = window.gl || (window.gl = {});
+      glBefore = window.gl;
+      window.gl.ImageFile = () => {};
+      fileEl = document.createElement('div');
+      fileEl.innerHTML = `
+        <div class="diff-file"></div>
+      `;
+
+      spyOn(ImageDiff.prototype, 'init').and.callFake(() => {});
+      spyOn(ReplacedImageDiff.prototype, 'init').and.callFake(() => {});
+    });
+
+    afterEach(() => {
+      window.gl = glBefore;
+    });
+
+    it('should initialize gl.ImageFile', () => {
+      spyOn(window.gl, 'ImageFile');
+
+      utilsHelper.initImageDiff(fileEl, false, false);
+      expect(gl.ImageFile).toHaveBeenCalled();
+    });
+
+    it('should initialize ImageDiff if js-single-image', () => {
+      const diffFileEl = fileEl.querySelector('.diff-file');
+      diffFileEl.innerHTML = `
+        <div class="js-single-image">
+        </div>
+      `;
+
+      const imageDiff = utilsHelper.initImageDiff(fileEl, true, false);
+      expect(ImageDiff.prototype.init).toHaveBeenCalled();
+      expect(imageDiff.canCreateNote).toEqual(true);
+      expect(imageDiff.renderCommentBadge).toEqual(false);
+    });
+
+    it('should initialize ReplacedImageDiff if js-replaced-image', () => {
+      const diffFileEl = fileEl.querySelector('.diff-file');
+      diffFileEl.innerHTML = `
+        <div class="js-replaced-image">
+        </div>
+      `;
+
+      const replacedImageDiff = utilsHelper.initImageDiff(fileEl, false, true);
+      expect(ReplacedImageDiff.prototype.init).toHaveBeenCalled();
+      expect(replacedImageDiff.canCreateNote).toEqual(false);
+      expect(replacedImageDiff.renderCommentBadge).toEqual(true);
+    });
+  });
+});
diff --git a/spec/javascripts/image_diff/image_badge_spec.js b/spec/javascripts/image_diff/image_badge_spec.js
new file mode 100644
index 00000000000..4d8c9f6623b
--- /dev/null
+++ b/spec/javascripts/image_diff/image_badge_spec.js
@@ -0,0 +1,90 @@
+import ImageBadge from '~/image_diff/image_badge';
+import imageDiffHelper from '~/image_diff/helpers/index';
+
+describe('ImageBadge', () => {
+  const noteId = 'noteId';
+  const discussionId = 'discussionId';
+  const options = {
+    noteId,
+    discussionId,
+  };
+  const meta = {
+    x: 1,
+    y: 1,
+    width: 1,
+    height: 1,
+  };
+
+  it('should save actual property', () => {
+    const imageBadge = new ImageBadge(Object.assign({}, options, {
+      actual: meta,
+    }));
+
+    const { actual } = imageBadge;
+    expect(actual.x).toEqual(meta.x);
+    expect(actual.y).toEqual(meta.y);
+    expect(actual.width).toEqual(meta.width);
+    expect(actual.height).toEqual(meta.height);
+  });
+
+  it('should save browser property', () => {
+    const imageBadge = new ImageBadge(Object.assign({}, options, {
+      browser: meta,
+    }));
+
+    const { browser } = imageBadge;
+    expect(browser.x).toEqual(meta.x);
+    expect(browser.y).toEqual(meta.y);
+    expect(browser.width).toEqual(meta.width);
+    expect(browser.height).toEqual(meta.height);
+  });
+
+  it('should save noteId', () => {
+    const imageBadge = new ImageBadge(options);
+    expect(imageBadge.noteId).toEqual(noteId);
+  });
+
+  it('should save discussionId', () => {
+    const imageBadge = new ImageBadge(options);
+    expect(imageBadge.discussionId).toEqual(discussionId);
+  });
+
+  describe('default values', () => {
+    let imageBadge;
+
+    beforeEach(() => {
+      imageBadge = new ImageBadge(options);
+    });
+
+    it('should return defaultMeta if actual property is not provided', () => {
+      const { actual } = imageBadge;
+      expect(actual.x).toEqual(0);
+      expect(actual.y).toEqual(0);
+      expect(actual.width).toEqual(0);
+      expect(actual.height).toEqual(0);
+    });
+
+    it('should return defaultMeta if browser property is not provided', () => {
+      const { browser } = imageBadge;
+      expect(browser.x).toEqual(0);
+      expect(browser.y).toEqual(0);
+      expect(browser.width).toEqual(0);
+      expect(browser.height).toEqual(0);
+    });
+  });
+
+  describe('imageEl property is provided and not browser property', () => {
+    beforeEach(() => {
+      spyOn(imageDiffHelper, 'resizeCoordinatesToImageElement').and.returnValue(true);
+    });
+
+    it('should generate browser property', () => {
+      const imageBadge = new ImageBadge(Object.assign({}, options, {
+        imageEl: document.createElement('img'),
+      }));
+
+      expect(imageDiffHelper.resizeCoordinatesToImageElement).toHaveBeenCalled();
+      expect(imageBadge.browser).toEqual(true);
+    });
+  });
+});
diff --git a/spec/javascripts/image_diff/image_diff_spec.js b/spec/javascripts/image_diff/image_diff_spec.js
new file mode 100644
index 00000000000..4127d441a07
--- /dev/null
+++ b/spec/javascripts/image_diff/image_diff_spec.js
@@ -0,0 +1,365 @@
+import ImageDiff from '~/image_diff/image_diff';
+import * as imageUtility from '~/lib/utils/image_utility';
+import imageDiffHelper from '~/image_diff/helpers/index';
+
+describe('ImageDiff', () => {
+  let element;
+  let imageDiff;
+
+  beforeEach(() => {
+    setFixtures(`
+      <div id="element">
+        <div class="diff-file">
+          <div class="js-image-frame">
+            <img src="${gl.TEST_HOST}/image.png">
+            <div class="comment-indicator"></div>
+            <div id="badge-1" class="badge">1</div>
+            <div id="badge-2" class="badge">2</div>
+            <div id="badge-3" class="badge">3</div>
+          </div>
+          <div class="note-container">
+            <div class="discussion-notes">
+              <div class="js-diff-notes-toggle"></div>
+              <div class="notes"></div>
+            </div>
+            <div class="discussion-notes">
+              <div class="js-diff-notes-toggle"></div>
+              <div class="notes"></div>
+            </div>
+          </div>
+        </div>
+      </div>
+    `);
+    element = document.getElementById('element');
+  });
+
+  describe('constructor', () => {
+    beforeEach(() => {
+      imageDiff = new ImageDiff(element, {
+        canCreateNote: true,
+        renderCommentBadge: true,
+      });
+    });
+
+    it('should set el', () => {
+      expect(imageDiff.el).toEqual(element);
+    });
+
+    it('should set canCreateNote', () => {
+      expect(imageDiff.canCreateNote).toEqual(true);
+    });
+
+    it('should set renderCommentBadge', () => {
+      expect(imageDiff.renderCommentBadge).toEqual(true);
+    });
+
+    it('should set $noteContainer', () => {
+      expect(imageDiff.$noteContainer[0]).toEqual(element.querySelector('.note-container'));
+    });
+
+    describe('default', () => {
+      beforeEach(() => {
+        imageDiff = new ImageDiff(element, {});
+      });
+
+      it('should set canCreateNote as false', () => {
+        expect(imageDiff.canCreateNote).toEqual(false);
+      });
+
+      it('should set renderCommentBadge as false', () => {
+        expect(imageDiff.renderCommentBadge).toEqual(false);
+      });
+    });
+  });
+
+  describe('init', () => {
+    beforeEach(() => {
+      spyOn(ImageDiff.prototype, 'bindEvents').and.callFake(() => {});
+      imageDiff = new ImageDiff(element, {});
+      imageDiff.init();
+    });
+
+    it('should set imageFrameEl', () => {
+      expect(imageDiff.imageFrameEl).toEqual(element.querySelector('.diff-file .js-image-frame'));
+    });
+
+    it('should set imageEl', () => {
+      expect(imageDiff.imageEl).toEqual(element.querySelector('.diff-file .js-image-frame img'));
+    });
+
+    it('should call bindEvents', () => {
+      expect(imageDiff.bindEvents).toHaveBeenCalled();
+    });
+  });
+
+  describe('bindEvents', () => {
+    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(() => {});
+      imageEl = element.querySelector('.diff-file .js-image-frame img');
+    });
+
+    describe('default', () => {
+      beforeEach(() => {
+        spyOn(imageUtility, 'isImageLoaded').and.callFake(() => false);
+        imageDiff = new ImageDiff(element, {});
+        imageDiff.imageEl = imageEl;
+        imageDiff.bindEvents();
+      });
+
+      it('should register click event delegation to js-diff-notes-toggle', () => {
+        element.querySelector('.js-diff-notes-toggle').click();
+        expect(imageDiffHelper.toggleCollapsed).toHaveBeenCalled();
+      });
+
+      it('should register click event delegation to comment-indicator', () => {
+        element.querySelector('.comment-indicator').click();
+        expect(imageDiffHelper.commentIndicatorOnClick).toHaveBeenCalled();
+      });
+    });
+
+    describe('image loaded', () => {
+      beforeEach(() => {
+        spyOn(imageUtility, 'isImageLoaded').and.callFake(() => true);
+        imageDiff = new ImageDiff(element, {});
+        imageDiff.imageEl = imageEl;
+      });
+
+      it('should renderBadges', () => {});
+    });
+
+    describe('image not loaded', () => {
+      beforeEach(() => {
+        spyOn(imageUtility, 'isImageLoaded').and.callFake(() => false);
+        imageDiff = new ImageDiff(element, {});
+        imageDiff.imageEl = imageEl;
+        imageDiff.bindEvents();
+      });
+
+      it('should registers load eventListener', () => {
+        const loadEvent = new Event('load');
+        imageEl.dispatchEvent(loadEvent);
+        expect(imageDiff.renderBadges).toHaveBeenCalled();
+      });
+    });
+
+    describe('canCreateNote', () => {
+      beforeEach(() => {
+        spyOn(imageUtility, 'isImageLoaded').and.callFake(() => false);
+        imageDiff = new ImageDiff(element, {
+          canCreateNote: true,
+        });
+        imageDiff.imageEl = imageEl;
+        imageDiff.bindEvents();
+      });
+
+      it('should register click.imageDiff event', () => {
+        const event = new CustomEvent('click.imageDiff');
+        element.dispatchEvent(event);
+        expect(imageDiff.imageClicked).toHaveBeenCalled();
+      });
+
+      it('should register blur.imageDiff event', () => {
+        const event = new CustomEvent('blur.imageDiff');
+        element.dispatchEvent(event);
+        expect(imageDiffHelper.removeCommentIndicator).toHaveBeenCalled();
+      });
+
+      it('should register addBadge.imageDiff event', () => {
+        const event = new CustomEvent('addBadge.imageDiff');
+        element.dispatchEvent(event);
+        expect(imageDiff.addBadge).toHaveBeenCalled();
+      });
+
+      it('should register removeBadge.imageDiff event', () => {
+        const event = new CustomEvent('removeBadge.imageDiff');
+        element.dispatchEvent(event);
+        expect(imageDiff.removeBadge).toHaveBeenCalled();
+      });
+    });
+
+    describe('canCreateNote is false', () => {
+      beforeEach(() => {
+        spyOn(imageUtility, 'isImageLoaded').and.callFake(() => false);
+        imageDiff = new ImageDiff(element, {});
+        imageDiff.imageEl = imageEl;
+        imageDiff.bindEvents();
+      });
+
+      it('should not register click.imageDiff event', () => {
+        const event = new CustomEvent('click.imageDiff');
+        element.dispatchEvent(event);
+        expect(imageDiff.imageClicked).not.toHaveBeenCalled();
+      });
+    });
+  });
+
+  describe('imageClicked', () => {
+    beforeEach(() => {
+      spyOn(imageDiffHelper, 'getTargetSelection').and.returnValue({
+        actual: {},
+        browser: {},
+      });
+      spyOn(imageDiffHelper, 'setPositionDataAttribute').and.callFake(() => {});
+      spyOn(imageDiffHelper, 'showCommentIndicator').and.callFake(() => {});
+      imageDiff = new ImageDiff(element, {});
+      imageDiff.imageClicked({
+        detail: {
+          currentTarget: {},
+        },
+      });
+    });
+
+    it('should call getTargetSelection', () => {
+      expect(imageDiffHelper.getTargetSelection).toHaveBeenCalled();
+    });
+
+    it('should call setPositionDataAttribute', () => {
+      expect(imageDiffHelper.setPositionDataAttribute).toHaveBeenCalled();
+    });
+
+    it('should call showCommentIndicator', () => {
+      expect(imageDiffHelper.showCommentIndicator).toHaveBeenCalled();
+    });
+  });
+
+  describe('renderBadges', () => {
+    beforeEach(() => {
+      spyOn(ImageDiff.prototype, 'renderBadge').and.callFake(() => {});
+      imageDiff = new ImageDiff(element, {});
+      imageDiff.renderBadges();
+    });
+
+    it('should call renderBadge for each discussionEl', () => {
+      const discussionEls = element.querySelectorAll('.note-container .discussion-notes .notes');
+      expect(imageDiff.renderBadge.calls.count()).toEqual(discussionEls.length);
+    });
+  });
+
+  describe('renderBadge', () => {
+    let discussionEls;
+
+    beforeEach(() => {
+      spyOn(imageDiffHelper, 'addImageBadge').and.callFake(() => {});
+      spyOn(imageDiffHelper, 'addImageCommentBadge').and.callFake(() => {});
+      spyOn(imageDiffHelper, 'generateBadgeFromDiscussionDOM').and.returnValue({
+        browser: {},
+        noteId: 'noteId',
+      });
+      discussionEls = element.querySelectorAll('.note-container .discussion-notes .notes');
+      imageDiff = new ImageDiff(element, {});
+      imageDiff.renderBadge(discussionEls[0], 0);
+    });
+
+    it('should populate imageBadges', () => {
+      expect(imageDiff.imageBadges.length).toEqual(1);
+    });
+
+    describe('renderCommentBadge', () => {
+      beforeEach(() => {
+        imageDiff.renderCommentBadge = true;
+        imageDiff.renderBadge(discussionEls[0], 0);
+      });
+
+      it('should call addImageCommentBadge', () => {
+        expect(imageDiffHelper.addImageCommentBadge).toHaveBeenCalled();
+      });
+    });
+
+    describe('renderCommentBadge is false', () => {
+      it('should call addImageBadge', () => {
+        expect(imageDiffHelper.addImageBadge).toHaveBeenCalled();
+      });
+    });
+  });
+
+  describe('addBadge', () => {
+    beforeEach(() => {
+      spyOn(imageDiffHelper, 'addImageBadge').and.callFake(() => {});
+      spyOn(imageDiffHelper, 'addAvatarBadge').and.callFake(() => {});
+      spyOn(imageDiffHelper, 'updateDiscussionBadgeNumber').and.callFake(() => {});
+      imageDiff = new ImageDiff(element, {});
+      imageDiff.imageFrameEl = element.querySelector('.diff-file .js-image-frame');
+      imageDiff.addBadge({
+        detail: {
+          x: 0,
+          y: 1,
+          width: 25,
+          height: 50,
+          noteId: 'noteId',
+          discussionId: 'discussionId',
+        },
+      });
+    });
+
+    it('should add imageBadge to imageBadges', () => {
+      expect(imageDiff.imageBadges.length).toEqual(1);
+    });
+
+    it('should call addImageBadge', () => {
+      expect(imageDiffHelper.addImageBadge).toHaveBeenCalled();
+    });
+
+    it('should call addAvatarBadge', () => {
+      expect(imageDiffHelper.addAvatarBadge).toHaveBeenCalled();
+    });
+
+    it('should call updateDiscussionBadgeNumber', () => {
+      expect(imageDiffHelper.updateDiscussionBadgeNumber).toHaveBeenCalled();
+    });
+  });
+
+  describe('removeBadge', () => {
+    beforeEach(() => {
+      const defaultMeta = {
+        x: 0,
+        y: 0,
+        width: 0,
+        height: 0,
+      };
+
+      spyOn(imageDiffHelper, 'updateDiscussionBadgeNumber').and.callFake(() => {});
+      spyOn(imageDiffHelper, 'updateDiscussionAvatarBadgeNumber').and.callFake(() => {});
+      imageDiff = new ImageDiff(element, {});
+      imageDiff.imageBadges = [defaultMeta, defaultMeta, defaultMeta];
+      imageDiff.imageFrameEl = element.querySelector('.diff-file .js-image-frame');
+      imageDiff.removeBadge({
+        detail: {
+          badgeNumber: 2,
+        },
+      });
+    });
+
+    describe('cascade badge count', () => {
+      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.length).toEqual(2);
+      });
+
+      it('should call updateDiscussionBadgeNumber', () => {
+        expect(imageDiffHelper.updateDiscussionBadgeNumber).toHaveBeenCalled();
+      });
+
+      it('should call updateDiscussionAvatarBadgeNumber', () => {
+        expect(imageDiffHelper.updateDiscussionAvatarBadgeNumber).toHaveBeenCalled();
+      });
+    });
+
+    it('should remove badge from imageBadges', () => {
+      expect(imageDiff.imageBadges.length).toEqual(2);
+    });
+
+    it('should remove imageBadgeEl', () => {
+      expect(imageDiff.imageFrameEl.querySelector('#badge-2')).toBeNull();
+    });
+  });
+});
diff --git a/spec/javascripts/image_diff/init_discussion_tab_spec.js b/spec/javascripts/image_diff/init_discussion_tab_spec.js
new file mode 100644
index 00000000000..7c447d6f70d
--- /dev/null
+++ b/spec/javascripts/image_diff/init_discussion_tab_spec.js
@@ -0,0 +1,37 @@
+import initDiscussionTab from '~/image_diff/init_discussion_tab';
+import imageDiffHelper from '~/image_diff/helpers/index';
+
+describe('initDiscussionTab', () => {
+  beforeEach(() => {
+    setFixtures(`
+      <div class="timeline-content">
+        <div class="diff-file js-image-file"></div>
+        <div class="diff-file js-image-file"></div>
+      </div>
+    `);
+  });
+
+  it('should pass canCreateNote as false to initImageDiff', (done) => {
+    spyOn(imageDiffHelper, 'initImageDiff').and.callFake((diffFileEl, canCreateNote) => {
+      expect(canCreateNote).toEqual(false);
+      done();
+    });
+
+    initDiscussionTab();
+  });
+
+  it('should pass renderCommentBadge as true to initImageDiff', (done) => {
+    spyOn(imageDiffHelper, 'initImageDiff').and.callFake((diffFileEl, canCreateNote, renderCommentBadge) => {
+      expect(renderCommentBadge).toEqual(true);
+      done();
+    });
+
+    initDiscussionTab();
+  });
+
+  it('should call initImageDiff for each diffFileEls', () => {
+    spyOn(imageDiffHelper, 'initImageDiff').and.callFake(() => {});
+    initDiscussionTab();
+    expect(imageDiffHelper.initImageDiff.calls.count()).toEqual(2);
+  });
+});
diff --git a/spec/javascripts/image_diff/replaced_image_diff_spec.js b/spec/javascripts/image_diff/replaced_image_diff_spec.js
new file mode 100644
index 00000000000..a2c93e2c8ee
--- /dev/null
+++ b/spec/javascripts/image_diff/replaced_image_diff_spec.js
@@ -0,0 +1,334 @@
+import ReplacedImageDiff from '~/image_diff/replaced_image_diff';
+import ImageDiff from '~/image_diff/image_diff';
+import { viewTypes } from '~/image_diff/view_types';
+import imageDiffHelper from '~/image_diff/helpers/index';
+
+describe('ReplacedImageDiff', () => {
+  let element;
+  let replacedImageDiff;
+
+  beforeEach(() => {
+    setFixtures(`
+      <div id="element">
+        <div class="two-up">
+          <div class="js-image-frame">
+            <img src="${gl.TEST_HOST}/image.png">
+          </div>
+        </div>
+        <div class="swipe">
+          <div class="js-image-frame">
+            <img src="${gl.TEST_HOST}/image.png">
+          </div>
+        </div>
+        <div class="onion-skin">
+          <div class="js-image-frame">
+            <img src="${gl.TEST_HOST}/image.png">
+          </div>
+        </div>
+        <div class="view-modes-menu">
+          <div class="two-up">2-up</div>
+          <div class="swipe">Swipe</div>
+          <div class="onion-skin">Onion skin</div>
+        </div>
+      </div>
+    `);
+    element = document.getElementById('element');
+  });
+
+  it('should extend ImageDiff', () => {
+    replacedImageDiff = new ReplacedImageDiff(element, {
+      canCreateNote: false,
+      renderCommentBadge: false,
+    });
+    expect(replacedImageDiff instanceof ImageDiff).toEqual(true);
+  });
+
+  describe('init', () => {
+    beforeEach(() => {
+      spyOn(ReplacedImageDiff.prototype, 'bindEvents').and.callFake(() => {});
+      spyOn(ReplacedImageDiff.prototype, 'generateImageEls').and.callFake(() => {});
+
+      replacedImageDiff = new ReplacedImageDiff(element, {
+        canCreateNote: false,
+        renderCommentBadge: false,
+      });
+      replacedImageDiff.init();
+    });
+
+    it('should set imageFrameEls', () => {
+      const { imageFrameEls } = replacedImageDiff;
+      expect(imageFrameEls).toBeDefined();
+      expect(imageFrameEls[viewTypes.TWO_UP]).toEqual(element.querySelector('.two-up .js-image-frame'));
+      expect(imageFrameEls[viewTypes.SWIPE]).toEqual(element.querySelector('.swipe .js-image-frame'));
+      expect(imageFrameEls[viewTypes.ONION_SKIN]).toEqual(element.querySelector('.onion-skin .js-image-frame'));
+    });
+
+    it('should set viewModesEls', () => {
+      const { viewModesEls } = replacedImageDiff;
+      expect(viewModesEls).toBeDefined();
+      expect(viewModesEls[viewTypes.TWO_UP]).toEqual(element.querySelector('.view-modes-menu .two-up'));
+      expect(viewModesEls[viewTypes.SWIPE]).toEqual(element.querySelector('.view-modes-menu .swipe'));
+      expect(viewModesEls[viewTypes.ONION_SKIN]).toEqual(element.querySelector('.view-modes-menu .onion-skin'));
+    });
+
+    it('should generateImageEls', () => {
+      expect(ReplacedImageDiff.prototype.generateImageEls).toHaveBeenCalled();
+    });
+
+    it('should bindEvents', () => {
+      expect(ReplacedImageDiff.prototype.bindEvents).toHaveBeenCalled();
+    });
+
+    describe('currentView', () => {
+      it('should set currentView', () => {
+        replacedImageDiff.init(viewTypes.ONION_SKIN);
+        expect(replacedImageDiff.currentView).toEqual(viewTypes.ONION_SKIN);
+      });
+
+      it('should default to viewTypes.TWO_UP', () => {
+        expect(replacedImageDiff.currentView).toEqual(viewTypes.TWO_UP);
+      });
+    });
+  });
+
+  describe('generateImageEls', () => {
+    beforeEach(() => {
+      spyOn(ReplacedImageDiff.prototype, 'bindEvents').and.callFake(() => {});
+
+      replacedImageDiff = new ReplacedImageDiff(element, {
+        canCreateNote: false,
+        renderCommentBadge: false,
+      });
+
+      replacedImageDiff.imageFrameEls = [];
+      replacedImageDiff.imageFrameEls[viewTypes.TWO_UP] = element.querySelector('.two-up .js-image-frame');
+      replacedImageDiff.imageFrameEls[viewTypes.SWIPE] = element.querySelector('.swipe .js-image-frame');
+      replacedImageDiff.imageFrameEls[viewTypes.ONION_SKIN] = element.querySelector('.onion-skin .js-image-frame');
+    });
+
+    it('should set imageEls', () => {
+      replacedImageDiff.generateImageEls();
+      const { imageEls } = replacedImageDiff;
+      expect(imageEls).toBeDefined();
+      expect(imageEls[viewTypes.TWO_UP]).toEqual(element.querySelector('.two-up img'));
+      expect(imageEls[viewTypes.SWIPE]).toEqual(element.querySelector('.swipe img'));
+      expect(imageEls[viewTypes.ONION_SKIN]).toEqual(element.querySelector('.onion-skin img'));
+    });
+  });
+
+  describe('bindEvents', () => {
+    beforeEach(() => {
+      spyOn(ImageDiff.prototype, 'bindEvents').and.callFake(() => {});
+      replacedImageDiff = new ReplacedImageDiff(element, {
+        canCreateNote: false,
+        renderCommentBadge: false,
+      });
+
+      replacedImageDiff.viewModesEls = [];
+      replacedImageDiff.viewModesEls[viewTypes.TWO_UP] = element.querySelector('.view-modes-menu .two-up');
+      replacedImageDiff.viewModesEls[viewTypes.SWIPE] = element.querySelector('.view-modes-menu .swipe');
+      replacedImageDiff.viewModesEls[viewTypes.ONION_SKIN] = element.querySelector('.view-modes-menu .onion-skin');
+    });
+
+    it('should call super.bindEvents', () => {
+      replacedImageDiff.bindEvents();
+      expect(ImageDiff.prototype.bindEvents).toHaveBeenCalled();
+    });
+
+    it('should register click eventlistener to 2-up view mode', (done) => {
+      spyOn(ReplacedImageDiff.prototype, 'changeView').and.callFake((viewMode) => {
+        expect(viewMode).toEqual(viewTypes.TWO_UP);
+        done();
+      });
+
+      replacedImageDiff.bindEvents();
+      replacedImageDiff.viewModesEls[viewTypes.TWO_UP].click();
+    });
+
+    it('should register click eventlistener to swipe view mode', (done) => {
+      spyOn(ReplacedImageDiff.prototype, 'changeView').and.callFake((viewMode) => {
+        expect(viewMode).toEqual(viewTypes.SWIPE);
+        done();
+      });
+
+      replacedImageDiff.bindEvents();
+      replacedImageDiff.viewModesEls[viewTypes.SWIPE].click();
+    });
+
+    it('should register click eventlistener to onion skin view mode', (done) => {
+      spyOn(ReplacedImageDiff.prototype, 'changeView').and.callFake((viewMode) => {
+        expect(viewMode).toEqual(viewTypes.SWIPE);
+        done();
+      });
+
+      replacedImageDiff.bindEvents();
+      replacedImageDiff.viewModesEls[viewTypes.SWIPE].click();
+    });
+  });
+
+  describe('getters', () => {
+    describe('imageEl', () => {
+      beforeEach(() => {
+        replacedImageDiff = new ReplacedImageDiff(element, {
+          canCreateNote: false,
+          renderCommentBadge: false,
+        });
+        replacedImageDiff.currentView = viewTypes.TWO_UP;
+        replacedImageDiff.imageEls = [];
+        replacedImageDiff.imageEls[viewTypes.TWO_UP] = element.querySelector('.two-up img');
+        replacedImageDiff.imageEls[viewTypes.SWIPE] = element.querySelector('.swipe img');
+        replacedImageDiff.imageEls[viewTypes.ONION_SKIN] = element.querySelector('.onion-skin img');
+      });
+
+      it('should return imageEl based on currentView', () => {
+        expect(replacedImageDiff.imageEl).toEqual(element.querySelector('.two-up img'));
+
+        replacedImageDiff.currentView = viewTypes.SWIPE;
+        expect(replacedImageDiff.imageEl).toEqual(element.querySelector('.swipe img'));
+      });
+    });
+
+    describe('imageFrameEl', () => {
+      beforeEach(() => {
+        replacedImageDiff = new ReplacedImageDiff(element, {
+          canCreateNote: false,
+          renderCommentBadge: false,
+        });
+        replacedImageDiff.currentView = viewTypes.TWO_UP;
+        replacedImageDiff.imageFrameEls = [];
+        replacedImageDiff.imageFrameEls[viewTypes.TWO_UP] = element.querySelector('.two-up .js-image-frame');
+        replacedImageDiff.imageFrameEls[viewTypes.SWIPE] = element.querySelector('.swipe .js-image-frame');
+        replacedImageDiff.imageFrameEls[viewTypes.ONION_SKIN] = element.querySelector('.onion-skin .js-image-frame');
+      });
+
+      it('should return imageFrameEl based on currentView', () => {
+        expect(replacedImageDiff.imageFrameEl).toEqual(element.querySelector('.two-up .js-image-frame'));
+
+        replacedImageDiff.currentView = viewTypes.ONION_SKIN;
+        expect(replacedImageDiff.imageFrameEl).toEqual(element.querySelector('.onion-skin .js-image-frame'));
+      });
+    });
+  });
+
+  describe('changeView', () => {
+    beforeEach(() => {
+      replacedImageDiff = new ReplacedImageDiff(element, {
+        canCreateNote: false,
+        renderCommentBadge: false,
+      });
+      spyOn(imageDiffHelper, 'removeCommentIndicator').and.returnValue({
+        removed: false,
+      });
+      replacedImageDiff.imageFrameEls = [];
+      replacedImageDiff.imageFrameEls[viewTypes.TWO_UP] = element.querySelector('.two-up .js-image-frame');
+      replacedImageDiff.imageFrameEls[viewTypes.SWIPE] = element.querySelector('.swipe .js-image-frame');
+      replacedImageDiff.imageFrameEls[viewTypes.ONION_SKIN] = element.querySelector('.onion-skin .js-image-frame');
+    });
+
+    describe('invalid viewType', () => {
+      beforeEach(() => {
+        replacedImageDiff.changeView('some-view-name');
+      });
+
+      it('should not call removeCommentIndicator', () => {
+        expect(imageDiffHelper.removeCommentIndicator).not.toHaveBeenCalled();
+      });
+    });
+
+    describe('valid viewType', () => {
+      beforeEach(() => {
+        jasmine.clock().install();
+        spyOn(ReplacedImageDiff.prototype, 'renderNewView').and.callFake(() => {});
+        replacedImageDiff.changeView(viewTypes.ONION_SKIN);
+      });
+
+      afterEach(() => {
+        jasmine.clock().uninstall();
+      });
+
+      it('should call removeCommentIndicator', () => {
+        expect(imageDiffHelper.removeCommentIndicator).toHaveBeenCalled();
+      });
+
+      it('should update currentView to newView', () => {
+        expect(replacedImageDiff.currentView).toEqual(viewTypes.ONION_SKIN);
+      });
+
+      it('should clear imageBadges', () => {
+        expect(replacedImageDiff.imageBadges.length).toEqual(0);
+      });
+
+      it('should call renderNewView', () => {
+        jasmine.clock().tick(251);
+        expect(replacedImageDiff.renderNewView).toHaveBeenCalled();
+      });
+    });
+  });
+
+  describe('renderNewView', () => {
+    beforeEach(() => {
+      replacedImageDiff = new ReplacedImageDiff(element, {
+        canCreateNote: false,
+        renderCommentBadge: false,
+      });
+    });
+
+    it('should call renderBadges', () => {
+      spyOn(ReplacedImageDiff.prototype, 'renderBadges').and.callFake(() => {});
+
+      replacedImageDiff.renderNewView({
+        removed: false,
+      });
+
+      expect(replacedImageDiff.renderBadges).toHaveBeenCalled();
+    });
+
+    describe('removeIndicator', () => {
+      const indicator = {
+        removed: true,
+        x: 0,
+        y: 1,
+        image: {
+          width: 50,
+          height: 100,
+        },
+      };
+
+      beforeEach(() => {
+        replacedImageDiff.imageEls = [];
+        replacedImageDiff.imageEls[viewTypes.TWO_UP] = element.querySelector('.two-up img');
+        replacedImageDiff.imageEls[viewTypes.SWIPE] = element.querySelector('.swipe img');
+        replacedImageDiff.imageEls[viewTypes.ONION_SKIN] = element.querySelector('.onion-skin img');
+
+        replacedImageDiff.imageFrameEls = [];
+        replacedImageDiff.imageFrameEls[viewTypes.TWO_UP] = element.querySelector('.two-up .js-image-frame');
+        replacedImageDiff.imageFrameEls[viewTypes.SWIPE] = element.querySelector('.swipe .js-image-frame');
+        replacedImageDiff.imageFrameEls[viewTypes.ONION_SKIN] = element.querySelector('.onion-skin .js-image-frame');
+      });
+
+      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();
+        });
+        replacedImageDiff.renderNewView(indicator);
+      });
+
+      it('should call showCommentIndicator', (done) => {
+        const normalized = {
+          normalized: true,
+        };
+        spyOn(imageDiffHelper, 'resizeCoordinatesToImageElement').and.callFake(() => normalized);
+        spyOn(imageDiffHelper, 'showCommentIndicator').and.callFake((imageFrameEl, normalizedIndicator) => {
+          expect(normalizedIndicator).toEqual(normalized);
+          done();
+        });
+        replacedImageDiff.renderNewView(indicator);
+      });
+    });
+  });
+});
diff --git a/spec/javascripts/image_diff/view_types_spec.js b/spec/javascripts/image_diff/view_types_spec.js
new file mode 100644
index 00000000000..e9639f46497
--- /dev/null
+++ b/spec/javascripts/image_diff/view_types_spec.js
@@ -0,0 +1,24 @@
+import { viewTypes, isValidViewType } from '~/image_diff/view_types';
+
+describe('viewTypes', () => {
+  describe('isValidViewType', () => {
+    it('should return true for TWO_UP', () => {
+      expect(isValidViewType(viewTypes.TWO_UP)).toEqual(true);
+    });
+
+    it('should return true for SWIPE', () => {
+      expect(isValidViewType(viewTypes.SWIPE)).toEqual(true);
+    });
+
+    it('should return true for ONION_SKIN', () => {
+      expect(isValidViewType(viewTypes.ONION_SKIN)).toEqual(true);
+    });
+
+    it('should return false for non view types', () => {
+      expect(isValidViewType('some-view-type')).toEqual(false);
+      expect(isValidViewType(null)).toEqual(false);
+      expect(isValidViewType(undefined)).toEqual(false);
+      expect(isValidViewType('')).toEqual(false);
+    });
+  });
+});