Skip to content

Commit

Permalink
rewrite tests in recommended way and add more cases coverage
Browse files Browse the repository at this point in the history
  • Loading branch information
@umputun
Pavel Mineev authored and umputun committed Apr 9, 2021
1 parent c9ce2bb commit 6cf2849
Showing 1 changed file with 76 additions and 71 deletions.
147 changes: 76 additions & 71 deletions frontend/app/components/auth/auth.spec.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,12 +2,13 @@ import '@testing-library/jest-dom';
import { h } from 'preact';
import { fireEvent, render, waitFor } from '@testing-library/preact';

import { Provider, User } from 'common/types';
import { OAuthProvider, User } from 'common/types';
import { StaticStore } from 'common/static-store';

import Auth from './auth';
import * as utils from './auth.utils';
import * as api from './auth.api';
import { getProviderData } from './components/oauth.utils';

jest.mock('react-redux', () => ({
useDispatch: () => jest.fn(),
Expand All @@ -31,35 +32,35 @@ describe('<Auth/>', () => {
});

it('should close dropdown by click on button', () => {
const { container } = render(<Auth />);
const { container, getByText } = render(<Auth />);

expect(container.querySelector('.auth-dropdown')).not.toBeInTheDocument();

fireEvent.click(container.querySelector('.auth-button')!);
fireEvent.click(getByText('Sign In'));
expect(container.querySelector('.auth-dropdown')).toBeInTheDocument();

fireEvent.click(container.querySelector('.auth-button')!);
fireEvent.click(getByText('Sign In'));
expect(container.querySelector('.auth-dropdown')).not.toBeInTheDocument();
});

it('should close dropdown by click outside of it', () => {
const { container } = render(<Auth />);
const { container, getByText } = render(<Auth />);

expect(container.querySelector('.auth-dropdown')).not.toBeInTheDocument();

fireEvent.click(container.querySelector('.auth-button')!);
fireEvent.click(getByText('Sign In'));
expect(container.querySelector('.auth-dropdown')).toBeInTheDocument();

fireEvent.click(document);
expect(container.querySelector('.auth-dropdown')).not.toBeInTheDocument();
});

it('should close dropdown by message from parent', async () => {
const { container } = render(<Auth />);
const { container, getByText } = render(<Auth />);

expect(container.querySelector('.auth-dropdown')).not.toBeInTheDocument();

fireEvent.click(container.querySelector('.auth-button')!);
fireEvent.click(getByText('Sign In'));
expect(container.querySelector('.auth-dropdown')).toBeInTheDocument();

window.postMessage('{"clickOutside": true}', '*');
Expand All @@ -74,61 +75,66 @@ describe('<Auth/>', () => {
[['facebook', 'google', 'microsoft']],
[['facebook', 'google', 'microsoft', 'yandex']],
[['facebook', 'google', 'microsoft', 'yandex', 'twitter']],
] as [Provider[]][])('should renders with %j providers', (providers) => {
] as [OAuthProvider[]][])('should renders with %j providers', async (providers) => {
StaticStore.config.auth_providers = providers;

const { container } = render(<Auth />);
const { container, getByText, getByTitle, queryByPlaceholderText, queryByText } = render(<Auth />);

expect(container.querySelector('.auth-dropdown')).toBeNull();
expect(container.querySelector('.auth-dropdown')).not.toBeInTheDocument();

fireEvent.click(container.querySelector('.auth-button')!);
expect(getByText('Sign In')).toHaveClass('auth-button');
fireEvent.click(getByText('Sign In'));
expect(container.querySelector('.auth-dropdown')).toBeInTheDocument();
expect(container.querySelectorAll('.oauth-button')).toHaveLength(providers.length);
expect(container.querySelector('[name="username"]')).not.toBeInTheDocument();
expect(container.querySelector('.auth-submit')).not.toBeInTheDocument();
providers.forEach((p) => {
const { name } = getProviderData(p, 'light');
expect(getByTitle(`Sign In with ${name}`)).toBeInTheDocument();
});
expect(queryByPlaceholderText('Username')).not.toBeInTheDocument();
expect(queryByText('Submit')).not.toBeInTheDocument();
});

it('should render email provider', () => {
StaticStore.config.auth_providers = ['email'];

const { container } = render(<Auth />);
const { getByText, getByPlaceholderText } = render(<Auth />);

fireEvent.click(container.querySelector('.auth-button')!);
expect(container.querySelector('.auth-dropdown')).toBeInTheDocument();
expect(container.querySelector('.auth-form-title')?.innerHTML).toContain('email');
expect(container.querySelector('[name="username"]')).toBeInTheDocument();
expect(container.querySelector('[name="email"]')).toBeInTheDocument();
expect(container.querySelector('.auth-submit')).toBeInTheDocument();
fireEvent.click(getByText('Sign In'));
expect(getByText('email')).toHaveClass('auth-form-title');
expect(getByPlaceholderText('Username')).toHaveClass('auth-input-username');
expect(getByPlaceholderText('Email Address')).toHaveClass('auth-input-email');
expect(getByText('Submit')).toHaveClass('auth-submit');
});

it('should render anonymous provider', () => {
StaticStore.config.auth_providers = ['anonymous'];

const { container } = render(<Auth />);
const { getByText, getByPlaceholderText } = render(<Auth />);

fireEvent.click(container.querySelector('.auth-button')!);
expect(container.querySelector('.auth-dropdown')).toBeInTheDocument();
expect(container.querySelector('.auth-form-title')?.innerHTML).toContain('anonymous');
expect(container.querySelector('[name="username"]')).toBeInTheDocument();
expect(container.querySelector('.auth-submit')).toBeInTheDocument();
fireEvent.click(getByText('Sign In'));
expect(getByText('anonymous')).toHaveClass('auth-form-title');
expect(getByPlaceholderText('Username')).toHaveClass('auth-input-username');
expect(getByText('Submit')).toHaveClass('auth-submit');
});

it('should render tabs with two form providers', () => {
StaticStore.config.auth_providers = ['email', 'anonymous'];

const { container } = render(<Auth />);

fireEvent.click(container.querySelector('.auth-button')!);
expect(container.querySelector('.auth-dropdown')).toBeInTheDocument();
expect(container.querySelector('[for="form-provider-anonymous"]')).toBeInTheDocument();
expect(container.querySelector('[for="form-provider-email"]')).toBeInTheDocument();
expect(container.querySelector('[name="username"]')).toBeInTheDocument();
expect(container.querySelector('.auth-submit')).toBeInTheDocument();

fireEvent.click(container.querySelector('[for="form-provider-email"]')!);
expect(container.querySelector('[name="username"]')).toBeInTheDocument();
expect(container.querySelector('[name="email"]')).toBeInTheDocument();
expect(container.querySelector('.auth-submit')).toBeInTheDocument();
const { getByText, getByLabelText, getByPlaceholderText, getByDisplayValue } = render(<Auth />);

fireEvent.click(getByText('Sign In'));
expect(getByDisplayValue('email')).toHaveAttribute('id', 'form-provider-email');
expect(getByText('email')).toHaveAttribute('for', 'form-provider-email');
expect(getByText('email')).toHaveClass('auth-tabs-item');
expect(getByDisplayValue('anonymous')).toHaveAttribute('id', 'form-provider-anonymous');
expect(getByText('anonym')).toHaveAttribute('for', 'form-provider-anonymous');
expect(getByText('anonym')).toHaveClass('auth-tabs-item');
expect(getByPlaceholderText('Username')).toHaveClass('auth-input-username');
expect(getByText('Submit')).toHaveClass('auth-submit');

fireEvent.click(getByLabelText('email'));
expect(getByPlaceholderText('Username')).toHaveClass('auth-input-username');
expect(getByPlaceholderText('Email Address')).toHaveClass('auth-input-email');
expect(getByText('Submit')).toHaveClass('auth-submit');
});

it('should send email and then verify forms', async () => {
Expand All @@ -137,27 +143,28 @@ describe('<Auth/>', () => {
jest.spyOn(api, 'verifyEmailSignin').mockImplementationOnce(async () => ({} as User));
jest.spyOn(utils, 'getTokenInvalidReason').mockImplementationOnce(() => null);

const { container } = render(<Auth />);
const { getByText, getByPlaceholderText, getByTitle, getByRole } = render(<Auth />);

fireEvent.click(container.querySelector('.auth-button')!);
fireEvent.change(container.querySelector('[name="username"]')!, { target: { value: 'username' } });
fireEvent.change(container.querySelector('[name="email"]')!, {
fireEvent.click(getByText('Sign In'));
fireEvent.change(getByPlaceholderText('Username'), { target: { value: 'username' } });
fireEvent.change(getByPlaceholderText('Email Address'), {
target: { value: '[email protected]' },
});
fireEvent.click(container.querySelector('.auth-submit')!);
fireEvent.click(getByText('Submit'));

expect(container.querySelector('.spinner')).toBeInTheDocument();
expect(getByRole('presentation')).toHaveClass('spinner');
await waitFor(() => expect(api.emailSignin).toBeCalled());
expect(api.emailSignin).toBeCalledWith('[email protected]', 'username');

expect(container.querySelector('.auth-back-button')).toBeInTheDocument();
expect(container.querySelector('.auth-close-button')).toBeInTheDocument();
expect(container.querySelector('[name="token"]')).toBeInTheDocument();
expect(getByText('Back')).toHaveClass('auth-back-button');
expect(getByTitle('Close sign-in dropdown')).toHaveClass('auth-close-button');
expect(getByPlaceholderText('Token')).toHaveClass('auth-token-textatea');

fireEvent.change(container.querySelector('[name="token"]')!, {
fireEvent.change(getByPlaceholderText('Token'), {
target: { value: 'token' },
});
fireEvent.click(container.querySelector('.auth-submit')!);

fireEvent.click(getByText('Submit'));

await waitFor(() => expect(api.verifyEmailSignin).toBeCalled());
expect(api.verifyEmailSignin).toBeCalledWith('token');
Expand All @@ -167,43 +174,41 @@ describe('<Auth/>', () => {
StaticStore.config.auth_providers = ['email'];
jest.spyOn(api, 'emailSignin').mockImplementationOnce(async () => null);

const { container, getByText } = render(<Auth />);
const { getByText, getByTitle, getByPlaceholderText } = render(<Auth />);

fireEvent.click(container.querySelector('.auth-button')!);

fireEvent.change(container.querySelector('[name="username"]')!, { target: { value: 'username' } });
fireEvent.change(container.querySelector('[name="email"]')!, {
fireEvent.click(getByText('Sign In'));
fireEvent.change(getByPlaceholderText('Username'), { target: { value: 'username' } });
fireEvent.change(getByPlaceholderText('Email Address'), {
target: { value: '[email protected]' },
});
fireEvent.click(container.querySelector('.auth-submit')!);
fireEvent.click(getByText('Submit'));
await waitFor(() => expect(api.emailSignin).toBeCalled());

expect(container.querySelector('.auth-back-button')).toBeInTheDocument();
expect(container.querySelector('.auth-close-button')).toBeInTheDocument();
expect(container.querySelector('[name="token"]')).toBeInTheDocument();
expect(getByText('Back')).toHaveClass('auth-back-button');
expect(getByTitle('Close sign-in dropdown')).toHaveClass('auth-close-button');
expect(getByPlaceholderText('Token')).toHaveClass('auth-token-textatea');

fireEvent.change(container.querySelector('[name="token"]')!, {
target: { value: 'token' },
});
fireEvent.click(container.querySelector('.auth-submit')!);
fireEvent.change(getByPlaceholderText('Token'), { target: { value: 'token' } });
fireEvent.click(getByText('Submit'));
await waitFor(() => expect(utils.getTokenInvalidReason).toBeCalled());

expect(utils.getTokenInvalidReason).toBeCalledWith('token');

await waitFor(() => expect(getByText('Token is invalid')).toBeInTheDocument());
expect(getByText('Token is invalid').getAttribute('class')).toContain('auth-error');
expect(getByText('Token is invalid')).toHaveClass('auth-error');
});

it('should send anonym form', async () => {
StaticStore.config.auth_providers = ['anonymous'];
jest.spyOn(api, 'anonymousSignin').mockImplementationOnce(async () => ({} as User));

const { container } = render(<Auth />);
const { getByText, getByPlaceholderText, getByRole } = render(<Auth />);

fireEvent.click(container.querySelector('.auth-button')!);
fireEvent.change(container.querySelector('[name="username"]')!, { target: { value: 'username' } });
fireEvent.click(container.querySelector('.auth-submit')!);
expect(container.querySelector('.spinner')).toBeInTheDocument();
fireEvent.click(getByText('Sign In'));
fireEvent.change(getByPlaceholderText('Username'), { target: { value: 'username' } });
fireEvent.click(getByText('Submit'));
expect(getByRole('presentation')).toHaveClass('spinner');
expect(getByRole('presentation')).toHaveAttribute('aria-label', 'Loading...');
await waitFor(() => expect(api.anonymousSignin).toBeCalled());
});
});

0 comments on commit 6cf2849

Please sign in to comment.