gitlab-org--gitlab-foss/spec/javascripts/image_diff/helpers/dom_helper_spec.js
2017-10-07 04:25:17 +00:00

118 lines
3.5 KiB
JavaScript

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');
});
});
});
});