@fluentui-react-native/tester 0.170.26 → 0.170.28

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui-react-native/tester",
-  "version": "0.170.26",
+  "version": "0.170.28",
   "description": "A test app to test FluentUI React Native Components during development",
   "license": "MIT",
   "author": "Microsoft <fluentuinativeowners@microsoft.com>",
@@ -8,6 +8,13 @@
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
   "typings": "lib/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./lib/index.js",
+      "require": "./lib-commonjs/index.js",
+      "types": "./lib/index.d.ts"
+    }
+  },
   "scripts": {
     "android": "react-native run-android",
     "build": "fluentui-scripts build",
@@ -33,73 +40,76 @@
     "directory": "apps/fluent-tester"
   },
   "dependencies": {
-    "@fluentui-react-native/android-theme": "0.25.2",
-    "@fluentui-react-native/apple-theme": "0.28.2",
-    "@fluentui-react-native/avatar": "1.12.8",
-    "@fluentui-react-native/badge": "0.11.2",
-    "@fluentui-react-native/button": "0.39.4",
-    "@fluentui-react-native/callout": "0.27.2",
-    "@fluentui-react-native/chip": "0.4.8",
-    "@fluentui-react-native/default-theme": "0.26.2",
-    "@fluentui-react-native/divider": "0.7.8",
-    "@fluentui-react-native/drawer": "0.4.4",
-    "@fluentui-react-native/dropdown": "0.10.13",
-    "@fluentui-react-native/experimental-activity-indicator": "0.10.3",
-    "@fluentui-react-native/experimental-appearance-additions": "0.7.2",
-    "@fluentui-react-native/experimental-avatar": "0.21.4",
-    "@fluentui-react-native/experimental-checkbox": "0.17.9",
-    "@fluentui-react-native/experimental-expander": "0.8.3",
-    "@fluentui-react-native/experimental-menu-button": "0.10.19",
-    "@fluentui-react-native/experimental-native-date-picker": "0.11.0",
-    "@fluentui-react-native/experimental-shadow": "0.6.4",
-    "@fluentui-react-native/experimental-shimmer": "0.13.5",
-    "@fluentui-react-native/framework": "0.14.2",
-    "@fluentui-react-native/icon": "0.21.8",
-    "@fluentui-react-native/input": "0.7.8",
-    "@fluentui-react-native/interactive-hooks": "0.27.4",
-    "@fluentui-react-native/menu": "1.14.22",
-    "@fluentui-react-native/merge-props": "0.9.1",
-    "@fluentui-react-native/notification": "0.25.11",
-    "@fluentui-react-native/overflow": "0.3.22",
-    "@fluentui-react-native/radio-group": "0.21.16",
-    "@fluentui-react-native/separator": "0.18.2",
-    "@fluentui-react-native/spinner": "0.9.9",
-    "@fluentui-react-native/stack": "0.10.7",
-    "@fluentui-react-native/switch": "0.13.7",
-    "@fluentui-react-native/tablist": "0.7.4",
-    "@fluentui-react-native/text": "0.24.6",
-    "@fluentui-react-native/theme": "0.11.1",
-    "@fluentui-react-native/theme-tokens": "0.27.1",
-    "@fluentui-react-native/theme-types": "0.39.1",
-    "@fluentui-react-native/themed-stylesheet": "1.7.1",
-    "@fluentui-react-native/theming-utils": "0.26.1",
-    "@fluentui-react-native/tooltip": "0.4.11",
-    "@fluentui-react-native/vibrancy-view": "0.3.0",
-    "@fluentui-react-native/win32-theme": "0.34.5",
-    "@fluentui/react-native": "0.42.13",
+    "@fluentui-react-native/android-theme": "0.25.4",
+    "@fluentui-react-native/apple-theme": "0.28.4",
+    "@fluentui-react-native/avatar": "1.12.10",
+    "@fluentui-react-native/badge": "0.11.4",
+    "@fluentui-react-native/button": "0.39.6",
+    "@fluentui-react-native/callout": "0.27.4",
+    "@fluentui-react-native/chip": "0.4.10",
+    "@fluentui-react-native/default-theme": "0.26.4",
+    "@fluentui-react-native/divider": "0.7.10",
+    "@fluentui-react-native/drawer": "0.4.6",
+    "@fluentui-react-native/dropdown": "0.10.15",
+    "@fluentui-react-native/e2e-testing": "1.41.0",
+    "@fluentui-react-native/experimental-activity-indicator": "0.10.5",
+    "@fluentui-react-native/experimental-appearance-additions": "0.7.4",
+    "@fluentui-react-native/experimental-avatar": "0.21.6",
+    "@fluentui-react-native/experimental-checkbox": "0.17.11",
+    "@fluentui-react-native/experimental-expander": "0.8.5",
+    "@fluentui-react-native/experimental-menu-button": "0.10.21",
+    "@fluentui-react-native/experimental-native-date-picker": "0.11.2",
+    "@fluentui-react-native/experimental-shadow": "0.6.6",
+    "@fluentui-react-native/experimental-shimmer": "0.13.7",
+    "@fluentui-react-native/framework": "0.14.4",
+    "@fluentui-react-native/icon": "0.21.10",
+    "@fluentui-react-native/input": "0.7.10",
+    "@fluentui-react-native/interactive-hooks": "0.27.6",
+    "@fluentui-react-native/menu": "1.14.24",
+    "@fluentui-react-native/merge-props": "0.9.3",
+    "@fluentui-react-native/notification": "0.25.13",
+    "@fluentui-react-native/overflow": "0.3.24",
+    "@fluentui-react-native/radio-group": "0.21.18",
+    "@fluentui-react-native/separator": "0.18.4",
+    "@fluentui-react-native/spinner": "0.9.11",
+    "@fluentui-react-native/stack": "0.10.9",
+    "@fluentui-react-native/switch": "0.13.9",
+    "@fluentui-react-native/tablist": "0.7.6",
+    "@fluentui-react-native/text": "0.24.8",
+    "@fluentui-react-native/theme": "0.11.3",
+    "@fluentui-react-native/theme-tokens": "0.27.3",
+    "@fluentui-react-native/theme-types": "0.39.3",
+    "@fluentui-react-native/themed-stylesheet": "1.7.3",
+    "@fluentui-react-native/theming-utils": "0.26.3",
+    "@fluentui-react-native/tooltip": "0.4.13",
+    "@fluentui-react-native/vibrancy-view": "0.3.2",
+    "@fluentui-react-native/win32-theme": "0.34.7",
+    "@fluentui/react-native": "0.42.15",
     "@fortawesome/fontawesome-svg-core": "^6.2.0",
     "@fortawesome/free-solid-svg-icons": "^6.2.0",
     "@fortawesome/react-native-fontawesome": "^0.3.0",
+    "@office-iss/react-native-win32": "^0.74.0",
     "@react-native-community/slider": "^4.2.0",
     "@react-native-menu/menu": "^0.7.3",
     "@react-native-picker/picker": "^2.7.0",
+    "@types/react": "~18.2.0",
     "@warren-ms/react-native-icons": "^0.0.13",
     "react": "18.2.0",
-    "react-native": "^0.73.0",
-    "react-native-macos": "^0.73.0",
-    "react-native-svg": "^15.0.0",
-    "react-native-windows": "^0.73.0",
+    "react-native": "^0.74.0",
+    "react-native-macos": "^0.74.0",
+    "react-native-svg": "^15.4.0",
+    "react-native-windows": "^0.74.0",
     "tslib": "^2.3.1"
   },
   "devDependencies": {
-    "@babel/core": "^7.8.0",
-    "@babel/runtime": "^7.8.0",
+    "@babel/core": "^7.20.0",
+    "@babel/runtime": "^7.20.0",
     "@fluentui-react-native/eslint-config-rules": "0.1.1",
-    "@fluentui-react-native/focus-zone": "0.21.0",
+    "@fluentui-react-native/focus-zone": "0.21.2",
     "@fluentui-react-native/scripts": "0.1.1",
-    "@react-native/babel-preset": "^0.73.0",
-    "@react-native/metro-babel-transformer": "^0.73.0",
-    "@react-native/metro-config": "^0.73.0",
+    "@react-native/babel-preset": "^0.74.0",
+    "@react-native/metro-babel-transformer": "^0.74.0",
+    "@react-native/metro-config": "^0.74.0",
     "@rnx-kit/cli": "^0.18.0",
     "@rnx-kit/metro-config": "^2.0.0",
     "@types/jasmine": "5.1.4",
@@ -107,15 +117,12 @@
     "@wdio/globals": "^8.40.0",
     "@wdio/jasmine-framework": "^8.40.0",
     "flow-bin": "^0.113.0",
-    "metro-config": "^0.80.0",
+    "metro-config": "^0.80.3",
     "react-native-svg-transformer": "^1.0.0",
-    "react-native-test-app": "^3.4.7",
+    "react-native-test-app": "^3.9.2",
     "react-test-renderer": "18.2.0",
     "webdriverio": "^8.40.0"
   },
