@fluentui-react-native/tester-core 0.1.1

package/src/TestComponents/Button/ButtonHOCTestSection.tsx

@@ -0,0 +1,57 @@
+import * as React from 'react';
+import { Platform, View } from 'react-native';
+
+import { ButtonV1 as Button } from '@fluentui/react-native';
+import type { InteractionEvent } from '@fluentui-react-native/interactive-hooks';
+import { isGestureResponderEvent } from '@fluentui-react-native/interactive-hooks';
+import { TextV1 as Text } from '@fluentui-react-native/text';
+
+import { svgProps } from '../Common/iconExamples';
+import { commonTestStyles, stackStyle } from '../Common/styles';
+
+const CustomText = Text.customize({ fontSize: 'header', color: '#ad0258' });
+const CustomButton = Button.customize({ backgroundColor: 'pink' });
+const CustomIconButton = Button.customize({ iconColor: 'yellow' });
+const ComposedButton = Button.compose({
+  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+  // @ts-ignore Not all slots have to be overridden for compose to work
+  slots: {
+    content: CustomText,
+  },
+  slotProps: {
+    content: {
+      style: { marginTop: -1, marginBottom: 1, marginStart: 0, marginEnd: -2 },
+    },
+  },
+});
+
+export const ButtonHOCTest: React.FunctionComponent = () => {
+  const buttonRef = React.useRef(null);
+  const svgIconsEnabled = ['ios', 'macos', 'win32', 'android'].includes(Platform.OS as string);
+
+  return (
+    <View style={stackStyle}>
+      <CustomButton style={commonTestStyles.vmargin} componentRef={buttonRef}>
+        Customized Button with ref
+      </CustomButton>
+      {svgIconsEnabled && <CustomIconButton icon={{ svgSource: svgProps }}>Customized Icon Button</CustomIconButton>}
+      <Button
+        style={commonTestStyles.vmargin}
+        onClick={(e: InteractionEvent) => {
+          console.log(e.timeStamp);
+
+          if (isGestureResponderEvent(e)) {
+            console.log('I was clicked!');
+          }
+
+          if (buttonRef.current) {
+            buttonRef.current.focus();
+          }
+        }}
+      >
+        Press to focus Customized Button
+      </Button>
+      <ComposedButton style={commonTestStyles.vmargin}>Composed button using customized Text for text slot</ComposedButton>
+    </View>
+  );
+};

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

@@ -0,0 +1,29 @@
+import * as React from 'react';
+import { View } from 'react-native';
+
+import { ButtonV1 as Button } from '@fluentui/react-native';
+
+import { testImage, svgProps } from '../Common/iconExamples';
+import { commonTestStyles, testContentRootViewStyle } from '../Common/styles';
+
+export const ButtonIconTest: React.FunctionComponent = () => {
+  const fontBuiltInProps = {
+    fontFamily: 'Arial',
+    codepoint: 0x2663,
+    fontSize: 24,
+  };
+
+  return (
+    <View style={testContentRootViewStyle}>
+      <Button icon={{ fontSource: fontBuiltInProps }} style={commonTestStyles.vmargin}>
+        Font icon
+      </Button>
+      <Button appearance="accent" icon={{ svgSource: svgProps, color: 'black' }} style={commonTestStyles.vmargin}>
+        SVG
+      </Button>
+      <Button icon={testImage} style={commonTestStyles.vmargin}>
+        PNG
+      </Button>
+    </View>
+  );
+};

package/src/TestComponents/Button/ButtonIconTestSection.tsx

