@fluentui-react-native/tester 0.107.2 → 0.108.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui-react-native/tester",
-  "version": "0.107.2",
+  "version": "0.108.1",
   "description": "A test app to test FluentUI React Native Components during development",
   "license": "MIT",
   "author": "Microsoft <fluentuinativeowners@microsoft.com>",
@@ -27,7 +27,7 @@
     "macos": "react-native run-macos --scheme FluentTester",
     "prettier": "fluentui-scripts prettier",
     "prettier-fix": "fluentui-scripts prettier --fix true",
-    "start": "react-native start",
+    "start": "react-native rnx-start",
     "windows": "react-native run-windows --arch x64 --sln windows/FluentTester.sln"
   },
   "repository": {
@@ -38,40 +38,44 @@
   "dependencies": {
     "@fluentui-react-native/android-theme": ">=0.14.4 <1.0.0",
     "@fluentui-react-native/apple-theme": ">=0.16.10 <1.0.0",
-    "@fluentui-react-native/avatar": "^1.3.1",
-    "@fluentui-react-native/badge": ">=0.2.1 <1.0.0",
-    "@fluentui-react-native/button": ">=0.31.1 <1.0.0",
+    "@fluentui-react-native/avatar": "^1.3.2",
+    "@fluentui-react-native/badge": ">=0.2.2 <1.0.0",
+    "@fluentui-react-native/button": ">=0.32.0 <1.0.0",
     "@fluentui-react-native/default-theme": ">=0.16.12 <1.0.0",
-    "@fluentui-react-native/dropdown": ">=0.5.17 <1.0.0",
-    "@fluentui-react-native/experimental-activity-indicator": ">=0.6.20 <1.0.0",
-    "@fluentui-react-native/experimental-avatar": ">=0.16.24 <1.0.0",
-    "@fluentui-react-native/experimental-button": "0.16.57",
-    "@fluentui-react-native/experimental-checkbox": "0.13.4",
-    "@fluentui-react-native/experimental-expander": "0.4.22",
-    "@fluentui-react-native/experimental-icon": ">=0.0.2 <1.0.0",
-    "@fluentui-react-native/experimental-link": "^0.2.1",
-    "@fluentui-react-native/experimental-menu-button": ">=0.5.18 <1.0.0",
+    "@fluentui-react-native/dropdown": ">=0.5.18 <1.0.0",
+    "@fluentui-react-native/experimental-activity-indicator": ">=0.6.21 <1.0.0",
+    "@fluentui-react-native/experimental-avatar": ">=0.16.25 <1.0.0",
+    "@fluentui-react-native/experimental-button": "0.16.58",
+    "@fluentui-react-native/experimental-checkbox": "0.13.5",
+    "@fluentui-react-native/experimental-expander": "0.4.23",
+    "@fluentui-react-native/experimental-icon": ">=0.0.3 <1.0.0",
+    "@fluentui-react-native/experimental-link": "^0.2.2",
+    "@fluentui-react-native/experimental-menu-button": ">=0.5.19 <1.0.0",
     "@fluentui-react-native/experimental-native-date-picker": ">=0.7.3 <1.0.0",
-    "@fluentui-react-native/experimental-radio-group": "^0.7.23",
-    "@fluentui-react-native/experimental-shadow": "0.2.44",
-    "@fluentui-react-native/experimental-shimmer": "0.7.21",
-    "@fluentui-react-native/experimental-tabs": "0.8.1",
-    "@fluentui-react-native/experimental-text": ">=0.11.23 <1.0.0",
-    "@fluentui-react-native/framework": ">=0.8.20 <1.0.0",
-    "@fluentui-react-native/icon": "0.15.1",
-    "@fluentui-react-native/interactive-hooks": ">=0.21.1 <1.0.0",
-    "@fluentui-react-native/menu": "^1.0.76",
+    "@fluentui-react-native/experimental-radio-group": "^0.8.0",
+    "@fluentui-react-native/experimental-shadow": "0.2.45",
+    "@fluentui-react-native/experimental-shimmer": "0.7.22",
+    "@fluentui-react-native/experimental-tabs": "0.8.2",
+    "@fluentui-react-native/experimental-text": ">=0.11.24 <1.0.0",
+    "@fluentui-react-native/framework": ">=0.8.21 <1.0.0",
+    "@fluentui-react-native/icon": "0.15.2",
+    "@fluentui-react-native/interactive-hooks": ">=0.21.2 <1.0.0",
+    "@fluentui-react-native/menu": "^1.0.77",
     "@fluentui-react-native/merge-props": ">=0.5.1 <1.0.0",
-    "@fluentui-react-native/notification": "0.19.1",
-    "@fluentui-react-native/stack": ">=0.7.25 <1.0.0",
-    "@fluentui-react-native/switch": "^0.7.4",
-    "@fluentui-react-native/text": ">=0.16.1 <1.0.0",
+    "@fluentui-react-native/notification": "0.19.2",
+    "@fluentui-react-native/stack": ">=0.7.26 <1.0.0",
+    "@fluentui-react-native/switch": "^0.7.5",
+    "@fluentui-react-native/text": ">=0.16.2 <1.0.0",
     "@fluentui-react-native/theme": ">=0.7.8 <1.0.0",
+    "@fluentui-react-native/theme-tokens": "^0.21.2",
     "@fluentui-react-native/theme-types": ">=0.23.1 <1.0.0",
     "@fluentui-react-native/themed-stylesheet": "^1.4.1",
     "@fluentui-react-native/theming-utils": ">=0.18.3 <1.0.0",
     "@fluentui-react-native/win32-theme": ">=0.23.2 <1.0.0",
-    "@fluentui/react-native": ">=0.33.1 <1.0.0",
+    "@fluentui/react-native": ">=0.33.2 <1.0.0",
+    "@fortawesome/fontawesome-svg-core": "^6.2.0",
+    "@fortawesome/free-solid-svg-icons": "^6.2.0",
+    "@fortawesome/react-native-fontawesome": "^0.3.0",
     "@react-native-community/slider": "^4.2.0",
     "@react-native-menu/menu": "^0.1.2",
     "@react-native-picker/picker": "^2.2.1",

package/src/E2E/CornerRadiusTokens/pages/CornerRadiusTokensPageObject.ts

@@ -0,0 +1,21 @@
+import { HOMEPAGE_CORNERRADIUS_TESTPAGE, HOMEPAGE_CORNERRADIUS_BUTTON } from '../../../TestComponents/CornerRadius/consts';
+import { BasePage, By } from '../../common/BasePage';
+
+class CornerRadiusTokensPageObject extends BasePage {
+  /*****************************************/
+  /**************** Getters ****************/
+  /*****************************************/
+  get _testPage() {
+    return By(HOMEPAGE_CORNERRADIUS_TESTPAGE);
+  }
+
+  get _pageName() {
+    return HOMEPAGE_CORNERRADIUS_TESTPAGE;
+  }
+
+  get _pageButton() {
+    return By(HOMEPAGE_CORNERRADIUS_BUTTON);
+  }
+}
+
+export default new CornerRadiusTokensPageObject();

package/src/E2E/CornerRadiusTokens/specs/CornerRadiusTokens.spec.ios.ts

@@ -0,0 +1,22 @@
+import NavigateAppPage from '../../common/NavigateAppPage';
+import CornerRadiusTokensPageObject from '../pages/CornerRadiusTokensPageObject';
+import { PAGE_TIMEOUT, BOOT_APP_TIMEOUT } from '../../common/consts';
+
+// Before testing begins, allow up to 60 seconds for app to open
+describe('CornerRadiusTokens 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 CornerRadiusTokens test page', async () => {
+    await CornerRadiusTokensPageObject.mobileScrollToComponentButton();
+    await CornerRadiusTokensPageObject.waitForButtonDisplayed(PAGE_TIMEOUT);
+
+    /* Click on component button to navigate to test page */
+    await NavigateAppPage.clickAndGoToCornerRadiusTokensPage();
+    await CornerRadiusTokensPageObject.waitForPageDisplayed(PAGE_TIMEOUT);
+
+    await expect(await CornerRadiusTokensPageObject.isPageLoaded()).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,21 @@
+import NavigateAppPage from '../../common/NavigateAppPage';
+import CornerRadiusTokensPageObject from '../pages/CornerRadiusTokensPageObject';
+import { PAGE_TIMEOUT, BOOT_APP_TIMEOUT } from '../../common/consts';
+
+// Before testing begins, allow up to 60 seconds for app to open
+describe('CornerRadiusTokens 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 CornerRadiusTokens test page', async () => {
+    await CornerRadiusTokensPageObject.waitForButtonDisplayed(PAGE_TIMEOUT);
+
+    /* Click on component button to navigate to test page */
+    await NavigateAppPage.clickAndGoToCornerRadiusTokensPage();
+    await CornerRadiusTokensPageObject.waitForPageDisplayed(PAGE_TIMEOUT);
+
+    await expect(await CornerRadiusTokensPageObject.isPageLoaded()).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,20 @@
+import NavigateAppPage from '../../common/NavigateAppPage';
+import CornerRadiusTokensPageObject from '../pages/CornerRadiusTokensPageObject';
+import { PAGE_TIMEOUT, BOOT_APP_TIMEOUT } from '../../common/consts';
+
+// Before testing begins, allow up to 60 seconds for app to open
+describe('CornerRadiusTokens 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 CornerRadiusTokens test page', async () => {
+    /* Click on component button to navigate to test page */
+    await NavigateAppPage.clickAndGoToCornerRadiusTokensPage();
+    await CornerRadiusTokensPageObject.waitForPageDisplayed(PAGE_TIMEOUT);
+
+    await expect(await CornerRadiusTokensPageObject.isPageLoaded()).toBeTruthy(CornerRadiusTokensPageObject.ERRORMESSAGE_PAGELOAD);
+    await expect(await CornerRadiusTokensPageObject.didAssertPopup()).toBeFalsy(CornerRadiusTokensPageObject.ERRORMESSAGE_ASSERT); // Ensure no asserts popped up
+  });
+});

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

@@ -0,0 +1,142 @@
+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();

package/src/E2E/RadioGroupExperimental/specs/ExperimentalRadioGroup.spec.win.ts

@@ -1 +1,134 @@
-// TODO
+import NavigateAppPage from '../../common/NavigateAppPage';
+import RadioGroupExperimentalPageObject, { RadioSelector } from '../pages/RadioGroupExperimentalPageObject';
+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_ACCESSIBILITY_LABEL,
+  SECOND_RADIO_LABEL,
+} from '../../../TestComponents/RadioGroupExperimental/consts';
+
+// Before testing begins, allow up to 60 seconds for app to open
+describe('RadioGroup/Radio 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.clickAndGoToRadioGroupExperimentalPage();
+    await RadioGroupExperimentalPageObject.waitForPageDisplayed(PAGE_TIMEOUT);
+
+    await expect(await RadioGroupExperimentalPageObject.isPageLoaded()).toBeTruthy(RadioGroupExperimentalPageObject.ERRORMESSAGE_PAGELOAD);
+    await expect(await RadioGroupExperimentalPageObject.didAssertPopup()).toBeFalsy(RadioGroupExperimentalPageObject.ERRORMESSAGE_ASSERT); // Ensure no asserts popped up
+  });
+});
+
+describe('RadioGroup/Radio Accessibility Testing', () => {
+  /* Scrolls and waits for the RadioGroup to be visible on the Test Page */
+  beforeEach(async () => {
+    await RadioGroupExperimentalPageObject.scrollToTestElement();
+    await RadioGroupExperimentalPageObject.waitForPrimaryElementDisplayed(PAGE_TIMEOUT);
+  });
+
+  it("Validate RadioGroup's accessibilityRole is correct", async () => {
+    await expect(await RadioGroupExperimentalPageObject.getAccessibilityRole()).toEqual(RADIOGROUP_A11Y_ROLE);
+    await expect(await RadioGroupExperimentalPageObject.didAssertPopup()).toBeFalsy(RadioGroupExperimentalPageObject.ERRORMESSAGE_ASSERT);
+  });
+
+  it("Validate Radio's accessibilityRole is correct", async () => {
+    await expect(await RadioGroupExperimentalPageObject.getRadioAccesibilityRole()).toEqual(RADIOBUTTON_A11Y_ROLE);
+    await expect(await RadioGroupExperimentalPageObject.didAssertPopup()).toBeFalsy(RadioGroupExperimentalPageObject.ERRORMESSAGE_ASSERT);
+  });
+
+  it('RadioGroup - Set accessibilityLabel', async () => {
+    await expect(await RadioGroupExperimentalPageObject.getAccessibilityLabel(ComponentSelector.Primary)).toEqual(
+      RADIOGROUP_ACCESSIBILITY_LABEL,
+    );
+    await expect(await RadioGroupExperimentalPageObject.didAssertPopup()).toBeFalsy(RadioGroupExperimentalPageObject.ERRORMESSAGE_ASSERT);
+  });
+
+  it('RadioGroup - Do not set accessibilityLabel -> Default to RadioGroup label', async () => {
+    await expect(await RadioGroupExperimentalPageObject.getAccessibilityLabel(ComponentSelector.Secondary)).toEqual(
+      RADIOGROUP_TEST_COMPONENT_LABEL,
+    );
+    await expect(await RadioGroupExperimentalPageObject.didAssertPopup()).toBeFalsy(RadioGroupExperimentalPageObject.ERRORMESSAGE_ASSERT);
+  });
+
+  it('Radio - Set accessibilityLabel', async () => {
+    await expect(await RadioGroupExperimentalPageObject.getRBAccessibilityLabel(RadioSelector.First)).toEqual(
+      FIRST_RADIO_ACCESSIBILITY_LABEL,
+    );
+    await expect(await RadioGroupExperimentalPageObject.didAssertPopup()).toBeFalsy(RadioGroupExperimentalPageObject.ERRORMESSAGE_ASSERT);
+  });
+
+  it('Radio - Do not set accessibilityLabel -> Default to RadioButton label', async () => {
+    await expect(await RadioGroupExperimentalPageObject.getRBAccessibilityLabel(RadioSelector.Second)).toEqual(SECOND_RADIO_LABEL);
+    await expect(await RadioGroupExperimentalPageObject.didAssertPopup()).toBeFalsy(RadioGroupExperimentalPageObject.ERRORMESSAGE_ASSERT);
+  });
+});
+
+describe('RadioGroup Functional Testing', async () => {
+  /* This resets the RadioGroup state by clicking/selecting the 1st Radio in the RadioGroup */
+  beforeEach(async () => {
+    await RadioGroupExperimentalPageObject.scrollToTestElement();
+    await RadioGroupExperimentalPageObject.waitForPrimaryElementDisplayed(PAGE_TIMEOUT);
+
+    await RadioGroupExperimentalPageObject.resetRadioGroupSelection();
+  });
+
+  it('Click on a Radio and ensure it changes state from unselected -> selected', async () => {
+    /* Validate the Radio is not initially selected */
+    await expect(await RadioGroupExperimentalPageObject.isRadioSelected(RadioSelector.Second)).toBeFalsy();
+
+    /* Click on the Radio to select it */
+    await RadioGroupExperimentalPageObject.clickRadio(RadioSelector.Second);
+    await RadioGroupExperimentalPageObject.waitForRadioSelected(RadioSelector.Second, PAGE_TIMEOUT);
+
+    /* Validate the Radio is selected */
+    await expect(await RadioGroupExperimentalPageObject.isRadioSelected(RadioSelector.Second)).toBeTruthy();
+    await expect(await RadioGroupExperimentalPageObject.didAssertPopup()).toBeFalsy(RadioGroupExperimentalPageObject.ERRORMESSAGE_ASSERT);
+  });
+
+  it('Keyboard to Radio and check for Selection state', async () => {
+    // Presses the ArrowDown key while the first (A) Radio is selected
+    await RadioGroupExperimentalPageObject.sendKey(Keys.ARROW_DOWN, RadioSelector.First);
+    await RadioGroupExperimentalPageObject.waitForRadioSelected(RadioSelector.Second, 5000);
+
+    /* Validate the Radio is selected */
+    await expect(await RadioGroupExperimentalPageObject.isRadioSelected(RadioSelector.Second)).toBeTruthy();
+    await expect(await RadioGroupExperimentalPageObject.didAssertPopup()).toBeFalsy(RadioGroupExperimentalPageObject.ERRORMESSAGE_ASSERT);
+  });
+
+  it("Keyboard to DISABLED Radio and validate it doesn't get selected", async () => {
+    // Presses the ArrowDown key while the second (B) Radio is selected
+    await RadioGroupExperimentalPageObject.sendKey(Keys.ARROW_DOWN, RadioSelector.Second);
+    await RadioGroupExperimentalPageObject.waitForRadioSelected(RadioSelector.Fourth, 5000); // It should skip RadioButton 3 since it is disabled
+
+    /* Validate the Radio is selected */
+    await expect(await RadioGroupExperimentalPageObject.isRadioSelected(RadioSelector.Fourth)).toBeTruthy();
+    await expect(await RadioGroupExperimentalPageObject.didAssertPopup()).toBeFalsy(RadioGroupExperimentalPageObject.ERRORMESSAGE_ASSERT);
+  });
+
+  it('Validate circular navigation', async () => {
+    // Presses the ArrowDown key while the fourth (D) Radio is selected
+    await RadioGroupExperimentalPageObject.sendKey(Keys.ARROW_DOWN, RadioSelector.Fourth);
+    await RadioGroupExperimentalPageObject.waitForRadioSelected(RadioSelector.First, 5000); // It should go to first Radio to follow circular navigation
+
+    /* Validate the Radio is selected */
+    await expect(await RadioGroupExperimentalPageObject.isRadioSelected(RadioSelector.First)).toBeTruthy();
+    await expect(await RadioGroupExperimentalPageObject.didAssertPopup()).toBeFalsy(RadioGroupExperimentalPageObject.ERRORMESSAGE_ASSERT);
+  });
+
+  it('Validate tab out of RadioGroup', async () => {
+    // Presses the Tab key while the second (B) Radio is selected in first RadioGroup
+    await RadioGroupExperimentalPageObject.sendKey(Keys.TAB, RadioSelector.Second);
+    await RadioGroupExperimentalPageObject.waitForRadioFocused(RadioSelector.Fifth, 5000);
+
+    /* Validate the Radio is not focused */
+    await expect(await RadioGroupExperimentalPageObject.isRadioFocused(RadioSelector.Fifth)).toBeTruthy();
+    await expect(await RadioGroupExperimentalPageObject.didAssertPopup()).toBeFalsy(RadioGroupExperimentalPageObject.ERRORMESSAGE_ASSERT);
+  });
+});

