@fluentui-react-native/tester 0.51.2 → 0.52.0

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

@@ -2,15 +2,22 @@ import {
   RADIOGROUP_TESTPAGE,
   RADIOGROUP_TEST_COMPONENT,
   RADIOGROUP_NO_A11Y_LABEL_COMPONENT,
-  RADIOBUTTON_TEST_COMPONENT,
   HOMEPAGE_RADIOGROUP_BUTTON,
-  RADIOBUTTON_NO_A11Y_LABEL_COMPONENT,
+  FIRST_RADIO_BUTTON,
+  SECOND_RADIO_BUTTON,
+  THIRD_RADIO_BUTTON,
+  FOURTH_RADIO_BUTTON,
 } from '../../../FluentTester/TestComponents/RadioGroup/consts';
 import { BasePage, By } from '../../common/BasePage.win';
 
+/* 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 {
-  Primary = 0, // this._primaryComponent
-  Secondary, // this._secondaryComponent
+  First = 0, // this._firstRadioButton
+  Second, // this._secondRadioButton
+  Third, // this._thirdRadioButton
+  Fourth, // this._fourthRadioButton
 }
 
 class RadioGroupPage extends BasePage {
@@ -19,17 +26,56 @@ class RadioGroupPage extends BasePage {
   /******************************************************************/
   // Get RadioButton's accessibilityLabel
   getRBAccessibilityLabel(radioButtonSelector: RadioButtonSelector): string {
-    switch (radioButtonSelector) {
-      case RadioButtonSelector.Primary:
-        return this._radioButton.getAttribute('Name');
+    return this.getRadioButton(radioButtonSelector).getAttribute('Name');
+  }
 
-      case RadioButtonSelector.Secondary:
-        return this._secondRadioButton.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 */
+  resetRadioGroupSelection(): void {
+    this._firstRadioButton.click();
   }
 
   getRadioButtonAccesibilityRole(): string {
-    return this._radioButton.getAttribute('ControlType');
+    return this._firstRadioButton.getAttribute('ControlType');
+  }
+
+  isRadioButtonSelected(radioButtonSelector: RadioButtonSelector): boolean {
+    return this.getRadioButton(radioButtonSelector).isSelected();
+  }
+
+  clickRadioButton(radioButtonSelector: RadioButtonSelector): void {
+    this.getRadioButton(radioButtonSelector).click();
+  }
+
+  waitForRadioButtonSelected(radioButtonSelector: RadioButtonSelector, timeout?: number): void {
+    browser.waitUntil(
+      () => {
+        return this.isRadioButtonSelected(radioButtonSelector);
+      },
+      {
+        timeout: timeout ?? this.waitForPageTimeout,
+        timeoutMsg: 'RadioButton was not selected correctly.',
+        interval: 1000,
+      },
+    );
+  }
+
+  /* Sends a Keyboarding command on a specific UI element */
+  sendKey(key: string, radioButtonSelector: RadioButtonSelector): void {
+    this.getRadioButton(radioButtonSelector).addValue(key);
+  }
+
+  /* Returns the correct WebDriverIO element from the RadioButton Selector */
+  getRadioButton(radioButtonSelector: RadioButtonSelector): WebdriverIO.Element {
+    if (radioButtonSelector == RadioButtonSelector.First) {
+      return this._firstRadioButton;
+    } else if (radioButtonSelector == RadioButtonSelector.Second) {
+      return this._secondRadioButton;
+    } else if (radioButtonSelector == RadioButtonSelector.Third) {
+      return this._thirdRadioButton;
+    } else {
+      return this._fourthRadioButton;
+    }
   }
 
   /*****************************************/
@@ -58,12 +104,22 @@ class RadioGroupPage extends BasePage {
   /***************/
   /* RadioButton *
   /**************/
-  get _radioButton() {
-    return By(RADIOBUTTON_TEST_COMPONENT);
+
+  /* The first RadioGroup has 4 radio buttons, all listed below */
+  get _firstRadioButton() {
+    return By(FIRST_RADIO_BUTTON);
   }
 
   get _secondRadioButton() {
-    return By(RADIOBUTTON_NO_A11Y_LABEL_COMPONENT);
+    return By(SECOND_RADIO_BUTTON);
+  }
+
+  get _thirdRadioButton() {
+    return By(THIRD_RADIO_BUTTON);
+  }
+
+  get _fourthRadioButton() {
+    return By(FOURTH_RADIO_BUTTON);
   }
 }
 

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

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

package/src/E2E/Tabs/pages/TabsPageObject.macos.ts

@@ -1,7 +1,7 @@
 import {
   TABS_TESTPAGE,
   TABS_TEST_COMPONENT,
-  TABS_ITEM_TEST_COMPONENT,
+  FIRST_TABS_ITEM,
   HOMEPAGE_TABS_BUTTON,
 } from '../../../FluentTester/TestComponents/Tabs/consts';
 import { BasePage, By } from '../../common/BasePage.macos';
@@ -37,7 +37,7 @@ class TabsPageObject extends BasePage {
   /* TabItem *
   /***********/
   get _tabItem() {
-    return By(TABS_ITEM_TEST_COMPONENT);
+    return By(FIRST_TABS_ITEM);
   }
 }
 

package/src/E2E/Tabs/pages/TabsPageObject.win.ts

@@ -1,17 +1,80 @@
 import {
   TABS_TESTPAGE,
   TABS_TEST_COMPONENT,
-  TABS_ITEM_TEST_COMPONENT,
   HOMEPAGE_TABS_BUTTON,
+  FIRST_TABS_ITEM,
+  SECOND_TABS_ITEM,
+  THIRD_TABS_ITEM,
+  FIRST_TABS_ITEM_CONTENT,
+  SECOND_TABS_ITEM_CONTENT,
+  THIRD_TABS_ITEM_CONTENT,
 } from '../../../FluentTester/TestComponents/Tabs/consts';
 import { BasePage, By } from '../../common/BasePage.win';
 
+/* This enum gives the spec file an EASY way to interact with SPECIFIC UI elements on the page.
+ * The spec file should import this enum and use it when wanting to interact with different elements on the page.
+ * The main Tab group we are testing has THREE tab items. The spec file will
+ * import this enum to easily write tests using these 3 tab items */
+export const enum TabItemSelector {
+  First = 0, // this._firstTabItem
+  Second, // this._secondTabItem
+  Third, // this._thirdTabItem
+}
+
 class TabsPageObject extends BasePage {
   /******************************************************************/
   /**************** UI Element Interaction Methods ******************/
   /******************************************************************/
-  getTabItemAccesibilityRole(): string {
-    return this._tabItem.getAttribute('ControlType');
+  waitForTabsItemsToOpen(tabItemSelector: TabItemSelector, timeout?: number): void {
+    browser.waitUntil(
+      () => {
+        return this.didTabItemContentLoad(tabItemSelector);
+      },
+      {
+        timeout: timeout ?? this.waitForPageTimeout,
+        timeoutMsg: 'The Tab Items content did not open.',
+        interval: 1000,
+      },
+    );
+  }
+
+  getTabItemAccesibilityRole(tabItemSelector: TabItemSelector): string {
+    return this.getTabItem(tabItemSelector).getAttribute('ControlType');
+  }
+
+  clickOnTabItem(tabItemSelector: TabItemSelector): void {
+    this.getTabItem(tabItemSelector).click();
+  }
+
+  didTabItemContentLoad(tabItemSelector: TabItemSelector): boolean {
+    return this.getTabItemContent(tabItemSelector).isDisplayed();
+  }
+
+  /* Returns the correct WebDriverIO element from the TabItem Selector */
+  getTabItem(tabItemSelector: TabItemSelector): WebdriverIO.Element {
+    if (tabItemSelector == TabItemSelector.First) {
+      return this._firstTabItem;
+    } else if (tabItemSelector == TabItemSelector.Second) {
+      return this._secondTabItem;
+    } else {
+      return this._thirdTabItem;
+    }
+  }
+
+  /* Returns the correct WebDriverIO element from the TabItem Selector */
+  getTabItemContent(tabItemSelector: TabItemSelector): WebdriverIO.Element {
+    if (tabItemSelector == TabItemSelector.First) {
+      return this._firstTabItemContent;
+    } else if (tabItemSelector == TabItemSelector.Second) {
+      return this._secondTabItemContent;
+    } else {
+      return this._thirdTabItemContent;
+    }
+  }
+
+  /* Sends a Keyboarding command on a specific UI element */
+  sendKey(key: string, tabItemSelector: TabItemSelector): void {
+    this.getTabItem(tabItemSelector).addValue(key);
   }
 
   /*****************************************/
@@ -33,11 +96,30 @@ class TabsPageObject extends BasePage {
     return By(HOMEPAGE_TABS_BUTTON);
   }
 
-  /***********/
-  /* TabItem *
-  /***********/
-  get _tabItem() {
-    return By(TABS_ITEM_TEST_COMPONENT);
+  /* The first tab group has 3 Tab item headers, all listed below */
+  get _firstTabItem() {
+    return By(FIRST_TABS_ITEM);
+  }
+
+  get _secondTabItem() {
+    return By(SECOND_TABS_ITEM);
+  }
+
+  get _thirdTabItem() {
+    return By(THIRD_TABS_ITEM);
+  }
+
+  /* Content shown when tab item is clicked */
+  get _firstTabItemContent() {
+    return By(FIRST_TABS_ITEM_CONTENT);
+  }
+
+  get _secondTabItemContent() {
+    return By(SECOND_TABS_ITEM_CONTENT);
+  }
+
+  get _thirdTabItemContent() {
+    return By(THIRD_TABS_ITEM_CONTENT);
   }
 }
 

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

@@ -1,6 +1,6 @@
 import NavigateAppPage from '../../common/NavigateAppPage.win';
-import TabsPageObject from '../pages/TabsPageObject.win';
-import { TAB_A11Y_ROLE, BOOT_APP_TIMEOUT, PAGE_TIMEOUT, TABITEM_A11Y_ROLE } from '../../common/consts';
+import TabsPageObject, { TabItemSelector } from '../pages/TabsPageObject.win';
+import { TAB_A11Y_ROLE, BOOT_APP_TIMEOUT, PAGE_TIMEOUT, TABITEM_A11Y_ROLE, Keys } from '../../common/consts';
 
 // Before testing begins, allow up to 60 seconds for app to open
 describe('Tabs Testing Initialization', function () {
@@ -23,15 +23,61 @@ describe('Tabs Testing Initialization', function () {
 });
 
 describe('Tabs Accessibility Testing', () => {
-  it("Validate Tab's accessibilityRole is correct", () => {
+  /* Scrolls and waits for the Tabs to be visible on the Test Page */
+  beforeEach(() => {
     TabsPageObject.scrollToTestElement();
     TabsPageObject.waitForPrimaryElementDisplayed(PAGE_TIMEOUT);
+  });
+
+  it("Validate Tab's accessibilityRole is correct", () => {
     expect(TabsPageObject.getAccessibilityRole()).toEqual(TAB_A11Y_ROLE);
   });
 
   it("Validate TabItem's accessibilityRole is correct", () => {
+    expect(TabsPageObject.getTabItemAccesibilityRole(TabItemSelector.First)).toEqual(TABITEM_A11Y_ROLE);
+  });
+});
+
+describe('Tabs Functional Tests', () => {
+  /* Scrolls and waits for the Tabs to be visible on the Test Page */
+  beforeEach(() => {
     TabsPageObject.scrollToTestElement();
     TabsPageObject.waitForPrimaryElementDisplayed(PAGE_TIMEOUT);
-    expect(TabsPageObject.getTabItemAccesibilityRole()).toEqual(TABITEM_A11Y_ROLE);
+
+    // Reset the TabGroup by putting focus on First tab item
+    TabsPageObject.clickOnTabItem(TabItemSelector.First);
+  });
+
+  it('Click on the second tab header and validate the correct TabItem content is shown', () => {
+    TabsPageObject.clickOnTabItem(TabItemSelector.Second);
+    TabsPageObject.waitForTabsItemsToOpen(TabItemSelector.Second, PAGE_TIMEOUT);
+
+    expect(TabsPageObject.didTabItemContentLoad(TabItemSelector.Second)).toBeTruthy();
+  });
+
+  it('Keyboarding: Arrow Navigation: Right -> Down -> Left -> Up -> Validate the correct TabItem content is shown', () => {
+    /* At First tab element, press Right Arrow to navigate to the Second tab element */
+    TabsPageObject.sendKey(Keys.Right_Arrow, TabItemSelector.First);
+    TabsPageObject.waitForTabsItemsToOpen(TabItemSelector.Second, PAGE_TIMEOUT);
+
+    expect(TabsPageObject.didTabItemContentLoad(TabItemSelector.Second)).toBeTruthy();
+
+    /* At Second tab element, press Down Arrow to navigate to the Third tab element */
+    TabsPageObject.sendKey(Keys.Down_Arrow, TabItemSelector.Second);
+    TabsPageObject.waitForTabsItemsToOpen(TabItemSelector.Third, PAGE_TIMEOUT);
+
+    expect(TabsPageObject.didTabItemContentLoad(TabItemSelector.Third)).toBeTruthy();
+
+    /* At Third tab element, press Left Arrow to navigate to the Second tab element */
+    TabsPageObject.sendKey(Keys.Left_Arrow, TabItemSelector.Third);
+    TabsPageObject.waitForTabsItemsToOpen(TabItemSelector.Second, PAGE_TIMEOUT);
+
+    expect(TabsPageObject.didTabItemContentLoad(TabItemSelector.Second)).toBeTruthy();
+
+    /* At Second tab element, press Up Arrow to navigate to the First tab element */
+    TabsPageObject.sendKey(Keys.Up_Arrow, TabItemSelector.Second);
+    TabsPageObject.waitForTabsItemsToOpen(TabItemSelector.First, PAGE_TIMEOUT);
+
+    expect(TabsPageObject.didTabItemContentLoad(TabItemSelector.First)).toBeTruthy();
   });
 });

package/src/E2E/Tabs/specs/Tabs.spec.windows.ts

@@ -0,0 +1,84 @@
+import NavigateAppPage from '../../common/NavigateAppPage.win';
+import TabsPageObject, { TabItemSelector } from '../pages/TabsPageObject.win';
+import { TAB_A11Y_ROLE, BOOT_APP_TIMEOUT, PAGE_TIMEOUT, TABITEM_A11Y_ROLE } from '../../common/consts';
+
+// Before testing begins, allow up to 60 seconds for app to open
+describe('Tabs Testing Initialization', function () {
+  it('Wait for app load', () => {
+    NavigateAppPage.waitForPageDisplayed(BOOT_APP_TIMEOUT);
+    expect(NavigateAppPage.isPageLoaded()).toBeTruthy();
+  });
+
+  it('Click and navigate to Tabs test page', () => {
+    /* Scroll to component test page button in scrollview if not already visible*/
+    TabsPageObject.scrollToComponentButton();
+    TabsPageObject.waitForButtonDisplayed(PAGE_TIMEOUT);
+
+    /* Click on component button to navigate to test page */
+    NavigateAppPage.clickAndGoToTabsPage();
+    TabsPageObject.waitForPageDisplayed(PAGE_TIMEOUT);
+
+    expect(TabsPageObject.isPageLoaded()).toBeTruthy();
+  });
+});
+
+describe('Tabs Accessibility Testing', () => {
+  /* Scrolls and waits for the Tabs to be visible on the Test Page */
+  beforeEach(() => {
+    TabsPageObject.scrollToTestElement();
+    TabsPageObject.waitForPrimaryElementDisplayed(PAGE_TIMEOUT);
+  });
+
+  it("Validate Tab's accessibilityRole is correct", () => {
+    expect(TabsPageObject.getAccessibilityRole()).toEqual(TAB_A11Y_ROLE);
+  });
+
+  it("Validate TabItem's accessibilityRole is correct", () => {
+    expect(TabsPageObject.getTabItemAccesibilityRole(TabItemSelector.First)).toEqual(TABITEM_A11Y_ROLE);
+  });
+});
+
+describe('Tabs Functional Tests', () => {
+  /* Scrolls and waits for the Tabs to be visible on the Test Page */
+  beforeEach(() => {
+    TabsPageObject.scrollToTestElement();
+    TabsPageObject.waitForPrimaryElementDisplayed(PAGE_TIMEOUT);
+
+    // Reset the TabGroup by putting focus on First tab item
+    TabsPageObject.clickOnTabItem(TabItemSelector.First);
+  });
+
+  it('Click on the second tab header and validate the correct TabItem content is shown', () => {
+    TabsPageObject.clickOnTabItem(TabItemSelector.Second);
+    TabsPageObject.waitForTabsItemsToOpen(TabItemSelector.Second, PAGE_TIMEOUT);
+
+    expect(TabsPageObject.didTabItemContentLoad(TabItemSelector.Second)).toBeTruthy();
+  });
+
+  // Keyboarding is currently not integrated for UWP tabs - Task #5758598
+  // it('Keyboarding: Arrow Navigation: Right -> Down -> Left -> Up -> Validate the correct TabItem content is shown', () => {
+  //   /* At First tab element, press Right Arrow to navigate to the Second tab element */
+  //   TabsPageObject.sendKey(Keys.Right_Arrow, TabItemSelector.First);
+  //   TabsPageObject.waitForTabsItemsToOpen(TabItemSelector.Second, PAGE_TIMEOUT);
+
+  //   expect(TabsPageObject.didTabItemContentLoad(TabItemSelector.Second)).toBeTruthy();
+
+  //   /* At Second tab element, press Down Arrow to navigate to the Third tab element */
+  //   TabsPageObject.sendKey(Keys.Down_Arrow, TabItemSelector.Second);
+  //   TabsPageObject.waitForTabsItemsToOpen(TabItemSelector.Third, PAGE_TIMEOUT);
+
+  //   expect(TabsPageObject.didTabItemContentLoad(TabItemSelector.Third)).toBeTruthy();
+
+  //   /* At Third tab element, press Left Arrow to navigate to the Second tab element */
+  //   TabsPageObject.sendKey(Keys.Left_Arrow, TabItemSelector.Third);
+  //   TabsPageObject.waitForTabsItemsToOpen(TabItemSelector.Second, PAGE_TIMEOUT);
+
+  //   expect(TabsPageObject.didTabItemContentLoad(TabItemSelector.Second)).toBeTruthy();
+
+  //   /* At Second tab element, press Up Arrow to navigate to the First tab element */
+  //   TabsPageObject.sendKey(Keys.Up_Arrow, TabItemSelector.Second);
+  //   TabsPageObject.waitForTabsItemsToOpen(TabItemSelector.First, PAGE_TIMEOUT);
+
+  //   expect(TabsPageObject.didTabItemContentLoad(TabItemSelector.First)).toBeTruthy();
+  // });
+});

package/src/E2E/common/BasePage.win.ts

@@ -56,14 +56,6 @@ export class BasePage {
     this._primaryComponent.click();
   }
 
-  /* ****TODO****: I need to better use the ComponentSelector for this. We shouldn't have the spec needing to import the constant string */
-  sendKey(componentID?: string, key?: string): void {
-    const component = By(componentID);
-    if (component.isDisplayed()) {
-      component.addValue(key); // Adding a value sends the key on that component
-    }
-  }
-
   /* Scrolls until the desired test page's button is displayed. We use the scroll viewer UI element as the point to start scrolling.
    * We use a negative number as the Y-coordinate because that enables us to scroll downwards */
   scrollToComponentButton(): void {

package/src/FluentTester/TestComponents/Badge/BadgeTest.tsx

@@ -3,7 +3,7 @@ import * as React from 'react';
 import { BADGE_TESTPAGE } from './consts';
 import { Test, TestSection, PlatformStatus } from '../Test';
 import { View, Platform, Text } from 'react-native';
-import { Badge, CompressibleBadge } from '@fluentui-react-native/badge';
+import { Badge, CompressibleBadge, PresenceBadge } from '@fluentui-react-native/badge';
 import BadgeSvg from './oof.svg';
 
 import { SvgIconProps } from '@fluentui-react-native/icon';
@@ -65,6 +65,19 @@ export const BasicBadge: React.FunctionComponent = () => {
       <Text>Compressible badge</Text>
       <CompressibleBadge />
       <CompressibleBadge text="Basic compressible" />
+      {svgIconsEnabled && (
+        <>
+          <Text>Presence Badge</Text>
+          <PresenceBadge presence="available" size="largest" />
+          <PresenceBadge presence="available" isOutOfOffice={true} size="large" />
+          <PresenceBadge presence="doNotDisturb" text="doNotDisturb" isOutOfOffice={true} />
+          <PresenceBadge presence="away" size="small" />
+          <PresenceBadge presence="busy" size="smallest" />
+          <PresenceBadge presence="offline" />
+          <PresenceBadge presence="outOfOffice" />
+          <PresenceBadge presence="away" />
+        </>
+      )}
     </View>
   );
 };

package/src/FluentTester/TestComponents/ButtonExperimental/ButtonHOCTestSection.tsx

@@ -0,0 +1,43 @@
+import { Button } from '@fluentui-react-native/experimental-button';
+import { Text } from '@fluentui-react-native/experimental-text';
+import { Icon } from '@fluentui-react-native/icon';
+import * as React from 'react';
+import { View } from 'react-native';
+import { commonTestStyles, stackStyle } from '../Common/styles';
+
+export const ButtonHOCTest: React.FunctionComponent = () => {
+  const buttonRef = React.useRef(null);
+  const CustomText = Text.customize({ fontSize: 'header', color: 'hotpink' });
+  const CustomButton = Button.customize({ backgroundColor: 'pink' });
+  const ComposedButton = Button.compose({
+    slots: {
+      root: View,
+      icon: Icon,
+      content: CustomText,
+    },
+    slotProps: {
+      content: {
+        style: { marginTop: -1, marginBottom: 1, marginStart: 0, marginEnd: -2 },
+      },
+    },
+  });
+
+  return (
+    <View style={stackStyle}>
+      <CustomButton style={commonTestStyles.vmargin} componentRef={buttonRef}>
+        Customized Button with ref
+      </CustomButton>
+      <Button
+        style={commonTestStyles.vmargin}
+        onClick={() => {
+          if (buttonRef.current) {
+            buttonRef.current.focus();
+          }
+        }}
+      >
+        Press to focus Customized Button
+      </Button>
+      <ComposedButton style={commonTestStyles.vmargin}>Composed button using customized Text for text slot</ComposedButton>
+    </View>
+  );
+};

package/src/FluentTester/TestComponents/ButtonExperimental/ButtonTest.tsx

@@ -7,6 +7,7 @@ import { ButtonIconTest } from './ButtonIconTestSection';
 import { ButtonSizeTest } from './ButtonSizeTestSection';
 import { ButtonShapeTest } from './ButtonShapeTestSection';
 import { E2EButtonExperimentalTest } from './E2EButtonTest';
+import { ButtonHOCTest } from './ButtonHOCTestSection';
 
 const buttonSections: TestSection[] = [
   {
@@ -30,6 +31,10 @@ const buttonSections: TestSection[] = [
     name: 'Sizes',
     component: ButtonSizeTest,
   },
+  {
+    name: 'Customize, Compose, and Ref',
+    component: ButtonHOCTest,
+  },
   {
     name: 'E2E Button Testing',
     component: E2EButtonExperimentalTest,

package/src/FluentTester/TestComponents/ContextualMenu/E2EContextualMenuTest.tsx

@@ -2,7 +2,7 @@
 import * as React from 'react';
 import { Text, View, Switch } from 'react-native';
 import { Button, ContextualMenu, ContextualMenuItem, Separator } from '@fluentui/react-native';
-import { CONTEXTUALMENUITEM_TEST_COMPONENT } from './consts';
+import { CONTEXTUALMENUITEM_TEST_COMPONENT, CONTEXTUALMENU_TEST_COMPONENT } from './consts';
 
 export const E2EContextualMenuTest: React.FunctionComponent = () => {
   const stdBtnRef = React.useRef(null);
@@ -75,7 +75,12 @@ export const E2EContextualMenuTest: React.FunctionComponent = () => {
               <Text style={{ color: 'blue' }}>none</Text>
             )}
           </Text>
-          <Button content="Press for ContextualMenu" onClick={toggleShowContextualMenu} componentRef={stdBtnRef} />
+          <Button
+            content="Press for ContextualMenu"
+            onClick={toggleShowContextualMenu}
+            componentRef={stdBtnRef}
+            testID={CONTEXTUALMENU_TEST_COMPONENT}
+          />
         </View>
       </View>
 

package/src/FluentTester/TestComponents/MenuButton/consts.ts

@@ -1,9 +1,10 @@
-export const HOMEPAGE_MENU_BUTTON = 'Homepage_Menu_Button';
-export const MENU_BUTTON_TESTPAGE = 'Menu_Button_TestPage';
+export const HOMEPAGE_MENU_BUTTON = 'Homepage_MenuButton_Button';
+export const MENU_BUTTON_TESTPAGE = 'MenuButton_TestPage';
 
 /* E2E Testing Menu_Button 1 */
 export const MENU_BUTTON_TEST_COMPONENT = 'Menu_Button_Test_Component'; // A component on each specific test page
 export const MENU_BUTTON_ACCESSIBILITY_LABEL = 'E2E testing Menu_Button accessibility label';
+export const MENU_ITEM_1_COMPONENT = 'Menu_Item_1_Component'; // The first menu item component
 
 /* E2E Testing Menu_Button 2 */
 export const MENU_BUTTON_NO_A11Y_LABEL_COMPONENT = 'Menu_Button_No_A11y_label_Component';