Skip to content

G
gitlab-ce
Commit 4510938a authored by Denys Mishunov's avatar Denys Mishunov
Browse files
Options

Merge branch 'himkp-jest-image-diffs' into 'master' 

Migrate spec/javascripts/image_diff tests to Jest

Closes #194239

See merge request gitlab-org/gitlab!31359
parents aa0e62f3 239c595f
Show whitespace changes
Inline Side-by-side
Showing with 66 additions and 65 deletions
app/assets/javascripts/image_diff/helpers/badge_helper.js
View file @ 4510938a
......@@ -15,7 +15,7 @@ export function createImageBadge(noteId, { x, y }, classNames = []) {
export function addImageBadge(containerEl, { coordinate, badgeText, noteId }) {
const buttonEl = createImageBadge(noteId, coordinate, ['badge', 'badge-pill']);
buttonEl.innerText = badgeText;
buttonEl.textContent = badgeText;
containerEl.appendChild(buttonEl);
}
......@@ -32,6 +32,6 @@ export function addAvatarBadge(el, event) {
// Add badge to new comment
const avatarBadgeEl = el.querySelector(`#${noteId} .badge`);
avatarBadgeEl.innerText = badgeNumber;
avatarBadgeEl.textContent = badgeNumber;
avatarBadgeEl.classList.remove('hidden');
}
app/assets/javascripts/image_diff/helpers/dom_helper.js
View file @ 4510938a
......@@ -11,12 +11,12 @@ export function setPositionDataAttribute(el, options) {
export function updateDiscussionAvatarBadgeNumber(discussionEl, newBadgeNumber) {
const avatarBadgeEl = discussionEl.querySelector('.image-diff-avatar-link .badge');
avatarBadgeEl.innerText = newBadgeNumber;
avatarBadgeEl.textContent = newBadgeNumber;
}
export function updateDiscussionBadgeNumber(discussionEl, newBadgeNumber) {
const discussionBadgeEl = discussionEl.querySelector('.badge');
discussionBadgeEl.innerText = newBadgeNumber;
discussionBadgeEl.textContent = newBadgeNumber;
}
export function toggleCollapsed(event) {
......
app/assets/javascripts/image_diff/image_diff.js
View file @ 4510938a
......@@ -128,7 +128,7 @@ export default class ImageDiff {
const updatedBadgeNumber = index;
const discussionEl = this.el.querySelector(`#discussion_${discussionId}`);
imageBadgeEls[index].innerText = updatedBadgeNumber;
imageBadgeEls[index].textContent = updatedBadgeNumber;
imageDiffHelper.updateDiscussionBadgeNumber(discussionEl, updatedBadgeNumber);
imageDiffHelper.updateDiscussionAvatarBadgeNumber(discussionEl, updatedBadgeNumber);
......
spec/javascripts/image_diff/helpers/badge_helper_spec.js → spec/frontend/image_diff/helpers/badge_helper_spec.js
View file @ 4510938a
......@@ -66,7 +66,7 @@ describe('badge helper', () => {
});
it('should set the badge text', () => {
expect(buttonEl.innerText).toEqual(badgeText);
expect(buttonEl.textContent).toEqual(badgeText);
});
it('should set the button coordinates', () => {
......@@ -120,7 +120,7 @@ describe('badge helper', () => {
});
it('should update badge number', () => {
expect(avatarBadgeEl.innerText).toEqual(badgeNumber.toString());
expect(avatarBadgeEl.textContent).toEqual(badgeNumber.toString());
});
it('should remove hidden class', () => {
......
spec/javascripts/image_diff/helpers/comment_indicator_helper_spec.js → spec/frontend/image_diff/helpers/comment_indicator_helper_spec.js
View file @ 4510938a
......@@ -128,8 +128,8 @@ describe('commentIndicatorHelper', () => {
currentTarget: containerEl.querySelector('button'),
};
spyOn(event, 'stopPropagation');
spyOn(textAreaEl, 'focus');
jest.spyOn(event, 'stopPropagation').mockImplementation(() => {});
jest.spyOn(textAreaEl, 'focus').mockImplementation(() => {});
commentIndicatorHelper.commentIndicatorOnClick(event);
});
......
spec/javascripts/image_diff/helpers/dom_helper_spec.js → spec/frontend/image_diff/helpers/dom_helper_spec.js
View file @ 4510938a
......@@ -44,7 +44,7 @@ describe('domHelper', () => {
});
it('should update avatar badge number', () => {
expect(discussionEl.querySelector('.badge').innerText).toEqual(badgeNumber.toString());
expect(discussionEl.querySelector('.badge').textContent).toEqual(badgeNumber.toString());
});
});
......@@ -60,7 +60,7 @@ describe('domHelper', () => {
});
it('should update discussion badge number', () => {
expect(discussionEl.querySelector('.badge').innerText).toEqual(badgeNumber.toString());
expect(discussionEl.querySelector('.badge').textContent).toEqual(badgeNumber.toString());
});
});
......
spec/javascripts/image_diff/image_badge_spec.js → spec/frontend/image_diff/image_badge_spec.js
View file @ 4510938a
......@@ -71,7 +71,7 @@ describe('ImageBadge', () => {
describe('imageEl property is provided and not browser property', () => {
beforeEach(() => {
spyOn(imageDiffHelper, 'resizeCoordinatesToImageElement').and.returnValue(true);
jest.spyOn(imageDiffHelper, 'resizeCoordinatesToImageElement').mockReturnValue(true);
});
it('should generate browser property', () => {
......
spec/javascripts/image_diff/image_diff_spec.js → spec/frontend/image_diff/image_diff_spec.js
View file @ 4510938a
......@@ -75,7 +75,7 @@ describe('ImageDiff', () => {
describe('init', () => {
beforeEach(() => {
spyOn(ImageDiff.prototype, 'bindEvents').and.callFake(() => {});
jest.spyOn(ImageDiff.prototype, 'bindEvents').mockImplementation(() => {});
imageDiff = new ImageDiff(element);
imageDiff.init();
});
......@@ -97,19 +97,19 @@ describe('ImageDiff', () => {
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(() => {});
jest.spyOn(imageDiffHelper, 'toggleCollapsed').mockImplementation(() => {});
jest.spyOn(imageDiffHelper, 'commentIndicatorOnClick').mockImplementation(() => {});
jest.spyOn(imageDiffHelper, 'removeCommentIndicator').mockImplementation(() => {});
jest.spyOn(ImageDiff.prototype, 'imageClicked').mockImplementation(() => {});
jest.spyOn(ImageDiff.prototype, 'addBadge').mockImplementation(() => {});
jest.spyOn(ImageDiff.prototype, 'removeBadge').mockImplementation(() => {});
jest.spyOn(ImageDiff.prototype, 'renderBadges').mockImplementation(() => {});
imageEl = element.querySelector('.diff-file .js-image-frame img');
});
describe('default', () => {
beforeEach(() => {
spyOn(imageUtility, 'isImageLoaded').and.returnValue(false);
jest.spyOn(imageUtility, 'isImageLoaded').mockReturnValue(false);
imageDiff = new ImageDiff(element);
imageDiff.imageEl = imageEl;
imageDiff.bindEvents();
......@@ -130,7 +130,7 @@ describe('ImageDiff', () => {
describe('image not loaded', () => {
beforeEach(() => {
spyOn(imageUtility, 'isImageLoaded').and.returnValue(false);
jest.spyOn(imageUtility, 'isImageLoaded').mockReturnValue(false);
imageDiff = new ImageDiff(element);
imageDiff.imageEl = imageEl;
imageDiff.bindEvents();
......@@ -146,7 +146,7 @@ describe('ImageDiff', () => {
describe('canCreateNote', () => {
beforeEach(() => {
spyOn(imageUtility, 'isImageLoaded').and.returnValue(false);
jest.spyOn(imageUtility, 'isImageLoaded').mockReturnValue(false);
imageDiff = new ImageDiff(element, {
canCreateNote: true,
});
......@@ -185,7 +185,7 @@ describe('ImageDiff', () => {
describe('canCreateNote is false', () => {
beforeEach(() => {
spyOn(imageUtility, 'isImageLoaded').and.returnValue(false);
jest.spyOn(imageUtility, 'isImageLoaded').mockReturnValue(false);
imageDiff = new ImageDiff(element);
imageDiff.imageEl = imageEl;
imageDiff.bindEvents();
......@@ -202,12 +202,12 @@ describe('ImageDiff', () => {
describe('imageClicked', () => {
beforeEach(() => {
spyOn(imageDiffHelper, 'getTargetSelection').and.returnValue({
jest.spyOn(imageDiffHelper, 'getTargetSelection').mockReturnValue({
actual: {},
browser: {},
});
spyOn(imageDiffHelper, 'setPositionDataAttribute').and.callFake(() => {});
spyOn(imageDiffHelper, 'showCommentIndicator').and.callFake(() => {});
jest.spyOn(imageDiffHelper, 'setPositionDataAttribute').mockImplementation(() => {});
jest.spyOn(imageDiffHelper, 'showCommentIndicator').mockImplementation(() => {});
imageDiff = new ImageDiff(element);
imageDiff.imageClicked({
detail: {
......@@ -231,7 +231,7 @@ describe('ImageDiff', () => {
describe('renderBadges', () => {
beforeEach(() => {
spyOn(ImageDiff.prototype, 'renderBadge').and.callFake(() => {});
jest.spyOn(ImageDiff.prototype, 'renderBadge').mockImplementation(() => {});
imageDiff = new ImageDiff(element);
imageDiff.renderBadges();
});
......@@ -239,7 +239,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);
expect(imageDiff.renderBadge.mock.calls.length).toEqual(discussionEls.length);
});
});
......@@ -247,9 +247,9 @@ describe('ImageDiff', () => {
let discussionEls;
beforeEach(() => {
spyOn(imageDiffHelper, 'addImageBadge').and.callFake(() => {});
spyOn(imageDiffHelper, 'addImageCommentBadge').and.callFake(() => {});
spyOn(imageDiffHelper, 'generateBadgeFromDiscussionDOM').and.returnValue({
jest.spyOn(imageDiffHelper, 'addImageBadge').mockImplementation(() => {});
jest.spyOn(imageDiffHelper, 'addImageCommentBadge').mockImplementation(() => {});
jest.spyOn(imageDiffHelper, 'generateBadgeFromDiscussionDOM').mockReturnValue({
browser: {},
noteId: 'noteId',
});
......@@ -282,9 +282,9 @@ describe('ImageDiff', () => {
describe('addBadge', () => {
beforeEach(() => {
spyOn(imageDiffHelper, 'addImageBadge').and.callFake(() => {});
spyOn(imageDiffHelper, 'addAvatarBadge').and.callFake(() => {});
spyOn(imageDiffHelper, 'updateDiscussionBadgeNumber').and.callFake(() => {});
jest.spyOn(imageDiffHelper, 'addImageBadge').mockImplementation(() => {});
jest.spyOn(imageDiffHelper, 'addAvatarBadge').mockImplementation(() => {});
jest.spyOn(imageDiffHelper, 'updateDiscussionBadgeNumber').mockImplementation(() => {});
imageDiff = new ImageDiff(element);
imageDiff.imageFrameEl = element.querySelector('.diff-file .js-image-frame');
imageDiff.addBadge({
......@@ -320,8 +320,8 @@ describe('ImageDiff', () => {
beforeEach(() => {
const { imageMeta } = mockData;
spyOn(imageDiffHelper, 'updateDiscussionBadgeNumber').and.callFake(() => {});
spyOn(imageDiffHelper, 'updateDiscussionAvatarBadgeNumber').and.callFake(() => {});
jest.spyOn(imageDiffHelper, 'updateDiscussionBadgeNumber').mockImplementation(() => {});
jest.spyOn(imageDiffHelper, 'updateDiscussionAvatarBadgeNumber').mockImplementation(() => {});
imageDiff = new ImageDiff(element);
imageDiff.imageBadges = [imageMeta, imageMeta, imageMeta];
imageDiff.imageFrameEl = element.querySelector('.diff-file .js-image-frame');
......@@ -336,8 +336,8 @@ describe('ImageDiff', () => {
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[0].textContent).toEqual('1');
expect(imageBadgeEls[1].textContent).toEqual('2');
expect(imageBadgeEls.length).toEqual(2);
});
......
spec/javascripts/image_diff/replaced_image_diff_spec.js → spec/frontend/image_diff/replaced_image_diff_spec.js
View file @ 4510938a
......@@ -76,8 +76,8 @@ describe('ReplacedImageDiff', () => {
describe('init', () => {
beforeEach(() => {
spyOn(ReplacedImageDiff.prototype, 'bindEvents').and.callFake(() => {});
spyOn(ReplacedImageDiff.prototype, 'generateImageEls').and.callFake(() => {});
jest.spyOn(ReplacedImageDiff.prototype, 'bindEvents').mockImplementation(() => {});
jest.spyOn(ReplacedImageDiff.prototype, 'generateImageEls').mockImplementation(() => {});
replacedImageDiff = new ReplacedImageDiff(element);
replacedImageDiff.init();
......@@ -140,7 +140,7 @@ describe('ReplacedImageDiff', () => {
describe('generateImageEls', () => {
beforeEach(() => {
spyOn(ReplacedImageDiff.prototype, 'bindEvents').and.callFake(() => {});
jest.spyOn(ReplacedImageDiff.prototype, 'bindEvents').mockImplementation(() => {});
replacedImageDiff = new ReplacedImageDiff(element, {
canCreateNote: false,
......@@ -163,7 +163,7 @@ describe('ReplacedImageDiff', () => {
describe('bindEvents', () => {
beforeEach(() => {
spyOn(ImageDiff.prototype, 'bindEvents').and.callFake(() => {});
jest.spyOn(ImageDiff.prototype, 'bindEvents').mockImplementation(() => {});
replacedImageDiff = new ReplacedImageDiff(element);
setupViewModesEls();
......@@ -176,7 +176,7 @@ describe('ReplacedImageDiff', () => {
});
it('should register click eventlistener to 2-up view mode', done => {
spyOn(ReplacedImageDiff.prototype, 'changeView').and.callFake(viewMode => {
jest.spyOn(ReplacedImageDiff.prototype, 'changeView').mockImplementation(viewMode => {
expect(viewMode).toEqual(viewTypes.TWO_UP);
done();
});
......@@ -186,7 +186,7 @@ describe('ReplacedImageDiff', () => {
});
it('should register click eventlistener to swipe view mode', done => {
spyOn(ReplacedImageDiff.prototype, 'changeView').and.callFake(viewMode => {
jest.spyOn(ReplacedImageDiff.prototype, 'changeView').mockImplementation(viewMode => {
expect(viewMode).toEqual(viewTypes.SWIPE);
done();
});
......@@ -196,7 +196,7 @@ describe('ReplacedImageDiff', () => {
});
it('should register click eventlistener to onion skin view mode', done => {
spyOn(ReplacedImageDiff.prototype, 'changeView').and.callFake(viewMode => {
jest.spyOn(ReplacedImageDiff.prototype, 'changeView').mockImplementation(viewMode => {
expect(viewMode).toEqual(viewTypes.SWIPE);
done();
});
......@@ -247,7 +247,7 @@ describe('ReplacedImageDiff', () => {
describe('changeView', () => {
beforeEach(() => {
replacedImageDiff = new ReplacedImageDiff(element);
spyOn(imageDiffHelper, 'removeCommentIndicator').and.returnValue({
jest.spyOn(imageDiffHelper, 'removeCommentIndicator').mockReturnValue({
removed: false,
});
setupImageFrameEls();
......@@ -265,13 +265,12 @@ describe('ReplacedImageDiff', () => {
describe('valid viewType', () => {
beforeEach(() => {
jasmine.clock().install();
spyOn(ReplacedImageDiff.prototype, 'renderNewView').and.callFake(() => {});
jest.spyOn(ReplacedImageDiff.prototype, 'renderNewView').mockImplementation(() => {});
replacedImageDiff.changeView(viewTypes.ONION_SKIN);
});
afterEach(() => {
jasmine.clock().uninstall();
jest.clearAllTimers();
});
it('should call removeCommentIndicator', () => {
......@@ -287,7 +286,7 @@ describe('ReplacedImageDiff', () => {
});
it('should call renderNewView', () => {
jasmine.clock().tick(251);
jest.advanceTimersByTime(251);
expect(replacedImageDiff.renderNewView).toHaveBeenCalled();
});
......@@ -300,7 +299,7 @@ describe('ReplacedImageDiff', () => {
});
it('should call renderBadges', () => {
spyOn(ReplacedImageDiff.prototype, 'renderBadges').and.callFake(() => {});
jest.spyOn(ReplacedImageDiff.prototype, 'renderBadges').mockImplementation(() => {});
replacedImageDiff.renderNewView({
removed: false,
......@@ -326,8 +325,10 @@ describe('ReplacedImageDiff', () => {
});
it('should pass showCommentIndicator normalized indicator values', done => {
spyOn(imageDiffHelper, 'showCommentIndicator').and.callFake(() => {});
spyOn(imageDiffHelper, 'resizeCoordinatesToImageElement').and.callFake((imageEl, meta) => {
jest.spyOn(imageDiffHelper, 'showCommentIndicator').mockImplementation(() => {});
jest
.spyOn(imageDiffHelper, 'resizeCoordinatesToImageElement')
.mockImplementation((imageEl, meta) => {
expect(meta.x).toEqual(indicator.x);
expect(meta.y).toEqual(indicator.y);
expect(meta.width).toEqual(indicator.image.width);
......@@ -341,13 +342,13 @@ describe('ReplacedImageDiff', () => {
const normalized = {
normalized: true,
};
spyOn(imageDiffHelper, 'resizeCoordinatesToImageElement').and.returnValue(normalized);
spyOn(imageDiffHelper, 'showCommentIndicator').and.callFake(
(imageFrameEl, normalizedIndicator) => {
jest.spyOn(imageDiffHelper, 'resizeCoordinatesToImageElement').mockReturnValue(normalized);
jest
.spyOn(imageDiffHelper, 'showCommentIndicator')
.mockImplementation((imageFrameEl, normalizedIndicator) => {
expect(normalizedIndicator).toEqual(normalized);
done();
},
);
});
replacedImageDiff.renderNewView(indicator);
});
});
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment
GitLab Nexedi Edition | About GitLab | About Nexedi | 沪ICP备2021021310号-2 | 沪ICP备2021021310号-7