2021-02-14 13:09:20 -05:00
|
|
|
import { GlModal, GlSprintf, GlFormInputGroup, GlButton } from '@gitlab/ui';
|
|
|
|
import { shallowMount } from '@vue/test-utils';
|
2021-02-12 07:09:02 -05:00
|
|
|
import axios from 'axios';
|
|
|
|
import MockAdapter from 'axios-mock-adapter';
|
|
|
|
import { extendedWrapper } from 'helpers/vue_test_utils_helper';
|
|
|
|
import waitForPromises from 'helpers/wait_for_promises';
|
|
|
|
import IssuableByEmail from '~/issuable/components/issuable_by_email.vue';
|
2021-02-14 13:09:20 -05:00
|
|
|
import httpStatus from '~/lib/utils/http_status';
|
2021-02-12 07:09:02 -05:00
|
|
|
|
|
|
|
const initialEmail = 'user@gitlab.com';
|
|
|
|
|
|
|
|
const mockToastShow = jest.fn();
|
|
|
|
|
|
|
|
describe('IssuableByEmail', () => {
|
|
|
|
let wrapper;
|
|
|
|
let mockAxios;
|
|
|
|
let glModalDirective;
|
|
|
|
|
|
|
|
function createComponent(injectedProperties = {}) {
|
|
|
|
glModalDirective = jest.fn();
|
|
|
|
|
|
|
|
return extendedWrapper(
|
|
|
|
shallowMount(IssuableByEmail, {
|
|
|
|
stubs: {
|
|
|
|
GlModal,
|
|
|
|
GlSprintf,
|
|
|
|
GlFormInputGroup,
|
|
|
|
GlButton,
|
|
|
|
},
|
|
|
|
directives: {
|
|
|
|
glModal: {
|
|
|
|
bind(_, { value }) {
|
|
|
|
glModalDirective(value);
|
|
|
|
},
|
|
|
|
},
|
|
|
|
},
|
|
|
|
mocks: {
|
|
|
|
$toast: {
|
|
|
|
show: mockToastShow,
|
|
|
|
},
|
|
|
|
},
|
|
|
|
provide: {
|
|
|
|
issuableType: 'issue',
|
|
|
|
initialEmail,
|
|
|
|
...injectedProperties,
|
|
|
|
},
|
|
|
|
}),
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
|
|
|
beforeEach(() => {
|
|
|
|
mockAxios = new MockAdapter(axios);
|
|
|
|
});
|
|
|
|
|
|
|
|
afterEach(() => {
|
|
|
|
wrapper.destroy();
|
|
|
|
wrapper = null;
|
|
|
|
mockAxios.restore();
|
|
|
|
});
|
|
|
|
|
2021-05-21 05:10:16 -04:00
|
|
|
const findButton = () => wrapper.findComponent(GlButton);
|
|
|
|
const findFormInputGroup = () => wrapper.findComponent(GlFormInputGroup);
|
2021-02-12 07:09:02 -05:00
|
|
|
|
|
|
|
const clickResetEmail = async () => {
|
2021-05-21 05:10:16 -04:00
|
|
|
wrapper.findAllComponents(GlButton).at(2).trigger('click');
|
2021-02-12 07:09:02 -05:00
|
|
|
|
|
|
|
await waitForPromises();
|
|
|
|
};
|
|
|
|
|
|
|
|
describe('modal button', () => {
|
|
|
|
it.each`
|
|
|
|
issuableType | buttonText
|
|
|
|
${'issue'} | ${'Email a new issue to this project'}
|
|
|
|
${'merge_request'} | ${'Email a new merge request to this project'}
|
|
|
|
`(
|
|
|
|
'renders a link with "$buttonText" when type is "$issuableType"',
|
|
|
|
({ issuableType, buttonText }) => {
|
|
|
|
wrapper = createComponent({ issuableType });
|
2021-05-21 05:10:16 -04:00
|
|
|
expect(findButton().text()).toBe(buttonText);
|
2021-02-12 07:09:02 -05:00
|
|
|
},
|
|
|
|
);
|
|
|
|
|
|
|
|
it('opens the modal when the user clicks the button', () => {
|
|
|
|
wrapper = createComponent();
|
|
|
|
|
2021-05-21 05:10:16 -04:00
|
|
|
findButton().trigger('click');
|
2021-02-12 07:09:02 -05:00
|
|
|
|
|
|
|
expect(glModalDirective).toHaveBeenCalled();
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
describe('modal', () => {
|
|
|
|
it('renders a read-only email input field', () => {
|
|
|
|
wrapper = createComponent();
|
|
|
|
|
|
|
|
expect(findFormInputGroup().props('value')).toBe('user@gitlab.com');
|
|
|
|
});
|
|
|
|
|
|
|
|
it.each`
|
|
|
|
issuableType | subject | body
|
|
|
|
${'issue'} | ${'Enter the issue title'} | ${'Enter the issue description'}
|
|
|
|
${'merge_request'} | ${'Enter the merge request title'} | ${'Enter the merge request description'}
|
|
|
|
`('renders a mailto button when type is "$issuableType"', ({ issuableType, subject, body }) => {
|
|
|
|
wrapper = createComponent({
|
|
|
|
issuableType,
|
|
|
|
initialEmail,
|
|
|
|
});
|
|
|
|
|
2021-05-21 05:10:16 -04:00
|
|
|
expect(wrapper.findAllComponents(GlButton).at(1).attributes('href')).toBe(
|
2021-02-12 07:09:02 -05:00
|
|
|
`mailto:${initialEmail}?subject=${subject}&body=${body}`,
|
|
|
|
);
|
|
|
|
});
|
|
|
|
|
|
|
|
describe('reset email', () => {
|
|
|
|
const resetPath = 'gitlab-test/new_issuable_address?issuable_type=issue';
|
|
|
|
|
|
|
|
beforeEach(() => {
|
|
|
|
jest.spyOn(axios, 'put');
|
|
|
|
});
|
|
|
|
it('should send request to reset email token', async () => {
|
|
|
|
wrapper = createComponent({
|
|
|
|
issuableType: 'issue',
|
|
|
|
initialEmail,
|
|
|
|
resetPath,
|
|
|
|
});
|
|
|
|
|
|
|
|
await clickResetEmail();
|
|
|
|
|
|
|
|
expect(axios.put).toHaveBeenCalledWith(resetPath);
|
|
|
|
});
|
|
|
|
|
|
|
|
it('should update the email when the request succeeds', async () => {
|
|
|
|
mockAxios.onPut(resetPath).reply(httpStatus.OK, { new_address: 'foo@bar.com' });
|
|
|
|
|
|
|
|
wrapper = createComponent({
|
|
|
|
issuableType: 'issue',
|
|
|
|
initialEmail,
|
|
|
|
resetPath,
|
|
|
|
});
|
|
|
|
|
|
|
|
await clickResetEmail();
|
|
|
|
|
|
|
|
expect(findFormInputGroup().props('value')).toBe('foo@bar.com');
|
|
|
|
});
|
|
|
|
|
|
|
|
it('should show a toast message when the request fails', async () => {
|
|
|
|
mockAxios.onPut(resetPath).reply(httpStatus.NOT_FOUND, {});
|
|
|
|
|
|
|
|
wrapper = createComponent({
|
|
|
|
issuableType: 'issue',
|
|
|
|
initialEmail,
|
|
|
|
resetPath,
|
|
|
|
});
|
|
|
|
|
|
|
|
await clickResetEmail();
|
|
|
|
|
2021-06-24 05:07:22 -04:00
|
|
|
expect(mockToastShow).toHaveBeenCalledWith('There was an error when reseting email token.');
|
2021-02-12 07:09:02 -05:00
|
|
|
expect(findFormInputGroup().props('value')).toBe('user@gitlab.com');
|
|
|
|
});
|
|
|
|
});
|
|
|
|
});
|
|
|
|
});
|