Jest Behavior Verification: Simulating User Interactions

This challenge focuses on verifying the behavior of a hypothetical UserProfile component in a frontend application using Jest. You'll learn how to mock dependencies and assert that specific functions are called with the correct arguments, simulating how a user might interact with the component and ensuring the underlying logic behaves as expected.

Problem Description

You are tasked with writing Jest tests for a UserProfile component. This component has a fetchUserData function that it calls when it mounts to retrieve user information from an API. It also has an updateProfilePicture function that is called when a user clicks a "Change Picture" button.

Your goal is to:

1. Mock the fetchUserData function: Ensure that when the UserProfile component mounts, the fetchUserData function is called exactly once.
2. Mock the updateProfilePicture function: Verify that when the "Change Picture" button is simulated as clicked, the updateProfilePicture function is called with the correct user ID and a new image URL.

You will be provided with a basic UserProfile class and a mock apiService object. You need to write the Jest tests to verify the behavior of UserProfile.

Examples

Example 1: Fetching User Data on Mount

// Assume UserProfile and apiService are defined elsewhere

// In your test file:
// const mockFetchUserData = jest.fn();
// const apiService = { fetchUserData: mockFetchUserData };
// const userProfile = new UserProfile(userId, apiService); // userId is a string like 'user-123'

// Assertion:
expect(mockFetchUserData).toHaveBeenCalledTimes(1);
expect(mockFetchUserData).toHaveBeenCalledWith('user-123');

Explanation: This test verifies that apiService.fetchUserData is called precisely once when a UserProfile instance is created, and that it's called with the correct userId.

Example 2: Updating Profile Picture

// Assume UserProfile and apiService are defined elsewhere

// In your test file:
// const mockUpdateProfilePicture = jest.fn();
// const apiService = {
//   fetchUserData: jest.fn(),
//   updateProfilePicture: mockUpdateProfilePicture
// };
// const userProfile = new UserProfile('user-456', apiService);

// Simulate user clicking the "Change Picture" button
// userProfile.handleChangePicture('http://example.com/new-image.jpg');

// Assertion:
expect(mockUpdateProfilePicture).toHaveBeenCalledTimes(1);
expect(mockUpdateProfilePicture).toHaveBeenCalledWith('user-456', 'http://example.com/new-image.jpg');

Explanation: This test checks that apiService.updateProfilePicture is called once when the handleChangePicture method is invoked, and that it receives the correct user ID and the new image URL.

Constraints

• The UserProfile class and the apiService interface will be provided.
• You must use Jest for writing your tests.
• You should mock the functions within the apiService object.
• Tests should be written in TypeScript.
• Assume a basic userId string (e.g., 'user-abc') will be passed to UserProfile.

Notes

• Consider how to define and import your mock apiService.
• Think about the jest.fn() utility for creating mock functions.
• Pay attention to the different toHaveBeenCalledWith matchers available in Jest.
• The core of this challenge is to verify that the correct functions are being invoked with the expected arguments, rather than testing the actual API calls themselves. This is a fundamental aspect of behavior verification.