@fluentui-react-native/tester 0.101.6 → 0.101.8

package/src/E2E/FocusZone/pages/FocusZonePageObject.ts

@@ -1,12 +1,115 @@
-import { FOCUSZONE_TESTPAGE, FOCUSZONE_TEST_COMPONENT, HOMEPAGE_FOCUSZONE_BUTTON } from '../../../TestComponents/FocusZone/consts';
+import { FocusZoneDirection } from '@fluentui/react-native';
+import { Attribute, AttributeValue, Keys } from '../../common/consts';
+import {
+  FOCUSZONE_CIRCLE_NAV_SWITCH,
+  FOCUSZONE_DEFAULT_TABBABLE_SWITCH,
+  FOCUSZONE_DIRECTION_ID,
+  FOCUSZONE_DIRECTION_PICKER,
+  FOCUSZONE_DISABLED_SWITCH,
+  FOCUSZONE_GRID_AFTER,
+  FOCUSZONE_GRID_BEFORE,
+  FOCUSZONE_GRID_BUTTON,
+  FOCUSZONE_TESTPAGE,
+  FOCUSZONE_TEST_COMPONENT,
+  FOCUSZONE_TWO_DIM_SWITCH,
+  HOMEPAGE_FOCUSZONE_BUTTON,
+} from '../../../TestComponents/FocusZone/consts';
 import { BasePage, By } from '../../common/BasePage';
 
+export const enum GridFocusZoneOption {
+  SetDirection = 0,
+  Set2DNavigation,
+  SetCircularNavigation,
+  UseDefaultTabbableElement,
+  Disable,
+}
+
+export const enum GridButtonSelector {
+  Before = 0,
+  One,
+  Two,
+  Three,
+  Four,
+  Five,
+  Six,
+  Seven,
+  Eight,
+  Nine,
+  After,
+}
+
+type BooleanGridFocusZoneOption =
+  | GridFocusZoneOption.UseDefaultTabbableElement
+  | GridFocusZoneOption.Set2DNavigation
+  | GridFocusZoneOption.SetCircularNavigation
+  | GridFocusZoneOption.Disable;
+
 class FocusZonePageObject extends BasePage {
-  // OVERRIDE: We use isExisting() here instead of isDisplayed() because FocusZone does not have any UI to it, it's simply
-  // a wrapper that adds keyboard focus functionality
   async waitForPrimaryElementDisplayed(timeout?: number): Promise<void> {
     const errorMsg = 'The FocusZone UI Element did not load correctly. Please see logs.';
-    await this.waitForCondition(async () => await this._primaryComponent.isExisting(), errorMsg, timeout);
+    await this.waitForCondition(async () => await this._primaryComponent.isDisplayed(), errorMsg, timeout);
+  }
+
+  async resetTest() {
+    await this.configureGridFocusZone(GridFocusZoneOption.SetDirection, 'bidirectional');
+    await this.configureGridFocusZone(GridFocusZoneOption.Set2DNavigation, false);
+    await this.configureGridFocusZone(GridFocusZoneOption.SetCircularNavigation, false);
+    await this.configureGridFocusZone(GridFocusZoneOption.Disable, false);
+  }
+
+  async configureGridFocusZone(option: GridFocusZoneOption.SetDirection, direction: FocusZoneDirection);
+  async configureGridFocusZone(option: BooleanGridFocusZoneOption, value: boolean);
+  async configureGridFocusZone(option: GridFocusZoneOption, arg: any): Promise<void> {
+    let switchElement: WebdriverIO.Element;
+    switch (option) {
+      case GridFocusZoneOption.SetDirection:
+        await (await this._directionPicker).click();
+        await browser.waitUntil(async () => await (await this._getGridFocusZoneMenuOption(arg)).isDisplayed());
+        await (await this._getGridFocusZoneMenuOption(arg)).click();
+        return;
+      case GridFocusZoneOption.Set2DNavigation:
+        switchElement = await this._twoDimSwitch;
+        break;
+      case GridFocusZoneOption.SetCircularNavigation:
+        switchElement = await this._circleNavSwitch;
+        break;
+      case GridFocusZoneOption.UseDefaultTabbableElement:
+        switchElement = await this._defaultTabbableElementSwitch;
+        break;
+      case GridFocusZoneOption.Disable:
+        switchElement = await this._disabledSwitch;
+        break;
+      default:
+    }
+    const switchValue = await switchElement.isSelected();
+    if (switchValue !== arg) {
+      await switchElement.click();
+    }
+  }
+
+  async sendKeys(selector: GridButtonSelector, keys: Keys[]): Promise<void> {
+    const btn = await this._getGridButton(selector);
+    await btn.addValue(keys);
+  }
+
+  async gridButtonIsFocused(selector: GridButtonSelector): Promise<boolean> {
+    const btn = await this._getGridButton(selector);
+    return (await this.getElementAttribute(btn, Attribute.IsFocused)) === AttributeValue.true;
+  }
+
+  private async _getGridButton(selector: GridButtonSelector): Promise<WebdriverIO.Element> {
+    switch (selector) {
+      case GridButtonSelector.Before:
+        return await this._gridBeforeButton;
+      case GridButtonSelector.After:
+        return await this._gridAfterButton;
+      default:
+        return await By(FOCUSZONE_GRID_BUTTON(selector));
+    }
+  }
+
+  private async _getGridFocusZoneMenuOption(direction: FocusZoneDirection) {
+    return await By(FOCUSZONE_DIRECTION_ID(direction));
   }
 
   /*****************************************/
@@ -27,6 +130,34 @@ class FocusZonePageObject extends BasePage {
   get _pageButton() {
     return By(HOMEPAGE_FOCUSZONE_BUTTON);
   }
+
+  get _directionPicker() {
+    return By(FOCUSZONE_DIRECTION_PICKER);
+  }
+
+  get _twoDimSwitch() {
+    return By(FOCUSZONE_TWO_DIM_SWITCH);
+  }
+
+  get _disabledSwitch() {
+    return By(FOCUSZONE_DISABLED_SWITCH);
+  }
+
+  get _circleNavSwitch() {
+    return By(FOCUSZONE_CIRCLE_NAV_SWITCH);
+  }
+
+  get _defaultTabbableElementSwitch() {
+    return By(FOCUSZONE_DEFAULT_TABBABLE_SWITCH);
+  }
+
+  get _gridBeforeButton() {
+    return By(FOCUSZONE_GRID_BEFORE);
+  }
+
+  get _gridAfterButton() {
+    return By(FOCUSZONE_GRID_AFTER);
+  }
 }
 
 export default new FocusZonePageObject();

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>
+  );
+};