@fluentui-react-native/tester 0.101.5 → 0.101.7

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,