@fluentui-react-native/tester 0.170.50 → 0.170.51

package/src/TestComponents/Button/E2EButtonTest.tsx

@@ -1,120 +0,0 @@
-import * as React from 'react';
-import { View } from 'react-native';
-
-import { ButtonV1 as Button, Text } from '@fluentui/react-native';
-import {
-  BUTTON_TEST_COMPONENT,
-  BUTTON_ON_PRESS,
-  BUTTON_NO_A11Y_LABEL_COMPONENT,
-  BUTTON_ACCESSIBILITY_LABEL,
-  BUTTON_TEST_COMPONENT_LABEL,
-  BUTTON_ON_KEY,
-  BUTTON_PRESS_TEST_COMPONENT,
-  BUTTON_PRESS_TEST_COMPONENT_LABEL,
-  BUTTON_FOCUSABLE_TEST_COMPONENT,
-  BUTTON_FOCUSABLE_TEST_COMPONENT_LABEL,
-} 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('');
-
-  const onClick = React.useCallback(() => {
-    setButtonPressed(!buttonPressed);
-    setKeyDetected('');
-  }, [buttonPressed]);
-
-  const keyPressProps = {
-    keyDownEvents: [keyEvent('a')],
-    onKeyDown: (args: IKeyboardEvent) => {
-      if (args.nativeEvent.key === 'a') {
-        setKeyDetected('a (down)');
-        args.stopPropagation();
-      }
-    },
-    keyUpEvents: [keyEvent('b')],
-    onKeyUp: (args: IKeyboardEvent) => {
-      if (args.nativeEvent.key === 'b') {
-        setKeyDetected('b (up)');
-        args.stopPropagation();
-      }
-    },
-  };
-
-  return (
-    <View>
-      <Stack style={stackStyle}>
-        <Button
-          onClick={onClick}
-          accessibilityLabel={BUTTON_ACCESSIBILITY_LABEL}
-          /* For Android E2E testing purposes, testProps must be passed in after accessibilityLabel. */
-          {...testProps(BUTTON_TEST_COMPONENT)}
-        >
-          This is a button for E2E testing
-        </Button>
-        <Button
-          onClick={onClick}
-          accessibilityRole="menuitem"
-          /* For Android E2E testing purposes, testProps must be passed in after accessibilityLabel. */
-          {...testProps(BUTTON_NO_A11Y_LABEL_COMPONENT)}
-        >
-          {BUTTON_TEST_COMPONENT_LABEL}
-        </Button>
-        <Button
-          onClick={onClick}
-          accessibilityLabel={BUTTON_PRESS_TEST_COMPONENT_LABEL}
-          {...keyPressProps}
-          /* For Android E2E testing purposes, testProps must be passed in after accessibilityLabel. */
-          {...testProps(BUTTON_PRESS_TEST_COMPONENT)}
-        >
-          Press &quot;a&quot; or &quot;b&quot; after focusing this button
-        </Button>
-        <Button
-          onClick={onClick}
-          accessibilityLabel={BUTTON_FOCUSABLE_TEST_COMPONENT_LABEL}
-          focusable={false}
-          /* For Android E2E testing purposes, testProps must be passed in after accessibilityLabel. */
-          {...testProps(BUTTON_FOCUSABLE_TEST_COMPONENT)}
-        >
-          This button isn&apos;t focusable (but isn&apos;t disabled or indeterminate either)
-        </Button>
-        {buttonPressed ? (
-          <Text
-            /* For Android E2E testing purposes, testProps must be passed in after accessibilityLabel. */
-            {...testProps(BUTTON_ON_PRESS)}
-          >
-            Button Pressed
-          </Text>
-        ) : null}
-        {keyDetected ? (
-          <Text /* For Android E2E testing purposes, testProps must be passed in after accessibilityLabel. */ {...testProps(BUTTON_ON_KEY)}>
-            Button Key Press detected: {keyDetected}
-          </Text>
-        ) : null}
-      </Stack>
-    </View>
-  );
-};

package/src/TestComponents/Button/ToggleButtonTestSection.tsx