package/src/E2E/Shadow/pages/ShadowPageObject.ts

@@ -0,0 +1,21 @@
+import { SHADOW_TESTPAGE, HOMEPAGE_SHADOW_BUTTON } from '../../../TestComponents/Shadow/consts';
+import { BasePage, By } from '../../common/BasePage';
+
+class ShadowTestPage extends BasePage {
+  /*****************************************/
+  /**************** Getters ****************/
+  /*****************************************/
+  get _testPage() {
+    return By(SHADOW_TESTPAGE);
+  }
+
+  get _pageName() {
+    return SHADOW_TESTPAGE;
+  }
+
+  get _pageButton() {
+    return By(HOMEPAGE_SHADOW_BUTTON);
+  }
+}
+
+export default new ShadowTestPage();

package/src/E2E/Shadow/specs/Shadow.spec.ios.ts

@@ -0,0 +1,22 @@
+import NavigateAppPage from '../../common/NavigateAppPage';
+import ShadowPageObject from '../pages/ShadowPageObject';
+import { PAGE_TIMEOUT, BOOT_APP_TIMEOUT } from '../../common/consts';
+
+// Before testing begins, allow up to 60 seconds for app to open
+describe('Shadow 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 Shadow test page', async () => {
+    await ShadowPageObject.mobileScrollToComponentButton();
+    await ShadowPageObject.waitForButtonDisplayed();
+
+    /* Click on component button to navigate to test page */
+    await NavigateAppPage.clickAndGoToShadowPage();
+    await ShadowPageObject.waitForPageDisplayed(PAGE_TIMEOUT);
+
+    await expect(await ShadowPageObject.isPageLoaded()).toBeTruthy(ShadowPageObject.ERRORMESSAGE_PAGELOAD);
+  });
+});

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

