gitlab-org--gitlab-foss/spec/javascripts/boards/issue_card_spec.js

303 lines
7.3 KiB
JavaScript
Raw Normal View History

/* global ListAssignee */
2017-01-26 07:55:08 -05:00
/* global ListLabel */
/* global ListIssue */
2017-03-17 13:21:25 -04:00
import Vue from 'vue';
2018-03-05 07:35:58 -05:00
import '~/vue_shared/models/label';
import '~/boards/models/issue';
import '~/boards/models/list';
import '~/boards/models/assignee';
import '~/boards/stores/boards_store';
import '~/boards/components/issue_card_inner';
2017-12-15 03:31:14 -05:00
import { listObj } from './mock_data';
2017-01-26 07:55:08 -05:00
describe('Issue card component', () => {
const user = new ListAssignee({
2017-01-26 07:55:08 -05:00
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',
2017-09-06 02:49:19 -04:00
id: 1,
2017-01-26 07:55:08 -05:00
iid: 1,
confidential: false,
labels: [list.label],
assignees: [],
2018-04-05 11:28:49 -04:00
reference_path: '#1',
2018-04-05 13:57:48 -04:00
real_path: '/test/1',
2017-01-26 07:55:08 -05:00
});
component = new Vue({
el: document.querySelector('.test-container'),
components: {
'issue-card': gl.issueBoards.IssueCardInner,
},
2017-01-26 07:55:08 -05:00
data() {
return {
list,
issue,
issueLinkBase: '/test',
2017-01-31 06:54:04 -05:00
rootPath: '/',
2017-01-26 07:55:08 -05:00
};
},
template: `
<issue-card
:issue="issue"
:list="list"
2017-01-31 06:54:04 -05:00
:issue-link-base="issueLinkBase"
:root-path="rootPath"></issue-card>
2017-01-26 07:55:08 -05:00
`,
});
});
it('renders issue title', () => {
expect(
component.$el.querySelector('.card-title').textContent,
).toContain(issue.title);
});
it('includes issue base in link', () => {
expect(
component.$el.querySelector('.card-title a').getAttribute('href'),
).toContain('/test');
});
it('includes issue title on link', () => {
expect(
component.$el.querySelector('.card-title a').getAttribute('title'),
).toBe(issue.title);
});
it('does not render confidential icon', () => {
expect(
component.$el.querySelector('.fa-eye-flash'),
).toBeNull();
});
it('renders confidential icon', (done) => {
component.issue.confidential = true;
Vue.nextTick(() => {
2017-01-26 07:55:08 -05:00
expect(
2017-01-30 09:11:09 -05:00
component.$el.querySelector('.confidential-icon'),
2017-01-26 07:55:08 -05:00
).not.toBeNull();
done();
});
2017-01-26 07:55:08 -05:00
});
it('renders issue ID with #', () => {
expect(
component.$el.querySelector('.card-number').textContent,
).toContain(`#${issue.id}`);
});
describe('assignee', () => {
it('does not render assignee', () => {
expect(
component.$el.querySelector('.card-assignee .avatar'),
2017-01-26 07:55:08 -05:00
).toBeNull();
});
describe('exists', () => {
beforeEach((done) => {
component.issue.assignees = [user];
2017-01-26 07:55:08 -05:00
Vue.nextTick(() => done());
2017-01-26 07:55:08 -05:00
});
it('renders assignee', () => {
expect(
component.$el.querySelector('.card-assignee .avatar'),
2017-01-26 07:55:08 -05:00
).not.toBeNull();
});
it('sets title', () => {
expect(
2017-04-15 19:38:07 -04:00
component.$el.querySelector('.card-assignee img').getAttribute('data-original-title'),
2017-01-26 07:55:08 -05:00
).toContain(`Assigned to ${user.name}`);
});
it('sets users path', () => {
expect(
component.$el.querySelector('.card-assignee a').getAttribute('href'),
2017-01-31 06:54:04 -05:00
).toBe('/test');
2017-01-26 07:55:08 -05:00
});
it('renders avatar', () => {
expect(
component.$el.querySelector('.card-assignee img'),
).not.toBeNull();
});
});
2017-05-04 11:33:25 -04:00
describe('assignee default avatar', () => {
beforeEach((done) => {
2017-05-05 10:19:58 -04:00
component.issue.assignees = [new ListAssignee({
2017-05-04 11:33:25 -04:00
id: 1,
name: 'testing 123',
username: 'test',
2017-05-05 10:19:58 -04:00
}, 'default_avatar')];
2017-05-04 11:33:25 -04:00
Vue.nextTick(done);
});
it('displays defaults avatar if users avatar is null', () => {
expect(
component.$el.querySelector('.card-assignee img'),
).not.toBeNull();
expect(
component.$el.querySelector('.card-assignee img').getAttribute('src'),
).toBe('default_avatar');
});
});
2017-01-26 07:55:08 -05:00
});
describe('multiple assignees', () => {
beforeEach((done) => {
component.issue.assignees = [
user,
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',
})];
Vue.nextTick(() => done());
});
it('renders all four assignees', () => {
expect(component.$el.querySelectorAll('.card-assignee .avatar').length).toEqual(4);
});
describe('more than four assignees', () => {
beforeEach((done) => {
component.issue.assignees.push(new ListAssignee({
id: 5,
name: 'user5',
username: 'user5',
avatar: 'test_image',
}));
Vue.nextTick(() => done());
});
it('renders more avatar counter', () => {
expect(component.$el.querySelector('.card-assignee .avatar-counter').innerText).toEqual('+2');
});
it('renders three assignees', () => {
expect(component.$el.querySelectorAll('.card-assignee .avatar').length).toEqual(3);
});
it('renders 99+ avatar counter', (done) => {
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(() => {
expect(component.$el.querySelector('.card-assignee .avatar-counter').innerText).toEqual('99+');
done();
});
});
});
});
2017-01-26 07:55:08 -05:00
describe('labels', () => {
2017-09-06 02:49:19 -04:00
beforeEach((done) => {
component.issue.addLabel(label1);
2017-01-26 07:55:08 -05:00
2017-09-06 02:49:19 -04:00
Vue.nextTick(() => done());
});
2017-01-26 07:55:08 -05:00
2017-09-06 02:49:19 -04:00
it('renders list label', () => {
expect(
component.$el.querySelectorAll('.label').length,
).toBe(2);
});
it('renders label', () => {
const nodes = [];
component.$el.querySelectorAll('.label').forEach((label) => {
nodes.push(label.title);
2017-01-26 07:55:08 -05:00
});
2017-09-06 02:49:19 -04:00
expect(
nodes.includes(label1.description),
).toBe(true);
});
2017-08-07 21:52:18 -04:00
2017-09-06 02:49:19 -04:00
it('sets label description as title', () => {
expect(
component.$el.querySelector('.label').getAttribute('title'),
).toContain(label1.description);
});
2017-01-26 07:55:08 -05:00
2017-09-06 02:49:19 -04:00
it('sets background color of button', () => {
const nodes = [];
component.$el.querySelectorAll('.label').forEach((label) => {
nodes.push(label.style.backgroundColor);
2017-01-26 07:55:08 -05:00
});
2017-09-06 02:49:19 -04:00
expect(
nodes.includes(label1.color),
).toBe(true);
});
2017-08-07 21:52:18 -04:00
2017-09-06 02:49:19 -04:00
it('does not render label if label does not have an ID', (done) => {
component.issue.addLabel(new ListLabel({
title: 'closed',
}));
2017-09-06 02:49:19 -04:00
Vue.nextTick()
.then(() => {
expect(
component.$el.querySelectorAll('.label').length,
).toBe(2);
expect(
component.$el.textContent,
).not.toContain('closed');
2017-09-06 02:49:19 -04:00
done();
})
.catch(done.fail);
2017-01-26 07:55:08 -05:00
});
});
});