Replaced firEvent with userEvent as much as possible

This commit is contained in:
Alejandro Celaya
2022-05-11 19:18:43 +02:00
parent 7f059c3f3b
commit 3870752bba
9 changed files with 121 additions and 93 deletions

View File

@@ -1,4 +1,5 @@
import { fireEvent, render, screen } from '@testing-library/react';
import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { Mock } from 'ts-mockery';
import { ErrorHandler as createErrorHandler } from '../../src/common/ErrorHandler';
@@ -34,11 +35,12 @@ describe('<ErrorHandler />', () => {
expect(screen.getByRole('button')).toBeInTheDocument();
});
it('reloads page on button click', () => {
it('reloads page on button click', async () => {
const user = userEvent.setup();
render(<ErrorHandler children={<ComponentWithError />} />);
expect(reload).not.toHaveBeenCalled();
fireEvent.click(screen.getByRole('button'));
await user.click(screen.getByRole('button'));
expect(reload).toHaveBeenCalled();
});
});

View File

@@ -1,4 +1,5 @@
import { fireEvent, render, screen, waitFor } from '@testing-library/react';
import { render, screen, waitFor } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { Router } from 'react-router-dom';
import { createMemoryHistory } from 'history';
import { MainHeader as createMainHeader } from '../../src/common/MainHeader';
@@ -9,11 +10,14 @@ describe('<MainHeader />', () => {
const history = createMemoryHistory();
history.push(pathname);
return render(
const user = userEvent.setup();
const renderResult = render(
<Router location={history.location} navigator={history}>
<MainHeader />
</Router>,
);
return { user, ...renderResult };
};
it('renders ServersDropdown', () => {
@@ -37,29 +41,29 @@ describe('<MainHeader />', () => {
}
});
it('renders expected class based on the nav bar state', () => {
setUp();
it('renders expected class based on the nav bar state', async () => {
const { user } = setUp();
const toggle = screen.getByLabelText('Toggle navigation');
const icon = toggle.firstChild;
expect(icon).toHaveAttribute('class', expect.stringMatching(/main-header__toggle-icon$/));
fireEvent.click(toggle);
await user.click(toggle);
expect(icon).toHaveAttribute(
'class',
expect.stringMatching(/main-header__toggle-icon main-header__toggle-icon--opened$/),
);
fireEvent.click(toggle);
await user.click(toggle);
expect(icon).toHaveAttribute('class', expect.stringMatching(/main-header__toggle-icon$/));
});
it('opens Collapse when clicking toggle', async () => {
const { container } = setUp();
const { container, user } = setUp();
const collapse = container.querySelector('.collapse');
const toggle = screen.getByLabelText('Toggle navigation');
expect(collapse).not.toHaveAttribute('class', expect.stringContaining('show'));
fireEvent.click(toggle);
await user.click(toggle);
await waitFor(() => expect(collapse).toHaveAttribute('class', expect.stringContaining('show')));
});
});