@@ -0,0 +1,72 @@
+import * as React from 'react';
+import { Platform, View, StyleSheet } from 'react-native';
+
+import { ButtonV1 as Button } from '@fluentui/react-native';
+import { SvgXml } from 'react-native-svg';
+
+import { testImage, svgProps, iconProps } from '../Common/iconExamples';
+import { commonTestStyles, testContentRootViewStyle } from '../Common/styles';
+
+const styles = StyleSheet.create({
+  balloon: { paddingStart: 4 },
+});
+
+export const ButtonIconTest: React.FunctionComponent = () => {
+  const fontBuiltInProps = {
+    fontFamily: 'Arial',
+    codepoint: 0x2663,
+    fontSize: 24,
+  };
+
+  const svgIconsEnabled = ['ios', 'macos', 'win32', 'android'].includes(Platform.OS as string);
+
+  const balloonXml = `
+          <svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M5.00498 3.4296C5.04386 3.15621 5.29701 2.9661 5.5704 3.00498C6.30797 3.10988 6.89039 3.69171 6.9962 4.42897C7.03543 4.70232 6.84564 4.9557 6.5723 4.99493C6.29896 5.03416 6.04557 4.84437 6.00634 4.57103C5.96366 4.27364 5.7271 4.03733 5.4296 3.99502C5.15621 3.95614 4.9661 3.70299 5.00498 3.4296ZM2 4.36364C2 2.48429 3.58918 1 5.5 1C7.41082 1 9 2.48429 9 4.36364C9 5.59911 8.53933 6.7387 7.8958 7.57241C7.38607 8.23279 6.71092 8.76136 6 8.93727V9.39999C6 9.62091 6.17909 9.79999 6.4 9.79999H7.60001C8.37321 9.79999 9.00001 10.4268 9.00001 11.2V11.5C9.00001 11.7761 8.77615 12 8.50001 12C8.22386 12 8.00001 11.7761 8.00001 11.5V11.2C8.00001 10.9791 7.82092 10.8 7.60001 10.8H6.4C5.6268 10.8 5 10.1732 5 9.39999V8.93735C4.28929 8.7617 3.61415 8.23398 3.10428 7.57379C2.4606 6.74035 2 5.60069 2 4.36364ZM5.5 2C4.09711 2 3 3.0799 3 4.36364C3 5.35685 3.37273 6.28538 3.89572 6.96255C4.43393 7.65943 5.05441 8 5.5 8C5.94529 8 6.56577 7.65894 7.1042 6.96139C7.62734 6.28363 8 5.35505 8 4.36364C8 3.0799 6.90289 2 5.5 2Z" fill="#212121"/>
+          </svg>`;
+
+  return (
+    <View style={testContentRootViewStyle}>
+      <Button icon={{ fontSource: { ...fontBuiltInProps, fontSize: 32 }, color: '#060' }} style={commonTestStyles.vmargin}>
+        Font icon
+      </Button>
+      <Button
+        icon={{ fontSource: { ...fontBuiltInProps, fontSize: 32 }, color: '#060' }}
+        style={commonTestStyles.vmargin}
+        iconPosition="after"
+      >
+        Icon after
+      </Button>
+      <Button icon={{ fontSource: fontBuiltInProps }} style={commonTestStyles.vmargin}>
+        Font icon
+      </Button>
+      <Button appearance="primary" icon={{ fontSource: fontBuiltInProps }} style={commonTestStyles.vmargin}>
+        Font icon
+      </Button>
+      {svgIconsEnabled && (
+        <>
+          <Button appearance="primary" icon={{ svgSource: svgProps, color: 'red' }} style={commonTestStyles.vmargin}>
+            SVG
+          </Button>
+          <Button icon={iconProps} style={commonTestStyles.vmargin}>
+            SVG
+          </Button>
+        </>
+      )}
+      <Button appearance="primary" icon={testImage} style={commonTestStyles.vmargin}>
+        PNG
+      </Button>
+      <Button icon={testImage} style={commonTestStyles.vmargin}>
+        PNG
+      </Button>
+      {svgIconsEnabled && (
+        <Button style={commonTestStyles.vmargin} icon={iconProps}>
+          Icon Button and Balloon
+          <View style={styles.balloon}>
+            <SvgXml xml={balloonXml} />
+          </View>
+        </Button>
+      )}
+    </View>
+  );
+};

package/src/TestComponents/Button/ButtonShapeTestSection.tsx

@@ -0,0 +1,49 @@
+import * as React from 'react';
+import { View } from 'react-native';
+
+import { ButtonV1 as Button, CompoundButton } from '@fluentui/react-native';
+
+import { commonTestStyles, testContentRootViewStyle } from '../Common/styles';
+
+export const ButtonShapeTest: React.FunctionComponent = () => {
+  return (
+    <View style={testContentRootViewStyle}>
+      <Button shape="rounded" style={commonTestStyles.vmargin}>
+        Default Rounded Button
+      </Button>
+      <Button shape="square" style={commonTestStyles.vmargin}>
+        Square Button
+      </Button>
+      <Button shape="circular" style={commonTestStyles.vmargin}>
+        Circular Button
+      </Button>
+      <Button appearance="primary" shape="rounded" style={commonTestStyles.vmargin}>
+        Primary Rounded Button
+      </Button>
+      <Button appearance="primary" shape="square" style={commonTestStyles.vmargin}>
+        Square Button
+      </Button>
+      <Button appearance="primary" shape="circular" style={commonTestStyles.vmargin}>
+        Circular Button
+      </Button>
+      <CompoundButton secondaryContent="rounded" shape="rounded" style={commonTestStyles.vmargin}>
+        Compound Button
+      </CompoundButton>
+      <CompoundButton secondaryContent="square" shape="square" style={commonTestStyles.vmargin}>
+        Compound Button
+      </CompoundButton>
+      <CompoundButton secondaryContent="circular" shape="circular" style={commonTestStyles.vmargin}>
+        Compound Button
+      </CompoundButton>
+      <CompoundButton appearance="primary" secondaryContent="rounded" shape="rounded" style={commonTestStyles.vmargin}>
+        Compound Button
+      </CompoundButton>
+      <CompoundButton appearance="primary" secondaryContent="square" shape="square" style={commonTestStyles.vmargin}>
+        Compound Button
+      </CompoundButton>
+      <CompoundButton appearance="primary" secondaryContent="circular" shape="circular" style={commonTestStyles.vmargin}>
+        Compound Button
+      </CompoundButton>
+    </View>
+  );
+};

