@fluentui-react-native/tester 0.101.6 → 0.101.7

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

@@ -1,6 +1,6 @@
 import NavigateAppPage from '../../common/NavigateAppPage';
-import FocusZonePageObject from '../pages/FocusZonePageObject';
-import { PAGE_TIMEOUT, BOOT_APP_TIMEOUT } from '../../common/consts';
+import FocusZonePageObject, { GridButtonSelector, GridFocusZoneOption } from '../pages/FocusZonePageObject';
+import { PAGE_TIMEOUT, BOOT_APP_TIMEOUT, Keys } from '../../common/consts';
 import { Platform } from '../../common/BasePage';
 
 // Before testing begins, allow up to 60 seconds for app to open
@@ -23,3 +23,178 @@ describe('FocusZone Testing Initialization', function () {
     await expect(await FocusZonePageObject.didAssertPopup()).toBeFalsy(FocusZonePageObject.ERRORMESSAGE_ASSERT); // Ensure no asserts popped up
   });
 });
+
+/* FocusZone Functional Testing
+ *
+ * This test validates that keyboard navigation using both arrow keys and
+ * tab key works, even when modifying how the FocusZone functions.
+ *
+ * */
+describe('FocusZone Functional Testing', () => {
+  beforeEach(async () => {
+    await FocusZonePageObject.scrollToTestElement();
+    await FocusZonePageObject.waitForPrimaryElementDisplayed(PAGE_TIMEOUT);
+    await FocusZonePageObject.resetTest();
+  });
+
+  it('Navigate bidirectional focuszone by arrow keys - switches focus correctly', async () => {
+    // move to 2 with right arrow
+    await FocusZonePageObject.sendKeys(GridButtonSelector.One, [Keys.ARROW_RIGHT]);
+    await expect(await FocusZonePageObject.gridButtonIsFocused(GridButtonSelector.Two)).toBeTruthy();
+
+    // move to 3 with down arrow
+    await FocusZonePageObject.sendKeys(GridButtonSelector.Two, [Keys.ARROW_DOWN]);
+    await expect(await FocusZonePageObject.gridButtonIsFocused(GridButtonSelector.Three)).toBeTruthy();
+
+    await expect(await FocusZonePageObject.didAssertPopup()).toBeFalsy(FocusZonePageObject.ERRORMESSAGE_ASSERT);
+  });
+
+  it('Navigate horizontal focuszone by arrow keys - switches focus correctly', async () => {
+    await FocusZonePageObject.configureGridFocusZone(GridFocusZoneOption.SetDirection, 'horizontal');
+    // move to 2 with right arrow
+    await FocusZonePageObject.sendKeys(GridButtonSelector.One, [Keys.ARROW_RIGHT]);
+    await expect(await FocusZonePageObject.gridButtonIsFocused(GridButtonSelector.Two)).toBeTruthy();
+
+    // down arrow shouldn't move focus
+    await FocusZonePageObject.sendKeys(GridButtonSelector.Two, [Keys.ARROW_DOWN]);
+    await expect(await FocusZonePageObject.gridButtonIsFocused(GridButtonSelector.Two)).toBeTruthy();
+
+    // left arrow goes back
+    await FocusZonePageObject.sendKeys(GridButtonSelector.Four, [Keys.ARROW_LEFT]);
+    await expect(await FocusZonePageObject.gridButtonIsFocused(GridButtonSelector.Three)).toBeTruthy();
+
+    await expect(await FocusZonePageObject.didAssertPopup()).toBeFalsy(FocusZonePageObject.ERRORMESSAGE_ASSERT);
+  });
+
+  it('Navigates vertical focuszone by arrow keys - switches focus correctly', async () => {
+    await FocusZonePageObject.configureGridFocusZone(GridFocusZoneOption.SetDirection, 'vertical');
+
+    // move to 2 with down arrow
+    await FocusZonePageObject.sendKeys(GridButtonSelector.One, [Keys.ARROW_DOWN]);
+    await expect(await FocusZonePageObject.gridButtonIsFocused(GridButtonSelector.Two)).toBeTruthy();
+
+    // right arrow shouldn't move focus
+    await FocusZonePageObject.sendKeys(GridButtonSelector.Two, [Keys.ARROW_RIGHT]);
+    await expect(await FocusZonePageObject.gridButtonIsFocused(GridButtonSelector.Two)).toBeTruthy();
+
+    // up arrow goes back
+    await FocusZonePageObject.sendKeys(GridButtonSelector.Four, [Keys.ARROW_UP]);
+    await expect(await FocusZonePageObject.gridButtonIsFocused(GridButtonSelector.Three)).toBeTruthy();
+
+    await expect(await FocusZonePageObject.didAssertPopup()).toBeFalsy(FocusZonePageObject.ERRORMESSAGE_ASSERT);
+  });
+
+  it("Navigates none-direction focuszone by arrow keys - doesn't switch focus", async () => {
+    await FocusZonePageObject.configureGridFocusZone(GridFocusZoneOption.SetDirection, 'none');
+
+    // none of these key commands should move
+    await FocusZonePageObject.sendKeys(GridButtonSelector.Two, [Keys.ARROW_DOWN]);
+    await expect(await FocusZonePageObject.gridButtonIsFocused(GridButtonSelector.Two)).toBeTruthy();
+
+    await FocusZonePageObject.sendKeys(GridButtonSelector.Two, [Keys.ARROW_UP]);
+    await expect(await FocusZonePageObject.gridButtonIsFocused(GridButtonSelector.Two)).toBeTruthy();
+
+    await FocusZonePageObject.sendKeys(GridButtonSelector.Two, [Keys.ARROW_LEFT]);
+    await expect(await FocusZonePageObject.gridButtonIsFocused(GridButtonSelector.Two)).toBeTruthy();
+
+    await FocusZonePageObject.sendKeys(GridButtonSelector.Two, [Keys.ARROW_RIGHT]);
+    await expect(await FocusZonePageObject.gridButtonIsFocused(GridButtonSelector.Two)).toBeTruthy();
+
+    await expect(await FocusZonePageObject.didAssertPopup()).toBeFalsy(FocusZonePageObject.ERRORMESSAGE_ASSERT);
+  });
+
+  it('Navigates bi-directional focuszone with 2d navigation - switches focus correctly', async () => {
+    await FocusZonePageObject.configureGridFocusZone(GridFocusZoneOption.Set2DNavigation, true);
+
+    await FocusZonePageObject.sendKeys(GridButtonSelector.One, [Keys.ARROW_DOWN]);
+    await expect(await FocusZonePageObject.gridButtonIsFocused(GridButtonSelector.Four)).toBeTruthy();
+
+    await FocusZonePageObject.sendKeys(GridButtonSelector.Four, [Keys.ARROW_RIGHT]);
+    await expect(await FocusZonePageObject.gridButtonIsFocused(GridButtonSelector.Five)).toBeTruthy();
+
+    await expect(await FocusZonePageObject.didAssertPopup()).toBeFalsy(FocusZonePageObject.ERRORMESSAGE_ASSERT);
+  });
+
+  it("Navigates focuszone with circular navigation off - doesn't switch focus", async () => {
+    await FocusZonePageObject.sendKeys(GridButtonSelector.One, [Keys.ARROW_LEFT]);
+    await expect(await FocusZonePageObject.gridButtonIsFocused(GridButtonSelector.One)).toBeTruthy();
+
+    await FocusZonePageObject.sendKeys(GridButtonSelector.Nine, [Keys.ARROW_RIGHT]);
+    await expect(await FocusZonePageObject.gridButtonIsFocused(GridButtonSelector.Nine)).toBeTruthy();
+
+    await expect(await FocusZonePageObject.didAssertPopup()).toBeFalsy(FocusZonePageObject.ERRORMESSAGE_ASSERT);
+  });
+
+  it('Navigates focuszone with circular navigation on - switches focus correctly', async () => {
+    await FocusZonePageObject.configureGridFocusZone(GridFocusZoneOption.SetCircularNavigation, true);
+
+    await FocusZonePageObject.sendKeys(GridButtonSelector.One, [Keys.ARROW_LEFT]);
+    await expect(await FocusZonePageObject.gridButtonIsFocused(GridButtonSelector.Nine)).toBeTruthy();
+
+    await FocusZonePageObject.sendKeys(GridButtonSelector.Nine, [Keys.ARROW_RIGHT]);
+    await expect(await FocusZonePageObject.gridButtonIsFocused(GridButtonSelector.One)).toBeTruthy();
+
+    await expect(await FocusZonePageObject.didAssertPopup()).toBeFalsy(FocusZonePageObject.ERRORMESSAGE_ASSERT);
+  });
+
+  it("Navigates disabled focuszone by arrow keys - doesn't switch focus", async () => {
+    await FocusZonePageObject.configureGridFocusZone(GridFocusZoneOption.Disable, true);
+
+    // none of these key commands should move
+    await FocusZonePageObject.sendKeys(GridButtonSelector.Two, [Keys.ARROW_DOWN]);
+    await expect(await FocusZonePageObject.gridButtonIsFocused(GridButtonSelector.Two)).toBeTruthy();
+
+    await FocusZonePageObject.sendKeys(GridButtonSelector.Two, [Keys.ARROW_UP]);
+    await expect(await FocusZonePageObject.gridButtonIsFocused(GridButtonSelector.Two)).toBeTruthy();
+
+    await FocusZonePageObject.sendKeys(GridButtonSelector.Two, [Keys.ARROW_LEFT]);
+    await expect(await FocusZonePageObject.gridButtonIsFocused(GridButtonSelector.Two)).toBeTruthy();
+
+    await FocusZonePageObject.sendKeys(GridButtonSelector.Two, [Keys.ARROW_RIGHT]);
+    await expect(await FocusZonePageObject.gridButtonIsFocused(GridButtonSelector.Two)).toBeTruthy();
+
+    await expect(await FocusZonePageObject.didAssertPopup()).toBeFalsy(FocusZonePageObject.ERRORMESSAGE_ASSERT);
+  });
+
+  it('Tabs in and out of the FocusZone - switches focus correctly', async () => {
+    await FocusZonePageObject.sendKeys(GridButtonSelector.Before, [Keys.TAB]);
+    await expect(await FocusZonePageObject.gridButtonIsFocused(GridButtonSelector.One)).toBeTruthy();
+
+    await FocusZonePageObject.sendKeys(GridButtonSelector.One, [Keys.TAB]);
+    await expect(await FocusZonePageObject.gridButtonIsFocused(GridButtonSelector.After)).toBeTruthy();
+
+    await FocusZonePageObject.sendKeys(GridButtonSelector.After, [Keys.SHIFT, Keys.TAB]);
+    await expect(await FocusZonePageObject.gridButtonIsFocused(GridButtonSelector.Nine)).toBeTruthy();
+
+    await FocusZonePageObject.sendKeys(GridButtonSelector.Nine, [Keys.SHIFT, Keys.TAB]);
+    await expect(await FocusZonePageObject.gridButtonIsFocused(GridButtonSelector.Before)).toBeTruthy();
+
+    await expect(await FocusZonePageObject.didAssertPopup()).toBeFalsy(FocusZonePageObject.ERRORMESSAGE_ASSERT);
+  });
+
+  it('Tabs in and out of the FocusZone with a defaultTabbableElement set - switches focus correctly', async () => {
+    // This sets the defaultTabbableElement prop of the FocusZone to be grid button #4. Whenever a user tabs into the zone, button 4 should always be the first to be selected.
+    await FocusZonePageObject.configureGridFocusZone(GridFocusZoneOption.UseDefaultTabbableElement, true);
+
+    await FocusZonePageObject.sendKeys(GridButtonSelector.Before, [Keys.TAB]);
+    await expect(await FocusZonePageObject.gridButtonIsFocused(GridButtonSelector.Four)).toBeTruthy();
+
+    await FocusZonePageObject.sendKeys(GridButtonSelector.Four, [Keys.TAB]);
+    await expect(await FocusZonePageObject.gridButtonIsFocused(GridButtonSelector.After)).toBeTruthy();
+
+    await FocusZonePageObject.sendKeys(GridButtonSelector.After, [Keys.SHIFT, Keys.TAB]);
+    await expect(await FocusZonePageObject.gridButtonIsFocused(GridButtonSelector.Four)).toBeTruthy();
+
+    // Key to another button, tab out, and tab back in to make sure the default tabbable element is still the first to be tabbed to
+    await FocusZonePageObject.sendKeys(GridButtonSelector.Four, [Keys.ARROW_RIGHT]);
+    await expect(await FocusZonePageObject.gridButtonIsFocused(GridButtonSelector.Five)).toBeTruthy();
+
+    await FocusZonePageObject.sendKeys(GridButtonSelector.Five, [Keys.SHIFT, Keys.TAB]);
+    await expect(await FocusZonePageObject.gridButtonIsFocused(GridButtonSelector.Before)).toBeTruthy();
+
+    await FocusZonePageObject.sendKeys(GridButtonSelector.Before, [Keys.TAB]);
+    await expect(await FocusZonePageObject.gridButtonIsFocused(GridButtonSelector.Four)).toBeTruthy();
+
+    await expect(await FocusZonePageObject.didAssertPopup()).toBeFalsy(FocusZonePageObject.ERRORMESSAGE_ASSERT);
+  });
+});

