-
-
+/>
`;
diff --git a/packages/dashboard-frontend/src/components/TextFileUpload/__tests__/index.spec.tsx b/packages/dashboard-frontend/src/components/TextFileUpload/__tests__/index.spec.tsx
index 2522bf7e2..9af165236 100644
--- a/packages/dashboard-frontend/src/components/TextFileUpload/__tests__/index.spec.tsx
+++ b/packages/dashboard-frontend/src/components/TextFileUpload/__tests__/index.spec.tsx
@@ -15,7 +15,11 @@ import userEvent from '@testing-library/user-event';
import React from 'react';
import { TextFileUpload } from '@/components/TextFileUpload';
-import getComponentRenderer, { screen, waitFor } from '@/services/__mocks__/getComponentRenderer';
+import getComponentRenderer, {
+ fireEvent,
+ screen,
+ waitFor,
+} from '@/services/__mocks__/getComponentRenderer';
const { renderComponent, createSnapshot } = getComponentRenderer(getComponent);
@@ -77,7 +81,7 @@ describe('TextFileUpload', () => {
const fileInput = screen.getByPlaceholderText(fileNamePlaceholder);
- const clearButton = screen.getByText('Clear');
+ const clearButton = screen.getByRole('button', { name: 'Clear' });
/* Upload a file */
@@ -86,7 +90,9 @@ describe('TextFileUpload', () => {
const fileUploader = screen.getByTestId(fieldId);
const fileUploadInput = fileUploader.querySelector('input[type="file"]');
- userEvent.upload(fileUploadInput!, file);
+ // `userEvent` does not accept `Element` as a parameter
+ // use `fireEvent` instead
+ fireEvent.change(fileUploadInput!, { target: { files: [file] } });
await waitFor(() => expect(mockOnChange).toHaveBeenCalledWith(fileContent, true));
@@ -97,7 +103,7 @@ describe('TextFileUpload', () => {
/* Clear the field */
- userEvent.click(clearButton);
+ await userEvent.click(clearButton);
expect(fileInput).toHaveValue('');
expect(clearButton).toBeDisabled();
@@ -117,7 +123,8 @@ describe('TextFileUpload', () => {
/* Paste a content */
const content = 'content';
- userEvent.paste(contentInput, content);
+ await userEvent.click(contentInput);
+ await userEvent.paste(content);
await waitFor(() => expect(mockOnChange).toHaveBeenCalledWith(content, false));
@@ -129,7 +136,7 @@ describe('TextFileUpload', () => {
/* Clear the field */
- userEvent.click(clearButton);
+ await userEvent.click(clearButton);
expect(contentInput).toHaveValue('');
expect(clearButton).toBeDisabled();
diff --git a/packages/dashboard-frontend/src/components/WorkspaceLogs/ContainerSelector/__tests__/index.spec.tsx b/packages/dashboard-frontend/src/components/WorkspaceLogs/ContainerSelector/__tests__/index.spec.tsx
index 6c70ea7a6..33ce3505a 100644
--- a/packages/dashboard-frontend/src/components/WorkspaceLogs/ContainerSelector/__tests__/index.spec.tsx
+++ b/packages/dashboard-frontend/src/components/WorkspaceLogs/ContainerSelector/__tests__/index.spec.tsx
@@ -13,6 +13,7 @@
/* eslint-disable @typescript-eslint/no-non-null-assertion */
import { V1Pod } from '@kubernetes/client-node';
+import userEvent from '@testing-library/user-event';
import React from 'react';
import getComponentRenderer, { screen } from '@/services/__mocks__/getComponentRenderer';
@@ -69,11 +70,11 @@ describe('WorkspaceLogsContainerSelector', () => {
expect(screen.queryByRole('button', { name: new RegExp(NO_CONTAINERS) })).not.toBeNull();
});
- it('should toggle dropdown', () => {
+ it('should toggle dropdown', async () => {
renderComponent(pod);
const dropdown = screen.getByRole('button', { name: /container1/ });
- dropdown.click();
+ await userEvent.click(dropdown);
expect(screen.queryByRole('menu')).not.toBeNull();
expect(screen.queryByRole('menuitem', { name: /container1/ })).not.toBeNull();
@@ -89,27 +90,27 @@ describe('WorkspaceLogsContainerSelector', () => {
expect(mockOnContainerChange).toHaveBeenLastCalledWith('container1');
});
- it('should select an init container', () => {
+ it('should select an init container', async () => {
renderComponent(pod);
const dropdown = screen.getByRole('button', { name: /container1/ });
- dropdown.click();
+ await userEvent.click(dropdown);
const initContainer = screen.getByRole('menuitem', { name: /initContainer1/ });
- initContainer.click();
+ await userEvent.click(initContainer);
expect(screen.queryByRole('button', { name: /initContainer1/ })).not.toBeNull();
expect(mockOnContainerChange).toHaveBeenLastCalledWith('initContainer1');
});
- it('should select container', () => {
+ it('should select container', async () => {
renderComponent(pod);
const dropdown = screen.getByRole('button', { name: /container1/ });
- dropdown.click();
+ await userEvent.click(dropdown);
const container = screen.getByRole('menuitem', { name: /container2/ });
- container.click();
+ await userEvent.click(container);
expect(screen.queryByRole('button', { name: /container2/ })).not.toBeNull();
expect(mockOnContainerChange).toHaveBeenLastCalledWith('container2');
diff --git a/packages/dashboard-frontend/src/components/WorkspaceLogs/Viewer/__tests__/__snapshots__/index.spec.tsx.snap b/packages/dashboard-frontend/src/components/WorkspaceLogs/Viewer/__tests__/__snapshots__/index.spec.tsx.snap
index f8f13474b..87164cb50 100644
--- a/packages/dashboard-frontend/src/components/WorkspaceLogs/Viewer/__tests__/__snapshots__/index.spec.tsx.snap
+++ b/packages/dashboard-frontend/src/components/WorkspaceLogs/Viewer/__tests__/__snapshots__/index.spec.tsx.snap
@@ -35,9 +35,7 @@ exports[`WorkspaceLogsViewer snapshot error logs 1`] = `
className="logs"
id="output-logs"
tabIndex={0}
- >
-
-
+ />
`;
diff --git a/packages/dashboard-frontend/src/components/WorkspaceLogs/ViewerTools/__tests__/index.spec.tsx b/packages/dashboard-frontend/src/components/WorkspaceLogs/ViewerTools/__tests__/index.spec.tsx
index 02c56b663..ae2831921 100644
--- a/packages/dashboard-frontend/src/components/WorkspaceLogs/ViewerTools/__tests__/index.spec.tsx
+++ b/packages/dashboard-frontend/src/components/WorkspaceLogs/ViewerTools/__tests__/index.spec.tsx
@@ -10,6 +10,7 @@
* Red Hat, Inc. - initial API and implementation
*/
+import userEvent from '@testing-library/user-event';
import React from 'react';
import { ToggleBarsContext } from '@/contexts/ToggleBars';
@@ -34,20 +35,20 @@ describe('The WorkspaceLogsTerminalTools component', () => {
expect(createSnapshot()).toMatchSnapshot();
});
- it('should handle download button click', () => {
+ it('should handle download button click', async () => {
renderComponent();
const downloadButton = screen.getByRole('button', { name: 'Download' });
- downloadButton.click();
+ await userEvent.click(downloadButton);
expect(mockOnDownload).toHaveBeenCalled();
});
- it('should handle expand button click', () => {
+ it('should handle expand button click', async () => {
renderComponent();
const expandButton = screen.getByRole('button', { name: 'Expand' });
- expandButton.click();
+ await userEvent.click(expandButton);
expect(mockOnToggle).toHaveBeenCalledTimes(1);
expect(mockHideAll).toHaveBeenCalled();
@@ -55,7 +56,7 @@ describe('The WorkspaceLogsTerminalTools component', () => {
const compressButton = screen.queryByRole('button', { name: 'Compress' });
expect(compressButton).not.toBeNull();
- compressButton?.click();
+ await userEvent.click(compressButton!);
expect(mockShowAll).toHaveBeenCalled();
expect(mockOnToggle).toHaveBeenCalledTimes(2);
diff --git a/packages/dashboard-frontend/src/components/WorkspaceLogs/__tests__/index.spec.tsx b/packages/dashboard-frontend/src/components/WorkspaceLogs/__tests__/index.spec.tsx
index 0aab8f39b..9186d51c4 100644
--- a/packages/dashboard-frontend/src/components/WorkspaceLogs/__tests__/index.spec.tsx
+++ b/packages/dashboard-frontend/src/components/WorkspaceLogs/__tests__/index.spec.tsx
@@ -362,7 +362,7 @@ describe('The WorkspaceLogs component', () => {
expect(screen.queryByText(/first line/)).toBeTruthy();
- userEvent.click(container2!);
+ await userEvent.click(container2!);
expect(screen.queryByText(/waiting for container/)).toBeTruthy();
});
@@ -390,7 +390,7 @@ describe('The WorkspaceLogs component', () => {
expect(screen.queryByText(/Collapsed view/)).toBeTruthy();
- userEvent.click(toggleButton!);
+ await userEvent.click(toggleButton!);
expect(screen.queryByText(/Expanded view/)).toBeTruthy();
@@ -398,7 +398,7 @@ describe('The WorkspaceLogs component', () => {
const spyAppendChild = jest.spyOn(document.body, 'appendChild');
- userEvent.click(downloadButton!);
+ await userEvent.click(downloadButton!);
const expectedDownloadAttr = 'dev-wksp-container-1.log';
expect(spyAppendChild).toHaveBeenCalledWith(
diff --git a/packages/dashboard-frontend/src/components/WorkspaceProgress/Alert/__tests__/__snapshots__/index.spec.tsx.snap b/packages/dashboard-frontend/src/components/WorkspaceProgress/Alert/__tests__/__snapshots__/index.spec.tsx.snap
index a8e2e8b1a..87aaa7da5 100644
--- a/packages/dashboard-frontend/src/components/WorkspaceProgress/Alert/__tests__/__snapshots__/index.spec.tsx.snap
+++ b/packages/dashboard-frontend/src/components/WorkspaceProgress/Alert/__tests__/__snapshots__/index.spec.tsx.snap
@@ -51,7 +51,6 @@ exports[`Loader Alert snapshot with alert items 1`] = `
Alert title 1
-
@@ -115,7 +114,6 @@ exports[`Loader Alert snapshot with alert items 1`] = `
Alert title 2
-
diff --git a/packages/dashboard-frontend/src/components/WorkspaceProgress/Alert/__tests__/index.spec.tsx b/packages/dashboard-frontend/src/components/WorkspaceProgress/Alert/__tests__/index.spec.tsx
index 96bbacaba..17b106e99 100644
--- a/packages/dashboard-frontend/src/components/WorkspaceProgress/Alert/__tests__/index.spec.tsx
+++ b/packages/dashboard-frontend/src/components/WorkspaceProgress/Alert/__tests__/index.spec.tsx
@@ -71,13 +71,13 @@ describe('Loader Alert', () => {
expect(screen.queryByTestId('loader-alerts-group')).toBeNull();
});
- it('should handle the close alert action', () => {
+ it('should handle the close alert action', async () => {
renderComponent([alertItem1, alertItem2]);
const closeButton = screen.getByRole('button', {
name: /close/i,
});
- userEvent.click(closeButton);
+ await userEvent.click(closeButton);
expect(mockOnClose).toHaveBeenCalled();
});
diff --git a/packages/dashboard-frontend/src/components/WorkspaceProgress/CommonSteps/CheckRunningWorkspacesLimit/__tests__/index.spec.tsx b/packages/dashboard-frontend/src/components/WorkspaceProgress/CommonSteps/CheckRunningWorkspacesLimit/__tests__/index.spec.tsx
index 3be16841b..b242de18f 100644
--- a/packages/dashboard-frontend/src/components/WorkspaceProgress/CommonSteps/CheckRunningWorkspacesLimit/__tests__/index.spec.tsx
+++ b/packages/dashboard-frontend/src/components/WorkspaceProgress/CommonSteps/CheckRunningWorkspacesLimit/__tests__/index.spec.tsx
@@ -12,7 +12,7 @@
import { StateMock } from '@react-mock/state';
import { waitFor } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
+import userEvent, { UserEvent } from '@testing-library/user-event';
import { createMemoryHistory } from 'history';
import React from 'react';
import { Provider } from 'react-redux';
@@ -94,6 +94,7 @@ describe('Common steps, check running workspaces limit', () => {
let runningDevworkspaceBuilder1: DevWorkspaceBuilder;
let runningDevworkspaceBuilder2: DevWorkspaceBuilder;
let stoppedDevworkspaceBuilder: DevWorkspaceBuilder;
+ let user: UserEvent;
beforeEach(() => {
runningDevworkspaceBuilder1 = new DevWorkspaceBuilder()
@@ -113,11 +114,14 @@ describe('Common steps, check running workspaces limit', () => {
.withNamespace(namespace);
jest.useFakeTimers();
+
+ user = userEvent.setup({ advanceTimers: jest.advanceTimersByTime });
});
afterEach(() => {
jest.clearAllMocks();
jest.clearAllTimers();
+ jest.runOnlyPendingTimers();
jest.useRealTimers();
});
@@ -363,7 +367,7 @@ describe('Common steps, check running workspaces limit', () => {
// imitate the timeout has been expired
const timeoutButton = screen.getByRole('button', { name: 'onTimeout' });
- userEvent.click(timeoutButton);
+ await user.click(timeoutButton);
const expectAlertItem = expect.objectContaining({
title: 'Failed to open the workspace',
@@ -402,7 +406,7 @@ describe('Common steps, check running workspaces limit', () => {
// imitate the timeout has been expired
const timeoutButton = screen.getByRole('button', { name: 'onTimeout' });
- userEvent.click(timeoutButton);
+ await user.click(timeoutButton);
await waitFor(() => expect(mockOnError).toHaveBeenCalled());
expect(mockOnNextStep).not.toHaveBeenCalled();
diff --git a/packages/dashboard-frontend/src/components/WorkspaceProgress/CreatingSteps/Apply/Devfile/__tests__/index.spec.tsx b/packages/dashboard-frontend/src/components/WorkspaceProgress/CreatingSteps/Apply/Devfile/__tests__/index.spec.tsx
index aeaa9a262..b9383e448 100644
--- a/packages/dashboard-frontend/src/components/WorkspaceProgress/CreatingSteps/Apply/Devfile/__tests__/index.spec.tsx
+++ b/packages/dashboard-frontend/src/components/WorkspaceProgress/CreatingSteps/Apply/Devfile/__tests__/index.spec.tsx
@@ -13,7 +13,7 @@
import { api } from '@eclipse-che/common';
import { StateMock } from '@react-mock/state';
import { screen, waitFor } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
+import userEvent, { UserEvent } from '@testing-library/user-event';
import { createMemoryHistory, MemoryHistory } from 'history';
import { dump } from 'js-yaml';
import React from 'react';
@@ -79,6 +79,7 @@ const devfile = {
describe('Creating steps, applying a devfile', () => {
let searchParams: URLSearchParams;
let factoryId: string;
+ let user: UserEvent;
beforeEach(() => {
mockCreateWorkspaceFromDevfile = jest.fn().mockResolvedValue(undefined);
@@ -96,6 +97,8 @@ describe('Creating steps, applying a devfile', () => {
});
jest.useFakeTimers();
+
+ user = userEvent.setup({ advanceTimers: jest.advanceTimersByTime });
});
afterEach(() => {
@@ -725,7 +728,7 @@ describe('Creating steps, applying a devfile', () => {
// imitate the timeout has been expired
const timeoutButton = screen.getByRole('button', { name: 'onTimeout' });
- userEvent.click(timeoutButton);
+ await user.click(timeoutButton);
const expectAlertItem = expect.objectContaining({
title: 'Failed to create the workspace',
diff --git a/packages/dashboard-frontend/src/components/WorkspaceProgress/CreatingSteps/Apply/Resources/__tests__/index.spec.tsx b/packages/dashboard-frontend/src/components/WorkspaceProgress/CreatingSteps/Apply/Resources/__tests__/index.spec.tsx
index a3b28638c..fc87990c7 100644
--- a/packages/dashboard-frontend/src/components/WorkspaceProgress/CreatingSteps/Apply/Resources/__tests__/index.spec.tsx
+++ b/packages/dashboard-frontend/src/components/WorkspaceProgress/CreatingSteps/Apply/Resources/__tests__/index.spec.tsx
@@ -11,7 +11,7 @@
*/
import { screen, waitFor } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
+import userEvent, { UserEvent } from '@testing-library/user-event';
import { createMemoryHistory, MemoryHistory } from 'history';
import React from 'react';
import { Provider } from 'react-redux';
@@ -77,6 +77,7 @@ const resources = [
describe('Creating steps, applying resources', () => {
let searchParams: URLSearchParams;
let factoryId: string;
+ let user: UserEvent;
beforeEach(() => {
(prepareResources as jest.Mock).mockReturnValue(resources);
@@ -93,6 +94,8 @@ describe('Creating steps, applying resources', () => {
});
jest.useFakeTimers();
+
+ user = userEvent.setup({ advanceTimers: jest.advanceTimersByTime });
});
afterEach(() => {
@@ -211,7 +214,7 @@ describe('Creating steps, applying resources', () => {
const timeoutButton = screen.getByRole('button', {
name: 'onTimeout',
});
- userEvent.click(timeoutButton);
+ await user.click(timeoutButton);
const expectAlertItem = expect.objectContaining({
title: 'Failed to create the workspace',
@@ -254,7 +257,7 @@ describe('Creating steps, applying resources', () => {
const timeoutButton = screen.getByRole('button', {
name: 'onTimeout',
});
- userEvent.click(timeoutButton);
+ await user.click(timeoutButton);
await waitFor(() => expect(mockOnError).toHaveBeenCalled());
mockOnError.mockClear();
diff --git a/packages/dashboard-frontend/src/components/WorkspaceProgress/CreatingSteps/Fetch/Devfile/__tests__/index.spec.tsx b/packages/dashboard-frontend/src/components/WorkspaceProgress/CreatingSteps/Fetch/Devfile/__tests__/index.spec.tsx
index 1fbca4f4a..de2232446 100644
--- a/packages/dashboard-frontend/src/components/WorkspaceProgress/CreatingSteps/Fetch/Devfile/__tests__/index.spec.tsx
+++ b/packages/dashboard-frontend/src/components/WorkspaceProgress/CreatingSteps/Fetch/Devfile/__tests__/index.spec.tsx
@@ -14,7 +14,7 @@
import { FACTORY_LINK_ATTR } from '@eclipse-che/common';
import { cleanup, screen, waitFor } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
+import userEvent, { UserEvent } from '@testing-library/user-event';
import { createMemoryHistory, MemoryHistory } from 'history';
import React from 'react';
import { Provider } from 'react-redux';
@@ -80,6 +80,7 @@ describe('Creating steps, fetching a devfile', () => {
let searchParams: URLSearchParams;
let store: Store;
let devfile: devfileApi.Devfile;
+ let user: UserEvent;
beforeEach(() => {
devfile = {
@@ -104,11 +105,14 @@ describe('Creating steps, fetching a devfile', () => {
});
jest.useFakeTimers();
+
+ user = userEvent.setup({ advanceTimers: jest.advanceTimersByTime });
});
afterEach(() => {
jest.clearAllMocks();
jest.clearAllTimers();
+ jest.useRealTimers();
});
test('factory should not resolve the SSH location', async () => {
@@ -221,10 +225,10 @@ describe('Creating steps, fetching a devfile', () => {
mockOnError.mockClear();
/* test the action */
+ await jest.runOnlyPendingTimersAsync();
// resolve deferred to trigger the callback
deferred.resolve();
- await jest.runOnlyPendingTimersAsync();
await waitFor(() => expect(mockOnNextStep).toHaveBeenCalled());
expect(mockOnRestart).not.toHaveBeenCalled();
@@ -262,10 +266,10 @@ describe('Creating steps, fetching a devfile', () => {
mockOnError.mockClear();
/* test the action */
+ await jest.runOnlyPendingTimersAsync();
// resolve deferred to trigger the callback
deferred.resolve();
- await jest.runOnlyPendingTimersAsync();
await waitFor(() => expect(mockOnRestart).toHaveBeenCalled());
expect(mockOnNextStep).not.toHaveBeenCalled();
@@ -291,7 +295,7 @@ describe('Creating steps, fetching a devfile', () => {
const timeoutButton = screen.getByRole('button', {
name: 'onTimeout',
});
- userEvent.click(timeoutButton);
+ await user.click(timeoutButton);
const expectAlertItem = expect.objectContaining({
title: 'Failed to create the workspace',
@@ -338,7 +342,7 @@ describe('Creating steps, fetching a devfile', () => {
const timeoutButton = screen.getByRole('button', {
name: 'onTimeout',
});
- userEvent.click(timeoutButton);
+ await user.click(timeoutButton);
await waitFor(() => expect(mockOnError).toHaveBeenCalled());
mockOnError.mockClear();
@@ -417,10 +421,10 @@ describe('Creating steps, fetching a devfile', () => {
mockOnError.mockClear();
/* test the action */
+ await jest.runOnlyPendingTimersAsync();
// resolve deferred to trigger the callback
deferred.resolve();
- await jest.runOnlyPendingTimersAsync();
await waitFor(() => expect(mockOnNextStep).toHaveBeenCalled());
expect(mockOnRestart).not.toHaveBeenCalled();
@@ -459,9 +463,10 @@ describe('Creating steps, fetching a devfile', () => {
/* test the action */
+ await jest.runAllTimersAsync();
+
// resolve deferred to trigger the callback
deferred.resolve();
- await jest.runOnlyPendingTimersAsync();
await waitFor(() => expect(mockOnRestart).toHaveBeenCalled());
expect(mockOnNextStep).not.toHaveBeenCalled();
diff --git a/packages/dashboard-frontend/src/components/WorkspaceProgress/CreatingSteps/Fetch/Resources/__tests__/index.spec.tsx b/packages/dashboard-frontend/src/components/WorkspaceProgress/CreatingSteps/Fetch/Resources/__tests__/index.spec.tsx
index 5095e1c88..034be09c6 100644
--- a/packages/dashboard-frontend/src/components/WorkspaceProgress/CreatingSteps/Fetch/Resources/__tests__/index.spec.tsx
+++ b/packages/dashboard-frontend/src/components/WorkspaceProgress/CreatingSteps/Fetch/Resources/__tests__/index.spec.tsx
@@ -11,7 +11,7 @@
*/
import { screen, waitFor } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
+import userEvent, { UserEvent } from '@testing-library/user-event';
import { createMemoryHistory } from 'history';
import React from 'react';
import { Provider } from 'react-redux';
@@ -62,6 +62,7 @@ const factoryUrl = 'https://factory-url';
describe('Creating steps, fetching resources', () => {
let searchParams: URLSearchParams;
+ let user: UserEvent;
beforeEach(() => {
searchParams = new URLSearchParams({
@@ -70,6 +71,8 @@ describe('Creating steps, fetching resources', () => {
});
jest.useFakeTimers();
+
+ user = userEvent.setup({ advanceTimers: jest.advanceTimersByTime });
});
afterEach(() => {
@@ -186,7 +189,7 @@ describe('Creating steps, fetching resources', () => {
const timeoutButton = screen.getByRole('button', {
name: 'onTimeout',
});
- userEvent.click(timeoutButton);
+ await user.click(timeoutButton);
const expectAlertItem = expect.objectContaining({
title: 'Failed to create the workspace',
@@ -229,7 +232,7 @@ describe('Creating steps, fetching resources', () => {
const timeoutButton = screen.getByRole('button', {
name: 'onTimeout',
});
- userEvent.click(timeoutButton);
+ await user.click(timeoutButton);
await waitFor(() => expect(mockOnError).toHaveBeenCalled());
mockOnError.mockClear();
diff --git a/packages/dashboard-frontend/src/components/WorkspaceProgress/StartingSteps/Initialize/__tests__/index.spec.tsx b/packages/dashboard-frontend/src/components/WorkspaceProgress/StartingSteps/Initialize/__tests__/index.spec.tsx
index 9c453c476..8afb502a9 100644
--- a/packages/dashboard-frontend/src/components/WorkspaceProgress/StartingSteps/Initialize/__tests__/index.spec.tsx
+++ b/packages/dashboard-frontend/src/components/WorkspaceProgress/StartingSteps/Initialize/__tests__/index.spec.tsx
@@ -11,7 +11,7 @@
*/
import { screen, waitFor } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
+import userEvent, { UserEvent } from '@testing-library/user-event';
import { createMemoryHistory } from 'history';
import React from 'react';
import { Provider } from 'react-redux';
@@ -44,8 +44,12 @@ const matchParams: WorkspaceParams = {
};
describe('Starting steps, initializing', () => {
+ let user: UserEvent;
+
beforeEach(() => {
jest.useFakeTimers();
+
+ user = userEvent.setup({ advanceTimers: jest.advanceTimersByTime });
});
afterEach(() => {
@@ -391,7 +395,7 @@ describe('Starting steps, initializing', () => {
const timeoutButton = screen.getByRole('button', {
name: 'onTimeout',
});
- userEvent.click(timeoutButton);
+ await user.click(timeoutButton);
const expectAlertItem = expect.objectContaining({
title: 'Failed to open the workspace',
@@ -428,13 +432,12 @@ describe('Starting steps, initializing', () => {
});
renderComponent(store);
- jest.runAllTimers();
// trigger timeout
const timeoutButton = screen.getByRole('button', {
name: 'onTimeout',
});
- userEvent.click(timeoutButton);
+ await user.click(timeoutButton);
await waitFor(() => expect(mockOnError).toHaveBeenCalled());
mockOnError.mockClear();
diff --git a/packages/dashboard-frontend/src/components/WorkspaceProgress/StartingSteps/OpenWorkspace/__tests__/index.spec.tsx b/packages/dashboard-frontend/src/components/WorkspaceProgress/StartingSteps/OpenWorkspace/__tests__/index.spec.tsx
index aae4c2c6a..78aedde7f 100644
--- a/packages/dashboard-frontend/src/components/WorkspaceProgress/StartingSteps/OpenWorkspace/__tests__/index.spec.tsx
+++ b/packages/dashboard-frontend/src/components/WorkspaceProgress/StartingSteps/OpenWorkspace/__tests__/index.spec.tsx
@@ -11,7 +11,7 @@
*/
import { screen, waitFor } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
+import userEvent, { UserEvent } from '@testing-library/user-event';
import { createMemoryHistory } from 'history';
import React from 'react';
import { Provider } from 'react-redux';
@@ -52,6 +52,7 @@ const matchParams: WorkspaceParams = {
describe('Starting steps, opening an editor', () => {
let tabManager: TabManager;
+ let user: UserEvent;
beforeEach(() => {
container.snapshot();
@@ -59,6 +60,8 @@ describe('Starting steps, opening an editor', () => {
tabManager.replace = jest.fn();
jest.useFakeTimers();
+
+ user = userEvent.setup({ advanceTimers: jest.advanceTimersByTime });
});
afterEach(() => {
@@ -143,15 +146,15 @@ describe('Starting steps, opening an editor', () => {
expect(mockOnRestart).not.toHaveBeenCalled();
/* test the action */
+ await jest.runOnlyPendingTimersAsync();
// resolve deferred to trigger the callback
deferred.resolve();
- await jest.runOnlyPendingTimersAsync();
// this mock is called from the action callback above
await waitFor(() => expect(mockOnRestart).toHaveBeenCalled());
expect(mockOnNextStep).not.toHaveBeenCalled();
- expect(mockOnError).toHaveBeenCalled();
+ expect(mockOnError).not.toHaveBeenCalled();
});
});
@@ -396,7 +399,7 @@ describe('Starting steps, opening an editor', () => {
const timeoutButton = screen.getByRole('button', {
name: 'onTimeout',
});
- userEvent.click(timeoutButton);
+ await user.click(timeoutButton);
const expectAlertItem = expect.objectContaining({
title: 'Failed to open the workspace',
@@ -443,7 +446,7 @@ describe('Starting steps, opening an editor', () => {
const timeoutButton = screen.getByRole('button', {
name: 'onTimeout',
});
- userEvent.click(timeoutButton);
+ await user.click(timeoutButton);
await waitFor(() => expect(mockOnError).toHaveBeenCalled());
mockOnError.mockClear();
diff --git a/packages/dashboard-frontend/src/components/WorkspaceProgress/StartingSteps/StartWorkspace/__tests__/index.spec.tsx b/packages/dashboard-frontend/src/components/WorkspaceProgress/StartingSteps/StartWorkspace/__tests__/index.spec.tsx
index 589f9083e..fa1a505d9 100644
--- a/packages/dashboard-frontend/src/components/WorkspaceProgress/StartingSteps/StartWorkspace/__tests__/index.spec.tsx
+++ b/packages/dashboard-frontend/src/components/WorkspaceProgress/StartingSteps/StartWorkspace/__tests__/index.spec.tsx
@@ -12,7 +12,7 @@
import { api } from '@eclipse-che/common';
import { screen, waitFor } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
+import userEvent, { UserEvent } from '@testing-library/user-event';
import { createMemoryHistory } from 'history';
import React from 'react';
import { Provider } from 'react-redux';
@@ -89,8 +89,12 @@ const serverConfig: api.IServerConfig = {
};
describe('Starting steps, starting a workspace', () => {
+ let user: UserEvent;
+
beforeEach(() => {
jest.useFakeTimers();
+
+ user = userEvent.setup({ advanceTimers: jest.advanceTimersByTime });
});
afterEach(() => {
@@ -174,15 +178,15 @@ describe('Starting steps, starting a workspace', () => {
expect(mockOnRestart).not.toHaveBeenCalled();
/* test the action */
+ deferred.resolve();
// resolve deferred to trigger the callback
- deferred.resolve();
await jest.runOnlyPendingTimersAsync();
// this mock is called from the action callback above
await waitFor(() => expect(mockOnRestart).toHaveBeenCalled());
expect(mockOnNextStep).not.toHaveBeenCalled();
- expect(mockOnError).toHaveBeenCalled();
+ expect(mockOnError).not.toHaveBeenCalled();
});
});
@@ -621,7 +625,7 @@ describe('Starting steps, starting a workspace', () => {
const timeoutButton = screen.getByRole('button', {
name: 'onTimeout',
});
- userEvent.click(timeoutButton);
+ await user.click(timeoutButton);
const expectAlertItem = expect.objectContaining({
title: 'Failed to open the workspace',
@@ -668,7 +672,7 @@ describe('Starting steps, starting a workspace', () => {
const timeoutButton = screen.getByRole('button', {
name: 'onTimeout',
});
- userEvent.click(timeoutButton);
+ await user.click(timeoutButton);
await waitFor(() => expect(mockOnError).toHaveBeenCalled());
mockOnError.mockClear();
diff --git a/packages/dashboard-frontend/src/components/WorkspaceProgress/__tests__/index.spec.tsx b/packages/dashboard-frontend/src/components/WorkspaceProgress/__tests__/index.spec.tsx
index 640da2d0a..64ec00b15 100644
--- a/packages/dashboard-frontend/src/components/WorkspaceProgress/__tests__/index.spec.tsx
+++ b/packages/dashboard-frontend/src/components/WorkspaceProgress/__tests__/index.spec.tsx
@@ -11,7 +11,7 @@
*/
import { StateMock } from '@react-mock/state';
-import userEvent from '@testing-library/user-event';
+import userEvent, { UserEvent } from '@testing-library/user-event';
import { createMemoryHistory, History, MemoryHistory } from 'history';
import React from 'react';
import { Provider } from 'react-redux';
@@ -59,6 +59,7 @@ describe('LoaderProgress', () => {
let history: MemoryHistory;
let searchParams: URLSearchParams;
let store: Store;
+ let user: UserEvent;
beforeEach(() => {
store = new FakeStoreBuilder()
@@ -67,6 +68,7 @@ describe('LoaderProgress', () => {
})
.build();
jest.useFakeTimers();
+ user = userEvent.setup({ advanceTimers: jest.advanceTimersByTime });
});
afterEach(() => {
@@ -142,13 +144,16 @@ describe('LoaderProgress', () => {
return screen.queryByRole('list', { name: 'Loader Alerts Group' });
}
- function triggerStepEvent(step: HTMLElement, event: 'onError' | 'onNextStep' | 'onRestart') {
+ async function triggerStepEvent(
+ step: HTMLElement,
+ event: 'onError' | 'onNextStep' | 'onRestart',
+ ) {
const errorButton = within(step).getByRole('button', { name: event });
- userEvent.click(errorButton);
+ await user.click(errorButton);
}
describe('onError', () => {
- test('alert notification for the active step', () => {
+ test('alert notification for the active step', async () => {
renderComponent(history, store, searchParams, false);
/* no alert notification */
@@ -157,7 +162,7 @@ describe('LoaderProgress', () => {
const steps = getSteps();
// trigger an error in the first (active) step
- triggerStepEvent(steps[0], 'onError');
+ await triggerStepEvent(steps[0], 'onError');
/* alert notification in document */
@@ -170,7 +175,7 @@ describe('LoaderProgress', () => {
).not.toBeNull();
});
- test('handle error for an non-active step', () => {
+ test('handle error for an non-active step', async () => {
renderComponent(history, store, searchParams, false);
/* no alert notification */
@@ -179,7 +184,7 @@ describe('LoaderProgress', () => {
const steps = getSteps();
/* trigger an error in the second (non-active) step */
- triggerStepEvent(steps[1], 'onError');
+ await triggerStepEvent(steps[1], 'onError');
/* still no alert notifications in the document */
expect(getAlertGroup()).toBeNull();
@@ -200,7 +205,7 @@ describe('LoaderProgress', () => {
// trigger onNextStep on the active step
const onNextStepButton = within(steps[0]).getByRole('button', { name: 'onNextStep' });
- userEvent.click(onNextStepButton);
+ await user.click(onNextStepButton);
// first step distance incremented (non-active)
await waitFor(() =>
@@ -224,7 +229,7 @@ describe('LoaderProgress', () => {
// trigger onNextStep on the non-active step
const onNextStepButton = within(steps[1]).getByRole('button', { name: 'onNextStep' });
- userEvent.click(onNextStepButton);
+ await user.click(onNextStepButton);
// first step distance does not change (active)
await waitFor(() =>
@@ -262,7 +267,7 @@ describe('LoaderProgress', () => {
// trigger onRestart on the active step
const onRestart = within(steps[1]).getByRole('button', { name: 'onRestart' });
- userEvent.click(onRestart);
+ await user.click(onRestart);
// first step distance becomes 0 (active)
await waitFor(() =>
@@ -316,7 +321,7 @@ describe('LoaderProgress', () => {
// trigger onRestart on the active step
const onRestart = within(steps[4]).getByRole('button', { name: 'onRestart' });
- userEvent.click(onRestart);
+ await user.click(onRestart);
// 4th step distance becomes 0 (active)
await waitFor(() =>
@@ -352,7 +357,7 @@ describe('LoaderProgress', () => {
// trigger onRestart on the non-active step
const onRestart = within(steps[0]).getByRole('button', { name: 'onRestart' });
- userEvent.click(onRestart);
+ await user.click(onRestart);
// first step distance becomes 0 (active)
await waitFor(() =>
diff --git a/packages/dashboard-frontend/src/containers/Loader/__tests__/index.spec.tsx b/packages/dashboard-frontend/src/containers/Loader/__tests__/index.spec.tsx
index f51332f8a..e34e8f210 100644
--- a/packages/dashboard-frontend/src/containers/Loader/__tests__/index.spec.tsx
+++ b/packages/dashboard-frontend/src/containers/Loader/__tests__/index.spec.tsx
@@ -80,7 +80,7 @@ describe('Loader container', () => {
renderComponent(emptyStore, props);
const tab = screen.getByTestId('tab-button');
- userEvent.click(tab);
+ await userEvent.click(tab);
await waitFor(() => {
expect(screen.getByTestId('loader-tab')).toHaveTextContent('Events');
diff --git a/packages/dashboard-frontend/src/containers/WorkspaceDetails/__tests__/index.spec.tsx b/packages/dashboard-frontend/src/containers/WorkspaceDetails/__tests__/index.spec.tsx
index f1f55437c..829e485ba 100644
--- a/packages/dashboard-frontend/src/containers/WorkspaceDetails/__tests__/index.spec.tsx
+++ b/packages/dashboard-frontend/src/containers/WorkspaceDetails/__tests__/index.spec.tsx
@@ -191,7 +191,7 @@ describe('Workspace Details container', () => {
expect(nextWorkspaceIdEl).toHaveTextContent(WorkspaceAdapter.getId(nextWorkspace));
});
- it('should update the workspace', () => {
+ it('should update the workspace', async () => {
const workspace = prevWorkspaceBuilder.build();
const store = prevStoreBuilder.withDevWorkspaces({ workspaces: [workspace] }).build();
@@ -202,7 +202,7 @@ describe('Workspace Details container', () => {
);
const saveButton = screen.getByRole('button', { name: 'Save' });
- userEvent.click(saveButton);
+ await userEvent.click(saveButton);
expect(mockUpdateWorkspace).toHaveBeenCalledWith
>(
constructWorkspace(workspace),
diff --git a/packages/dashboard-frontend/src/contexts/WorkspaceActions/DeleteConfirmation/__tests__/index.spec.tsx b/packages/dashboard-frontend/src/contexts/WorkspaceActions/DeleteConfirmation/__tests__/index.spec.tsx
index 0d2eb4b38..14546edad 100644
--- a/packages/dashboard-frontend/src/contexts/WorkspaceActions/DeleteConfirmation/__tests__/index.spec.tsx
+++ b/packages/dashboard-frontend/src/contexts/WorkspaceActions/DeleteConfirmation/__tests__/index.spec.tsx
@@ -58,31 +58,31 @@ describe('WorkspaceActionsDeleteConfirmation', () => {
});
});
- test('click on Close button', () => {
+ test('click on Close button', async () => {
renderComponent(true, oneWorkspace);
const closeButton = screen.queryByRole('button', { name: /close/i });
expect(closeButton).toBeTruthy();
- userEvent.click(closeButton!);
+ await userEvent.click(closeButton!);
expect(mockOnClose).toHaveBeenCalledTimes(1);
});
- test('click on Cancel button', () => {
+ test('click on Cancel button', async () => {
renderComponent(true, oneWorkspace);
const cancelButton = screen.queryByRole('button', { name: /cancel/i });
expect(cancelButton).toBeTruthy();
- userEvent.click(cancelButton!);
+ await userEvent.click(cancelButton!);
expect(mockOnClose).toHaveBeenCalledTimes(1);
});
- test('click on Confirm button', () => {
+ test('click on Confirm button', async () => {
renderComponent(true, oneWorkspace);
const checkbox = screen.queryByRole('checkbox', {
@@ -97,10 +97,10 @@ describe('WorkspaceActionsDeleteConfirmation', () => {
expect(confirmButton).toBeDisabled();
// enable the Delete button
- userEvent.click(checkbox!);
+ await userEvent.click(checkbox!);
expect(confirmButton).toBeEnabled();
- userEvent.click(confirmButton!);
+ await userEvent.click(confirmButton!);
expect(mockOnConfirm).toHaveBeenCalledTimes(1);
});
});
diff --git a/packages/dashboard-frontend/src/contexts/WorkspaceActions/Dropdown/__tests__/index.spec.tsx b/packages/dashboard-frontend/src/contexts/WorkspaceActions/Dropdown/__tests__/index.spec.tsx
index 73df7ee89..cbb3f28a1 100644
--- a/packages/dashboard-frontend/src/contexts/WorkspaceActions/Dropdown/__tests__/index.spec.tsx
+++ b/packages/dashboard-frontend/src/contexts/WorkspaceActions/Dropdown/__tests__/index.spec.tsx
@@ -11,6 +11,7 @@
*/
import { StateMock } from '@react-mock/state';
+import userEvent, { UserEvent } from '@testing-library/user-event';
import React from 'react';
import { ActionContextType } from '@/contexts/WorkspaceActions';
@@ -29,6 +30,7 @@ const mockOnAction = jest.fn();
describe('WorkspaceActionsDropdown', () => {
let workspace: Workspace;
+ let user: UserEvent;
beforeEach(() => {
workspace = {
@@ -38,6 +40,8 @@ describe('WorkspaceActionsDropdown', () => {
} as Workspace;
jest.useFakeTimers();
+
+ user = userEvent.setup({ advanceTimers: jest.advanceTimersByTime });
});
afterEach(() => {
@@ -53,7 +57,7 @@ describe('WorkspaceActionsDropdown', () => {
expect(snapshot.toJSON()).toMatchSnapshot();
});
- test('open dropdown', () => {
+ test('open dropdown', async () => {
renderComponent(workspace, 'kebab-toggle');
const toggle = screen.queryByRole('button', { name: 'Actions' });
@@ -66,7 +70,7 @@ describe('WorkspaceActionsDropdown', () => {
// toggle dropdown
const kebabToggle = toggle!;
- kebabToggle.click();
+ await user.click(kebabToggle);
// now the dropdown menu is visible
expect(screen.queryByRole('menu', { name: 'Actions' })).not.toBeNull();
@@ -79,12 +83,12 @@ describe('WorkspaceActionsDropdown', () => {
expect(snapshot.toJSON()).toMatchSnapshot();
});
- test('open dropdown', () => {
+ test('open dropdown', async () => {
renderComponent(workspace, 'dropdown-toggle');
const toggle = screen.queryByRole('button', { name: 'Actions' });
- expect(toggle).toBeTruthy();
+ expect(toggle).not.toBeNull();
expect(toggle).toHaveAttribute('data-testtype', 'dropdown-toggle');
// dropdown menu is not visible
@@ -92,7 +96,7 @@ describe('WorkspaceActionsDropdown', () => {
// toggle dropdown
const dropdownToggle = toggle!;
- dropdownToggle.click();
+ await user.click(dropdownToggle);
// now the dropdown menu is visible
expect(screen.queryByRole('menu', { name: 'Actions' })).not.toBeNull();
@@ -109,7 +113,7 @@ describe('WorkspaceActionsDropdown', () => {
expect(actionOpen).not.toBeNull();
- actionOpen!.click();
+ await user.click(actionOpen!);
await jest.advanceTimersByTimeAsync(1000);
@@ -133,7 +137,7 @@ describe('WorkspaceActionsDropdown', () => {
expect(actionOpenInDebugMode).not.toBeNull();
- actionOpenInDebugMode!.click();
+ await user.click(actionOpenInDebugMode!);
await jest.advanceTimersByTimeAsync(1000);
@@ -160,7 +164,7 @@ describe('WorkspaceActionsDropdown', () => {
expect(actionOpenInBackground).not.toBeNull();
- actionOpenInBackground!.click();
+ await user.click(actionOpenInBackground!);
await jest.advanceTimersByTimeAsync(1000);
@@ -188,7 +192,7 @@ describe('WorkspaceActionsDropdown', () => {
expect(actionRestartWorkspace).not.toBeNull();
- actionRestartWorkspace!.click();
+ await user.click(actionRestartWorkspace!);
await jest.advanceTimersByTimeAsync(1000);
@@ -216,7 +220,7 @@ describe('WorkspaceActionsDropdown', () => {
expect(actionStopWorkspace).not.toBeNull();
- actionStopWorkspace!.click();
+ await user.click(actionStopWorkspace!);
await jest.advanceTimersByTimeAsync(1000);
@@ -245,7 +249,7 @@ describe('WorkspaceActionsDropdown', () => {
expect(actionDeleteWorkspace).not.toBeNull();
- actionDeleteWorkspace!.click();
+ await user.click(actionDeleteWorkspace!);
await jest.advanceTimersByTimeAsync(1000);
@@ -273,7 +277,7 @@ describe('WorkspaceActionsDropdown', () => {
expect(actionDeleteWorkspace).not.toBeNull();
- actionDeleteWorkspace!.click();
+ await user.click(actionDeleteWorkspace!);
await jest.advanceTimersByTimeAsync(1000);
@@ -307,7 +311,7 @@ describe('WorkspaceActionsDropdown', () => {
expect(actionDeleteWorkspace).not.toBeNull();
- actionDeleteWorkspace!.click();
+ await user.click(actionDeleteWorkspace!);
await jest.advanceTimersByTimeAsync(1000);
@@ -562,7 +566,7 @@ describe('WorkspaceActionsDropdown', () => {
expect(actionDeleteWorkspace).not.toBeNull();
- actionDeleteWorkspace!.click();
+ await user.click(actionDeleteWorkspace!);
await jest.advanceTimersByTimeAsync(1000);
diff --git a/packages/dashboard-frontend/src/contexts/WorkspaceActions/__tests__/Provider.spec.tsx b/packages/dashboard-frontend/src/contexts/WorkspaceActions/__tests__/Provider.spec.tsx
index 8885264e7..32afe970e 100644
--- a/packages/dashboard-frontend/src/contexts/WorkspaceActions/__tests__/Provider.spec.tsx
+++ b/packages/dashboard-frontend/src/contexts/WorkspaceActions/__tests__/Provider.spec.tsx
@@ -10,7 +10,7 @@
* Red Hat, Inc. - initial API and implementation
*/
-import userEvent from '@testing-library/user-event';
+import userEvent, { UserEvent } from '@testing-library/user-event';
import { createMemoryHistory } from 'history';
import React from 'react';
import { Provider } from 'react-redux';
@@ -69,6 +69,7 @@ const mockHandleAction: jest.Mock = jest.fn();
describe('WorkspaceActionsProvider', () => {
let store: Store;
+ let user: UserEvent;
beforeEach(() => {
store = new FakeStoreBuilder()
@@ -89,6 +90,8 @@ describe('WorkspaceActionsProvider', () => {
.build();
jest.useFakeTimers();
+
+ user = userEvent.setup({ advanceTimers: jest.advanceTimersByTime });
});
afterEach(() => {
@@ -97,37 +100,37 @@ describe('WorkspaceActionsProvider', () => {
});
describe('confirmation dialog', () => {
- test('show up and accept', () => {
+ test('show up and accept', async () => {
renderComponent(store, WorkspaceAction.DELETE_WORKSPACE, wantDelete[0]);
// get and click confirmation button
const showConfirmationBtn = screen.getByTestId('test-component-show-confirmation');
- userEvent.click(showConfirmationBtn);
+ await user.click(showConfirmationBtn);
// check if confirmation dialog is shown
expect(screen.queryByTestId('workspace-delete-modal')).toBeInTheDocument();
// get and click the confirmation button
const acceptConfirmationBtn = screen.getByTestId('delete-workspace');
- userEvent.click(acceptConfirmationBtn);
+ await user.click(acceptConfirmationBtn);
// check if confirmation dialog is removed
expect(screen.queryByTestId('workspace-delete-modal')).not.toBeInTheDocument();
});
- test('show up and decline', () => {
+ test('show up and decline', async () => {
renderComponent(store, WorkspaceAction.DELETE_WORKSPACE, wantDelete[0]);
// get and click confirmation button
const showConfirmationBtn = screen.getByTestId('test-component-show-confirmation');
- userEvent.click(showConfirmationBtn);
+ await user.click(showConfirmationBtn);
// check if confirmation dialog is shown
expect(screen.queryByTestId('workspace-delete-modal')).toBeInTheDocument();
// get and click the close button
const declineConfirmationBtn = screen.getByTestId('close-modal');
- userEvent.click(declineConfirmationBtn);
+ await user.click(declineConfirmationBtn);
// check if confirmation dialog is removed
expect(screen.queryByTestId('workspace-delete-modal')).not.toBeInTheDocument();
@@ -149,15 +152,17 @@ describe('WorkspaceActionsProvider', () => {
const handleActionBtn = screen.getByTestId('test-component-handle-action');
// try to delete the workspace tree times in a row
- userEvent.click(handleActionBtn);
- userEvent.click(handleActionBtn);
- userEvent.click(handleActionBtn);
-
- // check if workspace is added to the toDelete list
- expect(screen.getByTestId('test-component-to-delete')).toHaveTextContent('1234');
+ Promise.allSettled([
+ user.click(handleActionBtn),
+ user.click(handleActionBtn),
+ user.click(handleActionBtn),
+ ]);
// make sure all timers are executed
- await jest.advanceTimersByTimeAsync(1000);
+ await jest.runAllTimersAsync();
+
+ // check if workspace is added to the toDelete list
+ expect(await screen.findByTestId('test-component-to-delete')).toHaveTextContent('1234');
// workspace deletion is debounced, so it called only once
expect(mockDeleteWorkspace).toHaveBeenCalledTimes(1);
@@ -177,7 +182,7 @@ describe('WorkspaceActionsProvider', () => {
// get and click delete button
const handleActionBtn = screen.getByTestId('test-component-handle-action');
- userEvent.click(handleActionBtn);
+ await user.click(handleActionBtn);
// make sure all timers are executed
await jest.advanceTimersByTimeAsync(1000);
@@ -199,7 +204,7 @@ describe('WorkspaceActionsProvider', () => {
// get and click start button
const handleActionBtn = screen.getByTestId('test-component-handle-action');
- userEvent.click(handleActionBtn);
+ await user.click(handleActionBtn);
// make sure all timers are executed
await jest.advanceTimersByTimeAsync(1000);
@@ -219,7 +224,7 @@ describe('WorkspaceActionsProvider', () => {
// get and click start button
const handleActionBtn = screen.getByTestId('test-component-handle-action');
- userEvent.click(handleActionBtn);
+ await user.click(handleActionBtn);
// make sure all timers are executed
await jest.advanceTimersByTimeAsync(1000);
@@ -244,7 +249,7 @@ describe('WorkspaceActionsProvider', () => {
// get and click start button
const handleActionBtn = screen.getByTestId('test-component-handle-action');
- userEvent.click(handleActionBtn);
+ await user.click(handleActionBtn);
// make sure all timers are executed
await jest.advanceTimersByTimeAsync(1000);
@@ -263,7 +268,7 @@ describe('WorkspaceActionsProvider', () => {
// get and click stop button
const handleActionBtn = screen.getByTestId('test-component-handle-action');
- userEvent.click(handleActionBtn);
+ await user.click(handleActionBtn);
// make sure all timers are executed
await jest.advanceTimersByTimeAsync(1000);
@@ -282,7 +287,7 @@ describe('WorkspaceActionsProvider', () => {
// get and click delete button
const handleActionBtn = screen.getByTestId('test-component-handle-action');
- userEvent.click(handleActionBtn);
+ await user.click(handleActionBtn);
// make sure all timers are executed
await jest.advanceTimersByTimeAsync(1000);
diff --git a/packages/dashboard-frontend/src/index.tsx b/packages/dashboard-frontend/src/index.tsx
index 1a7e72b55..ac9d801d8 100644
--- a/packages/dashboard-frontend/src/index.tsx
+++ b/packages/dashboard-frontend/src/index.tsx
@@ -30,7 +30,7 @@ async function startApp(): Promise {
const history = createHashHistory();
const store = configureStore(history);
- const ROOT = document.querySelector('.ui-container');
+ const root = ReactDOM.createRoot(document.querySelector('.ui-container'));
try {
// preload app data
await new PreloadData(store).init();
@@ -43,12 +43,11 @@ async function startApp(): Promise {
navigator.serviceWorker.register('./service-worker.js');
}
- ReactDOM.render(
+ root.render(
,
- ROOT,
);
}
diff --git a/packages/dashboard-frontend/src/pages/GetStarted/SamplesList/Gallery/Card/__tests__/index.spec.tsx b/packages/dashboard-frontend/src/pages/GetStarted/SamplesList/Gallery/Card/__tests__/index.spec.tsx
index 2bdb55dad..057c97559 100644
--- a/packages/dashboard-frontend/src/pages/GetStarted/SamplesList/Gallery/Card/__tests__/index.spec.tsx
+++ b/packages/dashboard-frontend/src/pages/GetStarted/SamplesList/Gallery/Card/__tests__/index.spec.tsx
@@ -95,11 +95,11 @@ describe('Devfile Metadata Card', () => {
expect(screen.queryByText('Tech-Preview')).toBeTruthy();
});
- it('should handle card click', () => {
+ it('should handle card click', async () => {
renderComponent(metadata);
const card = screen.getByRole('article');
- userEvent.click(card);
+ await userEvent.click(card);
expect(onCardClick).toHaveBeenCalledWith();
});
diff --git a/packages/dashboard-frontend/src/pages/GetStarted/SamplesList/Gallery/__tests__/index.spec.tsx b/packages/dashboard-frontend/src/pages/GetStarted/SamplesList/Gallery/__tests__/index.spec.tsx
index f9047fd81..2cbc94bb4 100644
--- a/packages/dashboard-frontend/src/pages/GetStarted/SamplesList/Gallery/__tests__/index.spec.tsx
+++ b/packages/dashboard-frontend/src/pages/GetStarted/SamplesList/Gallery/__tests__/index.spec.tsx
@@ -75,13 +75,13 @@ describe('Samples List Gallery', () => {
expect(cards.length).toEqual(20);
});
- it('should handle click on card', () => {
+ it('should handle click on card', async () => {
renderComponent(store, metadata);
const cards = screen.getAllByTestId('sample-card');
const button = within(cards[0]).getByRole('button');
- userEvent.click(button);
+ await userEvent.click(button);
expect(mockOnCardClick).toHaveBeenCalledTimes(1);
expect(mockOnCardClick).toHaveBeenCalledWith(metadata[0]);
diff --git a/packages/dashboard-frontend/src/pages/GetStarted/SamplesList/Toolbar/__tests__/index.spec.tsx b/packages/dashboard-frontend/src/pages/GetStarted/SamplesList/Toolbar/__tests__/index.spec.tsx
index baad1c14c..cd9c6eb89 100644
--- a/packages/dashboard-frontend/src/pages/GetStarted/SamplesList/Toolbar/__tests__/index.spec.tsx
+++ b/packages/dashboard-frontend/src/pages/GetStarted/SamplesList/Toolbar/__tests__/index.spec.tsx
@@ -57,7 +57,8 @@ describe('Samples List Toolbar', () => {
renderComponent();
const filterInput = screen.getByLabelText('Filter samples list') as HTMLInputElement;
- userEvent.paste(filterInput, 'bash');
+ await userEvent.click(filterInput);
+ await userEvent.paste('bash');
await waitFor(() =>
expect(DevfileRegistriesStore.actionCreators.setFilter).toHaveBeenCalledTimes(1),
@@ -76,18 +77,19 @@ describe('Samples List Toolbar', () => {
.build();
renderComponent(storeNext);
const filterInput = screen.getByPlaceholderText('Filter by') as HTMLInputElement;
- userEvent.paste(filterInput, 'bash');
+ await userEvent.click(filterInput);
+ await userEvent.paste('bash');
await waitFor(() => screen.findByText('1 item'));
});
- test('switch temporary storage toggle', () => {
+ test('switch temporary storage toggle', async () => {
renderComponent();
const switchInput = screen.getByRole('checkbox') as HTMLInputElement;
expect(switchInput.checked).toBeFalsy();
- userEvent.click(switchInput);
+ await userEvent.click(switchInput);
expect(switchInput.checked).toBeTruthy();
});
diff --git a/packages/dashboard-frontend/src/pages/GetStarted/SamplesList/__tests__/index.spec.tsx b/packages/dashboard-frontend/src/pages/GetStarted/SamplesList/__tests__/index.spec.tsx
index 6098b776c..978d2a768 100644
--- a/packages/dashboard-frontend/src/pages/GetStarted/SamplesList/__tests__/index.spec.tsx
+++ b/packages/dashboard-frontend/src/pages/GetStarted/SamplesList/__tests__/index.spec.tsx
@@ -96,14 +96,14 @@ describe('Samples List', () => {
expect(snapshot.toJSON()).toMatchSnapshot();
});
- test('default storage type', () => {
+ test('default storage type', async () => {
renderComponent(store, editorDefinition, editorImage);
const isTemporary = screen.getByTestId('isTemporary');
expect(isTemporary).toHaveTextContent('false');
const sampleCardButton = screen.getByRole('button', { name: 'Select Sample' });
- userEvent.click(sampleCardButton);
+ await userEvent.click(sampleCardButton);
expect(mockWindowOpen).toHaveBeenCalledWith(
`${origin}#${sampleUrl}?df=devfile2.yaml&che-editor=che-incubator%2Fche-code%2Finsiders&devWorkspace=registry-url%2Fdevfile-registry%2Fdevfiles%2Fquarkus%2Fdevworkspace-che-code-insiders.yaml&editor-image=custom-editor-image&storageType=${preferredPvcStrategy}`,
@@ -111,17 +111,17 @@ describe('Samples List', () => {
);
});
- test('toggled storage type', () => {
+ test('toggled storage type', async () => {
renderComponent(store, editorDefinition, editorImage);
const toggleIsTemporaryButton = screen.getByRole('button', { name: 'Toggle isTemporary' });
- userEvent.click(toggleIsTemporaryButton);
+ await userEvent.click(toggleIsTemporaryButton);
const isTemporary = screen.getByTestId('isTemporary');
expect(isTemporary).toHaveTextContent('true');
const sampleCardButton = screen.getByRole('button', { name: 'Select Sample' });
- userEvent.click(sampleCardButton);
+ await userEvent.click(sampleCardButton);
expect(mockWindowOpen).toHaveBeenCalledWith(
`${origin}#${sampleUrl}?df=devfile2.yaml&che-editor=che-incubator%2Fche-code%2Finsiders&devWorkspace=registry-url%2Fdevfile-registry%2Fdevfiles%2Fquarkus%2Fdevworkspace-che-code-insiders.yaml&editor-image=custom-editor-image&storageType=ephemeral`,
@@ -150,14 +150,14 @@ describe('Samples List', () => {
expect(snapshot.toJSON()).toMatchSnapshot();
});
- test('default storage type', () => {
+ test('default storage type', async () => {
renderComponent(store, editorDefinition, editorImage);
const isTemporary = screen.getByTestId('isTemporary');
expect(isTemporary).toHaveTextContent('true');
const sampleCardButton = screen.getByRole('button', { name: 'Select Sample' });
- userEvent.click(sampleCardButton);
+ await userEvent.click(sampleCardButton);
expect(mockWindowOpen).toHaveBeenCalledWith(
`${origin}#${sampleUrl}?df=devfile2.yaml&che-editor=che-incubator%2Fche-code%2Finsiders&devWorkspace=registry-url%2Fdevfile-registry%2Fdevfiles%2Fquarkus%2Fdevworkspace-che-code-insiders.yaml&editor-image=custom-editor-image&storageType=${preferredPvcStrategy}`,
@@ -165,17 +165,17 @@ describe('Samples List', () => {
);
});
- test('toggled storage type', () => {
+ test('toggled storage type', async () => {
renderComponent(store, editorDefinition, editorImage);
const toggleIsTemporaryButton = screen.getByRole('button', { name: 'Toggle isTemporary' });
- userEvent.click(toggleIsTemporaryButton);
+ await userEvent.click(toggleIsTemporaryButton);
const isTemporary = screen.getByTestId('isTemporary');
expect(isTemporary).toHaveTextContent('false');
const sampleCardButton = screen.getByRole('button', { name: 'Select Sample' });
- userEvent.click(sampleCardButton);
+ await userEvent.click(sampleCardButton);
expect(mockWindowOpen).toHaveBeenCalledWith(
`${origin}#${sampleUrl}?df=devfile2.yaml&che-editor=che-incubator%2Fche-code%2Finsiders&devWorkspace=registry-url%2Fdevfile-registry%2Fdevfiles%2Fquarkus%2Fdevworkspace-che-code-insiders.yaml&editor-image=custom-editor-image&storageType=persistent`,
@@ -199,12 +199,12 @@ describe('Samples List', () => {
.build();
});
- test('provided editor matches some resource', () => {
+ test('provided editor matches some resource', async () => {
const store = storeBuilder.build();
renderComponent(store, editorDefinition, editorImage);
const sampleCardButton = screen.getByRole('button', { name: 'Select Sample' });
- userEvent.click(sampleCardButton);
+ await userEvent.click(sampleCardButton);
expect(mockWindowOpen).toHaveBeenCalledWith(
`${origin}#${sampleUrl}?df=devfile2.yaml&che-editor=che-incubator%2Fche-code%2Finsiders&devWorkspace=registry-url%2Fdevfile-registry%2Fdevfiles%2Fquarkus%2Fdevworkspace-che-code-insiders.yaml&editor-image=custom-editor-image&storageType=ephemeral`,
@@ -212,12 +212,12 @@ describe('Samples List', () => {
);
});
- test('provided editor does not match any resource', () => {
+ test('provided editor does not match any resource', async () => {
const store = storeBuilder.build();
renderComponent(store, 'my/custom/editor', editorImage);
const sampleCardButton = screen.getByRole('button', { name: 'Select Sample' });
- userEvent.click(sampleCardButton);
+ await userEvent.click(sampleCardButton);
expect(mockWindowOpen).toHaveBeenCalledWith(
`${origin}#${sampleUrl}?df=devfile2.yaml&che-editor=my%2Fcustom%2Feditor&editor-image=custom-editor-image&storageType=ephemeral`,
@@ -225,14 +225,14 @@ describe('Samples List', () => {
);
});
- test('default editor matches some resource', () => {
+ test('default editor matches some resource', async () => {
const store = storeBuilder
.withDwPlugins({}, {}, false, [], undefined, 'che-incubator/che-idea/next')
.build();
renderComponent(store, undefined, undefined);
const sampleCardButton = screen.getByRole('button', { name: 'Select Sample' });
- userEvent.click(sampleCardButton);
+ await userEvent.click(sampleCardButton);
expect(mockWindowOpen).toHaveBeenCalledWith(
`${origin}#${sampleUrl}?df=devfile2.yaml&che-editor=che-incubator%2Fche-idea%2Fnext&devWorkspace=registry-url%2Fdevfile-registry%2Fdevfiles%2Fquarkus%2Fdevworkspace-che-idea-next.yaml&storageType=ephemeral`,
diff --git a/packages/dashboard-frontend/src/pages/GetStarted/__tests__/__snapshots__/index.spec.tsx.snap b/packages/dashboard-frontend/src/pages/GetStarted/__tests__/__snapshots__/index.spec.tsx.snap
index 59197e8ef..2357e51c3 100644
--- a/packages/dashboard-frontend/src/pages/GetStarted/__tests__/__snapshots__/index.spec.tsx.snap
+++ b/packages/dashboard-frontend/src/pages/GetStarted/__tests__/__snapshots__/index.spec.tsx.snap
@@ -42,14 +42,10 @@ exports[`GetStarted snapshot 1`] = `