@fluentui-react-native/tester 0.99.14 → 0.100.0

package/src/E2E/common/BasePage.ts

@@ -1,3 +1,6 @@
+import { Keys } from './consts';
+import { TESTPAGE_BUTTONS_SCROLLVIEWER } from '../../TestComponents/Common/consts';
+
 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)
 
@@ -66,19 +69,43 @@ export class BasePage {
   /* 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 */
   async scrollToComponentButton(platform: Platform): Promise<void> {
+    if (await (await this._pageButton).isDisplayed()) {
+      return;
+    }
+
+    const errorMsg =
+      'Could not scroll to the ' + this._pageName + "'s Button. Please see Pipeline artifacts for more debugging information.";
+
     switch (platform) {
-      case Platform.Win32:
-        while (!(await this.isButtonInView())) {
-          const scrollViewElement = await By('SCROLLVIEW_TEST_ID');
-          await driver.touchScroll(COMPONENT_SCROLL_COORDINATES.x, COMPONENT_SCROLL_COORDINATES.y, scrollViewElement.elementId);
-        }
+      case Platform.Win32: {
+        const scrollDownKeys = [Keys.PAGE_DOWN];
+        await browser.waitUntil(
+          async () => {
+            await (await this._firstTestPageButton).addValue(scrollDownKeys);
+            scrollDownKeys.push(Keys.PAGE_DOWN);
+            return await (await this._pageButton).isDisplayed();
+          },
+          {
+            timeout: this.waitForUiEvent,
+            timeoutMsg: errorMsg,
+          },
+        );
         break;
-
-      case Platform.iOS:
-        while (!(await this.isButtonInView())) {
-          await driver.execute('mobile: scroll', { direction: 'down' });
-        }
+      }
+
+      case Platform.iOS: {
+        await browser.waitUntil(
+          async () => {
+            await driver.execute('mobile: scroll', { direction: 'down' });
+            return await (await this._pageButton).isDisplayed();
+          },
+          {
+            timeout: this.waitForUiEvent,
+            timeoutMsg: errorMsg,
+          },
+        );
         break;
+      }
 
       case Platform.macOS:
         // Not needed for macOS. It automatically scrolls
@@ -94,7 +121,7 @@ export class BasePage {
   /* Waits for the test page to load. If the test page doesn't load before the timeout, it causes the test to fail. */
   async waitForPageDisplayed(timeout?: number): Promise<void> {
     await browser.waitUntil(async () => await this.isPageLoaded(), {
-      timeout: timeout ?? this.waitForPageTimeout,
+      timeout: timeout ?? this.waitForUiEvent,
       timeoutMsg: this._pageName + ' did not render correctly. Please see /errorShots for more information.',
       interval: 1500,
     });
@@ -103,7 +130,7 @@ export class BasePage {
   /* 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. */
   async waitForButtonDisplayed(timeout?: number): Promise<void> {
     await browser.waitUntil(async () => await this.isButtonInView(), {
-      timeout: timeout ?? this.waitForPageTimeout,
+      timeout: timeout ?? this.waitForUiEvent,
       timeoutMsg: 'Could not find the button to navigate to ' + this._pageName + '. Please see /errorShots for more information.',
       interval: 1500,
     });
@@ -112,27 +139,47 @@ export class BasePage {
   /* 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. */
   async waitForPrimaryElementDisplayed(timeout?: number): Promise<void> {
     await browser.waitUntil(async () => await this._primaryComponent.isDisplayed(), {
-      timeout: timeout ?? this.waitForPageTimeout,
+      timeout: timeout ?? this.waitForUiEvent,
       timeoutMsg:
         'The primary UI element for testing did not display correctly. Please see /errorShots of the first failed test for more information.',
       interval: 1500,
     });
   }
 
-  /* Scrolls to the primary UI test element until it is displayed. It uses the ScrollView that encapsulates each test page. */
-  async scrollToTestElement(): Promise<void> {
-    const ScrollViewerID = await By('ScrollViewAreaForComponents').elementId;
-    while (!(await this._primaryComponent.isDisplayed())) {
-      await driver.touchScroll(COMPONENT_SCROLL_COORDINATES.x, COMPONENT_SCROLL_COORDINATES.y, ScrollViewerID);
+  /* Scrolls to the primary UI test element until it is displayed. */
+  async scrollToTestElement(component?: WebdriverIO.Element): Promise<void> {
+    const ComponentToScrollTo = component ?? (await this._primaryComponent);
+    if (await ComponentToScrollTo.isDisplayed()) {
+      return;
     }
-    await driver.touchScroll(COMPONENT_SCROLL_COORDINATES.x, COMPONENT_SCROLL_COORDINATES.y, ScrollViewerID);
+
+    // This button is at the top of every test page. It allows us to put focus in the test page pane so we can type PageDown
+    const FocusButton = await By('Focus_Button');
+    const scrollDownKeys = [Keys.PAGE_DOWN];
+    await browser.waitUntil(
+      async () => {
+        await FocusButton.addValue(scrollDownKeys);
+        scrollDownKeys.push(Keys.PAGE_DOWN);
+        return await ComponentToScrollTo.isDisplayed();
+      },
+      {
+        timeout: 30000,
+        timeoutMsg:
+          'Could not scroll to the ' +
+          this._pageName +
+          "'s main test element. Please see Pipeline artifacts for more debugging information.",
+      },
+    );
+
+    // We have this extra scroll here to ensure the whole component is visible.
+    await FocusButton.addValue(scrollDownKeys);
   }
 
   /* 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. */
   async waitForCondition(condition?: () => Promise<boolean>, errorMsg?: string, timeout?: number): Promise<void> {
     await browser.waitUntil(async () => await condition(), {
-      timeout: timeout ?? this.waitForPageTimeout,
+      timeout: timeout ?? this.waitForUiEvent,
       timeoutMsg: errorMsg ?? 'Error. Please see /errorShots and logs for more information.',
       interval: 1000,
     });
@@ -156,6 +203,21 @@ export class BasePage {
     return windowHandles.length > 1;
   }
 
+  /* Finds the first test page button in the ScrollView */
+  async SetFirstScrollViewButtonChild() {
+    const TestChildren = await (await this._testPageButtonScrollViewer).$$('//*');
+    const reg = new RegExp('Homepage_[a-zA-Z]*_Button');
+
+    for (const child of TestChildren) {
+      const autoId = await child.getAttribute('AutomationId');
+      if (autoId && autoId !== TESTPAGE_BUTTONS_SCROLLVIEWER && autoId.match(reg)) {
+        return await child;
+      }
+    }
+
+    return null;
+  }
+
   /*****************************************/
   /**************** Getters ****************/
   /*****************************************/
@@ -197,6 +259,15 @@ export class BasePage {
     return DUMMY_CHAR;
   }
 
+  // The scrollviewer containing the list of buttons to navigate to each test page
+  get _testPageButtonScrollViewer() {
+    return By(TESTPAGE_BUTTONS_SCROLLVIEWER);
+  }
+
+  get _firstTestPageButton() {
+    return this.SetFirstScrollViewButtonChild();
+  }
+
   /****************** Error Messages ******************/
   get ERRORMESSAGE_SUFFIX(): string {
     return 'Please review logs and error screenshots for more information.';
@@ -215,5 +286,5 @@ export class BasePage {
   }
 
   // Default timeout to wait until page is displayed (10s)
-  waitForPageTimeout: number = 15000;
+  waitForUiEvent: number = 25000;
 }

package/src/E2E/common/NativeTesting/pages/NativeTestingPageObject.win.ts

@@ -1,11 +1,10 @@
-import { BasePage, By } from '../../../common/BasePage';
-
-const ScrollViewTestId = 'SCROLLVIEW_TEST_ID';
+import { BasePage } from '../../../common/BasePage';
+import { TESTPAGE_BUTTONS_SCROLLVIEWER } from '../../../../TestComponents/Common/consts';
 
 class NativeTestingPageObject extends BasePage {
   async waitForScrollViewDisplayed(timeout?: number): Promise<void> {
     await browser.waitUntil(async () => await this.doesScrollViewParentExist(), {
-      timeout: timeout ?? this.waitForPageTimeout,
+      timeout: timeout ?? this.waitForUiEvent,
       timeoutMsg:
         'For testing purposes we require that the root view contains a non-empty, immutable ScrollView of buttons that navigate to test pages.',
       interval: 1000,
@@ -13,14 +12,14 @@ class NativeTestingPageObject extends BasePage {
   }
 
   async doesScrollViewParentExist(): Promise<boolean> {
-    return await this._scrollViewParent.isExisting();
+    return await this._testPageButtonScrollViewer.isDisplayed();
   }
 
   /* Validate the Children of the ScrollView stay intact. The children are the buttons that
    * navigate to each test page. Also, validate these children exist with the proper testId format */
   async validateScrollViewChildren(): Promise<boolean> {
     // Gets all the children
-    const testChildren = await this._scrollViewParent.$$('//*');
+    const testChildren = await this._testPageButtonScrollViewer.$$('//*');
     let foundValidButton = false;
 
     // Ensure the testID (maps 1:1 to automationId) properties of the button children match the defined testing format
@@ -30,7 +29,7 @@ class NativeTestingPageObject extends BasePage {
     // If automationId is found in the wrong format, return false.
     for await (const child of testChildren) {
       const autoId = await child.getAttribute('AutomationId');
-      if (autoId && autoId !== ScrollViewTestId) {
+      if (autoId && autoId !== TESTPAGE_BUTTONS_SCROLLVIEWER) {
         if (autoId.match(reg)) {
           foundValidButton = true;
         } else {
@@ -42,10 +41,6 @@ class NativeTestingPageObject extends BasePage {
 
     return foundValidButton;
   }
-
-  get _scrollViewParent() {
-    return By(ScrollViewTestId);
-  }
 }
 
 export default new NativeTestingPageObject();

package/src/E2E/common/consts.ts

@@ -18,11 +18,64 @@ export const PAGE_TIMEOUT = 15000;
 
 /* Keyboard Key Constants */
 export const enum Keys {
-  Up_Arrow = 'ArrowUp',
-  Right_Arrow = 'ArrowRight',
-  Down_Arrow = 'ArrowDown',
-  Left_Arrow = 'ArrowLeft',
-  Spacebar = ' ',
-  Enter = 'Enter',
-  Escape = 'Escape',
+  NULL = '\uE000',
+  CANCEL = '\uE001', // ^break
+  HELP = '\uE002',
+  BACK_SPACE = '\uE003',
+  TAB = '\uE004',
+  CLEAR = '\uE005',
+  RETURN = '\uE006',
+  ENTER = '\uE007',
+  SHIFT = '\uE008',
+  CONTROL = '\uE009',
+  ALT = '\uE00A',
+  PAUSE = '\uE00B',
+  ESCAPE = '\uE00C',
+  SPACE = '\uE00D',
+  PAGE_UP = '\uE00E',
+  PAGE_DOWN = '\uE00F',
+  END = '\uE010',
+  HOME = '\uE011',
+  ARROW_LEFT = '\uE012',
+  LEFT = '\uE012',
+  ARROW_UP = '\uE013',
+  UP = '\uE013',
+  ARROW_RIGHT = '\uE014',
+  RIGHT = '\uE014',
+  ARROW_DOWN = '\uE015',
+  DOWN = '\uE015',
+  INSERT = '\uE016',
+  DELETE = '\uE017',
+  SEMICOLON = '\uE018',
+  EQUALS = '\uE019',
+
+  NUMPAD0 = '\uE01A', // number pad keys
+  NUMPAD1 = '\uE01B',
+  NUMPAD2 = '\uE01C',
+  NUMPAD3 = '\uE01D',
+  NUMPAD4 = '\uE01E',
+  NUMPAD5 = '\uE01F',
+  NUMPAD6 = '\uE020',
+  NUMPAD7 = '\uE021',
+  NUMPAD8 = '\uE022',
+  NUMPAD9 = '\uE023',
+  MULTIPLY = '\uE024',
+  ADD = '\uE025',
+  SEPARATOR = '\uE026',
+  SUBTRACT = '\uE027',
+  DECIMAL = '\uE028',
+  DIVIDE = '\uE029',
+
+  F1 = '\uE031', // function keys
+  F2 = '\uE032',
+  F3 = '\uE033',
+  F4 = '\uE034',
+  F5 = '\uE035',
+  F6 = '\uE036',
+  F7 = '\uE037',
+  F8 = '\uE038',
+  F9 = '\uE039',
+  F10 = '\uE03A',
+  F11 = '\uE03B',
+  F12 = '\uE03C',
 }

package/src/FluentTester.tsx

@@ -4,7 +4,7 @@ import { ButtonV1 as Button } from '@fluentui-react-native/button';
 import { themedStyleSheet } from '@fluentui-react-native/themed-stylesheet';
 import * as React from 'react';
 import { ScrollView, View, Text as RNText, Platform, SafeAreaView, BackHandler } from 'react-native';
-import { BASE_TESTPAGE } from './TestComponents/Common/consts';
+import { BASE_TESTPAGE, TESTPAGE_BUTTONS_SCROLLVIEWER } from './TestComponents/Common/consts';
 import { commonTestStyles, fluentTesterStyles, mobileStyles } from './TestComponents/Common/styles';
 import { useTheme } from '@fluentui-react-native/theme-types';
 import { ThemePickers } from './theme/ThemePickers';
@@ -136,7 +136,7 @@ export const FluentTester: React.FunctionComponent<FluentTesterProps> = (props:
   const TestList: React.FunctionComponent = () => {
     return (
       <View style={fluentTesterStyles.testList}>
-        <ScrollView contentContainerStyle={fluentTesterStyles.testListContainerStyle} testID="SCROLLVIEW_TEST_ID">
+        <ScrollView contentContainerStyle={fluentTesterStyles.testListContainerStyle} testID={TESTPAGE_BUTTONS_SCROLLVIEWER}>
           {sortedTestComponents.map((description, index) => {
             return (
               <Button

package/src/TestComponents/Common/consts.ts

@@ -1,2 +1,5 @@
 // Used for E2E testing on base page of FluentTester
 export const BASE_TESTPAGE = 'Base_TestPage';
+
+// ScrollViewer that contains the list of test page buttons
+export const TESTPAGE_BUTTONS_SCROLLVIEWER = 'TestPage_Buttons_ScrollViewer';

package/src/TestComponents/Dropdown/DropdownTest.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Option } from '@fluentui-react-native/dropdown';
+import { Option, Dropdown } from '@fluentui-react-native/dropdown';
 import { Stack } from '@fluentui-react-native/stack';
 import { stackStyle } from '../Common/styles';
 import { DROPDOWN_TESTPAGE } from './consts';
@@ -8,6 +8,7 @@ import { Test, TestSection, PlatformStatus } from '../Test';
 const DropdownDefault: React.FunctionComponent = () => {
   return (
     <Stack style={stackStyle}>
+      <Dropdown />
       <Option>Test</Option>
       <Option disabled>Disabled Test</Option>
     </Stack>

package/src/TestComponents/Menu/E2EMenuTest.tsx

@@ -1,7 +1,8 @@
 import * as React from 'react';
+import { View } from 'react-native';
 import { Stack } from '@fluentui-react-native/stack';
 import { stackStyle } from '../Common/styles';
-import { ButtonV1 as Button } from '@fluentui-react-native/button';
+import { ButtonV1 as Button, ButtonV1 } from '@fluentui-react-native/button';
 import { TextV1 as Text } from '@fluentui-react-native/text';
 import { Menu, MenuItem, MenuList, MenuPopover, MenuTrigger } from '@fluentui-react-native/menu';
 import {
@@ -13,6 +14,7 @@ import {
   MENU_ON_OPEN,
   MENUITEM_TEST_COMPONENT,
   MENUPOPOVER_TEST_COMPONENT,
+  MENU_DEFOCUS_BUTTON,
 } from './consts';
 
 export const E2EMenuTest: React.FunctionComponent = () => {
@@ -27,22 +29,24 @@ export const E2EMenuTest: React.FunctionComponent = () => {
 
   return (
     <Stack style={stackStyle}>
-      <Menu open={menuOpened} onOpenChange={onOpenChange}>
-        <MenuTrigger>
-          <Button testID={MENUTRIGGER_TEST_COMPONENT}>Test</Button>
-        </MenuTrigger>
-        <MenuPopover testID={MENUPOPOVER_TEST_COMPONENT}>
-          <MenuList>
-            <MenuItem testID={MENUITEM_TEST_COMPONENT} accessibilityLabel={MENUITEM_ACCESSIBILITY_LABEL}>
-              A plain MenuItem
-            </MenuItem>
-            <MenuItem disabled>A second disabled plain MenuItem</MenuItem>
-            <MenuItem testID={MENUITEM_NO_A11Y_LABEL_COMPONENT}>{MENUITEM_TEST_LABEL}</MenuItem>
-          </MenuList>
-        </MenuPopover>
-      </Menu>
-
-      {menuOpened ? <Text testID={MENU_ON_OPEN}>Menu opened</Text> : <Text testID={MENU_ON_CLOSE}>Menu closed</Text>}
+      <View style={{ flexDirection: 'row' }}>
+        {menuOpened ? <Text testID={MENU_ON_OPEN}>Menu opened</Text> : <Text testID={MENU_ON_CLOSE}>Menu closed</Text>}
+        <ButtonV1 testID={MENU_DEFOCUS_BUTTON}>Defocus Button</ButtonV1>
+        <Menu open={menuOpened} onOpenChange={onOpenChange}>
+          <MenuTrigger>
+            <Button testID={MENUTRIGGER_TEST_COMPONENT}>Test</Button>
+          </MenuTrigger>
+          <MenuPopover testID={MENUPOPOVER_TEST_COMPONENT}>
+            <MenuList>
+              <MenuItem testID={MENUITEM_TEST_COMPONENT} accessibilityLabel={MENUITEM_ACCESSIBILITY_LABEL}>
+                A plain MenuItem
+              </MenuItem>
+              <MenuItem disabled>A second disabled plain MenuItem</MenuItem>
+              <MenuItem testID={MENUITEM_NO_A11Y_LABEL_COMPONENT}>{MENUITEM_TEST_LABEL}</MenuItem>
+            </MenuList>
+          </MenuPopover>
+        </Menu>
+      </View>
     </Stack>
   );
 };

package/src/TestComponents/Menu/consts.ts

@@ -14,3 +14,5 @@ export const MENUITEM_TEST_LABEL = 'Test MenuItem2 - No Accessibility Label'; //
 
 export const MENU_ON_OPEN = 'Menu_On_Open'; // For testing the open functionality of Menu
 export const MENU_ON_CLOSE = 'Menu_On_Close'; // For testing the open functionality of Menu
+
+export const MENU_DEFOCUS_BUTTON = 'Menu_Defocus_Button'; // Used to move focus away from menu button

package/src/TestComponents/Test.tsx

@@ -6,6 +6,7 @@ import { stackStyle } from './Common/styles';
 import { useTheme } from '@fluentui-react-native/theme-types';
 import Svg, { G, Path, SvgProps } from 'react-native-svg';
 import { SvgIconProps } from '@fluentui-react-native/icon';
+import { Button } from '@fluentui-react-native/experimental-button';
 
 export type TestSection = {
   name: string;
@@ -70,6 +71,11 @@ const styles = StyleSheet.create({
   status: {
     fontWeight: 'normal',
   },
+  // This button is only for our E2E testing framework. We want to be able to put keyboard focus in any test page if we need it.
+  // This button will be at the top of every test page and allows us to do that. But we don't want partners to see it.
+  e2eFocusButton: {
+    opacity: 0,
+  },
 });
 
 export const Test = (props: TestProps): React.ReactElement<Record<string, never>> => {
@@ -107,11 +113,14 @@ export const Test = (props: TestProps): React.ReactElement<Record<string, never>
   const toggleIconProps = Platform.OS === 'windows' ? { fontSource: fontIconProps } : { svgSource: svgProps, width: 12, height: 12 };
 
   return (
-    <View testID="ScrollViewAreaForComponents">
+    <View>
       <View style={styles.header}>
         <Text style={styles.name} variant="heroSemibold">
           {props.name}
         </Text>
+        <Button testID="Focus_Button" style={styles.e2eFocusButton}>
+          E2E Testing Button
+        </Button>
         {props.spec && <Link url={props.spec} content="SPEC" />}
       </View>
       <Separator />

package/wdio.conf.ios.js

@@ -7,7 +7,7 @@ const jasmineDefaultTimeout = 60000; // 60 seconds for Jasmine test timeout
 exports.config = {
   runner: 'local', // Where should your test be launched
   specs: ['src/E2E/**/specs/*.ios.ts'],
-  exclude: [ ],
+  exclude: [],
 
   maxInstances: 30,
   capabilities: [
@@ -137,6 +137,9 @@ exports.config = {
    * Function to be executed after a test (in Mocha/Jasmine).
    */
   afterTest: function (test, context, results) {
+    const resultString = results.passed ? 'Passed' : 'Failed';
+    console.log('\n Test Case: ' + test.description + '.    Result: ' + resultString + '\n');
+
     // if test passed, ignore, else take and save screenshot. Unless it's the first test that boots the app,
     // it may be useful to have a screenshot of the app on load.
     if (results.passed) {
@@ -203,4 +206,4 @@ exports.config = {
    */
   //onReload: function(oldSessionId, newSessionId) {
   //}
-};
+};

package/wdio.conf.macos.js

@@ -154,6 +154,9 @@ exports.config = {
    * Function to be executed after a test (in Mocha/Jasmine).
    */
   afterTest: function (test, context, results) {
+    const resultString = results.passed ? 'Passed' : 'Failed';
+    console.log('\n Test Case: ' + test.description + '.    Result: ' + resultString + '\n');
+
     // if test passed, ignore, else take and save screenshot. Unless it's the first test that boots the app,
     // it may be useful to have a screenshot of the app on load.
     if (results.passed) {

package/wdio.conf.windows.js

@@ -159,6 +159,9 @@ exports.config = {
    * Function to be executed after a test (in Mocha/Jasmine).
    */
   afterTest: function (test, context, results) {
+    const resultString = results.passed ? 'Passed' : 'Failed';
+    console.log('\n Test Case: ' + test.description + '.    Result: ' + resultString + '\n');
+
     // if test passed, ignore, else take and save screenshot.
     if (results.passed) {
       return;