@fluentui-react-native/tester 0.109.0 → 0.110.0

package/src/E2E/README.md

@@ -1,231 +0,0 @@
-# E2E Testing Overview
-
-**There is currently an Appium issue with NPM v8.19.2. Please use an older version of NPM**
-
-## Win32/UWP Prerequisites
-
-- [Node.js](https://nodejs.org/en/download/) - Version 10.19 or higher.
-- [React Native Windows Development Dependencies](https://microsoft.github.io/react-native-windows/docs/rnw-dependencies)
-  - **NOTE:** Please make sure you grab all of the items listed there and the appropriate versions.
-- [WinAppDriver](https://github.com/microsoft/WinAppDriver) - Version 1.1
-- Enable [_Developer Mode_](https://docs.microsoft.com/en-us/windows/uwp/get-started/enable-your-device-for-development) in Windows settings
-
-### UWP Additional Prerequisites
-
-- [UWP Prerequisites](../../../fluent-tester/docs/windows.md)
-
-## MacOS Prerequisites
-
-- MacOS 10.15 or later
-- XCode 12 or later should be installed
-- XCode Helper app should be enabled for Accessibility access. The app itself is usually found at: _/Applications/Xcode.app/Contents/Developer/Platforms/MacOSX.platform/Developer/Library/Xcode/Agents/Xcode Helper.app_.
-
-In order to enable Accessibility access, simply open the parent folder in finder:
-_open /Applications/Xcode.app/Contents/Developer/Platforms/MacOSX.platform/Developer/Library/Xcode/Agents/_
-and drag & drop the **XCode Helper** app to **Security & Privacy -> Privacy -> Accessibility** list of your **System Preferences**. This action must only be done once.
-
-## E2E Project Structure
-
-- E2E - The root E2E testing folder containing test components and their respective platform-specific page objects and spec documents.
-- reports - Each platform folder (apple, win32, windows) contains this folder that saves the test reports from Appium/WebDriverIO.
-- wdio.conf.js - Each platform folder contains this file. It's the configuration file for WebDriverIO, which also configures Appium, WinAppDriver, and Jasmine parameters.
-
-# Running E2E Tests
-
-## Win32 Steps
-
-1. Install node packages, build JS
-   - C:\repo> `cd fluentui-react-native`
-   - C:\repo\fluentui-react-native> `yarn`
-   - C:\repo\fluentui-react-native> `yarn build`
-2. Bundle the test app (pick specific platform you want to test, we'll use win32)
-   - C:\repo\fluentui-react-native>`cd apps\win32`
-   - C:\repo\fluentui-react-native\apps\win32> `yarn bundle`
-3. Run E2E tests
-   - C:\repo\fluentui-react-native\apps\win32> `yarn e2etest`
-
-## UWP Steps
-
-1. Follow step #1 from "Win32 Steps" section above.
-2. Start the server
-   - C:\repo\fluentui-react-native> `cd apps\windows`
-   - C:\repo\fluentui-react-native\apps\windows> `yarn start`
-3. Open a new command prompt and run the E2E tests
-   - C:\repo\fluentui-react-native\apps\windows> `yarn e2etest`
-
-_Note: It could take up to a minute to load the test app with WebDriverIO, don't panic, the tests will run :)_
-
-## MacOS Steps
-
-1. Follow step #1 from "Win32 Steps" section above.
-2. POD Install
-   - C:\repo\fluentui-react-native> `cd apps\fluent-tester\macos`
-   - C:\repo\fluentui-react-native\apps\fluent-tester\macos> `pod install`
-3. Start the server
-   - C:\repo\fluentui-react-native> `cd apps\fluent-tester`
-   - C:\repo\fluentui-react-native\apps\fluent-tester> `yarn start`
-4. Open a new command prompt and run the E2E tests
-   - C:\repo\fluentui-react-native\apps\fluent-tester> `yarn e2etest:macos`
-
-_Note: It could take up to a minute to load the test app with WebDriverIO, don't panic, the tests will run :)_
-
-# Authoring E2E Test
-
-You just added a new component to FURN... Awesome! Now we need to make sure we have proper regression testing to make sure we put the safest product out there (don't worry, it's not as hard as it sounds). Here's what we have to do:
-
-## Create New E2E Testing Folder for the New Component
-
-All our E2E testing logic exists in _/apps/fluent-tester/src/E2E/_.
-
-Testing is split-up on a **per-component** basis. Each component's testing story is made up of two parts - a **Page Object** and a **Spec Document**.
-
-Example File Structure:
-
--> Checkbox Folder
-
-----> CheckboxPageObject.ts
-
-----> CheckboxSpec.ts
-
-Please follow this structure for the new component.
-
-## Create New Constants
-
-The way we our automation framework interacts with our test app is by selecting UI components based on a string value. For this, we have a **consts.ts** file for each component that defines these values.
-You'll want to make one for your component under **apps/fluent-tester/src/TestComponents/_your-component_/consts.ts**.
-
-**You can simply copy/paste a _consts.ts_ file from another component, and just change the name of the component in the const names and the values.**
-
-**This is really important!**
-
-There are a **two specific** naming conventions we need to follow to keep in-sync with the Native side.
-
-1. The button that navigates to each test page - **Homepage\_'componentName'\_Button**
-2. The test page itself that lets us validate if the page loaded - **'componentName'\_TestPage**
-
-Now, what are Page Objects and Spec Documents?
-
-## Page Objects
-
-A page object is an object-oriented class. The purpose of this class is to act as an interface for you to interact with a page of your testing app. In layman's terms, **it selects UI elements and performs some functions on them to obtain the scenario you want.**
-
-For each component/scenario you want to test, you will have a page object class for it.
-
-Page Object is a design pattern which has become popular in test automation for enhancing test maintenance and reducing code duplication. A [page object](https://webdriver.io/docs/pageobjects.html) is an object-oriented class that serves as an interface to a page of you testing app. The tests then use the methods of this Page Object whenever they need to interact with the UI of that page.
-The benefit is that if the UI changes for the test page, the tests themselves don’t need to change, only the code within the page object needs to change.
-
-Page Objects should be put in apps/fluent-tester/src/E2E/_ *ComponentToBeTested* _/pages/.
-
-In most cases, you can copy/paste ButtonPageObject.ts and simply change all instances of Button to your new component.
-
-```
-// CheckboxPageObject.win.ts
-class CheckboxPageObject extends BasePage {
-  // This function clicks on the Checkbox component you selected below
-  toggleCheckbox() {
-    this._testPage.click();
-  }
-
-  // This function selects a UI element with the prop `testID = CHECKBOX_TESTPAGE`
-  get _checkboxComponent() {
-    return By(CHECKBOX_TESTPAGE);
-  }
-}
-
-export default new CheckboxPageObject();
-```
-
-### More on Page Objects (Technical Information)
-
-Each page object should extend BasePage.ts. The BasePage class contains a baseline set of methods/variables that all page objects should have. This allows us to write the most efficient code possible.
-
-For example, a common task we want to perform is selecting a UI element and getting its accessibilityRole attribute. Instead of doing this in all 20 page objects for each component, we write it once in the BasePage, and have the 20 page objects extend it. Enables code-reuse and allows for easy comprehension.
-
-### **Selectors**
-
-- In order for a Page Object to access a component from the test page, you must use [selectors](https://webdriver.io/docs/selectors.html). The WebDriver Protocol provides several selector strategies to query an element.
-
-- If [testID](https://reactnative.dev/docs/next/view#testid) is specified in React Native app for Windows, the locator strategy should choose accessibility id.
-  A unique accessiblity id/testID per Window is recommended for React Native Windows E2E testing when authoring the test app and test cases.
-
-- To use this, we must add a prop to our component or UI element in question called “testID”. In our test page, set the “testID” for the component, and we can then select it in our Page Object using the imported **_By_** method above from a base class.
-
-## Setup your Component Test Page in the Test App
-
-In order to test the component, we need a test page in FURNs test app. Once you create that, you'll want to create a separate file for E2E testing (see pattern used by all other controls). Create
-an example and set `testID = {your_components_constant}` on your new control. Now, our automation framework can select this component using the constant you passed in to `testID`.
-
-## Add to NavigateAppPage.ts
-
-This page object is responsible for navigating through the app to each test page. Here, you'll want to add integration for your new component. (Easily reproducible by looking at other components in the file).
-
-**If testID doesn't exist on your component, simply add it to your component's \_types.ts\_ file.**
-
-## Write a Test Spec
-
-The spec document is where the tests will be written. We use [Jasmine](https://jasmine.github.io/), an open-sourced testing framework for JavaScript.
-The spec document imports a page object and uses it to manipulate the UI and uses 'expect' and other Jasmine statements to ensure proper functionality.
-
-Spec documents should be put in apps/fluent-tester/src/E2E/\_ _ComponentToBeTested_ /specs/.
-
-```
-describe('Click on each test page and check if it renders', function() {
-  it('Checkbox Test Page', () => {
-    NavigateAppPage.clickAndGoToCheckboxPage();
-    expect(CheckboxPageObject.isPageLoaded()).toBeTruthy();
-  });
-});
-```
-
-# Debugging E2E Failures (Locally)
-
-If one tests fails, it will cause every subsequent test to fail as well. Due to this structure, if you get a failing E2E run, you should find the **first** failing test and focus on fixing that one.
-
-Having a clear and concise report on testing failures is key in efficient debugging. We're utilizing two report generators:
-
-1. **Spec Reporter** - Low overhead, easy to read, automatically runs with E2E testing. However, less information and less reliable.
-
-2. **Allure Reporter** - Creates in-depth reports with key information about each test. Must have Java 1.8 downloaded to create reports and requires running additional script after E2E testing is complete.
-
-## Using Spec Reporter
-
-You can view the spec report right as E2E testing is finished. It shows the failing tests and a brief explanation of what went wrong. However, in some cases when a redbox error occurs (mostly in Win32), these messages and report will not exist. This is because the FluentTester app becomes a non-responsive window, and WebDriverIO cannot close the window, which leaves the spec reporter in a bad state. In this case, I would recommend using the Allure Reporter.
-
-In the example below, the SVG test is the one failing the run, and at the bottom, you can see an error message.
-
-![E2E Error Debugging](../../../../assets/E2E/E2E_spec_reporter.png)
-
-When running E2E locally, after failing an E2E run, you will get a screenshot of the error in /errorShots/ of the platform you tested.
-
-## Using Allure Reporter
-
-Allure Framework is a flexible, lightweight multi-language test report tool that not only shows a very concise representation of what have been tested in a neat web report form, but allows everyone participating in the development process to extract maximum of useful information from everyday execution of tests.
-
-After E2E testing runs, allure creates a folder of XML files with all relevant information from the tests. In order to generate the report, you need to run the following command:
-
-- `yarn generate-report`
-
-This will bundle all the generated information and create a report for you to read.
-
-# Debugging E2E Failures (CI Pipeline)
-
-When an E2E test run fails within our CI, crucial information is output to Azure-Pipelines to help you debug the failure. Follow these steps:
-
-1. On the PR page, navigate to the "Checks" tab, ensure you've selected the "PR" tab on the left, and press "View more details on Azure Pipelines" at the bottom. ![E2E_Debugging_Step_1](../../../../assets/E2E/E2E_Debugging_Step_1.png)
-
-2. Click on the "# published" section. ![E2E_Debugging_Step_2](../../../../assets/E2E/E2E_Debugging_Step_2.png)
-
-3. Here, you have crucial information to help you debug the problem.
-
-   - The bottom files (green) are screenshots of the failing tests. The first one from the top (in this case, Svg-Test-Page), is the test failing the whole run. This is the one you're focus should be on.
-
-   - The middle file (pink) is the Appium output file. This contains more in-depth information on each test, including possible failures with WebDriverIO or the driver being used.
-
-   - The top folder (blue) is the Allure reporter output. In order to generate the report, you must:
-
-     1. Download the folder and unzip it
-
-     2. Navigate to it's location within your cmd, and type:
-        - C:\pathToFolder\allure-report\E2E_win32_Dump> `allure open`
-
-![E2E_Debugging_Step_3](../../../../assets/E2E/E2E_Debugging_Step_3.png)

package/src/E2E/RadioGroup/pages/RadioGroupPageObject.ts

@@ -1,121 +0,0 @@
-import {
-  RADIOGROUP_TESTPAGE,
-  RADIOGROUP_TEST_COMPONENT,
-  RADIOGROUP_NO_A11Y_LABEL_COMPONENT,
-  HOMEPAGE_RADIOGROUP_BUTTON,
-  FIRST_RADIO_BUTTON,
-  SECOND_RADIO_BUTTON,
-  THIRD_RADIO_BUTTON,
-  FOURTH_RADIO_BUTTON,
-} from '../../../TestComponents/RadioGroup/consts';
-import { BasePage, By } from '../../common/BasePage';
-
-/* This enum gives the spec file an EASY way to interact with SPECIFIC UI elements on the page.
- * The main RadioGroup we are testing has FOUR RadioButtons. The spec file will
- * import this enum to easily write tests using these 4 radio buttons. */
-export const enum RadioButtonSelector {
-  First = 0, // this._firstRadioButton
-  Second, // this._secondRadioButton
-  Third, // this._thirdRadioButton
-  Fourth, // this._fourthRadioButton
-}
-
-class RadioGroupPage extends BasePage {
-  /******************************************************************/
-  /**************** UI Element Interaction Methods ******************/
-  /******************************************************************/
-  // Get RadioButton's accessibilityLabel
-  async getRBAccessibilityLabel(radioButtonSelector: RadioButtonSelector): Promise<string> {
-    return await (await this.getRadioButton(radioButtonSelector)).getAttribute('Name');
-  }
-
-  /* This resets the RadioGroup selection by clicking/selecting the 1st RadioButton in the RadioGroup.
-   * Useful in beforeEach() hooks to reset the RadioGroup before additional tests */
-  async resetRadioGroupSelection(): Promise<void> {
-    await (await this._firstRadioButton).click();
-  }
-
-  async getRadioButtonAccesibilityRole(): Promise<string> {
-    return await (await this._firstRadioButton).getAttribute('ControlType');
-  }
-
-  async isRadioButtonSelected(radioButtonSelector: RadioButtonSelector): Promise<boolean> {
-    return await (await this.getRadioButton(radioButtonSelector)).isSelected();
-  }
-
-  async clickRadioButton(radioButtonSelector: RadioButtonSelector): Promise<void> {
-    await (await this.getRadioButton(radioButtonSelector)).click();
-  }
-
-  async waitForRadioButtonSelected(radioButtonSelector: RadioButtonSelector, timeout?: number): Promise<void> {
-    await browser.waitUntil(async () => await this.isRadioButtonSelected(radioButtonSelector), {
-      timeout: timeout ?? this.waitForUiEvent,
-      timeoutMsg: 'RadioButton was not selected correctly.',
-      interval: 1000,
-    });
-  }
-
-  /* Sends a Keyboarding command on a specific UI element */
-  async sendKey(key: string, radioButtonSelector: RadioButtonSelector): Promise<void> {
-    await (await this.getRadioButton(radioButtonSelector)).addValue(key);
-  }
-
-  /* Returns the correct WebDriverIO element from the RadioButton Selector */
-  async getRadioButton(radioButtonSelector: RadioButtonSelector): Promise<WebdriverIO.Element> {
-    if (radioButtonSelector == RadioButtonSelector.First) {
-      return await this._firstRadioButton;
-    } else if (radioButtonSelector == RadioButtonSelector.Second) {
-      return await this._secondRadioButton;
-    } else if (radioButtonSelector == RadioButtonSelector.Third) {
-      return await this._thirdRadioButton;
-    } else {
-      return await this._fourthRadioButton;
-    }
-  }
-
-  /*****************************************/
-  /**************** Getters ****************/
-  /*****************************************/
-  get _testPage() {
-    return By(RADIOGROUP_TESTPAGE);
-  }
-
-  get _pageName() {
-    return RADIOGROUP_TESTPAGE;
-  }
-
-  get _primaryComponent() {
-    return By(RADIOGROUP_TEST_COMPONENT);
-  }
-
-  get _secondaryComponent() {
-    return By(RADIOGROUP_NO_A11Y_LABEL_COMPONENT);
-  }
-
-  get _pageButton() {
-    return By(HOMEPAGE_RADIOGROUP_BUTTON);
-  }
-
-  /***************/
-  /* RadioButton *
-  /**************/
-
-  /* The first RadioGroup has 4 radio buttons, all listed below */
-  get _firstRadioButton() {
-    return By(FIRST_RADIO_BUTTON);
-  }
-
-  get _secondRadioButton() {
-    return By(SECOND_RADIO_BUTTON);
-  }
-
-  get _thirdRadioButton() {
-    return By(THIRD_RADIO_BUTTON);
-  }
-
-  get _fourthRadioButton() {
-    return By(FOURTH_RADIO_BUTTON);
-  }
-}
-
-export default new RadioGroupPage();

package/src/E2E/RadioGroup/specs/RadioGroup.spec.macos.ts

@@ -1,21 +0,0 @@
-import NavigateAppPage from '../../common/NavigateAppPage';
-import RadioGroupPageObject from '../pages/RadioGroupPageObject';
-import { PAGE_TIMEOUT, BOOT_APP_TIMEOUT } from '../../common/consts';
-
-// Before testing begins, allow up to 60 seconds for app to open
-describe('RadioGroup/RadioButton Testing Initialization', function () {
-  it('Wait for app load', async () => {
-    await NavigateAppPage.waitForPageDisplayed(BOOT_APP_TIMEOUT);
-    await expect(await NavigateAppPage.isPageLoaded()).toBeTruthy();
-  });
-
-  it('Click and navigate to RadioGroup test page', async () => {
-    await RadioGroupPageObject.waitForButtonDisplayed(PAGE_TIMEOUT);
-
-    /* Click on component button to navigate to test page */
-    await NavigateAppPage.clickAndGoToRadioGroupPage();
-    await RadioGroupPageObject.waitForPageDisplayed(PAGE_TIMEOUT);
-
-    await expect(await RadioGroupPageObject.isPageLoaded()).toBeTruthy();
-  });
-});

package/src/E2E/RadioGroup/specs/RadioGroup.spec.win.ts

@@ -1,110 +0,0 @@
-import NavigateAppPage from '../../common/NavigateAppPage';
-import RadioGroupPageObject, { RadioButtonSelector } from '../pages/RadioGroupPageObject';
-import { ComponentSelector } from '../../common/BasePage';
-import { RADIOBUTTON_A11Y_ROLE, RADIOGROUP_A11Y_ROLE, PAGE_TIMEOUT, BOOT_APP_TIMEOUT, Keys } from '../../common/consts';
-import {
-  RADIOGROUP_ACCESSIBILITY_LABEL,
-  RADIOGROUP_TEST_COMPONENT_LABEL,
-  FIRST_RADIO_BUTTON_ACCESSIBILITY_LABEL,
-  SECOND_RADIO_BUTTON_LABEL,
-} from '../../../TestComponents/RadioGroup/consts';
-
-// Before testing begins, allow up to 60 seconds for app to open
-describe('RadioGroup/RadioButton Testing Initialization', function () {
-  it('Wait for app load', async () => {
-    await NavigateAppPage.waitForPageDisplayed(BOOT_APP_TIMEOUT);
-    await expect(await NavigateAppPage.isPageLoaded()).toBeTruthy(NavigateAppPage.ERRORMESSAGE_APPLOAD);
-  });
-
-  it('Click and navigate to RadioGroup test page', async () => {
-    /* Click on component button to navigate to test page */
-    await NavigateAppPage.clickAndGoToRadioGroupPage();
-    await RadioGroupPageObject.waitForPageDisplayed(PAGE_TIMEOUT);
-
-    await expect(await RadioGroupPageObject.isPageLoaded()).toBeTruthy(RadioGroupPageObject.ERRORMESSAGE_PAGELOAD);
-    await expect(await RadioGroupPageObject.didAssertPopup()).toBeFalsy(RadioGroupPageObject.ERRORMESSAGE_ASSERT); // Ensure no asserts popped up
-  });
-});
-
-describe('RadioGroup/RadioButton Accessibility Testing', () => {
-  /* Scrolls and waits for the RadioGroup to be visible on the Test Page */
-  beforeEach(async () => {
-    await RadioGroupPageObject.scrollToTestElement();
-    await RadioGroupPageObject.waitForPrimaryElementDisplayed(PAGE_TIMEOUT);
-  });
-
-  it("Validate RadioGroup's accessibilityRole is correct", async () => {
-    await expect(await RadioGroupPageObject.getAccessibilityRole()).toEqual(RADIOGROUP_A11Y_ROLE);
-    await expect(await RadioGroupPageObject.didAssertPopup()).toBeFalsy(RadioGroupPageObject.ERRORMESSAGE_ASSERT);
-  });
-
-  it("Validate RadioButton's accessibilityRole is correct", async () => {
-    await expect(await RadioGroupPageObject.getRadioButtonAccesibilityRole()).toEqual(RADIOBUTTON_A11Y_ROLE);
-    await expect(await RadioGroupPageObject.didAssertPopup()).toBeFalsy(RadioGroupPageObject.ERRORMESSAGE_ASSERT);
-  });
-
-  it('RadioGroup - Set accessibilityLabel', async () => {
-    await expect(await RadioGroupPageObject.getAccessibilityLabel(ComponentSelector.Primary)).toEqual(RADIOGROUP_ACCESSIBILITY_LABEL);
-    await expect(await RadioGroupPageObject.didAssertPopup()).toBeFalsy(RadioGroupPageObject.ERRORMESSAGE_ASSERT);
-  });
-
-  it('RadioGroup - Do not set accessibilityLabel -> Default to RadioGroup label', async () => {
-    await expect(await RadioGroupPageObject.getAccessibilityLabel(ComponentSelector.Secondary)).toEqual(RADIOGROUP_TEST_COMPONENT_LABEL);
-    await expect(await RadioGroupPageObject.didAssertPopup()).toBeFalsy(RadioGroupPageObject.ERRORMESSAGE_ASSERT);
-  });
-
-  it('RadioButton - Set accessibilityLabel', async () => {
-    await expect(await RadioGroupPageObject.getRBAccessibilityLabel(RadioButtonSelector.First)).toEqual(
-      FIRST_RADIO_BUTTON_ACCESSIBILITY_LABEL,
-    );
-    await expect(await RadioGroupPageObject.didAssertPopup()).toBeFalsy(RadioGroupPageObject.ERRORMESSAGE_ASSERT);
-  });
-
-  it('RadioButton - Do not set accessibilityLabel -> Default to RadioButton label', async () => {
-    await expect(await RadioGroupPageObject.getRBAccessibilityLabel(RadioButtonSelector.Second)).toEqual(SECOND_RADIO_BUTTON_LABEL);
-    await expect(await RadioGroupPageObject.didAssertPopup()).toBeFalsy(RadioGroupPageObject.ERRORMESSAGE_ASSERT);
-  });
-});
-
-describe('RadioGroup Functional Testing', async () => {
-  /* This resets the RadioGroup state by clicking/selecting the 1st RadioButton in the RadioGroup */
-  beforeEach(async () => {
-    await RadioGroupPageObject.scrollToTestElement();
-    await RadioGroupPageObject.waitForPrimaryElementDisplayed(PAGE_TIMEOUT);
-
-    await RadioGroupPageObject.resetRadioGroupSelection();
-  });
-
-  it('Click on a RadioButton and ensure it changes state from unselected -> selected', async () => {
-    /* Validate the RadioButton is not initially selected */
-    await expect(await RadioGroupPageObject.isRadioButtonSelected(RadioButtonSelector.Second)).toBeFalsy();
-
-    /* Click on the RadioButton to select it */
-    await RadioGroupPageObject.clickRadioButton(RadioButtonSelector.Second);
-    await RadioGroupPageObject.waitForRadioButtonSelected(RadioButtonSelector.Second, PAGE_TIMEOUT);
-
-    /* Validate the RadioButton is selected */
-    await expect(await RadioGroupPageObject.isRadioButtonSelected(RadioButtonSelector.Second)).toBeTruthy();
-    await expect(await RadioGroupPageObject.didAssertPopup()).toBeFalsy(RadioGroupPageObject.ERRORMESSAGE_ASSERT);
-  });
-
-  it('Keyboard to RadioButton and check for Selection state', async () => {
-    // Presses the ArrowDown key while the first (A) RadioButton is selected
-    await RadioGroupPageObject.sendKey(Keys.ARROW_DOWN, RadioButtonSelector.First);
-    await RadioGroupPageObject.waitForRadioButtonSelected(RadioButtonSelector.Second, 5000);
-
-    /* Validate the RadioButton is selected */
-    await expect(await RadioGroupPageObject.isRadioButtonSelected(RadioButtonSelector.Second)).toBeTruthy();
-    await expect(await RadioGroupPageObject.didAssertPopup()).toBeFalsy(RadioGroupPageObject.ERRORMESSAGE_ASSERT);
-  });
-
-  it("Keyboard to DISABLED RadioButton and validate it doesn't get selected", async () => {
-    // Presses the ArrowDown key while the second (B) RadioButton is selected
-    await RadioGroupPageObject.sendKey(Keys.ARROW_DOWN, RadioButtonSelector.Second);
-    await RadioGroupPageObject.waitForRadioButtonSelected(RadioButtonSelector.Fourth, 5000); // It should skip RadioButton 3 since it is disabled
-
-    /* Validate the RadioButton is selected */
-    await expect(await RadioGroupPageObject.isRadioButtonSelected(RadioButtonSelector.Fourth)).toBeTruthy();
-    await expect(await RadioGroupPageObject.didAssertPopup()).toBeFalsy(RadioGroupPageObject.ERRORMESSAGE_ASSERT);
-  });
-});

package/src/E2E/RadioGroupExperimental/pages/RadioGroupExperimentalPageObject.ts

@@ -1,142 +0,0 @@
-import {
-  RADIO_GROUP_EXPERIMENTAL_TESTPAGE,
-  RADIOGROUP_TEST_COMPONENT,
-  RADIOGROUP_NO_A11Y_LABEL_COMPONENT,
-  HOMEPAGE_RADIO_GROUP_EXPERIMENTAL_BUTTON,
-  FIRST_RADIO,
-  SECOND_RADIO,
-  THIRD_RADIO,
-  FOURTH_RADIO,
-  FIFTH_RADIO,
-} from '../../../TestComponents/RadioGroupExperimental/consts';
-import { BasePage, By } from '../../common/BasePage';
-import { Attribute, AttributeValue } from '../../common/consts';
-
-/* This enum gives the spec file an EASY way to interact with SPECIFIC UI elements on the page.
- * The main RadioGroup we are testing has FOUR Radios. The spec file will
- * import this enum to easily write tests using these 4 radio buttons. */
-export const enum RadioSelector {
-  First = 0, // this._firstRadio
-  Second, // this._secondRadio
-  Third, // this._thirdRadio
-  Fourth, // this._fourthRadio
-  Fifth, // this._fifthRadio
-}
-
-class RadioGroupExperimentalPage extends BasePage {
-  /******************************************************************/
-  /**************** UI Element Interaction Methods ******************/
-  /******************************************************************/
-  // Get Radio's accessibilityLabel
-  async getRBAccessibilityLabel(radioSelector: RadioSelector): Promise<string> {
-    return await (await this.getRadio(radioSelector)).getAttribute('Name');
-  }
-
-  /* This resets the RadioGroup selection by clicking/selecting the 1st Radio in the RadioGroup.
-   * Useful in beforeEach() hooks to reset the RadioGroup before additional tests */
-  async resetRadioGroupSelection(): Promise<void> {
-    await (await this._firstRadio).click();
-  }
-
-  async getRadioAccesibilityRole(): Promise<string> {
-    return await (await this._firstRadio).getAttribute('ControlType');
-  }
-
-  async isRadioSelected(radioSelector: RadioSelector): Promise<boolean> {
-    return await (await this.getRadio(radioSelector)).isSelected();
-  }
-
-  async isRadioFocused(radioSelector: RadioSelector): Promise<boolean> {
-    return (await this.getElementAttribute(await this.getRadio(radioSelector), Attribute.IsFocused)) == AttributeValue.true;
-  }
-
-  async clickRadio(radioSelector: RadioSelector): Promise<void> {
-    await (await this.getRadio(radioSelector)).click();
-  }
-
-  async waitForRadioSelected(radioSelector: RadioSelector, timeout?: number): Promise<void> {
-    await browser.waitUntil(async () => await this.isRadioSelected(radioSelector), {
-      timeout: timeout ?? this.waitForUiEvent,
-      timeoutMsg: 'Radio was not selected correctly.',
-      interval: 1000,
-    });
-  }
-
-  async waitForRadioFocused(radioSelector: RadioSelector, timeout?: number): Promise<void> {
-    await browser.waitUntil(async () => await this.isRadioFocused(radioSelector), {
-      timeout: timeout ?? this.waitForUiEvent,
-      timeoutMsg: 'Radio was not focused correctly.',
-      interval: 1000,
-    });
-  }
-
-  /* Sends a Keyboarding command on a specific UI element */
-  async sendKey(key: string, radioSelector: RadioSelector): Promise<void> {
-    await (await this.getRadio(radioSelector)).addValue(key);
-  }
-
-  /* Returns the correct WebDriverIO element from the Radio Selector */
-  async getRadio(radioSelector: RadioSelector): Promise<WebdriverIO.Element> {
-    if (radioSelector == RadioSelector.First) {
-      return await this._firstRadio;
-    } else if (radioSelector == RadioSelector.Second) {
-      return await this._secondRadio;
-    } else if (radioSelector == RadioSelector.Third) {
-      return await this._thirdRadio;
-    } else if (radioSelector == RadioSelector.Fourth) {
-      return await this._fourthRadio;
-    } else {
-      return await this._fifthRadio;
-    }
-  }
-
-  /*****************************************/
-  /**************** Getters ****************/
-  /*****************************************/
-  get _testPage() {
-    return By(RADIO_GROUP_EXPERIMENTAL_TESTPAGE);
-  }
-
-  get _pageName() {
-    return RADIO_GROUP_EXPERIMENTAL_TESTPAGE;
-  }
-
-  get _primaryComponent() {
-    return By(RADIOGROUP_TEST_COMPONENT);
-  }
-
-  get _secondaryComponent() {
-    return By(RADIOGROUP_NO_A11Y_LABEL_COMPONENT);
-  }
-
-  get _pageButton() {
-    return By(HOMEPAGE_RADIO_GROUP_EXPERIMENTAL_BUTTON);
-  }
-
-  /***************/
-  /* Radio *
-  /**************/
-
-  /* The first RadioGroup has 4 radio buttons, all listed below */
-  get _firstRadio() {
-    return By(FIRST_RADIO);
-  }
-
-  get _secondRadio() {
-    return By(SECOND_RADIO);
-  }
-
-  get _thirdRadio() {
-    return By(THIRD_RADIO);
-  }
-
-  get _fourthRadio() {
-    return By(FOURTH_RADIO);
-  }
-
-  get _fifthRadio() {
-    return By(FIFTH_RADIO);
-  }
-}
-
-export default new RadioGroupExperimentalPage();