-  "peerDependencies": {
-    "@office-iss/react-native-win32": "^0.73.0"
-  },
   "jest": {
     "preset": "react-native"
   },
@@ -173,15 +180,17 @@
         "@fluentui-react-native/scripts/align-deps-preset.js"
       ],
       "requirements": [
-        "react-native@0.73"
+        "react-native@0.74"
       ],
       "capabilities": [
+        "babel-preset-react-native",
         "core-android",
         "core-ios",
         "core-macos",
+        "core-win32",
         "core-windows",
-        "babel-preset-react-native",
         "metro-config",
+        "metro-react-native-babel-transformer",
         "react",
         "react-test-renderer",
         "svg",

package/src/FluentTester.tsx

@@ -3,6 +3,8 @@ import { ScrollView, View, Text as RNText, Platform, SafeAreaView, BackHandler,
 
 import { Separator, TextV1 as Text } from '@fluentui/react-native';
 import { ButtonV1 as Button } from '@fluentui-react-native/button';
+import { BASE_TESTPAGE, TESTPAGE_BUTTONS_SCROLLVIEWER, TESTPAGE_CONTENT_SCROLLVIEWER } from '@fluentui-react-native/e2e-testing';
+import { ROOT_VIEW } from '@fluentui-react-native/e2e-testing';
 import type { Theme } from '@fluentui-react-native/framework';
 import { useTheme } from '@fluentui-react-native/theme-types';
 import { themedStyleSheet } from '@fluentui-react-native/themed-stylesheet';
@@ -11,8 +13,6 @@ import { fluentTesterStyles, mobileStyles } from './TestComponents/Common/styles
 import { testProps } from './TestComponents/Common/TestProps';
 import { tests } from './testPages';
 import { ThemePickers } from './theme/ThemePickers';
-import { BASE_TESTPAGE, TESTPAGE_BUTTONS_SCROLLVIEWER, TESTPAGE_CONTENT_SCROLLVIEWER } from '../../E2E/src/common/consts';
-import { ROOT_VIEW } from '../../E2E/src/common/consts';
 
 // uncomment the below lines to enable message spy
 /**

package/src/TestComponents/ActivityIndicator/ActivityIndicatorTest.tsx

@@ -2,10 +2,10 @@ import * as React from 'react';
 import { View, Switch } from 'react-native';
 
 import { Text } from '@fluentui/react-native';
+import { ACTIVITY_INDICATOR_TESTPAGE } from '@fluentui-react-native/e2e-testing';
 import { ActivityIndicator } from '@fluentui-react-native/experimental-activity-indicator';
 import { Stack } from '@fluentui-react-native/stack';
 
-import { ACTIVITY_INDICATOR_TESTPAGE } from '../../../../E2E/src/ActivityIndicator/consts';
 import { stackStyle, commonTestStyles as commonStyles } from '../Common/styles';
 import type { TestSection, PlatformStatus } from '../Test';
 import { Test } from '../Test';

package/src/TestComponents/Avatar/AvatarTest.tsx

@@ -1,12 +1,13 @@
 import * as React from 'react';
 import { Platform } from 'react-native';
 
+import { AVATAR_TESTPAGE } from '@fluentui-react-native/e2e-testing';
+
+import type { PlatformStatus, TestSection } from '../Test';
+import { Test } from '../Test';
 import { StandardUsage } from './BasicAvatar';
 import { CustomizeUsage } from './CustomizedAvatar';
 import { E2EAvatarTest } from './E2EAvatarTest';
-import { AVATAR_TESTPAGE } from '../../../../E2E/src/Avatar/consts';
-import type { TestSection, PlatformStatus } from '../Test';
-import { Test } from '../Test';
 
 const avatarSections: TestSection[] = [
   {

package/src/TestComponents/Avatar/E2EAvatarTest.tsx

@@ -2,14 +2,14 @@ import * as React from 'react';
 import { View } from 'react-native';
 
 import { Avatar } from '@fluentui-react-native/avatar';
-
 import {
-  AVATAR_ACCESSIBILITY_LABEL,
   AVATAR_ACCESSIBILITY_HINT,
+  AVATAR_ACCESSIBILITY_LABEL,
   AVATAR_ACCESSIBILITY_ROLE,
-  AVATAR_TEST_COMPONENT,
   AVATAR_SECONDARY_TEST_COMPONENT,
-} from '../../../../E2E/src/Avatar/consts';
+  AVATAR_TEST_COMPONENT,
+} from '@fluentui-react-native/e2e-testing';
+
 import { testProps } from '../Common/TestProps';
 
 export const E2EAvatarTest: React.FunctionComponent = () => {

package/src/TestComponents/Avatar/NativeAvatarTest.tsx

@@ -2,12 +2,12 @@ import * as React from 'react';
 import { Switch, View } from 'react-native';
 
 import { Text } from '@fluentui/react-native';
+import { NATIVE_AVATAR_TESTPAGE } from '@fluentui-react-native/e2e-testing';
 import type { Size } from '@fluentui-react-native/experimental-avatar/';
 import { NativeAvatar } from '@fluentui-react-native/experimental-avatar/';
 import { Stack } from '@fluentui-react-native/stack';
 
 import { testImageSource, rainbowGradientSource } from './testImageSources';
-import { NATIVE_AVATAR_TESTPAGE } from '../../../../E2E/src/Avatar/consts';
 import { commonTestStyles as commonStyles } from '../Common/styles';
 import type { TestSection, PlatformStatus } from '../Test';
 import { Test } from '../Test';

package/src/TestComponents/Badge/BadgeTest.tsx

@@ -1,11 +1,12 @@
 import * as React from 'react';
 import { Platform } from 'react-native';
 
+import { BADGE_TESTPAGE } from '@fluentui-react-native/e2e-testing';
+
 import { BasicBadge } from './BasicBadgeTest';
 import { CounterBadgeTest } from './CounterBadgeTest';
 import { E2EBadgeTest } from './E2EBadgeTest';
 import { PresenceBadgeTest } from './PresenceBadgeTest';
-import { BADGE_TESTPAGE } from '../../../../E2E/src/Badge/consts';
 import type { TestSection, PlatformStatus } from '../Test';
 import { Test } from '../Test';
 

package/src/TestComponents/Badge/E2EBadgeTest.tsx

@@ -2,8 +2,8 @@ import * as React from 'react';
 import { View } from 'react-native';
 
 import { Badge, PresenceBadge } from '@fluentui-react-native/badge';
+import { BADGE_TEST_COMPONENT, BADGE_SECONDARY_TEST_COMPONENT } from '@fluentui-react-native/e2e-testing';
 
-import { BADGE_TEST_COMPONENT, BADGE_SECONDARY_TEST_COMPONENT } from '../../../../E2E/src/Badge/consts';
 import { testProps } from '../Common/TestProps';
 
 export const E2EBadgeTest: React.FunctionComponent = () => {

package/src/TestComponents/Button/ButtonTest.tsx

@@ -1,6 +1,8 @@
 import * as React from 'react';
 import { Platform } from 'react-native';
 
+import { BUTTON_TESTPAGE } from '@fluentui-react-native/e2e-testing';
+
 import { ButtonShapeTest } from './ButtonShapeTestSection';
 import { ButtonSizeTest } from './ButtonSizeTestSection';
 import { ButtonVariantTest } from './ButtonVariantTestSection';
@@ -9,7 +11,6 @@ import { ButtonIconTest_deprecated } from './deprecated/ButtonIconTest';
 import { E2EButtonTest_deprecated } from './deprecated/E2EButtonTest';
 import { E2EButtonTest } from './E2EButtonTest';
 import { ToggleButtonTest } from './ToggleButtonTestSection';
-import { BUTTON_TESTPAGE } from '../../../../E2E/src/ButtonLegacy/consts';
 import { ButtonHOCTest } from '../Button/ButtonHOCTestSection';
 import { ButtonIconTest } from '../Button/ButtonIconTestSection';
 import type { TestSection, PlatformStatus } from '../Test';

package/src/TestComponents/Button/E2EButtonTest.tsx

@@ -2,11 +2,7 @@
 import * as React from 'react';
 import { View } from 'react-native';
 
-import { Text } from '@fluentui/react-native';
-import { ButtonV1 as Button } from '@fluentui/react-native';
-import { Stack } from '@fluentui-react-native/stack';
-import type { IViewWin32Props } from '@office-iss/react-native-win32';
-
+import { ButtonV1 as Button, Text } from '@fluentui/react-native';
 import {
   BUTTON_TEST_COMPONENT,
   BUTTON_ON_PRESS,
@@ -18,10 +14,31 @@ import {
   BUTTON_PRESS_TEST_COMPONENT_LABEL,
   BUTTON_FOCUSABLE_TEST_COMPONENT,
   BUTTON_FOCUSABLE_TEST_COMPONENT_LABEL,
-} from '../../../../E2E/src/ButtonLegacy/consts';
+} from '@fluentui-react-native/e2e-testing';
+import { Stack } from '@fluentui-react-native/stack';
+import type { IKeyboardEvent } from '@office-iss/react-native-win32';
+
 import { stackStyle } from '../Common/styles';
 import { testProps } from '../Common/TestProps';
 
+function keyEvent(key: string) {
+  return {
+    key,
+    capsLockKey: false,
+    shiftKey: false,
+    ctrlKey: false,
+    altKey: false,
+    metaKey: false,
+    numericPadKey: false,
+    helpKey: false,
+    functionKey: false,
+    ArrowLeft: false,
+    ArrowRight: false,
+    ArrowUp: false,
+    ArrowDown: false,
+  };
+}
+
 export const E2EButtonTest: React.FunctionComponent = () => {
   const [buttonPressed, setButtonPressed] = React.useState(false);
   const [keyDetected, setKeyDetected] = React.useState('');
@@ -31,16 +48,16 @@ export const E2EButtonTest: React.FunctionComponent = () => {
     setKeyDetected('');
   }, [buttonPressed]);
 
-  const keyPressProps: Omit<IViewWin32Props, 'accessibilityRole' | 'role' | 'onBlur' | 'onFocus' | 'onMouseLeave' | 'onMouseEnter'> = {
-    keyDownEvents: [{ key: 'a' }],
-    onKeyDown: (args) => {
+  const keyPressProps = {
+    keyDownEvents: [keyEvent('a')],
+    onKeyDown: (args: IKeyboardEvent) => {
       if (args.nativeEvent.key === 'a') {
         setKeyDetected('a (down)');
         args.stopPropagation();
       }
     },
-    keyUpEvents: [{ key: 'b' }],
-    onKeyUp: (args) => {
+    keyUpEvents: [keyEvent('b')],
+    onKeyUp: (args: IKeyboardEvent) => {
       if (args.nativeEvent.key === 'b') {
         setKeyDetected('b (up)');
         args.stopPropagation();

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

@@ -3,15 +3,15 @@ import * as React from 'react';
 import { View } from 'react-native';
 
 import { Button, Text } from '@fluentui/react-native';
-import { Stack } from '@fluentui-react-native/stack';
-
 import {
   BUTTON_TEST_COMPONENT_DEPRECATED,
   BUTTON_ON_PRESS_DEPRECATED,
   BUTTON_NO_A11Y_LABEL_COMPONENT_DEPRECATED,
   BUTTON_ACCESSIBILITY_LABEL_DEPRECATED,
   BUTTON_TEST_COMPONENT_LABEL_DEPRECATED,
-} from '../../../../../E2E/src/ButtonLegacy/consts';
+} from '@fluentui-react-native/e2e-testing';
+import { Stack } from '@fluentui-react-native/stack';
+
 import { stackStyle } from '../../Common/styles';
 import { testProps } from '../../Common/TestProps';
 

package/src/TestComponents/Callout/CalloutE2ETest.tsx

@@ -4,9 +4,9 @@ import { View } from 'react-native';
 
 import type { DismissBehaviors } from '@fluentui/react-native';
 import { ButtonV1 as Button, Callout, Text } from '@fluentui/react-native';
+import { BUTTON_TO_OPEN_CALLOUT, CALLOUT_ACCESSIBILITY_LABEL, CALLOUT_TEST_COMPONENT } from '@fluentui-react-native/e2e-testing';
 import { Switch } from '@fluentui-react-native/switch';
 
-import { BUTTON_TO_OPEN_CALLOUT, CALLOUT_ACCESSIBILITY_LABEL, CALLOUT_TEST_COMPONENT } from '../../../../E2E/src/Callout/consts';
 import { testProps } from '../Common/TestProps';
 
 export const E2ECalloutTest: React.FunctionComponent = () => {

package/src/TestComponents/Callout/CalloutTest.tsx

@@ -6,9 +6,9 @@ import { ButtonV1 as Button, Separator, Pressable } from '@fluentui/react-native
 import type { IFocusable, RestoreFocusEvent, DismissBehaviors } from '@fluentui/react-native';
 import type { CalloutNativeCommands, ICalloutProps } from '@fluentui-react-native/callout';
 import { Callout } from '@fluentui-react-native/callout';
+import { CALLOUT_TESTPAGE } from '@fluentui-react-native/e2e-testing';
 
 import { E2ECalloutTest } from './CalloutE2ETest';
-import { CALLOUT_TESTPAGE } from '../../../../E2E/src/Callout/consts';
 import { MenuPicker } from '../Common/MenuPicker';
 import { fluentTesterStyles } from '../Common/styles';
 import type { TestSection, PlatformStatus } from '../Test';

package/src/TestComponents/CheckboxLegacy/CheckboxLegacyE2ETest.tsx

@@ -2,15 +2,15 @@ import * as React from 'react';
 import { View } from 'react-native';
 
 import { Checkbox, Text } from '@fluentui/react-native';
-import { Stack } from '@fluentui-react-native/stack';
-
 import {
   CHECKBOX_TEST_COMPONENT,
   CHECKBOX_ON_PRESS,
   CHECKBOX_NO_A11Y_LABEL_COMPONENT,
   CHECKBOX_TEST_COMPONENT_LABEL,
   CHECKBOX_ACCESSIBILITY_LABEL,
-} from '../../../../E2E/src/CheckboxLegacy/consts';
+} from '@fluentui-react-native/e2e-testing';
+import { Stack } from '@fluentui-react-native/stack';
+
 import { stackStyle } from '../Common/styles';
 import { testProps } from '../Common/TestProps';
 

package/src/TestComponents/CheckboxLegacy/CheckboxLegacyTest.tsx

@@ -2,12 +2,12 @@ import * as React from 'react';
 import { View, TextInput } from 'react-native';
 
 import { Checkbox } from '@fluentui/react-native';
+import { CHECKBOX_TESTPAGE } from '@fluentui-react-native/e2e-testing';
 import type { Theme } from '@fluentui-react-native/theme-types';
 import { useTheme } from '@fluentui-react-native/theme-types';
 import { themedStyleSheet } from '@fluentui-react-native/themed-stylesheet';
 
 import { CheckboxLegacyE2ETest } from './CheckboxLegacyE2ETest';
-import { CHECKBOX_TESTPAGE } from '../../../../E2E/src/CheckboxLegacy/consts';
 import { commonTestStyles as commonStyles } from '../Common/styles';
 import type { TestSection, PlatformStatus } from '../Test';
 import { Test } from '../Test';

package/src/TestComponents/CheckboxV1/CheckboxV1Test.tsx

@@ -1,8 +1,9 @@
 import * as React from 'react';
 import { Platform } from 'react-native';
 
+import { CHECKBOXV1_TESTPAGE } from '@fluentui-react-native/e2e-testing';
+
 import { E2ECheckboxV1Test } from './E2ECheckboxV1Test';
-import { CHECKBOXV1_TESTPAGE } from '../../../../E2E/src/CheckboxV1/consts';
 import type { TestSection, PlatformStatus } from '../Test';
 import { Test } from '../Test';
 import { BasicCheckbox } from './BasicCheckboxTest';

package/src/TestComponents/CheckboxV1/E2ECheckboxV1Test.tsx

@@ -2,16 +2,16 @@ import * as React from 'react';
 import { View } from 'react-native';
 
 import { Text } from '@fluentui/react-native';
-import { Checkbox } from '@fluentui-react-native/experimental-checkbox';
-import { Stack } from '@fluentui-react-native/stack';
-
 import {
   CHECKBOXV1_TEST_COMPONENT,
   CHECKBOXV1_ACCESSIBILITY_LABEL,
   CHECKBOXV1_NO_A11Y_LABEL_COMPONENT,
   CHECKBOXV1_TEST_COMPONENT_LABEL,
   CHECKBOXV1_ON_PRESS,
-} from '../../../../E2E/src/CheckboxV1/consts';
+} from '@fluentui-react-native/e2e-testing';
+import { Checkbox } from '@fluentui-react-native/experimental-checkbox';
+import { Stack } from '@fluentui-react-native/stack';
+
 import { stackStyle } from '../Common/styles';
 import { testProps } from '../Common/TestProps';
 

package/src/TestComponents/Chip/ChipTest.tsx

@@ -1,8 +1,9 @@
 import * as React from 'react';
 
+import { CHIP_TESTPAGE } from '@fluentui-react-native/e2e-testing';
+
 import { ChipDefault } from './ChipDefault';
 import { E2EChipTest } from './E2EChipTest';
-import { CHIP_TESTPAGE } from '../../../../E2E/src/Chip/consts';
 import type { TestSection, PlatformStatus } from '../Test';
 import { Test } from '../Test';
 

package/src/TestComponents/Chip/E2EChipTest.tsx

@@ -2,15 +2,15 @@ import * as React from 'react';
 import { View } from 'react-native';
 
 import { Chip } from '@fluentui-react-native/chip';
-import type { InteractionEvent } from '@fluentui-react-native/interactive-hooks';
-import { Text } from '@fluentui-react-native/text';
-
 import {
   CHIP_CALLBACK_TEXT_END_STATE,
   CHIP_CALLBACK_TEXT_START_STATE,
   CHIP_TEST_COMPONENT,
   CHIP_TEXT,
-} from '../../../../E2E/src/Chip/consts';
+} from '@fluentui-react-native/e2e-testing';
+import type { InteractionEvent } from '@fluentui-react-native/interactive-hooks';
+import { Text } from '@fluentui-react-native/text';
+
 import { testProps } from '../Common/TestProps';
 
 export const E2EChipTest: React.FunctionComponent = () => {

package/src/TestComponents/ColorTokens/ColorTokenTest.tsx

@@ -4,6 +4,7 @@ import { View, StyleSheet, Platform } from 'react-native';
 
 import { Text, ToggleButton } from '@fluentui/react-native';
 import { createAliasTokens } from '@fluentui-react-native/default-theme';
+import { COLORTOKENS_TEST_COMPONENT, COLORTOKEN_TESTPAGE } from '@fluentui-react-native/e2e-testing';
 import type { SvgIconProps } from '@fluentui-react-native/icon';
 import { globalTokens } from '@fluentui-react-native/theme-tokens';
 import type { Theme } from '@fluentui-react-native/theme-types';
@@ -14,7 +15,6 @@ import { createOfficeAliasTokens } from '@fluentui-react-native/win32-theme';
 import type { SvgProps } from 'react-native-svg';
 import Svg, { G, Path } from 'react-native-svg';
 
-import { COLORTOKENS_TEST_COMPONENT, COLORTOKEN_TESTPAGE } from '../../../../E2E/src/ColorTokens/consts';
 import { commonTestStyles } from '../Common/styles';
 import { testProps } from '../Common/TestProps';
 import type { TestSection, PlatformStatus } from '../Test';

package/src/TestComponents/ContextualMenu/ContextualMenuTest.tsx

@@ -12,9 +12,9 @@ import {
   Separator,
   Checkbox,
 } from '@fluentui/react-native';
+import { CONTEXTUALMENU_TESTPAGE } from '@fluentui-react-native/e2e-testing';
 
 import { E2EContextualMenuTest } from './E2EContextualMenuTest';
-import { CONTEXTUALMENU_TESTPAGE } from '../../../../E2E/src/ContextualMenu/consts';
 import { svgProps, fontProps, testImage } from '../Common/iconExamples';
 import type { TestSection, PlatformStatus } from '../Test';
 import { Test } from '../Test';
@@ -219,6 +219,7 @@ const NestedContextualMenu: React.FunctionComponent = () => {
             itemKey="4"
             onHoverIn={toggleShowSubmenu}
             componentRef={stdMenuItemRef}
+            expanded={showSubmenu}
           />
           {showSubmenu && (
             <Submenu target={stdMenuItemRef} onDismiss={onDismissSubmenu} onShow={onShowSubmenu} setShowMenu={toggleShowSubmenu}>
@@ -295,6 +296,8 @@ const IconContextualMenu: React.FunctionComponent = () => {
             style={{ borderWidth: 0 }}
             icon={{ svgSource: svgProps, width: 12, height: 12 }}
             onClick={toggleShowContextualMenu}
+            accessibilityLabel="Wheelchair icon button"
+            tooltip="Toggle menu"
           />
         </View>
       </View>
@@ -446,6 +449,7 @@ const ScrollViewContextualMenu: React.FunctionComponent = () => {
             itemKey="3"
             onHoverIn={toggleShowSubmenu}
             componentRef={stdMenuItemRef}
+            expanded={showSubmenu}
           />
           {showSubmenu && (
             <Submenu

package/src/TestComponents/ContextualMenu/E2EContextualMenuTest.tsx

@@ -3,8 +3,8 @@ import * as React from 'react';
 import { Text, View, Switch } from 'react-native';
 
 import { ButtonV1 as Button, ContextualMenu, ContextualMenuItem, Separator } from '@fluentui/react-native';
+import { CONTEXTUALMENUITEM_TEST_COMPONENT, CONTEXTUALMENU_TEST_COMPONENT } from '@fluentui-react-native/e2e-testing';
 
-import { CONTEXTUALMENUITEM_TEST_COMPONENT, CONTEXTUALMENU_TEST_COMPONENT } from '../../../../E2E/src/ContextualMenu/consts';
 import { testProps } from '../Common/TestProps';
 
 export const E2EContextualMenuTest: React.FunctionComponent = () => {

package/src/TestComponents/CornerRadius/CornerRadiusTest.tsx

@@ -2,12 +2,12 @@ import * as React from 'react';
 import { View } from 'react-native';
 
 import { Text } from '@fluentui/react-native';
+import { HOMEPAGE_CORNERRADIUS_TESTPAGE } from '@fluentui-react-native/e2e-testing';
 import { useFluentTheme } from '@fluentui-react-native/framework';
 import { Stack } from '@fluentui-react-native/stack';
 import { globalTokens } from '@fluentui-react-native/theme-tokens';
 import { getCurrentAppearance } from '@fluentui-react-native/theming-utils';
 
-import { HOMEPAGE_CORNERRADIUS_TESTPAGE } from '../../../../E2E/src/CornerRadiusTokens/consts';
 import { stackStyle } from '../Common/styles';
 import type { TestSection, PlatformStatus } from '../Test';
 import { Test } from '../Test';

package/src/TestComponents/Divider/DividerTest.tsx

@@ -2,11 +2,11 @@ import * as React from 'react';
 import { Platform, StyleSheet, View } from 'react-native';
 
 import { Divider } from '@fluentui-react-native/divider';
+import { DIVIDER_TESTPAGE } from '@fluentui-react-native/e2e-testing';
 import { Stack } from '@fluentui-react-native/stack';
 import { TextV1 as Text } from '@fluentui-react-native/text';
 
 import { CustomisedMobileDividers, MobileDividers } from './MobileDividerTest';
-import { DIVIDER_TESTPAGE } from '../../../../E2E/src/Divider/consts';
 import TestSvg from '../../../assets/test.svg';
 import { commonTestStyles } from '../Common/styles';
 import { Test } from '../Test';