package/src/TestComponents/Button/ButtonSizeTestSection.tsx

@@ -0,0 +1,146 @@
+import * as React from 'react';
+import { Platform, View } from 'react-native';
+
+import { ButtonV1 as Button, CompoundButton, FAB } from '@fluentui/react-native';
+
+import { iconProps } from '../Common/iconExamples';
+import { commonTestStyles, testContentRootViewStyle } from '../Common/styles';
+
+const isMobile = Platform.OS === 'android' || Platform.OS === 'ios';
+
+export const ButtonSizeTest: React.FunctionComponent = () => {
+  const svgIconsEnabled = ['ios', 'macos', 'win32', 'android'].includes(Platform.OS as string);
+
+  return (
+    <View style={testContentRootViewStyle}>
+      {svgIconsEnabled && (
+        <>
+          <Button
+            iconOnly
+            size="small"
+            icon={iconProps}
+            accessibilityLabel="Small size button with accessibility icon"
+            style={commonTestStyles.vmargin}
+            tooltip="button tooltip"
+          />
+          <Button
+            iconOnly
+            size="small"
+            appearance="primary"
+            icon={iconProps}
+            accessibilityLabel="Small size button with accessibility icon"
+            style={commonTestStyles.vmargin}
+            tooltip="button tooltip"
+          />
+          <Button
+            iconOnly
+            size="medium"
+            icon={iconProps}
+            accessibilityLabel="Medium size button with accessibility icon"
+            style={commonTestStyles.vmargin}
+          />
+          <Button
+            iconOnly
+            size="medium"
+            appearance="primary"
+            icon={iconProps}
+            accessibilityLabel="Medium size button with accessibility icon"
+            style={commonTestStyles.vmargin}
+          />
+          <Button
+            iconOnly
+            size="large"
+            icon={iconProps}
+            accessibilityLabel="Large size button with accessibility icon"
+            style={commonTestStyles.vmargin}
+          />
+          <Button
+            iconOnly
+            size="large"
+            appearance="primary"
+            icon={iconProps}
+            accessibilityLabel="Large size button with accessibility icon"
+            style={commonTestStyles.vmargin}
+          />
+          <Button size="small" icon={iconProps} style={commonTestStyles.vmargin}>
+            Small Button with icon
+          </Button>
+          <Button size="small" appearance="primary" icon={iconProps} style={commonTestStyles.vmargin}>
+            Small Button with icon
+          </Button>
+          <Button size="medium" icon={iconProps} style={commonTestStyles.vmargin}>
+            Medium Button with icon
+          </Button>
+          <Button size="medium" appearance="primary" icon={iconProps} style={commonTestStyles.vmargin}>
+            Medium Button with icon
+          </Button>
+          <Button size="large" icon={iconProps} style={commonTestStyles.vmargin}>
+            Large Button with icon
+          </Button>
+          <Button size="large" appearance="primary" icon={iconProps} style={commonTestStyles.vmargin}>
+            Large Button with icon
+          </Button>
+          <FAB size="small" icon={iconProps} style={commonTestStyles.vmargin}>
+            Small FAB
+          </FAB>
+          <FAB size="large" icon={iconProps} style={commonTestStyles.vmargin}>
+            Large FAB
+          </FAB>
+        </>
+      )}
+      <Button size="small" style={commonTestStyles.vmargin}>
+        Small
+      </Button>
+      <Button size="medium" style={commonTestStyles.vmargin}>
+        Medium
+      </Button>
+      <Button size="large" style={commonTestStyles.vmargin}>
+        Large
+      </Button>
+      {!isMobile && (
+        <>
+          <Button loading size="small" style={commonTestStyles.vmargin}>
+            Loading Button Small
+          </Button>
+          <Button loading size="medium" style={commonTestStyles.vmargin}>
+            Loading Button Medium
+          </Button>
+          <Button loading size="large" style={commonTestStyles.vmargin}>
+            Loading Button Large
+          </Button>
+          <CompoundButton secondaryContent="Small compound button" size="small" style={commonTestStyles.vmargin}>
+            Compound Button
+          </CompoundButton>
+          <CompoundButton appearance="primary" secondaryContent="Small compound button" size="small" style={commonTestStyles.vmargin}>
+            Compound Button
+          </CompoundButton>
+          <CompoundButton secondaryContent="Medium compound button" size="medium" style={commonTestStyles.vmargin}>
+            Compound Button
+          </CompoundButton>
+          <CompoundButton appearance="primary" secondaryContent="Medium compound button" size="medium" style={commonTestStyles.vmargin}>
+            Compound Button
+          </CompoundButton>
+          <CompoundButton secondaryContent="Large compound button" size="large" style={commonTestStyles.vmargin}>
+            Compound Button
+          </CompoundButton>
+          <CompoundButton appearance="primary" secondaryContent="Large compound button" size="large" style={commonTestStyles.vmargin}>
+            Compound Button
+          </CompoundButton>
+          {svgIconsEnabled && (
+            <>
+              <CompoundButton icon={iconProps} secondaryContent="SecondaryContent" size="small" style={commonTestStyles.vmargin}>
+                Content
+              </CompoundButton>
+              <CompoundButton icon={iconProps} secondaryContent="SecondaryContent" size="medium" style={commonTestStyles.vmargin}>
+                Content
+              </CompoundButton>
+              <CompoundButton icon={iconProps} secondaryContent="SecondaryContent" size="large" style={commonTestStyles.vmargin}>
+                Content
+              </CompoundButton>
+            </>
+          )}
+        </>
+      )}
+    </View>
+  );
+};

