@fluentui-react-native/tester-core 0.1.1

package/src/TestComponents/Button/ToggleButtonTestSection.tsx

@@ -0,0 +1,62 @@
+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

@@ -0,0 +1,29 @@
+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

@@ -0,0 +1,35 @@
+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

@@ -0,0 +1,51 @@
+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

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

package/src/TestComponents/Callout/CalloutE2ETest.tsx

@@ -0,0 +1,82 @@
+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>
+  );
+};