refactor: replace fireEvent with userEvent in unit tests (#732)

Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com>
Co-authored-by: huyenltnguyen <25715018+huyenltnguyen@users.noreply.github.com>

Author: Copilot

src/quiz-question/quiz-question.test.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { render, screen, within, fireEvent } from "@testing-library/react";
+import { render, screen, within } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 
 import { QuizQuestion } from "./quiz-question";
@@ -301,7 +301,7 @@ describe("<QuizQuestion />", () => {
 		).not.toBeInTheDocument();
 	});
 
-	it("should render action buttons when provided", () => {
+	it("should render action buttons when provided", async () => {
 		const handleAction1 = jest.fn();
 		const handleAction2 = jest.fn();
 
@@ -353,10 +353,10 @@ describe("<QuizQuestion />", () => {
 			"quiz-answer-2-label",
 		);
 
-		fireEvent.click(actionButton1);
+		await userEvent.click(actionButton1);
 		expect(handleAction1).toHaveBeenCalledTimes(1);
 
-		fireEvent.click(actionButton2);
+		await userEvent.click(actionButton2);
 		expect(handleAction2).toHaveBeenCalledTimes(1);
 
 		// Verify no action button for option 3

src/quiz-question/transcript/transcript.test.tsx

@@ -1,5 +1,6 @@
 import React from "react";
-import { render, screen, fireEvent } from "@testing-library/react";
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
 
 import { Transcript } from "./transcript";
 
@@ -25,34 +26,34 @@ describe("<Transcript />", () => {
 		expect(screen.getByText("Sample transcript text")).not.toBeVisible();
 	});
 
-	it("should toggle open when clicking the summary", () => {
+	it("should toggle open when clicking the summary", async () => {
 		render(<Transcript {...baseProps} />);
 
 		const summary = screen.getByText("Transcript");
-		fireEvent.click(summary);
+		await userEvent.click(summary);
 
 		const details = screen.getByRole("group");
 		expect(details).toHaveAttribute("open");
 		expect(screen.getByText("Sample transcript text")).toBeVisible();
 	});
 
-	it("should filter out empty lines", () => {
+	it("should filter out empty lines", async () => {
 		const transcript = `Hello\n\n\nWorld\n  \n`;
 		render(<Transcript transcript={transcript} />);
 
-		fireEvent.click(screen.getByText("Transcript"));
+		await userEvent.click(screen.getByText("Transcript"));
 
 		const paragraphs = screen.getAllByText(/Hello|World/);
 		expect(paragraphs).toHaveLength(2);
 		expect(paragraphs[0]).toHaveTextContent("Hello");
 		expect(paragraphs[1]).toHaveTextContent("World");
 	});
 
-	it("should render speaker names in bold", () => {
+	it("should render speaker names in bold", async () => {
 		const transcript = `Tom: Hello there!\nMaria: Hi Tom, how are you?`;
 		render(<Transcript transcript={transcript} />);
 
-		fireEvent.click(screen.getByText("Transcript"));
+		await userEvent.click(screen.getByText("Transcript"));
 
 		const tomElement = screen.getByText("Tom:");
 		const mariaElement = screen.getByText("Maria:");