package/src/TestComponents/Button/ButtonTest.tsx

@@ -0,0 +1,98 @@
+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';
+import { ButtonFocusTest_deprecated } from './deprecated/ButtonFocusTest';
+import { ButtonIconTest_deprecated } from './deprecated/ButtonIconTest';
+import { E2EButtonTest_deprecated } from './deprecated/E2EButtonTest';
+import { E2EButtonTest } from './E2EButtonTest';
+import { ToggleButtonTest } from './ToggleButtonTestSection';
+import { ButtonHOCTest } from '../Button/ButtonHOCTestSection';
+import { ButtonIconTest } from '../Button/ButtonIconTestSection';
+import type { TestSection, PlatformStatus } from '../Test';
+import { Test } from '../Test';
+
+const buttonSections: TestSection[] = [
+  {
+    name: 'Button Variants',
+    testID: BUTTON_TESTPAGE,
+    component: ButtonVariantTest,
+  },
+  {
+    name: 'Icon Button',
+    component: ButtonIconTest,
+  },
+  ...Platform.select({
+    // The following sections are not supported for iOS or Android
+    ios: [],
+    android: [],
+    default: [
+      {
+        name: 'Toggle Button',
+        component: ToggleButtonTest,
+      },
+      {
+        name: 'Button Shape',
+        component: ButtonShapeTest,
+      },
+    ],
+  }),
+  {
+    name: 'Sizes',
+    component: ButtonSizeTest,
+  },
+  Platform.select({
+    android: null,
+    default: {
+      name: 'Customize, Compose, and Ref',
+      component: ButtonHOCTest,
+    },
+  }),
+  ...Platform.select({
+    android: [], // Following sections are not supported from Fluent Android
+    default: [
+      {
+        name: 'Deprecated Basic Button',
+        component: ButtonFocusTest_deprecated,
+      },
+      {
+        name: 'Deprecated Icon Button',
+        component: ButtonIconTest_deprecated,
+      },
+    ],
+  }),
+];
+
+const e2eSections: TestSection[] = [
+  {
+    name: 'E2E Button Testing',
+    component: E2EButtonTest,
+  },
+  {
+    name: 'Deprecated E2E Button Testing',
+    component: E2EButtonTest_deprecated,
+  },
+];
+
+export const ButtonTest: React.FunctionComponent = () => {
+  const status: PlatformStatus = {
+    win32Status: 'Production',
+    uwpStatus: 'Backlog',
+    iosStatus: 'Production',
+    macosStatus: 'Production',
+    androidStatus: 'Production',
+  };
+
+  const description =
+    'Buttons are best used to enable a user to commit a change or complete steps in a task. They are typically found inside forms, dialogs, panels or pages. An example of their usage is confirming the deletion of a file in a confirmation dialog.\n\nWhen considering their place in a layout, contemplate the order in which a user will flow through the UI. As an example, in a form, the individual will need to read and interact with the form fields before submiting the form. Therefore, as a general rule, the button should be placed at the bottom of the UI container (a dialog, panel, or page) which holds the related UI elements.\n\nWhile buttons can technically be used to navigate a user to another part of the experience, this is not recommended unless that navigation is part of an action or their flow.';
+
+  const spec = 'https://github.com/microsoft/fluentui-react-native/blob/main/packages/components/Button/SPEC.md';
+
+  return (
+    <Test name="Button Test" description={description} spec={spec} sections={buttonSections} status={status} e2eSections={e2eSections} />
+  );
+};

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

