2019-10-31 09:06:29 +00:00
|
|
|
/* global ListAssignee, ListLabel, ListIssue */
|
|
|
|
import { mount } from '@vue/test-utils';
|
2020-01-22 00:08:47 +00:00
|
|
|
import { range } from 'lodash';
|
2019-10-31 09:06:29 +00:00
|
|
|
import '~/boards/models/label';
|
|
|
|
import '~/boards/models/assignee';
|
|
|
|
import '~/boards/models/issue';
|
|
|
|
import '~/boards/models/list';
|
|
|
|
import IssueCardInner from '~/boards/components/issue_card_inner.vue';
|
|
|
|
import { listObj } from '../../javascripts/boards/mock_data';
|
|
|
|
import store from '~/boards/stores';
|
2020-03-09 09:07:45 +00:00
|
|
|
import { GlLabel } from '@gitlab/ui';
|
2019-10-31 09:06:29 +00:00
|
|
|
|
|
|
|
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',
|
2020-03-09 09:07:45 +00:00
|
|
|
color: '#000CFF',
|
2019-10-31 09:06:29 +00:00
|
|
|
text_color: 'white',
|
|
|
|
description: 'test',
|
|
|
|
});
|
|
|
|
|
|
|
|
let wrapper;
|
|
|
|
let issue;
|
|
|
|
let list;
|
|
|
|
|
|
|
|
beforeEach(() => {
|
|
|
|
list = { ...listObj, type: 'label' };
|
|
|
|
issue = new ListIssue({
|
|
|
|
title: 'Testing',
|
|
|
|
id: 1,
|
|
|
|
iid: 1,
|
|
|
|
confidential: false,
|
|
|
|
labels: [list.label],
|
|
|
|
assignees: [],
|
|
|
|
reference_path: '#1',
|
|
|
|
real_path: '/test/1',
|
|
|
|
weight: 1,
|
|
|
|
});
|
|
|
|
wrapper = mount(IssueCardInner, {
|
|
|
|
propsData: {
|
|
|
|
list,
|
|
|
|
issue,
|
|
|
|
issueLinkBase: '/test',
|
|
|
|
rootPath: '/',
|
|
|
|
},
|
|
|
|
store,
|
2020-03-09 09:07:45 +00:00
|
|
|
stubs: {
|
|
|
|
GlLabel: true,
|
|
|
|
},
|
2019-10-31 09:06:29 +00:00
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
it('renders issue title', () => {
|
|
|
|
expect(wrapper.find('.board-card-title').text()).toContain(issue.title);
|
|
|
|
});
|
|
|
|
|
|
|
|
it('includes issue base in link', () => {
|
|
|
|
expect(wrapper.find('.board-card-title a').attributes('href')).toContain('/test');
|
|
|
|
});
|
|
|
|
|
|
|
|
it('includes issue title on link', () => {
|
|
|
|
expect(wrapper.find('.board-card-title a').attributes('title')).toBe(issue.title);
|
|
|
|
});
|
|
|
|
|
|
|
|
it('does not render confidential icon', () => {
|
2020-02-11 03:09:13 +00:00
|
|
|
expect(wrapper.find('.confidential-icon').exists()).toBe(false);
|
|
|
|
});
|
|
|
|
|
|
|
|
it('does not render blocked icon', () => {
|
|
|
|
expect(wrapper.find('.issue-blocked-icon').exists()).toBe(false);
|
2019-10-31 09:06:29 +00:00
|
|
|
});
|
|
|
|
|
|
|
|
it('renders confidential icon', done => {
|
|
|
|
wrapper.setProps({
|
|
|
|
issue: {
|
|
|
|
...wrapper.props('issue'),
|
|
|
|
confidential: true,
|
|
|
|
},
|
|
|
|
});
|
|
|
|
wrapper.vm.$nextTick(() => {
|
|
|
|
expect(wrapper.find('.confidential-icon').exists()).toBe(true);
|
|
|
|
done();
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
it('renders issue ID with #', () => {
|
|
|
|
expect(wrapper.find('.board-card-number').text()).toContain(`#${issue.id}`);
|
|
|
|
});
|
|
|
|
|
|
|
|
describe('assignee', () => {
|
|
|
|
it('does not render assignee', () => {
|
|
|
|
expect(wrapper.find('.board-card-assignee .avatar').exists()).toBe(false);
|
|
|
|
});
|
|
|
|
|
|
|
|
describe('exists', () => {
|
|
|
|
beforeEach(done => {
|
|
|
|
wrapper.setProps({
|
|
|
|
issue: {
|
|
|
|
...wrapper.props('issue'),
|
|
|
|
assignees: [user],
|
2020-01-31 09:08:53 +00:00
|
|
|
updateData(newData) {
|
|
|
|
Object.assign(this, newData);
|
|
|
|
},
|
2019-10-31 09:06:29 +00:00
|
|
|
},
|
|
|
|
});
|
|
|
|
|
|
|
|
wrapper.vm.$nextTick(done);
|
|
|
|
});
|
|
|
|
|
|
|
|
it('renders assignee', () => {
|
|
|
|
expect(wrapper.find('.board-card-assignee .avatar').exists()).toBe(true);
|
|
|
|
});
|
|
|
|
|
|
|
|
it('sets title', () => {
|
|
|
|
expect(wrapper.find('.js-assignee-tooltip').text()).toContain(`${user.name}`);
|
|
|
|
});
|
|
|
|
|
|
|
|
it('sets users path', () => {
|
|
|
|
expect(wrapper.find('.board-card-assignee a').attributes('href')).toBe('/test');
|
|
|
|
});
|
|
|
|
|
|
|
|
it('renders avatar', () => {
|
|
|
|
expect(wrapper.find('.board-card-assignee img').exists()).toBe(true);
|
|
|
|
});
|
2020-01-31 09:08:53 +00:00
|
|
|
|
|
|
|
it('renders the avatar using avatar_url property', done => {
|
|
|
|
wrapper.props('issue').updateData({
|
|
|
|
...wrapper.props('issue'),
|
|
|
|
assignees: [
|
|
|
|
{
|
|
|
|
id: '1',
|
|
|
|
name: 'test',
|
|
|
|
state: 'active',
|
|
|
|
username: 'test_name',
|
|
|
|
avatar_url: 'test_image_from_avatar_url',
|
|
|
|
},
|
|
|
|
],
|
|
|
|
});
|
|
|
|
|
|
|
|
wrapper.vm.$nextTick(() => {
|
|
|
|
expect(wrapper.find('.board-card-assignee img').attributes('src')).toBe(
|
|
|
|
'test_image_from_avatar_url?width=24',
|
|
|
|
);
|
|
|
|
done();
|
|
|
|
});
|
|
|
|
});
|
2019-10-31 09:06:29 +00:00
|
|
|
});
|
|
|
|
|
|
|
|
describe('assignee default avatar', () => {
|
|
|
|
beforeEach(done => {
|
2020-03-11 21:09:19 +00:00
|
|
|
global.gon.default_avatar_url = 'default_avatar';
|
|
|
|
|
2019-10-31 09:06:29 +00:00
|
|
|
wrapper.setProps({
|
|
|
|
issue: {
|
|
|
|
...wrapper.props('issue'),
|
|
|
|
assignees: [
|
2020-03-11 21:09:19 +00:00
|
|
|
new ListAssignee({
|
|
|
|
id: 1,
|
|
|
|
name: 'testing 123',
|
|
|
|
username: 'test',
|
|
|
|
}),
|
2019-10-31 09:06:29 +00:00
|
|
|
],
|
|
|
|
},
|
|
|
|
});
|
|
|
|
|
|
|
|
wrapper.vm.$nextTick(done);
|
|
|
|
});
|
|
|
|
|
2020-03-11 21:09:19 +00:00
|
|
|
afterEach(() => {
|
|
|
|
global.gon.default_avatar_url = null;
|
|
|
|
});
|
|
|
|
|
2019-10-31 09:06:29 +00:00
|
|
|
it('displays defaults avatar if users avatar is null', () => {
|
|
|
|
expect(wrapper.find('.board-card-assignee img').exists()).toBe(true);
|
|
|
|
expect(wrapper.find('.board-card-assignee img').attributes('src')).toBe(
|
|
|
|
'default_avatar?width=24',
|
|
|
|
);
|
|
|
|
});
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
describe('multiple assignees', () => {
|
|
|
|
beforeEach(done => {
|
|
|
|
wrapper.setProps({
|
|
|
|
issue: {
|
|
|
|
...wrapper.props('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',
|
|
|
|
}),
|
|
|
|
],
|
|
|
|
},
|
|
|
|
});
|
|
|
|
|
|
|
|
wrapper.vm.$nextTick(done);
|
|
|
|
});
|
|
|
|
|
|
|
|
it('renders all three assignees', () => {
|
|
|
|
expect(wrapper.findAll('.board-card-assignee .avatar').length).toEqual(3);
|
|
|
|
});
|
|
|
|
|
|
|
|
describe('more than three assignees', () => {
|
|
|
|
beforeEach(done => {
|
|
|
|
const { assignees } = wrapper.props('issue');
|
|
|
|
assignees.push(
|
|
|
|
new ListAssignee({
|
|
|
|
id: 5,
|
|
|
|
name: 'user5',
|
|
|
|
username: 'user5',
|
|
|
|
avatar: 'test_image',
|
|
|
|
}),
|
|
|
|
);
|
|
|
|
|
|
|
|
wrapper.setProps({
|
|
|
|
issue: {
|
|
|
|
...wrapper.props('issue'),
|
|
|
|
assignees,
|
|
|
|
},
|
|
|
|
});
|
|
|
|
wrapper.vm.$nextTick(done);
|
|
|
|
});
|
|
|
|
|
|
|
|
it('renders more avatar counter', () => {
|
|
|
|
expect(
|
|
|
|
wrapper
|
|
|
|
.find('.board-card-assignee .avatar-counter')
|
|
|
|
.text()
|
|
|
|
.trim(),
|
|
|
|
).toEqual('+2');
|
|
|
|
});
|
|
|
|
|
|
|
|
it('renders two assignees', () => {
|
|
|
|
expect(wrapper.findAll('.board-card-assignee .avatar').length).toEqual(2);
|
|
|
|
});
|
|
|
|
|
|
|
|
it('renders 99+ avatar counter', done => {
|
|
|
|
const assignees = [
|
|
|
|
...wrapper.props('issue').assignees,
|
2020-01-22 00:08:47 +00:00
|
|
|
...range(5, 103).map(
|
2019-10-31 09:06:29 +00:00
|
|
|
i =>
|
|
|
|
new ListAssignee({
|
|
|
|
id: i,
|
|
|
|
name: 'name',
|
|
|
|
username: 'username',
|
|
|
|
avatar: 'test_image',
|
|
|
|
}),
|
|
|
|
),
|
|
|
|
];
|
|
|
|
wrapper.setProps({
|
|
|
|
issue: {
|
|
|
|
...wrapper.props('issue'),
|
|
|
|
assignees,
|
|
|
|
},
|
|
|
|
});
|
|
|
|
|
|
|
|
wrapper.vm.$nextTick(() => {
|
|
|
|
expect(
|
|
|
|
wrapper
|
|
|
|
.find('.board-card-assignee .avatar-counter')
|
|
|
|
.text()
|
|
|
|
.trim(),
|
|
|
|
).toEqual('99+');
|
|
|
|
done();
|
|
|
|
});
|
|
|
|
});
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
describe('labels', () => {
|
|
|
|
beforeEach(done => {
|
|
|
|
issue.addLabel(label1);
|
|
|
|
wrapper.setProps({ issue: { ...issue } });
|
|
|
|
|
|
|
|
wrapper.vm.$nextTick(done);
|
|
|
|
});
|
|
|
|
|
|
|
|
it('does not render list label but renders all other labels', () => {
|
2020-03-09 09:07:45 +00:00
|
|
|
expect(wrapper.findAll(GlLabel).length).toBe(1);
|
|
|
|
const label = wrapper.find(GlLabel);
|
|
|
|
expect(label.props('title')).toEqual(label1.title);
|
|
|
|
expect(label.props('description')).toEqual(label1.description);
|
|
|
|
expect(label.props('backgroundColor')).toEqual(label1.color);
|
2019-10-31 09:06:29 +00:00
|
|
|
});
|
|
|
|
|
|
|
|
it('does not render label if label does not have an ID', done => {
|
|
|
|
issue.addLabel(
|
|
|
|
new ListLabel({
|
|
|
|
title: 'closed',
|
|
|
|
}),
|
|
|
|
);
|
|
|
|
wrapper.setProps({ issue: { ...issue } });
|
|
|
|
wrapper.vm
|
|
|
|
.$nextTick()
|
|
|
|
.then(() => {
|
2020-03-09 09:07:45 +00:00
|
|
|
expect(wrapper.findAll(GlLabel).length).toBe(1);
|
2019-10-31 09:06:29 +00:00
|
|
|
expect(wrapper.text()).not.toContain('closed');
|
|
|
|
done();
|
|
|
|
})
|
|
|
|
.catch(done.fail);
|
|
|
|
});
|
|
|
|
});
|
2020-02-11 03:09:13 +00:00
|
|
|
|
|
|
|
describe('blocked', () => {
|
|
|
|
beforeEach(done => {
|
|
|
|
wrapper.setProps({
|
|
|
|
issue: {
|
|
|
|
...wrapper.props('issue'),
|
|
|
|
blocked: true,
|
|
|
|
},
|
|
|
|
});
|
|
|
|
wrapper.vm.$nextTick(done);
|
|
|
|
});
|
|
|
|
|
|
|
|
it('renders blocked icon if issue is blocked', () => {
|
|
|
|
expect(wrapper.find('.issue-blocked-icon').exists()).toBe(true);
|
|
|
|
});
|
|
|
|
});
|
2019-10-31 09:06:29 +00:00
|
|
|
});
|