Jest Cross-Browser Testing for a Simple UI Component

This challenge focuses on ensuring a basic user interface component behaves consistently across different web browsers using Jest. You'll learn how to simulate different browser environments and verify that your component's output or behavior is not affected by browser-specific quirks. This is crucial for delivering a reliable user experience.

Problem Description

You are tasked with testing a simple TypeScript function that generates HTML for a button element. This function takes an id and text as arguments and should produce a standard HTML <button> tag.

The core of the challenge is to simulate testing this function in different browser environments. While the HTML itself is standard, certain JavaScript APIs or rendering behaviors might subtly differ across browsers. For this exercise, we'll simulate these differences by mocking certain browser-specific global objects or properties within your Jest tests.

Key Requirements:

1. Create a TypeScript function createButtonHtml:
   • This function should accept two string arguments: id and text.
   • It should return a string representing the HTML of a button: <button id="${id}">${text}</button>.
2. Write Jest tests for createButtonHtml:
   • Your tests should verify the correct HTML output for various inputs.
   • Crucially, you need to simulate testing this function in two distinct browser environments:
     • "Modern Browser": Assume standard DOM APIs are available and behave as expected.
     • "Legacy Browser": Simulate a scenario where a specific, common global object or property (e.g., window.localStorage or a specific navigator property) might be undefined or behave differently.
3. Implement Cross-Browser Simulation:
   • Use Jest's mocking capabilities (e.g., jest.spyOn, jest.mock, or directly manipulating global objects) to alter the environment for your tests.
   • Define separate test suites or use describe blocks to group tests for each simulated browser environment.

Expected Behavior:

The createButtonHtml function should always produce the correct HTML string regardless of the simulated browser environment. The tests should demonstrate that even when the environment is modified to mimic legacy browser behavior, the function's core logic remains unaffected and produces the expected output.

Edge Cases to Consider:

• Empty id or text strings.
• Input strings containing special HTML characters (though for this problem, we'll assume basic string inputs without complex HTML injection concerns for the function itself).
• The simulation of the "Legacy Browser" should be robust enough to show that the function does not depend on the mocked element.

Examples

Example 1: Basic Button Creation (Modern Browser)

Input to function: id = "submit-btn", text = "Submit"
Expected Output from function: '<button id="submit-btn">Submit</button>'

Example 2: Button with different text (Modern Browser)

Input to function: id = "cancel-btn", text = "Cancel"
Expected Output from function: '<button id="cancel-btn">Cancel</button>'

Example 3: Empty Input (Modern Browser)

Input to function: id = "", text = ""
Expected Output from function: '<button id=""> </button>'

Example 4: Button Creation (Simulated Legacy Browser) Assume window.someLegacyFeature is not present or behaves differently in this simulated environment.

Input to function: id = "save-data", text = "Save"
Expected Output from function: '<button id="save-data">Save</button>'

Explanation: Even though the test environment is modified to simulate a legacy browser by making window.someLegacyFeature undefined, the createButtonHtml function, which doesn't use window.someLegacyFeature, should still correctly generate the HTML.

Constraints

• The createButtonHtml function must be written in TypeScript.
• All tests must be written using Jest and TypeScript.
• You must use Jest's mocking features to simulate different browser environments.
• Avoid relying on actual browser-specific APIs within the createButtonHtml function itself. The function's logic should be pure and independent of the browser environment.
• The "Legacy Browser" simulation should involve altering a global JavaScript object or property that the component might hypothetically interact with, but in this case, the component should not interact with.

Notes

• Consider using describe.each or separate describe blocks for your cross-browser test suites.
• For simulating a "Legacy Browser," you can choose any common global object or property that is generally available in modern browsers but might be absent or different in older ones. For instance, you could mock window.navigator.userAgent or window.localStorage by setting them to undefined or a specific value for the duration of a test block.
• The goal is to demonstrate that your function is robust and its output is not dependent on these browser-specific features.
• Success is defined by passing all Jest tests for both simulated browser environments, proving the createButtonHtml function's consistent output.