Commit 1c7cbc25 authored by Samantha Ming's avatar Samantha Ming Committed by Paul Slaughter

Apply patch and update spec per MR comments

- Use wrapper instead of global Vue object
- Use vue utils helper method
- Remove redundant spec tests
parent 96b994bd
import { shallowMount } from '@vue/test-utils';
import { joinPaths } from '~/lib/utils/url_utility';
import userDataMock from '../../user_data_mock';
import { TEST_HOST } from 'helpers/test_constants';
import AssigneeAvatarLink from '~/sidebar/components/assignees/assignee_avatar_link.vue';
import AssigneeAvatar from '~/sidebar/components/assignees/assignee_avatar.vue';
import userDataMock from '../../user_data_mock';
const TOOLTIP_PLACEMENT = 'bottom';
const { name: USER_NAME } = userDataMock();
const { name: USER_NAME, username: USER_USERNAME } = userDataMock();
const TEST_ISSUABLE_TYPE = 'merge_request';
describe('AssigneeAvatarLink component', () => {
let wrapper;
......@@ -13,10 +16,10 @@ describe('AssigneeAvatarLink component', () => {
const propsData = {
user: userDataMock(),
showLess: true,
rootPath: 'http://localhost:3000/',
rootPath: TEST_HOST,
tooltipPlacement: TOOLTIP_PLACEMENT,
singleUser: false,
issuableType: 'merge_request',
issuableType: TEST_ISSUABLE_TYPE,
...props,
};
......@@ -32,24 +35,22 @@ describe('AssigneeAvatarLink component', () => {
const findTooltipText = () => wrapper.attributes('data-original-title');
it('user who cannot merge has "cannot merge" in tooltip', () => {
createComponent({
user: {
can_merge: false,
},
});
it('has the root url present in the assigneeUrl method', () => {
createComponent();
const assigneeUrl = joinPaths(TEST_HOST, USER_USERNAME);
expect(findTooltipText().includes('cannot merge')).toBe(true);
expect(wrapper.attributes().href).toEqual(assigneeUrl);
});
it('has the root url present in the assigneeUrl method', () => {
it('renders assignee avatar', () => {
createComponent();
const assigneeUrl = joinPaths(
`${wrapper.props('rootPath')}`,
`${wrapper.props('user').username}`,
);
expect(wrapper.attributes().href).toEqual(assigneeUrl);
expect(wrapper.find(AssigneeAvatar).props()).toEqual(
expect.objectContaining({
issuableType: TEST_ISSUABLE_TYPE,
user: userDataMock(),
}),
);
});
describe.each`
......
......@@ -39,7 +39,7 @@ describe('AssigneeAvatar', () => {
it('does not show warning icon if assignee can merge', () => {
createComponent();
expect(wrapper.element.querySelector('.merge-icon')).toBeNull();
expect(wrapper.find('.merge-icon').exists()).toBe(false);
});
it('shows warning icon if assignee cannot merge', () => {
......@@ -49,7 +49,7 @@ describe('AssigneeAvatar', () => {
},
});
expect(wrapper.element.querySelector('.merge-icon')).not.toBeNull();
expect(wrapper.find('.merge-icon').exists()).toBe(true);
});
it('does not show warning icon for issuableType = "issue"', () => {
......@@ -57,7 +57,7 @@ describe('AssigneeAvatar', () => {
issuableType: 'issue',
});
expect(wrapper.element.querySelector('.merge-icon')).toBeNull();
expect(wrapper.find('.merge-icon').exists()).toBe(false);
});
it.each`
......
......@@ -77,10 +77,7 @@ describe('CollapsedAssigneeList component', () => {
beforeEach(() => {
users = UsersMockHelper.createNumberRandomUsers(2);
});
describe('default', () => {
beforeEach(() => {
createComponent({ users });
});
......@@ -97,34 +94,13 @@ describe('CollapsedAssigneeList component', () => {
});
});
it('has correct "cannot merge" tooltip when no user can merge', () => {
users[0].can_merge = false;
users[1].can_merge = false;
createComponent({
users,
});
expect(getTooltipTitle()).toEqual(`${users[0].name}, ${users[1].name} (no one can merge)`);
});
it('does not have "merge" word in tooltip if everyone can merge', () => {
users[0].can_merge = true;
users[1].can_merge = true;
createComponent({
users,
});
expect(getTooltipTitle()).toEqual(`${users[0].name}, ${users[1].name}`);
});
});
describe('More than two assignees/users', () => {
let users;
let userNames;
beforeEach(() => {
users = UsersMockHelper.createNumberRandomUsers(3);
userNames = users.map(x => x.name).join(', ');
});
describe('default', () => {
......@@ -142,6 +118,18 @@ describe('CollapsedAssigneeList component', () => {
});
});
it('has corrent "no one can merge" tooltip when no one can merge', () => {
users[0].can_merge = false;
users[1].can_merge = false;
users[2].can_merge = false;
createComponent({
users,
});
expect(getTooltipTitle()).toEqual(`${userNames} (no one can merge)`);
});
it('has correct "cannot merge" tooltip when one user can merge', () => {
users[0].can_merge = true;
users[1].can_merge = false;
......@@ -151,7 +139,7 @@ describe('CollapsedAssigneeList component', () => {
users,
});
expect(getTooltipTitle()).toContain('1/3 can merge');
expect(getTooltipTitle()).toEqual(`${userNames} (1/3 can merge)`);
});
it('has correct "cannot merge" tooltip when more than one user can merge', () => {
......@@ -163,7 +151,7 @@ describe('CollapsedAssigneeList component', () => {
users,
});
expect(getTooltipTitle()).toContain('2/3 can merge');
expect(getTooltipTitle()).toEqual(`${userNames} (2/3 can merge)`);
});
it('does not have "merge" in tooltip if everyone can merge', () => {
......@@ -175,10 +163,10 @@ describe('CollapsedAssigneeList component', () => {
users,
});
expect(getTooltipTitle()).not.toContain('merge');
expect(getTooltipTitle()).toEqual(userNames);
});
it('displays the correct avatar count via a computed property if less than default max counter', () => {
it('displays the correct avatar count', () => {
users = UsersMockHelper.createNumberRandomUsers(5);
createComponent({
......
import { shallowMount } from '@vue/test-utils';
import CollapsedAssignee from '~/sidebar/components/assignees/collapsed_assignee.vue';
import AssigneeAvatar from '~/sidebar/components/assignees/assignee_avatar.vue';
import userDataMock from '../../user_data_mock';
const TEST_USER = userDataMock();
const TEST_ISSUABLE_TYPE = 'merge_request';
describe('CollapsedAssignee assignee component', () => {
let wrapper;
function createComponent(props = {}) {
const propsData = {
user: userDataMock(),
issuableType: TEST_ISSUABLE_TYPE,
...props,
};
......@@ -29,6 +34,16 @@ describe('CollapsedAssignee assignee component', () => {
.find('.author')
.text()
.trim(),
).toEqual(wrapper.vm.user.name);
).toEqual(TEST_USER.name);
});
it('has assignee avatar', () => {
createComponent();
expect(wrapper.find(AssigneeAvatar).props()).toEqual({
imgSize: 24,
user: TEST_USER,
issuableType: TEST_ISSUABLE_TYPE,
});
});
});
import Vue from 'vue';
import { mount } from '@vue/test-utils';
import UncollapsedAssigneeList from '~/sidebar/components/assignees/uncollapsed_assignee_list.vue';
import AssigneeAvatarLink from '~/sidebar/components/assignees/assignee_avatar_link.vue';
......@@ -56,61 +55,20 @@ describe('UncollapsedAssigneeList component', () => {
});
});
describe('Two or more assignees/users', () => {
describe('n+ more label', () => {
describe('when users count is rendered users', () => {
beforeEach(() => {
createComponent({
users: UsersMockHelper.createNumberRandomUsers(3),
});
});
it('more than one user', () => {
expect(wrapper.findAll(AssigneeAvatarLink).length).toBe(3);
});
it('shows the "show-less" assignees label', done => {
const users = UsersMockHelper.createNumberRandomUsers(6);
createComponent({
users,
});
expect(wrapper.vm.$el.querySelectorAll('.user-item').length).toEqual(DEFAULT_RENDER_COUNT);
expect(wrapper.vm.$el.querySelector('.user-list-more')).not.toBe(null);
const usersLabelExpectation = users.length - DEFAULT_RENDER_COUNT;
expect(wrapper.vm.$el.querySelector('.user-list-more .btn-link').innerText.trim()).not.toBe(
`+${usersLabelExpectation} more`,
);
wrapper.vm.toggleShowLess();
Vue.nextTick(() => {
expect(wrapper.vm.$el.querySelector('.user-list-more .btn-link').innerText.trim()).toBe(
'- show less',
);
done();
users: UsersMockHelper.createNumberRandomUsers(DEFAULT_RENDER_COUNT),
});
});
it('shows the "show-less" when "n+ more " label is clicked', done => {
createComponent({
users: UsersMockHelper.createNumberRandomUsers(6),
});
wrapper.vm.$el.querySelector('.user-list-more .btn-link').click();
Vue.nextTick(() => {
expect(wrapper.vm.$el.querySelector('.user-list-more .btn-link').innerText.trim()).toBe(
'- show less',
);
done();
});
});
it('does not show n+ more label when less than render count', () => {
it('does not show more label', () => {
expect(findMoreButton().exists()).toBe(false);
});
});
describe('n+ more label', () => {
describe('when more than rendered users', () => {
beforeEach(() => {
createComponent({
users: UsersMockHelper.createNumberRandomUsers(DEFAULT_RENDER_COUNT + 1),
......@@ -119,16 +77,26 @@ describe('UncollapsedAssigneeList component', () => {
it('shows "+1 more" label', () => {
expect(findMoreButton().text()).toBe('+ 1 more');
});
it('shows truncated users', () => {
expect(wrapper.findAll(AssigneeAvatarLink).length).toBe(DEFAULT_RENDER_COUNT);
});
it('shows "show less" label', done => {
describe('when more button is clicked', () => {
beforeEach(() => {
findMoreButton().trigger('click');
Vue.nextTick(() => {
return wrapper.vm.$nextTick();
});
it('shows "show less" label', () => {
expect(findMoreButton().text()).toBe('- show less');
});
it('shows all users', () => {
expect(wrapper.findAll(AssigneeAvatarLink).length).toBe(DEFAULT_RENDER_COUNT + 1);
done();
});
});
});
});
......
......@@ -224,7 +224,6 @@ describe('Assignee component', () => {
expect(userItems.length).toBe(3);
expect(userItems[0].dataset.originalTitle).toBe(users[2].name);
expect(userItems[0].dataset.originalTitle).not.toBe(users[0].name);
});
it('passes the sorted assignees to the collapsed-assignee-list', () => {
......@@ -244,7 +243,6 @@ describe('Assignee component', () => {
const collapsedButton = component.$el.querySelector('.sidebar-collapsed-user button');
expect(collapsedButton.innerText.trim()).toBe(users[2].name);
expect(collapsedButton.innerText.trim()).not.toBe(users[0].name);
});
});
});
export const userDataMock = {
avatar_url: 'mock_path',
id: 1,
name: 'Root',
state: 'active',
username: 'root',
web_url: '',
can_merge: true,
};
const RESPONSE_MAP = {
GET: {
'/gitlab-org/gitlab-shell/issues/5.json': {
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment