2020-08-24 15:10:11 +00:00
|
|
|
import { GlTooltip, GlLink, GlIcon } from '@gitlab/ui';
|
2021-02-14 18:09:20 +00:00
|
|
|
import { shallowMount } from '@vue/test-utils';
|
2021-01-15 00:10:45 +00:00
|
|
|
import { TEST_HOST } from 'helpers/test_constants';
|
2018-11-27 15:10:40 +00:00
|
|
|
import Suggestion from '~/issuable_suggestions/components/item.vue';
|
2021-02-14 18:09:20 +00:00
|
|
|
import UserAvatarImage from '~/vue_shared/components/user_avatar/user_avatar_image.vue';
|
2018-11-27 15:10:40 +00:00
|
|
|
import mockData from '../mock_data';
|
|
|
|
|
|
|
|
describe('Issuable suggestions suggestion component', () => {
|
|
|
|
let vm;
|
|
|
|
|
|
|
|
function createComponent(suggestion = {}) {
|
|
|
|
vm = shallowMount(Suggestion, {
|
|
|
|
propsData: {
|
|
|
|
suggestion: {
|
|
|
|
...mockData(),
|
|
|
|
...suggestion,
|
|
|
|
},
|
|
|
|
},
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
|
|
|
afterEach(() => {
|
|
|
|
vm.destroy();
|
|
|
|
});
|
|
|
|
|
|
|
|
it('renders title', () => {
|
|
|
|
createComponent();
|
|
|
|
|
|
|
|
expect(vm.text()).toContain('Test issue');
|
|
|
|
});
|
|
|
|
|
|
|
|
it('renders issue link', () => {
|
|
|
|
createComponent();
|
|
|
|
|
|
|
|
const link = vm.find(GlLink);
|
|
|
|
|
2020-07-16 03:09:12 +00:00
|
|
|
expect(link.attributes('href')).toBe(`${TEST_HOST}/test/issue/1`);
|
2018-11-27 15:10:40 +00:00
|
|
|
});
|
|
|
|
|
|
|
|
it('renders IID', () => {
|
|
|
|
createComponent();
|
|
|
|
|
|
|
|
expect(vm.text()).toContain('#1');
|
|
|
|
});
|
|
|
|
|
|
|
|
describe('opened state', () => {
|
|
|
|
it('renders icon', () => {
|
|
|
|
createComponent();
|
|
|
|
|
2020-08-24 15:10:11 +00:00
|
|
|
const icon = vm.find(GlIcon);
|
2018-11-27 15:10:40 +00:00
|
|
|
|
|
|
|
expect(icon.props('name')).toBe('issue-open-m');
|
|
|
|
});
|
|
|
|
|
|
|
|
it('renders created timeago', () => {
|
|
|
|
createComponent({
|
|
|
|
closedAt: '',
|
|
|
|
});
|
|
|
|
|
|
|
|
const tooltip = vm.find(GlTooltip);
|
|
|
|
|
|
|
|
expect(tooltip.find('.d-block').text()).toContain('Opened');
|
|
|
|
expect(tooltip.text()).toContain('3 days ago');
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
describe('closed state', () => {
|
|
|
|
it('renders icon', () => {
|
|
|
|
createComponent({
|
|
|
|
state: 'closed',
|
|
|
|
});
|
|
|
|
|
2020-08-24 15:10:11 +00:00
|
|
|
const icon = vm.find(GlIcon);
|
2018-11-27 15:10:40 +00:00
|
|
|
|
|
|
|
expect(icon.props('name')).toBe('issue-close');
|
|
|
|
});
|
|
|
|
|
|
|
|
it('renders closed timeago', () => {
|
|
|
|
createComponent();
|
|
|
|
|
|
|
|
const tooltip = vm.find(GlTooltip);
|
|
|
|
|
|
|
|
expect(tooltip.find('.d-block').text()).toContain('Opened');
|
|
|
|
expect(tooltip.text()).toContain('1 day ago');
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
describe('author', () => {
|
|
|
|
it('renders author info', () => {
|
|
|
|
createComponent();
|
|
|
|
|
|
|
|
const link = vm.findAll(GlLink).at(1);
|
|
|
|
|
|
|
|
expect(link.text()).toContain('Author Name');
|
|
|
|
expect(link.text()).toContain('@author.username');
|
|
|
|
});
|
|
|
|
|
|
|
|
it('renders author image', () => {
|
|
|
|
createComponent();
|
|
|
|
|
|
|
|
const image = vm.find(UserAvatarImage);
|
|
|
|
|
2020-07-16 03:09:12 +00:00
|
|
|
expect(image.props('imgSrc')).toBe(`${TEST_HOST}/avatar`);
|
2018-11-27 15:10:40 +00:00
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
describe('counts', () => {
|
|
|
|
it('renders upvotes count', () => {
|
|
|
|
createComponent();
|
|
|
|
|
|
|
|
const count = vm.findAll('.suggestion-counts span').at(0);
|
|
|
|
|
|
|
|
expect(count.text()).toContain('1');
|
2020-08-24 15:10:11 +00:00
|
|
|
expect(count.find(GlIcon).props('name')).toBe('thumb-up');
|
2018-11-27 15:10:40 +00:00
|
|
|
});
|
|
|
|
|
|
|
|
it('renders notes count', () => {
|
|
|
|
createComponent();
|
|
|
|
|
|
|
|
const count = vm.findAll('.suggestion-counts span').at(1);
|
|
|
|
|
|
|
|
expect(count.text()).toContain('2');
|
2020-08-24 15:10:11 +00:00
|
|
|
expect(count.find(GlIcon).props('name')).toBe('comment');
|
2018-11-27 15:10:40 +00:00
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
describe('confidential', () => {
|
|
|
|
it('renders confidential icon', () => {
|
|
|
|
createComponent({
|
|
|
|
confidential: true,
|
|
|
|
});
|
|
|
|
|
2020-08-24 15:10:11 +00:00
|
|
|
const icon = vm.find(GlIcon);
|
2018-11-27 15:10:40 +00:00
|
|
|
|
|
|
|
expect(icon.props('name')).toBe('eye-slash');
|
2019-12-20 18:07:53 +00:00
|
|
|
expect(icon.attributes('title')).toBe('Confidential');
|
2018-11-27 15:10:40 +00:00
|
|
|
});
|
|
|
|
});
|
|
|
|
});
|