@fluentui-react-native/tester 0.103.0 → 0.103.2

package/src/E2E/common/BasePage.ts

@@ -18,13 +18,19 @@ export const enum ComponentSelector {
   Secondary, // this._secondaryComponent
 }
 
-export const enum Platform {
+export const enum MobilePlatform {
+  iOS = 0,
+  Android,
+}
+
+export const enum NativePlatform {
   Win32 = 0,
-  iOS,
+  Windows,
   macOS,
-  Android,
 }
 
+export type Platform = MobilePlatform | NativePlatform;
+
 /****************************** 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).
@@ -72,8 +78,9 @@ 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> {
+   * We use a negative number as the Y-coordinate because that enables us to scroll downwards.
+   * There are no need for win32 and macos cases, as the click command automatically scrolls the element into view. */
+  async mobileScrollToComponentButton(platform: MobilePlatform): Promise<void> {
     if (await (await this._pageButton).isDisplayed()) {
       return;
     }
@@ -82,23 +89,7 @@ export class BasePage {
       'Could not scroll to the ' + this._pageName + "'s Button. Please see Pipeline artifacts for more debugging information.";
 
     switch (platform) {
-      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: {
+      case MobilePlatform.iOS: {
         await browser.waitUntil(
           async () => {
             await driver.execute('mobile: scroll', { direction: 'down' });
@@ -111,13 +102,8 @@ export class BasePage {
         );
         break;
       }
-
-      case Platform.macOS:
-        // Not needed for macOS. It automatically scrolls
-        break;
-
       default:
-      case Platform.Android:
+      case MobilePlatform.Android:
         // Todo
         break;
     }
@@ -208,21 +194,6 @@ 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 ****************/
   /*****************************************/
@@ -269,10 +240,6 @@ export class BasePage {
     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.';

package/src/TestComponents/Dropdown/DropdownTest.tsx

@@ -8,9 +8,10 @@ import { Test, TestSection, PlatformStatus } from '../Test';
 const DropdownDefault: React.FunctionComponent = () => {
   return (
     <Stack style={stackStyle}>
-      <Dropdown />
-      <Option>Test</Option>
-      <Option disabled>Disabled Test</Option>
+      <Dropdown>
+        <Option>Test</Option>
+        <Option disabled>Disabled Test</Option>
+      </Dropdown>
     </Stack>
   );
 };

package/src/TestComponents/FocusZone/FocusZoneTest.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { View, ScrollView } from 'react-native';
-import { FocusZone, FocusZoneDirection, Text } from '@fluentui/react-native';
+import { View, ScrollView, Pressable } from 'react-native';
+import { FocusZone, FocusZoneDirection, Text, useOnPressWithFocus } from '@fluentui/react-native';
 import { ButtonV1 as Button } from '@fluentui-react-native/button';
 import { Checkbox, CheckboxProps } from '@fluentui-react-native/experimental-checkbox';
 import { Test, TestSection, PlatformStatus } from '../Test';
@@ -87,6 +87,50 @@ const FocusZoneNoProps: React.FunctionComponent = () => {
   );
 };
 
+const TinyBox = () => {
+  const ref = React.useRef<View>();
+  const onPress = useOnPressWithFocus(ref, null);
+
+  return <Pressable focusable style={focusZoneTestStyles.smallBoxStyle} ref={ref} onPress={onPress} />;
+};
+
+const WideBox = () => {
+  const ref = React.useRef<View>();
+  const onPress = useOnPressWithFocus(ref, null);
+
+  return <Pressable focusable style={focusZoneTestStyles.wideBoxStyle} ref={ref} onPress={onPress} />;
+};
+
+const TinyText = () => {
+  return (
+    <Text selectable style={focusZoneTestStyles.smallBoxStyle}>
+      Hi
+    </Text>
+  );
+};
+
+const WideText = () => {
+  return (
+    <Text selectable style={focusZoneTestStyles.wideBoxStyle}>
+      Hello world
+    </Text>
+  );
+};
+
+const DifferentSizesTest: React.FunctionComponent = () => {
+  return (
+    <FocusZone focusZoneDirection="bidirectional">
+      <View style={focusZoneTestStyles.dashedBorder}>
+        <WideBox />
+        <TinyBox />
+        <WideBox />
+        <TinyText />
+        <WideText />
+      </View>
+    </FocusZone>
+  );
+};
+
 const NestedFocusZone: React.FunctionComponent = () => {
   return (
     <FocusZoneListWrapper>
@@ -132,6 +176,10 @@ const focusZoneSections: TestSection[] = [
     name: 'FocusZone with no props',
     component: FocusZoneNoProps,
   },
+  {
+    name: 'Different Sized Children',
+    component: DifferentSizesTest,
+  },
   {
     name: 'Nested FocusZone',
     component: NestedFocusZone,

package/src/TestComponents/FocusZone/styles.ts

@@ -43,6 +43,18 @@ export const focusZoneTestStyles = StyleSheet.create({
     marginHorizontal: 20,
     marginBottom: 100,
   },
+  smallBoxStyle: {
+    width: 20,
+    height: 20,
+    backgroundColor: 'lightgrey',
+    margin: 5,
+  },
+  wideBoxStyle: {
+    width: 150,
+    height: 20,
+    backgroundColor: 'lightgrey',
+    margin: 5,
+  },
 });
 
 export const GridButton = Button.compose({

package/src/testPages.ts

@@ -194,13 +194,13 @@ export const tests: TestDescription[] = [
     name: 'RadioGroup',
     component: RadioGroupTest,
     testPage: HOMEPAGE_RADIOGROUP_BUTTON,
-    platforms: ['android', 'ios', 'macos', 'web', 'win32'],
+    platforms: ['macos', 'win32'],
   },
   {
     name: 'RadioGroup (Experimental)',
     component: RadioGroupExperimentalTest,
     testPage: HOMEPAGE_RADIO_GROUP_EXPERIMENTAL_BUTTON,
-    platforms: ['android', 'ios', 'macos', 'web', 'win32'],
+    platforms: ['macos', 'win32'],
   },
   {
     name: 'Spacing Tokens',