package/src/E2E/common/BasePage.ts

@@ -1,5 +1,6 @@
 import { Keys } from './consts';
 import { TESTPAGE_BUTTONS_SCROLLVIEWER } from '../../TestComponents/Common/consts';
+import { Attribute } from './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)
@@ -36,17 +37,17 @@ export class BasePage {
   /**************** UI Element Interaction Methods ******************/
   /******************************************************************/
   async getAccessibilityRole(): Promise<string> {
-    return await this._primaryComponent.getAttribute('ControlType');
+    return await this.getElementAttribute(await this._primaryComponent, Attribute.AccessibilityRole);
   }
 
   /* Gets the accessibility label of an UI element given the selector */
   async getAccessibilityLabel(componentSelector: ComponentSelector): Promise<string> {
     switch (componentSelector) {
       case ComponentSelector.Primary:
-        return await this._primaryComponent.getAttribute('Name');
+        return await this.getElementAttribute(await this._primaryComponent, Attribute.AccessibilityLabel);
 
       case ComponentSelector.Secondary:
-        return await this._secondaryComponent.getAttribute('Name');
+        return await this.getElementAttribute(await this._secondaryComponent, Attribute.AccessibilityLabel);
     }
   }
 
@@ -66,6 +67,10 @@ export class BasePage {
     await this._primaryComponent.click();
   }
 
+  async getElementAttribute(element: WebdriverIO.Element, attribute: Attribute) {
+    return await element.getAttribute(attribute);
+  }
+
   /* 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> {

package/src/E2E/common/consts.ts

@@ -16,6 +16,23 @@ export const TEXT_A11Y_ROLE = 'ControlType.Text';
 export const BOOT_APP_TIMEOUT = 60000;
 export const PAGE_TIMEOUT = 15000;
 
+export const enum Attribute {
+  AccessibilityLabel = 'Name',
+  AccessibilityRole = 'ControlType',
+  IsEnabled = 'IsEnabled',
+  IsFocused = 'HasKeyboardFocus',
+  IsRequiredForForm = 'IsRequiredForForm',
+  IsTogglePatternAvailable = 'IsTogglePatternAvailable',
+  ToggleState = 'Toggle.ToggleState',
+}
+
+export const enum AttributeValue {
+  on = '1',
+  off = '0',
+  true = 'True',
+  false = 'False',
+}
+
 /* Keyboard Key Constants */
 export const enum Keys {
   NULL = '\uE000',

package/src/TestComponents/Common/MenuPicker.tsx

@@ -9,6 +9,7 @@ import { Picker } from '@react-native-picker/picker';
 export interface CollectionItem<T = string> {
   label: string;
   value?: T;
+  testID?: string;
 }
 
 export interface MenuPickerProps {
@@ -17,10 +18,11 @@ export interface MenuPickerProps {
   onChange?: (value: any, index?: number) => void;
   collection?: CollectionItem[];
   style?: any;
+  testID?: string;
 }
 
 export const MenuPicker: React.FunctionComponent<MenuPickerProps> = (props: MenuPickerProps) => {
-  const { prompt, selected, onChange, collection, style } = props;
+  const { prompt, selected, onChange, collection, style, testID } = props;
   let selectedItemKey;
 
   collection.forEach((item) => {
@@ -31,13 +33,14 @@ export const MenuPicker: React.FunctionComponent<MenuPickerProps> = (props: Menu
 
   return (
     <Picker
+      testID={testID}
       prompt={prompt}
       selectedValue={selectedItemKey}
       onValueChange={(value: string, index: number) => onChange(value, index)}
       style={{ ...style }}
     >
       {collection.map((item, index) => (
-        <Picker.Item label={item.label} key={index} value={item.value} />
+        <Picker.Item label={item.label} key={index} value={item.value} testID={item.testID} />
       ))}
     </Picker>
   );

package/src/TestComponents/FocusZone/FocusZoneE2ETest.tsx

@@ -0,0 +1,126 @@
+import React from 'react';
+import { View } from 'react-native';
+import { FocusZoneDirection, FocusZone, MenuButton, Text } from '@fluentui/react-native';
+import { Switch } from '@fluentui-react-native/switch';
+import { ButtonV1 as Button, ButtonProps } from '@fluentui-react-native/button';
+import { commonTestStyles } from '../Common/styles';
+import {
+  FOCUSZONE_TEST_COMPONENT,
+  FOCUSZONE_DIRECTION_ID,
+  FOCUSZONE_TWO_DIM_SWITCH,
+  FOCUSZONE_DISABLED_SWITCH,
+  FOCUSZONE_CIRCLE_NAV_SWITCH,
+  FOCUSZONE_DEFAULT_TABBABLE_SWITCH,
+  FOCUSZONE_GRID_BEFORE,
+  FOCUSZONE_GRID_AFTER,
+  FOCUSZONE_GRID_BUTTON,
+  FOCUSZONE_DIRECTION_PICKER,
+} from './consts';
+import { focusZoneTestStyles, GridButton } from './styles';
+
+export const FocusZoneDirections: FocusZoneDirection[] = ['bidirectional', 'horizontal', 'vertical', 'none'];
+
+type FocusZoneListWrapperProps = {
+  beforeID?: string;
+  afterID?: string;
+};
+export const FocusZoneListWrapper: React.FunctionComponent<FocusZoneListWrapperProps> = ({ beforeID, afterID, children }) => {
+  const buttonProps: ButtonProps = { children: 'Click to Focus', style: focusZoneTestStyles.listWrapperButton };
+  return (
+    <>
+      <Button {...buttonProps} testID={beforeID} />
+      {children}
+      <Button {...buttonProps} testID={afterID} />
+    </>
+  );
+};
+
+type GridOfButtonsProps = {
+  gridWidth: number;
+  gridHeight: number;
+  tabRef?: React.RefObject<View>;
+  tabbableIdx?: number;
+  e2etesting?: boolean;
+};
+
+export const GridOfButtons: React.FunctionComponent<GridOfButtonsProps> = (props: GridOfButtonsProps) => {
+  return (
+    <View style={focusZoneTestStyles.dashedBorder}>
+      {[...Array(props.gridHeight)].map((_value, heightIndex: number) => {
+        return (
+          <View key={heightIndex} style={focusZoneTestStyles.focusZoneViewStyle}>
+            {[...Array(props.gridWidth)].map((_value, widthIndex: number) => {
+              const gridIndex = heightIndex * props.gridWidth + widthIndex + 1;
+              return (
+                <GridButton
+                  testID={props.e2etesting ? FOCUSZONE_GRID_BUTTON(gridIndex) : undefined}
+                  key={widthIndex}
+                  style={focusZoneTestStyles.focusZoneButton}
+                  componentRef={gridIndex === props.tabbableIdx ? props.tabRef : undefined}
+                >
+                  <Text>{gridIndex}</Text>
+                </GridButton>
+              );
+            })}
+          </View>
+        );
+      })}
+    </View>
+  );
+};
+
+export const FocusZone2D: React.FunctionComponent = () => {
+  const [is2DNav, set2dNav] = React.useState(false);
+  const [isDisabled, setDisabled] = React.useState(false);
+  const [isCircularNav, setIsCircularNav] = React.useState(false);
+  const [useDeffaultTabbableElement, setUseDeffaultTabbableElement] = React.useState(false);
+  const [direction, setDirection] = React.useState<FocusZoneDirection>('bidirectional');
+
+  const tabbableRef = React.useRef(null);
+
+  return (
+    <View style={commonTestStyles.root}>
+      <View style={commonTestStyles.settings}>
+        <Text variant="subheaderSemibold" testID={FOCUSZONE_TEST_COMPONENT}>
+          FocusZone Direction
+        </Text>
+        <MenuButton
+          testID={FOCUSZONE_DIRECTION_PICKER}
+          content={`Current direction: ${direction}`}
+          menuItems={FocusZoneDirections.map((dir) => ({
+            itemKey: dir,
+            text: dir,
+            testID: FOCUSZONE_DIRECTION_ID(dir),
+          }))}
+          onItemClick={(dir) => setDirection(dir as FocusZoneDirection)}
+        />
+        <Switch testID={FOCUSZONE_TWO_DIM_SWITCH} label="2D Navigation" checked={is2DNav} onChange={(_, checked) => set2dNav(checked)} />
+        <Switch testID={FOCUSZONE_DISABLED_SWITCH} label="Disabled" checked={isDisabled} onChange={(_, checked) => setDisabled(checked)} />
+        <Switch
+          testID={FOCUSZONE_CIRCLE_NAV_SWITCH}
+          label="Circular Navigation"
+          checked={isCircularNav}
+          onChange={(_, checked) => setIsCircularNav(checked)}
+        />
+        <Switch
+          testID={FOCUSZONE_DEFAULT_TABBABLE_SWITCH}
+          label="Use Default Tabbable Element"
+          checked={useDeffaultTabbableElement}
+          onChange={(_, checked) => setUseDeffaultTabbableElement(checked)}
+        />
+      </View>
+
+      <FocusZoneListWrapper beforeID={FOCUSZONE_GRID_BEFORE} afterID={FOCUSZONE_GRID_AFTER}>
+        <FocusZone
+          disabled={isDisabled}
+          use2DNavigation={is2DNav}
+          focusZoneDirection={direction}
+          isCircularNavigation={isCircularNav}
+          defaultTabbableElement={useDeffaultTabbableElement ? tabbableRef : undefined}
+        >
+          <GridOfButtons gridWidth={3} gridHeight={3} tabRef={tabbableRef} tabbableIdx={4} e2etesting />
+        </FocusZone>
+      </FocusZoneListWrapper>
+    </View>
+  );
+};

package/src/TestComponents/FocusZone/FocusZoneTest.tsx

@@ -1,19 +1,15 @@
 import * as React from 'react';
-import { View, Switch, ScrollView } from 'react-native';
-import { FocusZone, Text, FocusZoneDirection } from '@fluentui/react-native';
-import { ButtonV1 as Button, ButtonProps } from '@fluentui-react-native/button';
+import { View, ScrollView } from 'react-native';
+import { FocusZone, FocusZoneDirection, Text } 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';
 import { FOCUSZONE_TESTPAGE } from './consts';
-import { focusZoneTestStyles, GridButton, SubheaderText } from './styles';
-import { commonTestStyles } from '../Common/styles';
-import { CollectionItem, MenuPicker } from '../Common/MenuPicker';
+import { focusZoneTestStyles, SubheaderText } from './styles';
+import { FocusZone2D, FocusZoneDirections, FocusZoneListWrapper, GridOfButtons } from './FocusZoneE2ETest';
+import { MenuPicker, CollectionItem } from '../Common/MenuPicker';
 
-const FocusZoneDirections: FocusZoneDirection[] = ['bidirectional', 'horizontal', 'vertical', 'none'];
-const directionCollection: CollectionItem<FocusZoneDirection>[] = FocusZoneDirections.map((x) => ({
-  label: x,
-  value: x,
-}));
+const directionCollection: CollectionItem[] = FocusZoneDirections.map((dir) => ({ label: dir, value: dir }));
 
 const Checkboxes = (props: CheckboxProps) => {
   return (
@@ -25,6 +21,34 @@ const Checkboxes = (props: CheckboxProps) => {
   );
 };
 
+const DirectionalFocusZone: React.FunctionComponent = () => {
+  const [direction, setDirection] = React.useState<FocusZoneDirection>('none');
+
+  return (
+    <>
+      <MenuPicker prompt="Direction" selected={direction} onChange={setDirection} collection={directionCollection} />
+      <FocusZone focusZoneDirection={direction}>
+        <Checkboxes />
+      </FocusZone>
+    </>
+  );
+};
+
+const CommonUsageFocusZone: React.FunctionComponent = () => {
+  return (
+    <FocusZoneListWrapper>
+      <FocusZone isCircularNavigation={true}>
+        <SubheaderText>FocusZone with Circular Navigation</SubheaderText>
+        <Checkboxes />
+      </FocusZone>
+      <FocusZone disabled={true}>
+        <SubheaderText>Disabled FocusZone</SubheaderText>
+        <Checkboxes />
+      </FocusZone>
+    </FocusZoneListWrapper>
+  );
+};
+
 const FocusZoneInsideScrollView: React.FunctionComponent = () => {
   return (
     <FocusZoneListWrapper>
@@ -86,131 +110,16 @@ const NestedFocusZone: React.FunctionComponent = () => {
   );
 };
 
-const FocusZoneListWrapper = (props) => {
-  const buttonProps: ButtonProps = { children: 'Click to Focus', style: focusZoneTestStyles.listWrapperButton };
-  return (
-    <>
-      <Button {...buttonProps} />
-      {React.Children.map(props.children, (child) => {
-        return (
-          <>
-            {child}
-            <Button {...buttonProps} />
-          </>
-        );
-      })}
-    </>
-  );
-};
-
-const DirectionalFocusZone: React.FunctionComponent = () => {
-  const [direction, setDirection] = React.useState<FocusZoneDirection>('none');
-
-  return (
-    <>
-      <MenuPicker prompt="Direction" selected={direction} onChange={setDirection} collection={directionCollection} />
-      <FocusZone focusZoneDirection={direction}>
-        <Checkboxes />
-      </FocusZone>
-    </>
-  );
-};
-
-const CommonUsageFocusZone: React.FunctionComponent = () => {
-  return (
-    <FocusZoneListWrapper>
-      <FocusZone isCircularNavigation={true}>
-        <SubheaderText>FocusZone with Circular Navigation</SubheaderText>
-        <Checkboxes />
-      </FocusZone>
-      <FocusZone disabled={true}>
-        <SubheaderText>Disabled FocusZone</SubheaderText>
-        <Checkboxes />
-      </FocusZone>
-    </FocusZoneListWrapper>
-  );
-};
-
-type GridOfButtonsProps = {
-  gridWidth: number;
-  gridHeight: number;
-};
-
-const GridOfButtons: React.FunctionComponent<GridOfButtonsProps> = (props: GridOfButtonsProps) => {
-  return (
-    <View style={focusZoneTestStyles.dashedBorder}>
-      {[...Array(props.gridHeight)].map((_value, heightIndex: number) => {
-        return (
-          <View key={heightIndex} style={focusZoneTestStyles.focusZoneViewStyle}>
-            {[...Array(props.gridWidth)].map((_value, widthIndex: number) => {
-              const gridIndex = heightIndex * props.gridWidth + widthIndex + 1;
-              return (
-                <GridButton key={widthIndex} style={focusZoneTestStyles.focusZoneButton}>
-                  <Text>{gridIndex}</Text>
-                </GridButton>
-              );
-            })}
-          </View>
-        );
-      })}
-    </View>
-  );
-};
-
-interface ISwitchWithLabelProps {
-  label: string;
-  value: boolean;
-  onValueChange: (value: boolean) => void;
-}
-
-function SwitchWithLabel(props: ISwitchWithLabelProps): React.ReactElement {
-  const { label, value, onValueChange } = props;
-  return (
-    <View style={commonTestStyles.switch}>
-      <Text>{label}</Text>
-      <Switch value={value} onValueChange={onValueChange} />
-    </View>
-  );
-}
-
-const FocusZone2D: React.FunctionComponent = () => {
-  const [is2DNav, set2dNav] = React.useState(false);
-  const [isDisabled, setDisabled] = React.useState(false);
-  const [isCircularNav, setIsCircularNav] = React.useState(false);
-  const [direction, setDirection] = React.useState<FocusZoneDirection>('bidirectional');
-
-  return (
-    <View style={commonTestStyles.root}>
-      <View style={commonTestStyles.settings}>
-        <SwitchWithLabel label="2D Navigation" value={is2DNav} onValueChange={set2dNav} />
-        <SwitchWithLabel label="Disabled" value={isDisabled} onValueChange={setDisabled} />
-        <SwitchWithLabel label="Circular Navigation" value={isCircularNav} onValueChange={setIsCircularNav} />
-        <MenuPicker prompt="Direction" selected={direction} onChange={setDirection} collection={directionCollection} />
-      </View>
-
-      <FocusZoneListWrapper>
-        <FocusZone disabled={isDisabled} use2DNavigation={is2DNav} focusZoneDirection={direction} isCircularNavigation={isCircularNav}>
-          <GridOfButtons gridWidth={3} gridHeight={3} />
-        </FocusZone>
-      </FocusZoneListWrapper>
-    </View>
-  );
-};
-
 const focusZoneSections: TestSection[] = [
   {
     name: 'Common FocusZone Usage',
     component: CommonUsageFocusZone,
+    testID: FOCUSZONE_TESTPAGE,
   },
   {
     name: 'Directional FocusZone Usage',
-    testID: FOCUSZONE_TESTPAGE,
     component: DirectionalFocusZone,
   },
-  {
-    name: '2D Navigation',
-    component: FocusZone2D,
-  },
   {
     name: 'ScrollView inside FocusZone',
     component: FocusZoneInsideScrollView,
@@ -227,6 +136,10 @@ const focusZoneSections: TestSection[] = [
     name: 'Nested FocusZone',
     component: NestedFocusZone,
   },
+  {
+    name: '2D Navigation + E2E Testing',
+    component: FocusZone2D,
+  },
 ];
 
 export const FocusZoneTest: React.FunctionComponent = () => {

package/src/TestComponents/FocusZone/consts.ts

@@ -1,3 +1,5 @@
+import { FocusZoneDirection } from '@fluentui/react-native';
+
 export const HOMEPAGE_FOCUSZONE_BUTTON = 'Homepage_FocusZone_Button';
 export const FOCUSZONE_TESTPAGE = 'FocusZone_TestPage';
 
@@ -6,3 +8,18 @@ export const FOCUSZONE_TEST_COMPONENT = 'FocusZone_Test_Component'; // A compone
 
 /* E2E Testing FocusZone 2 */
 export const FOCUSZONE_SECOND_TEST_COMPONENT = 'FocusZone_Second_Test_Component';
+
+/* FocusZone List Wrapper Buttons Keys */
+export const FOCUSZONE_GRID_BEFORE = 'FocusZone_Grid_Before';
+export const FOCUSZONE_GRID_AFTER = 'FocusZone_Grid_After';
+
+/* Grid Button Test IDs */
+export const FOCUSZONE_GRID_BUTTON = (idx: number) => `FocusZone_GridButton_${idx}`;
+
+export const FOCUSZONE_TWO_DIM_SWITCH = 'FocusZone_2D_Switch';
+export const FOCUSZONE_DISABLED_SWITCH = 'FocusZone_Disabled_Switch';
+export const FOCUSZONE_DEFAULT_TABBABLE_SWITCH = 'FocusZone_Default_Tabbable_Switch';
+export const FOCUSZONE_CIRCLE_NAV_SWITCH = 'FocusZone_Circular_Navigation_Switch';
+
+export const FOCUSZONE_DIRECTION_PICKER = 'FocusZone_Direction_Picker';
+export const FOCUSZONE_DIRECTION_ID = (direction: FocusZoneDirection) => `FocusZone_Direction_Opt_${direction}`;

package/src/TestComponents/FocusZone/styles.ts

@@ -27,6 +27,11 @@ export const focusZoneTestStyles = StyleSheet.create({
     borderWidth: 1,
     borderStyle: 'dashed',
   },
+  radioGroup: {
+    display: 'flex',
+    flexDirection: 'row',
+    fontSize: 12,
+  },
   scrollViewStyle: {
     height: 100,
     width: 300,