@@ -1,62 +0,0 @@
-import * as React from 'react';
-import { StyleSheet, View } from 'react-native';
-
-import { ToggleButton } from '@fluentui/react-native';
-import { Checkbox } from '@fluentui/react-native';
-
-import { commonTestStyles, testContentRootViewStyle } from '../Common/styles';
-
-const styles = StyleSheet.create({
-  row: {
-    flexDirection: 'row',
-  },
-  checkbox: {
-    ...commonTestStyles.vmargin,
-    marginHorizontal: 8,
-  },
-});
-
-export const ToggleButtonTest: React.FunctionComponent = () => {
-  const [defaultChecked, setDefaultChecked] = React.useState(false);
-  const onDefaultClicked = React.useCallback(() => setDefaultChecked(!defaultChecked), [defaultChecked, setDefaultChecked]);
-  const [subtleChecked, setSubtleChecked] = React.useState(false);
-  const onGhostClicked = React.useCallback(() => setSubtleChecked(!subtleChecked), [subtleChecked, setSubtleChecked]);
-
-  return (
-    <View style={testContentRootViewStyle}>
-      <View style={styles.row}>
-        <ToggleButton onClick={onDefaultClicked} checked={defaultChecked} style={commonTestStyles.vmargin}>
-          Default Toggle
-        </ToggleButton>
-        <Checkbox checked={defaultChecked} label="Default Toggle is Checked" style={styles.checkbox} />
-      </View>
-      <ToggleButton checked style={commonTestStyles.vmargin}>
-        Checked Default Toggle
-      </ToggleButton>
-      <ToggleButton checked={false} style={commonTestStyles.vmargin}>
-        Unchecked Default Toggle
-      </ToggleButton>
-      <ToggleButton appearance="primary" defaultChecked style={commonTestStyles.vmargin}>
-        Checked Primary Toggle
-      </ToggleButton>
-      <ToggleButton disabled defaultChecked appearance="primary" style={commonTestStyles.vmargin}>
-        Checked Primary Toggle Disabled
-      </ToggleButton>
-      <ToggleButton appearance="primary" style={commonTestStyles.vmargin}>
-        Unchecked Primary Toggle
-      </ToggleButton>
-      <View style={styles.row}>
-        <ToggleButton appearance="subtle" onClick={onGhostClicked} checked={subtleChecked} style={commonTestStyles.vmargin}>
-          Subtle Toggle
-        </ToggleButton>
-        <Checkbox checked={subtleChecked} label="Subtle Toggle is Checked" style={styles.checkbox} />
-      </View>
-      <ToggleButton appearance="subtle" checked style={commonTestStyles.vmargin}>
-        Checked Subtle Toggle
-      </ToggleButton>
-      <ToggleButton appearance="subtle" checked={false} style={commonTestStyles.vmargin}>
-        Unchecked Subtle Toggle
-      </ToggleButton>
-    </View>
-  );
-};

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

@@ -1,29 +0,0 @@
-import * as React from 'react';
-
-import { Button } from '@fluentui/react-native';
-import type { IFocusable } from '@fluentui-react-native/interactive-hooks';
-import { Stack } from '@fluentui-react-native/stack';
-
-import { stackStyle } from '../../Common/styles';
-
-export const ButtonFocusTest_deprecated: React.FunctionComponent = () => {
-  const [state, setState] = React.useState({
-    focused: false,
-  });
-  const buttonRef = React.useRef<IFocusable>(null);
-
-  const onFocus = React.useCallback(() => {
-    setState({ focused: !state.focused });
-    if (buttonRef.current && !state.focused) {
-      buttonRef.current.focus();
-    }
-  }, [state, setState]);
-
-  return (
-    <Stack style={stackStyle}>
-      <Button content={state.focused ? 'Focused' : 'Not Focused'} componentRef={buttonRef} accessibilityLabel="overridden button name" />
-      <Button content="Click to focus" onClick={onFocus} tooltip="button tooltip" />
-      <Button content="Disabled Button" onClick={onFocus} tooltip="disabled button" disabled />
-    </Stack>
-  );
-};

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

@@ -1,35 +0,0 @@
-import * as React from 'react';
-import { Platform, View } from 'react-native';
-
-import { Button, Text } from '@fluentui/react-native';
-import { Stack } from '@fluentui-react-native/stack';
-
-import { testImage, svgProps } from '../../Common/iconExamples';
-import { stackStyle } from '../../Common/styles';
-
-const CustomizedIconButton = Button.customize({
-  tokens: { iconColor: 'red' },
-  content: { style: { marginStart: 5 } },
-});
-
-export const ButtonIconTest_deprecated: React.FunctionComponent = () => {
-  // SVG-based icons are not available on all platforms yet
-  const svgIconsEnabled = ['ios', 'macos', 'win32', 'android'].includes(Platform.OS as string);
-  const iconProps = { svgSource: svgProps, width: 20, height: 20 };
-
-  return (
-    <View>
-      <Stack style={stackStyle}>
-        <Button startIcon={testImage} content="Button with png Icon" tooltip="button tooltip" />
-        {svgIconsEnabled ? (
-          <Button startIcon={{ ...iconProps, color: 'red' }} content="Button with svg Icon" tooltip="button tooltip" />
-        ) : null}
-        {svgIconsEnabled ? (
-          <CustomizedIconButton startIcon={iconProps} content="Button with Customized Icon" tooltip="button tooltip" />
-        ) : null}
-        <Text>End Button icon</Text>
-        {svgIconsEnabled ? <CustomizedIconButton endIcon={iconProps} content="Button with Right Icon" tooltip="button tooltip" /> : null}
-      </Stack>
-    </View>
-  );
-};

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

