@fluentui-react-native/tester-core 0.1.1

package/src/TestComponents/FocusTrapZone/FocusTrapZoneTest.tsx

@@ -0,0 +1,182 @@
+import * as React from 'react';
+import type { TouchableHighlightProps } from 'react-native';
+import { TouchableHighlight, View } from 'react-native';
+
+import { FocusTrapZone, Text } from '@fluentui/react-native';
+import { FOCUSTRAPZONE_TESTPAGE } from '@fluentui-react-native/e2e-testing';
+import type { Theme } from '@fluentui-react-native/framework';
+import type { KeyPressEvent } from '@fluentui-react-native/interactive-hooks';
+import { useFocusState } from '@fluentui-react-native/interactive-hooks';
+import { Stack } from '@fluentui-react-native/stack';
+import { useTheme } from '@fluentui-react-native/theme-types';
+import { themedStyleSheet } from '@fluentui-react-native/themed-stylesheet';
+
+import { stackStyle } from '../Common/styles';
+import type { TestSection, PlatformStatus } from '../Test';
+import { Test } from '../Test';
+
+const getThemedStyles = themedStyleSheet((t: Theme) => {
+  return {
+    trapZoneStyle: {
+      padding: 10,
+      borderWidth: 2,
+      borderColor: t.colors.neutralStroke1,
+      borderStyle: 'dashed',
+    },
+    activeTrapZoneStyle: {
+      padding: 10,
+      borderColor: t.colors.neutralStroke1,
+      borderWidth: 2,
+      borderStyle: 'solid',
+    },
+    componentTwiddlerStyle: {
+      borderWidth: 1,
+      padding: 8,
+      margin: 4,
+      borderColor: t.colors.neutralStroke1,
+      borderStyle: 'solid',
+    },
+    focusedComponentTwiddlerStyle: {
+      borderWidth: 1,
+      padding: 8,
+      margin: 4,
+      borderStyle: 'solid',
+      borderColor: t.colors.strokeFocus2,
+      backgroundColor: t.colors.neutralBackground1Hover,
+    },
+    componentTwiddlerText: {
+      color: t.colors.neutralForeground1,
+    },
+    focusedComponentTwiddlerText: {
+      color: t.colors.neutralForeground1Hover,
+    },
+  };
+});
+
+interface IComponentTwiddlerProps {
+  label?: string;
+  onPress?: TouchableHighlightProps['onPress'];
+}
+
+export const ComponentTwiddler: React.FunctionComponent<IComponentTwiddlerProps> = (props: IComponentTwiddlerProps) => {
+  const [focusProps, focusState] = useFocusState({});
+  const theme = useTheme();
+  const themedStyles = getThemedStyles(theme);
+
+  return (
+    <TouchableHighlight {...{ focusable: false }} onPress={props.onPress}>
+      <View
+        focusable={true}
+        {...(focusProps as any)}
+        style={focusState.focused ? themedStyles.focusedComponentTwiddlerStyle : themedStyles.componentTwiddlerStyle}
+      >
+        <Text style={focusState.focused ? themedStyles.focusedComponentTwiddlerText : themedStyles.componentTwiddlerText}>
+          {props.label}
+        </Text>
+      </View>
+    </TouchableHighlight>
+  );
+};
+
+const BasicFocusTrapZone: React.FunctionComponent = () => {
+  const theme = useTheme();
+  const themedStyles = getThemedStyles(theme);
+
+  const [state, setState] = React.useState({
+    useTrapZone: false,
+    renderTrapZone: true,
+    disableFirstFocus: false,
+    ignoreExternalFocusing: false,
+    focusPreviouslyFocusedInnerElement: false,
+  });
+
+  const ftzRef = React.useRef<View>(null);
+
+  const onKeyDown = React.useCallback(
+    (ev: KeyPressEvent) => {
+      if (ev.nativeEvent.key === 'Enter') {
+        setState({ ...state, useTrapZone: !state.useTrapZone });
+      } else if (ev.nativeEvent.key === ' ') {
+        setState({ ...state, renderTrapZone: !state.renderTrapZone });
+      } else if (ev.nativeEvent.key === 'f' && ftzRef.current) {
+        ftzRef.current!.focus();
+      }
+    },
+    [state, setState],
+  );
+
+  const onTwiddleExternalFocusing = React.useCallback(() => {
+    setState({ ...state, ignoreExternalFocusing: !state.ignoreExternalFocusing });
+  }, [state, setState]);
+
+  const onTwiddleFocusPrevious = React.useCallback(() => {
+    setState({ ...state, focusPreviouslyFocusedInnerElement: !state.focusPreviouslyFocusedInnerElement });
+  }, [state, setState]);
+
+  const onTwiddleFirstFocus = React.useCallback(() => {
+    setState({ ...state, disableFirstFocus: !state.disableFirstFocus });
+  }, [state, setState]);
+
+  return (
+    <View {...{ onKeyDown: onKeyDown }}>
+      <Stack style={stackStyle} gap={5}>
+        <ComponentTwiddler label="Press space to render or enter to trap, f to focus" />
+        <ComponentTwiddler
+          label={state.ignoreExternalFocusing ? 'ignoreExternalFocusing: true' : 'ignoreExternalFocusing: false'}
+          onPress={onTwiddleExternalFocusing}
+        />
+        <ComponentTwiddler
+          label={
+            state.focusPreviouslyFocusedInnerElement
+              ? 'focusPreviouslyFocusedInnerElement: true'
+              : 'focusPreviouslyFocusedInnerElement: false'
+          }
+          onPress={onTwiddleFocusPrevious}
+        />
+        <ComponentTwiddler
+          label={state.disableFirstFocus ? 'disableFirstFocus: true' : 'disableFirstFocus: false'}
+          onPress={onTwiddleFirstFocus}
+        />
+        {state.renderTrapZone && (
+          <FocusTrapZone
+            componentRef={ftzRef}
+            disableFirstFocus={state.disableFirstFocus}
+            ignoreExternalFocusing={state.ignoreExternalFocusing}
+            focusPreviouslyFocusedInnerElement={state.focusPreviouslyFocusedInnerElement}
+            disabled={!state.useTrapZone}
+            style={state.useTrapZone ? themedStyles.activeTrapZoneStyle : themedStyles.trapZoneStyle}
+          >
+            <Text>{state.useTrapZone ? 'Trap Active' : 'Trap Active'}</Text>
+            <ComponentTwiddler label="trapped" />
+            <ComponentTwiddler label="trapped" />
+            <ComponentTwiddler label="trapped" />
+            <ComponentTwiddler label="trapped" />
+          </FocusTrapZone>
+        )}
+      </Stack>
+    </View>
+  );
+};
+
+const focusTrapZoneSections: TestSection[] = [
+  {
+    name: 'Basic FocusTrapZone Usage',
+    testID: FOCUSTRAPZONE_TESTPAGE,
+    component: BasicFocusTrapZone,
+  },
+];
+
+export const FocusTrapTest: React.FunctionComponent = () => {
+  const status: PlatformStatus = {
+    win32Status: 'Beta',
+    uwpStatus: 'Backlog',
+    iosStatus: 'N/A',
+    macosStatus: 'N/A',
+    androidStatus: 'N/A',
+  };
+
+  const description =
+    'FocusTrapZone is used to trap the focus in any html element. Pressing tab will circle focus within the inner focusable elements of the FocusTrapZone.';
+
+  return <Test name="Focus Trap Zone Test" description={description} sections={focusTrapZoneSections} status={status}></Test>;
+};

