gitlab-org--gitlab-foss/spec/frontend/image_diff/helpers/badge_helper_spec.js

130 lines
3.5 KiB
JavaScript

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.textContent).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.textContent).toEqual(badgeNumber.toString());
});
it('should remove hidden class', () => {
expect(avatarBadgeEl.classList.contains('hidden')).toEqual(false);
});
});
});