debian-mirror-gitlab/spec/frontend/boards/issue_card_inner_spec.js

373 lines
9.6 KiB
JavaScript
Raw Normal View History

2021-03-11 19:13:27 +05:30
import { GlLabel } from '@gitlab/ui';
2019-12-26 22:10:19 +05:30
import { mount } from '@vue/test-utils';
2020-03-13 15:44:24 +05:30
import { range } from 'lodash';
2019-12-26 22:10:19 +05:30
import IssueCardInner from '~/boards/components/issue_card_inner.vue';
2021-03-08 18:12:59 +05:30
import eventHub from '~/boards/eventhub';
2021-03-11 19:13:27 +05:30
import defaultStore from '~/boards/stores';
2021-03-08 18:12:59 +05:30
import { updateHistory } from '~/lib/utils/url_utility';
2021-03-11 19:13:27 +05:30
import { mockLabelList } from './mock_data';
2021-03-08 18:12:59 +05:30
jest.mock('~/lib/utils/url_utility');
jest.mock('~/boards/eventhub');
2019-12-26 22:10:19 +05:30
describe('Issue card component', () => {
2021-03-08 18:12:59 +05:30
const user = {
2019-12-26 22:10:19 +05:30
id: 1,
name: 'testing 123',
username: 'test',
2021-03-08 18:12:59 +05:30
avatarUrl: 'test_image',
};
2019-12-26 22:10:19 +05:30
2021-03-08 18:12:59 +05:30
const label1 = {
2019-12-26 22:10:19 +05:30
id: 3,
title: 'testing 123',
2020-04-08 14:13:33 +05:30
color: '#000CFF',
2021-03-08 18:12:59 +05:30
textColor: 'white',
2019-12-26 22:10:19 +05:30
description: 'test',
2021-03-08 18:12:59 +05:30
};
2019-12-26 22:10:19 +05:30
let wrapper;
let issue;
let list;
2021-03-08 18:12:59 +05:30
const createWrapper = (props = {}, store = defaultStore) => {
2019-12-26 22:10:19 +05:30
wrapper = mount(IssueCardInner, {
2021-03-08 18:12:59 +05:30
store,
2019-12-26 22:10:19 +05:30
propsData: {
list,
issue,
2021-03-08 18:12:59 +05:30
...props,
2019-12-26 22:10:19 +05:30
},
2020-04-08 14:13:33 +05:30
stubs: {
GlLabel: true,
},
2020-11-24 15:15:51 +05:30
provide: {
groupId: null,
rootPath: '/',
2021-03-08 18:12:59 +05:30
scopedLabelsAvailable: false,
2020-11-24 15:15:51 +05:30
},
2019-12-26 22:10:19 +05:30
});
2021-03-08 18:12:59 +05:30
};
beforeEach(() => {
list = mockLabelList;
issue = {
title: 'Testing',
id: 1,
iid: 1,
confidential: false,
labels: [list.label],
assignees: [],
referencePath: '#1',
webUrl: '/test/1',
weight: 1,
};
createWrapper({ issue, list });
});
afterEach(() => {
wrapper.destroy();
wrapper = null;
jest.clearAllMocks();
2019-12-26 22:10:19 +05:30
});
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-03-13 15:44:24 +05:30
expect(wrapper.find('.confidential-icon').exists()).toBe(false);
});
it('does not render blocked icon', () => {
expect(wrapper.find('.issue-blocked-icon').exists()).toBe(false);
2019-12-26 22:10:19 +05:30
});
it('renders issue ID with #', () => {
expect(wrapper.find('.board-card-number').text()).toContain(`#${issue.id}`);
});
2021-03-08 18:12:59 +05:30
it('does not render assignee', () => {
expect(wrapper.find('.board-card-assignee .avatar').exists()).toBe(false);
});
describe('confidential issue', () => {
beforeEach(() => {
wrapper.setProps({
issue: {
...wrapper.props('issue'),
confidential: true,
},
});
2019-12-26 22:10:19 +05:30
});
2021-03-08 18:12:59 +05:30
it('renders confidential icon', () => {
expect(wrapper.find('.confidential-icon').exists()).toBe(true);
});
});
describe('with assignee', () => {
describe('with avatar', () => {
beforeEach(() => {
2019-12-26 22:10:19 +05:30
wrapper.setProps({
issue: {
...wrapper.props('issue'),
assignees: [user],
2020-03-13 15:44:24 +05:30
updateData(newData) {
Object.assign(this, newData);
},
2019-12-26 22:10:19 +05:30
},
});
});
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-03-13 15:44:24 +05:30
2021-03-08 18:12:59 +05:30
it('renders the avatar using avatarUrl property', async () => {
2020-03-13 15:44:24 +05:30
wrapper.props('issue').updateData({
...wrapper.props('issue'),
assignees: [
{
id: '1',
name: 'test',
state: 'active',
username: 'test_name',
2021-03-08 18:12:59 +05:30
avatarUrl: 'test_image_from_avatar_url',
2020-03-13 15:44:24 +05:30
},
],
});
2021-03-08 18:12:59 +05:30
await wrapper.vm.$nextTick();
expect(wrapper.find('.board-card-assignee img').attributes('src')).toBe(
'test_image_from_avatar_url?width=24',
);
2020-03-13 15:44:24 +05:30
});
2019-12-26 22:10:19 +05:30
});
2021-03-08 18:12:59 +05:30
describe('with default avatar', () => {
beforeEach(() => {
2020-04-08 14:13:33 +05:30
global.gon.default_avatar_url = 'default_avatar';
2019-12-26 22:10:19 +05:30
wrapper.setProps({
issue: {
...wrapper.props('issue'),
assignees: [
2021-03-08 18:12:59 +05:30
{
2020-04-08 14:13:33 +05:30
id: 1,
name: 'testing 123',
username: 'test',
2021-03-08 18:12:59 +05:30
},
2019-12-26 22:10:19 +05:30
],
},
});
});
2020-04-08 14:13:33 +05:30
afterEach(() => {
global.gon.default_avatar_url = null;
});
2019-12-26 22:10:19 +05:30
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', () => {
2021-03-08 18:12:59 +05:30
beforeEach(() => {
2019-12-26 22:10:19 +05:30
wrapper.setProps({
issue: {
...wrapper.props('issue'),
assignees: [
2021-03-08 18:12:59 +05:30
{
2019-12-26 22:10:19 +05:30
id: 2,
name: 'user2',
username: 'user2',
2021-03-08 18:12:59 +05:30
avatarUrl: 'test_image',
},
{
2019-12-26 22:10:19 +05:30
id: 3,
name: 'user3',
username: 'user3',
2021-03-08 18:12:59 +05:30
avatarUrl: 'test_image',
},
{
2019-12-26 22:10:19 +05:30
id: 4,
name: 'user4',
username: 'user4',
2021-03-08 18:12:59 +05:30
avatarUrl: 'test_image',
},
2019-12-26 22:10:19 +05:30
],
},
});
});
it('renders all three assignees', () => {
expect(wrapper.findAll('.board-card-assignee .avatar').length).toEqual(3);
});
describe('more than three assignees', () => {
2021-03-08 18:12:59 +05:30
beforeEach(() => {
2019-12-26 22:10:19 +05:30
const { assignees } = wrapper.props('issue');
2021-03-08 18:12:59 +05:30
assignees.push({
id: 5,
name: 'user5',
username: 'user5',
avatarUrl: 'test_image',
});
2019-12-26 22:10:19 +05:30
wrapper.setProps({
issue: {
...wrapper.props('issue'),
assignees,
},
});
});
it('renders more avatar counter', () => {
2021-03-08 18:12:59 +05:30
expect(wrapper.find('.board-card-assignee .avatar-counter').text().trim()).toEqual('+2');
2019-12-26 22:10:19 +05:30
});
it('renders two assignees', () => {
expect(wrapper.findAll('.board-card-assignee .avatar').length).toEqual(2);
});
2021-03-08 18:12:59 +05:30
it('renders 99+ avatar counter', async () => {
2019-12-26 22:10:19 +05:30
const assignees = [
...wrapper.props('issue').assignees,
2021-03-08 18:12:59 +05:30
...range(5, 103).map((i) => ({
id: i,
name: 'name',
username: 'username',
avatarUrl: 'test_image',
})),
2019-12-26 22:10:19 +05:30
];
wrapper.setProps({
issue: {
...wrapper.props('issue'),
assignees,
},
});
2021-03-08 18:12:59 +05:30
await wrapper.vm.$nextTick();
expect(wrapper.find('.board-card-assignee .avatar-counter').text().trim()).toEqual('99+');
2019-12-26 22:10:19 +05:30
});
});
});
describe('labels', () => {
2021-03-08 18:12:59 +05:30
beforeEach(() => {
wrapper.setProps({ issue: { ...issue, labels: [list.label, label1] } });
2019-12-26 22:10:19 +05:30
});
it('does not render list label but renders all other labels', () => {
2020-04-08 14:13:33 +05:30
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-12-26 22:10:19 +05:30
});
2021-03-08 18:12:59 +05:30
it('does not render label if label does not have an ID', async () => {
wrapper.setProps({ issue: { ...issue, labels: [label1, { title: 'closed' }] } });
await wrapper.vm.$nextTick();
expect(wrapper.findAll(GlLabel).length).toBe(1);
expect(wrapper.text()).not.toContain('closed');
2019-12-26 22:10:19 +05:30
});
});
2020-03-13 15:44:24 +05:30
describe('blocked', () => {
2021-03-08 18:12:59 +05:30
beforeEach(() => {
2020-03-13 15:44:24 +05:30
wrapper.setProps({
issue: {
...wrapper.props('issue'),
blocked: true,
},
});
});
it('renders blocked icon if issue is blocked', () => {
expect(wrapper.find('.issue-blocked-icon').exists()).toBe(true);
});
});
2021-03-08 18:12:59 +05:30
describe('filterByLabel method', () => {
beforeEach(() => {
delete window.location;
wrapper.setProps({
updateFilters: true,
});
});
describe('when selected label is not in the filter', () => {
beforeEach(() => {
jest.spyOn(wrapper.vm, 'performSearch').mockImplementation(() => {});
window.location = { search: '' };
wrapper.vm.filterByLabel(label1);
});
it('calls updateHistory', () => {
expect(updateHistory).toHaveBeenCalledTimes(1);
});
it('dispatches performSearch vuex action', () => {
expect(wrapper.vm.performSearch).toHaveBeenCalledTimes(1);
});
it('emits updateTokens event', () => {
expect(eventHub.$emit).toHaveBeenCalledTimes(1);
expect(eventHub.$emit).toHaveBeenCalledWith('updateTokens');
});
});
describe('when selected label is already in the filter', () => {
beforeEach(() => {
jest.spyOn(wrapper.vm, 'performSearch').mockImplementation(() => {});
window.location = { search: '?label_name[]=testing%20123' };
wrapper.vm.filterByLabel(label1);
});
it('does not call updateHistory', () => {
expect(updateHistory).not.toHaveBeenCalled();
});
it('does not dispatch performSearch vuex action', () => {
expect(wrapper.vm.performSearch).not.toHaveBeenCalled();
});
it('does not emit updateTokens event', () => {
expect(eventHub.$emit).not.toHaveBeenCalled();
});
});
});
2019-12-26 22:10:19 +05:30
});