diff options
Diffstat (limited to 'spec/javascripts/image_diff/helpers')
4 files changed, 0 insertions, 546 deletions
diff --git a/spec/javascripts/image_diff/helpers/badge_helper_spec.js b/spec/javascripts/image_diff/helpers/badge_helper_spec.js deleted file mode 100644 index b3001d45e3c..00000000000 --- a/spec/javascripts/image_diff/helpers/badge_helper_spec.js +++ /dev/null @@ -1,130 +0,0 @@ -import * as badgeHelper from '~/image_diff/helpers/badge_helper'; -import * as mockData from '../mock_data'; - -describe('badge helper', () => { - const { coordinate, noteId, badgeText, badgeNumber } = mockData; - 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', () => { - beforeEach(() => { - badgeHelper.addImageBadge(containerEl, { - coordinate, - badgeText, - noteId, - }); - buttonEl = containerEl.querySelector('button'); - }); - - it('should appends button to container', () => { - expect(buttonEl).toBeDefined(); - }); - - it('should add badge classes', () => { - expect(buttonEl.className).toContain('badge badge-pill'); - }); - - 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('svg'); - - expect(iconEl).toBeDefined(); - }); - }); - - describe('addAvatarBadge', () => { - 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 deleted file mode 100644 index 8e3e7f1222e..00000000000 --- a/spec/javascripts/image_diff/helpers/comment_indicator_helper_spec.js +++ /dev/null @@ -1,144 +0,0 @@ -import * as commentIndicatorHelper from '~/image_diff/helpers/comment_indicator_helper'; -import * as mockData from '../mock_data'; - -describe('commentIndicatorHelper', () => { - const { coordinate } = mockData; - 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')).not.toBe(-1); - }); - }); - }); - - 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 deleted file mode 100644 index ffe712af2dd..00000000000 --- a/spec/javascripts/image_diff/helpers/dom_helper_spec.js +++ /dev/null @@ -1,120 +0,0 @@ -import * as domHelper from '~/image_diff/helpers/dom_helper'; -import * as mockData from '../mock_data'; - -describe('domHelper', () => { - const { imageMeta, badgeNumber } = mockData; - - describe('setPositionDataAttribute', () => { - let containerEl; - let attributeAfterCall; - const position = { - myProperty: 'myProperty', - }; - - beforeEach(() => { - containerEl = document.createElement('div'); - containerEl.dataset.position = JSON.stringify(position); - domHelper.setPositionDataAttribute(containerEl, imageMeta); - attributeAfterCall = JSON.parse(containerEl.dataset.position); - }); - - it('should set x, y, width, height', () => { - expect(attributeAfterCall.x).toEqual(imageMeta.x); - expect(attributeAfterCall.y).toEqual(imageMeta.y); - expect(attributeAfterCall.width).toEqual(imageMeta.width); - expect(attributeAfterCall.height).toEqual(imageMeta.height); - }); - - it('should not override other properties', () => { - expect(attributeAfterCall.myProperty).toEqual('myProperty'); - }); - }); - - describe('updateDiscussionAvatarBadgeNumber', () => { - let discussionEl; - - 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; - - 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 deleted file mode 100644 index 3b6378be883..00000000000 --- a/spec/javascripts/image_diff/helpers/utils_helper_spec.js +++ /dev/null @@ -1,152 +0,0 @@ -import * as utilsHelper from '~/image_diff/helpers/utils_helper'; -import ImageBadge from '~/image_diff/image_badge'; -import * as mockData from '../mock_data'; - -describe('utilsHelper', () => { - const { noteId, discussionId, image, imageProperties, imageMeta } = mockData; - - describe('resizeCoordinatesToImageElement', () => { - let result; - - beforeEach(() => { - result = utilsHelper.resizeCoordinatesToImageElement(image, imageMeta); - }); - - it('should return x based on widthRatio', () => { - expect(result.x).toEqual(imageMeta.x * 0.5); - }); - - it('should return y based on heightRatio', () => { - expect(result.y).toEqual(imageMeta.y * 0.5); - }); - - it('should return image width', () => { - expect(result.width).toEqual(image.width); - }); - - it('should return image height', () => { - expect(result.height).toEqual(image.height); - }); - }); - - describe('generateBadgeFromDiscussionDOM', () => { - let discussionEl; - let result; - - 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(imageMeta); - result = utilsHelper.generateBadgeFromDiscussionDOM(imageFrameEl, discussionEl); - }); - - 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); - expect(actual.height).toEqual(imageMeta.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; - - beforeEach(() => { - containerEl = { - querySelector: () => imageProperties, - }; - }); - - 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(imageProperties.width); - expect(browser.height).toEqual(imageProperties.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(imageProperties.naturalWidth); - expect(actual.height).toEqual(imageProperties.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(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); - }); - }); - }); -}); |