@fluentui-react-native/tester 0.107.1 → 0.108.0

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
+  });
+});

package/src/E2E/common/NavigateAppPage.ts

@@ -3,6 +3,7 @@ import { HOMEPAGE_AVATAR_BUTTON } from '../../TestComponents/Avatar/consts';
 import { HOMEPAGE_BADGE_BUTTON } from '../../TestComponents/Badge/consts';
 import { HOMEPAGE_CHECKBOX_BUTTON } from '../../TestComponents/Checkbox/consts';
 import { HOMEPAGE_CHECKBOX_EXPERIMENTAL_BUTTON } from '../../TestComponents/CheckboxExperimental/consts';
+import { HOMEPAGE_CORNERRADIUS_BUTTON } from '../../TestComponents/CornerRadius/consts';
 import { HOMEPAGE_BUTTON_BUTTON } from '../../TestComponents/Button/consts';
 import { HOMEPAGE_CALLOUT_BUTTON } from '../../TestComponents/Callout/consts';
 import { HOMEPAGE_CONTEXTUALMENU_BUTTON } from '../../TestComponents/ContextualMenu/consts';
@@ -19,8 +20,11 @@ import { HOMEPAGE_PERSONA_BUTTON } from '../../TestComponents/Persona/consts';
 import { HOMEPAGE_PERSONACOIN_BUTTON } from '../../TestComponents/PersonaCoin/consts';
 import { HOMEPAGE_PRESSABLE_BUTTON } from '../../TestComponents/Pressable/consts';
 import { HOMEPAGE_RADIOGROUP_BUTTON } from '../../TestComponents/RadioGroup/consts';
+import { HOMEPAGE_RADIO_GROUP_EXPERIMENTAL_BUTTON } from '../../TestComponents/RadioGroupExperimental/consts';
 import { HOMEPAGE_SEPARATOR_BUTTON } from '../../TestComponents/Separator/consts';
+import { HOMEPAGE_SHADOW_BUTTON } from '../../TestComponents/Shadow/consts';
 import { HOMEPAGE_SHIMMER_BUTTON } from '../../TestComponents/Shimmer/consts';
+import { HOMEPAGE_STROKEWIDTH_BUTTON } from '../../TestComponents/StrokeWidth/consts';
 import { HOMEPAGE_SVG_BUTTON } from '../../TestComponents/Svg/consts';
 import { HOMEPAGE_SWITCH_BUTTON } from '../../TestComponents/Switch/consts';
 import { HOMEPAGE_TEXT_BUTTON } from '../../TestComponents/Text/consts';
@@ -64,6 +68,10 @@ class NavigateAppPage extends BasePage {
     await (await this.contextualMenuPage).click();
   }
 
+  async clickAndGoToCornerRadiusTokensPage() {
+    await (await this.cornerRadiusTokensPage).click();
+  }
+
   async clickAndGoToFocusTrapZonePage() {
     await (await this.focusTrapZonePage).click();
   }
@@ -112,14 +120,26 @@ class NavigateAppPage extends BasePage {
     await (await this.radioGroupPage).click();
   }
 
+  async clickAndGoToRadioGroupExperimentalPage() {
+    await (await this.radioGroupExperimentalPage).click();
+  }
+
   async clickAndGoToSeparatorPage() {
     await (await this.separatorPage).click();
   }
 
+  async clickAndGoToShadowPage() {
+    await (await this.shadowPage).click();
+  }
+
   async clickAndGoToShimmerPage() {
     await (await this.shimmerPage).click();
   }
 
+  async clickAndGoToStrokeWidthTokensPage() {
+    await (await this.strokeWidthTokensPage).click();
+  }
+
   async clickAndGoToSvgPage() {
     await (await this.svgPage).click();
   }
@@ -192,6 +212,10 @@ class NavigateAppPage extends BasePage {
     return By(HOMEPAGE_CONTEXTUALMENU_BUTTON);
   }
 
+  private get cornerRadiusTokensPage() {
+    return By(HOMEPAGE_CORNERRADIUS_BUTTON);
+  }
+
   private get focusTrapZonePage() {
     return By(HOMEPAGE_FOCUSTRAPZONE_BUTTON);
   }
@@ -240,14 +264,26 @@ class NavigateAppPage extends BasePage {
     return By(HOMEPAGE_RADIOGROUP_BUTTON);
   }
 
+  private get radioGroupExperimentalPage() {
+    return By(HOMEPAGE_RADIO_GROUP_EXPERIMENTAL_BUTTON);
+  }
+
   private get separatorPage() {
     return By(HOMEPAGE_SEPARATOR_BUTTON);
   }
 
+  private get shadowPage() {
+    return By(HOMEPAGE_SHADOW_BUTTON);
+  }
+
   private get shimmerPage() {
     return By(HOMEPAGE_SHIMMER_BUTTON);
   }
 
+  private get strokeWidthTokensPage() {
+    return By(HOMEPAGE_STROKEWIDTH_BUTTON);
+  }
+
   private get svgPage() {
     return By(HOMEPAGE_SVG_BUTTON);
   }

package/src/FluentTesterApp.tsx

@@ -37,7 +37,7 @@ const useSizeClassIOS_DO_NOT_USE: () => SizeClassIOS = () => {
 
 export const FluentTesterApp: React.FunctionComponent<FluentTesterProps> = (props) => {
   const sizeClass = useSizeClassIOS_DO_NOT_USE();
-  const isMobile = Platform.OS == 'android' || (Platform.OS === 'ios' && Platform.isPad === false);
+  const isMobile = Platform.OS === 'android' || (Platform.OS === 'ios' && Platform.isPad === false);
 
   // If on iPad we are presented in a Split View or Slide Over context, show the single pane view.
   const shouldShowSinglePane = isMobile || (!isMobile && sizeClass === 'compact');