@fluentui-react-native/tester 0.47.3 → 0.50.0

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

@@ -0,0 +1,172 @@
+const DUMMY_CHAR = '';
+export const COMPONENT_SCROLL_COORDINATES = { x: -0, y: -100 }; // These are the offsets. Y is negative because we want the touch to move up (and thus it scrolls down)
+
+/* Win32/UWP-Specific Selector. We use this to get elements on the test page */
+export function By(identifier: string): WebdriverIO.Element {
+  return $('~' + identifier);
+}
+
+/* The values in this enum map to the UI components we want to test in our app. We use this to
+make the communication from our spec document to our page object easier. Please read below to
+see why we have Primary/Secondary components. */
+export const enum ComponentSelector {
+  Primary = 0, // this._primaryComponent
+  Secondary, // this._secondaryComponent
+}
+
+/****************************** IMPORTANT! PLEASE READ! **************************************************
+ * Every component's page object extends this. We can assume each test page will interact with at least
+ * two UI elements, so we'll add integration for two UI elements in this file (See *Getters* section below).
+ * Every additional UI element that a test page wants to interact with should be handled in that respective
+ * component's page object.
+ *********************************************************************************************************/
+
+export class BasePage {
+  /******************************************************************/
+  /**************** UI Element Interaction Methods ******************/
+  /******************************************************************/
+  getAccessibilityRole(): string {
+    return this._primaryComponent.getAttribute('ControlType');
+  }
+
+  /* Gets the accessibility label of an UI element given the selector */
+  getAccessibilityLabel(componentSelector: ComponentSelector): string {
+    switch (componentSelector) {
+      case ComponentSelector.Primary:
+        return this._primaryComponent.getAttribute('Name');
+
+      case ComponentSelector.Secondary:
+        return this._secondaryComponent.getAttribute('Name');
+    }
+  }
+
+  /* Returns true if the test page has loaded. To determine if it's loaded, each test page has a specific UI element we attempt to locate.
+   * If this UI element is located, we know the page as loaded correctly. The UI element we look for is a Text component that contains
+   * the title of the page (this._testPage returns that UI element)  */
+  isPageLoaded(): boolean {
+    return this._testPage.isDisplayed();
+  }
+
+  /* Returns true if the test page's button is displayed (the button that navigates to each test page) */
+  isButtonInView(): boolean {
+    return this._pageButton.isDisplayed();
+  }
+
+  /* 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 {
+    if (!this.isButtonInView()) {
+      const scrollViewElement = $('~SCROLLVIEW_TEST_ID');
+      driver.touchScroll(COMPONENT_SCROLL_COORDINATES.x, COMPONENT_SCROLL_COORDINATES.y, scrollViewElement.elementId);
+    }
+  }
+
+  /* Waits for the test page to load. If the test page doesn't load before the timeout, it causes the test to fail. */
+  waitForPageDisplayed(timeout?: number): void {
+    browser.waitUntil(
+      () => {
+        return this.isPageLoaded();
+      },
+      {
+        timeout: timeout ?? this.waitForPageTimeout,
+        timeoutMsg: this._pageName + ' did not render correctly. Please see /errorShots for more information.',
+        interval: 1000,
+      },
+    );
+  }
+
+  /* Waits for the test page's button to be displayed. If the button doesn't load before the timeout, it causes the test to fail. */
+  waitForButtonDisplayed(timeout?: number): void {
+    browser.waitUntil(
+      () => {
+        return this.isButtonInView();
+      },
+      {
+        timeout: timeout ?? this.waitForPageTimeout,
+        timeoutMsg: 'Could not find the button to navigate to ' + this._pageName + '. Please see /errorShots for more information.',
+        interval: 1000,
+      },
+    );
+  }
+
+  /* Waits for the primary UI test element to be displayed. If the element doesn't load before the timeout, it causes the test to fail. */
+  waitForPrimaryElementDisplayed(timeout?: number): void {
+    browser.waitUntil(
+      () => {
+        return this._primaryComponent.isDisplayed();
+      },
+      {
+        timeout: timeout ?? this.waitForPageTimeout,
+        timeoutMsg:
+          'The primary UI element for testing did not display correctly. Please see /errorShots of the first failed test for more information.',
+        interval: 1000,
+      },
+    );
+  }
+
+  /* Scrolls to the primary UI test element until it is displayed. It uses the ScrollView that encapsulates each test page. */
+  scrollToTestElement(): void {
+    while (!this._primaryComponent.isDisplayed()) {
+      driver.touchScroll(COMPONENT_SCROLL_COORDINATES.x, COMPONENT_SCROLL_COORDINATES.y, $('~ScrollViewAreaForComponents').elementId);
+    }
+  }
+
+  /* A method that allows the caller to pass in a condition. A wrapper for waitUntil(). Once testing becomes more extensive,
+   * this will allow cleaner code within all the Page Objects. */
+  waitForCondition(condition?: () => boolean, errorMsg?: string, timeout?: number): void {
+    browser.waitUntil(
+      () => {
+        return condition();
+      },
+      {
+        timeout: timeout ?? this.waitForPageTimeout,
+        timeoutMsg: errorMsg ?? 'Error. Please see /errorShots and logs for more information.',
+        interval: 1000,
+      },
+    );
+  }
+
+  /*****************************************/
+  /**************** Getters ****************/
+  /*****************************************/
+
+  /*  IMPORTANT:
+   *  Each PageObject class that extends this class is expected to override these values.
+   *  This is necessary because each page will have different IDs for their respective UI elements.
+   *  DUMMY_CHAR is just a placeholder.
+   */
+
+  // Returns: UI Element
+  // The Text component on each test page containing the title of that page. We can use this to determine if a test page has loaded correctly.
+  get _testPage(): WebdriverIO.Element {
+    return By(DUMMY_CHAR);
+  }
+
+  // Returns: UI Element
+  // The primary UI element used for testing on the given test page.
+  get _primaryComponent(): WebdriverIO.Element {
+    return By(DUMMY_CHAR);
+  }
+
+  // Returns: UI Element
+  // The secondary UI element used for testing on the given test page. Often times, we'll want to set a
+  // prop on one component, and not set it on another to verify certain behaviors. This is why we have this secondary component.
+  get _secondaryComponent(): WebdriverIO.Element {
+    return By(DUMMY_CHAR);
+  }
+
+  // Returns: UI Element
+  // The button that navigates you to the component's test page.
+  get _pageButton(): WebdriverIO.Element {
+    return By(DUMMY_CHAR);
+  }
+
+  // Returns: String
+  // Returns the name of the test page. Useful for error messages (see above).
+  get _pageName(): string {
+    return DUMMY_CHAR;
+  }
+
+  // Default timeout to wait until page is displayed (10s)
+  waitForPageTimeout: number = 15000;
+}

