debian-mirror-gitlab/spec/frontend/issuable/components/issue_assignees_spec.js

Ignoring revisions in .git-blame-ignore-revs. Click here to bypass and see the normal blame view.

146 lines
4.3 KiB
JavaScript
Raw Normal View History

2019-12-26 22:10:19 +05:30
import { shallowMount } from '@vue/test-utils';
2020-10-24 23:57:45 +05:30
import { mockAssigneesList } from 'jest/boards/mock_data';
2022-01-26 12:08:38 +05:30
import IssueAssignees from '~/issuable/components/issue_assignees.vue';
2021-03-11 19:13:27 +05:30
import UserAvatarLink from '~/vue_shared/components/user_avatar/user_avatar_link.vue';
2019-02-15 15:39:39 +05:30
2019-12-26 22:10:19 +05:30
const TEST_CSS_CLASSES = 'test-classes';
const TEST_MAX_VISIBLE = 4;
const TEST_ICON_SIZE = 16;
2019-02-15 15:39:39 +05:30
describe('IssueAssigneesComponent', () => {
2019-12-26 22:10:19 +05:30
let wrapper;
2019-02-15 15:39:39 +05:30
let vm;
2021-03-08 18:12:59 +05:30
const factory = (props) => {
2019-12-26 22:10:19 +05:30
wrapper = shallowMount(IssueAssignees, {
propsData: {
assignees: mockAssigneesList,
...props,
},
2019-02-15 15:39:39 +05:30
});
2020-03-13 15:44:24 +05:30
vm = wrapper.vm;
2019-12-26 22:10:19 +05:30
};
2020-10-24 23:57:45 +05:30
afterEach(() => {
wrapper.destroy();
wrapper = null;
});
2019-12-26 22:10:19 +05:30
const findTooltipText = () => wrapper.find('.js-assignee-tooltip').text();
const findAvatars = () => wrapper.findAll(UserAvatarLink);
const findOverflowCounter = () => wrapper.find('.avatar-counter');
it('returns default data props', () => {
factory({ assignees: mockAssigneesList });
expect(vm.iconSize).toBe(24);
expect(vm.maxVisible).toBe(3);
expect(vm.maxAssignees).toBe(99);
2019-02-15 15:39:39 +05:30
});
2019-12-26 22:10:19 +05:30
describe.each`
numAssignees | maxVisible | expectedShown | expectedHidden
${0} | ${3} | ${0} | ${''}
${1} | ${3} | ${1} | ${''}
${2} | ${3} | ${2} | ${''}
${3} | ${3} | ${3} | ${''}
${4} | ${3} | ${2} | ${'+2'}
${5} | ${2} | ${1} | ${'+4'}
${1000} | ${5} | ${4} | ${'99+'}
`(
'with assignees ($numAssignees) and maxVisible ($maxVisible)',
({ numAssignees, maxVisible, expectedShown, expectedHidden }) => {
beforeEach(() => {
factory({ assignees: Array(numAssignees).fill({}), maxVisible });
2019-02-15 15:39:39 +05:30
});
2019-12-26 22:10:19 +05:30
if (expectedShown) {
it('shows assignee avatars', () => {
expect(findAvatars().length).toEqual(expectedShown);
});
} else {
it('does not show assignee avatars', () => {
expect(findAvatars().length).toEqual(0);
});
}
if (expectedHidden) {
it('shows overflow counter', () => {
const hiddenCount = numAssignees - expectedShown;
expect(findOverflowCounter().exists()).toBe(true);
expect(findOverflowCounter().text()).toEqual(expectedHidden.toString());
2020-03-13 15:44:24 +05:30
expect(findOverflowCounter().attributes('title')).toEqual(
2019-12-26 22:10:19 +05:30
`${hiddenCount} more assignees`,
);
});
} else {
it('does not show overflow counter', () => {
expect(findOverflowCounter().exists()).toBe(false);
});
}
},
);
describe('when mounted', () => {
beforeEach(() => {
factory({
imgCssClasses: TEST_CSS_CLASSES,
maxVisible: TEST_MAX_VISIBLE,
iconSize: TEST_ICON_SIZE,
2019-02-15 15:39:39 +05:30
});
});
2019-12-26 22:10:19 +05:30
it('computes alt text for assignee avatar', () => {
2021-09-04 01:27:46 +05:30
expect(vm.avatarUrlTitle(mockAssigneesList[0])).toBe('Assigned to Terrell Graham');
2019-02-15 15:39:39 +05:30
});
2019-12-26 22:10:19 +05:30
it('renders assignee', () => {
2021-03-08 18:12:59 +05:30
const data = findAvatars().wrappers.map((x) => ({
2019-12-26 22:10:19 +05:30
...x.props(),
}));
2021-03-08 18:12:59 +05:30
const expected = mockAssigneesList.slice(0, TEST_MAX_VISIBLE - 1).map((x) =>
2019-12-26 22:10:19 +05:30
expect.objectContaining({
linkHref: x.web_url,
2021-09-04 01:27:46 +05:30
imgAlt: `Assigned to ${x.name}`,
2019-12-26 22:10:19 +05:30
imgCssClasses: TEST_CSS_CLASSES,
imgSrc: x.avatar_url,
imgSize: TEST_ICON_SIZE,
}),
);
expect(data).toEqual(expected);
2019-02-15 15:39:39 +05:30
});
2019-12-26 22:10:19 +05:30
describe('assignee tooltips', () => {
it('renders "Assignee" header', () => {
expect(findTooltipText()).toContain('Assignee');
});
2019-02-15 15:39:39 +05:30
2019-12-26 22:10:19 +05:30
it('renders assignee name', () => {
expect(findTooltipText()).toContain('Terrell Graham');
});
2019-02-15 15:39:39 +05:30
2019-12-26 22:10:19 +05:30
it('renders assignee @username', () => {
expect(findTooltipText()).toContain('@monserrate.gleichner');
});
2020-10-24 23:57:45 +05:30
it('does not render `@` when username not available', () => {
const userName = 'User without username';
factory({
assignees: [
{
name: userName,
},
],
});
const tooltipText = findTooltipText();
expect(tooltipText).toContain(userName);
expect(tooltipText).not.toContain('@');
});
2019-02-15 15:39:39 +05:30
});
});
});