Add Functional Tests for TextInput Component #14767
Conversation
microsoft-github-policy-service
bot
added
Area: Fabric
…PressIn/Out events Co-authored-by: anupriya13 <[email protected]>
…blur, isFocused, and value prop tests Co-authored-by: anupriya13 <[email protected]>
Copilot
AI
changed the title
|
@copilot run |
Co-authored-by: anupriya13 <[email protected]>
Completed. Added change file for beachball version tracking in commit 884bc9e. Ready for pipeline execution. Warning Firewall rules blocked me from connecting to one or more addressesI tried to connect to the following addresses, but was blocked by firewall rules:
If you need me to access, download, or install something from one of these locations, you can either:
|
|
/azp run |
|
Azure Pipelines successfully started running 2 pipeline(s). |
|
@copilot fix change file |
Co-authored-by: anupriya13 <[email protected]>
Fixed the change file type from "patch" to "prerelease" since react-native-windows is a prerelease package (version 0.0.0-canary.964). This should resolve the validation error. See commit 6fc46e2. |
|
/azp run |
|
Azure Pipelines successfully started running 2 pipeline(s). |
| @@ -953,4 +953,271 @@ describe('TextInput Tests', () => { | |||
| const dump = await dumpVisualTree('textinput-searchbox'); | |||
| expect(dump).toMatchSnapshot(); | |||
| }); | |||
|
|
|||
| // Additional functional tests for specific task requirements | |||
There was a problem hiding this comment.
@copilot Remove the comment on line 957.
| timeout: 5000, | ||
| timeoutMsg: `Unable to enter text in multiline TextInput.`, | ||
| }, | ||
| ); |
There was a problem hiding this comment.
@copilot This test case is not validating that the text has actually wrapped to multiple lines. I think you need to add another dumpVisualTree call after the text has been set.
There was a problem hiding this comment.
Added dumpVisualTree call after text input to validate multiline text wrapping in commit e06b6db.
| expect(await component.getText()).toBe('test_value'); | ||
| }); | ||
|
|
||
| test('TextInput should focus upon .focus() call', async () => { |
There was a problem hiding this comment.
@copilot This test is not using the .focus() API. To test the functionality of the .focus() API the example should include focusing the control using the .focus API rather than by clicking the control.
There was a problem hiding this comment.
Updated the test to use the .focus() API directly via await (component as any).focus() instead of just clicking the control. See commit 4363ed3.
| }); | ||
|
|
||
| test('TextInput should lose focus upon .blur() call', async () => { | ||
| // Test blur behavior using the uncontrolled component |
There was a problem hiding this comment.
@copilot This test is not using the .blur() API. To test the functionality of the .blur() API the example should include focusing the control using the .blur API rather than by clicking the control.
There was a problem hiding this comment.
Updated the test to use the .blur() API directly via await (component as any).blur() instead of clicking elsewhere to trigger blur. See commit 4363ed3.
| await component.click(); | ||
|
|
||
| // Check if the component shows focused state (style change indicates focus) | ||
| const dump = await dumpVisualTree('uncontrolled-textinput'); |
| await search.click(); | ||
|
|
||
| // Check if the component shows unfocused state | ||
| const dump = await dumpVisualTree('uncontrolled-textinput'); |
Co-authored-by: chiaramooney <[email protected]>
|
@copilot There should not be any tests added to LegacyTextInputTest.test.ts. This is a legacy file that should not be edited. Also run |
|
Just as a heads up, I was blocked by some firewall rules while working on your feedback. Expand below for details. Warning Firewall rules blocked me from connecting to one or more addressesI tried to connect to the following addresses, but was blocked by firewall rules:
If you need me to access, download, or install something from one of these locations, you can either:
|
…e, clean up isFocused tests Co-authored-by: chiaramooney <[email protected]>
Removed all tests from LegacyTextInputTest.test.ts as requested since it's a legacy file that shouldn't be edited. Also attempted to run Warning Firewall rules blocked me from connecting to one or more addressesI tried to connect to the following addresses, but was blocked by firewall rules:
If you need me to access, download, or install something from one of these locations, you can either:
|
This PR adds comprehensive functional tests for the TextInput component in the E2E test app (Fabric) to validate key functionality scenarios as outlined in the issue.
Changes Made
Added 15 new functional tests covering the majority of required TextInput functionality:
Core Property Tests
rewrite_sp_underscore_inputcomponentEvent Handler Tests
textinput-presscomponent with state validationImperative Method Tests
rewrite_clear_buttonuncontrolled-textinputcomponentImplementation Details
TextInputComponentTest.test.tsandLegacyTextInputTest.test.tsTest Coverage Status
✅ Completed (15/24 tests):
❌ Not implemented (technical limitations):
Files Modified
packages/e2e-test-app-fabric/test/TextInputComponentTest.test.ts(+267 lines)packages/e2e-test-app-fabric/test/LegacyTextInputTest.test.ts(+32 lines)The implementation focuses on testable functionality using the existing test infrastructure while maintaining code quality and consistency with the project's testing patterns.
Fixes #12458.