package/src/E2E/common/NavigateAppPage.macos.ts

@@ -0,0 +1,185 @@
+import { HOMEPAGE_CHECKBOX_BUTTON } from '../../FluentTester/TestComponents/Checkbox/consts';
+import { HOMEPAGE_BUTTON_BUTTON } from '../../FluentTester/TestComponents/Button/consts';
+import { HOMEPAGE_CALLOUT_BUTTON } from '../../FluentTester/TestComponents/Callout/consts';
+import { HOMEPAGE_CONTEXTUALMENU_BUTTON } from '../../FluentTester/TestComponents/ContextualMenu/consts';
+import { HOMEPAGE_EXPERIMENTAL_TABS_BUTTON } from '../../FluentTester/TestComponents/TabsExperimental/consts';
+import { HOMEPAGE_FOCUSTRAPZONE_BUTTON } from '../../FluentTester/TestComponents/FocusTrapZone/consts';
+import { HOMEPAGE_FOCUSZONE_BUTTON } from '../../FluentTester/TestComponents/FocusZone/consts';
+import { HOMEPAGE_ICON_BUTTON } from '../../FluentTester/TestComponents/Icon/consts';
+import { HOMEPAGE_LINK_BUTTON } from '../../FluentTester/TestComponents/Link/consts';
+import { HOMEPAGE_MENU_BUTTON } from '../../FluentTester/TestComponents/MenuButton/consts';
+import { HOMEPAGE_PERSONA_BUTTON } from '../../FluentTester/TestComponents/Persona/consts';
+import { HOMEPAGE_PERSONACOIN_BUTTON } from '../../FluentTester/TestComponents/PersonaCoin/consts';
+import { HOMEPAGE_PRESSABLE_BUTTON } from '../../FluentTester/TestComponents/Pressable/consts';
+import { HOMEPAGE_RADIOGROUP_BUTTON } from '../../FluentTester/TestComponents/RadioGroup/consts';
+import { HOMEPAGE_SEPARATOR_BUTTON } from '../../FluentTester/TestComponents/Separator/consts';
+import { HOMEPAGE_SVG_BUTTON } from '../../FluentTester/TestComponents/Svg/consts';
+import { HOMEPAGE_TEXT_BUTTON } from '../../FluentTester/TestComponents/Text/consts';
+import { HOMEPAGE_TABS_BUTTON } from '../../FluentTester/TestComponents/Tabs/consts';
+import { HOMEPAGE_THEME_BUTTON } from '../../FluentTester/TestComponents/Theme/consts';
+import { BASE_TESTPAGE } from '../../FluentTester/TestComponents/Common/consts';
+import { By, BasePage } from './BasePage.macos';
+
+class NavigateAppPage extends BasePage {
+  clickAndGoToButtonPage() {
+    this.buttonPage.click();
+  }
+
+  clickAndGoToCalloutPage() {
+    this.calloutPage.click();
+  }
+
+  clickAndGoToCheckboxPage() {
+    this.checkboxPage.click();
+  }
+
+  clickAndGoToContextualMenuPage() {
+    this.contextualMenuPage.click();
+  }
+
+  clickAndGoToFocusTrapZonePage() {
+    this.focusTrapZonePage.click();
+  }
+
+  clickAndGoToFocusZonePage() {
+    this.focusZonePage.click();
+  }
+
+  clickAndGoToIconPage() {
+    this.iconPage.click();
+  }
+
+  clickAndGoToLinkPage() {
+    this.linkPage.click();
+  }
+
+  clickAndGoToMenuButtonPage() {
+    this.menuButtonPage.click();
+  }
+
+  clickAndGoToPersonaPage() {
+    this.personaPage.click();
+  }
+
+  clickAndGoToPersonaCoinPage() {
+    this.personaCoinPage.click();
+  }
+
+  clickAndGoToPressablePage() {
+    this.pressablePage.click();
+  }
+
+  clickAndGoToRadioGroupPage() {
+    this.radioGroupPage.click();
+  }
+
+  clickAndGoToSeparatorPage() {
+    this.separatorPage.click();
+  }
+
+  clickAndGoToSvgPage() {
+    this.svgPage.click();
+  }
+
+  clickAndGoToTextPage() {
+    this.textPage.click();
+  }
+
+  clickAndGoToTabsPage() {
+    this.tabsPage.click();
+  }
+
+  clickAndGoToThemePage() {
+    this.themePage.click();
+  }
+
+  clickAndGoToExperimentalTabsPage() {
+    this.experimentalTabsPage.click();
+  }
+
+  /*
+   ** Returns the StealthButton element on the left-hand column that navigates to each page
+   */
+
+  get _testPage() {
+    return By(BASE_TESTPAGE);
+  }
+
+  private get buttonPage() {
+    return By(HOMEPAGE_BUTTON_BUTTON);
+  }
+
+  private get calloutPage() {
+    return By(HOMEPAGE_CALLOUT_BUTTON);
+  }
+
+  private get checkboxPage() {
+    return By(HOMEPAGE_CHECKBOX_BUTTON);
+  }
+
+  private get contextualMenuPage() {
+    return By(HOMEPAGE_CONTEXTUALMENU_BUTTON);
+  }
+
+  private get focusTrapZonePage() {
+    return By(HOMEPAGE_FOCUSTRAPZONE_BUTTON);
+  }
+
+  private get focusZonePage() {
+    return By(HOMEPAGE_FOCUSZONE_BUTTON);
+  }
+
+  private get iconPage() {
+    return By(HOMEPAGE_ICON_BUTTON);
+  }
+
+  private get linkPage() {
+    return By(HOMEPAGE_LINK_BUTTON);
+  }
+
+  private get menuButtonPage() {
+    return By(HOMEPAGE_MENU_BUTTON);
+  }
+
+  private get personaPage() {
+    return By(HOMEPAGE_PERSONA_BUTTON);
+  }
+
+  private get personaCoinPage() {
+    return By(HOMEPAGE_PERSONACOIN_BUTTON);
+  }
+
+  private get pressablePage() {
+    return By(HOMEPAGE_PRESSABLE_BUTTON);
+  }
+
+  private get radioGroupPage() {
+    return By(HOMEPAGE_RADIOGROUP_BUTTON);
+  }
+
+  private get separatorPage() {
+    return By(HOMEPAGE_SEPARATOR_BUTTON);
+  }
+
+  private get svgPage() {
+    return By(HOMEPAGE_SVG_BUTTON);
+  }
+
+  private get textPage() {
+    return By(HOMEPAGE_TEXT_BUTTON);
+  }
+
+  private get tabsPage() {
+    return By(HOMEPAGE_TABS_BUTTON);
+  }
+
+  private get themePage() {
+    return By(HOMEPAGE_THEME_BUTTON);
+  }
+
+  private get experimentalTabsPage() {
+    return By(HOMEPAGE_EXPERIMENTAL_TABS_BUTTON);
+  }
+}
+
+export default new NavigateAppPage();

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

