Build visual tree compare tests that iterate over RNTester pages

[chrisglein]

@ddalp built out some visual tree comparison test infrastructure recently: #3754 We're going to use that more as we do new feature work, but we have a lot of test debt in everything we built before we had this or the general E2E test infrastructure. One thing we can do is take the existing content in RNTester and enumerate over it, grabbing a visual tree dump as we go. Even if it's just static (no interaction with the page), that's test coverage we don't have. Seems like a good way to bolster our test coverage.

Note that not all of the RNTester pages are testing ViewManagers. We should limit this task to only the RNTester pages that cover ViewManagers and their properties.

List of ViewManagers we want to cover - examples files in brackets:

Higher Priority / In Progress

• [x] Button
• [ ] FlyoutVM (FlyoutExample)
• [ ] ImageVM (ImageExample)
• [ ] PopupVM (PopupExample)
• [x] ScrollVM (several pages: eg. ScrollViewExample)
• [x] SwitchVM (switchexample)
• [x] TextInputVM (textinputexample)
• [x] TextVM, VirtualTextVM, RawTextVM (textexample)
• [ ] ViewVM
• [x] Pressable

Lower Priority

• [ ] ActivityIndicatorVM (activityindicatorExample)
• [ ] FrameworkElemVM
• [ ] GlyphVM (GlyphExample)
• [ ] RefreshControlManager (refreshcontrolexample)
• [ ] RootVM

[chrisglein]

@kmelmon Is this issue providing any value beyond what you're already doing? Do you want me to dupe it to one of your issues or assign it over?

[kmelmon]

I'll take this. I don't think it's a dupe so keeping it open for now.

[kmelmon]

Alex has done some prototype level work on this:

Here are the changes I made that but haven’t merged that I made:

• v1: treedump-able playground/RNTester: https://github.com/microsoft/react-native-windows/pull/4699
• v2 (e2etest): https://github.com/asklar/react-native-windows/tree/e2eRNTester

here is the treedump library I wrote: https://github.com/asklar/XamlTreeDump

and nuget: https://www.nuget.org/packages/XamlTreeDump/

[kmelmon]

This is now part of https://github.com/microsoft/react-native-windows/projects/39 and depends directly on #6343

[rectified95]

Updated issue description with the list of view managers we need to cover.

[rectified95]

Plenty of tests for Text, other VMs to do listed in description.

[chrisglein]

Notes from planning poker

Issue lists ~12 view managers that were indicated as not tested. Goal is that we navigate to each of these tests and get a visual compare dump. This is not functional testing, it's just a bare bones "load the page and catch if it changes/crashes". Should it be structured as one test or individual tests for each page (assumption being that it grows over time?). How do we know what our coverage % is?

[NickGerleman]

Dumping each page would not be a viable solution. The test UI changes frequently, and there are elements not deterministic.

[chrisglein]

I feel like this is superceded by #11422. @chiaramooney do you agree? Can we close this?