@@ -0,0 +1 @@
+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,47 @@
+import * as React from 'react';
+import { View } from 'react-native';
+
+import { ButtonV1 as Button, FAB } from '@fluentui-react-native/button';
+
+import { iconProps } from '../Common/iconExamples';
+import { commonTestStyles, testContentRootViewStyle } from '../Common/styles';
+
+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} accessibilityLabel="FAB" />
+      <FAB icon={iconProps} style={commonTestStyles.vmargin} showContent={showFABText} onClick={flipFABcontent}>
+        Click Me!
+      </FAB>
+      <FAB appearance="subtle" iconOnly disabled icon={iconProps} style={commonTestStyles.vmargin} accessibilityLabel="FAB" />
+      <FAB appearance="subtle" icon={iconProps} style={commonTestStyles.vmargin} showContent={showFABText} onClick={flipFABcontent}>
+        Click Me!
+      </FAB>
+    </View>
+  );
+};

package/src/TestComponents/Button/ButtonVariantTestSection.tsx

@@ -0,0 +1,53 @@
+import * as React from 'react';
+import { View } from 'react-native';
+
+import { ButtonV1 as Button, CompoundButton, FAB } from '@fluentui-react-native/button';
+
+import { iconProps } from '../Common/iconExamples';
+import { commonTestStyles, testContentRootViewStyle } from '../Common/styles';
+
+// Test also pulls button from deprecated package to ensure it's still working
+export const ButtonVariantTest: React.FunctionComponent = () => {
+  return (
+    <View style={testContentRootViewStyle}>
+      <Button style={commonTestStyles.vmargin}>Default</Button>
+      <Button disabled style={commonTestStyles.vmargin}>
+        Default Disabled
+      </Button>
+      <Button appearance="primary" style={commonTestStyles.vmargin}>
+        Primary
+      </Button>
+      <Button disabled appearance="primary" style={commonTestStyles.vmargin}>
+        Primary Disabled
+      </Button>
+      <Button appearance="subtle" style={commonTestStyles.vmargin}>
+        Subtle
+      </Button>
+      <Button disabled appearance="subtle" style={commonTestStyles.vmargin}>
+        Subtle Disabled
+      </Button>
+      <Button loading>Loading Button</Button>
+      <Button block style={commonTestStyles.vmargin}>
+        Block
+      </Button>
+      <Button appearance="primary" block style={commonTestStyles.vmargin}>
+        Block Primary
+      </Button>
+      <Button appearance="subtle" block style={commonTestStyles.vmargin}>
+        Block Subtle
+      </Button>
+      <CompoundButton secondaryContent="Compound" style={commonTestStyles.vmargin}>
+        Default
+      </CompoundButton>
+      <CompoundButton appearance="primary" secondaryContent="Compound" style={commonTestStyles.vmargin}>
+        Primary
+      </CompoundButton>
+      <CompoundButton appearance="subtle" secondaryContent="Compound" style={commonTestStyles.vmargin}>
+        Subtle
+      </CompoundButton>
+      <FAB icon={iconProps} style={commonTestStyles.vmargin}>
+        FAB
+      </FAB>
+    </View>
+  );
+};

package/src/TestComponents/Button/E2EButtonTest.tsx

@@ -0,0 +1,112 @@
+import * as React from 'react';
+import { View } from 'react-native';
+import type { NativeKeyEvent, HandledKeyEvent } from '@fluentui-react-native/adapters';
+
+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 { stackStyle } from '../Common/styles';
+import { testProps } from '../Common/TestProps';
+
+function keyEvent(key: string): HandledKeyEvent {
+  return {
+    key,
+    shiftKey: false,
+    ctrlKey: false,
+    altKey: false,
+    metaKey: 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: NativeKeyEvent) => {
+      if (args.nativeEvent.key === 'a') {
+        setKeyDetected('a (down)');
+        args.stopPropagation();
+      }
+    },
+    keyUpEvents: [keyEvent('b')],
+    onKeyUp: (args: NativeKeyEvent) => {
+      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>
+  );
+};