@fluentui-react-native/tester 0.129.5 → 0.129.7

package/src/TestComponents/Button/ButtonTest.tsx

@@ -25,7 +25,9 @@ const buttonSections: TestSection[] = [
     component: ButtonIconTest,
   },
   ...Platform.select({
-    android: [null], //Following sections are not supported from Fluent Android
+    // The following sections are not supported for iOS or Android
+    ios: [],
+    android: [],
     default: [
       {
         name: 'Toggle Button',
@@ -53,7 +55,7 @@ const buttonSections: TestSection[] = [
     component: E2EButtonTest,
   },
   ...Platform.select({
-    android: [null], //Following sections are not supported from Fluent Android
+    android: [], // Following sections are not supported from Fluent Android
     default: [
       {
         name: 'Deprecated Basic Button',

package/src/TestComponents/Button/ButtonVariantTestSection.android.tsx

@@ -1,45 +1 @@
-import { Button, FAB } from '@fluentui-react-native/experimental-button';
-import * as React from 'react';
-import { View } from 'react-native';
-import { commonTestStyles, testContentRootViewStyle } from '../Common/styles';
-import { iconProps } from '../Common/iconExamples';
-
-export const ButtonVariantTest: React.FunctionComponent = () => {
-  const [showFABText, setShowFABText] = React.useState(true);
-  const flipFABcontent = React.useCallback(() => setShowFABText(!showFABText), [showFABText]);
-
-  return (
-    <View style={testContentRootViewStyle}>
-      <Button style={commonTestStyles.vmargin}>Default</Button>
-      <Button disabled style={commonTestStyles.vmargin}>
-        Default Disabled
-      </Button>
-      <Button appearance="accent" style={commonTestStyles.vmargin}>
-        Accent
-      </Button>
-      <Button disabled appearance="accent" style={commonTestStyles.vmargin}>
-        Accent Disabled
-      </Button>
-      <Button appearance="outline" style={commonTestStyles.vmargin}>
-        Outline
-      </Button>
-      <Button appearance="outline" disabled style={commonTestStyles.vmargin}>
-        Outline Disabled
-      </Button>
-      <Button appearance="subtle" style={commonTestStyles.vmargin}>
-        Subtle
-      </Button>
-      <Button appearance="subtle" disabled style={commonTestStyles.vmargin}>
-        Subtle Disabled
-      </Button>
-      <FAB icon={iconProps} iconOnly disabled style={commonTestStyles.vmargin} />
-      <FAB icon={iconProps} style={commonTestStyles.vmargin} showContent={showFABText} onClick={flipFABcontent}>
-        Click Me!
-      </FAB>
-      <FAB appearance="subtle" iconOnly disabled icon={iconProps} style={commonTestStyles.vmargin} />
-      <FAB appearance="subtle" icon={iconProps} style={commonTestStyles.vmargin} showContent={showFABText} onClick={flipFABcontent}>
-        Click Me!
-      </FAB>
-    </View>
-  );
-};
+export { ButtonVariantTest } from './ButtonVariantTestSection.mobile';

package/src/TestComponents/Button/ButtonVariantTestSection.ios.tsx

@@ -0,0 +1 @@
+export { ButtonVariantTest } from './ButtonVariantTestSection.mobile';

package/src/TestComponents/Button/ButtonVariantTestSection.mobile.tsx

@@ -0,0 +1,45 @@
+import { Button, FAB } from '@fluentui-react-native/experimental-button';
+import * as React from 'react';
+import { View } from 'react-native';
+import { commonTestStyles, testContentRootViewStyle } from '../Common/styles';
+import { iconProps } from '../Common/iconExamples';
+
+export const ButtonVariantTest: React.FunctionComponent = () => {
+  const [showFABText, setShowFABText] = React.useState(true);
+  const flipFABcontent = React.useCallback(() => setShowFABText(!showFABText), [showFABText]);
+
+  return (
+    <View style={testContentRootViewStyle}>
+      <Button style={commonTestStyles.vmargin}>Default</Button>
+      <Button disabled style={commonTestStyles.vmargin}>
+        Default Disabled
+      </Button>
+      <Button appearance="accent" style={commonTestStyles.vmargin}>
+        Accent
+      </Button>
+      <Button disabled appearance="accent" style={commonTestStyles.vmargin}>
+        Accent Disabled
+      </Button>
+      <Button appearance="outline" style={commonTestStyles.vmargin}>
+        Outline
+      </Button>
+      <Button appearance="outline" disabled style={commonTestStyles.vmargin}>
+        Outline Disabled
+      </Button>
+      <Button appearance="subtle" style={commonTestStyles.vmargin}>
+        Subtle
+      </Button>
+      <Button appearance="subtle" disabled style={commonTestStyles.vmargin}>
+        Subtle Disabled
+      </Button>
+      <FAB icon={iconProps} iconOnly disabled style={commonTestStyles.vmargin} />
+      <FAB icon={iconProps} style={commonTestStyles.vmargin} showContent={showFABText} onClick={flipFABcontent}>
+        Click Me!
+      </FAB>
+      <FAB appearance="subtle" iconOnly disabled icon={iconProps} style={commonTestStyles.vmargin} />
+      <FAB appearance="subtle" icon={iconProps} style={commonTestStyles.vmargin} showContent={showFABText} onClick={flipFABcontent}>
+        Click Me!
+      </FAB>
+    </View>
+  );
+};

package/src/TestComponents/Button/deprecated/ButtonFocusTest.tsx

@@ -2,7 +2,6 @@ import { Button } from '@fluentui/react-native';
 import type { IFocusable } from '@fluentui-react-native/interactive-hooks';
 import { Stack } from '@fluentui-react-native/stack';
 import * as React from 'react';
-import { findNodeHandle } from 'react-native';
 import { stackStyle } from '../../Common/styles';
 
 export const ButtonFocusTest_deprecated: React.FunctionComponent = () => {
@@ -14,8 +13,6 @@ export const ButtonFocusTest_deprecated: React.FunctionComponent = () => {
   const onFocus = React.useCallback(() => {
     setState({ focused: !state.focused });
     if (buttonRef.current && !state.focused) {
-      const node = findNodeHandle(buttonRef.current);
-      console.log(node);
       buttonRef.current.focus();
     }
   }, [state, setState]);

package/src/TestComponents/Common/MenuPicker.desktop.tsx

@@ -1,8 +1,8 @@
 import * as React from 'react';
 import { View, StyleSheet } from 'react-native';
 import { Menu, MenuItem, MenuTrigger, MenuPopover, MenuList } from '@fluentui-react-native/menu';
-import type { MenuPickerProps, CollectionItem } from './MenuPicker';
-export type { MenuPickerProps, CollectionItem } from './MenuPicker';
+import type { MenuPickerProps, CollectionItem } from './MenuPicker.types';
+export { MenuPickerProps, CollectionItem };
 import { ButtonV1 as Button, Text } from '@fluentui/react-native';
 import { SvgXml } from 'react-native-svg';
 

package/src/TestComponents/Common/MenuPicker.tsx

@@ -1,27 +1,14 @@
 import * as React from 'react';
 import { Picker } from '@react-native-picker/picker';
 import { testProps } from './TestProps';
+import type { CollectionItem, MenuPickerProps } from './MenuPicker.types';
+export { CollectionItem, MenuPickerProps };
 
 /*
  * The MenuPicker was created because the RN Core Picker was deprecated (preventing us from updating to RN 0.66).
  * MenuPicker uses the community Picker package for iOS/Win32 and our own Picker for Win32/MacOS.
  */
 
-export interface CollectionItem<T = string> {
-  label: string;
-  value?: T;
-  testID?: string;
-}
-
-export interface MenuPickerProps {
-  prompt?: string;
-  selected?: string;
-  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, testID } = props;
   let selectedItemKey;

package/src/TestComponents/Common/MenuPicker.types.tsx

@@ -0,0 +1,14 @@
+export interface CollectionItem<T = string> {
+  label: string;
+  value?: T;
+  testID?: string;
+}
+
+export interface MenuPickerProps {
+  prompt?: string;
+  selected?: string;
+  onChange?: (value: any, index?: number) => void;
+  collection?: CollectionItem[];
+  style?: any;
+  testID?: string;
+}

package/src/TestComponents/Common/MenuPicker.windows.tsx

@@ -1,7 +1,8 @@
 export * from './MenuPicker.desktop';
 import * as React from 'react';
 import { Button, Text, View, StyleSheet } from 'react-native';
-import type { MenuPickerProps, CollectionItem } from './MenuPicker';
+import type { MenuPickerProps, CollectionItem } from './MenuPicker.types';
+export { MenuPickerProps, CollectionItem };
 
 export const MenuPicker: React.FunctionComponent<MenuPickerProps> = (props: MenuPickerProps) => {
   const { prompt, onChange, collection } = props;

package/src/TestComponents/FocusZone/FocusZoneE2ETest.tsx

@@ -1,25 +1,26 @@
-import React from 'react';
-import { View } from 'react-native';
-import type { FocusZoneDirection } from '@fluentui/react-native';
-import { FocusZone, MenuButton, Text } from '@fluentui/react-native';
-import { Switch } from '@fluentui-react-native/switch';
 import type { ButtonProps } from '@fluentui-react-native/button';
 import { ButtonV1 as Button } from '@fluentui-react-native/button';
-import { commonTestStyles } from '../Common/styles';
+import { Switch } from '@fluentui-react-native/switch';
+import type { FocusZoneDirection } from '@fluentui/react-native';
+import { FocusZone, MenuButton, Text } from '@fluentui/react-native';
+import React from 'react';
+import { View } from 'react-native';
 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_DIRECTION_ID,
+  FOCUSZONE_DIRECTION_PICKER,
+  FOCUSZONE_DISABLED_SWITCH,
   FOCUSZONE_GRID_AFTER,
+  FOCUSZONE_GRID_BEFORE,
   FOCUSZONE_GRID_BUTTON,
-  FOCUSZONE_DIRECTION_PICKER,
+  FOCUSZONE_TEST_COMPONENT,
+  FOCUSZONE_TWO_DIM_SWITCH,
 } from '../../../../E2E/src/FocusZone/consts';
-import { focusZoneTestStyles, GridButton } from './styles';
+import type { GridButton as GridButtonIndex } from '../../../../E2E/src/FocusZone/pages/FocusZonePageObject';
+import { commonTestStyles } from '../Common/styles';
 import { testProps } from '../Common/TestProps';
+import { focusZoneTestStyles, GridButton } from './styles';
 
 export const FocusZoneDirections: FocusZoneDirection[] = ['bidirectional', 'horizontal', 'vertical', 'none'];
 
@@ -68,7 +69,7 @@ export const GridOfButtons: React.FunctionComponent<GridOfButtonsProps> = (props
                   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) : undefined)}
+                  {...testProps(props.e2etesting ? FOCUSZONE_GRID_BUTTON(gridIndex as GridButtonIndex) : undefined)}
                 >
                   <Text>{gridIndex}</Text>
                 </GridButton>

package/tsconfig.json

@@ -7,7 +7,8 @@
     "paths": {
       "*": ["*", "*.win32", "./*"],
       "src/*": ["./src/*", "src"]
-    }
+    },
+    "types": ["webdriverio/async", "@wdio/jasmine-framework", "node", "@types/jasmine"]
   },
   "include": ["src"]
 }