Add TextInput Functional E2E Tests Fabric #14461

anupriya13 · 2025-03-31T11:22:06Z

Description

Type of Change

Functional Tests

Why

What is the motivation for this change? Add a few sentences describing the context and overall goals of the pull request's commits.

Resolves #12458 Partially
Refer https://github.com/microsoft/react-native-windows/pull/12442/files#diff-d9c04bc24954579c02d7935cd457d276cec49204a940c925cde9b147272ec746

What

What changes were made to the codebase to solve the bug, add the functionality, etc. that you specified above.
Test cases should be added to the E2E test app (Fabric) to validate the following functionality scenarios.

### Tasks
- [x] ~~TextInput should be editable when editable set to true.~~
- [x] TextInput should not be editable when editable set to false.
- [x] TextInput should take up to max length input when maxLength set.
- [x] TextInput input should wrap to mulitple lines when multiline set to true.
- [x] TextInput should trigger action upon onBlur.
- [x] TextInput should trigger action upon onChange.
- [x] ~~TextInput should trigger action upon onChangeText.~~
- [x] TextInput should trigger action upon onPressIn.
- [x] TextInput should trigger action upon onPressOut.
- [x] TextInput should trigger action upon onFocus.
- [x] TextInput should trigger action upon onScroll.
- [x] TextInput should trigger action upon onSelectionChange.
- [x] TextInput placeholder text should update upon fast refresh.
- [x] TextInput placeholder text color should update upon fast refresh.
- [x] TextInput should not be editable when readOnly set to true.
- [x] ~~TextInput should be editable when readOnly set to false.~~
- [x] TextInput textAlign should change upon fast refresh.
- [x] TextInput style should change upon fast refresh.
- [x] TextInput should focus upon .focus() call.
- [x] TextInput should lose focus upon .blur() call.
- [x] TextInput text should clear upon clear() all.
- [x] TextInput isFocused() should return true when the TextInput is focused.
- [x] TextInput isFocused() should return false when the TextInput is not focused.
- [x] ~~TextInput value prop should be the text displayed in the TextInput~~
- [x] ~~TextInput should autocapitalize characters when autoCapitalize="characters"~~

Screenshots

Add any relevant screen captures here from before or after your changes.

Testing

If you added tests that prove your changes are effective or that your feature works, add a few sentences here detailing the added test scenarios.
Tested in RNTester

Optional: Describe the tests that you ran locally to verify your changes.

Changelog

Should this change be included in the release notes: indicate yes or no NO

Add a brief summary of the change to use in the release notes for the next release.

Microsoft Reviewers: Open in CodeFlow

TatianaKapos · 2025-04-14T17:59:28Z