@@ -0,0 +1,194 @@
+import { HOMEPAGE_CHECKBOX_BUTTON } from '../../FluentTester/TestComponents/Checkbox/consts';
+import { HOMEPAGE_BUTTON_BUTTON } from '../../FluentTester/TestComponents/Button/consts';
+import { HOMEPAGE_BUTTON_BUTTONEXPERIMENTAL } from '../../FluentTester/TestComponents/ButtonExperimental/consts';
+import { HOMEPAGE_CALLOUT_BUTTON } from '../../FluentTester/TestComponents/Callout/consts';
+import { HOMEPAGE_CONTEXTUALMENU_BUTTON } from '../../FluentTester/TestComponents/ContextualMenu/consts';
+import { HOMEPAGE_EXPERIMENTAL_TABS_BUTTON } from '../../FluentTester/TestComponents/TabsExperimental/consts';
+import { HOMEPAGE_FOCUSTRAPZONE_BUTTON } from '../../FluentTester/TestComponents/FocusTrapZone/consts';
+import { HOMEPAGE_FOCUSZONE_BUTTON } from '../../FluentTester/TestComponents/FocusZone/consts';
+import { HOMEPAGE_ICON_BUTTON } from '../../FluentTester/TestComponents/Icon/consts';
+import { HOMEPAGE_LINK_BUTTON } from '../../FluentTester/TestComponents/Link/consts';
+import { HOMEPAGE_MENU_BUTTON } from '../../FluentTester/TestComponents/MenuButton/consts';
+import { HOMEPAGE_PERSONA_BUTTON } from '../../FluentTester/TestComponents/Persona/consts';
+import { HOMEPAGE_PERSONACOIN_BUTTON } from '../../FluentTester/TestComponents/PersonaCoin/consts';
+import { HOMEPAGE_PRESSABLE_BUTTON } from '../../FluentTester/TestComponents/Pressable/consts';
+import { HOMEPAGE_RADIOGROUP_BUTTON } from '../../FluentTester/TestComponents/RadioGroup/consts';
+import { HOMEPAGE_SEPARATOR_BUTTON } from '../../FluentTester/TestComponents/Separator/consts';
+import { HOMEPAGE_SVG_BUTTON } from '../../FluentTester/TestComponents/Svg/consts';
+import { HOMEPAGE_TEXT_BUTTON } from '../../FluentTester/TestComponents/Text/consts';
+import { HOMEPAGE_TABS_BUTTON } from '../../FluentTester/TestComponents/Tabs/consts';
+import { HOMEPAGE_THEME_BUTTON } from '../../FluentTester/TestComponents/Theme/consts';
+import { BASE_TESTPAGE } from '../../FluentTester/TestComponents/Common/consts';
+import { By, BasePage } from './BasePage.win';
+
+class NavigateAppPage extends BasePage {
+  clickAndGoToButtonPage() {
+    this.buttonPage.click();
+  }
+
+  clickAndGoToCalloutPage() {
+    this.calloutPage.click();
+  }
+
+  clickAndGoToCheckboxPage() {
+    this.checkboxPage.click();
+  }
+
+  clickAndGoToContextualMenuPage() {
+    this.contextualMenuPage.click();
+  }
+
+  clickAndGoToFocusTrapZonePage() {
+    this.focusTrapZonePage.click();
+  }
+
+  clickAndGoToFocusZonePage() {
+    this.focusZonePage.click();
+  }
+
+  clickAndGoToIconPage() {
+    this.iconPage.click();
+  }
+
+  clickAndGoToLinkPage() {
+    this.linkPage.click();
+  }
+
+  clickAndGoToMenuButtonPage() {
+    this.menuButtonPage.click();
+  }
+
+  clickAndGoToPersonaPage() {
+    this.personaPage.click();
+  }
+
+  clickAndGoToPersonaCoinPage() {
+    this.personaCoinPage.click();
+  }
+
+  clickAndGoToPressablePage() {
+    this.pressablePage.click();
+  }
+
+  clickAndGoToRadioGroupPage() {
+    this.radioGroupPage.click();
+  }
+
+  clickAndGoToSeparatorPage() {
+    this.separatorPage.click();
+  }
+
+  clickAndGoToSvgPage() {
+    this.svgPage.click();
+  }
+
+  clickAndGoToTextPage() {
+    this.textPage.click();
+  }
+
+  clickAndGoToTabsPage() {
+    this.tabsPage.click();
+  }
+
+  clickAndGoToThemePage() {
+    this.themePage.click();
+  }
+
+  clickAndGoToExperimentalButtonPage() {
+    this.experimentalButtonPage.click();
+  }
+
+  clickAndGoToExperimentalTabsPage() {
+    this.experimentalTabsPage.click();
+  }
+
+  /*
+   ** Returns the StealthButton element on the left-hand column that navigates to each page
+   */
+
+  get _testPage() {
+    return By(BASE_TESTPAGE);
+  }
+
+  private get buttonPage() {
+    return By(HOMEPAGE_BUTTON_BUTTON);
+  }
+
+  private get calloutPage() {
+    return By(HOMEPAGE_CALLOUT_BUTTON);
+  }
+
+  private get checkboxPage() {
+    return By(HOMEPAGE_CHECKBOX_BUTTON);
+  }
+
+  private get contextualMenuPage() {
+    return By(HOMEPAGE_CONTEXTUALMENU_BUTTON);
+  }
+
+  private get focusTrapZonePage() {
+    return By(HOMEPAGE_FOCUSTRAPZONE_BUTTON);
+  }
+
+  private get focusZonePage() {
+    return By(HOMEPAGE_FOCUSZONE_BUTTON);
+  }
+
+  private get iconPage() {
+    return By(HOMEPAGE_ICON_BUTTON);
+  }
+
+  private get linkPage() {
+    return By(HOMEPAGE_LINK_BUTTON);
+  }
+
+  private get menuButtonPage() {
+    return By(HOMEPAGE_MENU_BUTTON);
+  }
+
+  private get personaPage() {
+    return By(HOMEPAGE_PERSONA_BUTTON);
+  }
+
+  private get personaCoinPage() {
+    return By(HOMEPAGE_PERSONACOIN_BUTTON);
+  }
+
+  private get pressablePage() {
+    return By(HOMEPAGE_PRESSABLE_BUTTON);
+  }
+
+  private get radioGroupPage() {
+    return By(HOMEPAGE_RADIOGROUP_BUTTON);
+  }
+
+  private get separatorPage() {
+    return By(HOMEPAGE_SEPARATOR_BUTTON);
+  }
+
+  private get svgPage() {
+    return By(HOMEPAGE_SVG_BUTTON);
+  }
+
+  private get textPage() {
+    return By(HOMEPAGE_TEXT_BUTTON);
+  }
+
+  private get tabsPage() {
+    return By(HOMEPAGE_TABS_BUTTON);
+  }
+
+  private get themePage() {
+    return By(HOMEPAGE_THEME_BUTTON);
+  }
+
+  private get experimentalButtonPage() {
+    return By(HOMEPAGE_BUTTON_BUTTONEXPERIMENTAL);
+  }
+
+  private get experimentalTabsPage() {
+    return By(HOMEPAGE_EXPERIMENTAL_TABS_BUTTON);
+  }
+}
+
+export default new NavigateAppPage();

