debian-mirror-gitlab/spec/javascripts/boards/issue_card_spec.js

295 lines
7.4 KiB
JavaScript
Raw Normal View History

2017-08-17 22:00:37 +05:30
/* global ListAssignee */
/* global ListLabel */
/* global ListIssue */
import Vue from 'vue';
2019-09-04 21:01:54 +05:30
import '~/boards/models/label';
import '~/boards/models/assignee';
2017-08-17 22:00:37 +05:30
import '~/boards/models/issue';
import '~/boards/models/list';
2018-11-08 19:23:39 +05:30
import IssueCardInner from '~/boards/components/issue_card_inner.vue';
2018-03-17 18:26:18 +05:30
import { listObj } from './mock_data';
2017-08-17 22:00:37 +05:30
describe('Issue card component', () => {
const user = new ListAssignee({
id: 1,
name: 'testing 123',
username: 'test',
avatar: 'test_image',
});
const label1 = new ListLabel({
id: 3,
title: 'testing 123',
color: 'blue',
text_color: 'white',
description: 'test',
});
let component;
let issue;
let list;
beforeEach(() => {
setFixtures('<div class="test-container"></div>');
list = listObj;
issue = new ListIssue({
title: 'Testing',
2018-03-17 18:26:18 +05:30
id: 1,
2017-08-17 22:00:37 +05:30
iid: 1,
confidential: false,
labels: [list.label],
assignees: [],
2018-05-09 12:01:36 +05:30
reference_path: '#1',
real_path: '/test/1',
2017-08-17 22:00:37 +05:30
});
component = new Vue({
el: document.querySelector('.test-container'),
2018-03-17 18:26:18 +05:30
components: {
2018-11-08 19:23:39 +05:30
'issue-card': IssueCardInner,
2018-03-17 18:26:18 +05:30
},
2017-08-17 22:00:37 +05:30
data() {
return {
list,
issue,
issueLinkBase: '/test',
rootPath: '/',
};
},
template: `
<issue-card
:issue="issue"
:list="list"
:issue-link-base="issueLinkBase"
:root-path="rootPath"></issue-card>
`,
});
});
it('renders issue title', () => {
2018-11-18 11:00:15 +05:30
expect(component.$el.querySelector('.board-card-title').textContent).toContain(issue.title);
2017-08-17 22:00:37 +05:30
});
it('includes issue base in link', () => {
2018-11-18 11:00:15 +05:30
expect(component.$el.querySelector('.board-card-title a').getAttribute('href')).toContain(
'/test',
);
2017-08-17 22:00:37 +05:30
});
it('includes issue title on link', () => {
2018-11-18 11:00:15 +05:30
expect(component.$el.querySelector('.board-card-title a').getAttribute('title')).toBe(
issue.title,
);
2017-08-17 22:00:37 +05:30
});
it('does not render confidential icon', () => {
2018-11-18 11:00:15 +05:30
expect(component.$el.querySelector('.fa-eye-flash')).toBeNull();
2017-08-17 22:00:37 +05:30
});
2018-11-18 11:00:15 +05:30
it('renders confidential icon', done => {
2017-08-17 22:00:37 +05:30
component.issue.confidential = true;
Vue.nextTick(() => {
2018-11-18 11:00:15 +05:30
expect(component.$el.querySelector('.confidential-icon')).not.toBeNull();
2017-08-17 22:00:37 +05:30
done();
});
});
it('renders issue ID with #', () => {
2018-11-18 11:00:15 +05:30
expect(component.$el.querySelector('.board-card-number').textContent).toContain(`#${issue.id}`);
2017-08-17 22:00:37 +05:30
});
describe('assignee', () => {
it('does not render assignee', () => {
2018-11-18 11:00:15 +05:30
expect(component.$el.querySelector('.board-card-assignee .avatar')).toBeNull();
2017-08-17 22:00:37 +05:30
});
describe('exists', () => {
2018-11-18 11:00:15 +05:30
beforeEach(done => {
2017-08-17 22:00:37 +05:30
component.issue.assignees = [user];
Vue.nextTick(() => done());
});
it('renders assignee', () => {
2018-11-18 11:00:15 +05:30
expect(component.$el.querySelector('.board-card-assignee .avatar')).not.toBeNull();
2017-08-17 22:00:37 +05:30
});
it('sets title', () => {
2018-12-13 13:39:08 +05:30
expect(component.$el.querySelector('.js-assignee-tooltip').textContent).toContain(
`${user.name}`,
);
2017-08-17 22:00:37 +05:30
});
it('sets users path', () => {
2018-11-18 11:00:15 +05:30
expect(component.$el.querySelector('.board-card-assignee a').getAttribute('href')).toBe(
'/test',
);
2017-08-17 22:00:37 +05:30
});
it('renders avatar', () => {
2018-11-18 11:00:15 +05:30
expect(component.$el.querySelector('.board-card-assignee img')).not.toBeNull();
2017-08-17 22:00:37 +05:30
});
});
describe('assignee default avatar', () => {
2018-11-18 11:00:15 +05:30
beforeEach(done => {
component.issue.assignees = [
new ListAssignee(
{
id: 1,
name: 'testing 123',
username: 'test',
},
'default_avatar',
),
];
2017-08-17 22:00:37 +05:30
Vue.nextTick(done);
});
it('displays defaults avatar if users avatar is null', () => {
2018-11-18 11:00:15 +05:30
expect(component.$el.querySelector('.board-card-assignee img')).not.toBeNull();
expect(component.$el.querySelector('.board-card-assignee img').getAttribute('src')).toBe(
2018-12-13 13:39:08 +05:30
'default_avatar?width=24',
2018-11-18 11:00:15 +05:30
);
2017-08-17 22:00:37 +05:30
});
});
});
describe('multiple assignees', () => {
2018-11-18 11:00:15 +05:30
beforeEach(done => {
2017-08-17 22:00:37 +05:30
component.issue.assignees = [
new ListAssignee({
id: 2,
name: 'user2',
username: 'user2',
avatar: 'test_image',
}),
new ListAssignee({
id: 3,
name: 'user3',
username: 'user3',
avatar: 'test_image',
}),
new ListAssignee({
id: 4,
name: 'user4',
username: 'user4',
avatar: 'test_image',
2018-11-18 11:00:15 +05:30
}),
];
2017-08-17 22:00:37 +05:30
Vue.nextTick(() => done());
});
2018-12-13 13:39:08 +05:30
it('renders all three assignees', () => {
expect(component.$el.querySelectorAll('.board-card-assignee .avatar').length).toEqual(3);
2017-08-17 22:00:37 +05:30
});
2018-12-13 13:39:08 +05:30
describe('more than three assignees', () => {
2018-11-18 11:00:15 +05:30
beforeEach(done => {
component.issue.assignees.push(
new ListAssignee({
id: 5,
name: 'user5',
username: 'user5',
avatar: 'test_image',
}),
);
2017-08-17 22:00:37 +05:30
Vue.nextTick(() => done());
});
it('renders more avatar counter', () => {
2018-11-18 11:00:15 +05:30
expect(
2018-12-13 13:39:08 +05:30
component.$el.querySelector('.board-card-assignee .avatar-counter').innerText.trim(),
2018-11-18 11:00:15 +05:30
).toEqual('+2');
2017-08-17 22:00:37 +05:30
});
2018-12-13 13:39:08 +05:30
it('renders two assignees', () => {
expect(component.$el.querySelectorAll('.board-card-assignee .avatar').length).toEqual(2);
2017-08-17 22:00:37 +05:30
});
2018-11-18 11:00:15 +05:30
it('renders 99+ avatar counter', done => {
2017-08-17 22:00:37 +05:30
for (let i = 5; i < 104; i += 1) {
const u = new ListAssignee({
id: i,
name: 'name',
username: 'username',
avatar: 'test_image',
});
component.issue.assignees.push(u);
}
Vue.nextTick(() => {
2018-11-18 11:00:15 +05:30
expect(
2018-12-13 13:39:08 +05:30
component.$el.querySelector('.board-card-assignee .avatar-counter').innerText.trim(),
2018-11-18 11:00:15 +05:30
).toEqual('99+');
2017-08-17 22:00:37 +05:30
done();
});
});
});
});
describe('labels', () => {
2018-11-18 11:00:15 +05:30
beforeEach(done => {
2018-03-17 18:26:18 +05:30
component.issue.addLabel(label1);
2017-08-17 22:00:37 +05:30
2018-03-17 18:26:18 +05:30
Vue.nextTick(() => done());
});
2017-08-17 22:00:37 +05:30
2018-03-17 18:26:18 +05:30
it('renders list label', () => {
2018-11-18 11:00:15 +05:30
expect(component.$el.querySelectorAll('.badge').length).toBe(2);
2018-03-17 18:26:18 +05:30
});
it('renders label', () => {
const nodes = [];
2018-11-18 11:00:15 +05:30
component.$el.querySelectorAll('.badge').forEach(label => {
2018-11-08 19:23:39 +05:30
nodes.push(label.getAttribute('data-original-title'));
2017-08-17 22:00:37 +05:30
});
2018-11-18 11:00:15 +05:30
expect(nodes.includes(label1.description)).toBe(true);
2018-03-17 18:26:18 +05:30
});
2017-09-10 17:25:29 +05:30
2018-03-17 18:26:18 +05:30
it('sets label description as title', () => {
2018-11-18 11:00:15 +05:30
expect(component.$el.querySelector('.badge').getAttribute('data-original-title')).toContain(
label1.description,
);
2018-03-17 18:26:18 +05:30
});
2017-08-17 22:00:37 +05:30
2018-03-17 18:26:18 +05:30
it('sets background color of button', () => {
const nodes = [];
2018-11-18 11:00:15 +05:30
component.$el.querySelectorAll('.badge').forEach(label => {
2018-03-17 18:26:18 +05:30
nodes.push(label.style.backgroundColor);
2017-08-17 22:00:37 +05:30
});
2018-11-18 11:00:15 +05:30
expect(nodes.includes(label1.color)).toBe(true);
2018-03-17 18:26:18 +05:30
});
2017-09-10 17:25:29 +05:30
2018-11-18 11:00:15 +05:30
it('does not render label if label does not have an ID', done => {
component.issue.addLabel(
new ListLabel({
title: 'closed',
}),
);
2017-09-10 17:25:29 +05:30
2018-03-17 18:26:18 +05:30
Vue.nextTick()
.then(() => {
2018-11-18 11:00:15 +05:30
expect(component.$el.querySelectorAll('.badge').length).toBe(2);
expect(component.$el.textContent).not.toContain('closed');
2017-09-10 17:25:29 +05:30
2018-03-17 18:26:18 +05:30
done();
})
.catch(done.fail);
2017-08-17 22:00:37 +05:30
});
});
2019-07-31 22:56:46 +05:30
describe('weights', () => {
it('not shows weight component', () => {
expect(component.$el.querySelector('.board-card-weight')).toBeNull();
});
});
2017-08-17 22:00:37 +05:30
});