1 files changed, 224 insertions, 0 deletions
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);
+    });
+  });
+});