Use userEvent instead of fireEvent for web tests

pkg/app/web/src/components/application-state-view.test.tsx

@@ -1,10 +1,10 @@
 import React from "react";
 import { createStore, render, screen } from "../../test-utils";
-import { fireEvent } from "@testing-library/react";
 import { ApplicationStateView } from "./application-state-view";
 import { dummyApplicationLiveState } from "../__fixtures__/dummy-application-live-state";
 import { clearError } from "../modules/applications-live-state";
 import { UI_TEXT_REFRESH } from "../constants/ui-text";
+import userEvent from "@testing-library/user-event";
 
 it("shows refresh button if live state fetching has error", () => {
   const store = createStore({
@@ -33,7 +33,7 @@ it("shows refresh button if live state fetching has error", () => {
 
   expect(store.getActions()).toEqual([]);
 
-  fireEvent.click(screen.getByRole("button", { name: UI_TEXT_REFRESH }));
+  userEvent.click(screen.getByRole("button", { name: UI_TEXT_REFRESH }));
 
   expect(store.getActions()).toMatchObject([{ type: clearError.type }]);
 });

pkg/app/web/src/components/approval-stage.test.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import { ApprovalStage } from "./approval-stage";
 import { render, screen } from "../../test-utils";
-import { fireEvent } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
 
 it("shows stage name", () => {
   const { container } = render(
@@ -29,6 +29,6 @@ it("calls onClick handler if clicked component", () => {
     {}
   );
 
-  fireEvent.click(screen.getByText("APPROVAL_STAGE"));
+  userEvent.click(screen.getByText("APPROVAL_STAGE"));
   expect(onClick).toHaveBeenCalledWith("stageId", "APPROVAL_STAGE");
 });

pkg/app/web/src/components/header.test.tsx

@@ -1,4 +1,4 @@
-import { fireEvent } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
 import React from "react";
 import { MemoryRouter } from "react-router-dom";
 import { render, screen } from "../../test-utils";
@@ -34,6 +34,6 @@ it("shows logout link if opened user menu", () => {
     }
   );
 
-  fireEvent.click(screen.getByRole("button", { name: "User Menu" }));
+  userEvent.click(screen.getByRole("button", { name: "User Menu" }));
   expect(screen.getByRole("menuitem", { name: "Logout" })).toBeInTheDocument();
 });

pkg/app/web/src/components/kubernetes-state-view.test.tsx

@@ -1,4 +1,4 @@
-import { fireEvent } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
 import React from "react";
 import { render, screen } from "../../test-utils";
 import { resourcesList } from "../__fixtures__/dummy-application-live-state";
@@ -13,9 +13,9 @@ test("render resources", () => {
 test("filter resources", () => {
   render(<KubernetesStateView resources={resourcesList} />, {});
 
-  fireEvent.click(screen.getByRole("button", { name: "FILTER" }));
-  fireEvent.click(screen.getByRole("checkbox", { name: "ReplicaSet" }));
-  fireEvent.click(screen.getByRole("button", { name: "APPLY" }));
+  userEvent.click(screen.getByRole("button", { name: "FILTER" }));
+  userEvent.click(screen.getByRole("checkbox", { name: "ReplicaSet" }));
+  userEvent.click(screen.getByRole("button", { name: "APPLY" }));
 
   expect(screen.queryAllByTestId("kubernetes-resource")).toHaveLength(2);
 });

pkg/app/web/src/components/log-viewer.test.tsx

@@ -1,4 +1,4 @@
-import { fireEvent } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
 import React from "react";
 import { createStore, render, screen } from "../../test-utils";
 import { clearActiveStage } from "../modules/active-stage";
@@ -89,7 +89,7 @@ it("should dispatch clearActiveStage action if click `close log` button", () =>
     store,
   });
 
-  fireEvent.click(screen.getByRole("button", { name: "close log" }));
+  userEvent.click(screen.getByRole("button", { name: "close log" }));
 
   expect(store.getActions()).toMatchObject([
     {

pkg/app/web/src/components/sealed-secret-dialog.test.tsx

@@ -1,4 +1,4 @@
-import { fireEvent } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
 import React from "react";
 import { render, screen } from "../../test-utils";
 import { dummyApplication } from "../__fixtures__/dummy-application";
@@ -46,6 +46,6 @@ test("cancel", () => {
     }
   );
 
-  fireEvent.click(screen.getByRole("button", { name: "Cancel" }));
+  userEvent.click(screen.getByRole("button", { name: "Cancel" }));
   expect(onClose).toHaveBeenCalled();
 });

pkg/app/web/src/components/split-button.test.tsx

@@ -1,4 +1,4 @@
-import { fireEvent } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
 import React from "react";
 import { render, screen, act } from "../../test-utils";
 import { SplitButton } from "./split-button";
@@ -14,17 +14,17 @@ it("calls onClick handler with option's index if clicked", () => {
     {}
   );
 
-  fireEvent.click(screen.getByRole("button", { name: "option1" }));
+  userEvent.click(screen.getByRole("button", { name: "option1" }));
 
   expect(onClick).toHaveBeenCalledWith(0);
 
   act(() => {
-    fireEvent.click(
+    userEvent.click(
       screen.getByRole("button", { name: "select merge strategy" })
     );
   });
-  fireEvent.click(screen.getByRole("menuitem", { name: "option2" }));
-  fireEvent.click(screen.getByRole("button", { name: "option2" }));
+  userEvent.click(screen.getByRole("menuitem", { name: "option2" }));
+  userEvent.click(screen.getByRole("button", { name: "option2" }));
 
   expect(onClick).toHaveBeenCalledWith(1);
 });

pkg/app/web/src/components/toasts.test.tsx

@@ -1,4 +1,4 @@
-import { fireEvent } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
 import React from "react";
 import { render, screen, createStore } from "../../test-utils";
 import { IToast, removeToast } from "../modules/toasts";
@@ -79,7 +79,7 @@ describe("error toast", () => {
       store,
     });
 
-    fireEvent.click(screen.getByRole("button", { name: "Close" }));
+    userEvent.click(screen.getByRole("button", { name: "Close" }));
 
     expect(store.getActions()).toEqual([
       {