Upgrade @testing-library/user-event to v14 (#47898)

* Update dependency @testing-library/user-event to v14

* everything is async...

* everything is async pt.2

* Fix cascader tests

* hack the yarn.lock file to remove the old version of @testing-library/dom

* some more fixes!

* MOAR FIXES

* more fixes

* remove a bunch of places where we're wrapping in act()

* down to 7 failing tests...

* Fix arrow tests

* Fix rest of NavBarItem tests

* Fix last tests

* Use {Enter} instead of {enter}

* Revert "Use {Enter} instead of {enter}"

This reverts commit e72453bb52.

* remove some unused act imports

* Fix LibraryPanelsSearch tests

* more stable test

* More consistent test...

Co-authored-by: Renovate Bot <bot@renovateapp.com>
This commit is contained in:
Ashley Harrison
2022-04-21 13:15:21 +01:00
committed by GitHub
parent 9ed7e48454
commit d832bde270
89 changed files with 900 additions and 912 deletions

View File

@@ -7,7 +7,7 @@ import { setSearchQuery } from './state/reducers';
import { mockToolkitActionCreator } from '../../../test/core/redux/mocks';
import { getMultipleMockKeys } from './__mocks__/apiKeysMock';
import { selectors } from '@grafana/e2e-selectors';
import userEvent from '@testing-library/user-event';
import userEvent, { PointerEventsCheckLevel } from '@testing-library/user-event';
import { silenceConsoleOutput } from '../../../test/core/utils/silenceConsoleOutput';
const setup = (propOverrides: Partial<Props>) => {
@@ -100,7 +100,7 @@ describe('ApiKeysPage', () => {
const apiKeys = getMultipleMockKeys(3);
const { toggleIncludeExpiredMock } = setup({ apiKeys, apiKeysCount: apiKeys.length, hasFetched: true });
toggleShowExpired();
await toggleShowExpired();
expect(toggleIncludeExpiredMock).toHaveBeenCalledTimes(1);
});
});
@@ -112,7 +112,7 @@ describe('ApiKeysPage', () => {
setSearchQueryMock.mockClear();
expect(screen.getByPlaceholderText(/search keys/i)).toBeInTheDocument();
userEvent.type(screen.getByPlaceholderText(/search keys/i), 'First');
await userEvent.type(screen.getByPlaceholderText(/search keys/i), 'First');
expect(setSearchQueryMock).toHaveBeenCalledTimes(5);
});
});
@@ -130,21 +130,21 @@ describe('ApiKeysPage', () => {
deleteApiKeyMock.mockClear();
expect(within(firstRow).getByLabelText('Delete API key')).toBeInTheDocument();
userEvent.click(within(firstRow).getByLabelText('Delete API key'));
await userEvent.click(within(firstRow).getByLabelText('Delete API key'));
expect(within(firstRow).getByRole('button', { name: /delete$/i })).toBeInTheDocument();
userEvent.click(within(firstRow).getByRole('button', { name: /delete$/i }));
await userEvent.click(within(firstRow).getByRole('button', { name: /delete$/i }));
expect(deleteApiKeyMock).toHaveBeenCalledTimes(1);
expect(deleteApiKeyMock).toHaveBeenCalledWith(1);
toggleShowExpired();
await toggleShowExpired();
deleteApiKeyMock.mockClear();
expect(within(secondRow).getByLabelText('Delete API key')).toBeInTheDocument();
userEvent.click(within(secondRow).getByLabelText('Delete API key'));
await userEvent.click(within(secondRow).getByLabelText('Delete API key'));
expect(within(secondRow).getByRole('button', { name: /delete$/i })).toBeInTheDocument();
userEvent.click(within(secondRow).getByRole('button', { name: /delete$/i }), undefined, {
skipPointerEventsCheck: true,
await userEvent.click(within(secondRow).getByRole('button', { name: /delete$/i }), {
pointerEventsCheck: PointerEventsCheckLevel.Never,
});
expect(deleteApiKeyMock).toHaveBeenCalledTimes(1);
expect(deleteApiKeyMock).toHaveBeenCalledWith(2);
@@ -157,7 +157,7 @@ describe('ApiKeysPage', () => {
const { addApiKeyMock } = setup({ apiKeys, apiKeysCount: apiKeys.length, hasFetched: true });
addApiKeyMock.mockClear();
userEvent.click(screen.getByTestId(selectors.components.CallToActionCard.buttonV2('New API key')));
await userEvent.click(screen.getByTestId(selectors.components.CallToActionCard.buttonV2('New API key')));
await addAndVerifyApiKey(addApiKeyMock);
});
});
@@ -168,13 +168,13 @@ describe('ApiKeysPage', () => {
const { addApiKeyMock } = setup({ apiKeys, apiKeysCount: apiKeys.length, hasFetched: true });
addApiKeyMock.mockClear();
userEvent.click(screen.getByRole('button', { name: /add api key/i }));
await userEvent.click(screen.getByRole('button', { name: /add api key/i }));
await addAndVerifyApiKey(addApiKeyMock);
toggleShowExpired();
await toggleShowExpired();
addApiKeyMock.mockClear();
userEvent.click(screen.getByRole('button', { name: /add api key/i }));
await userEvent.click(screen.getByRole('button', { name: /add api key/i }));
await addAndVerifyApiKey(addApiKeyMock);
});
});
@@ -185,20 +185,20 @@ describe('ApiKeysPage', () => {
const { addApiKeyMock } = setup({ apiKeys, apiKeysCount: apiKeys.length, hasFetched: true });
addApiKeyMock.mockClear();
userEvent.click(screen.getByRole('button', { name: /add api key/i }));
userEvent.type(screen.getByPlaceholderText(/name/i), 'Test');
userEvent.type(screen.getByPlaceholderText(/1d/i), '60x');
await userEvent.click(screen.getByRole('button', { name: /add api key/i }));
await userEvent.type(screen.getByPlaceholderText(/name/i), 'Test');
await userEvent.type(screen.getByPlaceholderText(/1d/i), '60x');
expect(screen.queryByText(/not a valid duration/i)).not.toBeInTheDocument();
userEvent.click(screen.getByRole('button', { name: /^add$/i }));
await userEvent.click(screen.getByRole('button', { name: /^add$/i }));
expect(screen.getByText(/not a valid duration/i)).toBeInTheDocument();
expect(addApiKeyMock).toHaveBeenCalledTimes(0);
});
});
});
function toggleShowExpired() {
async function toggleShowExpired() {
expect(screen.queryByLabelText(/include expired keys/i)).toBeInTheDocument();
userEvent.click(screen.getByLabelText(/include expired keys/i));
await userEvent.click(screen.getByLabelText(/include expired keys/i));
}
async function addAndVerifyApiKey(addApiKeyMock: jest.Mock) {
@@ -207,9 +207,9 @@ async function addAndVerifyApiKey(addApiKeyMock: jest.Mock) {
expect(screen.getByPlaceholderText(/1d/i)).toBeInTheDocument();
expect(screen.getByRole('button', { name: /^add$/i })).toBeInTheDocument();
userEvent.type(screen.getByPlaceholderText(/name/i), 'Test');
userEvent.type(screen.getByPlaceholderText(/1d/i), '60s');
userEvent.click(screen.getByRole('button', { name: /^add$/i }));
await userEvent.type(screen.getByPlaceholderText(/name/i), 'Test');
await userEvent.type(screen.getByPlaceholderText(/1d/i), '60s');
await userEvent.click(screen.getByRole('button', { name: /^add$/i }));
expect(addApiKeyMock).toHaveBeenCalledTimes(1);
expect(addApiKeyMock).toHaveBeenCalledWith({ name: 'Test', role: 'Viewer', secondsToLive: 60 }, expect.anything());
}