test: update to use useEvent intead of fireEvent

Author: dcoa

src/authz-module/components/AuthZTitle.test.tsx

@@ -1,5 +1,6 @@
 import { ReactNode } 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 AuthZTitle, { AuthZTitleProps } from './AuthZTitle';
 
 jest.mock('react-router-dom', () => ({
@@ -58,10 +59,11 @@ describe('AuthZTitle', () => {
 
     render(<AuthZTitle {...defaultProps} actions={actions} />);
 
-    actions.forEach(({ label, onClick }) => {
+    actions.forEach(async ({ label, onClick }) => {
+      const user = userEvent.setup();
       const button = screen.getByRole('button', { name: label });
       expect(button).toBeInTheDocument();
-      fireEvent.click(button);
+      await user.click(button);
       expect(onClick).toHaveBeenCalled();
     });
   });

src/authz-module/libraries-manager/components/TeamTable/components/MultipleChoiceFilter.test.tsx

@@ -1,7 +1,5 @@
-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 MultipleChoiceFilter from './MultipleChoiceFilter';
 
 describe('MultipleChoiceFilter', () => {
@@ -37,52 +35,57 @@ describe('MultipleChoiceFilter', () => {
     expect(icon).toBeInTheDocument();
   });
 
-  it('should show all filter choices when dropdown is opened', () => {
+  it('should show all filter choices when dropdown is opened', async () => {
+    const user = userEvent.setup();
+
     render(<MultipleChoiceFilter {...defaultProps} />);
 
-    fireEvent.click(screen.getByRole('button'));
+    await user.click(screen.getByRole('button'));
 
     expect(screen.getByText('Option 1 (5)')).toBeInTheDocument();
     expect(screen.getByText('Option 2 (3)')).toBeInTheDocument();
     expect(screen.getByText('Option 3 (0)')).toBeInTheDocument();
   });
 
-  it('should add value to filter when checkbox is checked', () => {
+  it('should add value to filter when checkbox is checked', async () => {
+    const user = userEvent.setup();
     render(<MultipleChoiceFilter {...defaultProps} />);
 
-    fireEvent.click(screen.getByRole('button'));
+    await user.click(screen.getByRole('button'));
 
     const checkbox1 = screen.getByLabelText('Option 1');
-    fireEvent.click(checkbox1);
+    await user.click(checkbox1);
 
     expect(mockSetFilter).toHaveBeenCalledWith(['option1']);
   });
 
-  it('should remove value from filter when checkbox is unchecked', () => {
+  it('should remove value from filter when checkbox is unchecked', async () => {
+    const user = userEvent.setup();
     const propsWithSelectedValue = {
       ...defaultProps,
       filterValue: ['option1', 'option2'],
     };
 
     render(<MultipleChoiceFilter {...propsWithSelectedValue} />);
 
-    fireEvent.click(screen.getByRole('button'));
+    await user.click(screen.getByRole('button'));
 
     const checkbox1 = screen.getByLabelText('Option 1');
-    fireEvent.click(checkbox1);
+    await user.click(checkbox1);
 
     expect(mockSetFilter).toHaveBeenCalledWith(['option2']);
   });
 
-  it('should show checked checkboxes for pre-selected values', () => {
+  it('should show checked checkboxes for pre-selected values', async () => {
+    const user = userEvent.setup();
     const propsWithSelectedValues = {
       ...defaultProps,
       filterValue: ['option1', 'option3'],
     };
 
     render(<MultipleChoiceFilter {...propsWithSelectedValues} />);
 
-    fireEvent.click(screen.getByRole('button'));
+    await user.click(screen.getByRole('button'));
 
     const checkbox1 = screen.getByLabelText('Option 1');
     const checkbox2 = screen.getByLabelText('Option 2');
@@ -93,18 +96,19 @@ describe('MultipleChoiceFilter', () => {
     expect(checkbox3).toBeChecked();
   });
 
-  it('should call setFilter with correct array when adding to existing selections', () => {
+  it('should call setFilter with correct array when adding to existing selections', async () => {
+    const user = userEvent.setup();
     const propsWithExistingSelection = {
       ...defaultProps,
       filterValue: ['option2'],
     };
 
     render(<MultipleChoiceFilter {...propsWithExistingSelection} />);
 
-    fireEvent.click(screen.getByRole('button'));
+    await user.click(screen.getByRole('button'));
 
     const checkbox1 = screen.getByLabelText('Option 1');
-    fireEvent.click(checkbox1);
+    await user.click(checkbox1);
 
     expect(mockSetFilter).toHaveBeenCalledWith(['option2', 'option1']);
   });

src/authz-module/libraries-manager/components/TeamTable/components/SearchFilter.test.tsx

@@ -1,84 +1,91 @@
-import React from 'react';
-import {
-  render, screen, fireEvent,
-} from '@testing-library/react';
+import { useState } from 'react';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 import SearchFilter from './SearchFilter';
 
 describe('SearchFilter', () => {
-  const mockSetFilter = jest.fn();
-
-  const defaultProps = {
-    filterValue: '',
-    setFilter: mockSetFilter,
-    placeholder: 'Search placeholder',
-  };
-
   beforeEach(() => {
     jest.clearAllMocks();
   });
 
+  const SearchFilterWrapper = ({
+    initFilterValue = '', customPlaceholder = 'Search placeholder',
+  }:{ initFilterValue?: string; customPlaceholder?:string }) => {
+    const [filter, setFilter] = useState(initFilterValue);
+    return (
+      <SearchFilter
+        filterValue={filter}
+        setFilter={setFilter}
+        placeholder={customPlaceholder}
+      />
+    );
+  };
+
   it('should render search input with correct placeholder', () => {
-    render(<SearchFilter {...defaultProps} />);
+    render(<SearchFilterWrapper />);
 
     const input = screen.getByPlaceholderText('Search placeholder');
     expect(input).toBeInTheDocument();
     expect(input).toHaveAttribute('type', 'text');
   });
 
   it('should display empty value when filterValue is undefined', () => {
-    const propsWithUndefined = { ...defaultProps, filterValue: undefined as any };
-    render(<SearchFilter {...propsWithUndefined} />);
+    render(<SearchFilterWrapper initFilterValue={undefined} />);
 
     const input = screen.getByPlaceholderText('Search placeholder');
     expect(input).toHaveValue('');
   });
 
   it('should display filterValue if provided', () => {
-    const propsWithString = { ...defaultProps, filterValue: 'test search' };
-    render(<SearchFilter {...propsWithString} />);
+    render(<SearchFilterWrapper initFilterValue="test search" />);
 
     const input = screen.getByPlaceholderText('Search placeholder');
     expect(input).toHaveValue('test search');
   });
 
-  it('should call setFilter with input value when typing', () => {
-    render(<SearchFilter {...defaultProps} />);
+  it('should call setFilter with input value when typing', async () => {
+    const user = userEvent.setup();
+    render(<SearchFilterWrapper />);
 
     const input = screen.getByPlaceholderText('Search placeholder');
-    fireEvent.change(input, { target: { value: 'new search term' } });
+    await user.click(input);
+    await user.type(input, 'new search term');
 
-    expect(mockSetFilter).toHaveBeenCalledWith('new search term');
+    expect(input).toHaveValue('new search term');
   });
 
-  it('should call setFilter with undefined when input is cleared', () => {
-    const propsWithValue = { ...defaultProps, filterValue: 'existing value' as any };
-    render(<SearchFilter {...propsWithValue} />);
+  it('should clear the input correctly', async () => {
+    const user = userEvent.setup();
+    render(<SearchFilterWrapper initFilterValue="existing value" />);
 
     const input = screen.getByPlaceholderText('Search placeholder');
-    fireEvent.change(input, { target: { value: '' } });
-
-    expect(mockSetFilter).toHaveBeenCalledWith(undefined);
+    await user.click(input);
+    await user.clear(input);
+    expect(input).toHaveValue('');
   });
 
-  it('should handle multiple character input correctly', () => {
-    render(<SearchFilter {...defaultProps} />);
+  it('should handle multiple character input correctly', async () => {
+    const user = userEvent.setup();
+
+    render(<SearchFilterWrapper />);
 
     const input = screen.getByPlaceholderText('Search placeholder');
+    await user.click(input);
 
     // Type multiple characters
-    fireEvent.change(input, { target: { value: 'a' } });
-    expect(mockSetFilter).toHaveBeenCalledWith('a');
+    await user.type(input, 'a');
+    expect(input).toHaveValue('a');
 
-    fireEvent.change(input, { target: { value: 'ab' } });
-    expect(mockSetFilter).toHaveBeenCalledWith('ab');
+    await user.type(input, 'b');
+    expect(input).toHaveValue('ab');
 
-    fireEvent.change(input, { target: { value: 'abc' } });
-    expect(mockSetFilter).toHaveBeenCalledWith('abc');
+    await user.type(input, 'c');
+    expect(input).toHaveValue('abc');
   });
 
   it('should handle different placeholder text', () => {
     const customPlaceholder = 'Enter search term here...';
-    render(<SearchFilter {...defaultProps} placeholder={customPlaceholder} />);
+    render(<SearchFilterWrapper customPlaceholder={customPlaceholder} />);
 
     const input = screen.getByPlaceholderText(customPlaceholder);
     expect(input).toBeInTheDocument();

src/authz-module/libraries-manager/components/TeamTable/components/SortDropdown.test.tsx

@@ -1,8 +1,7 @@
-import {
-  render, screen, fireEvent, act,
-} from '@testing-library/react';
-import { IntlProvider } from '@edx/frontend-platform/i18n';
+import { screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 import { DataTableContext } from '@openedx/paragon';
+import { renderWrapper } from '@src/setupTest';
 import SortDropdown from './SortDropdown';
 
 jest.mock('@edx/frontend-platform/i18n', () => jest.requireActual('@edx/frontend-platform/i18n'));
@@ -28,12 +27,10 @@ describe('SortDropdown', () => {
       ...contextOverrides,
     };
 
-    return render(
-      <IntlProvider locale="en">
-        <DataTableContext.Provider value={contextValue}>
-          <SortDropdown />
-        </DataTableContext.Provider>
-      </IntlProvider>,
+    return renderWrapper(
+      <DataTableContext.Provider value={contextValue}>
+        <SortDropdown />
+      </DataTableContext.Provider>,
     );
   };
 
@@ -48,11 +45,12 @@ describe('SortDropdown', () => {
     expect(screen.getByText('Sort')).toBeInTheDocument();
   });
 
-  it('should render all sort options when dropdown is opened', () => {
+  it('should render all sort options when dropdown is opened', async () => {
+    const user = userEvent.setup();
     renderSortDropdown();
 
     const toggleButton = screen.getByRole('button');
-    fireEvent.click(toggleButton);
+    await user.click(toggleButton);
 
     expect(screen.getByText('Name A-Z')).toBeInTheDocument();
     expect(screen.getByText('Name Z-A')).toBeInTheDocument();
@@ -84,30 +82,29 @@ describe('SortDropdown', () => {
     expect(screen.getByText('Name Z-A')).toBeInTheDocument();
   });
 
-  it('should handle sort selection and call toggleSortBy', () => {
+  it('should handle sort selection and call toggleSortBy', async () => {
+    const user = userEvent.setup();
     renderSortDropdown();
 
     const toggleButton = screen.getByRole('button');
-    fireEvent.click(toggleButton);
+    await user.click(toggleButton);
 
     const nameAZOption = screen.getByText('Name A-Z');
 
-    act(() => {
-      fireEvent.click(nameAZOption);
-    });
+    await user.click(nameAZOption);
 
     expect(mockToggleSortBy).toHaveBeenCalledWith('username', false);
 
     const nameZAOption = screen.getByText('Name Z-A');
 
-    act(() => {
-      fireEvent.click(nameZAOption);
-    });
+    await user.click(toggleButton);
+    await user.click(nameZAOption);
 
     expect(mockToggleSortBy).toHaveBeenCalledWith('username', true);
   });
 
-  it('should mark the active sort option as active', () => {
+  it('should mark the active sort option as active', async () => {
+    const user = userEvent.setup();
     const contextWithSort = {
       state: {
         ...defaultDataTableState,
@@ -118,7 +115,7 @@ describe('SortDropdown', () => {
     renderSortDropdown(contextWithSort);
 
     const toggleButton = screen.getByRole('button');
-    fireEvent.click(toggleButton);
+    await user.click(toggleButton);
 
     // Get all elements with "Name A-Z" text and find the dropdown item
     const nameAZOptions = screen.getAllByText('Name A-Z');

src/authz-module/libraries-manager/components/TeamTable/components/TableControlBar.test.tsx

@@ -1,10 +1,9 @@
-import {
-  render, screen, fireEvent,
-} from '@testing-library/react';
-import { IntlProvider } from '@edx/frontend-platform/i18n';
+import { screen } from '@testing-library/react';
 import {
   DataTableContext, CheckboxFilter, TextFilter,
 } from '@openedx/paragon';
+import { renderWrapper } from '@src/setupTest';
+import userEvent from '@testing-library/user-event';
 import TableControlBar from './TableControlBar';
 
 jest.mock('./MultipleChoiceFilter', () => {
@@ -61,12 +60,10 @@ describe('TableControlBar', () => {
   };
 
   const renderWithContext = (contextValue = defaultContextValue) => (
-    render(
-      <IntlProvider locale="en">
-        <DataTableContext.Provider value={contextValue}>
-          <TableControlBar />
-        </DataTableContext.Provider>
-      </IntlProvider>,
+    renderWrapper(
+      <DataTableContext.Provider value={contextValue}>
+        <TableControlBar />
+      </DataTableContext.Provider>,
     )
   );
 
@@ -101,7 +98,8 @@ describe('TableControlBar', () => {
     expect(screen.getByText('Clear filters')).toBeInTheDocument();
   });
 
-  it('should call setAllFilters with empty array when Clear filters is clicked', () => {
+  it('should call setAllFilters with empty array when Clear filters is clicked', async () => {
+    const user = userEvent.setup();
     const contextWithFilters = {
       ...defaultContextValue,
       state: {
@@ -112,7 +110,7 @@ describe('TableControlBar', () => {
     renderWithContext(contextWithFilters);
 
     const clearButton = screen.getByText('Clear filters');
-    fireEvent.click(clearButton);
+    await user.click(clearButton);
 
     expect(mockSetAllFilters).toHaveBeenCalledWith([]);
   });