debian-mirror-gitlab/spec/frontend/vue_shared/components/issue/related_issuable_item_spec.js

195 lines
5.9 KiB
JavaScript
Raw Normal View History

2020-03-13 15:44:24 +05:30
import { mount } from '@vue/test-utils';
2021-03-08 18:12:59 +05:30
import { TEST_HOST } from 'helpers/test_constants';
2021-03-11 19:13:27 +05:30
import IssueDueDate from '~/boards/components/issue_due_date.vue';
2020-01-01 13:55:28 +05:30
import { formatDate } from '~/lib/utils/datetime_utility';
2019-07-07 11:18:12 +05:30
import RelatedIssuableItem from '~/vue_shared/components/issue/related_issuable_item.vue';
2020-05-24 23:13:21 +05:30
import { defaultAssignees, defaultMilestone } from './related_issuable_mock_data';
2019-07-07 11:18:12 +05:30
describe('RelatedIssuableItem', () => {
let wrapper;
2020-06-23 00:09:42 +05:30
function mountComponent({ mountMethod = mount, stubs = {}, props = {}, slots = {} } = {}) {
wrapper = mountMethod(RelatedIssuableItem, {
propsData: props,
slots,
stubs,
});
}
2019-07-07 11:18:12 +05:30
const props = {
idKey: 1,
displayReference: 'gitlab-org/gitlab-test#1',
pathIdSeparator: '#',
2020-07-28 23:09:34 +05:30
path: `${TEST_HOST}/path`,
2019-07-07 11:18:12 +05:30
title: 'title',
confidential: true,
dueDate: '1990-12-31',
weight: 10,
createdAt: '2018-12-01T00:00:00.00Z',
milestone: defaultMilestone,
assignees: defaultAssignees,
eventNamespace: 'relatedIssue',
};
const slots = {
dueDate: '<div class="js-due-date-slot"></div>',
weight: '<div class="js-weight-slot"></div>',
};
2020-11-24 15:15:51 +05:30
const findRemoveButton = () => wrapper.find({ ref: 'removeButton' });
const findLockIcon = () => wrapper.find({ ref: 'lockIcon' });
2019-07-07 11:18:12 +05:30
beforeEach(() => {
2020-06-23 00:09:42 +05:30
mountComponent({ props, slots });
2019-07-07 11:18:12 +05:30
});
afterEach(() => {
wrapper.destroy();
});
it('contains issuable-info-container class when canReorder is false', () => {
expect(wrapper.props('canReorder')).toBe(false);
expect(wrapper.find('.issuable-info-container').exists()).toBe(true);
});
it('does not render token state', () => {
expect(wrapper.find('.text-secondary svg').exists()).toBe(false);
});
it('does not render remove button', () => {
expect(wrapper.find({ ref: 'removeButton' }).exists()).toBe(false);
});
describe('token title', () => {
it('links to computedPath', () => {
expect(wrapper.find('.item-title a').attributes('href')).toEqual(wrapper.props('path'));
});
it('renders confidential icon', () => {
expect(wrapper.find('.confidential-icon').exists()).toBe(true);
});
it('renders title', () => {
expect(wrapper.find('.item-title a').text()).toEqual(props.title);
});
});
describe('token state', () => {
2020-10-24 23:57:45 +05:30
const tokenState = () => wrapper.find({ ref: 'iconElementXL' });
2019-07-07 11:18:12 +05:30
2020-10-24 23:57:45 +05:30
beforeEach(() => {
2019-07-07 11:18:12 +05:30
wrapper.setProps({ state: 'opened' });
});
it('renders if hasState', () => {
2020-10-24 23:57:45 +05:30
expect(tokenState().exists()).toBe(true);
2019-07-07 11:18:12 +05:30
});
it('renders state title', () => {
2020-10-24 23:57:45 +05:30
const stateTitle = tokenState().attributes('title');
2020-01-01 13:55:28 +05:30
const formattedCreateDate = formatDate(props.createdAt);
2019-07-07 11:18:12 +05:30
expect(stateTitle).toContain('<span class="bold">Opened</span>');
2020-01-01 13:55:28 +05:30
expect(stateTitle).toContain(`<span class="text-tertiary">${formattedCreateDate}</span>`);
2019-07-07 11:18:12 +05:30
});
it('renders aria label', () => {
2020-10-24 23:57:45 +05:30
expect(tokenState().attributes('aria-label')).toEqual('opened');
2019-07-07 11:18:12 +05:30
});
it('renders open icon when open state', () => {
2020-10-24 23:57:45 +05:30
expect(tokenState().classes('issue-token-state-icon-open')).toBe(true);
2019-07-07 11:18:12 +05:30
});
2020-10-24 23:57:45 +05:30
it('renders close icon when close state', async () => {
2019-07-07 11:18:12 +05:30
wrapper.setProps({
state: 'closed',
closedAt: '2018-12-01T00:00:00.00Z',
});
2020-10-24 23:57:45 +05:30
await wrapper.vm.$nextTick();
2019-07-07 11:18:12 +05:30
2020-10-24 23:57:45 +05:30
expect(tokenState().classes('issue-token-state-icon-closed')).toBe(true);
2019-07-07 11:18:12 +05:30
});
});
describe('token metadata', () => {
2020-10-24 23:57:45 +05:30
const tokenMetadata = () => wrapper.find('.item-meta');
2019-07-07 11:18:12 +05:30
it('renders item path and ID', () => {
2021-03-08 18:12:59 +05:30
const pathAndID = tokenMetadata().find('.item-path-id').text();
2019-07-07 11:18:12 +05:30
expect(pathAndID).toContain('gitlab-org/gitlab-test');
expect(pathAndID).toContain('#1');
});
it('renders milestone icon and name', () => {
2020-11-24 15:15:51 +05:30
const milestoneIcon = tokenMetadata().find('.item-milestone svg');
2020-10-24 23:57:45 +05:30
const milestoneTitle = tokenMetadata().find('.item-milestone .milestone-title');
2019-07-07 11:18:12 +05:30
2020-11-24 15:15:51 +05:30
expect(milestoneIcon.attributes('data-testid')).toBe('clock-icon');
2019-07-07 11:18:12 +05:30
expect(milestoneTitle.text()).toContain('Milestone title');
});
2020-10-24 23:57:45 +05:30
it('renders due date component with correct due date', () => {
expect(wrapper.find(IssueDueDate).props('date')).toBe(props.dueDate);
2019-07-07 11:18:12 +05:30
});
});
describe('token assignees', () => {
it('renders assignees avatars', () => {
2019-09-30 21:07:59 +05:30
// Expect 2 times 2 because assignees are rendered twice, due to layout issues
expect(wrapper.findAll('.item-assignees .user-avatar-link').length).toBeDefined();
2019-07-07 11:18:12 +05:30
expect(wrapper.find('.item-assignees .avatar-counter').text()).toContain('+2');
});
});
describe('remove button', () => {
2020-10-24 23:57:45 +05:30
beforeEach(() => {
2019-07-07 11:18:12 +05:30
wrapper.setProps({ canRemove: true });
});
it('renders if canRemove', () => {
2020-11-24 15:15:51 +05:30
expect(findRemoveButton().exists()).toBe(true);
});
it('does not render the lock icon', () => {
expect(findLockIcon().exists()).toBe(false);
2019-07-07 11:18:12 +05:30
});
2020-10-24 23:57:45 +05:30
it('renders disabled button when removeDisabled', async () => {
wrapper.setData({ removeDisabled: true });
await wrapper.vm.$nextTick();
2019-07-07 11:18:12 +05:30
2020-11-24 15:15:51 +05:30
expect(findRemoveButton().attributes('disabled')).toEqual('disabled');
2019-07-07 11:18:12 +05:30
});
2020-10-24 23:57:45 +05:30
it('triggers onRemoveRequest when clicked', async () => {
2020-11-24 15:15:51 +05:30
findRemoveButton().trigger('click');
2020-10-24 23:57:45 +05:30
await wrapper.vm.$nextTick();
const { relatedIssueRemoveRequest } = wrapper.emitted();
2019-07-07 11:18:12 +05:30
2020-10-24 23:57:45 +05:30
expect(relatedIssueRemoveRequest.length).toBe(1);
expect(relatedIssueRemoveRequest[0]).toEqual([props.idKey]);
2019-07-07 11:18:12 +05:30
});
});
2020-11-24 15:15:51 +05:30
describe('when issue is locked', () => {
const lockedMessage = 'Issues created from a vulnerability cannot be removed';
beforeEach(() => {
wrapper.setProps({
isLocked: true,
lockedMessage,
});
});
it('does not render the remove button', () => {
expect(findRemoveButton().exists()).toBe(false);
});
it('renders the lock icon with the correct title', () => {
expect(findLockIcon().attributes('title')).toBe(lockedMessage);
});
});
2019-07-07 11:18:12 +05:30
});