This is great! However it's a bit confusing to have passing tests for properties we don't have implemented yet (ie I would think those test shouldn't pass), can we either comment those tests out until we implement those or add comments in the test title that those properties don't work yet?

chiaramooney · 2025-04-14T18:30:18Z

nit: Let's not mark #12458 as resolved because its list of functional tests is not comprehensive. In future we'll want to add more scenarios to this issue to cover all functional behavior for TextInput. The current list of scenarios are just a starting point.

Can you update #12458 with which tests you've added support for after this PR is merged?

anupriya13 · 2025-04-14T18:31:03Z

This is great! However it's a bit confusing to have passing tests for properties we don't have implemented yet (ie I would think those test shouldn't pass), can we either comment those tests out until we implement those or add comments in the test title that those properties don't work yet?

@TatianaKapos the reason pending ones are passing because we are only checking the snapshot dump and no other specific expectations are added for those. We can keep it as it is for now and to improve the quality when those new props are check then the tests can be updated. What do you say?
@chiaramooney Agreed, let's not close the issue as we need to improve missing props cases.

chiaramooney · 2025-04-14T18:35:16Z

packages/e2e-test-app-fabric/test/TextInputComponentTest.test.ts

+  test('TextInput input should wrap to multiple lines when multiline set to true', async () => {
+    const component = await app.findElementByTestID('textinput-multiline');
+    await component.waitForDisplayed({timeout: 5000});
+    const dump = await dumpVisualTree('textinput-multiline');


It doesn't look like this test is actually testing the functional behavior. Do we have multiple lines of text in the textinput? Is there data within the visual tree dumps that shows the textinput is now using multiple lines?

Yes it's defined on line 839 of js file.

Yea I see where the multiline prop is added but it looks like the only text in the textinput is "This TextInput supports multiple lines" which I don't think takes up two lines within the textinput. When we test the multiline prop, we'll want to make sure the textinput is filled with multiple lines of text, so we can see how the control adjusts its visuals when multiline={true}

chiaramooney · 2025-04-14T18:37:42Z

packages/e2e-test-app-fabric/test/TextInputComponentTest.test.ts

+  test('TextInput should trigger action upon onBlur', async () => {
+    const component = await app.findElementByTestID('textinput-onblur');
+    await component.waitForDisplayed({timeout: 5000});
+    const dump = await dumpVisualTree('textinput-onblur');


This and many of the tests below are not actually testing the functionality of the prop. For example, for this test to be accurate the test would need to programmatically focus to the control, move focus away from the control, and then check if the console correctly logged the right statement.

Correct, these are initial layouts for the tests and need refinement as some props are missing too.

Ok! If so, let's adjust this to a draft PR until the tests are ready.

chiaramooney · 2025-04-14T18:40:45Z

packages/e2e-test-app-fabric/test/TextInputComponentTest.test.ts

+    const dump = await dumpVisualTree('textinput-onselectionchange');
+    expect(dump).toMatchSnapshot();
+  });
+  test('TextInput placeholder text should update upon fast refresh', async () => {


This and the other fast refresh tests below are not actually testing the functionality of fast refresh. For these tests to be accurate we would need the test suite to somehow update the source code for the file to be different placeholder text, save the file, and then dump the visual tree for the control.

chiaramooney · 2025-04-14T18:42:27Z

packages/e2e-test-app-fabric/test/TextInputComponentTest.test.ts

+    await component.waitForDisplayed({timeout: 5000});
+
+    // Simulate focusing by setting a value
+    await component.setValue('Focusing TextInput');


It doesn't appear like we are calling .focus() during the test. I see the focus event occurring, but this test should be using the .focus() API to focus the control and not setValue().

chiaramooney · 2025-04-14T18:42:46Z

packages/e2e-test-app-fabric/test/TextInputComponentTest.test.ts

+    const component = await app.findElementByTestID('textinput-blur');
+    await component.waitForDisplayed({timeout: 5000});
+
+    // Simulate focusing by setting a value


Same as comment above.

TatianaKapos · 2025-04-14T18:42:49Z

@anupriya13 My worry is that without a property implemented, there's not a way to verify that these tests are testing the right behavior and then when someone creates that property, they won't add a test because they already see a passing test for it.

For example, onPressIn isn't implemented and I'm not quite sure if that snapshot test here will test that functionality (and if it's not testing any new functionality, we don't really need the cost of an extra test nor can we say it's testing onPressIn).

chiaramooney · 2025-04-14T18:43:55Z

packages/e2e-test-app-fabric/test/TextInputComponentTest.test.ts

+    // Set a value in the TextInput
+    await component.setValue('Some text');
+    // Simulate clearing the text by setting an empty value
+    await component.setValue('');


Same as above. The .Clear() api should be called to clear the textinput and not SetValue(). Otherwise, we aren't actually testing the value of this API.

Let me remove this one then, and will add when implemented

anupriya13 · 2025-04-14T18:49:19Z

@anupriya13 My worry is that without a property implemented, there's not a way to verify that these tests are testing the right behavior and then when someone creates that property, they won't add a test because they already see a passing test for it.

For example, onPressIn isn't implemented and I'm not quite sure if that snapshot test here will test that functionality (and if it's not testing any new functionality, we don't really need the cost of an extra test nor can we say it's testing onPressIn).

@TatianaKapos sure, we can comment out the ones those are not implemented then :) and improve and uncomment them when done.

Add 'TextInputs which have isFocused'

acee931

anupriya13 changed the title ~~[Draft] Add TextInputs Functional Tests~~ [Draft] Add TextInput Functional Tests Mar 31, 2025

microsoft-github-policy-service bot added Area: Fabric Support Facebook Fabric Area: Tests New Architecture Broad category for issues that apply to the RN "new" architecture of Turbo Modules + Fabric labels Mar 31, 2025

anupriya13 self-assigned this Mar 31, 2025

Update tests

9a8c10a

anupriya13 closed this Apr 1, 2025

anupriya13 added 2 commits April 2, 2025 12:49

Update TextInputComponentTest.test.ts

27c4605

Add remaining tests

459a65f

anupriya13 changed the title ~~[Draft] Add TextInput Functional Tests~~ [Draft] Add TextInput Functional E2E Tests Fabric Apr 13, 2025

anupriya13 reopened this Apr 13, 2025

anupriya13 added 2 commits April 13, 2025 11:47

Merge branch 'main' into user/anuverma/textInputFunctionalTests

daa66bf

update snapshots

7b04589

anupriya13 changed the title ~~[Draft] Add TextInput Functional E2E Tests Fabric~~ Add TextInput Functional E2E Tests Fabric Apr 13, 2025

anupriya13 marked this pull request as ready for review April 14, 2025 02:51

anupriya13 requested a review from a team as a code owner April 14, 2025 02:51

anupriya13 requested review from TatianaKapos and chiaramooney April 14, 2025 02:53

anupriya13 mentioned this pull request Apr 14, 2025

[Fabric] Implement the onPressIn property for the fabric implementation of TextInput #14480

Merged

chiaramooney reviewed Apr 14, 2025

View reviewed changes

anupriya13 marked this pull request as draft April 15, 2025 03:06

anupriya13 closed this Apr 18, 2025

Add TextInput Functional E2E Tests Fabric #14461

Add TextInput Functional E2E Tests Fabric #14461

Uh oh!

Conversation

anupriya13 commented Mar 31, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Type of Change

Why

What

Screenshots

Testing

Changelog

Microsoft Reviewers: Open in CodeFlow

Uh oh!

TatianaKapos commented Apr 14, 2025

Uh oh!

chiaramooney commented Apr 14, 2025

Uh oh!

anupriya13 commented Apr 14, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

TatianaKapos commented Apr 14, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

anupriya13 commented Apr 14, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

anupriya13 commented Mar 31, 2025 •

edited

Loading

anupriya13 commented Apr 14, 2025 •

edited

Loading

TatianaKapos commented Apr 14, 2025 •

edited

Loading