package/src/TestComponents/FocusTrapZone/index.ts

@@ -0,0 +1 @@
+export * from './FocusTrapZoneTest';

package/src/TestComponents/FocusZone/FocusZoneE2ETest.tsx

@@ -0,0 +1,170 @@
+import React from 'react';
+import { Platform, View } from 'react-native';
+
+import type { FocusZoneDirection, FocusZoneTabNavigation, IFocusable } from '@fluentui/react-native';
+import { FocusZone, MenuButton, Text } from '@fluentui/react-native';
+import type { ButtonProps } from '@fluentui-react-native/button';
+import { ButtonV1 as Button } from '@fluentui-react-native/button';
+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_TEST_COMPONENT,
+  FOCUSZONE_TWO_DIM_SWITCH,
+} from '@fluentui-react-native/e2e-testing';
+import type { GridButtonIndex } from '@fluentui-react-native/e2e-testing';
+import { Switch } from '@fluentui-react-native/switch';
+
+import { focusZoneTestStyles, GridButton } from './styles';
+import { commonTestStyles } from '../Common/styles';
+import { testProps } from '../Common/TestProps';
+
+export const FocusZoneDirections: FocusZoneDirection[] = ['bidirectional', 'horizontal', 'vertical', 'none'];
+export const FocusZoneTabNavigations: FocusZoneTabNavigation[] = ['None', 'NavigateWrap', 'NavigateStopAtEnds', 'Normal'];
+
+// Buttons by default focus on click on Win32, but they don't on the Mac, so place focus explicitly for convenience
+function useFocusOnClickForMac(): Partial<ButtonProps> {
+  const componentRef = React.useRef<IFocusable>(null);
+  const onClick = React.useCallback(() => componentRef.current?.focus(), [componentRef]);
+  return Platform.OS === 'macos' ? { componentRef, onClick } : {};
+}
+
+type FocusZoneListWrapperProps = React.PropsWithChildren<{
+  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}
+        {...useFocusOnClickForMac()}
+        /* For Android E2E testing purposes, testProps must be passed in after accessibilityLabel. */
+        {...testProps(beforeID)}
+      />
+      {children}
+      <Button
+        {...buttonProps}
+        {...useFocusOnClickForMac()}
+        /* For Android E2E testing purposes, testProps must be passed in after accessibilityLabel. */
+        {...testProps(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
+                  key={widthIndex}
+                  style={focusZoneTestStyles.focusZoneButton}
+                  componentRef={gridIndex === props.tabbableIdx ? props.tabRef : undefined}
+                  /* For Android E2E testing purposes, testProps must be passed in after accessibilityLabel. */
+                  {...testProps(props.e2etesting ? FOCUSZONE_GRID_BUTTON(gridIndex as GridButtonIndex) : 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"
+          /* For Android E2E testing purposes, testProps must be passed in after accessibilityLabel. */
+          {...testProps(FOCUSZONE_TEST_COMPONENT)}
+        >
+          FocusZone Direction
+        </Text>
+        <MenuButton
+          content={`Current direction: ${direction}`}
+          menuItems={FocusZoneDirections.map((dir) => ({
+            itemKey: dir,
+            text: dir,
+            testID: FOCUSZONE_DIRECTION_ID(dir),
+          }))}
+          onItemClick={(dir) => setDirection(dir as FocusZoneDirection)}
+          /* For Android E2E testing purposes, testProps must be passed in after accessibilityLabel. */
+          {...testProps(FOCUSZONE_DIRECTION_PICKER)}
+        />
+        <Switch
+          /* For Android E2E testing purposes, testProps must be passed in after accessibilityLabel. */
+          {...testProps(FOCUSZONE_TWO_DIM_SWITCH)}
+          label="2D Navigation"
+          checked={is2DNav}
+          onChange={(_, checked) => set2dNav(checked)}
+        />
+        <Switch
+          /* For Android E2E testing purposes, testProps must be passed in after accessibilityLabel. */
+          {...testProps(FOCUSZONE_DISABLED_SWITCH)}
+          label="Disabled"
+          checked={isDisabled}
+          onChange={(_, checked) => setDisabled(checked)}
+        />
+        <Switch
+          /* For Android E2E testing purposes, testProps must be passed in after accessibilityLabel. */
+          {...testProps(FOCUSZONE_CIRCLE_NAV_SWITCH)}
+          label="Circular Navigation"
+          checked={isCircularNav}
+          onChange={(_, checked) => setIsCircularNav(checked)}
+        />
+        <Switch
+          label="Use Default Tabbable Element"
+          checked={useDeffaultTabbableElement}
+          onChange={(_, checked) => setUseDeffaultTabbableElement(checked)}
+          /* For Android E2E testing purposes, testProps must be passed in after accessibilityLabel. */
+          {...testProps(FOCUSZONE_DEFAULT_TABBABLE_SWITCH)}
+        />
+      </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

@@ -0,0 +1,333 @@
+import * as React from 'react';
+import { View, ScrollView, Pressable, TextInput } from 'react-native';
+
+import type { FocusZoneDirection, FocusZoneTabNavigation } from '@fluentui/react-native';
+import { FocusZone, MenuButton, Text, useOnPressWithFocus } from '@fluentui/react-native';
+import { ButtonV1 as Button } from '@fluentui-react-native/button';
+import { FOCUSZONE_TESTPAGE } from '@fluentui-react-native/e2e-testing';
+import type { CheckboxProps } from '@fluentui-react-native/experimental-checkbox';
+import { Checkbox } from '@fluentui-react-native/experimental-checkbox';
+
+import { FocusZone2D, FocusZoneDirections, FocusZoneListWrapper, FocusZoneTabNavigations, GridOfButtons } from './FocusZoneE2ETest';
+import { focusZoneTestStyles, SubheaderText } from './styles';
+import type { CollectionItem } from '../Common/MenuPicker';
+import { MenuPicker } from '../Common/MenuPicker';
+import type { TestSection, PlatformStatus } from '../Test';
+import { Test } from '../Test';
+
+const directionCollection: CollectionItem[] = FocusZoneDirections.map((dir) => ({ label: dir, value: dir }));
+
+const Checkboxes = (props: CheckboxProps) => {
+  return (
+    <View style={focusZoneTestStyles.dashedBorder}>
+      <Checkbox label="Option A" {...props} />
+      <Checkbox label="Option B" {...props} />
+      <Checkbox label="Option C" {...props} />
+    </View>
+  );
+};
+
+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>
+      <FocusZone focusZoneDirection="bidirectional">
+        <View style={focusZoneTestStyles.dashedBorder}>
+          <Button style={focusZoneTestStyles.listWrapperButton}>Inside Focus Zone</Button>
+          <ScrollView
+            focusable={false}
+            style={focusZoneTestStyles.scrollViewStyle}
+            contentContainerStyle={focusZoneTestStyles.scrollViewContentStyle}
+            showsVerticalScrollIndicator={true}
+          >
+            <Button style={focusZoneTestStyles.scrollViewButton}>1</Button>
+            <Button style={focusZoneTestStyles.scrollViewButton}>2</Button>
+            <Button style={focusZoneTestStyles.scrollViewButton}>3</Button>
+          </ScrollView>
+        </View>
+      </FocusZone>
+    </FocusZoneListWrapper>
+  );
+};
+
+const FocusZoneNoFocusableElements: React.FunctionComponent = () => {
+  return (
+    <FocusZone>
+      <Checkboxes disabled />
+    </FocusZone>
+  );
+};
+
+const FocusZoneNoProps: React.FunctionComponent = () => {
+  return (
+    <FocusZone>
+      <Checkboxes />
+    </FocusZone>
+  );
+};
+
+const FocusZoneTabNavigationComponent: React.FunctionComponent = () => {
+  const [tabNavigation, setTabNavigation] = React.useState<FocusZoneTabNavigation>('None');
+
+  return (
+    <View>
+      <Text>FocusZone Tab Navigation</Text>
+      <MenuButton
+        content={`Current tab key navigation: ${tabNavigation}`}
+        menuItems={FocusZoneTabNavigations.map((dir) => ({
+          itemKey: dir,
+          text: dir,
+        }))}
+        onItemClick={(dir) => setTabNavigation(dir as FocusZoneTabNavigation)}
+      />
+      <FocusZone tabKeyNavigation={tabNavigation}>
+        <Checkboxes />
+      </FocusZone>
+    </View>
+  );
+};
+
+const TinyBox = () => {
+  const ref = React.useRef<View>(null);
+  const onPress = useOnPressWithFocus(ref, null);
+
+  return <Pressable focusable style={focusZoneTestStyles.smallBoxStyle} ref={ref} onPress={onPress} />;
+};
+
+const WideBox = () => {
+  const ref = React.useRef<View>(null);
+  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>
+      <>
+        <Text>Parent FocusZone, vertical</Text>
+        <View style={focusZoneTestStyles.nestedFocusZoneStyle}>
+          <FocusZone focusZoneDirection="vertical">
+            <Text>Inner FocusZone 1, horizontal</Text>
+            <FocusZone focusZoneDirection="horizontal">
+              <GridOfButtons gridWidth={3} gridHeight={1} />
+            </FocusZone>
+            <Text>Inner FocusZone 2, horizontal</Text>
+            <FocusZone focusZoneDirection="horizontal">
+              <GridOfButtons gridWidth={3} gridHeight={1} />
+            </FocusZone>
+            <Button>Inside Focus Zone</Button>
+          </FocusZone>
+        </View>
+      </>
+    </FocusZoneListWrapper>
+  );
+};
+
+const FocusZoneGrid: React.FunctionComponent = () => {
+  const [isCircularNavigation, setCircularNavigation] = React.useState(true);
+  const [tabNavigation, setTabNavigation] = React.useState<FocusZoneTabNavigation>('None');
+  const onCircularNavigationChange = React.useCallback((_, isChecked: boolean) => setCircularNavigation(isChecked), []);
+
+  return (
+    <FocusZoneListWrapper>
+      <>
+        <Text>FocusZone Grid</Text>
+        <Checkbox label="Circular Navigation" checked={isCircularNavigation} onChange={onCircularNavigationChange} />
+        <MenuButton
+          content={`Tab key navigation: ${tabNavigation}`}
+          menuItems={FocusZoneTabNavigations.map((dir) => ({
+            itemKey: dir,
+            text: dir,
+          }))}
+          onItemClick={(dir) => setTabNavigation(dir as FocusZoneTabNavigation)}
+        />
+        <FocusZone isCircularNavigation tabKeyNavigation={tabNavigation}>
+          <GridOfButtons gridWidth={3} gridHeight={3} />
+        </FocusZone>
+      </>
+    </FocusZoneListWrapper>
+  );
+};
+
+const FocusZoneTextInput: React.FunctionComponent = () => {
+  return (
+    <FocusZoneListWrapper>
+      <>
+        <Text>FocusZone Grid</Text>
+        <FocusZone>
+          <TextInput multiline={true} />
+        </FocusZone>
+      </>
+    </FocusZoneListWrapper>
+  );
+};
+
+export const FirstFocusTest = () => {
+  const outerNormalRef = React.useRef(null);
+  const innerNormalRef = React.useRef(null);
+  const innerDirectRef = React.useRef(null);
+  const innerFZRef = React.useRef(null);
+  const outerNativeID = 'nativeIDToOuterButton';
+  const innerNativeID = 'nativeIDToInnerButton';
+  const innerDirectNativeID = 'nativeIDDirectToInnerButton';
+  const [outerFocusZoneTabbableElement, setOuterFocusZoneTabbableElement] = React.useState<React.RefObject<View> | string>();
+  const [innerFocusZoneTabbableElement, setInnerFocusZoneTabbableElement] = React.useState<React.RefObject<View> | string>();
+
+  return (
+    <FocusZone defaultTabbableElement={outerFocusZoneTabbableElement} tabKeyNavigation="Normal">
+      <View>
+        <Button onClick={() => setOuterFocusZoneTabbableElement(undefined)}>clear OuterFocusZone</Button>
+        <Button componentRef={outerNormalRef} onClick={() => setOuterFocusZoneTabbableElement(outerNormalRef)}>
+          Test ref
+        </Button>
+        <Button nativeID={outerNativeID} onClick={() => setOuterFocusZoneTabbableElement(outerNativeID)}>
+          Test nativeId
+        </Button>
+      </View>
+      <FocusZone componentRef={innerFZRef} defaultTabbableElement={innerFocusZoneTabbableElement}>
+        <Button onClick={() => setInnerFocusZoneTabbableElement(undefined)}>clear InnerFocusZone</Button>
+        <Button componentRef={innerDirectRef} onClick={() => setOuterFocusZoneTabbableElement(innerDirectRef)}>
+          Test nested (direct ref)
+        </Button>
+        <Button nativeID={innerDirectNativeID} onClick={() => setOuterFocusZoneTabbableElement(innerDirectNativeID)}>
+          Test nested (direct nativeID)
+        </Button>
+        <Button componentRef={innerNormalRef} onClick={() => setInnerFocusZoneTabbableElement(innerNormalRef)}>
+          Test inner zone (ref)
+        </Button>
+        <Button nativeID={innerNativeID} onClick={() => setInnerFocusZoneTabbableElement(innerNativeID)}>
+          Test inner zone (nativeID)
+        </Button>
+        <Button onClick={() => setOuterFocusZoneTabbableElement(innerFZRef)}>Test nested (transitive)</Button>
+      </FocusZone>
+    </FocusZone>
+  );
+};
+
+const focusZoneSections: TestSection[] = [
+  {
+    name: 'First Focus FocusZone Usage',
+    component: FirstFocusTest,
+    testID: FOCUSZONE_TESTPAGE,
+  },
+  {
+    name: 'Common FocusZone Usage',
+    component: CommonUsageFocusZone,
+    testID: FOCUSZONE_TESTPAGE,
+  },
+  {
+    name: 'Directional FocusZone Usage',
+    component: DirectionalFocusZone,
+  },
+  {
+    name: 'FocusZone with Tab Key Abstraction',
+    component: FocusZoneTabNavigationComponent,
+  },
+  {
+    name: 'ScrollView inside FocusZone',
+    component: FocusZoneInsideScrollView,
+  },
+  {
+    name: 'FocusZone with no focusable components',
+    component: FocusZoneNoFocusableElements,
+  },
+  {
+    name: 'FocusZone with no props',
+    component: FocusZoneNoProps,
+  },
+  {
+    name: 'Different Sized Children',
+    component: DifferentSizesTest,
+  },
+  {
+    name: 'Nested FocusZone',
+    component: NestedFocusZone,
+  },
+  {
+    name: 'FocusZone Grid',
+    component: FocusZoneGrid,
+  },
+  {
+    name: 'FocusZone with TextInput',
+    component: FocusZoneTextInput,
+  },
+];
+
+const e2eSections: TestSection[] = [
+  {
+    name: '2D Navigation + E2E Testing',
+    component: FocusZone2D,
+  },
+];
+
+export const FocusZoneTest: React.FunctionComponent = () => {
+  const status: PlatformStatus = {
+    win32Status: 'Production',
+    uwpStatus: 'Backlog',
+    iosStatus: 'Backlog',
+    macosStatus: 'Production',
+    androidStatus: 'Backlog',
+  };
+
+  return (
+    <Test name="FocusZone Test" description={'No description.'} sections={focusZoneSections} status={status} e2eSections={e2eSections} />
+  );
+};

package/src/TestComponents/FocusZone/index.ts

@@ -0,0 +1 @@
+export * from './FocusZoneTest';