@@ -0,0 +1,21 @@
+import NavigateAppPage from '../../common/NavigateAppPage';
+import ShadowPageObject from '../pages/ShadowPageObject';
+import { PAGE_TIMEOUT, BOOT_APP_TIMEOUT } from '../../common/consts';
+
+// Before testing begins, allow up to 60 seconds for app to open
+describe('Shadow 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 Shadow test page', async () => {
+    await ShadowPageObject.waitForButtonDisplayed();
+
+    /* Click on component button to navigate to test page */
+    await NavigateAppPage.clickAndGoToShadowPage();
+    await ShadowPageObject.waitForPageDisplayed(PAGE_TIMEOUT);
+
+    await expect(await ShadowPageObject.isPageLoaded()).toBeTruthy(ShadowPageObject.ERRORMESSAGE_PAGELOAD);
+  });
+});

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

@@ -0,0 +1,20 @@
+import NavigateAppPage from '../../common/NavigateAppPage';
+import ShadowPageObject from '../pages/ShadowPageObject';
+import { PAGE_TIMEOUT, BOOT_APP_TIMEOUT } from '../../common/consts';
+
+// Before testing begins, allow up to 60 seconds for app to open
+describe('Shadow 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 Shadow test page', async () => {
+    /* Click on component button to navigate to test page */
+    await NavigateAppPage.clickAndGoToShadowPage();
+    await ShadowPageObject.waitForPageDisplayed(PAGE_TIMEOUT);
+
+    await expect(await ShadowPageObject.isPageLoaded()).toBeTruthy(ShadowPageObject.ERRORMESSAGE_PAGELOAD);
+    await expect(await ShadowPageObject.didAssertPopup()).toBeFalsy(ShadowPageObject.ERRORMESSAGE_ASSERT); // Ensure no asserts popped up
+  });
+});

