2020-09-28 15:09:44 +00:00
|
|
|
import { shallowMount } from '@vue/test-utils';
|
2020-12-24 09:10:15 +00:00
|
|
|
import { GlDropdown, GlDropdownItem, GlDatepicker, GlSprintf, GlLink, GlModal } from '@gitlab/ui';
|
|
|
|
import { stubComponent } from 'helpers/stub_component';
|
2021-01-08 15:10:26 +00:00
|
|
|
import waitForPromises from 'helpers/wait_for_promises';
|
2020-09-28 15:09:44 +00:00
|
|
|
import Api from '~/api';
|
|
|
|
import InviteMembersModal from '~/invite_members/components/invite_members_modal.vue';
|
|
|
|
|
2020-11-13 09:09:30 +00:00
|
|
|
const id = '1';
|
|
|
|
const name = 'testgroup';
|
|
|
|
const isProject = false;
|
2020-09-28 15:09:44 +00:00
|
|
|
const accessLevels = { Guest: 10, Reporter: 20, Developer: 30, Maintainer: 40, Owner: 50 };
|
|
|
|
const defaultAccessLevel = '10';
|
|
|
|
const helpLink = 'https://example.com';
|
|
|
|
|
2021-01-08 15:10:26 +00:00
|
|
|
const user1 = { id: 1, name: 'Name One', username: 'one_1', avatar_url: '' };
|
|
|
|
const user2 = { id: 2, name: 'Name Two', username: 'one_2', avatar_url: '' };
|
|
|
|
const user3 = {
|
|
|
|
id: 'user-defined-token',
|
|
|
|
name: 'email@example.com',
|
|
|
|
username: 'one_2',
|
|
|
|
avatar_url: '',
|
|
|
|
};
|
|
|
|
|
2020-11-05 18:08:48 +00:00
|
|
|
const createComponent = (data = {}) => {
|
2020-09-28 15:09:44 +00:00
|
|
|
return shallowMount(InviteMembersModal, {
|
|
|
|
propsData: {
|
2020-11-13 09:09:30 +00:00
|
|
|
id,
|
|
|
|
name,
|
|
|
|
isProject,
|
2020-09-28 15:09:44 +00:00
|
|
|
accessLevels,
|
|
|
|
defaultAccessLevel,
|
|
|
|
helpLink,
|
|
|
|
},
|
2020-11-05 18:08:48 +00:00
|
|
|
data() {
|
|
|
|
return data;
|
|
|
|
},
|
2020-09-28 15:09:44 +00:00
|
|
|
stubs: {
|
2020-12-24 09:10:15 +00:00
|
|
|
GlModal: stubComponent(GlModal, {
|
|
|
|
template:
|
|
|
|
'<div><slot name="modal-title"></slot><slot></slot><slot name="modal-footer"></slot></div>',
|
|
|
|
}),
|
|
|
|
GlDropdown: true,
|
|
|
|
GlDropdownItem: true,
|
2020-11-05 18:08:48 +00:00
|
|
|
GlSprintf,
|
2020-09-28 15:09:44 +00:00
|
|
|
},
|
|
|
|
});
|
|
|
|
};
|
|
|
|
|
|
|
|
describe('InviteMembersModal', () => {
|
|
|
|
let wrapper;
|
|
|
|
|
|
|
|
afterEach(() => {
|
|
|
|
wrapper.destroy();
|
|
|
|
wrapper = null;
|
|
|
|
});
|
|
|
|
|
|
|
|
const findDropdown = () => wrapper.find(GlDropdown);
|
2020-11-05 18:08:48 +00:00
|
|
|
const findDropdownItems = () => findDropdown().findAll(GlDropdownItem);
|
2020-09-28 15:09:44 +00:00
|
|
|
const findDatepicker = () => wrapper.find(GlDatepicker);
|
|
|
|
const findLink = () => wrapper.find(GlLink);
|
|
|
|
const findCancelButton = () => wrapper.find({ ref: 'cancelButton' });
|
|
|
|
const findInviteButton = () => wrapper.find({ ref: 'inviteButton' });
|
2021-01-08 15:10:26 +00:00
|
|
|
const clickInviteButton = () => findInviteButton().vm.$emit('click');
|
2020-09-28 15:09:44 +00:00
|
|
|
|
|
|
|
describe('rendering the modal', () => {
|
|
|
|
beforeEach(() => {
|
|
|
|
wrapper = createComponent();
|
|
|
|
});
|
|
|
|
|
|
|
|
it('renders the modal with the correct title', () => {
|
2021-01-11 12:10:41 +00:00
|
|
|
expect(wrapper.find(GlModal).props('title')).toBe('Invite team members');
|
2020-09-28 15:09:44 +00:00
|
|
|
});
|
|
|
|
|
|
|
|
it('renders the Cancel button text correctly', () => {
|
|
|
|
expect(findCancelButton().text()).toBe('Cancel');
|
|
|
|
});
|
|
|
|
|
|
|
|
it('renders the Invite button text correctly', () => {
|
|
|
|
expect(findInviteButton().text()).toBe('Invite');
|
|
|
|
});
|
|
|
|
|
|
|
|
describe('rendering the access levels dropdown', () => {
|
|
|
|
it('sets the default dropdown text to the default access level name', () => {
|
|
|
|
expect(findDropdown().attributes('text')).toBe('Guest');
|
|
|
|
});
|
|
|
|
|
|
|
|
it('renders dropdown items for each accessLevel', () => {
|
|
|
|
expect(findDropdownItems()).toHaveLength(5);
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
describe('rendering the help link', () => {
|
|
|
|
it('renders the correct link', () => {
|
|
|
|
expect(findLink().attributes('href')).toBe(helpLink);
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
describe('rendering the access expiration date field', () => {
|
|
|
|
it('renders the datepicker', () => {
|
|
|
|
expect(findDatepicker()).toExist();
|
|
|
|
});
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
describe('submitting the invite form', () => {
|
2021-01-08 15:10:26 +00:00
|
|
|
const apiErrorMessage = 'Member already exists';
|
|
|
|
|
|
|
|
describe('when inviting an existing user to group by user ID', () => {
|
|
|
|
const postData = {
|
|
|
|
user_id: '1',
|
|
|
|
access_level: '10',
|
|
|
|
expires_at: undefined,
|
|
|
|
format: 'json',
|
|
|
|
};
|
|
|
|
|
|
|
|
describe('when invites are sent successfully', () => {
|
|
|
|
beforeEach(() => {
|
|
|
|
wrapper = createComponent({ newUsersToInvite: [user1] });
|
2020-09-28 15:09:44 +00:00
|
|
|
|
2021-01-08 15:10:26 +00:00
|
|
|
wrapper.vm.$toast = { show: jest.fn() };
|
|
|
|
jest.spyOn(Api, 'addGroupMembersByUserId').mockResolvedValue({ data: postData });
|
|
|
|
jest.spyOn(wrapper.vm, 'showToastMessageSuccess');
|
2020-11-05 18:08:48 +00:00
|
|
|
|
2021-01-08 15:10:26 +00:00
|
|
|
clickInviteButton();
|
|
|
|
});
|
2020-09-28 15:09:44 +00:00
|
|
|
|
2021-01-08 15:10:26 +00:00
|
|
|
it('calls Api addGroupMembersByUserId with the correct params', () => {
|
|
|
|
expect(Api.addGroupMembersByUserId).toHaveBeenCalledWith(id, postData);
|
|
|
|
});
|
|
|
|
|
|
|
|
it('displays the successful toastMessage', () => {
|
|
|
|
expect(wrapper.vm.showToastMessageSuccess).toHaveBeenCalled();
|
|
|
|
});
|
2020-11-05 18:08:48 +00:00
|
|
|
});
|
2020-09-28 15:09:44 +00:00
|
|
|
|
2021-01-08 15:10:26 +00:00
|
|
|
describe('when the invite received an api error message', () => {
|
|
|
|
beforeEach(() => {
|
|
|
|
wrapper = createComponent({ newUsersToInvite: [user1] });
|
|
|
|
|
|
|
|
wrapper.vm.$toast = { show: jest.fn() };
|
|
|
|
jest
|
|
|
|
.spyOn(Api, 'addGroupMembersByUserId')
|
|
|
|
.mockRejectedValue({ response: { data: { message: apiErrorMessage } } });
|
|
|
|
jest.spyOn(wrapper.vm, 'showToastMessageError');
|
|
|
|
|
|
|
|
clickInviteButton();
|
|
|
|
});
|
2020-11-05 18:08:48 +00:00
|
|
|
|
2021-01-08 15:10:26 +00:00
|
|
|
it('displays the apiErrorMessage in the toastMessage', async () => {
|
|
|
|
await waitForPromises();
|
|
|
|
|
|
|
|
expect(wrapper.vm.showToastMessageError).toHaveBeenCalledWith({
|
|
|
|
response: { data: { message: apiErrorMessage } },
|
|
|
|
});
|
|
|
|
});
|
2020-11-05 18:08:48 +00:00
|
|
|
});
|
|
|
|
|
2021-01-08 15:10:26 +00:00
|
|
|
describe('when any invite failed for any other reason', () => {
|
|
|
|
beforeEach(() => {
|
|
|
|
wrapper = createComponent({ newUsersToInvite: [user1, user2] });
|
|
|
|
|
|
|
|
wrapper.vm.$toast = { show: jest.fn() };
|
|
|
|
jest
|
|
|
|
.spyOn(Api, 'addGroupMembersByUserId')
|
|
|
|
.mockRejectedValue({ response: { data: { success: false } } });
|
|
|
|
jest.spyOn(wrapper.vm, 'showToastMessageError');
|
|
|
|
|
|
|
|
clickInviteButton();
|
|
|
|
});
|
|
|
|
|
|
|
|
it('displays the generic error toastMessage', async () => {
|
|
|
|
await waitForPromises();
|
|
|
|
|
|
|
|
expect(wrapper.vm.showToastMessageError).toHaveBeenCalled();
|
|
|
|
});
|
2020-11-05 18:08:48 +00:00
|
|
|
});
|
2020-09-28 15:09:44 +00:00
|
|
|
});
|
|
|
|
|
2021-01-08 15:10:26 +00:00
|
|
|
describe('when inviting a new user by email address', () => {
|
|
|
|
const postData = {
|
|
|
|
access_level: '10',
|
|
|
|
expires_at: undefined,
|
|
|
|
email: 'email@example.com',
|
|
|
|
format: 'json',
|
|
|
|
};
|
|
|
|
|
|
|
|
describe('when invites are sent successfully', () => {
|
|
|
|
beforeEach(() => {
|
|
|
|
wrapper = createComponent({ newUsersToInvite: [user3] });
|
|
|
|
|
|
|
|
wrapper.vm.$toast = { show: jest.fn() };
|
|
|
|
jest.spyOn(Api, 'inviteGroupMembersByEmail').mockResolvedValue({ data: postData });
|
|
|
|
jest.spyOn(wrapper.vm, 'showToastMessageSuccess');
|
2020-11-05 18:08:48 +00:00
|
|
|
|
2021-01-08 15:10:26 +00:00
|
|
|
clickInviteButton();
|
|
|
|
});
|
2020-11-05 18:08:48 +00:00
|
|
|
|
2021-01-08 15:10:26 +00:00
|
|
|
it('calls Api inviteGroupMembersByEmail with the correct params', () => {
|
|
|
|
expect(Api.inviteGroupMembersByEmail).toHaveBeenCalledWith(id, postData);
|
|
|
|
});
|
2020-11-05 18:08:48 +00:00
|
|
|
|
2021-01-08 15:10:26 +00:00
|
|
|
it('displays the successful toastMessage', () => {
|
|
|
|
expect(wrapper.vm.showToastMessageSuccess).toHaveBeenCalled();
|
|
|
|
});
|
2020-11-05 18:08:48 +00:00
|
|
|
});
|
|
|
|
|
2021-01-08 15:10:26 +00:00
|
|
|
describe('when any invite failed for any reason', () => {
|
|
|
|
beforeEach(() => {
|
|
|
|
wrapper = createComponent({ newUsersToInvite: [user1, user2] });
|
|
|
|
|
|
|
|
wrapper.vm.$toast = { show: jest.fn() };
|
|
|
|
jest
|
|
|
|
.spyOn(Api, 'addGroupMembersByUserId')
|
|
|
|
.mockRejectedValue({ response: { data: { success: false } } });
|
|
|
|
jest.spyOn(wrapper.vm, 'showToastMessageError');
|
|
|
|
|
|
|
|
clickInviteButton();
|
|
|
|
});
|
|
|
|
|
|
|
|
it('displays the generic error toastMessage', async () => {
|
|
|
|
await waitForPromises();
|
|
|
|
|
|
|
|
expect(wrapper.vm.showToastMessageError).toHaveBeenCalled();
|
|
|
|
});
|
2020-11-05 18:08:48 +00:00
|
|
|
});
|
2020-09-28 15:09:44 +00:00
|
|
|
});
|
|
|
|
|
2021-01-08 15:10:26 +00:00
|
|
|
describe('when inviting members and non-members in same click', () => {
|
|
|
|
const postData = {
|
|
|
|
access_level: '10',
|
|
|
|
expires_at: undefined,
|
|
|
|
format: 'json',
|
|
|
|
};
|
|
|
|
|
|
|
|
const emailPostData = { ...postData, email: 'email@example.com' };
|
|
|
|
const idPostData = { ...postData, user_id: '1' };
|
|
|
|
|
|
|
|
describe('when invites are sent successfully', () => {
|
|
|
|
beforeEach(() => {
|
|
|
|
wrapper = createComponent({ newUsersToInvite: [user1, user3] });
|
|
|
|
|
|
|
|
wrapper.vm.$toast = { show: jest.fn() };
|
|
|
|
jest.spyOn(Api, 'inviteGroupMembersByEmail').mockResolvedValue({ data: postData });
|
|
|
|
jest.spyOn(Api, 'addGroupMembersByUserId').mockResolvedValue({ data: postData });
|
|
|
|
jest.spyOn(wrapper.vm, 'showToastMessageSuccess');
|
2020-09-28 15:09:44 +00:00
|
|
|
|
2021-01-08 15:10:26 +00:00
|
|
|
clickInviteButton();
|
|
|
|
});
|
2020-11-05 18:08:48 +00:00
|
|
|
|
2021-01-08 15:10:26 +00:00
|
|
|
it('calls Api inviteGroupMembersByEmail with the correct params', () => {
|
|
|
|
expect(Api.inviteGroupMembersByEmail).toHaveBeenCalledWith(id, emailPostData);
|
|
|
|
});
|
2020-11-05 18:08:48 +00:00
|
|
|
|
2021-01-08 15:10:26 +00:00
|
|
|
it('calls Api addGroupMembersByUserId with the correct params', () => {
|
|
|
|
expect(Api.addGroupMembersByUserId).toHaveBeenCalledWith(id, idPostData);
|
|
|
|
});
|
|
|
|
|
|
|
|
it('displays the successful toastMessage', () => {
|
|
|
|
expect(wrapper.vm.showToastMessageSuccess).toHaveBeenCalled();
|
|
|
|
});
|
2020-11-05 18:08:48 +00:00
|
|
|
});
|
|
|
|
|
2021-01-08 15:10:26 +00:00
|
|
|
describe('when any invite failed for any reason', () => {
|
|
|
|
beforeEach(() => {
|
|
|
|
wrapper = createComponent({ newUsersToInvite: [user1, user3] });
|
|
|
|
|
|
|
|
wrapper.vm.$toast = { show: jest.fn() };
|
|
|
|
|
|
|
|
jest
|
|
|
|
.spyOn(Api, 'inviteGroupMembersByEmail')
|
|
|
|
.mockRejectedValue({ response: { data: { success: false } } });
|
|
|
|
|
|
|
|
jest.spyOn(Api, 'addGroupMembersByUserId').mockResolvedValue({ data: postData });
|
|
|
|
jest.spyOn(wrapper.vm, 'showToastMessageError');
|
|
|
|
|
|
|
|
clickInviteButton();
|
|
|
|
});
|
|
|
|
|
|
|
|
it('displays the generic error toastMessage', async () => {
|
|
|
|
await waitForPromises();
|
|
|
|
|
|
|
|
expect(wrapper.vm.showToastMessageError).toHaveBeenCalled();
|
|
|
|
});
|
2020-09-28 15:09:44 +00:00
|
|
|
});
|
|
|
|
});
|
|
|
|
});
|
|
|
|
});
|