Testing Focus Management with Jest

Focus management is crucial for accessibility and a good user experience, especially in complex web applications. This challenge asks you to implement Jest tests to verify that focus is correctly managed when certain actions occur within a React component. Successfully completing this challenge demonstrates your ability to test accessibility-related behavior.

Problem Description

You are given a React component called FocusableComponent. This component contains a button and an input field. When the button is clicked, focus should be programmatically set to the input field. Your task is to write Jest tests to ensure that this focus management behavior works as expected.

Specifically, you need to:

1. Verify Focus on Button Click: When the button is clicked, the focus should be moved to the input field. You'll need to use a mocking strategy to simulate a click event and then assert that the focus method of the input element was called.
2. Handle Initial Focus: The input field should not have focus initially. You need to assert that the input field does not have focus before the button is clicked.
3. Consider Edge Cases (Optional): While not strictly required, consider how your tests would handle scenarios where the input field is initially focused (e.g., due to a previous interaction) or if the input field is disabled.

Key Requirements:

• Use Jest and React Testing Library.
• Mock the useRef hook to control the input element.
• Assert that the focus method of the input element is called after the button click.
• Assert that the input field does not have focus before the button click.

Expected Behavior:

• The tests should pass if the FocusableComponent correctly sets focus to the input field when the button is clicked and does not initially have focus.
• The tests should fail if the focus management logic is incorrect.

Examples

Example 1:

Input: A clean `FocusableComponent` with no initial focus on the input.
Output: Tests pass, confirming focus is moved to the input after the button click.
Explanation: The button click triggers the focus management logic, and the tests verify that the input receives focus.

Example 2:

Input: A `FocusableComponent` where the button click does *not* move focus to the input.
Output: Tests fail, indicating a problem with the focus management logic.
Explanation: The tests will assert that the `focus` method was not called on the input element.

Example 3: (Edge Case - Optional)

Input: A `FocusableComponent` where the input field is initially focused.
Output: Tests pass (if the component doesn't re-focus the input on mount).
Explanation: The tests should not assert that the input *gains* focus after the button click, but rather that the focus management logic doesn't interfere with existing focus.

Constraints

• Testing Library Version: Assume you are using React Testing Library version 13 or higher.
• Mocking: You are allowed and encouraged to mock the useRef hook.
• Performance: The tests should execute quickly. Avoid unnecessary DOM manipulations.
• Input Type: The input field is a standard <input> element.

Notes

• Think about how to simulate a click event in a test environment. fireEvent from React Testing Library is a useful tool.
• Use screen.getByRole or similar methods to access the button and input elements.
• Consider using expect.mock.calls to verify that the focus method was called with the correct arguments (although in this case, it doesn't matter).
• Focus management can be tricky to test. Carefully consider the order of your assertions.
• The FocusableComponent code is not provided; you are responsible for creating a simple version to test. A minimal example would suffice.