package/src/E2E/common/consts.ts

@@ -0,0 +1,15 @@
+/* Accessibility Role Control Types - https://docs.microsoft.com/en-us/windows/win32/winauto/uiauto-controltype-ids */
+export const BUTTON_A11Y_ROLE = 'ControlType.Button';
+export const CALLOUT_A11Y_ROLE = 'ControlType.Group';
+export const CHECKBOX_A11Y_ROLE = 'ControlType.CheckBox';
+export const LINK_A11Y_ROLE = 'ControlType.HyperLink';
+export const MENUBUTTON_A11Y_ROLE = 'ControlType.Button';
+export const RADIOBUTTON_A11Y_ROLE = 'ControlType.RadioButton';
+export const RADIOGROUP_A11Y_ROLE = 'ControlType.List';
+export const TAB_A11Y_ROLE = 'ControlType.Tab';
+export const TABITEM_A11Y_ROLE = 'ControlType.TabItem';
+export const TEXT_A11Y_ROLE = 'ControlType.Text';
+
+/* Jasmine Timeouts */
+export const BOOT_APP_TIMEOUT = 60000;
+export const PAGE_TIMEOUT = 15000;

package/src/FluentTester/FluentTester.tsx

@@ -115,12 +115,13 @@ export const FluentTester: React.FunctionComponent<FluentTesterProps> = (props:
         <View style={fluentTesterStyles.header}>
           {/* on iOS, display a back Button */}
           <Button
-            subtle
-            content="‹ Back"
+            appearance="subtle"
             style={{ alignSelf: 'flex-start', display: Platform.OS === 'ios' ? 'flex' : 'none' }}
             onClick={onBackPress}
             disabled={onTestListView}
-          />
+          >
+            ‹ Back
+          </Button>
           <ThemePickers />
         </View>
       </View>
@@ -137,14 +138,15 @@ export const FluentTester: React.FunctionComponent<FluentTesterProps> = (props:
           {sortedTestComponents.map((description, index) => {
             return (
               <Button
-                subtle
+                appearance="subtle"
                 key={index}
                 disabled={index == selectedTestIndex}
-                content={description.name}
                 onClick={() => setSelectedTestIndex(index)}
                 style={fluentTesterStyles.testListItem}
                 testID={description.testPage}
-              />
+              >
+                {description.name}
+              </Button>
             );
           })}
         </ScrollView>

package/src/FluentTester/TestComponents/Avatar/AvatarTest.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Avatar, Size } from '@fluentui-react-native/experimental-avatar';
+import { Avatar, Size } from '@fluentui-react-native/experimental-avatar/';
 import { Text } from '@fluentui/react-native';
 import { Stack } from '@fluentui-react-native/stack';
 import { AVATAR_TESTPAGE } from './consts';