mirror of
https://github.com/elyby/accounts-frontend.git
synced 2025-05-31 14:11:58 +05:30
Fix all tests and replace enzyme with @testing-library/react
This commit is contained in:
SleepWalker
@@ -1,61 +1,60 @@
|
||||
import React, { ComponentProps } from 'react';
|
||||
import React from 'react';
|
||||
import expect from 'app/test/unexpected';
|
||||
import sinon from 'sinon';
|
||||
import { shallow, mount, ShallowWrapper, ReactWrapper } from 'enzyme';
|
||||
import { IntlProvider } from 'react-intl';
|
||||
import { render, fireEvent, waitFor, screen } from '@testing-library/react';
|
||||
import feedback from 'app/services/api/feedback';
|
||||
import { User } from 'app/components/user';
|
||||
import { TestContextProvider } from 'app/shell';
|
||||
|
||||
import { ContactForm } from './ContactForm';
|
||||
|
||||
type ContactFormShallowType = ShallowWrapper<
|
||||
ComponentProps<typeof ContactForm>,
|
||||
any,
|
||||
ContactForm
|
||||
>;
|
||||
beforeEach(() => {
|
||||
sinon.stub(feedback, 'send').returns(Promise.resolve() as any);
|
||||
});
|
||||
|
||||
afterEach(() => {
|
||||
(feedback.send as any).restore();
|
||||
});
|
||||
|
||||
describe('ContactForm', () => {
|
||||
describe('when rendered', () => {
|
||||
it('should contain Form', () => {
|
||||
const user = {} as User;
|
||||
let component: ContactFormShallowType;
|
||||
|
||||
beforeEach(() => {
|
||||
component = shallow(<ContactForm user={user} />);
|
||||
});
|
||||
render(
|
||||
<TestContextProvider>
|
||||
<ContactForm user={user} />
|
||||
</TestContextProvider>,
|
||||
);
|
||||
|
||||
expect(screen.getAllByRole('textbox').length, 'to be greater than', 1);
|
||||
|
||||
expect(
|
||||
screen.getByRole('button', { name: /Send/ }),
|
||||
'to have property',
|
||||
'type',
|
||||
'submit',
|
||||
);
|
||||
|
||||
[
|
||||
{
|
||||
type: 'Input',
|
||||
label: 'subject',
|
||||
name: 'subject',
|
||||
},
|
||||
{
|
||||
type: 'Input',
|
||||
label: 'E‑mail',
|
||||
name: 'email',
|
||||
},
|
||||
{
|
||||
type: 'Dropdown',
|
||||
name: 'category',
|
||||
},
|
||||
{
|
||||
type: 'TextArea',
|
||||
label: 'message',
|
||||
name: 'message',
|
||||
},
|
||||
].forEach((el) => {
|
||||
it(`should have ${el.name} field`, () => {
|
||||
expect(component.find(`${el.type}[name="${el.name}"]`), 'to satisfy', {
|
||||
length: 1,
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
it('should contain Form', () => {
|
||||
expect(component.find('Form'), 'to satisfy', { length: 1 });
|
||||
});
|
||||
|
||||
it('should contain submit Button', () => {
|
||||
expect(component.find('Button[type="submit"]'), 'to satisfy', {
|
||||
length: 1,
|
||||
});
|
||||
expect(
|
||||
screen.getByLabelText(el.label, { exact: false }),
|
||||
'to have property',
|
||||
'name',
|
||||
el.name,
|
||||
);
|
||||
});
|
||||
});
|
||||
|
||||
@@ -63,148 +62,109 @@ describe('ContactForm', () => {
|
||||
const user = {
|
||||
email: 'foo@bar.com',
|
||||
} as User;
|
||||
let component: ContactFormShallowType;
|
||||
|
||||
beforeEach(() => {
|
||||
component = shallow(<ContactForm user={user} />);
|
||||
});
|
||||
|
||||
it('should render email field with user email', () => {
|
||||
render(
|
||||
<TestContextProvider>
|
||||
<ContactForm user={user} />
|
||||
</TestContextProvider>,
|
||||
);
|
||||
|
||||
expect(screen.getByDisplayValue(user.email), 'to be a', HTMLInputElement);
|
||||
});
|
||||
});
|
||||
|
||||
it('should submit and then hide form and display success message', async () => {
|
||||
const user = {
|
||||
email: 'foo@bar.com',
|
||||
} as User;
|
||||
|
||||
render(
|
||||
<TestContextProvider>
|
||||
<ContactForm user={user} />
|
||||
</TestContextProvider>,
|
||||
);
|
||||
|
||||
fireEvent.change(screen.getByLabelText(/subject/i), {
|
||||
target: {
|
||||
value: 'subject',
|
||||
},
|
||||
});
|
||||
|
||||
fireEvent.change(screen.getByLabelText(/message/i), {
|
||||
target: {
|
||||
value: 'the message',
|
||||
},
|
||||
});
|
||||
|
||||
const button = screen.getByRole('button', { name: 'Send' });
|
||||
|
||||
expect(button, 'to have property', 'disabled', false);
|
||||
|
||||
fireEvent.click(button);
|
||||
|
||||
expect(button, 'to have property', 'disabled', true);
|
||||
expect(feedback.send, 'to have a call exhaustively satisfying', [
|
||||
{
|
||||
subject: 'subject',
|
||||
email: user.email,
|
||||
category: '',
|
||||
message: 'the message',
|
||||
},
|
||||
]);
|
||||
|
||||
await waitFor(() => {
|
||||
expect(
|
||||
component.find('Input[name="email"]').prop('defaultValue'),
|
||||
'to equal',
|
||||
user.email,
|
||||
screen.getByText('Your message was received', { exact: false }),
|
||||
'to be a',
|
||||
HTMLElement,
|
||||
);
|
||||
});
|
||||
|
||||
expect(screen.getByText(user.email), 'to be a', HTMLElement);
|
||||
|
||||
expect(screen.queryByRole('button', { name: /Send/ }), 'to be null');
|
||||
});
|
||||
|
||||
describe('when email was successfully sent', () => {
|
||||
it('should show validation messages', async () => {
|
||||
const user = {
|
||||
email: 'foo@bar.com',
|
||||
} as User;
|
||||
let component: ContactFormShallowType;
|
||||
|
||||
beforeEach(() => {
|
||||
component = shallow(<ContactForm user={user} />);
|
||||
(feedback.send as any).callsFake(() =>
|
||||
Promise.reject({
|
||||
success: false,
|
||||
errors: { email: 'error.email_invalid' },
|
||||
}),
|
||||
);
|
||||
|
||||
component.setState({ isSuccessfullySent: true });
|
||||
render(
|
||||
<TestContextProvider>
|
||||
<ContactForm user={user} />
|
||||
</TestContextProvider>,
|
||||
);
|
||||
|
||||
fireEvent.change(screen.getByLabelText(/subject/i), {
|
||||
target: {
|
||||
value: 'subject',
|
||||
},
|
||||
});
|
||||
|
||||
it('should not contain Form', () => {
|
||||
expect(component.find('Form'), 'to satisfy', { length: 0 });
|
||||
fireEvent.change(screen.getByLabelText(/message/i), {
|
||||
target: {
|
||||
value: 'the message',
|
||||
},
|
||||
});
|
||||
});
|
||||
|
||||
xdescribe('validation', () => {
|
||||
const user = {
|
||||
email: 'foo@bar.com',
|
||||
} as User;
|
||||
let component: ContactForm;
|
||||
let wrapper: ReactWrapper;
|
||||
fireEvent.click(screen.getByRole('button', { name: 'Send' }));
|
||||
|
||||
beforeEach(() => {
|
||||
// TODO: add polyfill for from validation for jsdom
|
||||
|
||||
wrapper = mount(
|
||||
<IntlProvider locale="en" defaultLocale="en">
|
||||
<ContactForm user={user} ref={(el) => (component = el!)} />
|
||||
</IntlProvider>,
|
||||
await waitFor(() => {
|
||||
expect(
|
||||
screen.getByRole('alert'),
|
||||
'to have property',
|
||||
'innerHTML',
|
||||
'E‑mail is invalid',
|
||||
);
|
||||
});
|
||||
|
||||
it('should require email, subject and message', () => {
|
||||
// wrapper.find('[type="submit"]').simulate('click');
|
||||
wrapper.find('form').simulate('submit');
|
||||
|
||||
expect(component.form.hasErrors(), 'to be true');
|
||||
});
|
||||
});
|
||||
|
||||
describe('when user submits form', () => {
|
||||
const user = {
|
||||
email: 'foo@bar.com',
|
||||
} as User;
|
||||
let component: ContactForm;
|
||||
let wrapper: ReactWrapper;
|
||||
const requestData = {
|
||||
email: user.email,
|
||||
subject: 'Test subject',
|
||||
message: 'Test message',
|
||||
};
|
||||
|
||||
beforeEach(() => {
|
||||
sinon.stub(feedback, 'send');
|
||||
|
||||
// TODO: add polyfill for from validation for jsdom
|
||||
if (!(Element.prototype as any).checkValidity) {
|
||||
(Element.prototype as any).checkValidity = () => true;
|
||||
}
|
||||
|
||||
// TODO: try to rewrite with unexpected-react
|
||||
wrapper = mount(
|
||||
<IntlProvider locale="en" defaultLocale="en">
|
||||
<ContactForm user={user} ref={(el) => (component = el!)} />
|
||||
</IntlProvider>,
|
||||
);
|
||||
|
||||
wrapper.find('input[name="email"]').getDOMNode<HTMLInputElement>().value =
|
||||
requestData.email;
|
||||
wrapper
|
||||
.find('input[name="subject"]')
|
||||
.getDOMNode<HTMLInputElement>().value = requestData.subject;
|
||||
wrapper
|
||||
.find('textarea[name="message"]')
|
||||
.getDOMNode<HTMLInputElement>().value = requestData.message;
|
||||
});
|
||||
|
||||
afterEach(() => {
|
||||
(feedback.send as any).restore();
|
||||
});
|
||||
|
||||
xit('should call onSubmit', () => {
|
||||
sinon.stub(component, 'onSubmit');
|
||||
|
||||
wrapper.find('form').simulate('submit');
|
||||
|
||||
expect(component.onSubmit, 'was called');
|
||||
});
|
||||
|
||||
it('should call send with required data', () => {
|
||||
(feedback.send as any).returns(Promise.resolve());
|
||||
|
||||
component.onSubmit();
|
||||
|
||||
expect(feedback.send, 'to have a call satisfying', [requestData]);
|
||||
});
|
||||
|
||||
it('should set isSuccessfullySent', () => {
|
||||
(feedback.send as any).returns(Promise.resolve());
|
||||
|
||||
return component
|
||||
.onSubmit()
|
||||
.then(() =>
|
||||
expect(component.state, 'to satisfy', { isSuccessfullySent: true }),
|
||||
);
|
||||
});
|
||||
|
||||
it('should handle isLoading during request', () => {
|
||||
(feedback.send as any).returns(Promise.resolve());
|
||||
|
||||
const promise = component.onSubmit();
|
||||
|
||||
expect(component.state, 'to satisfy', { isLoading: true });
|
||||
|
||||
return promise.then(() =>
|
||||
expect(component.state, 'to satisfy', { isLoading: false }),
|
||||
);
|
||||
});
|
||||
|
||||
it('should render success message with user email', () => {
|
||||
(feedback.send as any).returns(Promise.resolve());
|
||||
|
||||
return component
|
||||
.onSubmit()
|
||||
.then(() => expect(wrapper.text(), 'to contain', user.email));
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
@@ -140,7 +140,12 @@ export class ContactForm extends React.Component<
|
||||
</div>
|
||||
|
||||
<div className={styles.footer}>
|
||||
<Button label={messages.send} block type="submit" />
|
||||
<Button
|
||||
label={messages.send}
|
||||
block
|
||||
type="submit"
|
||||
disabled={isLoading}
|
||||
/>
|
||||
</div>
|
||||
</Form>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user