diff options
Diffstat (limited to 'spec/javascripts/image_diff')
8 files changed, 128 insertions, 58 deletions
diff --git a/spec/javascripts/image_diff/helpers/badge_helper_spec.js b/spec/javascripts/image_diff/helpers/badge_helper_spec.js index ce3add1fd90..8ea05203d00 100644 --- a/spec/javascripts/image_diff/helpers/badge_helper_spec.js +++ b/spec/javascripts/image_diff/helpers/badge_helper_spec.js @@ -90,6 +90,7 @@ describe('badge helper', () => { it('should create icon comment button', () => { const iconEl = buttonEl.querySelector('svg'); + expect(iconEl).toBeDefined(); }); }); diff --git a/spec/javascripts/image_diff/helpers/comment_indicator_helper_spec.js b/spec/javascripts/image_diff/helpers/comment_indicator_helper_spec.js index 9d05c6859df..8e3e7f1222e 100644 --- a/spec/javascripts/image_diff/helpers/comment_indicator_helper_spec.js +++ b/spec/javascripts/image_diff/helpers/comment_indicator_helper_spec.js @@ -29,9 +29,11 @@ describe('commentIndicatorHelper', () => { 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')).not.toBe(-1); }); }); @@ -40,6 +42,7 @@ describe('commentIndicatorHelper', () => { describe('removeCommentIndicator', () => { it('should return removed false if there is no comment-indicator', () => { const result = commentIndicatorHelper.removeCommentIndicator(containerEl); + expect(result.removed).toEqual(false); }); @@ -84,6 +87,7 @@ describe('commentIndicatorHelper', () => { 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`); }); @@ -96,6 +100,7 @@ describe('commentIndicatorHelper', () => { 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`); diff --git a/spec/javascripts/image_diff/helpers/dom_helper_spec.js b/spec/javascripts/image_diff/helpers/dom_helper_spec.js index 8dde924e8ae..ffe712af2dd 100644 --- a/spec/javascripts/image_diff/helpers/dom_helper_spec.js +++ b/spec/javascripts/image_diff/helpers/dom_helper_spec.js @@ -92,6 +92,7 @@ describe('domHelper', () => { it('should force formEl to display none', () => { const formEl = element.querySelector('.discussion-form'); + expect(formEl.style.display).toEqual('none'); }); }); @@ -111,6 +112,7 @@ describe('domHelper', () => { 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 index 31949c39d9c..6f62ee3f93b 100644 --- a/spec/javascripts/image_diff/helpers/utils_helper_spec.js +++ b/spec/javascripts/image_diff/helpers/utils_helper_spec.js @@ -5,13 +5,7 @@ import ImageBadge from '~/image_diff/image_badge'; import * as mockData from '../mock_data'; describe('utilsHelper', () => { - const { - noteId, - discussionId, - image, - imageProperties, - imageMeta, - } = mockData; + const { noteId, discussionId, image, imageProperties, imageMeta } = mockData; describe('resizeCoordinatesToImageElement', () => { let result; @@ -57,6 +51,7 @@ describe('utilsHelper', () => { it('should return actual image properties', () => { const { actual } = result; + expect(actual.x).toEqual(imageMeta.x); expect(actual.y).toEqual(imageMeta.y); expect(actual.width).toEqual(imageMeta.width); @@ -65,6 +60,7 @@ describe('utilsHelper', () => { it('should return browser image properties', () => { const { browser } = result; + expect(browser.x).toBeDefined(); expect(browser.y).toBeDefined(); expect(browser.width).toBeDefined(); @@ -106,6 +102,7 @@ describe('utilsHelper', () => { const result = utilsHelper.getTargetSelection(event); const { browser } = result; + expect(browser.x).toEqual(event.offsetX); expect(browser.y).toEqual(event.offsetY); expect(browser.width).toEqual(imageProperties.width); @@ -117,6 +114,7 @@ describe('utilsHelper', () => { const result = utilsHelper.getTargetSelection(event); const { actual } = result; + expect(actual.x).toEqual(100); expect(actual.y).toEqual(100); expect(actual.width).toEqual(imageProperties.naturalWidth); @@ -127,24 +125,28 @@ describe('utilsHelper', () => { 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(imageProperties.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(imageProperties.height); }); }); @@ -178,6 +180,7 @@ describe('utilsHelper', () => { `; const imageDiff = utilsHelper.initImageDiff(fileEl, true, false); + expect(ImageDiff.prototype.init).toHaveBeenCalled(); expect(imageDiff.canCreateNote).toEqual(true); expect(imageDiff.renderCommentBadge).toEqual(false); @@ -191,6 +194,7 @@ describe('utilsHelper', () => { `; 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 index 87f98fc0926..2b23dce5d30 100644 --- a/spec/javascripts/image_diff/image_badge_spec.js +++ b/spec/javascripts/image_diff/image_badge_spec.js @@ -10,11 +10,14 @@ describe('ImageBadge', () => { }; it('should save actual property', () => { - const imageBadge = new ImageBadge(Object.assign({}, options, { - actual: imageMeta, - })); + const imageBadge = new ImageBadge( + Object.assign({}, options, { + actual: imageMeta, + }), + ); const { actual } = imageBadge; + expect(actual.x).toEqual(imageMeta.x); expect(actual.y).toEqual(imageMeta.y); expect(actual.width).toEqual(imageMeta.width); @@ -22,11 +25,14 @@ describe('ImageBadge', () => { }); it('should save browser property', () => { - const imageBadge = new ImageBadge(Object.assign({}, options, { - browser: imageMeta, - })); + const imageBadge = new ImageBadge( + Object.assign({}, options, { + browser: imageMeta, + }), + ); const { browser } = imageBadge; + expect(browser.x).toEqual(imageMeta.x); expect(browser.y).toEqual(imageMeta.y); expect(browser.width).toEqual(imageMeta.width); @@ -35,11 +41,13 @@ describe('ImageBadge', () => { 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); }); @@ -52,6 +60,7 @@ describe('ImageBadge', () => { it('should return defaultimageMeta if actual property is not provided', () => { const { actual } = imageBadge; + expect(actual.x).toEqual(0); expect(actual.y).toEqual(0); expect(actual.width).toEqual(0); @@ -60,6 +69,7 @@ describe('ImageBadge', () => { it('should return defaultimageMeta if browser property is not provided', () => { const { browser } = imageBadge; + expect(browser.x).toEqual(0); expect(browser.y).toEqual(0); expect(browser.width).toEqual(0); @@ -73,9 +83,11 @@ describe('ImageBadge', () => { }); it('should generate browser property', () => { - const imageBadge = new ImageBadge(Object.assign({}, options, { - imageEl: document.createElement('img'), - })); + 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 index 346282328c7..21e7b8e2e9b 100644 --- a/spec/javascripts/image_diff/image_diff_spec.js +++ b/spec/javascripts/image_diff/image_diff_spec.js @@ -117,23 +117,15 @@ describe('ImageDiff', () => { 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.returnValue(true); - imageDiff = new ImageDiff(element); - imageDiff.imageEl = imageEl; + expect(imageDiffHelper.commentIndicatorOnClick).toHaveBeenCalled(); }); - - it('should renderBadges', () => {}); }); describe('image not loaded', () => { @@ -147,6 +139,7 @@ describe('ImageDiff', () => { it('should registers load eventListener', () => { const loadEvent = new Event('load'); imageEl.dispatchEvent(loadEvent); + expect(imageDiff.renderBadges).toHaveBeenCalled(); }); }); @@ -164,24 +157,28 @@ describe('ImageDiff', () => { 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(); }); }); @@ -197,6 +194,7 @@ describe('ImageDiff', () => { it('should not register click.imageDiff event', () => { const event = new CustomEvent('click.imageDiff'); element.dispatchEvent(event); + expect(imageDiff.imageClicked).not.toHaveBeenCalled(); }); }); @@ -240,6 +238,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); }); }); @@ -336,6 +335,7 @@ describe('ImageDiff', () => { 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); diff --git a/spec/javascripts/image_diff/init_discussion_tab_spec.js b/spec/javascripts/image_diff/init_discussion_tab_spec.js index 7c447d6f70d..7cacc45ab62 100644 --- a/spec/javascripts/image_diff/init_discussion_tab_spec.js +++ b/spec/javascripts/image_diff/init_discussion_tab_spec.js @@ -11,7 +11,7 @@ describe('initDiscussionTab', () => { `); }); - it('should pass canCreateNote as false to initImageDiff', (done) => { + it('should pass canCreateNote as false to initImageDiff', done => { spyOn(imageDiffHelper, 'initImageDiff').and.callFake((diffFileEl, canCreateNote) => { expect(canCreateNote).toEqual(false); done(); @@ -20,11 +20,13 @@ describe('initDiscussionTab', () => { initDiscussionTab(); }); - it('should pass renderCommentBadge as true to initImageDiff', (done) => { - spyOn(imageDiffHelper, 'initImageDiff').and.callFake((diffFileEl, canCreateNote, renderCommentBadge) => { - expect(renderCommentBadge).toEqual(true); - done(); - }); + it('should pass renderCommentBadge as true to initImageDiff', done => { + spyOn(imageDiffHelper, 'initImageDiff').and.callFake( + (diffFileEl, canCreateNote, renderCommentBadge) => { + expect(renderCommentBadge).toEqual(true); + done(); + }, + ); initDiscussionTab(); }); @@ -32,6 +34,7 @@ describe('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 index 5f8cd7c531a..62e7c8b6c6a 100644 --- a/spec/javascripts/image_diff/replaced_image_diff_spec.js +++ b/spec/javascripts/image_diff/replaced_image_diff_spec.js @@ -37,16 +37,28 @@ describe('ReplacedImageDiff', () => { function setupImageFrameEls() { 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'); + 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', + ); } function setupViewModesEls() { 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'); + 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', + ); } function setupImageEls() { @@ -58,6 +70,7 @@ describe('ReplacedImageDiff', () => { it('should extend ImageDiff', () => { replacedImageDiff = new ReplacedImageDiff(element); + expect(replacedImageDiff instanceof ImageDiff).toEqual(true); }); @@ -72,18 +85,36 @@ describe('ReplacedImageDiff', () => { 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')); + 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')); + 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', () => { @@ -97,6 +128,7 @@ describe('ReplacedImageDiff', () => { describe('currentView', () => { it('should set currentView', () => { replacedImageDiff.init(viewTypes.ONION_SKIN); + expect(replacedImageDiff.currentView).toEqual(viewTypes.ONION_SKIN); }); @@ -121,6 +153,7 @@ describe('ReplacedImageDiff', () => { 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')); @@ -138,11 +171,12 @@ describe('ReplacedImageDiff', () => { 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) => { + 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(); }); @@ -151,8 +185,8 @@ describe('ReplacedImageDiff', () => { replacedImageDiff.viewModesEls[viewTypes.TWO_UP].click(); }); - it('should register click eventlistener to swipe view mode', (done) => { - spyOn(ReplacedImageDiff.prototype, 'changeView').and.callFake((viewMode) => { + it('should register click eventlistener to swipe view mode', done => { + spyOn(ReplacedImageDiff.prototype, 'changeView').and.callFake(viewMode => { expect(viewMode).toEqual(viewTypes.SWIPE); done(); }); @@ -161,8 +195,8 @@ describe('ReplacedImageDiff', () => { replacedImageDiff.viewModesEls[viewTypes.SWIPE].click(); }); - it('should register click eventlistener to onion skin view mode', (done) => { - spyOn(ReplacedImageDiff.prototype, 'changeView').and.callFake((viewMode) => { + it('should register click eventlistener to onion skin view mode', done => { + spyOn(ReplacedImageDiff.prototype, 'changeView').and.callFake(viewMode => { expect(viewMode).toEqual(viewTypes.SWIPE); done(); }); @@ -184,6 +218,7 @@ describe('ReplacedImageDiff', () => { expect(replacedImageDiff.imageEl).toEqual(element.querySelector('.two-up img')); replacedImageDiff.currentView = viewTypes.SWIPE; + expect(replacedImageDiff.imageEl).toEqual(element.querySelector('.swipe img')); }); }); @@ -196,10 +231,15 @@ describe('ReplacedImageDiff', () => { }); it('should return imageFrameEl based on currentView', () => { - expect(replacedImageDiff.imageFrameEl).toEqual(element.querySelector('.two-up .js-image-frame')); + 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')); + + expect(replacedImageDiff.imageFrameEl).toEqual( + element.querySelector('.onion-skin .js-image-frame'), + ); }); }); }); @@ -248,6 +288,7 @@ describe('ReplacedImageDiff', () => { it('should call renderNewView', () => { jasmine.clock().tick(251); + expect(replacedImageDiff.renderNewView).toHaveBeenCalled(); }); }); @@ -284,7 +325,7 @@ describe('ReplacedImageDiff', () => { setupImageFrameEls(); }); - it('should pass showCommentIndicator normalized indicator values', (done) => { + 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); @@ -296,15 +337,17 @@ describe('ReplacedImageDiff', () => { replacedImageDiff.renderNewView(indicator); }); - it('should call showCommentIndicator', (done) => { + it('should call showCommentIndicator', done => { const normalized = { normalized: true, }; spyOn(imageDiffHelper, 'resizeCoordinatesToImageElement').and.returnValue(normalized); - spyOn(imageDiffHelper, 'showCommentIndicator').and.callFake((imageFrameEl, normalizedIndicator) => { - expect(normalizedIndicator).toEqual(normalized); - done(); - }); + spyOn(imageDiffHelper, 'showCommentIndicator').and.callFake( + (imageFrameEl, normalizedIndicator) => { + expect(normalizedIndicator).toEqual(normalized); + done(); + }, + ); replacedImageDiff.renderNewView(indicator); }); }); |