diff options
author | Clement Ho <ClemMakesApps@gmail.com> | 2017-10-06 09:40:51 -0500 |
---|---|---|
committer | Clement Ho <ClemMakesApps@gmail.com> | 2017-10-06 09:40:51 -0500 |
commit | d51ebe41ccae971db4b9c01aaee04350c38e0265 (patch) | |
tree | 453962303700f819a7d4740126de82444c52704f /spec/javascripts/image_diff/helpers/utils_helper_spec.js | |
parent | 33112651cf47713eeba07cbdb2bc9cd45ae95d01 (diff) | |
download | gitlab-ce-ch-add-specs.tar.gz |
Add javascript unit testsch-add-specs
Diffstat (limited to 'spec/javascripts/image_diff/helpers/utils_helper_spec.js')
-rw-r--r-- | spec/javascripts/image_diff/helpers/utils_helper_spec.js | 224 |
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); + }); + }); +}); |