Fix macOS UI issue by introducing grouped mode to load specific section in test app

[baljesingh]

Description

This PR addresses a long-standing macOS UI testing issue caused by the Mac version of the SDK being unable to test against the latest TeamsJS version. The problem arises from the large number of visible sections and limitations of XCUI applications, which do not display sections during UI tests beyond a certain threshold. To resolve this, we introduce a grouped mode that loads only specific sections in the test app and along with that we also add the groupedMode parameter in the url. We can access the specific section using ?groupedMode=<section_name>.

Main changes in the PR:

1. Introduction of Grouped Mode: Added a button to toggle between default mode (showing all sections) and grouped mode, which allows loading specific sections dynamically.
2. Dynamic Section Loading: Refactored the component structure to create a list of sections as objects, enabling conditional rendering based on the selected mode.
3. State Management Enhancements: Introduced state variables to track the visibility of sections and manage the toggle for grouped mode.
4. User Interface Improvements: Enhanced the user interface by adding buttons for each section in grouped mode, allowing users to show or hide sections as needed.
5. ?groupedMode param in URL: Added ?groupedMode param in a URL to open specific section. This will optimize the UI testing performance.

These changes improve UI performance in grouped mode and address the limitations of the mac SDK during UI testing. Additionally, this approach will save some time in UI testing, as clicking two buttons (Switch to Grouped Mode + Select Section) is significantly faster than scrolling down to find the desired section.

Back Compatibility:

This change will not affect the existing UI test flow for any other SDKs. To utilize the new grouped mode feature, the respective SDK must explicitly switch to this mode.

Validation

Validation performed:

1. Performed locally and it's working fine.

Unit Tests added:

Unit tests are required for all changes. If no unit tests were added as part of this change, please explain why they aren't necessary.

N/A

End-to-end tests added:

N/A

Additional Requirements

Change file added:

Ensure the change file meets the formatting requirements.

No change files are needed

Related PRs:

Remove this section if n/a

Next/remaining steps:

Changes in Mac SDK UI Test

[maglims]

Looks good to me. Thanks for making this update and unblocking macOS tests.

[jekloudaMSFT]

This is a great change, thanks for doing this! Would it be possible to automatically enter grouped mode based on a query parameter or something? Like if I go to https://localhost:4000?groupedMode=authentication and then the app would load into the authentication grouped mode view with just the authentication section visible? I think that would save us a couple clicks on every UI test, yeah?

[jadahiya-MSFT]

This is a great change, thanks for doing this! Would it be possible to automatically enter grouped mode based on a query parameter or something? Like if I go to https://localhost:4000?groupedMode=authentication and then the app would load into the authentication grouped mode view with just the authentication section visible? I think that would save us a couple clicks on every UI test, yeah?

@jekloudaMSFT this is definitely possible (we did something similar for back compat mode), maybe we should create a backlog work item to track this.

[baljesingh]

This is a great change, thanks for doing this! Would it be possible to automatically enter grouped mode based on a query parameter or something? Like if I go to https://localhost:4000?groupedMode=authentication and then the app would load into the authentication grouped mode view with just the authentication section visible? I think that would save us a couple clicks on every UI test, yeah?

Thanks. This is definitely possible, and it was also my initial proposal to fix the Mac issue. However, I found it challenging to make it work because the UI test uses the URL defined in the app's definition. I'm not sure how to pass additional parameters in URL at runtime. Is this possible in Android?

[baljesingh]

This is a great change, thanks for doing this! Would it be possible to automatically enter grouped mode based on a query parameter or something? Like if I go to https://localhost:4000?groupedMode=authentication and then the app would load into the authentication grouped mode view with just the authentication section visible? I think that would save us a couple clicks on every UI test, yeah?

@jekloudaMSFT this is definitely possible (we did something similar for back compat mode), maybe we should create a backlog work item to track this.

Hi @jekloudaMSFT

This is a great change, thanks for doing this! Would it be possible to automatically enter grouped mode based on a query parameter or something? Like if I go to https://localhost:4000?groupedMode=authentication and then the app would load into the authentication grouped mode view with just the authentication section visible? I think that would save us a couple clicks on every UI test, yeah?

@jekloudaMSFT this is definitely possible (we did something similar for back compat mode), maybe we should create a backlog work item to track this.

@jadahiya-MSFT, @jekloudaMSFT I have included this change as well and now we can access a specific section using ?groupedMode= Please let me know if you have any concerns.