@@ -1,51 +0,0 @@
-import * as React from 'react';
-import { View } from 'react-native';
-
-import { Button, Text } from '@fluentui/react-native';
-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 '@fluentui-react-native/e2e-testing';
-import { Stack } from '@fluentui-react-native/stack';
-
-import { stackStyle } from '../../Common/styles';
-import { testProps } from '../../Common/TestProps';
-
-export const E2EButtonTest_deprecated: React.FunctionComponent = () => {
-  const [buttonPressed, setButtonPressed] = React.useState(false);
-
-  const onClick = React.useCallback(() => {
-    setButtonPressed(!buttonPressed);
-  }, [buttonPressed]);
-
-  return (
-    <View>
-      <Stack style={stackStyle}>
-        <Button
-          content="This is a button for E2E testing"
-          onClick={onClick}
-          accessibilityLabel={BUTTON_ACCESSIBILITY_LABEL_DEPRECATED}
-          /* For Android E2E testing purposes, testProps must be passed in after accessibilityLabel. */
-          {...testProps(BUTTON_TEST_COMPONENT_DEPRECATED)}
-        />
-        <Button
-          content={BUTTON_TEST_COMPONENT_LABEL_DEPRECATED}
-          onClick={onClick}
-          /* For Android E2E testing purposes, testProps must be passed in after accessibilityLabel. */
-          {...testProps(BUTTON_NO_A11Y_LABEL_COMPONENT_DEPRECATED)}
-        />
-        {buttonPressed ? (
-          <Text
-            /* For Android E2E testing purposes, testProps must be passed in after accessibilityLabel. */
-            {...testProps(BUTTON_ON_PRESS_DEPRECATED)}
-          >
-            Button Pressed
-          </Text>
-        ) : null}
-      </Stack>
-    </View>
-  );
-};

package/src/TestComponents/Button/index.ts

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

package/src/TestComponents/Callout/CalloutE2ETest.tsx

@@ -1,82 +0,0 @@
-import * as React from 'react';
-import type { KeyboardMetrics } from 'react-native';
-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 { testProps } from '../Common/TestProps';
-
-export const E2ECalloutTest: React.FunctionComponent = () => {
-  const [showCallout, setShowCallout] = React.useState(false);
-  const [isCalloutVisible, setIsCalloutVisible] = React.useState(false);
-  const [dismissBehaviors, setDismissBehaviors] = React.useState({
-    preventDismissOnKeyDown: false,
-    preventDismissOnClickOutside: false,
-  });
-
-  const toggleShowCallout = React.useCallback(() => {
-    setShowCallout(!showCallout);
-    setIsCalloutVisible(false);
-  }, [showCallout, setIsCalloutVisible, setShowCallout]);
-
-  const onShowCallout = React.useCallback(() => {
-    setIsCalloutVisible(true);
-  }, [setIsCalloutVisible]);
-
-  const onDismissCallout = React.useCallback(() => {
-    setIsCalloutVisible(false);
-    setShowCallout(false);
-  }, [setIsCalloutVisible, setShowCallout]);
-
-  const myRect: KeyboardMetrics = { screenX: 10, screenY: 10, width: 100, height: 100 };
-
-  return (
-    <View>
-      <View style={{ flexDirection: 'column', paddingVertical: 5 }}>
-        <Text variant="subheaderSemibold">Dismiss Behaviors</Text>
-        <View style={{ flexDirection: 'row', paddingVertical: 5 }}>
-          {Object.entries(dismissBehaviors).map(([behavior, checked], i) => (
-            <Switch
-              label={behavior}
-              checked={checked}
-              onChange={(_, isChecked) => setDismissBehaviors({ ...dismissBehaviors, [behavior]: isChecked })}
-              key={i}
-            />
-          ))}
-        </View>
-        <Button
-          onClick={toggleShowCallout}
-          /* For Android E2E testing purposes, testProps must be passed in after accessibilityLabel. */
-          {...testProps(BUTTON_TO_OPEN_CALLOUT)}
-        >
-          Press for Callout
-        </Button>
-        <Text selectable={true}>
-          <Text>Visibility: </Text>
-          {isCalloutVisible ? <Text style={{ color: 'green' }}>Visible</Text> : <Text style={{ color: 'red' }}>Not Visible</Text>}
-        </Text>
-      </View>
-
-      {showCallout && (
-        <Callout
-          anchorRect={myRect}
-          onDismiss={onDismissCallout}
-          onShow={onShowCallout}
-          accessibilityLabel={CALLOUT_ACCESSIBILITY_LABEL}
-          accessibilityRole="alert"
-          accessibilityOnShowAnnouncement="Be informed that a customized callout has been opened."
-          dismissBehaviors={Object.keys(dismissBehaviors).filter((behavior) => dismissBehaviors[behavior]) as DismissBehaviors[]}
-          /* For Android E2E testing purposes, testProps must be passed in after accessibilityLabel. */
-          {...testProps(CALLOUT_TEST_COMPONENT)}
-        >
-          <View style={{ padding: 20, borderWidth: 2, borderColor: 'black' }}>
-            <Text>just some text so it does not take focus and is not empty.</Text>
-          </View>
-        </Callout>
-      )}
-    </View>
-  );
-};