package/src/E2E/StrokeWidthTokens/pages/StrokeWidthTokensPageObject.ts

@@ -0,0 +1,21 @@
+import { STROKEWIDTH_TESTPAGE, HOMEPAGE_STROKEWIDTH_BUTTON } from '../../../TestComponents/StrokeWidth/consts';
+import { BasePage, By } from '../../common/BasePage';
+
+class StrokeWidthTokensPageObject extends BasePage {
+  /*****************************************/
+  /**************** Getters ****************/
+  /*****************************************/
+  get _testPage() {
+    return By(STROKEWIDTH_TESTPAGE);
+  }
+
+  get _pageName() {
+    return STROKEWIDTH_TESTPAGE;
+  }
+
+  get _pageButton() {
+    return By(HOMEPAGE_STROKEWIDTH_BUTTON);
+  }
+}
+
+export default new StrokeWidthTokensPageObject();

package/src/E2E/StrokeWidthTokens/specs/StrokeWidthTokens.spec.ios.ts

@@ -0,0 +1,22 @@
+import NavigateAppPage from '../../common/NavigateAppPage';
+import StrokeWidthTokensPageObject from '../pages/StrokeWidthTokensPageObject';
+import { PAGE_TIMEOUT, BOOT_APP_TIMEOUT } from '../../common/consts';
+
+// Before testing begins, allow up to 60 seconds for app to open
+describe('Stroke Width Tokens 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 Stroke width tokens test page', async () => {
+    await StrokeWidthTokensPageObject.mobileScrollToComponentButton();
+    await StrokeWidthTokensPageObject.waitForButtonDisplayed(PAGE_TIMEOUT);
+
+    /* Click on component button to navigate to test page */
+    await NavigateAppPage.clickAndGoToStrokeWidthTokensPage();
+    await StrokeWidthTokensPageObject.waitForPageDisplayed(PAGE_TIMEOUT);
+
+    await expect(await StrokeWidthTokensPageObject.isPageLoaded()).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,21 @@
+import NavigateAppPage from '../../common/NavigateAppPage';
+import StrokeWidthTokensPageObject from '../pages/StrokeWidthTokensPageObject';
+import { PAGE_TIMEOUT, BOOT_APP_TIMEOUT } from '../../common/consts';
+
+// Before testing begins, allow up to 60 seconds for app to open
+describe('Stroke Width Tokens 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 Stroke width tokens test page', async () => {
+    await StrokeWidthTokensPageObject.waitForButtonDisplayed(PAGE_TIMEOUT);
+
+    /* Click on component button to navigate to test page */
+    await NavigateAppPage.clickAndGoToStrokeWidthTokensPage();
+    await StrokeWidthTokensPageObject.waitForPageDisplayed(PAGE_TIMEOUT);
+
+    await expect(await StrokeWidthTokensPageObject.isPageLoaded()).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,20 @@
+import NavigateAppPage from '../../common/NavigateAppPage';
+import StrokeWidthTokensPageObject from '../pages/StrokeWidthTokensPageObject';
+import { PAGE_TIMEOUT, BOOT_APP_TIMEOUT } from '../../common/consts';
+
+// Before testing begins, allow up to 60 seconds for app to open
+describe('Stroke Width Token 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 stroke width tokens test page', async () => {
+    /* Click on component button to navigate to test page */
+    await NavigateAppPage.clickAndGoToStrokeWidthTokensPage();
+    await StrokeWidthTokensPageObject.waitForPageDisplayed(PAGE_TIMEOUT);
+
+    await expect(await StrokeWidthTokensPageObject.isPageLoaded()).toBeTruthy(StrokeWidthTokensPageObject.ERRORMESSAGE_PAGELOAD);
+    await expect(await StrokeWidthTokensPageObject.didAssertPopup()).toBeFalsy(StrokeWidthTokensPageObject.ERRORMESSAGE_ASSERT); // Ensure no asserts popped up
+  });
+});