test: migrate FilteredList tests from Enzyme to React Testing Library

[vishvamsinh28]

Rewrote all tests for using React Testing Library. Improved test structure, assertions, and removed legacy Enzyme usage.

[graphite-app]

How to use the Graphite Merge Queue

Add the label merge-queue to this PR to add it to the merge queue.

You must have a Graphite account in order to use the merge queue. Sign up using this link.

An organization admin has enabled the Graphite Merge Queue in this repository.

Please do not merge from GitHub as this will restart CI on PRs being processed by the merge queue.

[graphite-app]

How to use the Graphite Merge Queue

Add the label merge-queue to this PR to add it to the merge queue.

You must have a Graphite account in order to use the merge queue. Sign up using this link.

An organization admin has enabled the Graphite Merge Queue in this repository.

Please do not merge from GitHub as this will restart CI on PRs being processed by the merge queue.

[vishvamsinh28]

@yurishkuro This test file currently has around 25 test cases. I can reduce it to 10–15 tests while maintaining 100% coverage, if it feels too long or overly detailed.

[codecov]

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 97.56%. Comparing base (5e5dccd) to head (fc3ed0e).

Additional details and impacted files

@@           Coverage Diff           @@
##             main    #2875   +/-   ##
=======================================
  Coverage   97.56%   97.56%           
=======================================
  Files         256      256           
  Lines        7975     7975           
  Branches     2086     2011   -75     
=======================================
  Hits         7781     7781           
  Misses        194      194           

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[graphite-app]

The timer cleanup in this test should be moved to ensure it always runs, even if the test fails. Consider adding jest.useRealTimers() in an afterEach block or wrapping the test body in a try/finally:

it('clears focused item on scroll', async () => {
  jest.useFakeTimers();
  
  try {
    // Test implementation...
  } finally {
    jest.useRealTimers();
  }
});

This prevents timer mocking from leaking into subsequent tests, which could cause unpredictable behavior in the test suite.

Suggested change

	it('clears focused item on scroll', async () => {
	jest.useFakeTimers();
	it('enter selects the current focus index', () => {
	const focusedIndex = 0;
	expect(props.setValue.mock.calls.length).toBe(0);
	wrapper.setState({ focusedIndex });
	keyDown(EKey.Enter);
	expect(props.setValue.mock.calls).toEqual([[props.options[focusedIndex]]]);
	});
	render(<FilteredList {...props} />);
	it('enter selects the filteredOption if there is only one option', () => {
	const value = words[1];
	wrapper.find('input').simulate('change', { target: { value } });
	expect(props.setValue.mock.calls.length).toBe(0);
	keyDown(EKey.Enter);
	expect(props.setValue.mock.calls).toEqual([[value]]);
	});
	const input = getFilterInput();
	input.focus();
	fireEvent.keyDown(input, { key: EKey.ArrowDown });
	await waitFor(() => {
	expect(getListItems()[0]).toHaveAttribute('data-focused', 'true');
	});
	it('enter is ignored when an item is not focused', () => {
	expect(props.setValue.mock.calls.length).toBe(0);
	keyDown(EKey.Enter);
	expect(props.setValue.mock.calls.length).toBe(0);
	fireEvent.scroll(getVirtualList());
	jest.runAllTimers();
	await waitFor(() => {
	const items = getListItems();
	items.forEach(item => {
	expect(item).toHaveAttribute('data-focused', 'false');
	});
	});
	jest.useRealTimers();
	it('clears focused item on scroll', async () => {
	jest.useFakeTimers();
	try {
	render(<FilteredList {...props} />);
	const input = getFilterInput();
	input.focus();
	fireEvent.keyDown(input, { key: EKey.ArrowDown });
	await waitFor(() => {
	expect(getListItems()[0]).toHaveAttribute('data-focused', 'true');
	});
	fireEvent.scroll(getVirtualList());
	jest.runAllTimers();
	await waitFor(() => {
	const items = getListItems();
	items.forEach(item => {
	expect(item).toHaveAttribute('data-focused', 'false');
	});
	});
	} finally {
	jest.useRealTimers();
	}
	});

Spotted by Diamond

Is this helpful? React 👍 or 👎 to let us know.

[yurishkuro]

makes sense

[vishvamsinh28]

@yurishkuro please review